/* ado-prose.css — ADO 906 REDO. Loaded LAST (after donna365.css).
   Owner: single subagent.

   GOAL (Akbar reopen): the prose content pages (donna-intelligence,
   document-management, m365-ecosystem, solutions/*, compare/*, resources/*)
   must look like the FEATURES page — icon-card GRIDS, alternating light/dark
   feature bands, eyebrow + heading-title section headers — NOT "text after
   text in boxes".

   MECHANISM (see layouts/_default/single.html, prose path):
   Rendered .Content is split at every <h2>. Each H2 section becomes a
   FEATURES-style band:
     <section class="ado-fsection [is-dark]">
       <div class="container">
         <div class="heading-section center"> eyebrow + heading-title </div>
         <div class="ado-section-body prose"> …transformed body… </div>
       </div>
     </section>
   Bands ALTERNATE light / dark (.is-dark = var(--bg-2,#0d1117), white text)
   for the Features "How it fits" rhythm.

   The key transform: runs of <p><strong>Label</strong> body</p> are rewritten
   in the layout into a card GRID:
     <div class="row g-24 ado-card-grid">
       <div class="col-lg-4 col-md-6 ado-grid-col">
         <div class="benefits-card ado-prose-card">
           <span class="ado-prose-card-icon"></span>
           <h3 class="ado-card-title">Label</h3><p>body</p>
         </div></div> …
     </div>
   These become real icon cards, like the Features feature-card grid.

   Icons: assigned here via CSS content on .ado-prose-card-icon, cycling a
   curated set of icomoon glyphs CONFIRMED to exist in
   static/assets/icon/icomoon/style.css:
     \e913 icon-clipboard-check-solid   \e90b icon-book-open-solid
     \e911 icon-chart-line-solid        \e949 icon-shield-alt-solid
     \e947 icon-robot-solid             \e955 icon-user-check-solid
     \e909 icon-bezier-curve-solid      \e943 icon-plug-solid
     \e912 icon-check-solid             \e936 icon-long-arrow-alt-right-solid
     \e945 icon-quote-right-solid       \e90e icon-bullseye-solid
   Scoped under .ado-fsections so blogs / about / contact / features /
   security / investors are untouched. NEVER edits donna365.css/styles*.css.
   ──────────────────────────────────────────────────────────────────────── */

/* ── HERO: eyebrow + lead + CTA on the prose pages ─────────────────────── */
.ado-prose-hero .ado-prose-eyebrow {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 22px;
}
.ado-prose-hero .content-wrap > .text {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}
.ado-prose-hero-cta { margin-top: 40px; }

/* ── SECTION SHELL ─────────────────────────────────────────────────────── */
.ado-fsections { position: relative; }

/* Trim the doubled top/bottom rhythm between back-to-back flat-spacing bands. */
.ado-fsections .ado-fsection { padding-top: 72px; padding-bottom: 72px; }
.ado-fsections .ado-lead-section { padding-top: 8px; padding-bottom: 8px; }

/* Light band gets a faint surface wash so it isn't flat white. */
.ado-fsections .ado-fsection:not(.is-dark) {
  background:
    radial-gradient(120% 130% at 85% -10%, rgba(253, 58, 37, 0.04) 0%, rgba(253, 58, 37, 0) 55%),
    #ffffff;
}
/* Every other light band gets a slightly tinted surface for extra rhythm. */
.ado-fsections .ado-fsection:not(.is-dark):nth-of-type(4n+3) {
  background:
    radial-gradient(120% 130% at 12% -10%, rgba(253, 58, 37, 0.05) 0%, rgba(253, 58, 37, 0) 55%),
    #f5f4f4;
}

/* DARK BAND — mirrors the Features "How it fits" band. */
.ado-fsections .ado-fsection.is-dark {
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(253, 58, 37, 0.16) 0%, rgba(253, 58, 37, 0) 55%),
    var(--bg-2, #0d1117);
}

/* ── SECTION HEADER (eyebrow + heading-title) ──────────────────────────── */
.ado-fsections .ado-fsection-head { margin-bottom: 44px; }
/* heading-title base is 72px (page hero scale); dial it down for sections. */
.ado-fsections .ado-fsection-head .heading-title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08;
}
.ado-fsections .ado-fsection.is-dark .ado-fsection-head .heading-sub.style-1 {
  color: #c9c9ff;
}

/* ── SECTION BODY ──────────────────────────────────────────────────────── */
.ado-fsections .ado-section-body { max-width: 1180px; margin-inline: auto; }

/* Plain narrative paragraphs (sections with no card grid, e.g. compare pages)
   read as a tidy centred standfirst, not a wall. */
