/* ============================================================
   FEATURE ARTICLE PAGES — shared modern layout
   Used by : /microsoft-integration, /google-integration,
             /features/elevating-enterprise-support
   Scope   : body.fa-page, every selector prefixed .fa-
   Design system matches reports-redesign.css / sla-redesign.css
   (Instrument Sans body + Mulish headings, brand blue #0302B0 /
   teal #01A9E0). Self-contained; no JS (FAQ uses <details>).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --fa-blue:       #0302B0;
  --fa-teal:       #01A9E0;
  --fa-navy:       #0D1B3E;
  --fa-strong:     #212738;
  --fa-text:       #232321;
  --fa-text-mid:   #454455;
  --fa-text-light: #6B7280;
  --fa-border:     #E5E7EB;
  --fa-tint:       #EEF5FE;
  --fa-tint-2:     #E9F7FC;
  --fa-ff-head:    'Mulish', 'Segoe UI', system-ui, sans-serif;
  --fa-ff-body:    'Instrument Sans', 'Mulish', 'Segoe UI', sans-serif;
  --fa-max-w:      1200px;
  --fa-gutter:     24px;
  --fa-sec-py:     84px;
  --fa-ease:       cubic-bezier(.16,1,.3,1);
  --fa-grad-primary: linear-gradient(95deg, #0302B0 1.34%, #01A9E0 97.22%);
  --fa-r-md:       16px;
  --fa-r-lg:       22px;
  --fa-r-pill:     9999px;
  --fa-shadow-card: 0 10px 30px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.04);
  --fa-shadow-hover: 0 18px 48px rgba(3,2,176,.14), 0 4px 14px rgba(16,24,40,.08);
}

.fa-page { background: #fff; }
.fa-page section * { box-sizing: border-box; }

.fa-container {
  max-width: var(--fa-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fa-gutter);
  padding-right: var(--fa-gutter);
}
.fa-container--narrow { max-width: 940px; }

/* ── shared type ──────────────────────────────────────── */
.fa-eyebrow {
  display: block;
  font-family: var(--fa-ff-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--fa-blue);
  margin: 0 0 14px;
  letter-spacing: .2px;
}
.fa-eyebrow--center { text-align: center; }

.fa-section-title {
  font-family: var(--fa-ff-head);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--fa-strong);
  margin: 0 0 18px;
}
.fa-section-title--center { text-align: center; }

.fa-section-body {
  font-family: var(--fa-ff-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--fa-text-mid);
  margin: 0;
}
.fa-section-body--center { text-align: center; }

.fa-text-blue { color: var(--fa-blue); }
.fa-header { max-width: 820px; margin: 0 auto 60px; }

