/* RePath Intelligence — shared styles for /platform/intelligence and all six Phase 2 sub-pages.
   Inherits from styles.css; scoped to .intel-page on the body. */

/* Pillar cards inherit cap-card pattern but allow longer body copy */
    .intel-pillar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
    }
    .intel-pillar-card {
      padding: 2rem 1.75rem;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-top: 4px solid var(--blue-primary);
      border-radius: var(--radius-lg);
      transition: var(--transition);
    }
    .intel-pillar-card:hover { box-shadow: var(--shadow-md); border-top-color: var(--blue-dark); }
    .intel-pillar-card .pillar-eyebrow {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--blue-primary);
      margin-bottom: 0.5rem;
    }
    .intel-pillar-card h3 {
      font-size: 1.35rem;
      font-weight: 800;
      margin-bottom: 0.75rem;
      color: var(--slate-900);
    }
    .intel-pillar-card p {
      font-size: 0.975rem;
      line-height: 1.65;
      color: var(--dark-grey);
    }

    /* Asset frame for narrative visuals.
       Conceptual visuals are illustrations, not photos, so no borders or shadows.
       They get the full content width and center cleanly. */
    .intel-asset {
      margin: 2.5rem auto 0;
      text-align: center;
      max-width: 100%;
    }
    .intel-asset img {
      display: block;
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
      height: auto;
    }
    .intel-asset.compact img { max-width: 980px; }
    .intel-asset.full img { max-width: 1200px; }

    /* Mentor section — copy block sits between section header and asset */
    .intel-mentor-copy {
      max-width: 820px;
      margin: 0 auto;
    }
    .intel-mentor-copy p {
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--dark-grey);
      margin: 0 0 1.25rem 0;
    }
    .intel-mentor-copy p:last-child { margin-bottom: 0; }

    /* Intelligence Sequence — Phase 2 stage links sit beneath the B10 image */
    .intel-sequence-links {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.875rem;
      margin-top: 2rem;
    }
    .intel-sequence-link {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      padding: 1rem 1.25rem;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-md);
      text-decoration: none;
      transition: var(--transition);
    }
    .intel-sequence-link:hover {
      border-color: var(--blue-primary);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }
    .intel-sequence-link .link-stage {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--slate-500);
    }
    .intel-sequence-link .link-target {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--blue-primary);
    }
    .intel-sequence-link.is-static {
      background: transparent;
      border-style: dashed;
      border-color: var(--slate-300);
      pointer-events: none;
    }
    .intel-sequence-link.is-static:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--slate-300);
    }
    .intel-sequence-link.is-static .link-target {
      color: var(--slate-500);
      font-weight: 600;
    }
    @media (max-width: 768px) {
      .intel-sequence-links { grid-template-columns: repeat(2, 1fr); }
    }

    /* Pillar cards as links — same shape as static cards but signal clickability */
    .intel-pillar-card-link {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .intel-pillar-card-link:hover {
      transform: translateY(-2px);
    }
    .intel-pillar-card .pillar-link {
      display: block;
      margin-top: 0.85rem;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--blue-primary);
      letter-spacing: 0.01em;
    }

    /* Benefit cards as links — preserve card visual, signal clickability */
    .intel-benefit-card-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .intel-benefit-card-link:hover {
      transform: translateY(-2px);
    }

    /* Outcome strip — light variant of proof-stats for the Outcomes section on white */
    .intel-outcome-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      max-width: 980px;
      margin: 1rem auto 0;
    }
    .intel-outcome-stat {
      text-align: center;
      padding: 1.25rem 0.75rem;
      background: var(--slate-50);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-lg);
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      align-items: center;
    }
    .intel-outcome-arrow {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 800;
      line-height: 1;
    }
    .intel-outcome-arrow.up { color: var(--green-accent); }
    .intel-outcome-arrow.down { color: var(--green-accent); }
    .intel-outcome-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--slate-700);
      letter-spacing: 0.01em;
    }
    @media (max-width: 768px) {
      .intel-outcome-strip { grid-template-columns: repeat(2, 1fr); }
    }

    /* Transition line — connective beat between content blocks. Sits tight to whatever follows. */
    .intel-transition {
      max-width: 760px;
      margin: 2.5rem auto 0.5rem;
      text-align: center;
      position: relative;
    }
    .intel-transition::before {
      content: "";
      display: block;
      width: 32px;
      height: 2px;
      background: var(--blue-primary);
      margin: 0 auto 0.85rem;
    }
    .intel-transition p {
      font-family: var(--font-display);
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      font-weight: 600;
      color: var(--slate-700);
      line-height: 1.55;
      margin: 0;
    }
    /* When the transition sits directly above an asset image, pull the image up tight */
    .intel-transition + .intel-asset {
      margin-top: 1rem;
    }

    /* Hero-anchor variant: B5 sits below the dark hero on a clean white field.
       Image is the full canvas. Headline + subhead overlay the top-left whitespace area
       (where the original composed asset had them). Max-width on the overlay keeps text
       from running into the particle field. */
    .intel-hero-anchor {
      background: var(--white);
      padding: 4rem 0 3rem 0;
    }
    .intel-hero-anchor .b5-wrap {
      position: relative;
      max-width: 1300px;
      margin: 0 auto;
    }
    .intel-hero-anchor .b5-wrap img {
      display: block;
      width: 100%;
      height: auto;
    }
    .intel-hero-anchor .b5-copy {
      position: absolute;
      top: 3%;
      left: 3%;
      width: 30%;
      max-width: 360px;
      pointer-events: none;
    }
    .intel-hero-anchor .b5-copy h2 {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.2vw, 1.95rem);
      font-weight: 800;
      line-height: 1.1;
      color: var(--slate-900);
      margin: 0 0 0.55rem 0;
      letter-spacing: -0.01em;
    }
    .intel-hero-anchor .b5-rule {
      width: 32px;
      height: 3px;
      background: var(--blue-primary);
      margin: 0 0 0.8rem 0;
    }
    .intel-hero-anchor .b5-copy p {
      font-size: clamp(0.78rem, 1vw, 0.95rem);
      line-height: 1.5;
      color: var(--slate-700);
      margin: 0;
    }
    /* On narrow viewports the overlay would crowd the particle field. Stack above instead. */
    @media (max-width: 900px) {
      .intel-hero-anchor .b5-copy {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
        text-align: center;
      }
      .intel-hero-anchor .b5-rule { margin-left: auto; margin-right: auto; }
    }

    /* Section 5 — product showcase with side callouts */
    .intel-showcase {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      align-items: center;
      margin-top: 2rem;
    }
    .intel-showcase-image {
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      background: var(--slate-50);
    }
    .intel-showcase-image img {
      display: block;
      width: 100%;
      height: auto;
    }
    .intel-showcase-callouts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 1.75rem;
    }
    .intel-callout {
      padding: 1.25rem 1.25rem 1.25rem 1.5rem;
      background: var(--white);
      border-left: 3px solid var(--blue-primary);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
    .intel-callout h4 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: 0.4rem;
    }
    .intel-callout p {
      font-size: 0.9rem;
      line-height: 1.55;
      color: var(--dark-grey);
      margin: 0;
    }

    /* Section 6 — dataset scale strip */
    .intel-scale-strip {
      margin-top: 2rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 1.5rem 2rem;
      background: var(--slate-50);
      border-radius: var(--radius-lg);
      border: 1px solid var(--slate-200);
    }
    .intel-scale-stat {
      text-align: center;
    }
    .intel-scale-stat strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 800;
      color: var(--blue-primary);
      line-height: 1.1;
    }
    .intel-scale-stat span {
      display: block;
      font-size: 0.875rem;
      color: var(--slate-600);
      margin-top: 0.4rem;
    }
    .intel-scale-note {
      font-size: 0.8rem;
      color: var(--slate-500);
      text-align: center;
      margin-top: 1rem;
    }

    /* Section 7 — Megan quote band (dark Q&A treatment) */
    .intel-quote-band {
      background: linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue-dark) 100%);
      color: var(--white);
      padding: 4.5rem 0;
    }
    .intel-quote-inner {
      max-width: 880px;
      margin: 0 auto;
      padding: 0 1.5rem;
      text-align: center;
    }
    .intel-quote-eyebrow {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #AFC6F4;
      margin-bottom: 1.25rem;
    }
    .intel-quote-text {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.6vw, 1.85rem);
      font-weight: 500;
      line-height: 1.45;
      color: var(--white);
      margin-bottom: 1.5rem;
    }
    .intel-quote-attr {
      font-size: 1rem;
      color: #AFC6F4;
    }
    .intel-quote-attr strong { color: var(--white); }

    /* Section 8 — benefits grid (B11) */
    .intel-benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .intel-benefit-card {
      padding: 1.75rem;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-lg);
      transition: var(--transition);
    }
    .intel-benefit-card:hover {
      border-color: var(--blue-primary);
      box-shadow: var(--shadow-md);
    }
    .intel-benefit-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--blue-light);
      border-radius: var(--radius-md);
      margin-bottom: 1rem;
    }
    .intel-benefit-card h3 {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--slate-900);
      margin-bottom: 0.5rem;
    }
    .intel-benefit-card p {
      font-size: 0.925rem;
      line-height: 1.6;
      color: var(--dark-grey);
      margin: 0;
    }

    /* Section 10 — Design Partner CTA form */
    .intel-partner-cta {
      background: linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue-dark) 100%);
      color: var(--white);
      padding: 5rem 0;
    }
    .intel-partner-inner {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 1.5rem;
      text-align: center;
    }
    .intel-partner-eyebrow {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #AFC6F4;
      margin-bottom: 1rem;
    }
    .intel-partner-inner h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.4rem);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 1rem;
    }
    .intel-partner-inner > p {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #cfd9ec;
      margin-bottom: 2.25rem;
    }
    .intel-partner-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
    }
    .intel-partner-secondary {
      color: var(--white);
      font-size: 0.95rem;
      text-decoration: underline;
      text-underline-offset: 4px;
      opacity: 0.85;
    }
    .intel-partner-secondary:hover { opacity: 1; }

    /* Responsive */
    @media (max-width: 1024px) {
      .intel-pillar-grid { grid-template-columns: repeat(2, 1fr); }
      .intel-benefits-grid { grid-template-columns: repeat(2, 1fr); }
      .intel-showcase-callouts { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .intel-pillar-grid,
      .intel-benefits-grid,
      .intel-scale-strip { grid-template-columns: 1fr; }
      .intel-scale-strip { padding: 1.5rem; }
      .intel-quote-text { font-size: 1.25rem; }
    }

    /* Hero overrides — Intelligence is institutional. B5 visual lives inside the dark hero,
       in a white inset card so the dark-on-dark legibility problem is solved. */
    .subpage-hero.intel-hero .hero-visual {
      overflow: visible;
      justify-content: center;
      align-items: center;
      display: flex;
    }
    .subpage-hero.intel-hero .hero-visual .b5-inset {
      background: var(--white);
      padding: 1.25rem 1.5rem;
      border-radius: var(--radius-lg);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
      width: 100%;
      max-width: 720px;
    }
    .subpage-hero.intel-hero .hero-visual .b5-inset img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius-md);
    }
    @media (max-width: 900px) {
      .subpage-hero.intel-hero .hero-visual .b5-inset { padding: 1rem; }
    }

    /* Intelligence is institutional — override the inherited green hero badge and red pain-card treatment.
       The rest of the site keeps its existing treatment; this scope is page-level only. */
    .subpage-hero.intel-hero .hero-badge {
      background: rgba(175, 198, 244, 0.15);
      color: #AFC6F4;
      border: 1px solid rgba(175, 198, 244, 0.35);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.75rem;
    }
    .intel-page .pain-card {
      border-left: 4px solid var(--blue-primary);
      background: var(--slate-50);
    }
    .intel-page .pain-card:hover {
      border-left-color: var(--blue-dark);
      background: #eef2f8;
    }
    .intel-page .pain-card h3 {
      color: var(--slate-900);
    }
    .intel-page .pain-card .pain-icon {
      background: rgba(42, 81, 163, 0.1);
    }

