/* ==========================================================================
   Atlas Agent Social Campaign — Landing Page
   Last updated: 2026-05-21

   TABLE OF CONTENTS
   1. Custom Properties
   2. Base / Reset
   3. Typography
   4. Layout Components
      4a. Navigation
      4b. Hero
      4c. Quote Form
      4d. Trust Bar
      4e. Agent Video Grid
      4f. "Not Every Option" Section
      4g. Comparison Table
      4h. Atlas Network Section
      4i. Final CTA
      4j. Footer
   5. Scroll Animations
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Brand */
  --atlas-blue:       #005a9c;
  --atlas-blue-dark:  #00599a;
  --atlas-blue-deep:  #003c66;
  --atlas-red:        #cd1141;
  --atlas-pink:       #d81e5b;

  /* Neutrals */
  --gray-text:    #5f5f5f;
  --gray-mid:     #878787;
  --gray-light:   #d9d9d9;
  --gray-border:  #b2b2b2;
  --gray-bg:      #f5f7fa;

  /* Animation */
  --anim-duration: 0.6s;
  --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--gray-text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: 'Outfit', sans-serif;
}


/* ==========================================================================
   4. LAYOUT COMPONENTS
   ========================================================================== */


/* ---------- 4a. Navigation ---------- */

.glass-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.06);
}


/* ---------- 4b. Hero ---------- */

.hero-bg {
  position: relative;
  background-image: url('../img/landingv3/background-hero-3-optimized.png');
  background-size: cover;
  background-position: center;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 60, 102, 0.41) 0%,
    rgba(0, 90, 156, 0.29) 60%,
    rgba(0, 90, 156, 0.19) 100%
  );
  pointer-events: none;
}

/* Decorative atmosphere accent — pink glow top-right */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 30, 91, 0.09), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(0, 170, 230, 0.05), transparent 50%);
  pointer-events: none;
}

.hero-bg > * { position: relative; z-index: 1; }

/* ===== Hero copy ===== */
.hero-copy {
  color: #fff;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 18px;
}
.hero-eyebrow-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--atlas-pink);
  box-shadow: 0 0 0 4px rgba(216, 30, 91, 0.18);
}

.hero-headline {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 22px;
  font-size: 32px;
}
@media (min-width: 768px) { .hero-headline { font-size: 44px; } }
@media (min-width: 1024px) { .hero-headline { font-size: 58px; } }

/* Light weight for the intro phrase */
.hero-headline-light {
  display: block;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 6px;
}

/* Extra-bold weight for the key phrase with red dash beneath */
.hero-headline-bold {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  position: relative;
  padding-bottom: 14px;
}
.hero-headline-bold::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--atlas-red);
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(205, 17, 65, 0.5);
}
@media (max-width: 1023px) {
  .hero-headline-bold {
    display: inline-block;
  }
  .hero-headline-bold::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

.hero-subhead {
  font-family: 'Open Sans', sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 768px) { .hero-subhead { font-size: 18px; } }
@media (min-width: 1024px) { .hero-subhead { margin-left: 0; } }

/* Glassmorphism outline scroll-to-videos button */
.hero-scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow:
    0 8px 20px -8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.hero-scroll-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
	text-decoration: none;
	color: #fff;
}
.hero-scroll-btn:visited {
  color: #fff;
}
.hero-scroll-btn svg {
  width: 15px;
  height: 15px;
  animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
@media (min-width: 768px) {
  .hero-scroll-btn { padding: 13px 26px; font-size: 15px; }
  .hero-scroll-btn svg { width: 16px; height: 16px; }
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}


/* ---------- 4c. Quote Form ---------- */

.quote-card {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow:
    0 30px 60px -18px rgba(0, 30, 60, 0.45),
    0 12px 24px -12px rgba(0, 30, 60, 0.28);
}

.quote-header {
  border-bottom: 1px solid #eef0f4;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.quote-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atlas-blue);
  margin: 0 0 8px;
}
.quote-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--atlas-pink);
  box-shadow: 0 0 0 3px rgba(216, 30, 91, 0.16);
}

.quote-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--atlas-blue);
  margin: 0 0 6px;
}
@media (min-width: 768px) { .quote-title { font-size: 28px; } }

.quote-intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-text);
  margin: 0;
}
@media (min-width: 768px) { .quote-intro { font-size: 15px; } }

/* Form fields (selects & inputs) */
.form-field {
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-text);
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field::placeholder {
  color: var(--gray-mid);
  font-weight: 500;
}

