/* BeeSmart Spelling Bee Website Styles (v2.1)
   Theme: warm yellow gradient to match app UI, with accessible contrast.
*/
:root{
   /* Brand honey theme */
   --honey-50:#fff8db;--honey-100:#fff3b0;--honey-200:#ffe58a;--honey-300:#ffd36a;--honey-400:#ffc341;--honey-500:#ffb300;
   --nectar-500:#f59e0b; /* warm orange for notices */
   --clover-500:#22c55e; --clover-600:#16a34a;
   --sky-500:#3b82f6; --sky-700:#1d4ed8;
   --grape-500:#7c3aed; --grape-600:#6d28d9;
   --coral-500:#ec4899; --coral-600:#db2777;

   /* Base tokens */
   --bg:var(--honey-100);--bg-2:var(--honey-300);--card:#fffdf8;--text:#1e293b;--muted:#475569;--accent:var(--honey-500);--accent-2:#10b981;--danger:#d64545;--success:#16a34a;--focus:#2563eb
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--honey-100) 0%,var(--honey-300) 100%);color:var(--text);line-height:1.6}
a{color:#0b72c3}
a:hover,a:focus{color:#095a9a}
img{max-width:100%;height:auto}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:1rem;text-align:left}
.header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:3px solid transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-inner{display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:.75rem 1rem;gap:.75rem}
.brand-row{display:flex;align-items:center;justify-content:center;min-height:2.6rem}
.beesmart-header{width:100%}
.nav-buttons{display:flex;list-style:none;margin:0;padding:0;gap:.75rem;justify-content:center;flex-wrap:wrap}
.nav-buttons li a{display:flex;align-items:center;gap:.4rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:600;color:#fff;background:linear-gradient(90deg,#FFD700,#FF8C00);padding:.65rem 1.25rem;border-radius:30px;text-decoration:none;box-shadow:0 0 10px rgba(255,239,0,0.5);transition:transform 0.2s,box-shadow 0.2s;font-size:.95rem}
.nav-buttons li a:hover,.nav-buttons li a:focus{transform:scale(1.05);box-shadow:0 0 20px rgba(255,239,0,0.8)}
.nav-buttons li a span{font-size:1.1rem}
.beesmart-subnav{width:100%;background:transparent;border-radius:15px;padding:.4rem}
.sub-buttons{display:flex;list-style:none;margin:0;padding:0;gap:.5rem;justify-content:center;flex-wrap:wrap}
.sub-buttons li a{display:inline-flex;align-items:center;gap:.3rem;font-weight:500;color:#2d1f00;background:linear-gradient(135deg,var(--honey-200),var(--honey-300));padding:.45rem 1rem;border-radius:20px;text-decoration:none;box-shadow:0 2px 8px rgba(255,195,11,0.3);transition:all 0.2s;font-size:.85rem;border:2px solid transparent}
.sub-buttons li a:hover,.sub-buttons li a:focus{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,195,11,0.5);border-color:var(--honey-500)}

/* Collapsible header navigation
   - Hidden by default (so it's hidden immediately on load)
   - Desktop (hover devices): reveal on header hover/focus
   - Mobile/touch: reveal only when JS toggles .nav-open
*/
.header .beesmart-header,
.header .beesmart-subnav{display:none}

@keyframes navReveal{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.header.nav-open .beesmart-header,
.header.nav-open .beesmart-subnav{display:block;animation:navReveal .18s ease-out both}

.header.nav-open .beesmart-header{animation:navReveal .18s ease-out both}

@media (hover: hover) and (pointer: fine){
  /* Only allow hover-to-open after the user has moved the pointer once.
     This prevents the menu from appearing open on initial load when the
     pointer is already resting over the top of the page. */
  .header.nav-can-hover:hover .beesmart-header,
  .header.nav-can-hover:hover .beesmart-subnav,
  .header:focus-within .beesmart-header,
  .header:focus-within .beesmart-subnav{display:block;animation:navReveal .18s ease-out both}

  .header.nav-can-hover:hover .beesmart-header,
  .header:focus-within .beesmart-header{animation:navReveal .18s ease-out both}
}

/* Transparent header while collapsed */
.header:not(.nav-open):not(.nav-can-hover:hover):not(:focus-within){
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Menu toggle button (injected by JS) */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  font-weight:600;
  color:#2d1f00;
  background:linear-gradient(135deg,var(--honey-200),var(--honey-300));
  padding:.45rem .9rem;
  border-radius:999px;
  border:2px solid transparent;
  box-shadow:0 2px 8px rgba(255,195,11,0.25);
  cursor:pointer;
  line-height:1;
  font-size:1.05rem;
  min-width:2.4rem;
  position:fixed;
  top:.6rem;
  right:.75rem;
  z-index:60;
}
.nav-toggle:hover,.nav-toggle:focus{border-color:var(--honey-500)}

/* Keep header spacing tighter when nav is collapsed */
.header:not(.nav-open):not(.nav-can-hover:hover):not(:focus-within) .header-inner{gap:.5rem}

/* Subnav "More" dropdown: stacked, same-size, centered buttons */
.sub-buttons details{position:relative}
.sub-buttons summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  font-weight:500;
  color:#2d1f00;
  background:linear-gradient(135deg,var(--honey-200),var(--honey-300));
  padding:.45rem 1rem;
  border-radius:20px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(255,195,11,0.3);
  transition:all 0.2s;
  font-size:.85rem;
  border:2px solid transparent;
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.sub-buttons summary:hover,
.sub-buttons summary:focus{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,195,11,0.5);
  border-color:var(--honey-500);
}
.sub-buttons summary::-webkit-details-marker{display:none}

.sub-buttons details > ul.dropdown{
  position:absolute;
  top:calc(100% + .55rem);
  left:50%;
  transform:translateX(-50%);
  margin:0;
  padding:.6rem;
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  background:rgba(255,255,255,0.96);
  border-radius:16px;
  border:2px solid var(--honey-400);
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  z-index:200;
  min-width:min(320px, 92vw);
}
.sub-buttons details > ul.dropdown li{margin:0;width:100%;display:flex;justify-content:center}
.sub-buttons details > ul.dropdown a{
  width:min(260px, 86vw);
  justify-content:center;
}

/* Simple header navigation (non-home pages)
   Many pages use <nav><ul>...</ul></nav> without .nav-buttons/.sub-buttons.
   Style those lists to avoid stacked bullet menus.
*/
.header nav ul:not(.nav-buttons):not(.sub-buttons){
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.header nav ul:not(.nav-buttons):not(.sub-buttons) li{margin:0;padding:0}
.header nav ul:not(.nav-buttons):not(.sub-buttons) a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:#2d1f00;
  background:linear-gradient(135deg,var(--honey-200),var(--honey-300));
  padding:.5rem .95rem;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(255,195,11,0.25);
  transition:transform .15s,box-shadow .15s,border-color .15s;
  border:2px solid transparent;
  font-size:.9rem;
}
.header nav ul:not(.nav-buttons):not(.sub-buttons) a:hover,
.header nav ul:not(.nav-buttons):not(.sub-buttons) a:focus{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,195,11,0.45);
  border-color:var(--honey-500);
}

/* Brand logo (shield badge) */
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text)}
.brand img{width:clamp(28px, 6vw, 40px);height:auto;display:block}
.brand span{font-weight:700;font-size:1.05rem}
/* Keep logo visible on mobile; optionally shrink further */
@media (max-width:600px){
  .brand img{width:32px}
  .brand span{font-size:.95rem}
}

