@layer pages {
/* ============================================================
   SCOUT LANDING PAGE V2 - SPECTACULAR REDESIGN
   style_scout_landing.css
   ============================================================
   Bold, immersive, image-heavy design with textured backgrounds,
   dynamic layouts, and minimal blank space.
   ============================================================ */

/* ----- Hero Aura Colors (consistency throughout) ----- */
:root {
  --scout-green: #34a853;
  --scout-green-rgb: 52, 168, 83;
  --scout-yellow: #ffd314;
  --scout-yellow-rgb: 255, 211, 20;
  --scout-red: #ff4641;
  --scout-red-rgb: 255, 70, 65;
  --scout-blue: #3186ff;
  --scout-blue-rgb: 49, 134, 255;
  --scout-dark: #0a0a0a;
  --scout-dark-elevated: #141414;
  --scout-max-width: 1080px;
}

/* ----- Page Container ----- */
.scout-landing-page {
  display: flex;
  flex-direction: column;
  gap: 0; /* Sections butt against each other */
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ----- Animated Aura Border ----- */
@property --scout-aura-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes scout-aura-orbit {
  from { --scout-aura-angle: 0deg; }
  to { --scout-aura-angle: 360deg; }
}

/* ============================================================
   PLACEHOLDER STYLES (for development)
   Only applies to specific placeholder divs, not other elements
   ============================================================ */
[class*="-image-placeholder"],
[class*="-bg-placeholder"] {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.placeholder-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.placeholder-label {
  font: 600 14px/1 "Jost", sans-serif;
  color: rgba(255,255,255,0.4);
  z-index: 1;
  padding: 8px 16px;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
}

/* ============================================================
   SECTION EYEBROW STYLES
   ============================================================ */
.section-eyebrow {
  display: inline-block;
  font: 700 12px/1 "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.7);
}

.section-eyebrow--green {
  background: rgba(var(--scout-green-rgb), 0.15);
  color: var(--scout-green);
}

.section-eyebrow--yellow {
  background: rgba(var(--scout-yellow-rgb), 0.15);
  color: var(--scout-yellow);
}

.section-eyebrow--red {
  background: rgba(var(--scout-red-rgb), 0.15);
  color: var(--scout-red);
}

.section-eyebrow--blue {
  background: rgba(var(--scout-blue-rgb), 0.15);
  color: var(--scout-blue);
}

/* Text highlight utilities */
.text-highlight {
  color: #777;
}

.text-strike {
  position: relative;
  color: rgba(255,255,255,0.5);
}

.text-strike::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 3px;
  background: var(--scout-red);
  transform: rotate(-2deg);
}

.text-counter {
  color: #777;
}

/* ============================================================
   1. HERO SECTION
   Full-viewport with Scout mascot and dramatic lighting
   ============================================================ */
.scout-hero-wrapper {
  position: relative;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px 20px 60px 20px;
  overflow: hidden;
  /* Rich textured background */
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(var(--scout-green-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(var(--scout-blue-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(var(--scout-yellow-rgb), 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #080808 0%, #0d0d0d 50%, #0a0a0a 100%);
}

/* Noise texture overlay */
.scout-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.scout-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px 60px;
  align-items: start;
  max-width: var(--scout-max-width);
  margin: 0 auto;
  width: 100%;
  /* Ensure children cannot exceed max-width */
}

/* Hero badge */
.scout-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.scout-badge-pulse {
  width: 10px;
  height: 10px;
  background: var(--scout-green);
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--scout-green-rgb), 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(var(--scout-green-rgb), 0); }
}

.scout-badge-text {
  font: 700 11px/1 "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--scout-green);
}

.scout-hero-content h1 {
  font: 800 clamp(36px, 5vw, 53px)/1.1 "Jost", sans-serif;
  color: var(--white);
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
}

.hero-highlight {
  color: #777;
}

.scout-hero-intro {
  font: 400 16px/1.7 "Jost", sans-serif;
  color: rgba(255,255,255,0.75);
  margin: 0 0 28px;
  max-width: 500px;
}

/* ScoutSearch page scout-search-box overrides (base styles in global.css) */
.scout-search-box--hero {
  max-width: 550px;
}

.scout-search-box .scout-placeholder-text.is-fading {
  opacity: 0;
}

/* Page-specific overrides for scout-search-submit */
.scout-landing-page .scout-search-submit {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  z-index: 3;
}
.scout-search-submit:hover {
  transform: translateY(-50%) scale(1.05);
}
.scout-search-submit:active {
  transform: translateY(-50%) scale(0.98);
}
.scout-search-submit img {
  width: 18px;
  height: 18px;
}

/* Quick start examples grid - spans full width below both columns */
.scout-hero-quickstarts {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  /* Prevent overflow as grid child */
  min-width: 0;
  overflow: hidden;
  /* Ensure quickstarts stay above Scout during parallax scroll */
  position: relative;
  z-index: 2;
}

.scout-quickstart-label {
  font: 600 11px/1 "Jost", sans-serif;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-left: 5px;
}

.scout-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* Prevent grid from exceeding container */
  max-width: 100%;
}

.scout-quickstart {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/1.3 "Jost", sans-serif;
  color: rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  /* Prevent grid items from overflowing - allows shrinking below content size */
  min-width: 0;
  overflow: hidden;
}

.scout-quickstart i {
  font-size: 14px;
  color: var(--scout-yellow);
  opacity: 0.7;
  flex-shrink: 0;
}

.scout-quickstart span {
  flex: 1;
  min-width: 0;
}

.scout-quickstart:hover,
.scout-quickstart:focus-visible {
  background: rgba(var(--scout-yellow-rgb), 0.12);
  border-color: rgba(var(--scout-yellow-rgb), 0.25);
  color: #fff;
  text-decoration: none !important;
}

.scout-quickstart:hover span,
.scout-quickstart:focus-visible span {
  text-decoration: none !important;
}

.scout-quickstart:hover i {
  opacity: 1;
}

/* Hero visual / mascot image */
.scout-hero-visual {
  position: relative;
  z-index: 1; /* Below quickstarts so Scout slides behind during parallax */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
}

.scout-hero-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
  animation: hero-image-float 5s ease-in-out infinite;
}

@keyframes hero-image-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Retain placeholder styling for other placeholders */
.scout-hero-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 450px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--scout-yellow-rgb), 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(var(--scout-green-rgb), 0.15) 0%, transparent 50%),
    rgba(255,255,255,0.02);
}