.form-field:focus {
  outline: none;
  border-color: var(--atlas-blue);
  box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.14);
}

/* Quote form labels */
.quote-card form label {
  letter-spacing: 0.005em;
}

/* Trust signal strip under the CTA */
.quote-trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
}
.quote-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--atlas-blue);
}
.quote-trust-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.quote-disclaimer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.4;
  font-family: 'Open Sans', sans-serif;
  color: var(--gray-mid);
}

/* Custom select arrow */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--gray-mid);
  pointer-events: none;
}

/* CTA button */
.btn-cta {
  background-color: var(--atlas-pink);
  border-radius: 8px;
  color: #fff;
  box-shadow:
    0 20px 25px -5px rgba(216, 30, 91, 0.25),
    0 8px 10px -6px rgba(216, 30, 91, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn-cta:visited {
	color: #fff;
}

.btn-cta:hover {
  transform: scale(1.03);
  background-color: #c4174f;
  box-shadow:
    0 24px 30px -5px rgba(216, 30, 91, 0.35),
    0 10px 12px -6px rgba(216, 30, 91, 0.3);
		text-decoration: none;
}

.btn-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}


/* ---------- 4d. Trust Bar (text chips) ---------- */

.trust-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
}

.trust-bar ul {
	margin: 0;
	padding: 0;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--atlas-blue);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.trust-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--atlas-blue) 0%, var(--atlas-blue-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 90, 156, 0.25);
}

.trust-chip-icon svg,
.trust-chip-icon img {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  /* Stack chips in a single left-aligned column so icons align at the same x.
     The whole column is centered horizontally via auto margins. */
  .trust-bar ul {
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    row-gap: 14px;
  }
  .trust-chip { font-size: 13px; }
  .trust-chip-icon { width: 28px; height: 28px; min-width: 28px; }
  .trust-chip-icon svg,
  .trust-chip-icon img { width: 14px; height: 14px; }
}


/* ---------- 4e. Video Carousel ---------- */

.section-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atlas-pink);
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  color: var(--atlas-blue);
  letter-spacing: -0.015em;
}

.section-intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-text);
  max-width: 720px;
  margin: 0 auto;
}
.section-intro p {
  margin-bottom: 0.75rem !important;
}
.section-intro ul {
  margin-left: 0;
  margin-bottom: 0.75rem;
}

/* ===== Section header (copy + nav arrows aligned) ===== */
.vid-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}
.vid-head-copy { text-align: center; }
.vid-head-copy .section-intro { margin-left: auto; margin-right: auto; }

.vid-nav {
  display: none;
  gap: 8px;
  justify-content: center;
}
.vid-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 99px !important;
  background: #fff;
  border: 1px solid #d6dbe3;
  color: var(--atlas-blue);
  cursor: pointer;
	padding: 0;
  box-shadow: 0 8px 18px -10px rgba(15, 30, 50, 0.18);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.2s ease;
}
.vid-nav-btn:hover {
  background: var(--atlas-blue);
  color: #fff;
  border-color: var(--atlas-blue);
  transform: scale(1.05);
}
.vid-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.vid-nav-btn svg { width: 18px; height: 18px; }

@media (min-width: 1024px) {
  .vid-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
  }
  .vid-head-copy {
    text-align: left;
    max-width: 760px;
  }
  .vid-head-copy .section-intro { margin-left: 0; margin-right: 0; }
  .vid-nav { display: inline-flex; flex-shrink: 0; padding-bottom: 6px; }
}

/* ===== Carousel: horizontal scroll, snap, hidden scrollbar ===== */
.vid-carousel {
  position: relative;
  /* Bleed the track out to the section edges so the peek isn't clipped by container padding */
}
@media (min-width: 992px)  {
	.vid-carousel.vid-count-2 {
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}
.vid-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 24px;
  margin: 0 -6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vid-track::-webkit-scrollbar { display: none; }

/* Card */
.vid-card {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow:
    0 14px 32px -18px rgba(15, 30, 50, 0.22),
    0 4px 10px -6px rgba(15, 30, 50, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vid-card:hover,
.vid-card:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 24px 44px -18px rgba(15, 30, 50, 0.30),
    0 8px 16px -8px rgba(15, 30, 50, 0.14);
	text-decoration: none;
}

.vid-count-2 .vid-track .vid-card {
	width: 49%;
}

/* Card sizing for breakpoints: target ~4 + clear peek of 5th on desktop */
@media (min-width: 640px)  { .vid-card { width: 244px; } }
@media (min-width: 1024px) { .vid-card { width: 252px; } }
@media (min-width: 1280px) { .vid-card { width: 280px; } }

/* Media (thumbnail) — perfect square */
.vid-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eef1f5;
}
.vid-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--anim-easing, ease-out);
}
.vid-card:hover .vid-card-media img,
.vid-card:focus-visible .vid-card-media img {
  transform: scale(1.05);
}