.ado-fsections .ado-section-body > p {
  max-width: 70ch;
  margin: 0 auto 1.15rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #3a3a42;
  text-align: center;
}
.ado-fsections .ado-fsection.is-dark .ado-section-body > p { color: #c4c6cf; }

/* Lead / standfirst block before the first H2. */
.ado-fsections .ado-lead-body > p {
  max-width: 74ch;
  margin: 0 auto 1.1rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.7;
  color: #2a2a30;
  text-align: center;
}
.ado-fsections .ado-lead-body > p:first-of-type { font-weight: 500; }

/* Sub-headers (H3) inside a section act as group labels above each card grid. */
.ado-fsections .ado-section-body h3 {
  text-align: center;
  margin: 14px auto 30px;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #18181b;
}
.ado-fsections .ado-section-body h3 + .ado-card-grid { margin-top: 4px; }
.ado-fsections .ado-fsection.is-dark .ado-section-body h3 { color: #ffffff; }

/* ── THE CARD GRID (the headline fix) ──────────────────────────────────── */
.ado-fsections .ado-card-grid { margin-top: 8px; margin-bottom: 8px; }
.ado-fsections .ado-card-grid + h3 { margin-top: 56px; }
.ado-fsections .ado-grid-col { display: flex; }

.ado-fsections .ado-prose-card {
  flex: 1;
  min-height: auto;
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  background: #ffffff;
  border: 1px solid rgba(24, 24, 27, 0.1);
  border-radius: 22px;
  box-shadow:
    0 7.77px 16px rgba(0, 0, 0, 0.05),
    0 3px 3px rgba(0, 0, 0, 0.06),
    0 -8px 0 rgba(0, 0, 0, 0.04) inset,
    0 4px 0 rgba(255, 255, 255, 0.6) inset;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ado-fsections .ado-prose-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(24, 24, 27, 0.12),
    0 3px 3px rgba(24, 24, 27, 0.08);
}

/* Branded icon chip — matches the Features feature-card-icon / Security chip. */
.ado-fsections .ado-prose-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(155deg, #1f1f24 0%, #0c0c0f 100%);
  box-shadow:
    0 8px 18px rgba(24, 24, 27, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.ado-fsections .ado-prose-card-icon::before {
  font-family: 'icomoon' !important;
  font-size: 24px;
  line-height: 1;
  content: "\e913"; /* default: clipboard-check */
}
/* Cycle a curated icon set across the cards in each grid (8-step cycle). */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+1) .ado-prose-card-icon::before { content: "\e913"; } /* clipboard-check */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+2) .ado-prose-card-icon::before { content: "\e90b"; } /* book-open */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+3) .ado-prose-card-icon::before { content: "\e911"; } /* chart-line */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+4) .ado-prose-card-icon::before { content: "\e949"; } /* shield-alt */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+5) .ado-prose-card-icon::before { content: "\e947"; } /* robot */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+6) .ado-prose-card-icon::before { content: "\e909"; } /* bezier-curve */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+7) .ado-prose-card-icon::before { content: "\e90e"; } /* bullseye */
.ado-fsections .ado-card-grid .ado-grid-col:nth-child(8n+8) .ado-prose-card-icon::before { content: "\e943"; } /* plug */