/* Hero badge sizing */
.hero-badge{max-width:min(380px, 85vw);margin-inline:auto}
@media (max-width:600px){
  .hero-badge{max-width:72vw}
}

/* What's New Section */
.whats-new{background:linear-gradient(135deg,#fff 0%,#fff8e1 100%);border-radius:20px;padding:3rem 2rem;margin:3rem 0;box-shadow:0 10px 40px rgba(0,0,0,0.1);border:3px solid var(--honey-400)}
.whats-new h2{text-align:center;color:var(--text);font-size:2.5rem;margin:0 0 1rem 0;position:relative;display:inline-block;width:100%}
.whats-new h2::before{content:'✨';margin-right:.5rem}
.whats-new h2::after{content:'🐝';margin-left:.5rem}
.whats-new .subtitle{text-align:center;color:var(--muted);font-size:1.1rem;margin:0 0 2.5rem 0}
.update-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.update-card{background:white;border-radius:15px;padding:2rem;box-shadow:0 4px 15px rgba(0,0,0,0.08);transition:all 0.3s ease;border:2px solid transparent;position:relative;overflow:hidden}
.update-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--honey-500),var(--nectar-500))}
.update-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.15);border-color:var(--honey-400)}
.update-card h3{color:var(--text);font-size:1.5rem;margin:0 0 0.75rem 0;display:flex;align-items:center;gap:0.5rem}
.update-icon{font-size:2rem;flex-shrink:0}
.update-card p{color:var(--muted);line-height:1.7;margin:0 0 1rem 0}
.update-date{color:var(--nectar-500);font-weight:600;font-size:0.9rem;margin-bottom:0.5rem}
.update-badge{display:inline-block;background:linear-gradient(135deg,var(--honey-400),var(--nectar-500));color:white;padding:0.4rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;margin-top:0.5rem}

