@charset "UTF-8";
/*==============================================================
  NeuraMSP — practice layer
  ---------------------------------------------------------------
  Loaded only by /msp/ pages, on top of neura.css. It adds the
  components the group system does not have and changes nothing
  the other practices rely on.

  Everything inherits the group tokens; the practice signal comes
  from [data-theme="msp"] already defined in neura.css.

  Sections:
    01 shared bits (tags, figures, notes)
    02 service stack
    03 fork — who operates it
    04 company brain diagram
    05 capability cards (Ask / Draft / Analyse / Guide / Act)
    06 assurance band
    07 technology independence
    08 journey
    09 outcomes & plain lists
    10 FAQ
    11 reduced motion
==============================================================*/

/*--------------------------------------------------------------
  01 · Shared bits
--------------------------------------------------------------*/
/* Small label used for "Flagship", "Included", "Layer 3" and similar. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.tag--signal {
  color: #04120e;
  background: var(--accent);
  border-color: var(--accent);
}

.tag--outline {
  color: var(--accent-bright);
  border-color: color-mix(in srgb, var(--accent), transparent 55%);
}

/* Two-column editorial split: copy on one side, a figure on the other. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split--copy-led {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.split__copy .section-head {
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .split,
  .split--copy-led {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Diagrams: a framed figure with a real caption. Every diagram on the
   practice reads top to bottom in the DOM, so the caption explains the
   relationship rather than restating the labels. */
.figure {
  margin: 0;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.figure figcaption {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* A short caveat under a block: "examples depend on…", "agreed per customer". */
.footnote {
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--text-soft);
  max-width: 68ch;
}

.section-head--wide {
  max-width: 46rem;
}

.section-head--centre {
  margin-inline: auto;
  text-align: center;
}

.section-head--centre .eyebrow {
  justify-content: center;
}

.section-head--centre p {
  margin-inline: auto;
}

/*--------------------------------------------------------------
  02 · Service stack
  ---------------------------------------------------------------
  Five layers, foundation first. A rail runs up the left edge and
  warms to the practice signal at the flagship layer, so the eye
  finds Managed Company Jarvis without the other layers being
  demoted to filler.
--------------------------------------------------------------*/
.stack {
  position: relative;
  display: grid;
  gap: 14px;
  list-style: none;
  padding-left: 34px;
}

/* The rail. Neutral at the foundation, signal at the flagship. */
.stack::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--border-strong) 0%,
    var(--accent) 42%,
    var(--border-strong) 100%
  );
  opacity: 0.7;
}

.stack__item {
  position: relative;
  min-width: 0;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.stack__item::before {
  content: "";
  position: absolute;
  top: 32px;
  left: -34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-soft);
  box-shadow: 0 0 0 5px var(--bg);
}

.stack__item:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.stack__item[data-flagship] {
  padding: 32px;
  border-color: color-mix(in srgb, var(--accent), transparent 58%);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent), transparent 94%),
      transparent 60%
    ),
    var(--surface-2);
}

.stack__item[data-flagship]::before {
  width: 14px;
  height: 14px;
  top: 36px;
  left: -36px;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--bg), 0 0 22px color-mix(in srgb, var(--accent), transparent 45%);
}

.stack__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.stack__layer {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.stack__item h3 {
  margin: 0;
  width: 100%;
}

.stack__item[data-flagship] h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}

.stack__item p {
  font-size: 0.97rem;
  margin-bottom: 0;
  max-width: 64ch;
}

.stack__item .chips {
  margin: 18px 0 0;
}

.stack__item .link-arrow {
  margin-top: 20px;
  color: var(--accent-bright);
}

.stack__item .link-arrow:hover {
  color: var(--text);
}

@media (max-width: 560px) {
  .stack {
    padding-left: 26px;
  }

  .stack__item {
    padding: 22px 20px;
  }

  .stack__item[data-flagship] {
    padding: 26px 20px;
  }

  .stack__item::before {
    left: -26px;
  }

  .stack__item[data-flagship]::before {
    left: -28px;
  }
}

/*--------------------------------------------------------------
  03 · Fork — who operates it after launch
  ---------------------------------------------------------------
  The single most important idea on the practice: one Company
  Jarvis, two operating models. Built from real headings and
  paragraphs so it reads correctly without the drawing.
--------------------------------------------------------------*/
.fork {
  display: grid;
  gap: 0;
}

.fork__source {
  padding: 30px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.fork__source h3 {
  margin-bottom: 10px;
}

.fork__source p {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 0.96rem;
}

/* The connector: one line down, then a bar across to two arms. */
.fork__link {
  position: relative;
  height: 56px;
}

.fork__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 28px;
  background: var(--border-strong);
}

