/* ============================================================
   FAQ landing pages — shared design system
   (what-is-pki, what-is-iam, what-is-clm, what-is-ssl-tls-certificates,
    what-is-zero-trust, what-is-mfa, two-factor-authentication, what-is-kms)

   Modern SaaS-style design — no hero image, clean typography hierarchy,
   off-white section backgrounds, soft purple/orange accents matching the
   recent blog + case-study + FAQ-index work.
   Class prefix: `fql-` (FAQ landing).
   ============================================================ */

/* ----- Color tokens (local — not site-wide) ----- */
.fql-hero,
.fql-section,
.fql-cta,
.fql-resources,
.fql-faq {
  --fql-text:        #111928;
  --fql-text-muted:  #4b5563;
  --fql-text-soft:   #6b7280;
  --fql-border:      #ececec;
  --fql-border-soft: #f3f4f6;
  --fql-bg-soft:     #fafafa;
  --fql-bg-purple:   #f5f3ff;
  --fql-bg-orange:   #fff7ed;
  --fql-purple:      #673695;
  --fql-purple-dark: #54256c;
  --fql-orange:      #f26739;
  --fql-orange-dark: #c2410c;
}

/* ============================================================
   Hero — compact editorial, no image
   ============================================================ */
.fql-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fff5ec 0%, #fffbf8 70%, #ffffff 100%);
  padding: 7rem 0 4.5rem;
}
@media (min-width: 768px) { .fql-hero { padding: 10rem 0 5.5rem; } }
.fql-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 45% at 50% 0%,  rgba(242, 103, 57, 0.10) 0%, transparent 60%),
    radial-gradient(35% 25% at 85% 10%, rgba(103, 54, 149, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.fql-hero__intro {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.fql-hero__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--fql-text);
  letter-spacing: -0.02em;
  margin: 0 auto 0.875rem !important;
  max-width: 760px;
}
@media (min-width: 768px)  { .fql-hero__title { font-size: 2.75rem; } }
@media (min-width: 1280px) { .fql-hero__title { font-size: 3.1rem; } }
.fql-hero__sub {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fql-text-muted);
  max-width: 640px;
  margin: 0 auto !important;
}
@media (min-width: 768px) { .fql-hero__sub { font-size: 1.125rem; } }

/* ============================================================
   Section primitive — used by every section below the hero
   ============================================================ */
.fql-section {
  padding: 3rem 0;
  background: #fff;
}
@media (min-width: 768px) { .fql-section { padding: 4.5rem 0; } }
.fql-section--soft   { background: var(--fql-bg-soft); }
.fql-section--purple { background: var(--fql-bg-purple); }

.fql-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.25rem;
}
.fql-section__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fql-orange);
  margin-bottom: 0.625rem;
}
.fql-section__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fql-text);
  letter-spacing: -0.015em;
  margin: 0 0 0.875rem !important;
}
@media (min-width: 768px) { .fql-section__title { font-size: 2.1rem; } }
.fql-section__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fql-text-muted);
  margin: 0 !important;
}

/* ============================================================
   About — two-column: text on left, supporting illustration on right
   ============================================================ */
.fql-about .fql-section__title--left {
  text-align: left;
  margin: 0 0 1.25rem !important;
}
.fql-about__body { max-width: 100%; margin: 0; }
.fql-about__body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fql-text-muted);
  margin: 0 0 1.125rem !important;
}
.fql-about__body p:last-child { margin-bottom: 0 !important; }
@media (min-width: 768px) { .fql-about__body p { font-size: 1.0625rem; } }

/* ----- Static SVG illustration (uses /images/svg/faqs/faqs.svg) ----- */
.fql-about__visual {
  position: relative;
  display: flex;
  align-items: flex-start;   /* top-aligned with the text column */
  justify-content: center;
  padding-left: 1rem;
}
.fql-about__img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
}