/* Scroll indicator */
.scout-hero-scroll-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: bounce-down 2s ease-in-out infinite;
}

.scroll-text {
  font: 500 11px/1 "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}

.scout-hero-scroll-indicator i {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
}

@keyframes bounce-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   2. PROBLEM SECTION
   Dramatic "pain point" section with split layout
   ============================================================ */
.scout-problem-section {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.scout-problem-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(var(--scout-red-rgb), 0.1) 0%, transparent 50%),
    linear-gradient(225deg, rgba(80, 50, 50, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.9) 100%),
    #1a1010;
}

/* Diagonal slash accent */
.scout-problem-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(var(--scout-red-rgb), 0.05) 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.scout-problem-split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: var(--scout-max-width);
  margin: 0 auto;
  padding: 40px 20px;
}

.scout-problem-text {
  max-width: 600px;
}

.scout-problem-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scout-problem-image {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.scout-problem-text h2 {
  font: 700 clamp(32px, 4vw, 48px)/1.15 "Jost", sans-serif;
  color: var(--white);
  margin: 0 0 32px;
}

.scout-problem-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scout-problem-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 16px/1.5 "Jost", sans-serif;
  color: rgba(255,255,255,0.7);
}

.scout-problem-item i {
  font-size: 18px;
  color: var(--scout-red);
  opacity: 0.8;
}

/* ============================================================
   3. SOLUTION SECTION
   Split design with Scout mascot and features
   ============================================================ */
