/* Home page only: fix "Our Services" grid and bullets */
.section.bg-lines .packages-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem; /* match the row above */
  align-items:stretch;
}
.section.bg-lines .packages-grid .feature-card{
  width:100%;
  max-width:none; /* override any card max-width from global styles */
  height:100%;
  /*
    Use flexbox to align the contents of each service card vertically.
    Setting display:flex and flex-direction:column ensures that the
    button can be pushed to the bottom of the card, allowing all
    buttons in a row to align horizontally regardless of content
    length.
  */
  display:flex;
  flex-direction:column;
}

/* Push the call-to-action button to the bottom of each card so they
   align horizontally across rows. This selector targets the anchor
   elements styled as buttons inside the feature cards. */
.section.bg-lines .packages-grid .feature-card a.btn{
  margin-top:auto;
  align-self:flex-start;
}

/* Keep it one column on narrow screens */
@media (max-width: 768px){
  .section.bg-lines .packages-grid{
    grid-template-columns:1fr;
  }
}

/* Make "bullet" paragraphs (the ones with the green check icon) stay on one line on desktop,
   while keeping the rest of the text unaffected. Uses :has() which is supported in modern browsers. */
@media (min-width: 992px){
  @supports selector(p:has(img.check-icon)){
    /*
      Allow bullet text to wrap naturally on larger screens. Previously
      the white-space property forced the content to remain on a single
      line which caused overflow issues when long sentences exceeded the
      available width. Setting white-space to normal restores automatic
      wrapping. Font-size and line-height tweaks are preserved for
      readability.
    */
    .section.bg-lines .packages-grid .feature-card p:has(img.check-icon){
      white-space:normal;
      font-size:clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
      line-height:1.35;
    }
  }
}

/*
  Align the service icons and headings on the same line. A new wrapper
  (.service-title) is added around the icon and <h3> in index.html. The
  wrapper uses flexbox to align its children horizontally. Remove the
  default bottom margin on the heading so it sits vertically centred.
*/
.packages-grid .feature-card .service-title{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:0.5rem;
}
.packages-grid .feature-card .service-title h3{
  margin-bottom:0;
}
.packages-grid .feature-card .service-title .service-icon-img{
  /* Ensure the icon retains its original size without affecting layout */
  width:3.25rem;
  height:3.25rem;
  object-fit:contain;
  display:block;
  margin-bottom:0;
}

/* Prevent long words or URLs from overflowing their container. */
.packages-grid .feature-card p{
  overflow-wrap:break-word;
}

/*
  Pricing section adjustments: left‑align all text within pricing cards,
  widen the columns on larger screens, reduce the heading size so titles
  remain on a single line, and decrease the font size of the “best for”
  description. These styles apply to both the “Transparent, Affordable
  Pricing” and “Popular Solutions” grids.
*/
.pricing-grid{
  /* Use wider minimum widths to reduce wrapping of long titles */
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  max-width:var(--max-width);
}
.pricing-grid .neon-card{
  text-align:left;
}
.pricing-grid .neon-card h3{
  font-size:1.3rem;
}
.pricing-grid .neon-card .best-for{
  font-size:0.75rem;
}