/* Mobile responsive navigation */
@media (max-width:768px){
  .nav-buttons{gap:.5rem}
  .nav-buttons li a{padding:.55rem 1rem;font-size:.9rem}
  .sub-buttons{gap:.4rem}
  .sub-buttons li a{padding:.4rem .8rem;font-size:.8rem}
  .whats-new{padding:2rem 1.5rem;margin:2rem 0}
  .whats-new h2{font-size:2rem}
  .update-cards{grid-template-columns:1fr;gap:1.25rem}
  .update-card{padding:1.5rem}
}

@media (max-width:480px){
  .nav-buttons{gap:.4rem;padding:0 .5rem}
  .nav-buttons li a{padding:.5rem .85rem;font-size:.85rem;gap:.3rem}
  .nav-buttons li a span{font-size:1rem}
  .sub-buttons{gap:.3rem}
  .sub-buttons li a{padding:.35rem .7rem;font-size:.75rem}
  .brand span{font-size:.9rem}
}

/* Buttons */
.btn{display:inline-block;padding:.9rem 1.1rem;border-radius:.8rem;border:2px solid transparent;font-weight:700;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--accent);color:#2d1f00}
.btn-primary:hover,.btn-primary:focus{filter:brightness(0.95)}
.btn-outline{border-color:#d9c48f; color:var(--text); background:transparent}
.btn-outline:hover,.btn-outline:focus{background:#fff1bf}

/* Hero */
.hero{display:grid;gap:1.5rem;align-items:center;grid-template-columns:1.2fr .8fr;padding:0.5rem 0 2rem 0;text-align:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:2.2rem;margin:.2rem 0}
.hero p{font-size:1.05rem;color:var(--muted)}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem;justify-content:center}
.badges{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center}
.badge{background:#fff1bf;color:#3b3b20;border:1px solid #f1de9a;padding:.3rem .6rem;border-radius:.5rem;font-size:.85rem}

/* Responsive video wrapper (16:9) */
.video-wrap{position:relative;isolation:isolate;background:#000;border-radius:1rem;box-shadow:0 6px 14px rgba(0,0,0,.08);overflow:hidden}
.video-wrap::before{content:"";display:block;padding-top:56.25%}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{margin-top:.5rem;color:#475569;font-size:.95rem}

/* Sections */
.section{padding:2rem 0;border-top:1px solid #f1e4b6;text-align:center}
.section h2{font-size:1.6rem;margin-top:0;text-align:center}
.section h3{text-align:center;margin:2rem 0 1rem 0}
.section p{text-align:center;max-width:800px;margin:0 auto 1rem auto}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid #f2e6bf;border-radius:1rem;padding:1rem;box-shadow:0 6px 14px rgba(0,0,0,.06);text-align:left}
.card h3{margin-top:0}
.kid-list{margin:0;padding-left:1rem}
.kid-list li{margin:.35rem 0}

/* ===== FOOTER - PROFESSIONAL DESIGN ===== */
.footer {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
  border-top: 3px solid #ffc107 !important;
  padding: 3rem 0 2rem 0 !important;
  color: #4b5563 !important;
  text-align: center !important;
  margin-top: 4rem !important;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.1) !important;
}

.footer .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  text-align: center !important;
}

.footer p {
  margin: 0 0 1.5rem 0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
}

.footer strong {
  color: #ffc107 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.footer a {
  color: #ff8f00 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.footer a:hover {
  color: #f57c00 !important;
  text-decoration: underline !important;
}

/* Footer links - enhanced styling */
.footer-links {
  text-align: center !important;
  margin: 2rem 0 1.5rem 0 !important;
  padding: 1.5rem !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 15px !important;
  border: 2px solid rgba(255, 193, 7, 0.3) !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.1) !important;
}

.footer-links a {
  display: inline-block !important;
  margin: 0 0.75rem !important;
  padding: 0.5rem 1rem !important;
  background: rgba(255, 193, 7, 0.1) !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.footer-links a:hover {
  background: #ffc107 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3) !important;
  text-decoration: none !important;
}

.small {
  font-size: 0.9rem !important;
  color: #64748b !important;
  margin: 1rem 0 0 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(255, 193, 7, 0.2) !important;
}

.small a {
  background: rgba(255, 193, 7, 0.1) !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 15px !important;
  font-weight: 600 !important;
}

.small a:hover {
  background: #ffc107 !important;
  color: white !important;
}

/* Mobile responsive footer */
@media (max-width: 768px) {
  .footer {
    padding: 2rem 0 1.5rem 0 !important;
  }
  
  .footer .container {
    padding: 0 1rem !important;
  }
  
  .footer-links {
    padding: 1rem !important;
    margin: 1.5rem 0 1rem 0 !important;
  }
  
  .footer-links a {
    margin: 0.25rem !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.9rem !important;
    display: inline-block !important;
  }
  
  .footer p {
    font-size: 0.95rem !important;
    margin: 0 0 1rem 0 !important;
  }
}

@media (max-width: 480px) {
  .footer-links a {
    display: block !important;
    margin: 0.5rem auto !important;
    max-width: 200px !important;
  }
  
  .footer p {
    font-size: 0.9rem !important;
  }
}

/* Contact confirmation specific tweaks (moved inline styles) */
.contact-confirmation h1{margin-top:0}
.contact-confirmation .signed{margin-bottom:1rem}
.contact-confirmation .confirmation-actions{gap:.5rem;flex-wrap:wrap;align-items:center}
.contact-confirmation #open-email-btn{display:none}
.contact-confirmation #copy-msg-btn{display:none}
.contact-confirmation .fallback-note{display:none;margin-top:.6rem;font-size:.95rem;color:#333}

/* Accessibility helpers */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:.5rem;top:.5rem;width:auto;height:auto;background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:.4rem}

/* Table-like avatar pricing */
.table{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.5rem;align-items:center;margin:1rem auto;max-width:600px}
.table div{padding:.4rem .6rem;background:#fff7d6;border:1px solid #f2e6bf;border-radius:.5rem;text-align:center}
.table .head{background:#ffe59e;font-weight:700}

/* Avatar sections */
.free-avatars-section, .earn-or-buy-section, .premium-avatars-section {
  margin: 2rem 0;
  text-align: center;
}

.avatar-list {
  margin: 1rem auto;
  font-weight: 500;
  text-align: center;
  max-width: 600px;
}

.avatar-name {
  color: var(--brand-honey);
  font-weight: 600;
}

/* ===== AVATAR COLLECTION - BULLETPROOF STYLES ===== */

/* Core Avatar Section Overrides */
section#monetization {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

section#monetization h2 {
  text-align: center;
  font-size: 2.5rem;
  color: var(--honey-dark);
  margin-bottom: 1rem;
}

section#monetization > p {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== TIER SECTIONS ===== */
.avatar-tier-section {
  margin: 4rem 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  background: white !important;
  border: none !important;
}

/* ===== FREE TIER ===== */
.free-tier {
  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%) !important;
  border: 3px solid #28a745 !important;
}

.free-tier .tier-header {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  color: white !important;
  padding: 2rem !important;
  text-align: center !important;
}

.free-tier .tier-header h3 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: white !important;
}

.free-tier .tier-header p {
  margin: 0 !important;
  font-size: 1.1rem !important;
  opacity: 0.95 !important;
  color: white !important;
}

.free-avatars-list {
  padding: 2.5rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  background: white !important;
}

.free-avatar-tag {
  background: linear-gradient(135deg, #28a745, #20c997) !important;
  color: white !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.free-avatar-tag:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4) !important;
}

/* ===== EARN OR BUY TIER ===== */
.earn-buy-tier {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
  border: 3px solid #ffc107 !important;
}

.earn-buy-tier .tier-header {
  background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
  color: white !important;
  padding: 2rem !important;
  text-align: center !important;
}

.earn-buy-tier .tier-header h3 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: white !important;
}

.earn-buy-tier .tier-header p {
  margin: 0 !important;
  font-size: 1.1rem !important;
  opacity: 0.95 !important;
  color: white !important;
}

/* ===== AVATAR TABLE ===== */
.avatar-table-container {
  padding: 2.5rem !important;
  background: white !important;
}

.avatar-table {
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
  background: white !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  border: 2px solid #ffc107 !important;
}

.avatar-table thead {
  background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
}

.avatar-table th {
  padding: 1.5rem 1rem !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: white !important;
  border: none !important;
}

.avatar-table td {
  padding: 1.25rem 1rem !important;
  text-align: center !important;
  border-bottom: 1px solid #f8f9fa !important;
  font-size: 1rem !important;
}

.avatar-table td strong {
  color: #ffc107 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.avatar-table tbody tr {
  transition: all 0.3s ease !important;
}

.avatar-table tbody tr:hover {
  background: linear-gradient(135deg, #fff8e1, #ffecb3) !important;
  transform: scale(1.02) !important;
}

.avatar-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ===== PREMIUM TIER ===== */
.premium-tier {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
  border: 3px solid #ff9800 !important;
}

.premium-header {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
  color: white !important;
  padding: 2rem !important;
  text-align: center !important;
}

.premium-header h3 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: white !important;
}

.premium-header p {
  margin: 0 0 1rem 0 !important;
  font-size: 1.1rem !important;
  opacity: 0.95 !important;
  color: white !important;
}

.premium-price-tag {
  background: rgba(255,255,255,0.25) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  display: inline-block !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* ===== PREMIUM AVATAR GRID ===== */
.premium-avatar-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 2rem !important;
  padding: 2.5rem !important;
  background: white !important;
}

.premium-avatar-card {
  background: white !important;
  border: 3px solid #ff9800 !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  text-align: center !important;
  transition: all 0.4s ease !important;
  position: relative !important;
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2) !important;
}