/* On-brand radial gradient — pink at bottom-right → blue → fades to 10% */
.vid-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 100%,
    rgba(216, 30, 91, 0.85)   0%,
    rgba(140, 50, 110, 0.65) 22%,
    rgba(40, 80, 145, 0.45)  45%,
    rgba(0, 90, 156, 0.25)   72%,
    rgba(0, 60, 102, 0.10)  100%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.vid-card:hover .vid-card-media::after {
  opacity: 0.78;
}

/* Floating play button on the thumbnail — glassmorphism over pink */
.vid-card-play {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  /* Multi-layer background:
       padding-box layers fill INSIDE the border (the button face),
       border-box layer fills the BORDER ring with a white→pink gradient stroke */
  background:
    /* 1. Diagonal white glare layer */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0) 70%) padding-box,
    /* 2. Pink fill */
    linear-gradient(var(--atlas-pink), var(--atlas-pink)) padding-box,
    /* 3. The stroke: white at top → atlas-pink at bottom */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.20) 45%,
      var(--atlas-pink) 100%) border-box;
  border: 1px solid transparent;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 10px 22px rgba(216, 30, 91, 0.42),
    /* top inner highlight = brightest glare line */
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    /* bottom inner darken = settle into the surface */
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.vid-card-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.vid-card:hover .vid-card-play,
.vid-card:focus-visible .vid-card-play {
  transform: scale(1.10);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0) 75%) padding-box,
    linear-gradient(#c4174f, #c4174f) padding-box,
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.25) 45%,
      #c4174f 100%) border-box;
  box-shadow:
    0 14px 28px rgba(216, 30, 91, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

/* Body / copy */
.vid-card-body {
  padding: 18px 18px 20px;
}
.vid-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--atlas-blue);
  margin: 0 0 8px;
}
.vid-card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-text);
  margin: 0;
}

@media (min-width: 1024px) {
  .vid-card-body { padding: 20px 20px 22px; }
  .vid-card-title { font-size: 18px; }
  .vid-card-desc  { font-size: 14px; }
}


/* ---------- 4f. "Not Every Option" Section ---------- */

.section-light-bg {
  background: var(--gray-bg);
}

/* Hero-style band with low-opacity moving-crew imagery */
.not-every-bg {
  position: relative;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}
.not-every-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/landingv3/background-abstract-light-optimized.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
}
/* Soft fade-to-white at top + bottom so the image blends into adjacent sections */
.not-every-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 40%,
    rgba(255, 255, 255, 0.18) 60%,
    rgba(255, 255, 255, 0.55) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.problem-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e1e6ee;
  padding: 20px 22px 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 22px 44px -22px rgba(15, 30, 50, 0.18),
    0 8px 16px -10px rgba(15, 30, 50, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.problem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(205, 17, 65, 0.07), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(0, 90, 156, 0.05), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.problem-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 28px 52px -22px rgba(15, 30, 50, 0.24),
    0 12px 20px -10px rgba(15, 30, 50, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

@media (min-width: 768px) {
  .problem-card { padding: 24px 28px 22px; }
}

/* Top-right alert icon */
.problem-card-icon {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px;
	position: absolute;
	width: 48px;
	height: 48px;
	right: 21px;
	top: 21.98px;
	background: #CD1141;
	box-shadow: 0px 20px 25px -5px rgba(216, 30, 91, 0.25), 0px 8px 10px -6px rgba(216, 30, 91, 0.25);
	border-radius: 99px;
	flex: none;
	order: 3;
	flex-grow: 0;
	z-index: 3;
}
.problem-card-icon svg,
.problem-card-icon img { width: 24px; height: 24px; }

@media (min-width: 768px) {
  .problem-card-icon { top: 22px; right: 26px; }
}

.problem-card-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atlas-blue);
  margin: 0 0 12px;
}

/* List items — back to simple red-dash markers */
.problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.problem-list li {
  position: relative;
  padding: 5px 0 5px 24px;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray-text);
}
.problem-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 3px;
  background: var(--atlas-red);
  border-radius: 99px;
}


/* ---------- 4g. Comparison Grid (Atlas pillar layout) ---------- */

.compare-shell {
  position: relative;
  isolation: isolate;
}