.fork__link::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 25%;
  right: 25%;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.fork__arms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

.fork__arm {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fork__arm h3 {
  margin: 14px 0 12px;
}

.fork__arm p {
  font-size: 0.96rem;
}

.fork__arm ul {
  list-style: none;
  margin-top: 6px;
  display: grid;
  gap: 9px;
  font-size: 0.93rem;
  color: var(--text-muted);
}

.fork__arm li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
}

.fork__arm li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--text-soft);
}

.fork__arm[data-managed] {
  border-color: color-mix(in srgb, var(--accent), transparent 55%);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent), transparent 93%),
      transparent 55%
    ),
    var(--surface-2);
}

.fork__arm[data-managed] li::before {
  background: var(--accent);
}

.fork__arm .link-arrow {
  margin-top: auto;
  padding-top: 24px;
  color: var(--accent-bright);
}

@media (max-width: 720px) {
  .fork__arms {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the bar would point at nothing: use a plain vertical line. */
  .fork__link {
    height: 40px;
  }

  .fork__link::after {
    display: none;
  }

  .fork__link::before {
    height: 40px;
  }
}

/*--------------------------------------------------------------
  04 · Company Brain diagram
  ---------------------------------------------------------------
  Real text in real bands rather than an SVG, so it reflows, is
  selectable and is read in order by a screen reader. The arrows
  are decorative and carry a plain-language label beside them.
--------------------------------------------------------------*/
.brain {
  display: grid;
  gap: 0;
  list-style: none;
  /* Capped so the bands keep a plate-like proportion in a full-width
     figure as well as in a half-width column. */
  max-width: 620px;
  margin-inline: auto;
}

.brain__band {
  position: relative;
  padding: 20px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.brain__band h3,
.brain__band h4 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brain__band p {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* The two bands the story hangs on. */
.brain__band[data-key] {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
}

.brain__band[data-key] h3 {
  font-size: 1.12rem;
  color: var(--text);
}

.brain__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
}

.brain__step::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--border-strong);
}

.brain__step::after {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--border-strong);
}

.brain__step:empty {
  padding: 8px 0;
}

/* The three source groups sit side by side under the brain. */
.brain__sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}

.brain__sources li {
  min-width: 0;
  padding: 14px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .brain__sources {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Managed variant: the operating ring NeuraMSP adds around the whole thing. */
.brain-managed {
  position: relative;
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 2.6vw, 32px) clamp(18px, 2.6vw, 30px);
  border: 1px dashed color-mix(in srgb, var(--accent), transparent 55%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent), transparent 96%);
}

.brain-managed__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 45%);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  white-space: nowrap;
}

.brain-managed__ring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed color-mix(in srgb, var(--accent), transparent 65%);
  list-style: none;
}

.brain-managed__ring li {
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

@media (max-width: 420px) {
  .brain-managed__label {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 18px;
  }

  .brain-managed {
    padding-top: 20px;
  }
}

/*--------------------------------------------------------------
  05 · Capability cards — Ask / Draft / Analyse / Guide / Act
--------------------------------------------------------------*/
.capabilities {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.capability {
  min-width: 0;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.capability:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
  background: var(--surface-2);
}

.capability h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  font-size: 1.16rem;
}

.capability h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}

.capability p {
  font-size: 0.94rem;
  margin: 0;
}

/* Act is the one that needs a caveat rather than a claim. */
.capability__caveat {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-soft);
}

/*--------------------------------------------------------------
  06 · Assurance band
  ---------------------------------------------------------------
  Written as the questions a deployment has to answer, not as a
  control matrix. Each item is a question and a plain answer.
--------------------------------------------------------------*/
.assurance {
  position: relative;
  background: var(--bg-raised);
  border-block: 1px solid var(--border);
  overflow: hidden;
}

.assurance::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
}

.assure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
}

.assure-grid li {
  min-width: 0;
  padding: 24px 22px;
  background: var(--bg-raised);
}

.assure-grid h3 {
  margin-bottom: 9px;
  font-size: 1rem;
  color: var(--text);
}

.assure-grid p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.6;
}

/* Core vs Scaled — proportionality, stated as a pair not a ladder. */
.depth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(32px, 4vw, 48px);
}

.depth > div {
  min-width: 0;
  padding: 26px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
}

.depth h3 {
  margin-bottom: 10px;
  font-size: 1.08rem;
}

.depth p {
  margin: 0;
  font-size: 0.94rem;
}