/* ============================================================
   Feature grid — used by "Components", "How it works",
   "Why Choose", "Get Started" sections
   ============================================================ */
.fql-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  /* Center the grid horizontally so a partial last row doesn't pin to the
     left edge with an awkward gap. Cap row width per breakpoint so 4/5 items
     don't stretch into too-thin cards. */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
@media (min-width: 600px)  { .fql-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 720px; } }
@media (min-width: 992px)  { .fql-features { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; } }

/* Center the last row when item count is not a multiple of the column count.
   :nth-last-child() math: when 4 items in a 3-col grid → 1 orphan; when 5
   items → 2 orphans. Push them by half a column so they sit centered. */
@media (min-width: 992px) {
  /* 4 items: last 1 takes columns 2/3 (centered single card) */
  .fql-features > .fql-feature:first-child:nth-last-child(4) ~ .fql-feature:last-child {
    grid-column: 2 / 3;
  }
  /* 5 items: last 2 take columns 1.5/2.5 + 2.5/3.5 — we approximate by shifting the 4th to col 1 with offset.
     CSS Grid alone can't half-shift cleanly, so for 5 items we use a different rule below. */
  .fql-features:has(> .fql-feature:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .fql-features:has(> .fql-feature:nth-child(5):last-child) > .fql-feature { grid-column: span 2; }
  .fql-features:has(> .fql-feature:nth-child(5):last-child) > .fql-feature:nth-child(4) { grid-column: 2 / span 2; }
  .fql-features:has(> .fql-feature:nth-child(5):last-child) > .fql-feature:nth-child(5) { grid-column: 4 / span 2; }
  /* 7 items: cap to 4 cols + center the orphan */
  .fql-features:has(> .fql-feature:nth-child(7):last-child) > .fql-feature:nth-child(7) { grid-column: 2 / 3; }
}

.fql-feature {
  position: relative;
  background: #fff;
  border: 1px solid var(--fql-border);
  border-radius: 14px;
  padding: 1.5rem 1.375rem;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.fql-feature:hover {
  transform: translateY(-2px);
  border-color: #e5e7eb;
  box-shadow: 0 18px 36px rgba(17,24,39,0.06);
}
.fql-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff7ed;
  color: var(--fql-orange);
  font-size: 1.35rem;
  margin-bottom: 0.875rem;
}
.fql-feature--alt .fql-feature__icon {
  background: var(--fql-bg-purple);
  color: var(--fql-purple);
}
.fql-feature__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fql-text);
  margin: 0 0 0.375rem !important;
  line-height: 1.35;
}
.fql-feature__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fql-text-muted);
  margin: 0 !important;
}

/* ============================================================
   Feature section variant B — zig-zag rows.
   Each item is a wide row; the icon side alternates (left/right) per row
   to break up the rhythm vs the 3-col card grid (variant A).
   ============================================================ */
.fql-zigzag {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 768px) { .fql-zigzag { gap: 1.25rem; } }

.fql-zig {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--fql-border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
@media (min-width: 768px) { .fql-zig { padding: 1.5rem 1.75rem; gap: 1.75rem; } }
.fql-zig:hover {
  transform: translateY(-2px);
  border-color: #e5e7eb;
  box-shadow: 0 18px 36px rgba(17,24,39,0.06);
}
.fql-zig--alt { flex-direction: row-reverse; }
@media (max-width: 600px) {
  .fql-zig, .fql-zig--alt { flex-direction: column; align-items: flex-start; text-align: left; }
}
.fql-zig__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: var(--fql-bg-purple);
  color: var(--fql-purple);
}
.fql-zig--alt .fql-zig__icon {
  background: var(--fql-bg-orange);
  color: var(--fql-orange);
}
.fql-zig__body { flex: 1; min-width: 0; }
.fql-zig__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fql-text);
  margin: 0 0 0.25rem !important;
  line-height: 1.35;
}
.fql-zig__desc {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--fql-text-muted);
  margin: 0 !important;
}