.compare-pillar { display: none; }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}

/* ===== MOBILE-ONLY hero anchor card ===== */
.compare-mobile-hero {
  position: relative;
  background: linear-gradient(160deg, var(--atlas-blue) 0%, var(--atlas-blue-deep) 100%);
  border-radius: 22px;
  padding: 28px 22px 26px;
  color: #fff;
  margin-bottom: 36px;
  overflow: hidden;
  box-shadow: 0 24px 50px -22px rgba(0, 60, 102, 0.5);
}
.compare-mobile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 30, 91, 0.22), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(0, 170, 230, 0.14), transparent 55%);
  pointer-events: none;
}
.compare-mobile-hero > * { position: relative; z-index: 1; }

.compare-mobile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--atlas-pink);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 99px;
  box-shadow: 0 8px 16px rgba(216, 30, 91, 0.4);
  margin-bottom: 18px;
}
.compare-mobile-badge svg { width: 11px; height: 11px; }

.compare-mobile-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px;
}
.compare-mobile-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 14px;
}
.compare-mobile-tagline {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 22px;
}

.compare-mobile-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 22px;
}
.compare-mobile-stat strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}
.compare-mobile-stat span {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
}
.compare-mobile-stat span em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
}

.compare-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--atlas-pink);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 14px 24px -10px rgba(216, 30, 91, 0.45);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.compare-mobile-cta:hover { background: #c4174f; transform: translateY(-1px); }
.compare-mobile-cta svg { width: 16px; height: 16px; stroke-width: 2.5; }

.compare-mobile-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: #1a2330;
  margin: 0 0 6px;
  padding: 0 4px;
}
.compare-mobile-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-mid);
  margin: 0 0 20px;
  padding: 0 4px;
}

/* ===== Mobile row cards ===== */
.compare-head { display: none; }

.compare-row {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px -12px rgba(15, 30, 50, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.compare-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(15, 30, 50, 0.28);
}

.compare-feature {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: #1a2330;
  line-height: 1.3;
  letter-spacing: -0.005em;
  padding: 18px 20px 14px;
}

.compare-cell--atlas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--atlas-blue) 0%, var(--atlas-blue-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.compare-cell--atlas::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(216, 30, 91, 0.18), transparent 60%);
  pointer-events: none;
}
.compare-cell--atlas > * { position: relative; z-index: 1; }
.compare-cell--atlas .compare-cell-label {
  order: 2;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  flex-shrink: 0;
}
.compare-cell--atlas .compare-verdict {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.compare-cell--atlas .compare-verdict-icon--yes {
  width: 36px;
  height: 36px;
  background: #fff;
  color: var(--atlas-blue);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.compare-cell--atlas .compare-verdict-icon--yes svg { width: 16px; height: 16px; stroke-width: 3; }
.compare-cell--atlas .compare-verdict-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.005em;
  text-align: center;
}

.compare-cell--brokers,
.compare-cell--diy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #fff;
  border-top: 1px solid #eef0f4;
}
.compare-cell--brokers .compare-cell-label,
.compare-cell--diy .compare-cell-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-mid);
  flex: 1;
  min-width: 0;
}
.compare-cell--brokers .compare-verdict,
.compare-cell--diy .compare-verdict {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.compare-cell--brokers .compare-verdict-icon,
.compare-cell--diy .compare-verdict-icon {
  width: 36px;
  height: 36px;
  background: #eef0f4;
  color: #98a0ad;
}
.compare-cell--brokers .compare-verdict-icon svg,
.compare-cell--diy .compare-verdict-icon svg { width: 16px; height: 16px; stroke-width: 3; }
.compare-cell--brokers .compare-verdict-text,
.compare-cell--diy .compare-verdict-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.005em;
}
.compare-cell--brokers .compare-verdict-text { color: var(--atlas-red); }
.compare-cell--diy .compare-verdict-text--no { color: var(--atlas-red); }
.compare-cell--diy .compare-verdict-text--neutral { color: var(--gray-mid); font-style: italic; font-weight: 500; }

.compare-foot { display: none; }