/*
  FAQ section styling. Each FAQ entry uses a <details> element wrapped in
  the existing neon-card to integrate seamlessly with the rest of the design.
  The summary element acts as the clickable question; we hide the default
  disclosure triangle and replace it with custom plus/minus icons. Answers
  are revealed on open and maintain the same typography and colours used
  throughout the site.
*/
.faq-section{
  margin-top:3rem;
}
/*
  Arrange FAQ items in a vertical list without forcing them to stretch to
  the full container width. Setting align-items to flex-start ensures
  each item only grows to fit its content. The gap property controls
  spacing between items.
*/
/*
  Use a single-column CSS grid for the FAQ list. The column width is
  determined by the widest question (max-content), ensuring all cards
  share the same width. The grid is centered within its container.
*/
.faq-section .faq-list{
  display:grid;
  grid-template-columns:max-content;
  gap:1rem;
  justify-content:center;
}
/*
  Each FAQ entry is a neon card that should wrap to the width of its
  summary text rather than spanning the entire container. By making
  them inline-blocks with an automatic width, the cards shrink to the
  length of the question while still wrapping at the container edge on
  smaller screens. A max-width of 100% prevents overflow.
*/
/*
  Grid items expand to fill the single column width set by the grid. We
  only need to apply the border radius here; the grid will handle
  alignment and width. Setting width:100% ensures each card fills the
  grid column uniformly.
*/
.faq-section details{
  border-radius:18px;
  width:100%;
  /* Limit the maximum width of each FAQ card so that both questions and
     answers wrap onto multiple lines when they exceed this width. This
     prevents excessively long single‑line answers and ensures a
     consistent card size across the list. */
  max-width:65ch;
  /* Animate subtle scaling when the answer is revealed */
  transition:transform 0.3s ease,padding 0.3s ease,width 0.3s ease;
}
/*
  Style the FAQ question headers. Reduce the font size slightly to
  signal that these questions are subordinate to section titles. Keep
  the same heading family and colours for consistency. We also retain
  the padding on the right to accommodate the plus/minus icon.
*/
/*
  FAQ question headers: reduce the font size further (in line with the
  proportion used to scale down the section title) so the questions
  remain readable but subordinate to the main content. The right padding
  leaves room for the plus/minus toggle icon.
*/
.faq-section summary{
  list-style:none;
  font-family:var(--font-heading);
  font-size:1rem;
  color:var(--color-blue);
  cursor:pointer;
  position:relative;
  outline:none;
  /* Reduce the right padding so that the summary text padding is more
     balanced with the left side. This still reserves space for the
     toggle icon. */
  padding-right:1.25rem;
}
.faq-section summary::-webkit-details-marker{
  display:none;
}
.faq-section summary::after{
  content:'+';
  position:absolute;
  /* Position the icon with a slight inset so that it aligns nicely
     with the reduced padding on the summary */
  right:0.25rem;
  top:0;
  font-size:1.2rem;
  color:var(--color-green);
  transition:transform 0.3s ease;
}
.faq-section details[open] summary::after{
  content:'–'; /* minus sign when open */
}
.faq-section details p{
  margin-top:0.75rem;
  font-size:0.95rem;
  color:var(--color-silver);
  line-height:1.5;
  /* Allow answer text to wrap naturally across multiple lines */
  white-space:normal;
  overflow-wrap:break-word;
  /* Ensure the answer fills the available width of the card. By
     allowing the paragraph to grow freely (without max-width), the
     text will wrap naturally and make better use of horizontal space
     when the card expands on open. */
}

/*
  On open, slightly enlarge the FAQ card. Increasing scale makes the box
  feel more spacious without causing a drastic size difference.
*/
/*
  When opened, slightly enlarge the card and add extra padding at the
  bottom. A modest scaling factor creates a subtle but noticeable
  expansion without making the card excessively large.
*/
.faq-section details[open]{
  transform:scale(1.03);
  padding-bottom:1rem;
  /* Expand the maximum width slightly when open to provide more room for
     the answer while maintaining a tidy layout. */
  max-width:70ch;
}

/*
  Reduce the size of the FAQ section heading so that it remains
  distinguishable as a title but does not compete with the primary
  section headings on the page. The colour is inherited from
  the default .section-title.
*/
.faq-section .section-title{
  font-size:1.6rem;
  margin-bottom:1rem;
}

/* Minor spacing/alignments to keep the bullets tidy */
.section.bg-lines .packages-grid .feature-card p img.check-icon{
  display:inline-block;
  vertical-align:middle;
  margin-right:0.5rem;
  max-width:18px;
  height:auto;
}