/* ============================================================
   Sub-page spacing — applied via .intel-subpage on body
   Tightens vertical rhythm for the 6 Phase 2 pages where multiple
   short body sections stack. Frontend-design principle: intentional
   restraint, not the airy 80px treatment that fits the main page.
   ============================================================ */

.intel-subpage .sp-section {
  padding: 56px 0;
}
.intel-subpage .sp-section .section-header {
  margin-bottom: 1.75rem;
}

/* When two adjacent sp-sections share the same background, collapse the
   visible gap so it reads as one breath, not two stacks. */
.intel-subpage .sp-section.bg-white + .sp-section.bg-white,
.intel-subpage .sp-section.bg-light + .sp-section.bg-light {
  padding-top: 0;
}

/* Sub-page anchor visual sits tighter to the hero */
.intel-subpage .intel-hero-anchor {
  padding: 3rem 0 2.5rem 0;
}

/* Body section headers when left-aligned (sub-page pattern) — less margin below
   so the body paragraph reads as the continuation, not a separate beat */
.intel-subpage .section-header[style*="text-align: left"] {
  text-align: left;
  margin-bottom: 1.25rem !important;
  max-width: 100%;
}

/* Quote band on sub-pages sits with the same generous breath but tighter top */
.intel-subpage .intel-quote-band {
  padding: 3.5rem 0;
}

/* Design Partner CTA on sub-pages slightly tighter */
.intel-subpage .intel-partner-cta {
  padding: 4rem 0;
}

/* Cross-link blocks (sequence-links / pillar-grid) need less air above on sub-pages */
.intel-subpage .intel-sequence-links,
.intel-subpage .intel-pillar-grid {
  margin-top: 1.5rem;
}

/* Gated methodology link — appears after configurable-overlays section on Quality + Supervision Practice */
.intel-method-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--blue-primary);
  padding-bottom: 2px;
}
.intel-method-link:hover {
  color: var(--blue-dark);
  border-bottom-color: var(--blue-dark);
}