/* FAQ — shared by the compact widget on the homepage (below the
   Partner Program CTA) and the standalone faq.html page (.faq-page
   rules below). Each row is a pill that softens into a rounded
   rectangle and reveals its answer with a max-height transition —
   NOT grid-template-rows: 0fr -> 1fr, which passed every automated
   check here but broke the header's mobile accordion on a real phone;
   max-height is the pattern confirmed to work on-device. */
:root{
  --blue-dark:#0f3d28;
  --blue-mid:#1f7a52;
  --blue-bright:#27935f;
}
.faq-header{margin-top:26px;}
.faq-header h2{margin:0;font-family:var(--font-heading);font-size:16px;font-weight:700;color:var(--blue-dark);}

.faq-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;}

.faq-item{
  background:#fff;
  border-radius:26px;
  box-shadow:0 4px 14px -9px rgba(15,31,61,.28);
  overflow:hidden;
  transition:border-radius .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-left:4px solid transparent;
}
.faq-item.open{border-radius:18px;box-shadow:0 8px 20px -10px rgba(15,31,61,.32);}

/* Homepage FAQ only — colored left accent + a bigger open-state radius,
   matching a reference screenshot the user provided. The border is
   transparent at rest (above) so it never shifts the card's width when it
   turns on, just its color. */
.home-faq-list .faq-item.open{border-left-color:var(--blue-mid);border-radius:24px;}

.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 10px 15px 20px;
  background:none;border:none;margin:0;
  font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.faq-q-text{font-family:var(--font-heading);font-size:12px;font-weight:600;line-height:1.4;color:var(--blue-bright);flex:1;min-width:0;}

/* Leading illustration — opt-in via markup, for a single standout FAQ
   item (e.g. "Is this fully legal to use?") rather than every row. Sized
   to sit comfortably in the compact widget's row without ever squishing
   under it or crowding the question text. */
.faq-q-image{width:88px;height:88px;object-fit:contain;flex-shrink:0;}

/* Leading circular +/− indicator — opt-in via markup (only rendered where
   a page's design calls for one, e.g. Provider statistic's FAQ), so pages
   that only use the right-hand .faq-toggle are unaffected. */