.premium-avatar-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(90deg, #ff9800, #f57c00, #ff9800) !important;
}

.premium-avatar-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(255, 152, 0, 0.4) !important;
  border-color: #f57c00 !important;
}

.avatar-icon {
  font-size: 4rem !important;
  margin-bottom: 1rem !important;
  display: block !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
}

.premium-avatar-card h4 {
  color: #ff9800 !important;
  margin: 0 0 1rem 0 !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.premium-avatar-card p {
  color: #666 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 0 2rem 0 !important;
  flex-grow: 1 !important;
}

.avatar-unlock-info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: linear-gradient(135deg, #fff8e1, #ffecb3) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 15px !important;
  margin-top: auto !important;
  border: 2px solid rgba(255, 152, 0, 0.3) !important;
}

.points-needed {
  color: #f57c00 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  background: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 25px !important;
  border: 2px solid #ff9800 !important;
}

.premium-price {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important;
  color: white !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* ===== ADDITIONAL SECTIONS ===== */

/* Honey Points Explainer */
.honey-points-explainer {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
  border: 3px solid #ffc107 !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  text-align: center !important;
  margin: 4rem 0 !important;
  box-shadow: 0 10px 30px rgba(255, 193, 7, 0.2) !important;
}

.explainer-icon {
  font-size: 4rem !important;
  margin-bottom: 1.5rem !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
}

.honey-points-explainer h3 {
  color: #ff8f00 !important;
  margin: 0 0 1.5rem 0 !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
}

.honey-points-explainer p {
  color: #e65100 !important;
  font-size: 1.2rem !important;
  line-height: 1.6 !important;
  margin: 0 auto !important;
  max-width: 700px !important;
}


.special-avatar-note p {
  color: #4a148c;
  margin: 0;
  font-size: 1.05rem;
}

.special-avatar-note strong {
  color: #7b1fa2;
}

/* Legacy avatar styles (keeping for backwards compatibility) */
.avatar-name {
  color: var(--brand-honey);
  font-weight: 600;
}

/* Mobile Responsive for New Avatar Section */
@media (max-width: 768px) {
  .avatar-tier-section {
    margin: 2rem 0;
  }
  
  .tier-header {
    padding: 1rem !important;
  }
  
  .tier-header h3 {
    font-size: 1.3rem !important;
  }
  
  .premium-avatar-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }
  
  .premium-avatar-card {
    padding: 1rem;
  }
  
  .avatar-icon {
    font-size: 2.5rem;
  }
  
  .bundle-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .avatar-table-container {
    padding: 1rem;
  }
  
  .avatar-table th,
  .avatar-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }
  
  .honey-points-explainer,
  .bundles-showcase,
  .special-avatar-note {
    margin: 2rem 0;
    padding: 1.5rem;
  }
}

