/* ===== Index page layout polish ===== */

/* Make sections breathe */
#firstdiv,
#seconddiv,
#fourthdiv {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(28px, 5vw, 64px);
}

/* HERO: better typography scaling */
#divonetextbox h1 {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
}
#divonetextbox .italics {
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
}
#divonetextbox .lede {
  font-size: clamp(15px, 1.6vw, 18px);
  opacity: 0.95;
  max-width: 52ch;
}

/* HERO image: keep it from dominating on small screens */
#divoneimgbox img {
  max-width: min(520px, 92vw);
}

/* CTA: stack cleanly on mobile */
.cta-band .cta {
  padding: 18px 0;
}
.cta-band .cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 576px) {
  .cta-band .cta {
    text-align: left;
    align-items: flex-start !important;
  }
  .cta-band .cta-actions a {
    width: 100%;
  }
}

/* FEATURES: prevent cramped 3-col on small screens */
#seconddiv .col-md-4 p {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  #seconddiv .col-md-4 {
    text-align: left !important;
  }
  #seconddiv .col-md-4 p {
    margin-left: 0;
    margin-right: 0;
  }
}

#firstdiv {
    background:
      radial-gradient(900px 520px at 75% 30%, rgba(254,79,180,0.18), transparent 60%),
      linear-gradient(180deg, rgba(42,39,81,0.35), rgba(42,39,81,0.0) 55%);
  }

  /* ===== HERO redesign (premium + less busy) ===== */

/* Kill the vertical-centering behavior that creates the huge empty top space */
#firstdiv.hero {
    min-height: auto !important;
    display: block !important;
    padding-top: clamp(36px, 5vw, 72px);
    padding-bottom: clamp(28px, 4vw, 60px);
  }
  
  /* Tighten headline rhythm */
  #divonetextbox h1 {
    letter-spacing: -0.02em;
    margin-bottom: 10px !important;
  }
  
  #divonetextbox .italics {
    opacity: 0.95;
    margin-bottom: 12px !important;
  }
  
  #divonetextbox .lede {
    max-width: 54ch;
    opacity: 0.92;
  }
  
  /* CTA row feels “app landing page” */
  .hero-actions .btn {
    border-radius: 999px;
    padding-inline: 22px;
  }
  
  /* Tiny trust line */
  .hero-note {
    font-size: 0.95rem;
    opacity: 0.75;
  }
  
  /* Put the image in a soft card so it feels designed, not “dropped in” */
  .hero-visual {
    display: inline-block;
    padding: clamp(10px, 2vw, 18px);
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  }
  
  #divoneimgbox img {
    max-width: min(520px, 92vw);
    border-radius: 14px;
  }
  
  /* Mobile: keep it clean + stacked */
  @media (max-width: 576px) {
    #firstdiv.hero {
      padding-top: 28px;
      padding-bottom: 30px;
    }
    .hero-actions a {
      width: 100%;
    }
  }

  /* Index-only: remove the page-content header offset band
   (we’ll pad the hero instead so there’s no “double header” look) */
   body:has(#firstdiv.hero) #page-content{
    padding-top: 0 !important;
  }
  
  /* Index-only: push hero down by the real header height */
  body:has(#firstdiv.hero) #firstdiv.hero{
    padding-top: calc(var(--header-h) + 24px) !important;
  }

  /* ===== Index: mobile hero polish ===== */
@media (max-width: 768px) {
    /* center the whole hero content */
    #firstdiv .row { text-align: center; }
    #divonetextbox { text-align: center; }
  
    /* center the CTA row (it’s currently a flex wrap row) */
    .hero-actions { justify-content: center; }
  
    /* make the trust line look intentional */
    .hero-note { max-width: 42ch; margin-inline: auto; }
  
    /* keep the image from feeling like it’s “floating” too low/high */
    #divoneimgbox { margin-top: 10px; }
  }
  
  /* Phone: make buttons full-width and keep rhythm tight */
  @media (max-width: 576px) {
    #firstdiv.hero{
      padding-top: calc(var(--header-h) + 16px) !important;
      padding-bottom: 26px !important;
    }
  
    .hero-actions { gap: 10px; }
    .hero-actions a { width: 100%; max-width: 360px; margin-inline: auto; }
  
    .hero-visual { padding: 10px; border-radius: 16px; }
    #divoneimgbox img { max-width: min(420px, 92vw); }
  }
/* ===== Index: value props (middle) mobile cleanup ===== */
@media (max-width: 768px) {
    #seconddiv .row { text-align: left; max-width: 560px; margin-inline: auto; }
    #seconddiv .col-md-4 { padding-block: 12px; }
  
    /* subtle separators between the 3 items */
    #seconddiv .col-md-4 + .col-md-4 {
      border-top: 1px solid rgba(255,255,255,.18);
      padding-top: 18px;
      margin-top: 6px;
    }
  }

  /* ===== HERO image fixes for smaller screens ===== */