.compare-cta-strip {
  margin-top: 36px;
  background: linear-gradient(135deg, var(--atlas-blue) 0%, var(--atlas-blue-deep) 100%);
  border-radius: 20px;
  padding: 28px 24px 26px;
  color: #fff;
  text-align: center;
  box-shadow: 0 22px 44px -18px rgba(0, 60, 102, 0.45);
  position: relative;
  overflow: hidden;
}
.compare-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(216, 30, 91, 0.20), transparent 55%);
  pointer-events: none;
}
.compare-cta-strip > * { position: relative; z-index: 1; }
.compare-cta-strip h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.compare-cta-strip p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
}
.compare-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: var(--atlas-pink);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 14px 24px -10px rgba(216, 30, 91, 0.5);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.compare-cta-btn:visited { color: #fff; }
.compare-cta-btn:hover { background: #c4174f; transform: translateY(-1px); text-decoration: none; }
.compare-cta-btn svg { width: 16px; height: 16px; stroke-width: 2.5; }

.compare-disclaimer {
  margin-top: 28px;
  color: var(--text-gray);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .compare-disclaimer {
    margin-top: 48px;
  }
}

/* Verdict icon base */
.compare-verdict-icon {
  flex-shrink: 0;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare-verdict-icon--yes {
  background: var(--atlas-blue);
  color: #fff;
}
.compare-verdict-icon--no {
  background: #eef0f4;
  color: #98a0ad;
}
.compare-verdict-text--yes { color: var(--atlas-blue); }
.compare-verdict-text--no  { color: var(--atlas-red); }
.compare-verdict-text--neutral { color: var(--gray-mid); font-style: italic; font-weight: 500; }

/* ===== Desktop (>=1024px): unified grid with Atlas pillar ===== */
@media (min-width: 1024px) {
  .compare-mobile-hero,
  .compare-mobile-heading,
  .compare-mobile-sub,
  .compare-cta-strip { display: none; }

  .compare-pillar {
    display: block;
    position: absolute;
    top: -18px;
    bottom: -14px;
    left: 31.4%;
    width: 24.4%;
    background: linear-gradient(160deg, var(--atlas-blue) 0%, var(--atlas-blue-deep) 100%);
    border-radius: 22px;
    box-shadow:
      0 30px 60px -22px rgba(0, 60, 102, 0.55),
      0 12px 24px -12px rgba(0, 60, 102, 0.35);
    z-index: 0;
  }
  .compare-pillar::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 100% 0%, rgba(216, 30, 91, 0.18), transparent 50%),
      radial-gradient(circle at 0% 100%, rgba(0, 170, 230, 0.12), transparent 55%);
    border-radius: inherit;
    pointer-events: none;
  }
  .compare-pillar-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--atlas-pink);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 99px;
    box-shadow: 0 8px 16px rgba(216, 30, 91, 0.4);
    white-space: nowrap;
    z-index: 4;
  }
  .compare-pillar-badge svg { width: 12px; height: 12px; }

  .compare-grid {
    grid-template-columns: 1.35fr 1.05fr 0.95fr 0.95fr;
    gap: 0;
    position: relative;
    z-index: 1;
  }

  .compare-head { display: contents; }
  .compare-head-cell {
    padding: 28px 22px 22px;
    font-family: 'Outfit', sans-serif;
  }
  .compare-head-cell--label {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-mid);
    display: flex;
    align-items: flex-end;
  }
  .compare-head-cell--option { text-align: center; }
  .compare-head-cell--option .h-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-mid);
    margin: 0 0 4px;
  }
  .compare-head-cell--option .h-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #2a3340;
    margin: 0;
  }
  .compare-head-cell--atlas { text-align: center; padding-top: 36px; }
  .compare-head-cell--atlas .h-eyebrow { color: rgba(255, 255, 255, 0.72); }
  .compare-head-cell--atlas .h-title { color: #fff; }

  .compare-row {
    display: contents;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }
  .compare-row:hover { transform: none; box-shadow: none; }

  .compare-feature {
    background: transparent;
    padding: 16px 22px;
    border: none;
    border-bottom: 1px solid #e6eaf0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    color: #1a2330;
    line-height: 1.4;
    letter-spacing: 0;
    display: flex;
    align-items: center;
  }

  .compare-cell--atlas,
  .compare-cell--brokers,
  .compare-cell--diy {
    padding: 16px 14px;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid #e6eaf0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .compare-cell--atlas::after { display: none; }
  .compare-cell-label { display: none; }

  .compare-cell--atlas {
    border-bottom-color: rgba(255, 255, 255, 0.18);
    color: #fff;
  }
  .compare-cell--atlas .compare-verdict-text--yes { color: #fff; }

  .compare-verdict {
    flex-direction: column;
    gap: 4px;
  }
  .compare-verdict-text {
    font-size: 12.5px;
    letter-spacing: 0.005em;
  }

  .compare-cell--atlas .compare-verdict-icon {
    width: 30px;
    height: 30px;
    background: #fff;
    color: var(--atlas-blue);
    box-shadow: none;
  }
  .compare-cell--atlas .compare-verdict-icon svg { width: 14px; height: 14px; }

  /* Last data row no border */
  .compare-grid > :nth-last-child(-n+5) { border-bottom: none; }

  .compare-foot { display: contents; }
  .compare-foot-cell {
    padding: 18px 22px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-style: italic;
    color: var(--gray-mid);
    text-align: center;
  }
  .compare-foot-cell--label {
    text-align: left;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-mid);
    display: flex;
    align-items: center;
  }
  .compare-foot-cell--atlas {
    padding: 22px 14px 28px;
    color: rgba(255,255,255,0.95);
    font-style: normal;
  }
  .compare-foot-cell--atlas .compare-cta-btn {
    display: inline-flex;
    padding: 11px 18px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .compare-mobile-stat strong { font-size: 42px; }
  .compare-feature { font-size: 14.5px; padding: 16px 16px 12px; }
  .compare-cell--atlas { padding: 14px 16px; }
  .compare-cell--atlas .compare-verdict-text { font-size: 16px; }
  .compare-cell--brokers, .compare-cell--diy { padding: 11px 16px; }
}


/* ---------- 4h. Atlas Network Section ---------- */

.network-bg {
  position: relative;
  background-color: var(--atlas-blue-deep);
  background-image: url('../img/landingv3/background-truck-highway-optimized.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Tonal overlay so text stays legible — strong enough to recede the photo */
.network-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 60, 102, 0.72) 0%,
    rgba(0, 30, 60, 0.62) 60%,
    rgba(0, 60, 102, 0.58) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.network-bg > * { position: relative; z-index: 1; }

/* Closing statement block (left column) — shield + copy paired horizontally */
.network-closing {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  max-width: 540px;
}

.network-closing-shield {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.network-seal-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(216, 30, 91, 0.34) 0%, rgba(216, 30, 91, 0.12) 40%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.network-seal-img {
  position: relative;
  z-index: 1;
  width: 84px;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

.network-closing-copy {
  flex: 1;
  min-width: 0;
}
.network-closing-light {
  margin: 0 0 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
}
.network-closing-bold {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #fff;
}

@media (min-width: 768px) {
  .network-closing { gap: 22px; margin-top: 36px; padding-top: 28px; }
  .network-seal-img { width: 96px; }
  .network-seal-glow { width: 190px; height: 190px; }
  .network-closing-light, .network-closing-bold { font-size: 17px; }
}
@media (min-width: 1024px) {
  .network-closing { gap: 24px; }
  .network-seal-img { width: 100px; }
  .network-seal-glow { width: 210px; height: 210px; }
}

.network-list {
	margin: 0;
	padding: 0;
}

.network-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
}

.network-list li:last-child {
  border-bottom: none;
}

.network-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.network-list-icon svg,
.network-list-icon img {
  width: 16px;
  height: 16px;
}


/* ---------- 4i. Final CTA ---------- */

.final-cta {
  position: relative;
  background-image: url('../img/landingv3/background-blue-abstract-optimized.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 60, 102, 0.70) 0%,
    rgba(0, 90, 156, 0.40) 50%,
    rgba(205, 17, 65, 0.40) 100%
  );
  pointer-events: none;
}

.final-cta > * { position: relative; z-index: 1; }

/* Eyebrow */
.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}
.final-cta-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

/* Headline: light + extra-bold mix with red dash */
.final-cta-headline {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: #fff;
  margin: 0 0 22px;
  font-size: 34px;
}
@media (min-width: 768px) { .final-cta-headline { font-size: 50px; } }
@media (min-width: 1024px) { .final-cta-headline { font-size: 60px; } }

.final-cta-headline-light {
  display: block;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 6px;
}

.final-cta-headline-bold {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  position: relative;
  padding-bottom: 14px;
}
.final-cta-headline-bold::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--atlas-red);
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(205, 17, 65, 0.55);
}


/* ---------- 4j. Footer ---------- */

footer a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   5. SCROLL ANIMATIONS

   Usage:  Add  data-animate="fade-up"  (or fade-in, fade-left, fade-right)
           to any element. JavaScript (at the bottom of index.html) uses
           IntersectionObserver to add the .is-visible class on scroll.

   Stagger: Add  data-delay="1"  through  data-delay="6"  to child elements
            to offset their entrance by 100ms increments.
   ========================================================================== */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--anim-duration) var(--anim-easing),
    transform var(--anim-duration) var(--anim-easing);
}