/* Mobile responsive tables and grids */
@media (max-width:600px){
  .table{grid-template-columns:1.5fr 1fr 1fr;gap:.3rem;margin:1rem auto}
  .table div{padding:.3rem .4rem;font-size:.85rem}
  .avatar-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
  .avatar-card{padding:1rem}
  .avatar-card h4{font-size:1.1rem}
  .avatar-pricing{flex-direction:column;gap:0.5rem;text-align:center}
  .avatar-list{font-size:0.9rem}
  .section{text-align:center}
  .section p{text-align:center}
}

@media (max-width:480px){
  .avatar-grid{grid-template-columns:1fr}
  .hero{text-align:center}
  .cta{justify-content:center}
}

/* Callouts */
.callout{border-left:4px solid var(--accent);background:#fff3c2;padding:1rem;border-radius:.5rem;color:#1f2937;text-align:center;max-width:800px;margin:1rem auto}
.success{border-left-color:var(--success)}
.danger{border-left-color:var(--danger)}

/* Modal (parental gate) */
.dialog{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#00000066}
.dialog[open]{display:flex}
.dialog .panel{background:#fffdf8;border:1px solid #f2e6bf;border-radius:1rem;padding:1rem;max-width:480px;width:92%}
.dialog h3{margin-top:0}
.input{padding:.6rem .7rem;border-radius:.5rem;border:1px solid #e7dcae;background:#fffef8;color:var(--text);width:100%}
.form-row{display:flex;gap:.6rem;align-items:center}
label{font-weight:600}

/* Brand tile and button variants to mirror app cards */
.tile{border-radius:1rem;padding:1rem;border:1px solid transparent;box-shadow:0 6px 14px rgba(0,0,0,.06)}
.tile-pink{background:color-mix(in srgb, var(--coral-500) 12%, #fff);border-color:color-mix(in srgb, var(--coral-500) 35%, #fff);}
.tile-green{background:color-mix(in srgb, var(--clover-500) 12%, #fff);border-color:color-mix(in srgb, var(--clover-500) 35%, #fff);}
.tile-blue{background:color-mix(in srgb, var(--sky-500) 12%, #fff);border-color:color-mix(in srgb, var(--sky-500) 35%, #fff);}
.tile-purple{background:color-mix(in srgb, var(--grape-500) 12%, #fff);border-color:color-mix(in srgb, var(--grape-500) 35%, #fff);}
.tile-orange{background:color-mix(in srgb, var(--nectar-500) 12%, #fff);border-color:color-mix(in srgb, var(--nectar-500) 35%, #fff);}

.btn-green{background:var(--clover-600);color:#fff}
.btn-blue{background:var(--sky-700);color:#fff}
.btn-purple{background:var(--grape-600);color:#fff}
.btn-pink{background:var(--coral-600);color:#fff}
.btn-orange{background:var(--nectar-500);color:#2d1f00}
/* Dark button (e.g., Square) */
.btn-dark{background:#111827;color:#fff}

/* Shop layout */
.shop-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.shop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.shop-grid{grid-template-columns:1fr}}
.shop-card{display:flex;flex-direction:column}
.shop-card img{border-radius:.8rem;margin-bottom:.5rem;background:#fff7d6}
.shop-meta{display:flex;justify-content:space-between;align-items:center;margin:.25rem 0 .75rem}
.price{font-weight:800;color:#0f172a;background:#ffe59e;border:1px solid #f2e6bf;border-radius:.4rem;padding:.2rem .5rem}

/* ===== FOOTER OVERRIDE - MAXIMUM SPECIFICITY ===== */
body footer.footer {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
  border-top: 3px solid #ffc107 !important;
  padding: 3rem 0 2rem 0 !important;
  color: #4b5563 !important;
  text-align: center !important;
  margin-top: 4rem !important;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.1) !important;
}

body footer.footer .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  text-align: center !important;
}

body footer.footer p {
  margin: 0 0 1.5rem 0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
}

body footer.footer strong {
  color: #ffc107 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

body footer.footer a {
  color: #ff8f00 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

body footer.footer a:hover {
  color: #f57c00 !important;
  text-decoration: underline !important;
}

body footer.footer .footer-links {
  text-align: center !important;
  margin: 2rem 0 1.5rem 0 !important;
  padding: 1.5rem !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 15px !important;
  border: 2px solid rgba(255, 193, 7, 0.3) !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.1) !important;
}

body footer.footer .footer-links a {
  display: inline-block !important;
  margin: 0 0.75rem !important;
  padding: 0.5rem 1rem !important;
  background: rgba(255, 193, 7, 0.1) !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

body footer.footer .footer-links a:hover {
  background: #ffc107 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3) !important;
  text-decoration: none !important;
}

body footer.footer .small {
  font-size: 0.9rem !important;
  color: #64748b !important;
  margin: 1rem 0 0 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(255, 193, 7, 0.2) !important;
}

body footer.footer .small a {
  background: rgba(255, 193, 7, 0.1) !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 15px !important;
  font-weight: 600 !important;
}

body footer.footer .small a:hover {
  background: #ffc107 !important;
  color: white !important;
}

/* Mobile responsive footer override */
@media (max-width: 768px) {
  body footer.footer {
    padding: 2rem 0 1.5rem 0 !important;
  }
  
  body footer.footer .container {
    padding: 0 1rem !important;
  }
  
  body footer.footer .footer-links {
    padding: 1rem !important;
    margin: 1.5rem 0 1rem 0 !important;
  }
  
  body footer.footer .footer-links a {
    margin: 0.25rem !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.9rem !important;
  }
  
  body footer.footer p {
    font-size: 0.95rem !important;
    margin: 0 0 1rem 0 !important;
  }
}

@media (max-width: 480px) {
  body footer.footer .footer-links a {
    display: block !important;
    margin: 0.5rem auto !important;
    max-width: 200px !important;
  }
  
  body footer.footer p {
    font-size: 0.9rem !important;
  }
}

/* BeeKey Packs Section */
.beekey-section {
  background: linear-gradient(135deg, #fff9e6 0%, #fffdf8 100%);
  border: 3px solid #ffc107;
  border-radius: 20px;
  padding: 2.5rem;
  margin: 3rem 0;
  box-shadow: 0 10px 30px rgba(255, 193, 7, 0.2);
}

.beekey-header {
  text-align: center;
  margin-bottom: 2rem;
}

.beekey-header h3 {
  font-size: 2rem;
  color: #f59e0b;
  margin-bottom: 0.5rem;
}

.beekey-header p {
  font-size: 1.1rem;
  color: #64748b;
}

.beekey-explainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.beekey-info-card {
  background: white;
  border: 2px solid #ffd36a;
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.beekey-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.25);
  border-color: #ffc107;
}

.beekey-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.beekey-info-card h4 {
  color: #f59e0b;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.beekey-info-card p {
  color: #475569;
  line-height: 1.6;
  margin-bottom: 0;
}

.beekey-steps {
  text-align: left;
  padding-left: 1.5rem;
  color: #475569;
}

.beekey-steps li {
  margin-bottom: 0.5rem;
}

.pack-list {
  text-align: left;
  margin-top: 1rem;
}

.pack-item {
  background: rgba(255, 193, 7, 0.1);
  border-left: 3px solid #ffc107;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 5px;
}

.pack-item strong {
  color: #f59e0b;
  display: block;
  margin-bottom: 0.25rem;
}

.pack-item p {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

.beekey-benefits {
  background: white;
  border: 2px solid #ffc107;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.beekey-benefits h4 {
  color: #f59e0b;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.benefits-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.benefits-list li {
  background: rgba(255, 193, 7, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-left: 3px solid #ffc107;
}

.benefits-list strong {
  color: #f59e0b;
}

.beekey-cta {
  background: linear-gradient(135deg, #ffc107 0%, #f59e0b 100%);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  color: white;
}

.beekey-cta h4 {
  color: white;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.beekey-cta p {
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.beekey-button {
  background: white !important;
  color: #f59e0b !important;
  padding: 0.75rem 2rem !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  border: 2px solid white !important;
}

.beekey-button:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Responsive BeeKey Section */
@media (max-width: 768px) {
  .beekey-section {
    padding: 1.5rem;
  }

  .beekey-header h3 {
    font-size: 1.5rem;
  }

  .beekey-explainer {
    grid-template-columns: 1fr;
  }

  .benefits-list {
    grid-template-columns: 1fr;
  }

  .beekey-cta {
    padding: 1.5rem;
  }

  .beekey-cta h4 {
    font-size: 1.2rem;
  }
}