.scout-solution-section {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 90% 70% at 20% 50%, rgba(var(--scout-green-rgb), 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(var(--scout-green-rgb), 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #101810 0%, #121f15 50%, #101810 100%);
  overflow: hidden;
}

.scout-solution-split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--scout-max-width);
  margin: 0 auto;
  padding: 40px 20px 40px;
}

.scout-solution-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scout-solution-image {
  max-width: 350px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.scout-solution-content h2 {
  font: 700 clamp(28px, 3.5vw, 42px)/1.2 "Jost", sans-serif;
  color: var(--white);
  margin: 0 0 20px;
}

.scout-solution-intro {
  font: 400 16px/1.7 "Jost", sans-serif;
  color: rgba(255,255,255,0.7);
  margin: 0 0 32px;
}

.scout-solution-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scout-feature-mini {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.feature-mini-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  flex-shrink: 0;
}

.feature-mini-icon--blue {
  background: #2C528C;
}

.feature-mini-icon--yellow {
  background: linear-gradient(135deg, var(--scout-yellow) 0%, #e6bc00 100%);
}

.feature-mini-icon--red {
  background: linear-gradient(135deg, var(--scout-red) 0%, #e63935 100%);
}

.feature-mini-icon i {
  font-size: 28px;
  color: #000;
}

.feature-mini-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.feature-mini-text strong {
  font: 600 20px/1.3 "Jost", sans-serif;
  color: var(--white);
}

.feature-mini-text span {
  font: 400 16px/1.4 "Jost", sans-serif;
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   4. JOURNEY SECTION
   Alternating visual/text steps with connecting flow
   ============================================================ */
.scout-journey-section {
  position: relative;
  width: 100%;
  padding: 40px 20px 40px;
  overflow-x: hidden; /* Prevent horizontal overflow from mockup animations */
  background:
    /* Vibrant color orbs */
    radial-gradient(ellipse 50% 35% at 85% 15%, rgba(var(--scout-blue-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 35%, rgba(var(--scout-green-rgb), 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 90% 55%, rgba(var(--scout-yellow-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 35% 25% at 15% 75%, rgba(var(--scout-red-rgb), 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(var(--scout-blue-rgb), 0.08) 0%, transparent 60%),
    /* Base gradient */
    linear-gradient(180deg, #0a0a0a 0%, #0d0d12 30%, #0a0f0a 70%, #0a0a0a 100%);
  overflow: hidden;
}

/* Animated gradient overlay for subtle movement */
.scout-journey-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(var(--scout-yellow-rgb), 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(var(--scout-green-rgb), 0.05) 0%, transparent 50%);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.scout-journey-header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 0;
}

.scout-journey-header h2 {
  font: 700 clamp(28px, 4vw, 44px)/1.2 "Jost", sans-serif;
  color: var(--white);
  margin: 0;
}

.scout-journey-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: var(--scout-max-width);
  margin: 0 auto;
}

/* Vertical progress line connecting all steps */
.scout-journey-flow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 80px;
  bottom: 80px;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--scout-yellow-rgb), 0.4) 5%,
    rgba(var(--scout-green-rgb), 0.5) 25%,
    rgba(var(--scout-blue-rgb), 0.5) 50%,
    rgba(var(--scout-yellow-rgb), 0.5) 75%,
    rgba(var(--scout-green-rgb), 0.4) 95%,
    transparent 100%
  );
  border-radius: 2px;
  z-index: 0;
}

/* Glowing dots at each step position on the line */
.scout-journey-flow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 80px;
  bottom: 80px;
  width: 3px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 12%, var(--scout-yellow) 0%, var(--scout-yellow) 4px, transparent 6px),
    radial-gradient(circle at 50% 37%, var(--scout-green) 0%, var(--scout-green) 4px, transparent 6px),
    radial-gradient(circle at 50% 62%, var(--scout-blue) 0%, var(--scout-blue) 4px, transparent 6px),
    radial-gradient(circle at 50% 87%, var(--scout-yellow) 0%, var(--scout-yellow) 4px, transparent 6px);
  z-index: 1;
}

.scout-journey-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 30px 0;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
  min-width: 0;
}

.scout-journey-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating layout */
.scout-journey-step--2 .journey-step-visual,
.scout-journey-step--4 .journey-step-visual {
  order: 2;
}

.scout-journey-step--2 .journey-step-content,
.scout-journey-step--4 .journey-step-content {
  order: 1;
}


.journey-step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-width: 0;
  overflow: hidden;
}

.journey-step-image {
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* Layered shadow: subtle ambient glow for edge definition + depth shadow */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 30px rgba(255, 255, 255, 0.05),
    0 0 60px rgba(var(--scout-green-rgb), 0.08),
    0 25px 50px rgba(0, 0, 0, 0.6);
}

.journey-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-width: 450px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(var(--scout-yellow-rgb), 0.1) 0%, transparent 60%),
    rgba(255,255,255,0.02);
}