/* ============================================================
   Feature section variant C — numbered 2-col compact list.
   No card chrome — large monospace numerals act as the visual anchor.
   ============================================================ */
.fql-numbered {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
}
@media (min-width: 768px) { .fql-numbered { grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; } }
.fql-numbered__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--fql-border-soft);
}
.fql-numbered__item:last-child,
.fql-numbered__item:nth-last-child(2):nth-child(2n+1) {
  border-bottom: 0;
  padding-bottom: 0;
}
.fql-numbered__num {
  flex-shrink: 0;
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fql-orange);
  letter-spacing: -0.02em;
  min-width: 2.5rem;
}
.fql-numbered__body { flex: 1; min-width: 0; }
.fql-numbered__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fql-text);
  margin: 0 0 0.25rem !important;
  line-height: 1.35;
}
.fql-numbered__desc {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--fql-text-muted);
  margin: 0 !important;
}

/* ============================================================
   Strategic Advantages — 4-column single row, large numerals, no card chrome
   beyond a faint top border accent. Replaces the previous .fql-checklist
   treatment of the strategic data so consecutive sections feel distinct.
   ============================================================ */
.fql-strategic .fql-section__head { max-width: 760px; }
.fql-strat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 600px) { .fql-strat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 992px) { .fql-strat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; } }

.fql-strat-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: 3px solid var(--fql-orange);
  border-radius: 14px;
  padding: 1.5rem 1.25rem 1.375rem;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.fql-strat-card:nth-child(2) { border-top-color: var(--fql-purple); }
.fql-strat-card:nth-child(3) { border-top-color: #0e7490; }
.fql-strat-card:nth-child(4) { border-top-color: #15803d; }
.fql-strat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(17,24,39,0.08);
}
.fql-strat-card__num {
  display: block;
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fql-text-soft);
  margin-bottom: 0.625rem;
}
.fql-strat-card__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fql-text);
  line-height: 1.3;
  margin: 0 0 0.5rem !important;
}
.fql-strat-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fql-text-muted);
  margin: 0 !important;
}

/* ============================================================
   Pill list — used by Use Cases / Strategic / inline bullet sections
   Reusable two-column list with a check icon.
   ============================================================ */
.fql-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .fql-checklist { grid-template-columns: 1fr 1fr; gap: 0.875rem 1.5rem; } }
.fql-checklist li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fql-text-muted);
}
.fql-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--fql-bg-purple);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l3.5 3.5L15 7' stroke='%236366F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================================
   FAQ Accordion — 2 columns: left heading, right accordion
   ============================================================ */
.fql-faq .row { align-items: flex-start; }

.fql-faq__intro h2 {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fql-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.875rem !important;
}
@media (min-width: 992px) {
  .fql-faq__intro h2 { font-size: 1.85rem; }
  .fql-faq__intro { position: sticky; top: 100px; }
}
.fql-faq__intro p {
  font-size: 0.95rem;
  color: var(--fql-text-muted);
  line-height: 1.6;
  margin: 0 0 1.25rem !important;
}
.fql-faq__intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fql-orange);
  text-decoration: none;
  transition: gap 0.18s, color 0.18s;
}
.fql-faq__intro__cta:hover { color: var(--fql-orange-dark); gap: 12px; }