[data-animate="fade-up"]    { transform: translateY(30px); }
[data-animate="fade-in"]    { transform: none; }
[data-animate="fade-left"]  { transform: translateX(30px); }
[data-animate="fade-right"] { transform: translateX(-30px); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.4s; }
[data-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .video-tile, .play-btn, .btn-cta { transition: none !important; }
}


/* ==========================================================================
   6. BOOTSTRAP MIGRATION HELPERS

   Plain CSS (no Tailwind) added when this page moved from the Tailwind Play
   CDN to Bootstrap 4.5.2. Bootstrap 4 has no native equivalent for several
   things the original markup relied on — flex `gap`, arbitrary px sizes, a
   1440px responsive container, 500/600 font weights, fractional-opacity
   whites, and the brand colors — so these helpers fill those gaps, reusing
   the :root variables defined in section 1. Utility-style helpers use
   !important to beat Bootstrap's Reboot + utilities, mirroring how the
   original Tailwind utilities behaved.
   ========================================================================== */

/* ---------- Container (replaces max-w-[1440px] mx-auto px-6 md:px-12 lg:px-20) ---------- */
.atlas-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .atlas-container { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 992px) {
  .atlas-container { padding-left: 80px; padding-right: 80px; }
}

/* ---------- Section vertical rhythm (replaces the various py-* on wrappers) ---------- */
.section-pad         { padding-top: 64px;  padding-bottom: 64px; }
.section-pad--hero   { padding-top: 40px;  padding-bottom: 40px; }
.section-pad--trust  { padding-top: 20px;  padding-bottom: 20px; }
.section-pad--cta    { padding-top: 80px;  padding-bottom: 80px; }
.section-pad--footer { padding-top: 24px;  padding-bottom: 24px; }
.py-nav              { padding-top: 10px;  padding-bottom: 10px; }
@media (min-width: 768px) {
  .section-pad         { padding-top: 80px;  padding-bottom: 80px; }
  .section-pad--hero   { padding-top: 56px;  padding-bottom: 56px; }
  .section-pad--trust  { padding-top: 24px;  padding-bottom: 24px; }
  .section-pad--cta    { padding-top: 96px;  padding-bottom: 96px; }
  .section-pad--footer { padding-top: 32px;  padding-bottom: 32px; }
}
@media (min-width: 992px) {
  .section-pad         { padding-top: 96px;  padding-bottom: 96px; }
  .section-pad--hero   { padding-top: 64px;  padding-bottom: 64px; }
  .section-pad--cta    { padding-top: 112px; padding-bottom: 112px; }
}