.journey-step-content {
  padding: 20px 0;
}

.journey-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.journey-step-number span {
  font: 800 48px/1 "Jost", sans-serif;
  color: var(--scout-yellow);
}

.journey-step-content h3 {
  font: 700 26px/1.2 "Jost", sans-serif;
  color: var(--white);
  margin: 0 0 12px;
}

.journey-step-content p {
  font: 400 16px/1.7 "Jost", sans-serif;
  color: rgba(255,255,255,0.7);
  margin: 0 0 20px;
  max-width: 400px;
}

/* Example queries in step 1 */
.journey-example-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.example-query {
  font: 400 13px/1 "Jost", sans-serif;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Animated typewriter input mockup for Step 1 */
.journey-input-mockup {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  min-width: 0; /* Allow flex item to shrink below content width */
  background: #1a1a1a;
  border-radius: 16px;
  padding: 0;
  box-shadow:
    0 0 40px rgba(var(--scout-green-rgb), 0.15),
    0 0 80px rgba(var(--scout-yellow-rgb), 0.08),
    0 4px 30px rgba(0, 0, 0, 0.4);
  border: none;
  overflow: visible;
}

/* Aura border effect for mockup */
.journey-input-mockup::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(
    from var(--scout-aura-angle, 0deg),
    transparent 0deg,
    transparent 20deg,
    rgba(52, 168, 83, 1) 50deg,
    rgba(255, 211, 20, 1) 90deg,
    rgba(255, 70, 65, 1) 130deg,
    rgba(49, 134, 255, 1) 170deg,
    rgba(49, 134, 255, 0.7) 220deg,
    rgba(49, 134, 255, 0.3) 270deg,
    transparent 310deg,
    transparent 360deg
  ) border-box;
  border: 2px solid transparent;
  z-index: 0;
  pointer-events: none;
  animation: scout-aura-orbit 4s linear infinite;
}

/* Inner background to cover the aura inside */
.journey-input-mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  border-radius: 16px;
  z-index: 0;
}

.mockup-input-container {
  flex: 1;
  min-width: 0; /* Allow flex item to shrink below content width */
  padding: 18px 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* Fade mask on both edges as text overflows */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10px, black calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10px, black calc(100% - 10px), transparent 100%);
}

.mockup-text-wrapper {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: transform 0.05s linear;
  min-width: 0; /* Allow shrinking */
}

.mockup-input-text {
  font: 400 16px/1.4 "Jost", sans-serif;
  color: var(--white);
  white-space: nowrap;
}