.faq-q-icon{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;
  border:1.5px solid #dbe6e1;
  color:#8aab9d;
  background:#fff;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.faq-q-icon svg{width:11px;height:11px;}
.faq-q-icon-minus{display:none;}
.faq-item.open .faq-q-icon{background:var(--blue-mid);border-color:var(--blue-mid);color:#fff;}
.faq-item.open .faq-q-icon-plus{display:none;}
.faq-item.open .faq-q-icon-minus{display:flex;}

.faq-toggle{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:#eafaf2;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.faq-toggle svg{width:13px;height:13px;stroke:var(--blue-mid);transition:stroke .3s ease;}
.faq-item.open .faq-toggle{background:var(--blue-mid);transform:rotate(45deg);}

/* Homepage FAQ only — white toggle background instead of the default
   light-green wash, closed state only (open still highlights blue-mid
   above, that's the "currently expanded" signal, left as-is). */
.home-faq-list .faq-toggle{background:#fff;box-shadow:0 0 0 1px #e3ede8;}

/* Homepage FAQ's right-hand toggle shows a literal minus when open
   instead of a 45deg-rotated plus (which reads as an × close icon, not a
   minus) — same two-SVG swap .faq-q-icon already uses on the left icon,
   just mirrored here and with the inherited rotate(45deg) cancelled so
   the minus stroke stays horizontal. */
.home-faq-list .faq-toggle{transform:none !important;}
.home-faq-list .faq-toggle-minus{display:none;}
.home-faq-list .faq-item.open .faq-toggle-plus{display:none;}
.home-faq-list .faq-item.open .faq-toggle-minus{display:flex;}
.faq-item.open .faq-toggle svg{stroke:#fff;}

.faq-a-wrap{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);}
.faq-item.open .faq-a-wrap{max-height:600px;}
.faq-a-inner{overflow:hidden;}
.faq-a{margin:0;padding:0 46px 17px 20px;font-size:11px;line-height:1.6;color:#3a7a5b;font-weight:400;}

/* Homepage FAQ only — 88px reads fine as a base default, but leaves the
   row (and so the gap before the answer, which is bounded by the image's
   own height) much taller than the 12px text needs on *any* screen size,
   mobile included — 56px everywhere keeps the illustration's detail
   readable while sitting proportionate to the text, and lets the answer
   start right after the question instead of after a tall image. */
.home-faq-list .faq-q-image{width:56px;height:56px;}

/* Answer text starts under the question (not under the image) — offset
   accounts for the toggle circle now leading the row (20px button padding
   + 28px toggle + 14px gap + 56px image + 14px gap = 132px). */
.home-faq-list .faq-a{padding-left:132px;}

/* Opt-in via markup (.faq-item--wide-image) for any FAQ item whose source
   image is wide (612×408, a 1.5:1 ratio) rather than square like the
   default set, and was asked to show large and clearly on both desktop
   and mobile (unlike the square icons, no smaller-on-desktop split here).
   All 7 homepage FAQ items currently use this template. Sized to keep
   that ratio; the answer's left offset accounts for the toggle circle
   leading the row (20px button padding + 28px toggle + 14px gap + 120px
   image + 14px gap = 196px). Row height/vertical centering and the
   answer's -6px pull-up don't need their own override — both are already
   just a function of the button's symmetric 9px top/bottom padding, not
   the image's specific height, so they hold at any size. */
.faq-item--wide-image .faq-q-image{width:120px;height:80px;}
.faq-item--wide-image .faq-a{padding-left:196px;}

/* Trims the button's own top/bottom padding. Equal top/bottom (9px each)
   keeps the image perfectly centered in the row — the earlier 10px/8px
   split left it 1px off-center. */
.home-faq-list .faq-q{padding-top:9px;padding-bottom:9px;}

/* Pulls the answer up slightly via transform (not margin-top) on the
   wrap, not the inner <p>: a negative margin directly on the <p> is
   still inside its own overflow:hidden ancestor (.faq-a-inner), so it
   was slicing a few px off the top of the first line's ascenders on
   every open card. transform repositions the whole box after layout, so
   its own clip boundary moves with it and nothing gets shaved off. */
.home-faq-list .faq-a-wrap{transform:translateY(-6px);}

/* Wide-image rows are much taller (98px) than the question text (~17px)
   centered inside them, so the -6px pull-up above (tuned for the shorter
   56px-image rows) still left a big empty gap between the question and
   the answer. Pulled up further so the answer sits right under the
   question text instead of under the whole tall row — safe because the
   answer's padding-left (196px) already clears the image horizontally,
   so overlapping its vertical space causes no visual collision.
   Uses transform, not margin-top: a negative margin on .faq-a-wrap still
   participates in normal-flow height even while collapsed (max-height:0),
   which was shrinking the *closed* card's own height and made the
   overflow:hidden item crop the image down to ~63px. transform shifts the
   box purely visually, after layout, so the closed row keeps its full
   98px and the image stays uncropped. */
.faq-item--wide-image .faq-a-wrap{transform:translateY(-35px);}

/* ---------- Standalone FAQ page (faq.html) ---------- */
.faq-page{max-width:1400px;margin:0 auto;padding:32px 16px 64px;}
/* Left border accent on open — same border-left mechanism as the
   homepage widget (.home-faq-list .faq-item.open). */
.faq-page .faq-item.open{border-left-color:var(--blue-mid);}
.faq-page .breadcrumb{margin:0 0 18px;font-size:13px;color:#6b8f7e;}
.faq-page .breadcrumb a{color:var(--blue-mid);text-decoration:none;font-weight:500;}
.faq-page .breadcrumb a:hover{text-decoration:underline;}

.faq-page-header{margin-bottom:30px;}
.faq-page-title{margin:0 0 10px;font-family:var(--font-heading);font-size:32px;font-weight:700;color:var(--blue-dark);}
.faq-page-intro{margin:0;max-width:620px;font-size:15px;line-height:1.6;color:#4a6d5c;}

.faq-category{margin-top:34px;}
.faq-category:first-of-type{margin-top:0;}
.faq-category-title{
  margin:0 0 4px;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--blue-mid);
}

.faq-page .faq-q{padding:18px 16px 18px 22px;}
.faq-page .faq-q-text{font-size:15px;}
/* Answer aligns under the question text, not under the leading +/- icon
   (22px button padding + 26px icon + 14px gap = 62px). */
.faq-page .faq-a{padding:0 52px 20px 62px;font-size:14px;}

.faq-contact-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:44px;
  padding:26px 28px;
  border-radius:22px;
  background:linear-gradient(135deg, var(--blue-dark), var(--blue-mid));
  color:#fff;
}
.faq-contact-cta h3{margin:0 0 4px;font-family:var(--font-heading);font-size:17px;font-weight:600;}
.faq-contact-cta p{margin:0;font-size:13px;opacity:.85;}
.faq-contact-cta a{
  flex:0 0 auto;
  padding:11px 22px;
  border-radius:999px;
  background:#fff;
  color:var(--blue-dark);
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease;
}
.faq-contact-cta a:hover{background:#eafaf2;}

@media (max-width:640px){
  .faq-page-title{font-size:26px;}
  .faq-contact-cta{flex-direction:column;align-items:flex-start;}
}