/* ---------- Brand + fractional-white color helpers ---------- */
.text-atlas-blue { color: var(--atlas-blue) !important; }
.text-gray-text  { color: var(--gray-text) !important; }
.text-white-70   { color: rgba(255, 255, 255, 0.70) !important; }
.text-white-85   { color: rgba(255, 255, 255, 0.85) !important; }
.border-gray-border { border-color: var(--gray-border) !important; }

/* ---------- Font weight / family (BS4 lacks 500/600; font-body otherwise dead) ---------- */
.font-weight-semibold { font-weight: 600 !important; }
.font-weight-medium   { font-weight: 500 !important; }
.font-body            { font-family: 'Open Sans', sans-serif !important; }

/* ---------- Flex gap (BS4 has no gap utilities) ---------- */
.gap-2  { gap: 0.5rem !important; }
.gap-3  { gap: 0.75rem !important; }
.gap-4  { gap: 1rem !important; }
.gap-6  { gap: 1.5rem !important; }
.gap-10 { gap: 2.5rem !important; }
.gap-x-6 { column-gap: 1.5rem !important; }
.gap-y-3 { row-gap: 0.75rem !important; }
@media (min-width: 576px) {
  .gap-sm-6 { gap: 1.5rem !important; }
}
@media (min-width: 768px) {
  .gap-md-8    { gap: 2rem !important; }
  .gap-x-md-10 { column-gap: 2.5rem !important; }
}
@media (min-width: 992px) {
  .gap-lg-12   { gap: 3rem !important; }
  .gap-x-lg-14 { column-gap: 3.5rem !important; }
}

/* ---------- Exact spacing where the BS scale collides with Tailwind's ---------- */
.mb-tw-3  { margin-bottom: 12px !important; }
.mb-tw-5  { margin-bottom: 20px !important; }
.mb-tw-10 { margin-bottom: 40px !important; }
.pl-10    { padding-left: 40px !important; }
.px-8     { padding-left: 32px !important; padding-right: 32px !important; }
.px-10    { padding-left: 40px !important; padding-right: 40px !important; }
.py-3-5   { padding-top: 14px !important; padding-bottom: 14px !important; }
@media (min-width: 992px) {
  .pl-lg-8 { padding-left: 32px !important; }
}

