/* ========================================
   Mobile Layout Fixes — Hero Section
   Loaded after all other stylesheets
   ======================================== */

/* --- Desktop: fix grid placement after Learn More HTML move ---
   Both the text-content div and Learn More share column 1 / row 1
   so the grid stays 2-column (text | visual). Learn More overlaps
   at the bottom of column 1, matching its original inline position. */
.f-header-grid > div:first-child {
  grid-column: 1;
  grid-row: 1;
}

.f-header-grid > .f-button-secondary {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

/* --- Single-column layout (≤991px) --- */
@media screen and (max-width: 991px) {

  /* Hero section: reduce excess padding */
  .f-section-large.hero-animated {
    padding-top: 40px;
    padding-bottom: 36px;
  }

  /* Convert grid to flex column */
  .f-header-grid,
  .f-header-grid.basic-example {
    display: flex !important;
    flex-direction: column;
    gap: 40px;
    grid-auto-rows: unset;
  }

  /* Cluster stays below buttons (natural order), centered */
  .hero-visual {
    align-self: center;
    width: 300px;
    max-width: 100%;
    min-height: 180px;
    margin: 0;
  }

  /* Center-align hero text */
  .f-h1-heading {
    text-align: center;
    font-size: 36px;
    line-height: 1.15;
  }

  .f-paragraph-large {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
  }

  .f-heading-detail-small {
    text-align: center;
  }

  /* Center button wrapper */
  .f-header-button-wrapper {
    align-items: center;
    gap: 12px;
  }

  /* Tighten vertical margins within hero text area */
  .hero-animated .f-margin-bottom-08 {
    margin-bottom: 4px;
  }

  .hero-animated .f-margin-bottom-24 {
    margin-bottom: 14px;
  }

  .hero-animated .f-margin-bottom-32 {
    margin-bottom: 20px;
  }

  /* Center download buttons — row on tablet, column on phone */
  .div-block-2 {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }

  .f-button-neutral {
    padding: 10px 24px;
    min-height: 44px;
    font-size: 13px;
    justify-content: center;
  }

  /* Restore icon size for better proportion */
  .f-header-button-wrapper .icon {
    width: 32px;
    height: 32px;
  }

  .div-block {
    gap: 12px;
    align-items: center;
  }

  /* Center Learn More (now a direct child of the grid/flex) */
  .f-header-grid > .f-button-secondary {
    align-self: center;
  }
}

/* --- Phone (≤479px) --- */
@media screen and (max-width: 479px) {

  .f-header-grid,
  .f-header-grid.basic-example {
    gap: 36px;
  }

  .hero-visual {
    min-height: 160px;
    max-width: 260px;
  }

  .f-h1-heading {
    font-size: 32px;
  }

  .f-paragraph-large {
    font-size: 15px;
  }

  .div-block-2 {
    flex-direction: column;
    max-width: 260px;
  }

  .f-button-neutral {
    padding: 10px 20px;
    font-size: 12px;
  }

  .free-download .heading-2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* ========================================
   Professional Polish — Global
   ======================================== */

/* Feature card hover states (exclude group headers) */
.feature-card-small:not(.group-header) {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-card-small:not(.group-header):hover {
  background-color: #f9f9fb;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Large feature cards are now divs — remove pointer cursor */
.feature-card-large-2 {
  cursor: default;
}

/* Download section — brand-aligned gradient instead of flat brown */
.section-regular-4.background-brown-50 {
  background: linear-gradient(160deg, #f8f6ff 0%, #efe8ff 50%, #e8dfff 100%);
}

/* Pricing card hover feedback */
.pricing-card-2 {
  transition: box-shadow 0.2s ease;
}

.pricing-card-2:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Smoother transition into dark footer */
.footer-dark {
  border-top: 1px solid #e4e6f1;
}

/* --- Tablet (≤991px): center features heading --- */
@media screen and (max-width: 991px) {
  .h2-heading-3 {
    font-size: 32px;
    text-align: center;
  }
}