/* ===========================================================================
   Exposure X-Ray (/exposure-x-ray).

   Ported off the Webflow export onto the marketing design system. The page is
   one long argument, so it alternates between two rhythms: split rows (label
   left, claim right) for the pillars and the comparison, and full-width
   grids for the cases, steps and quotes. The 200px hero offset and the
   300px left column are the same values /security and /career use.
   =========================================================================== */

.xr-hero {
  padding: 200px var(--mz-gutter) 0;
}

.xr-hero-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.xr-hero-headline {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -1.44px;
  color: var(--mz-white);
  max-width: 900px;
}

.xr-hero-body {
  font-size: 20px;
  line-height: 1.4;
  color: var(--mz-text-secondary);
  max-width: 660px;
}

.xr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* ==========================================================================
   As heard on
   ========================================================================== */

.xr-press {
  padding: 64px var(--mz-gutter) 0;
}

.xr-press-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.xr-press-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mz-text-tertiary);
}

.xr-press-inner img {
  display: block;
  opacity: 0.7;
  transition: opacity var(--mz-transition);
}

.xr-press-inner a:hover img {
  opacity: 1;
}

/* ==========================================================================
   Pillars — split rows
   ========================================================================== */

.xr-pillars {
  padding: 120px var(--mz-gutter) 0;
}

.xr-pillars-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.xr-pillar {
  display: flex;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--mz-rule);
}

.xr-pillar-left {
  width: 300px;
  flex-shrink: 0;
}

.xr-pillar-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xr-pillar-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mz-lilac);
}

.xr-pillar-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--mz-white);
  max-width: 760px;
}

.xr-pillar-body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--mz-text-secondary);
  max-width: 680px;
}

/* ==========================================================================
   Qualifying cases
   ========================================================================== */

.xr-cases {
  padding: 120px var(--mz-gutter) 0;
}

.xr-cases-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
}

.xr-cases-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.xr-cases-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--mz-white);
}

.xr-cases-desc {
  font-size: 18px;
  line-height: 1.5;
  color: var(--mz-text-secondary);
  max-width: 620px;
}

.xr-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.xr-case {
  background: var(--mz-panel);
  border: 1px solid var(--mz-rule);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.xr-case-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mz-white);
}

.xr-case-beat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xr-case-beat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mz-lilac);
}

.xr-case-beat p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mz-text-secondary);
}

/* ==========================================================================
   Onboarding steps
   ========================================================================== */

.xr-steps {
  padding: 120px var(--mz-gutter) 0;
}

.xr-steps-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
}

.xr-steps-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--mz-white);
  max-width: 820px;
}

.xr-step-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.xr-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--mz-rule);
}

.xr-step-number {
  font-family: var(--mz-font-serif);
  font-size: 32px;
  line-height: 1;
  color: var(--mz-lilac);
}

.xr-step-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mz-white);
}

.xr-step-desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--mz-text-secondary);
}

.xr-steps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* Ticks are drawn in CSS rather than shipped as glyphs in the markup, so the
   list reads as three plain items to a screen reader. */
.xr-trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.xr-trust li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--mz-text-tertiary);
}

.xr-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--mz-lilac);
  border-bottom: 1.5px solid var(--mz-lilac);
  transform: rotate(-45deg);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.xr-voices {
  padding: 120px var(--mz-gutter) 0;
}

.xr-voices-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
}

.xr-voices-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--mz-white);
  margin-bottom: 48px;
}

.xr-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.xr-voice {
  margin: 0;
  background: var(--mz-panel);
  border: 1px solid var(--mz-rule);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.xr-voice blockquote {
  margin: 0;
  font-family: var(--mz-font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: var(--mz-white);
}

.xr-voice figcaption {
  font-size: 15px;
  font-weight: 600;
  color: var(--mz-white);
  margin-top: auto;
}

.xr-voice figcaption span {
  display: block;
  font-weight: 400;
  color: var(--mz-text-tertiary);
}

/* ==========================================================================
   Versus the advisor's toolkit
   ========================================================================== */

.xr-versus {
  padding: 120px var(--mz-gutter) 0;
}

.xr-versus-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

.xr-versus-left {
  width: 380px;
  flex-shrink: 0;
}

.xr-versus-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.xr-versus-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--mz-white);
}

.xr-versus-lede {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mz-text-secondary);
}

.xr-versus-block {
  padding-top: 28px;
  border-top: 1px solid var(--mz-rule);
}

.xr-versus-subtitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 16px;
}

.xr-versus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xr-versus-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mz-text-secondary);
}

.xr-versus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--mz-lilac);
}

.xr-versus-list b {
  color: var(--mz-white);
  font-weight: 600;
}

.xr-versus-note {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mz-text-tertiary);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.xr-faq {
  padding: 120px var(--mz-gutter) 0;
}

.xr-faq-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

.xr-faq-left {
  width: 300px;
  flex-shrink: 0;
}

.xr-faq-right {
  flex: 1;
}

.xr-faq-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--mz-white);
}

/* ==========================================================================
   Closing argument
   ========================================================================== */

.xr-closer {
  padding: 120px var(--mz-gutter) 120px;
}

.xr-closer-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xr-closer-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--mz-white);
}

.xr-closer-body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--mz-text-secondary);
  max-width: 620px;
}

/* ==========================================================================
   Tablet — the three-up grids go two-up before they go one-up, so the cases
   and steps do not stretch to full width on an iPad.
   ========================================================================== */

@media (max-width: 1279px) {
  .xr-case-grid,
  .xr-step-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1023px) {
  .xr-hero {
    padding: 140px var(--mz-gutter-mobile) 0;
  }

  .xr-hero-headline {
    font-size: 44px;
    letter-spacing: -0.88px;
  }

  .xr-hero-body {
    font-size: 18px;
  }

  .xr-hero-actions,
  .xr-steps-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .xr-press {
    padding: 48px var(--mz-gutter-mobile) 0;
  }

  .xr-press-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .xr-pillars,
  .xr-cases,
  .xr-steps,
  .xr-voices,
  .xr-versus,
  .xr-faq {
    padding: 80px var(--mz-gutter-mobile) 0;
  }

  .xr-closer {
    padding: 80px var(--mz-gutter-mobile);
  }

  /* Every split row stacks: a 300px label column beside body copy leaves too
     little room for either at this width. */
  .xr-pillar,
  .xr-versus-inner,
  .xr-faq-inner {
    flex-direction: column;
    gap: 20px;
  }

  .xr-pillar-left,
  .xr-versus-left,
  .xr-faq-left {
    width: 100%;
  }

  .xr-case-grid,
  .xr-step-list,
  .xr-voice-grid {
    grid-template-columns: 1fr;
  }

  .xr-cases-title,
  .xr-steps-title,
  .xr-voices-title,
  .xr-closer-title {
    font-size: 36px;
    letter-spacing: -0.72px;
  }

  .xr-pillar-title,
  .xr-versus-title,
  .xr-faq-title {
    font-size: 30px;
    letter-spacing: -0.6px;
  }

  .xr-voice blockquote {
    font-size: 20px;
  }
}