.mockup-cursor {
  display: inline-block;
  width: 2px;
  height: 20px;
  background: var(--scout-yellow);
  margin-left: 1px;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.mockup-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  background: var(--btn-yellow-bg);
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.mockup-submit-btn i {
  color: #000;
  font-size: 14px;
}

/* Analysis tags in step 2 */
.journey-analysis-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.analysis-tag {
  font: 500 12px/1 "Jost", sans-serif;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid;
}

.analysis-tag:nth-child(1) {
  background: rgba(var(--scout-green-rgb), 0.12);
  border-color: rgba(var(--scout-green-rgb), 0.3);
  color: var(--scout-green);
}

.analysis-tag:nth-child(2) {
  background: rgba(var(--scout-yellow-rgb), 0.12);
  border-color: rgba(var(--scout-yellow-rgb), 0.3);
  color: var(--scout-yellow);
}

.analysis-tag:nth-child(3) {
  background: rgba(var(--scout-blue-rgb), 0.12);
  border-color: rgba(var(--scout-blue-rgb), 0.3);
  color: var(--scout-blue);
}

/* Sample reason quote in step 3 */
.journey-sample-reason {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--scout-yellow);
  border-radius: 0 12px 12px 0;
}

.journey-sample-reason i {
  font-size: 16px;
  color: var(--scout-yellow);
  opacity: 0.6;
  flex-shrink: 0;
}

.journey-sample-reason span {
  font: 400 16px/1.6 "Jost", sans-serif;
  color: rgba(255,255,255,0.7);
  font-style: italic;
}

/* Refine bubbles in step 4 */
.journey-refine-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.refine-bubble {
  font: 500 13px/1 "Jost", sans-serif;
  padding: 10px 16px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(var(--scout-green-rgb), 0.2) 0%, rgba(var(--scout-blue-rgb), 0.15) 100%);
  border: 1px solid rgba(var(--scout-green-rgb), 0.3);
  color: rgba(255,255,255,0.85);
}

/* ============================================================
   5. UNDERSTANDS SECTION
   Masonry-style feature grid
   ============================================================ */