/* ---------- Icon sizes / max-widths / line-height / z-index ---------- */
.icon-16 { width: 16px !important; height: 16px !important; }
.icon-20 { width: 20px !important; height: 20px !important; }
.icon-24 { width: 24px !important; height: 24px !important; }
.mw-500 { max-width: 500px !important; }
.mw-580 { max-width: 580px !important; }
.mw-820 { max-width: 820px !important; }
.lh-1-7 { line-height: 1.7 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }

/* ---------- Arbitrary font sizes ---------- */
.text-14 { font-size: 14px !important; }
.text-15 { font-size: 15px !important; }
.text-16 { font-size: 16px !important; }
.text-17 { font-size: 17px !important; }
.text-18 { font-size: 18px !important; }
@media (min-width: 768px) {
  .text-md-15 { font-size: 15px !important; }
  .text-md-17 { font-size: 17px !important; }
  .text-md-18 { font-size: 18px !important; }
}

/* ---------- One-off semantic classes ---------- */

/* Nav logo: h-[50px] md:h-[60px] lg:h-[70px] w-auto */
.logo-img { height: 50px; width: auto; }
@media (min-width: 768px) { .logo-img { height: 60px; } }
@media (min-width: 992px) { .logo-img { height: 70px; } }

/* Nav tagline: text-[14px] md:text-[17px] lg:text-[20px] */
.nav-tagline { font-size: 14px; }
@media (min-width: 768px) { .nav-tagline { font-size: 17px; } }
@media (min-width: 992px) { .nav-tagline { font-size: 20px; } }

/* Quote card: p-5 md:p-6 lg:p-7 and lg:w-[560px] */
.quote-card-pad { padding: 20px; }
@media (min-width: 768px) { .quote-card-pad { padding: 24px; } }
@media (min-width: 992px) {
  .quote-card-pad { padding: 28px; }
  .w-lg-560 { width: 560px !important; }
}

/* Quote form labels: font-heading font-semibold text-[14px] text-atlas-blue block mb-1 (×7) */
.quote-label {
  display: block;
  margin-bottom: 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--atlas-blue);
}

/* In-input icons: absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 (×7) */
.field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.field-icon--static { pointer-events: none; }

/* "Not Every Option" positioning rule: border-l-4 border-atlas-blue pl-5 md:pl-6 */
.accent-rule {
  border-left: 4px solid var(--atlas-blue);
  padding-left: 20px;
}
@media (min-width: 768px) { .accent-rule { padding-left: 24px; } }

/* Network section title: font-bold leading-[1.05] tracking-tight text-[34px] md:[42px] lg:[52px] mb-6 */
.network-title {
  margin: 0 0 24px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
}
@media (min-width: 768px) { .network-title { font-size: 42px; } }
@media (min-width: 992px) { .network-title { font-size: 52px; } }

/* Final CTA lead: text-[20px] md:[24px] lg:[28px] leading-[1.3] font-light max-w-[640px] mx-auto mb-10 */
.final-cta-lead {
  margin: 0 auto 40px !important;
  max-width: 640px;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
}
@media (min-width: 768px) { .final-cta-lead { font-size: 24px; } }
@media (min-width: 992px) { .final-cta-lead { font-size: 28px; } }

/* ---------- Custom-gutter rows (preserve exact gaps without double-counting
   against Bootstrap's percentage-based column math) ---------- */

/* Quote form rows: gap-x-4 (16px) + gap-y-3 (12px) when stacked below sm */
.quote-form-row { margin-left: -8px; margin-right: -8px; }
.quote-form-row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
@media (max-width: 575.98px) {
  .quote-form-row > [class*="col-"]:not(:last-child) { margin-bottom: 12px; }
}

/* 12-col split sections: gap-10 (40px) → lg:gap-16 (64px); 40px stacked gap */
.atlas-split { margin-left: -20px; margin-right: -20px; }
.atlas-split > [class*="col-"] { padding-left: 20px; padding-right: 20px; }
@media (max-width: 991.98px) {
  .atlas-split > [class*="col-"]:not(:last-child) { margin-bottom: 40px; }
}
@media (min-width: 992px) {
  .atlas-split { margin-left: -32px; margin-right: -32px; }
  .atlas-split > [class*="col-"] { padding-left: 32px; padding-right: 32px; }
}