@media (max-width: 700px) {
  .depth {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*--------------------------------------------------------------
  07 · Technology independence
  ---------------------------------------------------------------
  Several delivery recipes, one front door. No vendor logos and
  no internal framework names — the point is the proposition.
--------------------------------------------------------------*/
.recipes {
  --rgap: clamp(16px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.95fr);
  gap: var(--rgap);
  align-items: center;
}

.recipes__paths {
  display: grid;
  gap: 10px;
  list-style: none;
}

.recipes__paths li {
  padding: 15px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* The join: four short lines gathering into one. Decorative only. */
.recipes__join {
  position: relative;
  width: 44px;
  align-self: stretch;
}

/* The bracket and the run-out both reach into the grid gap, so the line
   meets the pills on one side and the door on the other. */
.recipes__join::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: calc(-1 * var(--rgap));
  width: calc(22px + var(--rgap));
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.recipes__join::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 22px;
  right: calc(-1 * var(--rgap));
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.recipes__door {
  padding: 30px 28px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 55%);
  border-radius: var(--radius);
  text-align: center;
}

.recipes__door h3 {
  margin-bottom: 10px;
}

.recipes__door p {
  margin: 0;
  font-size: 0.93rem;
}

@media (max-width: 780px) {
  .recipes {
    grid-template-columns: minmax(0, 1fr);
  }

  .recipes__join {
    width: auto;
    height: 34px;
    justify-self: center;
  }

  .recipes__join::before {
    top: 0;
    bottom: auto;
    left: 50%;
    width: 1px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: var(--accent);
    opacity: 0.7;
  }

  .recipes__join::after {
    display: none;
  }
}

/*--------------------------------------------------------------
  08 · Journey — Understand → Operate & Improve
--------------------------------------------------------------*/
.journey {
  position: relative;
  display: grid;
  gap: 0;
  list-style: none;
  padding-left: 0;
}

.journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 40px);
  padding: 30px 0 34px;
  border-top: 1px solid var(--border);
}

.journey__step:last-child {
  border-bottom: 1px solid var(--border);
}

.journey__num {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  padding-top: 0.35em;
}

.journey__step[data-key] .journey__num {
  color: var(--accent-bright);
}

.journey__body h3 {
  margin-bottom: 12px;
}

.journey__body p {
  max-width: 62ch;
  font-size: 0.98rem;
}

/* The annotation on Activate and Operate: where Jarvis enters the story. */
.journey__mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.91rem;
  color: var(--text-muted);
}

.journey__mark p {
  margin: 0;
  font-size: 0.91rem;
  max-width: 58ch;
}

@media (max-width: 560px) {
  .journey__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .journey__num {
    padding-top: 0;
  }
}

/*--------------------------------------------------------------
  09 · Outcomes & plain lists
--------------------------------------------------------------*/
.outcomes {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.outcome {
  min-width: 0;
  padding: 26px 0 0;
  border-top: 2px solid var(--border-strong);
}

.outcome h3 {
  margin-bottom: 11px;
  font-size: 1.1rem;
}

.outcome p {
  margin: 0;
  font-size: 0.95rem;
}

/* A checked list where the marker means "included", used sparingly. */
.ticks {
  display: grid;
  gap: 13px;
  list-style: none;
}

.ticks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 0.97rem;
  color: var(--text-muted);
}

.ticks svg {
  margin-top: 0.28em;
  color: var(--accent);
  flex: 0 0 auto;
}

/* Two-column list of short capability signals. */
.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  list-style: none;
}

.signals-grid li {
  min-width: 0;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  color: var(--text-muted);
}

/* Use-case quotes — the Monday-morning questions. */
/* Sized so the four use cases fill whole rows at every breakpoint:
   four across on desktop, two on tablet, one on mobile. */
.uses {
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}

.use {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.use h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}

.use blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

/*--------------------------------------------------------------
  10 · FAQ
  ---------------------------------------------------------------
  Native <details>, so keyboard, screen-reader and find-in-page
  behaviour comes free.
--------------------------------------------------------------*/
.faq {
  display: grid;
  gap: 10px;
  max-width: 62rem;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease);
}

.faq__item[open] {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 0.42em;
  margin-left: auto;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.24s var(--ease);
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.faq__item summary:hover {
  color: var(--accent-bright);
}

.faq__answer {
  padding: 0 24px 24px;
  max-width: 76ch;
}

.faq__answer p {
  font-size: 0.97rem;
}

.faq__answer p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
  11 · Reduced motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after {
    transition: none;
  }

  .stack__item:hover,
  .capability:hover {
    transform: none;
  }
}