/* body prose paragraphs */
.fa-p {
  font-family: var(--fa-ff-body);
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--fa-text-mid);
  margin: 0 0 16px;
}
.fa-p:last-child { margin-bottom: 0; }
.fa-p b, .fa-p strong, .fa-strong { color: var(--fa-strong); font-weight: 700; }
.fa-p a { color: var(--fa-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(3,2,176,.28); }
.fa-p a:hover { color: var(--fa-teal); border-color: var(--fa-teal); }

/* ── buttons / links ──────────────────────────────────── */
.fa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fa-ff-head); font-size: 15px; font-weight: 700;
  line-height: 1; padding: 15px 28px; border-radius: var(--fa-r-pill);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity .22s var(--fa-ease), box-shadow .22s var(--fa-ease), transform .18s var(--fa-ease);
}
.fa-btn:hover { transform: translateY(-2px); text-decoration: none; }
.fa-btn--primary { color: #fff; border: 1.5px solid #01A9E0; background: var(--fa-grad-primary); background-clip: padding-box; }
.fa-btn--primary:hover { color: #fff; box-shadow: 0 6px 24px rgba(3,2,176,.35); opacity: .92; }
.fa-btn--white { color: var(--fa-blue); background: #fff; border: 1.5px solid #19182D; background-clip: padding-box; }
.fa-btn--white:hover { color: var(--fa-blue); box-shadow: 0 6px 20px rgba(13,27,62,.12); }
.fa-btn__arrow { width: 18px; height: 18px; flex-shrink: 0; }
.fa-btn-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.fa-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--fa-ff-head); font-size: 16px; font-weight: 700;
  color: var(--fa-blue); text-decoration: none;
  transition: gap .18s var(--fa-ease), color .18s var(--fa-ease);
}
.fa-link:hover { color: var(--fa-teal); gap: 12px; text-decoration: none; }
.fa-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   HERO — copy left, art right, pale lavender→blue wash
============================================================ */
.fa-hero {
  position: relative; padding-top: 74px; padding-bottom: 74px; overflow: hidden;
  background:
    radial-gradient(900px 560px at 92% 46%, #BFE0FA 0%, rgba(191,224,250,0) 72%),
    linear-gradient(105deg, #FAFAFF 0%, #F1F5FE 46%, #DDEDFB 100%);
}
.fa-hero__inner { display: grid; grid-template-columns: 1.06fr 1fr; gap: 54px; align-items: center; }
.fa-hero__title {
  font-family: var(--fa-ff-head); font-size: 52px; font-weight: 700;
  line-height: 1.13; letter-spacing: -.025em; color: var(--fa-strong); margin: 0 0 22px;
}
.fa-hero__body { font-family: var(--fa-ff-body); font-size: 20px; line-height: 1.62; color: var(--fa-text-mid); margin: 0 0 30px; max-width: 560px; }
.fa-hero__art { position: relative; }
.fa-hero__art img { width: 100%; height: auto; display: block; margin-left: auto; max-width: 520px; }

/* ============================================================
   GENERIC SECTION
============================================================ */
.fa-section { padding-top: var(--fa-sec-py); padding-bottom: var(--fa-sec-py); }
.fa-section--tint { background: linear-gradient(180deg,#FCFCFE 0%, #F4F8FE 100%); }
.fa-section--plain { background: #FCFCFE; }
.fa-section + .fa-section { border-top: 1px solid rgba(229,231,235,.6); }

/* ── alternating image + text rows ────────────────────── */
.fa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.fa-row + .fa-row { margin-top: 80px; }
.fa-row__title { font-family: var(--fa-ff-head); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--fa-strong); margin: 0 0 16px; }
.fa-row__art img { width: 100%; height: auto; display: block; }
.fa-row--art-left .fa-row__art  { order: 1; }
.fa-row--art-left .fa-row__text { order: 2; }
.fa-row--art-right .fa-row__text { order: 1; }
.fa-row--art-right .fa-row__art  { order: 2; }
.fa-figure { background: #fff; border: 1px solid var(--fa-border); border-radius: var(--fa-r-lg); padding: 18px; box-shadow: var(--fa-shadow-card); }
.fa-figure img { border-radius: 12px; }

/* ── check list ───────────────────────────────────────── */
.fa-checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.fa-checks--two { grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.fa-check { position: relative; display: flex; align-items: flex-start; gap: 12px; font-family: var(--fa-ff-body); font-size: 17px; line-height: 1.55; color: var(--fa-text-mid); }
.fa-check__ico { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--fa-tint-2); display: inline-flex; align-items: center; justify-content: center; }
.fa-check__ico svg { width: 13px; height: 13px; }
/* neutralise FontAwesome's .fa-check icon glyph — our check-list items reuse that class name */
.fa-checks .fa-check::before, .fa-checks .fa-check::after { content: none !important; }
.fa-check b, .fa-check strong { color: var(--fa-strong); font-weight: 700; }

/* ── feature cards grid ───────────────────────────────── */
.fa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.fa-card {
  background: #fff; border: 1px solid var(--fa-border); border-radius: var(--fa-r-lg);
  padding: 30px 26px; box-shadow: var(--fa-shadow-card);
  transition: transform .2s var(--fa-ease), box-shadow .2s var(--fa-ease), border-color .2s var(--fa-ease);
}
.fa-card:hover { transform: translateY(-4px); box-shadow: var(--fa-shadow-hover); border-color: rgba(1,169,224,.4); }
.fa-card__ico { width: 50px; height: 50px; border-radius: 13px; background: var(--fa-grad-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fa-card__ico i { color: #fff; font-size: 21px; }
.fa-card__title { font-family: var(--fa-ff-head); font-size: 19px; font-weight: 700; color: var(--fa-strong); margin: 0 0 10px; }
.fa-card__body { font-family: var(--fa-ff-body); font-size: 15.5px; line-height: 1.58; color: var(--fa-text-mid); margin: 0; }

/* ── numbered steps ───────────────────────────────────── */
.fa-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; counter-reset: fa-step; }
.fa-step { position: relative; background: #fff; border: 1px solid var(--fa-border); border-radius: var(--fa-r-lg); padding: 28px 24px; box-shadow: var(--fa-shadow-card); }
.fa-step__n { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--fa-tint); color: var(--fa-blue); font-family: var(--fa-ff-head); font-weight: 800; font-size: 19px; margin-bottom: 16px; }
.fa-step__title { font-family: var(--fa-ff-head); font-size: 17.5px; font-weight: 700; color: var(--fa-strong); margin: 0 0 8px; }
.fa-step__body { font-family: var(--fa-ff-body); font-size: 15px; line-height: 1.55; color: var(--fa-text-mid); margin: 0; }

/* ── comparison table ─────────────────────────────────── */
.fa-table-wrap { overflow-x: auto; border-radius: var(--fa-r-lg); border: 1px solid var(--fa-border); box-shadow: var(--fa-shadow-card); background: #fff; }
.fa-table { width: 100%; border-collapse: collapse; min-width: 560px; font-family: var(--fa-ff-body); }
.fa-table thead th { text-align: left; font-family: var(--fa-ff-head); font-size: 15px; font-weight: 700; color: #fff; background: var(--fa-grad-primary); padding: 16px 24px; }
.fa-table tbody td { padding: 16px 24px; font-size: 16px; color: var(--fa-text-mid); border-top: 1px solid var(--fa-border); }
.fa-table tbody td:first-child { font-weight: 700; color: var(--fa-strong); font-family: var(--fa-ff-head); }
.fa-table tbody tr:nth-child(even) { background: #F8FAFE; }

/* ── FAQ accordion (native <details>) ─────────────────── */
.fa-faq { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; }
.fa-faq__item { background: #fff; border: 1px solid var(--fa-border); border-radius: var(--fa-r-md); box-shadow: var(--fa-shadow-card); overflow: hidden; }
.fa-faq__item[open] { border-color: rgba(1,169,224,.45); }
.fa-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-family: var(--fa-ff-head); font-size: 18px; font-weight: 700; color: var(--fa-strong); }
.fa-faq__q::-webkit-details-marker { display: none; }
.fa-faq__q::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2.4px solid var(--fa-teal); border-bottom: 2.4px solid var(--fa-teal); transform: rotate(45deg); transition: transform .25s var(--fa-ease); margin-top: -4px; }
.fa-faq__item[open] .fa-faq__q::after { transform: rotate(-135deg); margin-top: 2px; }
.fa-faq__a { padding: 0 24px 22px; font-family: var(--fa-ff-body); font-size: 16px; line-height: 1.62; color: var(--fa-text-mid); }
.fa-faq__a p { margin: 0 0 10px; }
.fa-faq__a ul { margin: 6px 0 12px; padding-left: 20px; }
.fa-faq__a li { margin: 4px 0; }
.fa-faq__a b { color: var(--fa-strong); }
.fa-faq__a a { color: var(--fa-blue); font-weight: 600; text-decoration: none; }
.fa-faq__a a:hover { color: var(--fa-teal); }

/* ── CTA banner ───────────────────────────────────────── */
.fa-cta {
  padding-top: 76px; padding-bottom: 76px; text-align: center;
  background:
    radial-gradient(900px 520px at 4% 30%, #8FDCF2 0%, rgba(143,220,242,0) 62%),
    radial-gradient(760px 520px at 18% 96%, #B9F0DA 0%, rgba(185,240,218,0) 60%),
    linear-gradient(100deg, #CFEFF8 0%, #E4F7F4 46%, #EFFAFD 100%);
}
.fa-cta__title { font-family: var(--fa-ff-head); font-size: 44px; font-weight: 700; line-height: 1.14; letter-spacing: -.02em; color: var(--fa-strong); margin: 0 0 18px; }
.fa-cta__body { font-family: var(--fa-ff-body); font-size: 20px; line-height: 1.6; color: var(--fa-text-mid); margin: 0 auto 32px; max-width: 760px; }
.fa-cta .fa-btn-group { justify-content: center; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 992px) {
  .fa-hero__inner { grid-template-columns: 1fr; gap: 38px; }
  .fa-hero__art img { margin: 0 auto; max-width: 440px; }
  .fa-row { grid-template-columns: 1fr; gap: 30px; }
  .fa-row + .fa-row { margin-top: 52px; }
  .fa-row--art-left .fa-row__art, .fa-row--art-right .fa-row__art { order: 2; }
  .fa-row--art-left .fa-row__text, .fa-row--art-right .fa-row__text { order: 1; }
  .fa-row__art img { max-width: 520px; margin: 0 auto; }
  .fa-checks--two { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --fa-sec-py: 56px; }
  .fa-hero          { padding-top: 46px; padding-bottom: 46px; }
  .fa-hero__title   { font-size: 33px; }
  .fa-hero__body    { font-size: 18px; }
  .fa-eyebrow       { font-size: 17px; }
  .fa-section-title { font-size: 27px; }
  .fa-section-body  { font-size: 17px; }
  .fa-header        { margin-bottom: 40px; }
  .fa-row__title    { font-size: 23px; }
  .fa-cta__title    { font-size: 29px; }
  .fa-cta__body     { font-size: 18px; }
  .fa-btn-group     { flex-direction: column; align-items: stretch; }
  .fa-btn           { justify-content: center; }
  .fa-faq__q        { font-size: 16px; padding: 16px 18px; }
  .fa-faq__a        { padding: 0 18px 18px; }
}