/* ======================================================================
   HOSTING.CSS - REDUCED VERSION

   After migrating the hosting page to generic classes, almost nothing
   remains page-specific. The card grid, cards (light + addon), white
   section, dark section, cycling list, FAQ, and final CTA are all
   handled by generic classes in styles.css.

   What remains here:

   1. The update-guarantee-section gets a custom warm-toned overlay
      (instead of the default black overlay on .section-image). This
      preserves the look Debbie built originally.

   2. The .guarantee-highlight, .guarantee-subtitle, and .update-list-container
      are content layout helpers used inside that one section.

   3. The .cycle-list font-size override for this specific use case
      (the hosting page uses a fixed 1.75rem instead of the responsive
      clamp() that About uses).

   Replace the entire contents of css/hosting.css with the rules below.
   ====================================================================== */


/* ======================================================================
   UPDATE GUARANTEE SECTION (page-specific overrides on .section-image)
   ====================================================================== */

/* Custom warm-toned overlay (default .section-image::before is rgba(0,0,0,0.25)) */
.update-guarantee-section::before {
    background: rgba(113, 32, 1, 0.22) !important;
}

/* Section spacing and inner constraints unique to this section */
.update-guarantee-section {
    padding: 90px 20px !important;
}

.update-guarantee-section .section-inner {
    max-width: 1200px;
}

/* Content layout helpers inside the update guarantee section */
.guarantee-highlight {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.update-guarantee-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.guarantee-subtitle {
    font-size: 1.35rem;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 1.5rem;
}

.update-list-container {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
}

.update-list-container h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.45rem;
}

/* Cycle list font size override for this page (fixed instead of fluid) */
.update-guarantee-section .cycle-list li {
    font-size: 1.75rem;
    color: #f0f0f0;
}

.update-guarantee-section .cycle-slider {
    min-height: 100px;
}

@media (max-width: 768px) {
    .update-guarantee-section h2 {
        font-size: 2.1rem;
    }
    .update-guarantee-section .cycle-slider {
        min-height: 125px;
    }
}


/* ======================================================================
   NOTES

   The following classes have been REMOVED from this file because they
   are now handled by generic classes in styles.css:

   - .whats-included-section (now: .section-dark)
   - .section-inner (already in styles.css)
   - .section-intro (already in styles.css)
   - .included-grid (now: .card-grid-auto)
   - .included-card (now: .card-light)
   - .included-card-addon (now: .card-addon)
   - .addon-tag (now in styles.css)
   - .update-list, .update-slider (now: .cycle-list and .cycle-slider)
   - .horse-cloudflare-section (now: .section-white)
   - .horse-cloudflare-inner (now: .section-inner)
   - .horse-cloudflare-grid (now: .card-grid-3)
   - .horse-cloudflare-box (now: .card-icon)
   - .horse-cloudflare-icon (now: .card-icon-circle)
   - .horse-cloudflare-intro (now: .section-intro)

   The only thing remaining is the warm-toned overlay and a few content
   layout helpers specific to the update guarantee section.
   ====================================================================== */