/* Brand-tint the chip on dark bands for contrast / pop. */
.ado-fsections .ado-fsection.is-dark .ado-prose-card-icon {
  background: linear-gradient(155deg, #fd5340 0%, #c5271a 100%);
  box-shadow: 0 10px 22px rgba(253, 58, 37, 0.30), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.ado-fsections .ado-card-title {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #18181b;
}
.ado-fsections .ado-prose-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: #52525b;
}

/* Cards on the DARK band. */
.ado-fsections .ado-fsection.is-dark .ado-prose-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ado-fsections .ado-fsection.is-dark .ado-card-title { color: #ffffff; }
.ado-fsections .ado-fsection.is-dark .ado-prose-card p { color: #b9bbc6; }
.ado-fsections .ado-fsection.is-dark .ado-prose-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  border-color: rgba(253, 58, 37, 0.35);
}

/* ── LISTS AS ICON CHECKLISTS (Features card bullets language) ─────────── */
.ado-fsections .ado-section-body > ul,
.ado-fsections .ado-section-body > ol {
  list-style: none;
  max-width: 920px;
  margin: 8px auto 1.2rem;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .ado-fsections .ado-section-body > ul,
  .ado-fsections .ado-section-body > ol {
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
  }
}
.ado-fsections .ado-section-body > ul > li,
.ado-fsections .ado-section-body > ol > li {
  position: relative;
  margin: 0;
  padding: 16px 18px 16px 52px;
  line-height: 1.55;
  font-size: 1rem;
  color: #3a3a42;
  background: #ffffff;
  border: 1px solid rgba(24, 24, 27, 0.1);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(24, 24, 27, 0.05);
}
.ado-fsections .ado-section-body > ul > li::before,
.ado-fsections .ado-section-body > ol > li::before {
  content: "\e912"; /* icon-check-solid */
  font-family: 'icomoon' !important;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(180deg, var(--brand, #FD3A25), #e0301d);
  box-shadow: 0 3px 8px rgba(253, 58, 37, 0.35);
}
.ado-fsections .ado-fsection.is-dark .ado-section-body > ul > li,
.ado-fsections .ado-fsection.is-dark .ado-section-body > ol > li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #c4c6cf;
}
.ado-fsections .ado-section-body li strong { color: inherit; font-weight: 700; }
.ado-fsections .ado-fsection.is-dark .ado-section-body li strong { color: #fff; }

/* ── TABLES AS SPEC CARDS ──────────────────────────────────────────────── */
.ado-fsections .ado-section-body table {
  width: 100%;
  max-width: 1000px;
  margin: 8px auto 1.2rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.98rem;
  border: 1px solid rgba(24, 24, 27, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px rgba(24, 24, 27, 0.08);
}
.ado-fsections .ado-section-body thead th {
  text-align: left;
  background: #18181b;
  color: #fff;
  font-weight: 600;
  padding: 15px 20px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ado-fsections .ado-section-body tbody td {
  padding: 15px 20px;
  border-top: 1px solid rgba(24, 24, 27, 0.08);
  color: #3a3a42;
  vertical-align: top;
  line-height: 1.55;
}
.ado-fsections .ado-section-body tbody tr:nth-child(even) td { background: #faf9f9; }
.ado-fsections .ado-section-body tbody td:first-child {
  font-weight: 600;
  color: #18181b;
  white-space: nowrap;
}
.ado-fsections .ado-section-body table strong { color: var(--brand, #FD3A25); }
/* Table on a dark band. */
.ado-fsections .ado-fsection.is-dark .ado-section-body table {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
.ado-fsections .ado-fsection.is-dark .ado-section-body tbody td { color: #c4c6cf; border-top-color: rgba(255,255,255,0.08); }
.ado-fsections .ado-fsection.is-dark .ado-section-body tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.ado-fsections .ado-fsection.is-dark .ado-section-body tbody td:first-child { color: #fff; }

/* ── BLOCKQUOTE AS DARK PULL-QUOTE CARD ────────────────────────────────── */
.ado-fsections .ado-section-body blockquote {
  position: relative;
  max-width: 880px;
  margin: 12px auto 4px;
  padding: 34px 36px 32px 76px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(253, 58, 37, 0.20), rgba(253, 58, 37, 0) 60%),
    #14142A;
  color: #f4f4ff;
  box-shadow: 0 24px 54px rgba(10, 10, 26, 0.32);
}
.ado-fsections .ado-section-body blockquote::before {
  content: "\e945"; /* icon-quote-right-solid */
  font-family: 'icomoon' !important;
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 24px;
  color: var(--brand, #FD3A25);
}
.ado-fsections .ado-section-body blockquote p {
  margin: 0;
  max-width: none;
  text-align: left;
  color: #ececff;
  font-size: 1.16rem;
  line-height: 1.62;
  font-weight: 500;
}
/* On a dark band, lift the quote so it still separates from the surface. */
.ado-fsections .ado-fsection.is-dark .ado-section-body blockquote {
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(253, 58, 37, 0.22), rgba(253, 58, 37, 0) 60%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── SINGLE-LINK PARAGRAPH → REAL CTA BUTTON ───────────────────────────── */
.ado-fsections .ado-section-body p > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 30px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--brand, #FD3A25), #d62d1b);
  box-shadow: 0 12px 26px rgba(253, 58, 37, 0.32);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ado-fsections .ado-section-body p:has(> a:only-child) { text-align: center; }
.ado-fsections .ado-section-body p > a:only-child::after {
  content: "\e936"; /* long-arrow-alt-right */
  font-family: 'icomoon' !important;
  font-size: 0.82em;
}
.ado-fsections .ado-section-body p > a:only-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(253, 58, 37, 0.4);
  color: #fff !important;
}
/* Inline links inside narrative text. */
.ado-fsections .ado-section-body p a {
  color: var(--brand, #FD3A25);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ado-fsections .ado-fsection.is-dark .ado-section-body p a { color: #ff8a78; }

/* ── IMAGES ────────────────────────────────────────────────────────────── */
.ado-fsections .ado-section-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto 1.2rem;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(24, 24, 27, 0.14);
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .ado-fsections .ado-fsection { padding-top: 56px; padding-bottom: 56px; }
  .ado-fsections .ado-prose-card { padding: 26px 24px; }
}
@media (max-width: 575px) {
  .ado-fsections .ado-section-body > p,
  .ado-fsections .ado-lead-body > p { text-align: left; }
}