/*
 * Zlix secondary public page visuals v2
 * ----------------------------------------------------------
 * Final coordinated visual system for:
 *   About
 *   Security
 *   Contact
 *   Individual Zlix Platform module pages
 *
 * Home, Platform, Products, Privacy, and Terms retain their
 * existing established visual systems.
 */


/* ==========================================================
   SHARED SECONDARY CARDS
   ========================================================== */

.secondary-visual-card {
  position: relative;
}

.secondary-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  width: 100%;
  min-width: 0;
  min-height: 54px;

  margin: 0 0 14px;
}

.secondary-card-head h2,
.secondary-card-head h3 {
  flex: 1 1 auto;
  min-width: 0;

  margin: 4px 0 0;
  padding: 0;
}

.secondary-card-icon {
  display: block;
  box-sizing: border-box;

  flex: 0 0 54px;

  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;

  padding: 8px;
  margin: 0;

  background: #e6f2fa;
  background-color: #e6f2fa;
  background-image: none;

  border: 1px solid rgba(31, 125, 169, .44);
  border-radius: 16px;

  box-shadow:
    0 7px 18px rgba(15, 52, 79, .08),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

.secondary-visual-card > p {
  width: 100%;
  max-width: none;

  margin: 0 !important;
  padding: 0;
}


/* ==========================================================
   ABOUT
   ========================================================== */

body.page-about .page-hero,
body.page-about .section.compact,
body.page-about .cta-band {
  width: min(100% - 48px, 1040px);
  max-width: 1040px;
}

body.page-about .about-mission-section {
  scroll-margin-top: 110px;
  padding-top: 28px;
}

body.page-about .about-mission-section .section-header {
  margin-bottom: 28px;
}


/* ==========================================================
   SECURITY
   ========================================================== */

body.page-security .security-visual-hero,
body.page-security .section.compact {
  width: min(100% - 48px, var(--shell));
  max-width: var(--shell);
}

body.page-security .security-visual-hero {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(310px, 390px);

  gap: clamp(30px, 4.5vw, 58px);

  align-items: center;
}

body.page-security .security-hero-copy {
  min-width: 0;
}

body.page-security .security-hero-copy h1 {
  max-width: 700px;
}

body.page-security .security-hero-copy > p:not(.eyebrow) {
  max-width: 690px;
}

body.page-security .security-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.security-visual {
  position: relative;

  width: min(100%, 360px);
  aspect-ratio: 360 / 280;

  margin: 0 auto;
}

.security-visual-lines {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  fill: none;
  stroke: #4c9fc2;
  stroke-width: 2;
  stroke-linecap: round;

  opacity: .82;
}

.security-visual-node {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  width: 58px;
  height: 58px;

  padding: 9px;

  background: #f4f9fc;

  border: 1px solid rgba(31, 125, 169, .42);
  border-radius: 17px;

  box-shadow:
    0 8px 20px rgba(15, 52, 79, .09),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.security-node-icon {
  display: block;

  width: 100%;
  height: 100%;
}

.security-node-accountability {
  left: 2%;
  top: 10%;
}

.security-node-protection {
  right: 2%;
  top: 10%;
}

.security-node-evidence {
  left: 8%;
  bottom: 7%;
}

.security-node-resilience {
  right: 8%;
  bottom: 7%;
}

.security-visual-core {
  position: absolute;
  left: 50%;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  width: 130px;
  height: 130px;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(circle at 35% 28%,
      #ffffff 0%,
      #edf6fb 58%,
      #dcebf3 100%);

  border: 1px solid rgba(31, 125, 169, .38);
  border-radius: 50%;

  box-shadow:
    0 15px 30px rgba(15, 52, 79, .11),
    inset 0 0 0 10px rgba(255,255,255,.55);
}

.security-brand-mark {
  display: block;

  width: 76px;

  margin: 0;

  line-height: 0;

  filter: drop-shadow(0 6px 10px rgba(7, 37, 62, .18));
}

.security-brand-mark img {
  display: block;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;

  filter: none !important;
}

body.page-security .secondary-security-note .secondary-card-head {
  margin-bottom: 8px;
}

body.page-security .secondary-security-note > p {
  margin-top: 0 !important;
}


/* ==========================================================
   CONTACT
   ========================================================== */

body.page-contact .page-hero-compact,
body.page-contact .contact-layout {
  width: min(100% - 48px, 980px);
  max-width: 980px;
}

body.page-contact .secondary-contact-card {
  min-width: 0;
}

body.page-contact .contact-card-head {
  margin-bottom: 17px;
}

body.page-contact .contact-card-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

body.page-contact .contact-card-head .eyebrow {
  margin: 0 0 7px;
}

body.page-contact .contact-card-head h2 {
  margin-top: 0;
}

body.page-contact .secondary-contact-card > p:not(.contact-email) {
  margin-top: 0;
}

body.page-contact .contact-email {
  margin-top: 18px !important;
  font-size: 1.12rem;
}

body.page-contact .company-details {
  display: grid;
  gap: 0;

  margin: 4px 0 0;
  padding: 0;
}

body.page-contact .company-details > div {
  display: block;

  padding: 13px 0;

  border-top: 1px solid rgba(31, 96, 135, .15);
}

body.page-contact .company-details > div:first-child {
  border-top: 0;
  padding-top: 0;
}

body.page-contact .company-details dt {
  margin: 0 0 2px;

  color: #17364d;

  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .02em;
}

body.page-contact .company-details dd {
  min-width: 0;

  margin: 0;

  color: #263b4b;
}

body.page-contact .company-details address {
  margin: 0;

  color: inherit;

  font-style: normal;
  line-height: 1.6;
}


/* ==========================================================
   MODULE DETAIL PAGES
   ========================================================== */

body.page-zlixecm .page-hero,
body.page-zlixdmt .page-hero,
body.page-zlixcsp .page-hero,
body.page-zlixasl .page-hero,
body.page-zlixeht .page-hero,
.module-detail-summary,
.module-platform-fit,
.module-detail-cta {
  width: min(100% - 48px, 1040px);
  max-width: 1040px;
}

.module-detail-hero {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(160px, 230px);

  gap: 34px;

  align-items: center;
}

.module-detail-hero-copy {
  min-width: 0;
}

.module-detail-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-detail-icon-well {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  width: 118px;
  height: 118px;

  padding: 19px;

  background:
    radial-gradient(circle at 35% 28%,
      #ffffff 0%,
      #edf6fb 62%,
      #dfeef5 100%);

  border: 1px solid rgba(31, 125, 169, .38);
  border-radius: 30px;

  box-shadow:
    0 16px 30px rgba(15, 52, 79, .10),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.module-detail-hero-icon {
  display: block;

  width: 100%;
  height: 100%;
}

.module-detail-summary {
  align-items: stretch;
}

.module-detail-card {
  min-width: 0;
}

.module-detail-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  min-height: 54px;

  margin: 0 0 14px;
}

.module-detail-card-head h2 {
  min-width: 0;

  margin: 3px 0 0;

  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.module-detail-card-icon {
  display: block;
  box-sizing: border-box;

  flex: 0 0 54px;

  width: 54px;
  height: 54px;

  padding: 8px;

  background: #e6f2fa;

  border: 1px solid rgba(31, 125, 169, .44);
  border-radius: 16px;

  box-shadow:
    0 7px 18px rgba(15, 52, 79, .08),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.module-detail-card .feature-list {
  margin-top: 6px;
}

.module-platform-fit {
  margin-left: auto;
  margin-right: auto;

  padding: 0 !important;

  overflow: hidden;

  background:
    radial-gradient(circle at 12% 0%,
      rgba(63, 134, 193, .20),
      transparent 42%),
    linear-gradient(135deg,
      #122747 0%,
      #15385c 58%,
      #0f1c35 100%) !important;

  border: 1px solid rgba(255,255,255,.08);
}

.module-platform-fit > .section {
  width: 100%;

  padding: 38px 34px;
}

html[data-theme="arctic-navy"] .module-platform-fit h2,
html[data-theme="arctic-navy"] .module-platform-fit h3,
html[data-theme="arctic-navy"] .module-platform-fit .eyebrow {
  color: #f7fbff !important;
}

html[data-theme="arctic-navy"] .module-platform-fit p {
  color: rgba(247, 251, 255, .88) !important;
}

.module-platform-fit .section-header {
  margin-bottom: 0;
}

.module-detail-cta {
  margin-top: 42px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

  body.page-security .security-visual-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .module-detail-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .module-detail-hero-art {
    justify-content: flex-start;
  }

  .module-detail-icon-well {
    width: 100px;
    height: 100px;

    padding: 16px;

    border-radius: 26px;
  }
}


@media (max-width: 720px) {

  body.page-about .page-hero,
  body.page-about .section.compact,
  body.page-about .cta-band,
  body.page-security .security-visual-hero,
  body.page-security .section.compact,
  body.page-contact .page-hero-compact,
  body.page-contact .contact-layout,
  body.page-zlixecm .page-hero,
  body.page-zlixdmt .page-hero,
  body.page-zlixcsp .page-hero,
  body.page-zlixasl .page-hero,
  body.page-zlixeht .page-hero,
  .module-detail-summary,
  .module-platform-fit,
  .module-detail-cta {
    width: min(100% - 28px, 1040px);
  }

  .secondary-card-head,
  .module-detail-card-head {
    gap: 14px;

    min-height: 50px;

    margin-bottom: 12px;
  }

  .secondary-card-icon,
  .module-detail-card-icon {
    flex-basis: 50px;

    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;

    padding: 7px;

    border-radius: 15px;
  }

  body.page-about .about-mission-section {
    scroll-margin-top: 94px;
  }

  .security-visual {
    width: min(100%, 305px);
  }

  .security-visual-node {
    width: 50px;
    height: 50px;

    padding: 7px;

    border-radius: 15px;
  }

  .security-visual-core {
    width: 112px;
    height: 112px;

    box-shadow:
      0 12px 26px rgba(15, 52, 79, .10),
      inset 0 0 0 8px rgba(255,255,255,.55);
  }

  .security-brand-mark {
    width: 64px;
  }

  .module-detail-icon-well {
    width: 88px;
    height: 88px;

    padding: 14px;

    border-radius: 23px;
  }

  .module-platform-fit {
    border-radius: 22px;
  }

  .module-platform-fit > .section {
    padding: 28px 20px;
  }
}


@media (max-width: 420px) {

  .security-visual {
    width: min(100%, 280px);
  }

  .security-visual-node {
    width: 46px;
    height: 46px;

    padding: 6px;
  }

  .security-visual-core {
    width: 102px;
    height: 102px;
  }

  .security-brand-mark {
    width: 58px;
  }
}


/* ==========================================================
   ZLIX SECONDARY/MODULE RENDER CORRECTION V3

   Corrects issues found during desktop visual QA:
   - Security hero visual balance
   - Contact nested-width mismatch
   - module desktop two-column breakpoint
   - module card surface/header rendering
   - Platform Fit Arctic Navy background override
   - About mission heading proportion
   ========================================================== */


/* ----------------------------------------------------------
   SECURITY

   Security is a principles page, not another architecture
   diagram. Keep the hero visual restrained.
   ---------------------------------------------------------- */

body.page-security .security-visual-hero {
  width: min(100% - 48px, var(--shell)) !important;
  max-width: var(--shell) !important;

  grid-template-columns:
    minmax(0, 1fr)
    116px !important;

  gap: 34px !important;

  align-items: center !important;
}


body.page-security .security-hero-copy h1 {
  max-width: 720px !important;
}


body.page-security .security-hero-copy > p:not(.eyebrow) {
  max-width: 720px !important;
}


body.page-security .security-hero-art {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 116px !important;
  min-width: 116px !important;
}


body.page-security .security-hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  width: 92px;
  height: 92px;

  padding: 16px;

  background:
    radial-gradient(
      circle at 35% 28%,
      #ffffff 0%,
      #edf6fb 62%,
      #dfeef5 100%
    );

  border: 1px solid rgba(31, 125, 169, .40);
  border-radius: 26px;

  box-shadow:
    0 14px 28px rgba(15, 52, 79, .10),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}


body.page-security .security-hero-badge-icon {
  display: block;

  width: 100%;
  height: 100%;
}


/* ----------------------------------------------------------
   ABOUT / MISSION

   Give the integrated mission heading more usable width and
   prevent it from dominating the section.
   ---------------------------------------------------------- */

body.page-about .about-mission-section .section-header {
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(300px, .95fr) !important;

  gap: 36px !important;

  align-items: center !important;
}


body.page-about .about-mission-section .section-header h2 {
  max-width: 570px;

  font-size: clamp(2rem, 3.2vw, 2.85rem);
  line-height: 1.04;
}


/* ----------------------------------------------------------
   CONTACT

   .contact-section is already a constrained .section.
   The old .contact-layout width calculation constrained the
   content a second time, making the cards narrower than hero.
   ---------------------------------------------------------- */

body.page-contact .contact-section {
  width: min(100% - 48px, 980px) !important;
  max-width: 980px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


body.page-contact .contact-layout {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


body.page-contact .page-hero-compact {
  width: min(100% - 48px, 980px) !important;
  max-width: 980px !important;
}


/* ----------------------------------------------------------
   MODULE DETAIL CARDS

   Existing global CSS changes .two-column-section to one
   column at 1080px. Keep the new module summary two-column
   on normal desktop/tablet-landscape widths.
   ---------------------------------------------------------- */

@media (min-width: 821px) {

  .module-detail-summary {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 24px !important;

    align-items: stretch !important;
  }
}


/* Explicit card surfaces prevent inherited/translucent
   surfaces from producing the header-strip appearance. */

html[data-theme="arctic-navy"] .module-detail-card {
  background: rgba(247, 251, 255, .86) !important;

  border-color: rgba(39, 82, 119, .18) !important;

  box-shadow:
    0 12px 30px rgba(15, 45, 73, .08) !important;
}


.module-detail-card-head {
  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  border: 0 !important;
}


.module-detail-card .feature-list {
  margin-top: 4px !important;
}


/* Slightly reduce the hero module icon. The previous 118px
   treatment was visually heavier than the rest of the site. */

.module-detail-icon-well {
  width: 104px !important;
  height: 104px !important;

  padding: 17px !important;

  border-radius: 27px !important;
}


/* ----------------------------------------------------------
   MODULE PLATFORM FIT

   Arctic Navy applies a generic background to every section.
   The inner .section was therefore painting over the intended
   dark Platform Fit band while the text remained white.
   ---------------------------------------------------------- */

html[data-theme="arctic-navy"] body.page-zlixecm .module-platform-fit,
html[data-theme="arctic-navy"] body.page-zlixdmt .module-platform-fit,
html[data-theme="arctic-navy"] body.page-zlixcsp .module-platform-fit,
html[data-theme="arctic-navy"] body.page-zlixasl .module-platform-fit,
html[data-theme="arctic-navy"] body.page-zlixeht .module-platform-fit {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(70, 145, 205, .20),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #122747 0%,
      #15385c 58%,
      #0f1c35 100%
    ) !important;

  border-color: rgba(255, 255, 255, .09) !important;
}


html[data-theme="arctic-navy"] body.page-zlixecm .module-platform-fit > .section,
html[data-theme="arctic-navy"] body.page-zlixdmt .module-platform-fit > .section,
html[data-theme="arctic-navy"] body.page-zlixcsp .module-platform-fit > .section,
html[data-theme="arctic-navy"] body.page-zlixasl .module-platform-fit > .section,
html[data-theme="arctic-navy"] body.page-zlixeht .module-platform-fit > .section {
  background: transparent !important;
  background-image: none !important;
}


html[data-theme="arctic-navy"] .module-platform-fit h2,
html[data-theme="arctic-navy"] .module-platform-fit h3,
html[data-theme="arctic-navy"] .module-platform-fit .eyebrow {
  color: #f7fbff !important;
}


html[data-theme="arctic-navy"] .module-platform-fit p {
  color: rgba(247, 251, 255, .88) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 820px) {

  /*
   * Security V4 mobile hero.
   *
   * Keep the hero copy full-width while moving the restrained
   * shield treatment into an intentional upper-right position.
   * The eyebrow row reserves vertical room so the large heading
   * cannot collide with the badge.
   */
  body.page-security .security-visual-hero {
    display: block !important;
    position: relative !important;
  }


  body.page-security .security-hero-copy {
    position: relative !important;
    min-width: 0 !important;
  }


  body.page-security .security-hero-copy > .eyebrow {
    min-height: 64px;
    padding-right: 82px;
    box-sizing: border-box;
  }


  body.page-security .security-hero-art {
    position: absolute !important;

    top: 26px;
    right: 20px;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;

    width: 64px !important;
    min-width: 64px !important;

    margin: 0 !important;
  }


  body.page-security .security-hero-badge {
    width: 64px;
    height: 64px;

    padding: 10px;

    border-radius: 19px;
  }


  /*
   * Avoid the large double-section gap that previously appeared
   * between the final principles card and Security inquiries.
   */
  body.page-security
  #pageContent
  > .section.compact:not(.security-note) {
    padding-bottom: 20px !important;
  }


  body.page-security
  #pageContent
  > .section.compact.security-note {
    padding-top: 20px !important;
  }


  .module-detail-summary {
    grid-template-columns: 1fr !important;
  }


  body.page-about .about-mission-section .section-header {
    display: block !important;
  }


  body.page-about .about-mission-section .section-header > p {
    margin-top: 14px !important;
  }
}


@media (max-width: 720px) {

  body.page-contact .contact-section,
  body.page-contact .page-hero-compact {
    width: min(100% - 28px, 980px) !important;
  }


  body.page-contact .contact-layout {
    width: 100% !important;
  }


  .module-detail-icon-well {
    width: 84px !important;
    height: 84px !important;

    padding: 13px !important;

    border-radius: 22px !important;
  }
}

/* ==========================================================
   ZLIX SECURITY PAGE FINISHING V4

   Final Security-page alignment and mobile composition pass.

   - normalizes desktop width to the shared public shell
   - moves the mobile hero shield to the upper-right
   - protects headline flow from icon collision
   - reduces excessive inter-section mobile whitespace

   No page markup or application behavior changed.
   ========================================================== */

@media (max-width: 420px) {

  body.page-security .security-hero-copy > .eyebrow {
    min-height: 60px;
    padding-right: 76px;
  }


  body.page-security .security-hero-art {
    top: 24px;
    right: 18px;

    width: 60px !important;
    min-width: 60px !important;
  }


  body.page-security .security-hero-badge {
    width: 60px;
    height: 60px;

    padding: 9px;

    border-radius: 18px;
  }

}

/* ==========================================================
   ZLIX SECURITY GHOST PANEL CLEANUP V4A

   Security principle cards and the Security inquiries card
   already provide their own rounded surfaces.

   Keep the containing .section.compact wrappers structural only
   so inherited section backgrounds cannot create square-cornered
   panels behind those cards.

   Security page only.
   ========================================================== */

body.page-security
#pageContent
> .section.compact {

    background:
        transparent
        !important;

    background-color:
        transparent
        !important;

    background-image:
        none
        !important;

    border:
        0
        !important;

    box-shadow:
        none
        !important;
}


/*
 * Also neutralize decorative wrapper pseudo-elements in case
 * another shared/theme layer supplies them.
 */
body.page-security
#pageContent
> .section.compact::before,

body.page-security
#pageContent
> .section.compact::after {

    content:
        none
        !important;

    display:
        none
        !important;

    background:
        none
        !important;

    box-shadow:
        none
        !important;
}