/* --------------------------------------------------------------------------
   Subpages as editorial product pages: a shared ink hero, full-bleed bands,
   open documentation, and only a few true feature cards.
   -------------------------------------------------------------------------- */

body[data-page="analysis"],
body[data-page="tools"],
body[data-page="install"] {
  background: #fff;
}

/* Shared dark banner, matching the home hero without repeating its layout. */
body[data-page="analysis"] .page-hero,
body[data-page="tools"] .page-hero,
body[data-page="install"] .page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 5.5vw, 5rem) 0;
  border-bottom: 0;
  background: linear-gradient(125deg, #04070e 0%, #081426 58%, #0c1c38 100%);
}

body[data-page="analysis"] .page-hero::before,
body[data-page="tools"] .page-hero::before,
body[data-page="install"] .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148, 184, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 184, 255, 0.07) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}

body[data-page="analysis"] .page-hero > .container,
body[data-page="tools"] .page-hero > .container,
body[data-page="install"] .page-hero > .container {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="analysis"] .page-hero__body,
body[data-page="tools"] .page-hero__body,
body[data-page="install"] .page-hero__body {
  padding: 0;
}

body[data-page="analysis"] .page-hero h1,
body[data-page="tools"] .page-hero h1,
body[data-page="install"] .page-hero h1 {
  color: #f6f9ff;
}

body[data-page="analysis"] .page-hero__aside,
body[data-page="tools"] .page-hero__aside,
body[data-page="install"] .page-hero__aside {
  border-left-color: rgba(190, 210, 238, 0.24);
}

body[data-page="analysis"] .page-hero__aside p,
body[data-page="tools"] .page-hero__aside p,
body[data-page="install"] .page-hero__aside p {
  color: #b9c8dd;
}

/* Full-bleed section rhythm, no stacked white cards. */
body[data-page="tools"] main > .section {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  background: transparent;
}

body[data-page="tools"] main > .section > .container {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="tools"] #trace,
body[data-page="tools"] #device,
body[data-page="tools"] #mcp-sessions,
body[data-page="tools"] #mcp-boundaries {
  background: #f4f8ff;
  border-block: 1px solid #e7eef8;
}

body[data-page="tools"] #mcp {
  background: #f4f8ff;
  border-block: 1px solid #e7eef8;
}

/* Method: alternate open bands instead of rounded section cards. */
body[data-page="analysis"] #entry,
body[data-page="analysis"] #device,
body[data-page="analysis"] #pipeline,
body[data-page="analysis"] #scenarios,
body[data-page="analysis"] #division {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  background: transparent;
}

body[data-page="analysis"] #device,
body[data-page="analysis"] #scenarios,
body[data-page="analysis"] #division {
  background: #f4f8ff;
  border-block: 1px solid #e7eef8;
}

body[data-page="analysis"] #device > .container,
body[data-page="analysis"] #pipeline > .container,
body[data-page="analysis"] #scenarios > .container,
body[data-page="analysis"] #division > .container {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="analysis"] section[aria-label="Scenario details"] {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border: 0;
  background: #fff;
}

body[data-page="analysis"] .scenario-article {
  margin-bottom: 0;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="analysis"] .scenario-article:last-child {
  border-bottom: 1px solid var(--line);
}

body[data-page="analysis"] .scenario-article .boundary-box {
  border-color: #dde8f7;
  background: #f4f8ff;
}

/* Install: one continuous document, with rules between steps. */
body[data-page="install"] main > .section {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  background: #f7faff;
  border-block: 1px solid #e7eef8;
}

body[data-page="install"] .install-content {
  display: block;
}

body[data-page="install"] .install-section {
  padding: clamp(2rem, 3.6vw, 3rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="install"] .install-section:last-child {
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  body[data-page="analysis"] .page-hero,
  body[data-page="tools"] .page-hero,
  body[data-page="install"] .page-hero {
    padding: 2.4rem 0;
  }

  body[data-page="analysis"] .page-hero__aside,
  body[data-page="tools"] .page-hero__aside,
  body[data-page="install"] .page-hero__aside {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="analysis"] #entry,
  body[data-page="analysis"] #device,
  body[data-page="analysis"] #pipeline,
  body[data-page="analysis"] #scenarios,
  body[data-page="analysis"] #division,
  body[data-page="analysis"] section[aria-label="Scenario details"],
  body[data-page="tools"] main > .section,
  body[data-page="install"] main > .section {
    padding-block: 2rem;
  }

  body[data-page="install"] .install-section,
  body[data-page="analysis"] .scenario-article {
    padding-block: 2rem;
  }
}

/* Keep the tools hero explainer beside the title, then stack it cleanly. */
body[data-page="analysis"] .page-hero__body,
body[data-page="tools"] .page-hero__body,
body[data-page="install"] .page-hero__body {
  align-items: start;
}

body[data-page="analysis"] .page-hero__aside,
body[data-page="tools"] .page-hero__aside,
body[data-page="install"] .page-hero__aside {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 960px) {
  body[data-page="analysis"] .page-hero__aside,
  body[data-page="tools"] .page-hero__aside,
  body[data-page="install"] .page-hero__aside {
    max-width: 42rem;
    margin-top: 1.2rem;
  }
}