/* 1) Phones: text first + image constrained + centered */
@media (max-width: 576px) {
    /* Force order without touching HTML */
    #firstdiv.hero .row { display: flex; }
    #divonetextbox { order: 1; text-align: center; }
    #divoneimgbox  { order: 2; text-align: center; margin-top: 18px; }
  
    .hero-actions { justify-content: center; }
    .hero-note { margin-inline: auto; }
  
    /* Make the image feel like a nice "card" instead of a giant poster */
    .hero-visual {
      width: min(420px, 92vw);
      margin-inline: auto;
    }
  
    /* Key fix: cap height + contain so it never overwhelms the screen */
    #divoneimgbox img {
      width: 100%;
      max-height: 320px;
      object-fit: contain;
    }
  }
  
  /* 2) Tablets (iPad-ish): keep 2-column layout, but stop the image from exploding */
  @media (min-width: 577px) and (max-width: 991px) {
    #divonetextbox { padding-right: 8px; }
    #divoneimgbox  { padding-left: 8px; }
  
    .hero-visual { padding: 14px; }
  
    /* Clamp the image size so it stays "premium" and not overpowering */
    #divoneimgbox img {
      max-width: 460px;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
  
  /* 3) iPad mini / tighter widths: give a little more breathing room */
  @media (min-width: 768px) and (max-width: 820px) {
    #divoneimgbox img { max-width: 420px; }
  }

  /* ===== Final hero edge-case fixes ===== */

/* A) Any SHORT viewport (landscape phones): prioritize text + shrink the image hard */
@media (max-height: 420px) {
    #firstdiv.hero {
      padding-top: calc(var(--header-h) + 10px) !important;
      padding-bottom: 16px !important;
    }
  
    /* stack + center so nothing gets clipped */
    #firstdiv.hero .row { text-align: center; }
    #divonetextbox { order: 1; }
    #divoneimgbox  { order: 2; margin-top: 10px; }
  
    .hero-actions { justify-content: center; }
    .hero-note { display: none; } /* optional: removes clutter on tiny height */
  
    /* image becomes a small supporting visual */
    .hero-visual {
      width: min(320px, 90vw);
      padding: 8px;
      margin-inline: auto;
    }
  
    #divoneimgbox img {
      width: 100%;
      max-height: 170px;          /* key fix for 568x320 */
      object-fit: contain;
    }
  }
  
  /* B) iPads / medium widths: stop the image card from overpowering the 2-column layout */
  @media (min-width: 768px) and (max-width: 1024px) {
    /* prevent any horizontal “crowding” / clipping */
    #firstdiv.hero .container { overflow-x: hidden; }
  
    .hero-visual { max-width: 100%; }
  
    /* clamp image so the left text always has room */
    #divoneimgbox img {
      max-width: 420px;           /* was still too big on iPad mini views */
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
  
  /* C) iPad mini landscape specifically (tightest combo): clamp even more */
  @media (min-width: 1024px) and (max-width: 1130px) and (max-height: 820px) {
    #divoneimgbox img { max-width: 380px; }
  }

  /* ===== Landscape phones (short height): compact hero ===== */
@media (max-height: 420px) and (max-width: 820px) {
    /* tighten vertical spacing */
    #firstdiv.hero{
      padding-top: calc(var(--header-h) + 8px) !important;
      padding-bottom: 12px !important;
    }
  
    /* keep text visible and compact */
    #divonetextbox h1 { font-size: 1.35rem !important; margin-bottom: 6px !important; }
    #divonetextbox .italics { font-size: 1.05rem !important; margin-bottom: 8px !important; }
    #divonetextbox .lede { font-size: 0.95rem !important; margin-bottom: 10px !important; }
  
    /* IMPORTANT: in short height, do NOT stack buttons full width */
    .hero-actions{
      justify-content: center !important;
      flex-wrap: nowrap !important;
      gap: 10px !important;
    }
    .hero-actions a{
      width: auto !important;
      min-width: 160px;
      padding: 10px 16px !important;
      font-size: 1rem !important;
    }
  
    /* Optional: hide trust line to avoid pushing content off-screen */
    .hero-note{ display: none !important; }
  
    /* shrink the hero image card so it doesn't dominate */
    .hero-visual{
      width: min(320px, 46vw) !important;
      padding: 8px !important;
      margin-inline: auto;
    }
    #divoneimgbox img{
      max-height: 160px !important;  /* key for 568x320 */
      width: 100%;
      object-fit: contain;
    }
  }
  /* =========================
   HERO: Fix mobile/tablet layout weirdness
   ========================= */

/* On < lg: undo the Bootstrap order flip so text comes first,
   center it, and keep the image from taking over */
@media (max-width: 991.98px) {
    #firstdiv.vh-section {
      min-height: auto;                 /* stop forcing tall hero */
      padding-top: 24px !important;     /* reduce big top/bottom spacing */
      padding-bottom: 24px !important;
    }
  
    /* Override Bootstrap order utilities */
    #divonetextbox { order: 1 !important; text-align: center; }
    #divoneimgbox  { order: 2 !important; }
  
    /* Keep text nicely readable and centered */
    #divonetextbox > * {
      max-width: 34rem;
      margin-left: auto;
      margin-right: auto;
    }
  
    /* Image sizing: don’t let it get tiny OR overflow */
    #divoneimgbox img {
      width: min(520px, 92vw);
      height: auto;
      max-height: 52vh;
      object-fit: contain;
      display: block;
      margin: 14px auto 0;
    }
  }
  
  /* Super-short screens (mobile landscape): shrink the hero so it doesn’t “lose” content */
  @media (max-height: 450px) {
    #firstdiv.vh-section {
      min-height: auto;
      padding-top: 12px !important;
      padding-bottom: 12px !important;
    }
  
    #divoneimgbox img {
      max-height: 40vh;
      margin-top: 8px;
    }
  
    /* If your header script injects a spacer, it can look like a giant empty band in landscape */
    .header-spacer,
    .nav-spacer,
    #headerSpacer {
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
    }
  }
  
  /* =========================
     FEATURES row: keep it from feeling “odd” on smaller screens
     ========================= */
  @media (max-width: 991.98px) {
    #seconddiv {
      padding-left: 16px;
      padding-right: 16px;
    }
    #seconddiv .row {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  @media (max-height: 450px) {
    #divoneimgbox img { max-height: 45vh; width: auto; }
  }