.fql-acc {
  display: grid;
  gap: 0.625rem;
}
.fql-acc__item {
  background: #fff;
  border: 1px solid var(--fql-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.fql-acc__item:hover { border-color: #e5e7eb; }
.fql-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--fql-text);
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.18s;
}
.fql-acc__btn:hover,
.fql-acc__btn:focus-visible { color: var(--fql-orange); outline: none; }
.fql-acc__btn .fql-acc__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fql-text-soft);
  transition: transform 0.2s, color 0.2s;
}
.fql-acc__btn[aria-expanded="true"] { color: var(--fql-orange); }
.fql-acc__btn[aria-expanded="true"] .fql-acc__chevron { transform: rotate(180deg); color: var(--fql-orange); }
.fql-acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.fql-acc__panel[data-open="true"] { /* JS sets explicit max-height for smooth open */ }
.fql-acc__panel__inner {
  padding: 0 1.25rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fql-text-muted);
}
.fql-acc__panel__inner p { margin: 0 0 0.875rem !important; }
.fql-acc__panel__inner p:last-child { margin-bottom: 0 !important; }

/* ============================================================
   Related Resources — card grid mirroring the blog listing style
   ============================================================ */
.fql-resources__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px)  { .fql-resources__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fql-resources__grid { grid-template-columns: repeat(3, 1fr); } }

