/* ==========================================================================
   security-compact.css
   --------------------------------------------------------------------------
   Tightens the security page: smaller display titles throughout, and a much
   denser FAQ block.

   Loaded LAST on security.html so it wins on cascade order alone. !important
   appears only where the rule it overrides already carries it (the hero h1 in
   the page's inline <style>, and .wf-heading) — everywhere else plain order is
   enough.

   Every main title on this page was clamp(34px, 3.9vw, 56px), repeated across
   eight stylesheets. They are all restated here in one place rather than
   edited in eight, so the scale can be tuned from a single file.
   ========================================================================== */

/* ---- main section titles ---- */
.security-page h1,
.pillars-intro h2,
#as-identity-gov-s2 .idgov-headline,
.p5-head h2,
#as-compliance-posture .s7-head h2,
#as-security-faq .s8-head-copy h2,
#s9-security-cta .s9-left-top h2,
.secx-section h2 {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.1;
}

/* The hero sets its own size with !important in the page's inline <style>,
   so matching that is the only way to bring it down. */
.security-page .hero-content h1,
.security-page h1 {
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.08 !important;
}

.wf-heading {
  font-size: clamp(24px, 2.5vw, 36px) !important;
  line-height: 1.1 !important;
}

#as-infra-bento .infra-title {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

#as-identity-gov-s2 .idgov-headline-sub {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}

/* ---- supporting copy across the page ---- */
.hero-subhead,
.security-page .hero-subhead {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem) !important;
  line-height: 1.4;
}

#as-compliance-posture .s7-head p,
.p5-head p,
.secx-section > p {
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.42;
}

.step h2 {
  font-size: 20px;
}

.wf-tl-title {
  font-size: clamp(19px, 1.35vw, 25px);
}

/* ==========================================================================
   FAQ — the long one
   Same content, tighter box: less section padding, smaller cards, tighter
   rows, smaller type. Nothing is hidden or removed.
   ========================================================================== */
#as-security-faq {
  padding: 26px 4vw 46px;
}

#as-security-faq .s8-head-row {
  gap: 1rem;
}

#as-security-faq .s8-head-copy p {
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.4;
}

#as-security-faq .s8-content-grid {
  gap: 1rem;
}

#as-security-faq .s8-faq-card,
#as-security-faq .s8-side-tile {
  padding: 0.8rem;
}

#as-security-faq .s8-faq-head {
  gap: 0.6rem;
}

#as-security-faq .s8-faq-kicker {
  font-size: 0.68rem;
}

#as-security-faq .s8-faq-sub {
  font-size: 0.88rem;
  line-height: 1.35;
}

/* The list itself: this is where most of the height was. */
#as-security-faq .s8-faq-list {
  gap: 0.42rem;
}

#as-security-faq .s8-faq-btn {
  padding: 0.58rem 0.7rem;
  gap: 0.5rem;
}

#as-security-faq .s8-faq-title-wrap {
  gap: 0.5rem;
}

#as-security-faq .s8-faq-btn h3 {
  font-size: 0.97rem;
  line-height: 1.25;
}

#as-security-faq .s8-faq-btn p {
  font-size: 0.85rem;
  line-height: 1.32;
}

#as-security-faq .s8-faq-icon {
  font-size: 0.64rem;
}

#as-security-faq .s8-plus {
  font-size: 1rem;
}

#as-security-faq .s8-acc-inner {
  padding: 0 0.7rem 0.65rem;
}

#as-security-faq .s8-acc-inner p {
  font-size: 0.88rem;
  line-height: 1.42;
  padding: 0.62rem;
}

#as-security-faq .s8-faq-foot {
  gap: 0.5rem;
}

#as-security-faq .s8-faq-foot p,
#as-security-faq .s8-trust-link {
  font-size: 0.83rem;
}

#as-security-faq .s8-side {
  gap: 0.6rem;
}

#as-security-faq .s8-side-title {
  font-size: 0.95rem;
}

#as-security-faq .s8-side-copy {
  font-size: 0.85rem;
  line-height: 1.35;
}

#as-security-faq .s8-side-media {
  padding: 0.62rem;
}

#as-security-faq .s8-btn-solid,
#as-security-faq .s8-btn-ghost {
  font-size: 0.8rem;
  padding: 0.52rem 0.8rem;
}

/* ---- small screens: hold the same proportions ---- */
@media (max-width: 700px) {
  .security-page h1,
  .security-page .hero-content h1 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  .pillars-intro h2,
  #as-identity-gov-s2 .idgov-headline,
  .p5-head h2,
  #as-compliance-posture .s7-head h2,
  #as-security-faq .s8-head-copy h2,
  #s9-security-cta .s9-left-top h2,
  .secx-section h2,
  .wf-heading {
    font-size: clamp(21px, 6.2vw, 29px) !important;
  }

  #as-security-faq {
    padding: 20px 4vw 34px;
  }
}