/* =============================================================================
   Social Stardom — Final polish layer (loaded LAST, wins the cascade)
   Purpose: sharpen the bits the universal-scale pass in patch.css did not reach.
   Same fonts, same content, same structure. Only sizing, spacing, hierarchy,
   contrast, edges, cards, buttons, forms, and responsive polish.

   The homepage story sections already carry the universal scale. This file:
   1. Tightens the hero CTAs + topbar CTA to the spec button proportions.
   2. Locks consistent section rhythm + wrapper.
   3. Brings the blog / content pages and the blog CTA up to the same premium
      card / title / body / form standard as the homepage.
   4. Premium-finishes the footer newsletter form.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. HERO + TOP CTA BUTTONS  (spec: 15-16px, weight 800-900, pill, 14-16px pad,
      hover lift translateY(-2px), soft shadow)
   --------------------------------------------------------------------------- */
.hero-ctas .btn,
.hero-ctas .btn-ghost {
  padding: 16px 24px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
}
.hero-ctas .btn {
  box-shadow: 0 10px 30px rgba(207, 255, 0, 0.28) !important;
}
.hero-ctas .btn:hover,
.topbar .top-cta:hover {
  transform: translateY(-2px) !important;
}
.topbar .top-cta {
  padding: 14px 22px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

/* tighten the hero arrow chip so it reads crisp, not chunky */
.hero-ctas .btn .arr {
  width: 20px !important;
  height: 20px !important;
}

/* HERO READABILITY SCRIM
   The crowd photo is busy and the headline/subline were sinking into it.
   Add a soft dark gradient behind just the text block (bottom-left), so the
   copy stays crisp and readable without dimming the photo overall. The scrim
   sits behind the text (z-index below the overlay content) and fades to fully
   transparent toward the top-right, keeping the faces visible. */
/* IMPORTANT: do NOT change .hero-overlay position. The bundle sets it to
   position:absolute; bottom:10vh; which places the headline correctly in the
   lower hero. Overriding it to relative pushed the text up under the navbar.
   absolute already establishes the containing block for ::before, so the scrim
   works without any position change here. */
#hero .hero-overlay {
  position: absolute !important;
}
#hero .hero-overlay::before {
  content: "";
  position: absolute;
  left: -6vw;
  right: -6vw;
  top: -28px;
  bottom: -28px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 130% at 12% 78%,
      rgba(8, 9, 10, 0.82) 0%,
      rgba(8, 9, 10, 0.62) 32%,
      rgba(8, 9, 10, 0.30) 58%,
      rgba(8, 9, 10, 0) 80%);
}
/* extra crispness: a touch more text shadow so letters separate from faces */
#hero .hero-overlay .hero-headline {
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
#hero .hero-overlay .hero-sub {
  color: #e8e6e0 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
}
#hero .hero-overlay .eyebrow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
}
@media (max-width: 768px) {
  #hero .hero-overlay::before {
    background:
      linear-gradient(180deg,
        rgba(8, 9, 10, 0) 0%,
        rgba(8, 9, 10, 0.55) 38%,
        rgba(8, 9, 10, 0.82) 100%);
    left: -8vw; right: -8vw; top: -40px; bottom: -40px;
  }
}

/* ---------------------------------------------------------------------------
   2. SECTION RHYTHM + WRAPPER  (spec: min(1180px,92vw); 54-64px desktop pad)
   --------------------------------------------------------------------------- */
.homepage-centered-wrapper {
  width: min(1180px, 92vw) !important;
  margin: 0 auto !important;
}
.story-section { padding: 60px 0 !important; }
@media (max-width: 768px) {
  .story-section { padding: 40px 0 !important; }
}

/* equal visual weight: make metric/flow cards in a grid stretch evenly */
.story-section .grid > .premium-glass-card {
  height: 100% !important;
}

/* ---------------------------------------------------------------------------
   3. BLOG / CONTENT PAGES  — bring up to the homepage premium standard.
   These classes come from content-page.css / the blog templates.
   --------------------------------------------------------------------------- */

/* content wrapper to the same rhythm */
.cp-content-layout,
.cp-article-wrap,
.cp-body {
  --cp-wrap: min(1180px, 92vw);
}

/* blog post headings: sharper hierarchy + contrast */
.cp-body h1,
.cp-title {
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  color: #ffffff !important;
}
.cp-body h2 {
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin-top: 1.6em !important;
}
.cp-body h3 {
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: #f3f0e8 !important;
}
/* readable body copy with strong contrast vs headings */
.cp-body p,
.cp-body li {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #b9b6ae !important;
}
/* in-article links: clear, on-brand, not buried */
.cp-body a {
  color: var(--lime, #cfff00) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(207, 255, 0, 0.35) !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}
.cp-body a:hover {
  border-bottom-color: var(--lime, #cfff00) !important;
}

/* ---- Blog sidebar CTA: premium card finish ---- */
.cp-sidebar-box {
  border-radius: 24px !important;
  padding: 26px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
}
.cp-sidebar-box h3 {
  font-size: 21px !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.cp-sidebar-box p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #a0a5ad !important;
}
.cp-cta-online {
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}
/* the WhatsApp CTA button: bold, obvious, conversion-focused */
a.cp-btn-primary.cp-cta-wa,
.cp-btn-primary.cp-cta-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 16px 22px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  border: none !important;
}

/* ---- Blog sidebar legacy form inputs (if any page still renders them) ---- */
.cp-sidebar-box input {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.cp-sidebar-box input:focus {
  outline: none !important;
  border-color: var(--lime, #cfff00) !important;
  box-shadow: 0 0 16px rgba(207, 255, 0, 0.12) !important;
}

/* ---------------------------------------------------------------------------
   4. FOOTER newsletter form — premium pill input + strong submit
   --------------------------------------------------------------------------- */
.footer-sub-form {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding: 6px 6px 6px 18px !important;
}
.footer-sub-form:focus-within {
  border-color: var(--lime, #cfff00) !important;
  box-shadow: 0 0 16px rgba(207, 255, 0, 0.12) !important;
}
.footer-sub-btn {
  width: 40px !important;
  height: 40px !important;
  font-weight: 900 !important;
}
.footer-sub-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(207, 255, 0, 0.4) !important;
}
.footer-col-h,
.tiny.footer-col-h {
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

/* ---------------------------------------------------------------------------
   5. RESPONSIVE polish — clean one-column, full-width CTAs, no cramped cards
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-ctas { width: 100%; }
  .hero-ctas .btn,
  .hero-ctas .btn-ghost {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
  /* form submit + WhatsApp stack full-width and bold on mobile */
  #leadForm .lead-form-submit-glow,
  #leadForm [data-wa-fromform] {
    width: 100% !important;
  }
  .premium-glass-card { padding: 22px !important; }
}