.fql-resource {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fql-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  overflow: hidden;
  isolation: isolate;
}
.fql-resource::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(180deg, var(--res-bg-top, #fff7ed) 0%, transparent 100%);
  z-index: -1;
  opacity: 0.85;
}
.fql-resource:hover {
  transform: translateY(-4px);
  border-color: #e5e7eb;
  box-shadow: 0 24px 48px rgba(17,24,39,0.10);
  text-decoration: none;
  color: inherit;
}
/* Big per-type icon medallion — anchor for the card */
.fql-resource__medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--res-icon-bg, #fff7ed);
  color: var(--res-icon-fg, #c2410c);
  font-size: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px var(--res-glow, rgba(242, 103, 57, 0.18));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fql-resource:hover .fql-resource__medallion {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 14px 32px var(--res-glow, rgba(242, 103, 57, 0.28));
}
.fql-resource__type {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0 0.65rem;
  min-height: 24px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--res-icon-fg, #b43403);
  background: var(--res-icon-bg, #feecdc);
  border: 1px solid currentColor;
  border-color: var(--res-border, #fcd9bd);
  border-radius: 6px;
  margin-bottom: 0.875rem;
}
/* Per-type tone palettes — applied via .fql-resource--<tone> on the card */
.fql-resource--orange { --res-bg-top:#fff7ed; --res-icon-bg:#ffedd5; --res-icon-fg:#c2410c; --res-border:#fcd9bd; --res-glow:rgba(242, 103, 57, 0.18); }
.fql-resource--purple { --res-bg-top:#f5f3ff; --res-icon-bg:#ede9fe; --res-icon-fg:#6366F1; --res-border:#ddd6fe; --res-glow:rgba(99,102,241,0.18); }
.fql-resource--teal   { --res-bg-top:#ecfeff; --res-icon-bg:#cffafe; --res-icon-fg:#0e7490; --res-border:#a5f3fc; --res-glow:rgba(14,116,144,0.18); }
.fql-resource--amber  { --res-bg-top:#fffbeb; --res-icon-bg:#fef3c7; --res-icon-fg:#b45309; --res-border:#fde68a; --res-glow:rgba(180,83,9,0.18); }
.fql-resource--red    { --res-bg-top:#fef2f2; --res-icon-bg:#fee2e2; --res-icon-fg:#b91c1c; --res-border:#fecaca; --res-glow:rgba(185,28,28,0.18); }
.fql-resource--green  { --res-bg-top:#ecfdf5; --res-icon-bg:#d1fae5; --res-icon-fg:#065f46; --res-border:#a7f3d0; --res-glow:rgba(6,95,70,0.18); }
.fql-resource--pink   { --res-bg-top:#fdf2f8; --res-icon-bg:#fce7f3; --res-icon-fg:#be185d; --res-border:#fbcfe8; --res-glow:rgba(190,24,93,0.18); }
.fql-resource__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fql-text);
  line-height: 1.4;
  margin: 0 0 0.875rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fql-resource__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fql-orange);
  transition: gap 0.18s;
}
.fql-resource:hover .fql-resource__cta { gap: 10px; }
.fql-resource__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  opacity: 0;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.fql-resource:hover .fql-resource__arrow {
  opacity: 1;
  color: var(--fql-orange);
  transform: translate(2px, -2px);
}

/* ============================================================
   Bottom CTA — orange/cream gradient card with a single button
   ============================================================ */
.fql-cta {
  padding: 2.5rem 0 5rem;
  background: #fff;
}
@media (min-width: 768px) { .fql-cta { padding: 3.5rem 0 6rem; } }
.fql-cta__inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, #fff8f1 0%, #f6f5ff 100%);
  border-radius: 20px;
  padding: 3rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) { .fql-cta__inner { padding: 4rem 3rem; } }
.fql-cta__inner::before,
.fql-cta__inner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.fql-cta__inner::before {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(242, 103, 57, 0.18) 0%, transparent 70%);
  top: -60px; right: -40px;
}
.fql-cta__inner::after {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(103, 54, 149, 0.15) 0%, transparent 70%);
  bottom: -60px; left: -40px;
}
.fql-cta__inner > * { position: relative; z-index: 1; }
.fql-cta__title {
  font-family: var(--DMSans), 'DM Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fql-text);
  line-height: 1.25;
  margin: 0 0 0.875rem !important;
}
@media (min-width: 768px) { .fql-cta__title { font-size: 2.25rem; } }
.fql-cta__desc {
  font-size: 1rem;
  color: var(--fql-text-muted);
  line-height: 1.6;
  margin: 0 auto 1.5rem !important;
  max-width: 600px;
}
@media (min-width: 768px) { .fql-cta__desc { font-size: 1.0625rem; } }
.fql-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background: #1c64f2;
  color: #fff;
  border: 1px solid #1c64f2;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.fql-cta__btn:hover,
.fql-cta__btn:focus-visible {
  background: #fff;
  color: #1c64f2;
  border-color: #1c64f2;
  text-decoration: none;
  outline: none;
}

/* ============================================================
   Form section — premium gradient + subtle dot-grid background that covers
   the empty side-spaces around the centered form card. Reuses csd-* classes
   from /css/common/case-study.css for the form card itself.
   ============================================================ */
.fql-form-section {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0;
  background:
    /* Two soft radial glows: warm orange top-left, cool purple bottom-right */
    radial-gradient(40% 50% at 12% 0%,  rgba(242, 103, 57, 0.10) 0%, transparent 65%),
    radial-gradient(40% 50% at 88% 100%, rgba(103, 54, 149, 0.10) 0%, transparent 65%),
    /* Tiny dot-grid texture (1px dot every 24px) */
    radial-gradient(circle at 1px 1px, rgba(17, 24, 39, 0.06) 1px, transparent 0),
    /* Base off-white -> cream */
    linear-gradient(180deg, #fbfaff 0%, #fffbf8 100%);
  background-size: auto, auto, 24px 24px, auto;
  background-position: top left, bottom right, 0 0, center;
}
@media (min-width: 768px) { .fql-form-section { padding: 5rem 0; } }
.fql-form-section .container { position: relative; z-index: 1; }

/* Form card sits on a slightly elevated white plate so the gradient/dots stay
   visible around it but don't bleed into the form fields. */
.fql-form-section .csd-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 24px 60px rgba(17, 24, 39, 0.08);
}
.fql-form-section .csd-form__header {
  text-align: center;
  border-bottom: 1px solid var(--fql-border-soft);
}
.fql-form-section .csd-form__title { font-size: 1.35rem; }
@media (min-width: 768px) { .fql-form-section .csd-form__title { font-size: 1.6rem; } }
.fql-form-section .csd-form__sub  { font-size: 0.9375rem; }

/* When the form section follows its own internal head, the .fql-section__head
   inside should pop against the gradient. */
.fql-form-section .fql-section__head { margin-bottom: 1.75rem; }