/* ===========================================================================
   FEATURES PAGE LAYOUT
   ---------------------------------------------------------------------------
   Extracted from the 12.7KB inline <style> block that had been pasted into
   seven pages. Only features.html ever used any of it: the icon/arrow/text
   row, the group headings, and the simulator brand chips.

   The rest of that block styled .ht-plan, .billing-toggle, .guardian-card and
   .checkout-summary — classes pricing.html and checkout.html no longer use,
   and which never appeared on the seven pages carrying the CSS. It was dead
   on every page it shipped to. Deleted rather than moved.

   Loaded before gsa.css so our design layer keeps the last word.
   =========================================================================== */

/* ---- Feature row: icon + heading | arrow | body text --------------------- */
.feature-stack { padding-left: 45px; }
.feature-stack .feature-icon { font-size: 56px; color: #000; line-height: 1; display: inline-block; }
.feature-stack .feature-heading { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 700; margin-top: 18px; margin-bottom: 0; }

.feature-arrow { display: inline-flex; align-items: center; justify-content: flex-start; }
.feature-arrow img { width: 56px; opacity: .8; }

.feature-text { font-size: 16px; line-height: 1.6; margin-bottom: 0; padding-left: 0; }

/* ---- Group heading above each block of features -------------------------- */
.feature-group-heading { margin-top: 70px; margin-bottom: 25px; }
.feature-group-heading h3 { font-family: "Playfair Display", serif; font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.feature-group-heading p { font-size: 15px; opacity: .75; margin-bottom: 0; max-width: 760px; }

/* ---- "Works with any simulator" brand chips ------------------------------ */
.sim-chip { display: inline-block; padding: 10px 22px; margin: 6px; border: 1px solid #ddd; border-radius: 30px; font-weight: 600; font-size: 15px; background: #fff; }

/* ---- Responsive ---------------------------------------------------------- */
/* The arrow column collapses first; the 45px indent only earns its keep on a
   wide grid, so it goes before the type sizes do. */
@media (max-width: 1200px) {
  .feature-stack { padding-left: 0; }
  .feature-stack .feature-heading { font-size: 22px; }
}

@media (min-width: 1200px) {
  .feature-text { padding-left: 30px; }
}

@media (max-width: 767.98px) {
  .service-wrap-two { padding-top: 32px; padding-bottom: 28px; }
  .feature-stack .feature-icon { font-size: 44px; }
  .feature-stack .feature-heading { font-size: 20px; margin-top: 12px; }
  .feature-text { padding-left: 0; font-size: 15px; }
}