.scout-understands-section {
  position: relative;
  width: 100%;
  padding: 40px 20px;
  background:
    /* Vibrant color orbs for visual interest */
    radial-gradient(ellipse 55% 40% at 80% 20%, rgba(var(--scout-blue-rgb), 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 15% 75%, rgba(var(--scout-green-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 70% 90%, rgba(var(--scout-yellow-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 25% 25%, rgba(var(--scout-red-rgb), 0.10) 0%, transparent 50%),
    /* Brighter top/bottom edges fading to darker center */
    linear-gradient(180deg,
      #1a1520 0%,
      #161220 15%,
      #12101a 35%,
      #100e18 50%,
      #12101a 65%,
      #161220 85%,
      #1a1520 100%);
}

.scout-understands-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px;
}

.scout-understands-header h2 {
  font: 700 clamp(28px, 4vw, 42px)/1.2 "Jost", sans-serif;
  color: var(--white);
  margin: 0;
}

.scout-understands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--scout-max-width);
  margin: 0 auto;
}

.scout-understands-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 28px 24px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.scout-understands-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scout-understands-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ---- Unique thematic backgrounds for each card ---- */

/* Mood & Tone: Warm emotional swirls (yellow/orange/dark) */
.scout-understands-card--mood {
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(var(--scout-yellow-rgb), 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(var(--scout-red-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 180, 100, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, rgba(40, 25, 15, 0.6) 0%, rgba(20, 15, 25, 0.8) 100%),
    rgba(255,255,255,0.03);
  border-color: rgba(var(--scout-yellow-rgb), 0.15);
}

/* Character Types: Green/teal group dynamics feel */
.scout-understands-card--characters {
  background:
    radial-gradient(ellipse 70% 50% at 15% 70%, rgba(var(--scout-green-rgb), 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(var(--scout-green-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(var(--scout-blue-rgb), 0.08) 0%, transparent 50%),
    linear-gradient(160deg, rgba(15, 30, 20, 0.7) 0%, rgba(10, 20, 25, 0.8) 100%),
    rgba(255,255,255,0.03);
  border-color: rgba(var(--scout-green-rgb), 0.15);
}

/* Pacing: Fast motion streaks (red/black/dynamic) */
.scout-understands-card--pacing {
  background:
    /* Diagonal motion streaks */
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 8px,
      rgba(var(--scout-red-rgb), 0.06) 8px,
      rgba(var(--scout-red-rgb), 0.06) 10px
    ),
    radial-gradient(ellipse 80% 60% at 90% 80%, rgba(var(--scout-red-rgb), 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 20%, rgba(var(--scout-red-rgb), 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgba(35, 15, 15, 0.8) 0%, rgba(15, 10, 10, 0.9) 100%),
    rgba(255,255,255,0.03);
  border-color: rgba(var(--scout-red-rgb), 0.2);
}

/* Series & Standalone: Stacked/sequential feel (blue) */
.scout-understands-card--series {
  background:
    /* Subtle horizontal layers suggesting stacked books */
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 20px,
      rgba(var(--scout-blue-rgb), 0.04) 20px,
      rgba(var(--scout-blue-rgb), 0.04) 22px
    ),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(var(--scout-blue-rgb), 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 75% 25%, rgba(var(--scout-blue-rgb), 0.12) 0%, transparent 50%),
    linear-gradient(150deg, rgba(15, 20, 35, 0.7) 0%, rgba(10, 15, 30, 0.9) 100%),
    rgba(255,255,255,0.03);
  border-color: rgba(var(--scout-blue-rgb), 0.15);
}

/* Length & Format: Time/clock feel (yellow/gold circular hints) */
.scout-understands-card--length {
  background:
    /* Circular time-like patterns */
    radial-gradient(circle at 80% 70%, rgba(var(--scout-yellow-rgb), 0.15) 0%, rgba(var(--scout-yellow-rgb), 0.08) 15%, transparent 30%),
    radial-gradient(circle at 80% 70%, transparent 10%, rgba(var(--scout-yellow-rgb), 0.04) 12%, transparent 14%),
    radial-gradient(circle at 80% 70%, transparent 20%, rgba(var(--scout-yellow-rgb), 0.03) 22%, transparent 24%),
    radial-gradient(ellipse 50% 40% at 15% 30%, rgba(var(--scout-yellow-rgb), 0.1) 0%, transparent 50%),
    linear-gradient(140deg, rgba(35, 30, 15, 0.6) 0%, rgba(20, 18, 12, 0.8) 100%),
    rgba(255,255,255,0.03);
  border-color: rgba(var(--scout-yellow-rgb), 0.15);
}

/* Content Preferences: Shield/boundary feel (green with protective aura) */
.scout-understands-card--content {
  background:
    /* Shield-like protective gradient */
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(var(--scout-green-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(var(--scout-green-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 80% 60%, rgba(var(--scout-blue-rgb), 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(15, 30, 20, 0.5) 0%, rgba(10, 25, 18, 0.7) 100%),
    linear-gradient(135deg, rgba(var(--scout-green-rgb), 0.08) 0%, rgba(var(--scout-blue-rgb), 0.05) 100%);
}

/* Featured card with special border */
.scout-understands-card--featured {
  background: linear-gradient(135deg, rgba(var(--scout-green-rgb), 0.08) 0%, rgba(var(--scout-blue-rgb), 0.05) 100%);
  border-color: rgba(var(--scout-green-rgb), 0.2);
}

.understands-card-content {
  position: relative;
  z-index: 1;
}

.understands-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  margin-bottom: 16px;
}

.understands-icon--green {
  background: linear-gradient(135deg, var(--scout-green) 0%, #2a8a45 100%);
}

.understands-icon--yellow {
  background: linear-gradient(135deg, var(--scout-yellow) 0%, #e6bc00 100%);
}

.understands-icon--red {
  background: linear-gradient(135deg, var(--scout-red) 0%, #e63935 100%);
}

.understands-icon--blue {
  background: linear-gradient(135deg, var(--scout-blue) 0%, #2970e6 100%);
}

.understands-icon i {
  font-size: 28px;
  color: rgba(0, 0, 0, 0.5);
}

.scout-understands-card h3 {
  font: 700 18px/1.3 "Jost", sans-serif;
  color: var(--white);
  margin: 0 0 8px;
}

.scout-understands-card p {
  font: 400 16px/1.6 "Jost", sans-serif;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* ============================================================
   6. CLOSING SECTION
   Dramatic CTA with mascot
   ============================================================ */
.scout-closing-section {
  position: relative;
  width: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  /* Dramatic gradient background */
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(var(--scout-yellow-rgb), 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(var(--scout-green-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(var(--scout-blue-rgb), 0.1) 0%, transparent 50%),
    linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
}

/* Animated glow at bottom */
.scout-closing-section::before {
  content: "";
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background:
    radial-gradient(ellipse at center, rgba(var(--scout-yellow-rgb), 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(var(--scout-green-rgb), 0.2) 0%, transparent 60%);
  filter: blur(60px);
  animation: closing-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes closing-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.scout-closing-visuals {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 300px;
  height: 400px;
  z-index: 1;
}

.scout-closing-mascot {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(var(--scout-yellow-rgb), 0.2) 0%, transparent 60%),
    transparent;
  border: none;
}

.scout-closing-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: var(--scout-max-width);
  width: 100%;
}

.scout-closing-content h2 {
  font: 800 clamp(36px, 5vw, 56px)/1.1 "Jost", sans-serif;
  color: var(--white);
  margin: 0 0 16px;
}

.closing-highlight {
  color: #777;
}

.scout-closing-subtitle {
  font: 400 17px/1.7 "Jost", sans-serif;
  color: rgba(255,255,255,0.7);
  margin: 0 0 32px;
}

/* Closing search box - inherits aura from global.css .scout-search-box::before */
.scout-search-box--closing {
  max-width: 500px;
  margin: 0 auto 40px;
}

/* Closing section quickstarts */
.scout-closing-quickstarts {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.scout-closing-quickstarts .scout-quickstart-label {
  font: 600 11px/1 "Jost", sans-serif;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.scout-closing-quickstarts .scout-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: var(--scout-max-width);
  width: 100%;
}

.scout-closing-quickstarts .scout-quickstart {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/1.3 "Jost", sans-serif;
  color: rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: left;
  /* Prevent grid items from overflowing */
  min-width: 0;
  overflow: hidden;
}

.scout-closing-quickstarts .scout-quickstart i {
  font-size: 14px;
  color: var(--scout-yellow);
  opacity: 0.7;
  flex-shrink: 0;
}

.scout-closing-quickstarts .scout-quickstart span {
  flex: 1;
  min-width: 0;
}

.scout-closing-quickstarts .scout-quickstart:hover,
.scout-closing-quickstarts .scout-quickstart:focus-visible {
  background: rgba(var(--scout-yellow-rgb), 0.12);
  border-color: rgba(var(--scout-yellow-rgb), 0.25);
  color: #fff;
  text-decoration: none !important;
}

.scout-closing-quickstarts .scout-quickstart:hover span,
.scout-closing-quickstarts .scout-quickstart:focus-visible span {
  text-decoration: none !important;
}

.scout-closing-quickstarts .scout-quickstart:hover i {
  opacity: 1;
}

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

/* Tablet */
@media (max-width: 900px) {
  .scout-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0px;
  }

  .scout-hero-content {
    order: 1;
  }

  .scout-hero-visual {
    order: 2;
    align-items: center;
    margin-top: 6px; /* Pull Scout closer to search field */
  }

  .scout-hero-quickstarts {
    order: 3;
    align-items: center;
  }

  .scout-hero-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .scout-search-box--hero {
    margin: 0 auto;
  }

  .scout-quickstart-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    width: 100%;
    text-align: left;
  }

  .scout-hero-image {
    max-width: 350px;
  }

  .scout-hero-image-placeholder {
    max-width: 300px;
  }

  .scout-solution-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .scout-solution-visual {
    order: 2;
  }

  .scout-solution-content {
    order: 1;
    text-align: center;
  }

  .scout-solution-features {
    align-items: flex-start; /* Left-justify items */
    max-width: fit-content;  /* Shrink to content width */
    margin: 0 auto;          /* Center the container */
    text-align: left;
  }

  /* Hide vertical progress line on single-column layout */
  .scout-journey-flow::before,
  .scout-journey-flow::after {
    display: none;
  }

  .scout-journey-step {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  /* Subtle divider between journey steps */
  .scout-journey-step::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.25) 20%,
      rgba(255, 255, 255, 0.25) 80%,
      transparent 100%
    );
  }
  .scout-journey-step.scout-journey-step--4,
  .scout-journey-step.scout-journey-step--4 .journey-step-content {
    padding-bottom: 0px;
  }
  

  /* Remove divider from last step */
  .scout-journey-step:last-child::after {
    display: none;
  }

  .scout-journey-step:last-child {
    margin-bottom: 0;
  }

  .scout-journey-step--2 .journey-step-visual,
  .scout-journey-step--4 .journey-step-visual {
    order: 1;
  }

  .scout-journey-step--2 .journey-step-content,
  .scout-journey-step--4 .journey-step-content {
    order: 2;
  }

  .journey-step-content {
    text-align: center;
    padding-top: 0px;
    overflow: hidden;
  }

  .journey-step-content p {
    max-width: none;
  }

  /* Keep fixed max-width at tablet - prevents aura overflow */
  .journey-input-mockup {
    max-width: 420px;
    width: 100%;
  }

  .journey-example-queries,
  .journey-analysis-preview,
  .journey-refine-bubbles {
    justify-content: center;
  }

  .journey-sample-reason {
    text-align: left;
  }

  .scout-understands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scout-closing-visuals {
    display: none;
  }

  .scout-closing-quickstarts .scout-quickstart-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .scout-hero-wrapper {
    min-height: auto;
    padding: 30px 16px 60px;
  }

  .scout-hero-content h1 {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .scout-hero-intro {
    font: 400 14px/1.7 "Jost", sans-serif;
    margin: 0 auto 18px; /* Center horizontally */
    line-height: 22px;
  }

  .scout-quickstart-grid {
    grid-template-columns: 1fr;
    justify-items: center; /* Center the cards */
  }

  .scout-quickstart {
    font-size: 14px;
    padding: 8px 12px;
    width: fit-content; /* Shrink to text content */
    max-width: 100%;    /* Don't exceed container */
  }

  .scout-quickstart i {
    font-size: 12px;
  }

  .scout-problem-split {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 30px 16px;
  }

  .scout-problem-section {
	min-height: unset;
}

  /* Hide standalone image, show as background instead */
  .scout-problem-visual {
    display: none;
  }

  .scout-problem-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/images/scout/old_way_frustration.webp") center / cover no-repeat;
    opacity: 0.15;
    mix-blend-mode: luminosity;
  }

  .scout-problem-text h2 {
    font-size: 28px;
  }

  .scout-solution-split {
    padding: 40px 16px 40px;
  }

  .scout-journey-section {
    padding: 40px 16px 40px;
  }

  .scout-journey-step {
    padding: 30px 0;
  }

  /* Keep fixed max-width like hero search (don't let it become 100%) */
  .journey-input-mockup {
    max-width: 420px;
    width: 100%;
  }

  .journey-step-number span {
    font-size: 36px;
  }

  .journey-step-content h3 {
    font-size: 22px;
  }

  .scout-understands-section {
    padding: 40px 16px;
  }

  .scout-understands-header {
	margin: 0 auto 30px;
}

  .scout-understands-grid {
    grid-template-columns: 1fr;
  }

  .scout-closing-section {
    padding: 40px 16px;
    min-height: auto;
  }

  .scout-closing-content h2 {
    font-size: 32px;
  }

  .scout-closing-quickstarts .scout-quickstart-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: center; /* Center the cards */
  }

  .scout-closing-quickstarts .scout-quickstart {
    width: fit-content; /* Shrink to text content */
    max-width: 100%;
  }
}

} /* end @layer pages */