/**
 * Homepage sections.
 * Geometry taken from the approved design. Colour, type and spacing come from
 * tokens.css; nothing here should introduce a new raw value.
 */

/* ---- Shared section patterns --------------------------------------------- */

.pa-split-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: end;
}
.pa-split-head__body {
  margin: 0;
  max-width: 480px;
  padding-bottom: 6px;
  color: var(--pa-text-muted);
  font-size: var(--pa-body);
  line-height: var(--pa-leading-body);
}
.pa-split-head__body strong { color: var(--pa-text); font-weight: 700; }

.pa-prompt {
  margin-top: clamp(30px, 3.2vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--pa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pa-prompt__text { margin: 0; max-width: 520px; color: var(--pa-text-muted); font-size: 16px; line-height: 1.65; }
.pa-prompt__text strong { color: var(--pa-text); font-weight: 700; }

.pa-dot-mark {
  flex: 0 0 auto;
  margin-top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pa-purple);
  display: inline-block;
}
.pa-dot-mark--ink { background: var(--pa-text); }

/* ---- 01 The problem ------------------------------------------------------- */

.pa-problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  align-items: stretch;
  gap: clamp(56px, 7vw, 120px);
}
.pa-problem__title { max-width: 15ch; margin-top: 28px; }
.pa-problem__title span { display: block; }
.pa-problem__title-quiet { color: var(--pa-text-quiet); }

.pa-problem__body {
  max-width: 520px;
  margin: 34px 0 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-body-lg);
  line-height: var(--pa-leading-body);
}
.pa-problem__quote {
  max-width: 540px;
  margin: 44px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--pa-border);
}
.pa-problem__quote p {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: var(--pa-tracking-snug);
}

/* Timeline: governance arriving after the work */
.pa-timeline {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.6vw, 50px);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-ink);
  color: var(--pa-text-on-dark);
}
.pa-timeline__label {
  margin: 0;
  color: var(--pa-text-on-dark-soft);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pa-timeline__list { margin: 34px 0 0; padding: 0; list-style: none; }

.pa-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  padding-bottom: 26px;
}
.pa-timeline__marker {
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pa-text-on-dark-soft);
}
.pa-timeline__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: -6px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.pa-timeline__item:last-child::before { display: none; }
.pa-timeline__index {
  position: absolute;
  left: 26px;
  top: 3px;
  color: var(--pa-text-on-dark-soft);
  font-family: var(--pa-font);
  font-size: 12px;
  font-weight: 700;
}
.pa-timeline__body { grid-column: 2; }
.pa-timeline__body strong {
  display: block;
  color: #fff;
  font-family: var(--pa-font);
  font-size: var(--pa-body);
  font-weight: 600;
  letter-spacing: var(--pa-tracking-body);
}
.pa-timeline__note { margin-top: 10px; display: block; color: var(--pa-attention-soft); font-size: var(--pa-body-sm); line-height: 1.6; }

.pa-timeline__item.is-alert .pa-timeline__marker { border-color: var(--pa-attention); }
.pa-timeline__item.is-alert .pa-timeline__index,
.pa-timeline__item.is-alert .pa-timeline__body strong { color: var(--pa-attention); }

.pa-timeline__return { margin: 6px 0 0 46px; display: flex; align-items: baseline; gap: 12px; }
.pa-timeline__dash { flex: 0 0 auto; width: 22px; border-top: 2px dashed rgba(232, 168, 124, 0.65); }
.pa-timeline__return span:last-child {
  color: var(--pa-attention);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
}
.pa-timeline__foot {
  margin: auto 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--pa-text-on-dark-faint);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

/* ---- 02 The missing layer ------------------------------------------------- */

/* Warm bands are closed top and bottom; the last one only opens. Section
   heights are per-section in the design, so --lg is a starting point, not the
   final word for approach and the final CTA. */
.pa-missing { border-top: 1px solid var(--pa-border); border-bottom: 1px solid var(--pa-border); }
.pa-platform { border-top: 1px solid var(--pa-border); border-bottom: 1px solid var(--pa-border); }
.pa-direction { border-top: 1px solid var(--pa-border); }
.pa-approach { padding-block: clamp(72px, 10vw, 148px); }
.pa-final { padding-block: clamp(72px, 10vw, 144px); }
.pa-missing__title { max-width: 17ch; }

.pa-steps-panel {
  margin-top: clamp(48px, 5vw, 72px);
  border-radius: var(--pa-radius-lg);
  overflow: hidden;
  background: var(--pa-ink);
}
.pa-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr));
  gap: 1px;
}
.pa-step {
  min-height: 250px;
  padding: clamp(28px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  background: var(--pa-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11);
}
.pa-step--missing { background: var(--pa-purple); }

.pa-step__tag {
  display: block;
  color: var(--pa-text-on-dark-soft);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pa-step__pill {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: var(--pa-radius-pill);
  background: #fff;
  color: var(--pa-purple);
  font-family: var(--pa-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pa-step__title {
  display: flex;
  align-items: flex-end;
  min-height: 2.28em;
  color: #fff;
  font-family: var(--pa-font);
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.018em;
}
.pa-step__body { margin: 12px 0 0; min-height: 3.4em; color: var(--pa-text-on-dark-faint); font-size: var(--pa-body-sm); line-height: 1.7; }
.pa-step--missing .pa-step__body { color: var(--pa-purple-pale); }

.pa-steps-panel__foot {
  margin: 0;
  padding: 26px clamp(28px, 2.8vw, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--pa-text-on-dark-faint);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

/* ---- 03 A different approach ---------------------------------------------- */

.pa-approach__head { max-width: 900px; margin: 0 auto; text-align: center; }
.pa-approach__title { max-width: 16ch; margin: 28px auto 0; color: #fff; }
.pa-approach__body {
  max-width: 600px;
  margin: 30px auto 0;
  color: var(--pa-text-on-dark-muted);
  font-size: var(--pa-body-lg);
  line-height: 1.7;
}
.pa-approach__pivot {
  max-width: 22ch;
  margin: clamp(64px, 7vw, 104px) auto 0;
  color: #fff;
  text-align: center;
}

/* The two halves meet on the purple rule, with no card around them. The border
   and fills below 860px are the mobile treatment only, and live in that query. */
.pa-compare {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0;
}
.pa-compare__a { text-align: right; padding: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 64px) clamp(28px, 3vw, 44px) 0; }
.pa-compare__b {
  position: relative;
  text-align: left;
  padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 44px) clamp(24px, 4vw, 64px);
  border-left: 3px solid var(--pa-purple);
}

/* Sits centred on the purple rule, so it reads as the pivot between the pair. */
.pa-compare__badge {
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: -1.5px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pa-purple);
  color: #fff;
  font-size: var(--pa-micro);
  letter-spacing: 0.08em;
}

.pa-compare__tag { margin: 0; color: var(--pa-text-on-dark-soft); font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 700; letter-spacing: var(--pa-tracking-body); }
.pa-compare__tag--on { color: var(--pa-purple-on-dark); }
.pa-compare__title { max-width: 15ch; margin: 22px 0 0; margin-left: auto; color: #7A8290; }
.pa-compare__b .pa-compare__title { margin-left: 0; margin-right: auto; color: #fff; }
.pa-compare__body { max-width: 440px; margin: 22px 0 0; margin-left: auto; color: var(--pa-text-on-dark-soft); font-size: 16px; line-height: 1.85; }
.pa-compare__b .pa-compare__body { margin-left: 0; margin-right: auto; color: var(--pa-text-on-dark-faint); }
.pa-compare__note { max-width: 440px; margin: 30px 0 0; margin-left: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); color: var(--pa-text-on-dark-soft); font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 600; line-height: 1.7; }
.pa-compare__b .pa-compare__note { margin-left: 0; margin-right: auto; color: var(--pa-purple-on-dark); }

/* Triad: Govern, Insight, Feedback */
/* Seams are drawn the same way as the steps panel: a dark ground showing
   through a 1px grid gap, with each card carrying its own hairline ring. */
.pa-triad-wrap {
  margin-top: clamp(56px, 6vw, 88px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--pa-radius);
  overflow: hidden;
  background: var(--pa-ink);
}
.pa-triad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: 1px;
  background: var(--pa-ink);
}
.pa-tri {
  min-height: 250px;
  padding: clamp(30px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  background: var(--pa-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11);
  transition: background-color var(--pa-dur) var(--pa-ease);
}
.pa-tri:hover { background: var(--pa-ink-raise); }
.pa-tri__head { display: flex; align-items: center; justify-content: space-between; }
.pa-tri__index { color: var(--pa-purple-on-dark); font-family: var(--pa-font); font-size: var(--pa-micro); font-weight: 700; letter-spacing: 0.1em; }
.pa-tri__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pa-purple-on-dark); }
.pa-tri__title {
  display: flex;
  align-items: flex-end;
  min-height: 1.1em;
  color: #fff;
  font-family: var(--pa-font);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.pa-tri__body { max-width: 300px; margin: 16px 0 0; min-height: 5.4em; color: var(--pa-text-on-dark-muted); font-size: var(--pa-body-sm); line-height: 1.7; }

.pa-triad__foot {
  margin: 0;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--pa-purple-on-dark);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 600;
}
.pa-triad__cycle { font-size: 17px; line-height: 1; }

/* ---- 04 One platform ------------------------------------------------------ */

.pa-platform__title { max-width: 14ch; }

.pa-caps {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: 16px;
}
.pa-cap {
  min-height: 230px;
  position: relative;
  overflow: hidden;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pa-border-quiet);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
  transition:
    transform 0.45s var(--pa-ease),
    box-shadow 0.45s var(--pa-ease),
    border-color 0.45s var(--pa-ease);
}
.pa-cap:hover { transform: translateY(-4px); border-color: var(--pa-border-strong); box-shadow: 0 18px 40px rgba(18, 20, 28, 0.08); }

/* The shipped capability is the only one that gets the dark, solid treatment. */
.pa-cap--release {
  border-color: transparent;
  background: var(--pa-ink);
  color: var(--pa-text-on-dark);
  box-shadow: 0 18px 40px rgba(18, 20, 28, 0.14);
}
.pa-cap--release:hover { transform: none; box-shadow: 0 18px 40px rgba(18, 20, 28, 0.14); }

/* Platform direction is the quietest of the three. */
.pa-cap--direction:hover { transform: none; box-shadow: none; border-color: var(--pa-border-quiet); }

.pa-cap__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pa-cap__index { color: var(--pa-text-warm); font-family: var(--pa-font); font-size: var(--pa-meta); font-weight: 600; }
.pa-cap--release .pa-cap__index { color: var(--pa-text-on-dark-soft); }

.pa-cap__title {
  margin: auto 0 0;
  padding-top: 44px;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.pa-cap--release .pa-cap__title { color: #fff; }
.pa-cap--direction .pa-cap__title { color: var(--pa-text-soft); }

.pa-cap__body { margin: 12px 0 0; color: var(--pa-text-muted); font-size: var(--pa-meta); line-height: 1.6; }
.pa-cap--release .pa-cap__body { color: var(--pa-text-on-dark-muted); }
.pa-cap--direction .pa-cap__body { color: var(--pa-text-soft); }

/* ---- 05 Worksets ---------------------------------------------------------- */

/* The section ground is light. The split sits on it as a dark inset card, and
   that contrast is the design rather than a decoration. */
.pa-worksets {
  padding-block: clamp(72px, 10vw, 140px) 0;
  background: var(--pa-surface);
}

.pa-worksets__intro { max-width: 860px; }
.pa-worksets__title { max-width: 14ch; margin-top: 28px; color: var(--pa-text); }
.pa-worksets__body { max-width: 620px; margin: 30px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body-lg); line-height: 1.7; }
.pa-worksets__body--strong { margin-top: 18px; color: var(--pa-text); font-family: var(--pa-font); font-weight: 600; }

.pa-worksets__card {
  margin-top: clamp(52px, 6vw, 84px);
  padding: clamp(22px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(min(100%, 320px), 0.75fr);
  align-items: center;
  gap: clamp(40px, 5vw, 76px);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-ink);
  color: var(--pa-text-on-dark);
  box-shadow: 0 30px 70px rgba(18, 20, 28, 0.18);
}

/* Product media frame, with a screenshot floating over its edge. The
   Worksets card is the only place that uses one. */
.pa-shots { position: relative; }

.pa-float {
  position: absolute;
  z-index: 2;
  height: auto;
  border-radius: var(--pa-radius-lg);
  filter:
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
    drop-shadow(0 30px 46px rgba(0, 0, 0, 0.5));
}

@media (max-width: 760px) {
  .pa-float { width: 48%; max-width: none; min-width: 0; border-radius: 5px; }
}

/* Inside the card the media frame is quiet: a hairline, no shadow. */
.pa-worksets__card .pa-shots {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--pa-radius);
  background: var(--pa-ink-deep);
}


.pa-worksets__label { margin: 0; color: var(--pa-purple-on-dark); font-family: var(--pa-font); font-size: var(--pa-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pa-worksets__lead { max-width: 16ch; margin: 22px 0 0; color: #fff; }
.pa-worksets__copy { max-width: 460px; margin: 24px 0 0; color: var(--pa-text-on-dark-muted); font-size: var(--pa-body); line-height: 1.75; }
.pa-worksets__try { margin: 30px 0 0; color: #fff; font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 600; }
.pa-worksets__cta { margin-top: 20px; }
.pa-dot { padding: 0 6px; color: #5C6472; }

/* Video poster in the approved product media position */
.pa-shots--poster { padding: 20px; }
.pa-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--pa-radius-sm);
}
.pa-poster__img { width: 100%; display: block; border-radius: var(--pa-radius-sm); }
.pa-poster__scrim {
  position: absolute;
  inset: 0;
  border-radius: var(--pa-radius-sm);
  background: linear-gradient(180deg, rgba(6, 7, 11, 0) 45%, rgba(6, 7, 11, 0.72) 100%);
  transition: background var(--pa-dur) var(--pa-ease);
}
.pa-poster:hover .pa-poster__scrim { background: linear-gradient(180deg, rgba(6,7,11,0.08) 40%, rgba(6,7,11,0.8) 100%); }
.pa-poster__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pa-poster__play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--pa-dur) var(--pa-ease);
}
.pa-poster:hover .pa-poster__play { background: var(--pa-purple); border-color: var(--pa-purple); }
.pa-poster__triangle {
  display: block;
  width: 0; height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
}
.pa-poster__label {
  display: block;
  text-align: left;
  color: #fff;
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 600;
}
.pa-poster__runtime { margin-left: 8px; color: var(--pa-text-on-dark-soft); font-weight: 400; }
.pa-float--activity { width: 47%; right: -4%; bottom: -8%; }

/* Discord prompt: compact, below a hairline, never a button */
.pa-discord-prompt { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pa-discord-prompt__title { margin: 0; color: #fff; font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 600; }
.pa-discord-prompt__body { max-width: 400px; margin: 8px 0 0; color: var(--pa-text-on-dark-muted); font-size: var(--pa-meta); line-height: 1.65; }
.pa-discord-prompt__link { margin-top: 14px; }

/* ---- 5.1 Capabilities ----------------------------------------------------- */

.pa-rule-head { display: flex; align-items: center; gap: 20px; }
.pa-rule-head__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-body);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
  white-space: nowrap;
}
.pa-rule-head__line { flex: 1 1 auto; height: 1px; background: var(--pa-border); }

.pa-cap-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  /* Rhythm comes from the block's own padding, not a margin between blocks.
     That is what gives 5.1 its generous vertical spacing. */
  padding-block: clamp(40px, 6vw, 84px);
}
.pa-cap-block__intro { max-width: 460px; }
.pa-cap-block__label {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--pa-purple);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pa-cap-block__label--ink { color: var(--pa-text); }
.pa-cap-block__intro h4 { margin: 20px 0 0; }
.pa-cap-block__body { margin: 20px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body); line-height: 1.7; }
.pa-cap-block__foot { margin: 22px 0 0; color: var(--pa-text); font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 600; }

.pa-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
/* The card is the warm band on the light ground, not the ground repeated. */
.pa-pc {
  padding: var(--pa-card-pad);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pa-border-quiet);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-alt);
}
.pa-pc--on { border-color: transparent; background: var(--pa-purple); color: #fff; }
.pa-pc--tall { min-height: 210px; }

.pa-pc__key { margin: 0; color: var(--pa-purple); font-family: var(--pa-font); font-size: var(--pa-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pa-pc__key--on { color: #fff; }
.pa-pc__index { color: var(--pa-text-warm); font-family: var(--pa-font); font-size: var(--pa-micro); font-weight: 700; letter-spacing: 0.1em; }
.pa-pc__index--on { color: #fff; }
.pa-pc__tags { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.pa-pc__title {
  margin: 16px 0 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.pa-pc--tall .pa-pc__title { margin: auto 0 0; padding-top: 36px; }
.pa-pc__title--on { color: #fff; }
.pa-pc__title--block { margin-top: 18px; display: block; }
.pa-pc__note { margin: 14px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body-sm); line-height: 1.65; }
.pa-pc__note--on { color: var(--pa-purple-pale); }

.pa-states { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.pa-state {
  min-height: 150px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
}
.pa-state__when { color: var(--pa-text-soft); font-size: var(--pa-meta); line-height: 1.55; }
.pa-state__then {
  margin: auto 0 0;
  padding-top: 28px;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-body);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
}
.pa-state.is-alert .pa-state__when { color: var(--pa-error-alt); }
.pa-state.is-alert .pa-state__then { color: var(--pa-error); }

.pa-exceptions { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pa-border); }
.pa-exceptions__title { margin: 0; color: var(--pa-text); font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 700; }
.pa-exceptions__body { margin: 12px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body-sm); line-height: 1.65; }
.pa-exceptions__tags { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pa-exceptions__foot { margin: 18px 0 0; color: var(--pa-text); font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 600; }

.pa-checks { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pa-checks li { display: flex; align-items: baseline; gap: 9px; color: var(--pa-text-muted); font-size: var(--pa-body-sm); }
.pa-checks__tick { color: var(--pa-purple); font-family: var(--pa-font); font-weight: 700; }

/* ---- 06 Why Proactive ----------------------------------------------------- */

.pa-why__split {
  display: grid;
  grid-template-columns: minmax(min(100%, 270px), 0.7fr) minmax(0, 1.3fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.pa-why__title { max-width: 12ch; }
.pa-why__body { max-width: 400px; margin: 26px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body); line-height: 1.7; }

.pa-benefits { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.pa-benefit { padding: 26px 0 28px; border-top: 1px solid var(--pa-border); }
.pa-benefit__title { color: var(--pa-text); font-family: var(--pa-font); font-size: var(--pa-body); font-weight: 700; letter-spacing: var(--pa-tracking-body); }
.pa-benefit__body { margin: 12px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body-sm); line-height: 1.65; }

.pa-benefits__prompt {
  grid-column: 1 / -1;
  padding: 26px 0 0;
  border-top: 1px solid var(--pa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---- 07 The bigger direction ---------------------------------------------- */

.pa-direction__title { max-width: 14ch; }

/* The rail sits directly on the warm section ground — no card of its own.
   Each item's line is a half-segment (transparent toward the open end), so
   the connector runs dot-to-dot rather than past the first and last items. */
.pa-rail {
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 32px);
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
}
.pa-rail__item {
  flex: 0 0 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pa-rail__index { color: var(--pa-text-warm); font-family: var(--pa-font); font-size: var(--pa-micro); font-weight: 700; letter-spacing: 0.1em; }
.pa-rail__item.is-first .pa-rail__index { color: var(--pa-purple); }

.pa-rail__line {
  position: relative;
  width: 100%;
  height: 2px;
  margin: 16px 0 0;
  background: linear-gradient(to right, var(--pa-border-strong) 50%, var(--pa-border-strong) 50%);
}
.pa-rail__item:first-child .pa-rail__line { background: linear-gradient(to right, transparent 50%, var(--pa-border-strong) 50%); }
.pa-rail__item:last-child .pa-rail__line { background: linear-gradient(to right, var(--pa-border-strong) 50%, transparent 50%); }
.pa-rail__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pa-surface-alt);
  border: 2px solid var(--pa-border-strong);
  box-shadow: 0 0 0 5px var(--pa-surface-alt);
}
.pa-rail__item.is-first .pa-rail__dot {
  width: 18px;
  height: 18px;
  background: var(--pa-purple);
  border: none;
  box-shadow: 0 0 0 5px var(--pa-surface-alt), 0 0 0 7px rgba(91, 75, 214, 0.28);
}

.pa-rail__title {
  margin-top: 26px;
  max-width: 150px;
  color: #3B4048;
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 600;
  line-height: 1.4;
}
.pa-rail__item.is-first .pa-rail__title { color: var(--pa-text); }
.pa-rail__status {
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-purple);
  color: #fff;
  font-family: var(--pa-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pa-direction__foot {
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: 30px;
  border-top: 1px solid var(--pa-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px clamp(40px, 6vw, 88px);
  align-items: end;
}
.pa-direction__statement { margin: 0; max-width: 540px; color: var(--pa-text); font-family: var(--pa-font); font-size: var(--pa-body); font-weight: 600; line-height: 1.6; }
.pa-direction__ask { max-width: 440px; }
.pa-direction__ask-title { margin: 0; color: var(--pa-text); font-family: var(--pa-font); font-size: var(--pa-body-sm); font-weight: 700; }
.pa-direction__ask-body { margin: 10px 0 0; color: var(--pa-text-muted); font-size: var(--pa-body-sm); line-height: 1.65; }
.pa-direction__ask .pa-link-quiet { margin-top: 20px; }

/* ---- Final CTA ------------------------------------------------------------ */

.pa-final__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(48px, 6vw, 96px);
  align-items: end;
}
.pa-final__badge-wrap { margin: 0; }
.pa-final__badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border-radius: var(--pa-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
}
.pa-final__title { max-width: 15ch; margin-top: 28px; color: #fff; }
.pa-final__title span { display: block; }
.pa-final__title-accent { color: var(--pa-purple-on-dark); }

.pa-final__actions { padding-bottom: 8px; }
.pa-final__body { margin: 0; max-width: 420px; color: var(--pa-text-on-dark-muted); font-size: var(--pa-body); line-height: 1.7; }
.pa-final__buttons { margin-top: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pa-final__participation {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---- Approved responsive behaviour for sections --------------------------- */

@media (max-width: 1100px) {
  .pa-rail {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: visible;
    padding: clamp(16px, 2vw, 24px) clamp(20px, 2.4vw, 32px);
  }
  .pa-rail__item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    gap: 16px;
    padding: 17px 0;
    border-top: 1px solid var(--pa-border-rail);
  }
  .pa-rail__item:first-child { border-top: none; padding-top: 4px; }
  .pa-rail__line { display: none; }
  .pa-rail__title { margin-top: 0; max-width: none; }
  .pa-rail__status { margin-top: 0; }
}

@media (max-width: 1080px) {
  .pa-pair {
    gap: 1px;
    border: 1px solid var(--pa-border-rule);
    border-radius: var(--pa-radius);
    overflow: hidden;
  }
  .pa-pc {
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--pa-border-rule);
  }
}

@media (max-width: 940px) {
  .pa-worksets__card,
  .pa-why__split,
  .pa-final__split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .pa-steps { grid-template-columns: minmax(0, 1fr); }
  .pa-step { min-height: 0; gap: 14px; }
  .pa-step__title { min-height: 0; }
  .pa-step__body { min-height: 0; }
}

@media (max-width: 860px) {
  .pa-compare {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: clamp(16px, 3vw, 24px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--pa-radius-lg);
  }
  .pa-compare__a,
  .pa-compare__b {
    text-align: left;
    padding: clamp(22px, 3.6vw, 30px);
    border: none;
    border-radius: var(--pa-radius);
  }
  .pa-compare__a { background: rgba(255, 255, 255, 0.04); }
  .pa-compare__b { background: rgba(91, 75, 214, 0.15); }
  .pa-compare__a .pa-compare__title,
  .pa-compare__a .pa-compare__body,
  .pa-compare__a .pa-compare__note { margin-left: 0; }
  .pa-compare__badge {
    left: 50%;
    top: 0;
    margin-left: 0;
    transform: translate(-50%, calc(-50% - 24px)) rotate(90deg);
  }
}

@media (max-width: 820px) {
  .pa-caps {
    gap: 1px;
    border: 1px solid var(--pa-border-rule);
    border-radius: var(--pa-radius-lg);
    overflow: hidden;
  }
  .pa-cap {
    min-height: 0;
    padding: 24px;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--pa-border-rule);
    transform: none;
  }
  .pa-cap:hover { transform: none; box-shadow: 0 0 0 1px var(--pa-border-rule); }
  .pa-cap__title { padding-top: 18px; }
  .pa-triad { grid-template-columns: minmax(0, 1fr); }
  .pa-tri { min-height: 0; gap: 14px; }
  .pa-tri__title { min-height: 0; }
  .pa-tri__body { min-height: 0; }
}

/* 5.1 below desktop. The cards in each block sit in a column whose width
   depends on whether the intro is beside it or above it, so the states and the
   pairs are settled separately.

   Below 1100px the column is all but never wide enough for the four worksharing
   states across, and the tiles wrapped into a tall stack or into three and an
   orphan. A state is a condition and its response, so each one becomes a
   single ruled row with the response on the right, the treatment the facts
   strip already takes below 860px. */
@media (max-width: 1100px) {
  .pa-states {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    overflow: hidden;
  }
  .pa-state {
    min-height: 0;
    padding: 14px 16px;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border: none;
    border-radius: 0;
  }
  .pa-state + .pa-state { border-top: 1px solid var(--pa-border); }
  /* The condition wraps first, so a response such as Hold and retry stays on
     one line wherever the width allows it. */
  .pa-state__when { flex: 1 1 0; }
  .pa-state__then { flex: 0 1 auto; margin: 0; padding-top: 0; text-align: right; }
}

/* A pair belongs side by side while its column holds two 240px cards and the
   1px seam between them. The viewport cannot say when that is, because the
   column narrows when the intro moves beside it, so the column is a container
   and the pair asks it. From 481px the pair is held to two columns, so the 16px
   gap it takes above 1080px cannot tip it into a stack. Narrower, the pair
   comes apart into cards of their own, one above the other, and the two that
   are a sequence, If to Then and Define to Apply, keep their direction with an
   arrow across the gap. A browser without container queries keeps the pairs as
   they were. */
.pa-cap-block__detail { container: pa-cap-detail / inline-size; }

@container pa-cap-detail (width >= 481px) {
  .pa-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container pa-cap-detail (width < 481px) {
  .pa-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .pa-pc {
    border: 1px solid var(--pa-border-quiet);
    border-radius: var(--pa-radius);
    box-shadow: none;
  }
  .pa-pc--on { border-color: transparent; }
  .pa-pc--tall .pa-pc__title { padding-top: 12px; }

  .pa-pair--flow { gap: 28px; }
  .pa-pair--flow > .pa-pc + .pa-pc { position: relative; }
  .pa-pair--flow > .pa-pc + .pa-pc::before {
    content: "\2193";
    content: "\2193" / "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    color: var(--pa-purple);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
  }
}

/* 5.1 on a phone: a tighter rhythm between the blocks and inside them. */
@media (max-width: 640px) {
  .pa-cap-block { gap: 24px; padding-block: 32px; }
}

/* ---- Heading tiers ---------------------------------------------------------
   The approved design varies h2 by narrative weight rather than using one
   size. These four overrides restore that emphasis; every other section h2
   correctly uses the section tier from base.css.                             */

/* Peak: the two turning points in the argument. */
.pa-approach__title,
.pa-worksets__title {
  font-size: var(--pa-h2-peak);
  line-height: 1;
  letter-spacing: -0.028em;
}

/* Statement: the opening problem and the closing ask. */
.pa-problem__title {
  font-size: var(--pa-h2-statement);
  line-height: 1.02;
  letter-spacing: -0.026em;
}
.pa-final__title {
  font-size: var(--pa-h2-final);
  line-height: 1.01;
  letter-spacing: -0.028em;
}

/* The approach pivot sits above the comparison and is larger than a lead h3. */
.pa-approach__pivot {
  font-size: var(--pa-h3-major);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

/* Comparison pair headings are the smallest of the h4 family. */
.pa-compare__title {
  font-size: var(--pa-h4-compare);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Triad titles are a display size in the design, not a card heading. */
.pa-tri__title {
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* 5.1 carries asymmetric padding: it breathes more at the foot than the head. */
.pa-capabilities {
  padding-block: clamp(56px, 7vw, 104px) clamp(60px, 8vw, 116px);
}



/* ---- Pair cards ------------------------------------------------------------
   Measured against the design: the If/Then keys are sentence case at 15px, not
   an uppercase micro label; the titles are a display size; and the notes are
   14px on a 1.75 leading, which is what keeps them to two lines.            */

.pa-pc__key,
.pa-pc__index {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: none;
}
.pa-pc__index { font-size: 14px; }

.pa-pc__title {
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pa-pc--tall .pa-pc__title {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.pa-pc__note {
  font-size: 14px;
  line-height: 1.75;
}

/* The Create Worksets guarantees read as a wrapping row in the design, not a
   stacked list. Stacking them cost the block 36px and changed the rhythm. */
.pa-checks {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 26px;
}

/* Config Manager tag row sits on a tighter gutter than the If/Then tags. */
.pa-cap-block:last-child .pa-pc__tags { gap: 7px; }

/* ---- Label corrections -----------------------------------------------------
   Two systemic errors, both measured against the design:

   1. Several labels are 15px sentence case in the design, not the 13px
      uppercase micro-label I had reached for.
   2. The design's body sets no line-height, so small labels sit at `normal`.
      This build sets 1.65 globally, which silently inflated every label that
      did not declare its own. These declare theirs.                          */

.pa-worksets__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: none;
}

.pa-worksets__copy { font-size: 16px; line-height: 1.8; }

.pa-rail__index {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.pa-rail__title {
  margin-top: 26px;
  max-width: 152px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.pa-rail__status {
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.002em;
}

/* The Worksets card CTA is slightly tighter than the hero's, and its supporting
   line sits 16px below rather than 14px. */
.pa-worksets__card .pa-btn--primary { padding: 14px 22px; }
.pa-worksets__card .pa-supporting { margin-top: 16px; line-height: 1.6; }

.pa-worksets__try {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.pa-discord-prompt__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.008em;
}
.pa-discord-prompt__body { font-size: 14px; line-height: 1.7; }

/* =====================================================================
   07 Next: Coordination

   The only unreleased capability with a section of its own, and the only
   place on the site where red and green appear. Both are confined to the
   schematic: red marks a clearance at risk, green marks it restored. They
   are not status colours for the product and must not escape this block.

   The schematic runs on one 12 second loop. Every element is driven from
   the same duration and the same keyframe percentages, so the duct, the
   dimension callouts, the alert cards and the step labels stay in step
   without any JavaScript coordinating them. Changing the duration in one
   place changes all of it.
   ===================================================================== */

.pa-coord {
  position: relative;
  overflow: hidden;
  padding-block: clamp(88px, 11vw, 168px);
  background: var(--pa-coord-ground);
  background-image:
    radial-gradient(1100px 560px at 20% 4%, rgba(91, 75, 214, 0.26), rgba(91, 75, 214, 0) 70%),
    linear-gradient(180deg, rgba(91, 75, 214, 0.13) 0%, rgba(91, 75, 214, 0.05) 34%, rgba(91, 75, 214, 0.035) 64%, rgba(91, 75, 214, 0.045) 100%);
  color: var(--pa-text-on-dark);
  scroll-margin-top: 96px;
}

.pa-coord__glow {
  position: absolute;
  top: -14%;
  left: 46%;
  width: min(720px, 84vw);
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(142, 134, 228, 0.13), rgba(142, 134, 228, 0));
  pointer-events: none;
}

.pa-coord__inner { position: relative; }

/* ---- The rail ---- */

.pa-coord__rail-title {
  margin: 0;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: clamp(24px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.pa-croad {
  margin: 4px 0 0;
  padding: clamp(30px, 3.4vw, 46px) 0 clamp(34px, 4.2vw, 54px);
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pa-croad::-webkit-scrollbar { display: none; }

.pa-croad__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
}

.pa-croad__lead { display: flex; flex-direction: column; gap: 4px; }

.pa-croad__arrow { flex: 0 0 auto; color: rgba(255, 255, 255, 0.26); font-size: 15px; line-height: 1; }
.pa-croad__item.is-next .pa-croad__arrow { color: rgba(142, 134, 228, 0.95); font-size: 17px; }

.pa-croad__name {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pa-croad__status {
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--pa-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.004em;
  white-space: nowrap;
}

.pa-croad__later {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap;
}

.pa-croad__pill {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 20px;
  border-radius: var(--pa-radius);
  background: var(--pa-purple);
  box-shadow:
    0 0 0 1px rgba(184, 178, 255, 0.45),
    0 14px 34px rgba(91, 75, 214, 0.45),
    0 0 56px 10px rgba(91, 75, 214, 0.2);
}

.pa-croad__pill .pa-croad__name { color: #fff; font-size: 17px; letter-spacing: -0.012em; }
.pa-croad__pill .pa-croad__status { color: rgba(255, 255, 255, 0.82); font-weight: 700; letter-spacing: 0.06em; }

/* The line dropping from the highlighted pill into the section below it.
   It is what makes the rail read as pointing at this section rather than
   merely sitting above it. */
.pa-croad__drop {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: clamp(34px, 4.2vw, 54px);
  background: linear-gradient(rgba(142, 134, 228, 0.9), rgba(142, 134, 228, 0.35));
}

.pa-coord__rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(142, 134, 228, 0.8) 0%,
    rgba(142, 134, 228, 0.34) 30%,
    rgba(255, 255, 255, 0.12) 72%,
    rgba(255, 255, 255, 0.08) 100%);
}

.pa-coord__name {
  margin: clamp(40px, 4.6vw, 62px) 0 0;
  color: var(--pa-purple-on-dark);
  font-family: var(--pa-font);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* ---- Headline and copy ---- */

.pa-coord__title {
  max-width: 20ch;
  margin: 22px 0 0;
  font-family: var(--pa-font);
  font-size: clamp(38px, 6.4vw, 92px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.032em;
  text-wrap: pretty;
}

.pa-coord__title-muted { display: block; color: rgba(255, 255, 255, 0.4); }
.pa-coord__title-bright { display: block; color: var(--pa-text-on-dark); }

.pa-coord__copy {
  margin-top: clamp(32px, 4vw, 54px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: start;
  gap: clamp(28px, 4vw, 80px);
}

.pa-coord__old {
  margin: 0;
  max-width: 420px;
  color: var(--pa-text-on-dark-soft);
  font-size: var(--pa-body);
  line-height: 1.8;
}

.pa-coord__new {
  margin: 0;
  max-width: 560px;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ---- The schematic ---- */

.pa-coord__frame {
  margin-top: clamp(44px, 5vw, 76px);
  border: 1px solid rgba(142, 134, 228, 0.18);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-coord-frame);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.pa-coord__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pa-border-on-dark-soft);
  background: rgba(255, 255, 255, 0.025);
}

.pa-coord__bar--foot {
  border-bottom: 0;
  border-top: 1px solid var(--pa-border-on-dark-soft);
  padding: 15px 18px;
  gap: 12px clamp(20px, 3vw, 44px);
  justify-content: flex-start;
}

.pa-coord__mono {
  color: var(--pa-text-on-dark-soft);
  font-family: var(--pa-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.pa-coord__live { display: inline-flex; align-items: center; gap: 9px; }

.pa-coord__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pa-purple-on-dark);
  animation: paCoordPulse 2.4s ease-in-out infinite;
}

.pa-coord__stage {
  position: relative;
  height: clamp(340px, 38vw, 470px);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
}

.pa-coord__beam {
  position: absolute;
  left: 66%;
  right: 23%;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.13) 0 5px, rgba(255, 255, 255, 0.05) 5px 11px);
  border-inline: 1px solid rgba(255, 255, 255, 0.5);
}

.pa-coord__beam-flange {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.pa-coord__beam-flange--lower {
  top: auto;
  bottom: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.pa-coord__halo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  right: -1px;
  background: var(--pa-coord-risk-wash);
  border-inline: 1px solid var(--pa-coord-risk);
  opacity: 0;
  animation: paCoordHalo var(--pa-coord-loop) linear infinite;
}

.pa-coord__beam-label {
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--pa-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-align: right;
  white-space: nowrap;
}

.pa-coord__run {
  position: absolute;
  left: 6%;
  right: 34%;
  top: 25%;
  height: clamp(40px, 4.4vw, 56px);
  display: flex;
  align-items: center;
}

.pa-coord__duct {
  position: relative;
  width: 46%;
  height: 100%;
  background: rgba(142, 134, 228, 0.15);
  border: 1px solid rgba(142, 134, 228, 0.6);
  animation: paCoordDuct var(--pa-coord-loop) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.pa-coord__duct-centre {
  position: absolute;
  left: 104px;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(142, 134, 228, 0.4);
}

.pa-coord__duct-label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--pa-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* The route the duct takes once it has been rerouted around the beam. */
.pa-coord__elbow {
  position: absolute;
  right: 0;
  top: 100%;
  width: clamp(40px, 4.4vw, 56px);
  height: clamp(60px, 7vw, 104px);
  background: rgba(142, 134, 228, 0.15);
  border: 1px solid rgba(142, 134, 228, 0.6);
  border-top: 0;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  animation: paCoordElbow var(--pa-coord-loop) var(--pa-ease) infinite;
}

.pa-coord__risk {
  position: absolute;
  inset: -1px;
  background: var(--pa-coord-risk-wash);
  border: 1px solid var(--pa-coord-risk);
  opacity: 0;
  animation: paCoordHalo var(--pa-coord-loop) linear infinite;
}

.pa-coord__gap { position: relative; flex: 1; height: 100%; }

.pa-coord__gap-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.pa-coord__gap-tick {
  position: absolute;
  left: 0;
  top: calc(50% - 7px);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.4);
}

.pa-coord__gap-tick--end { left: auto; right: 0; }

.pa-coord__dim {
  position: absolute;
  left: 50%;
  top: calc(50% - 34px);
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--pa-mono);
  font-size: var(--pa-meta);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
}

.pa-coord__dim--1 { animation: paCoordDim1 var(--pa-coord-loop) linear infinite; }
.pa-coord__dim--2 { animation: paCoordDim2 var(--pa-coord-loop) linear infinite; }
.pa-coord__dim--3 { color: var(--pa-coord-risk); font-weight: 700; animation: paCoordDim3 var(--pa-coord-loop) linear infinite; }
.pa-coord__dim--4 { color: var(--pa-coord-ok); font-weight: 700; animation: paCoordDim4 var(--pa-coord-loop) linear infinite; }

.pa-coord__cards {
  position: absolute;
  left: clamp(16px, 3%, 40px);
  bottom: clamp(20px, 3vw, 34px);
  width: min(400px, 78%);
}

.pa-coord__card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 18px 20px;
  border-radius: var(--pa-radius);
  opacity: 0;
}

.pa-coord__card--alert {
  border: 1px solid rgba(255, 90, 60, 0.55);
  background: var(--pa-coord-risk-ground);
  animation: paCoordAlert var(--pa-coord-loop) var(--pa-ease) infinite;
}

.pa-coord__card--ok {
  border: 1px solid rgba(79, 190, 143, 0.45);
  background: var(--pa-coord-ok-ground);
  animation: paCoordOk var(--pa-coord-loop) var(--pa-ease) infinite;
}

.pa-coord__card-head { margin: 0; display: flex; align-items: center; gap: 10px; }

.pa-coord__card-head strong {
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: -0.008em;
  white-space: nowrap;
}

.pa-coord__card-dot { width: 8px; height: 8px; border-radius: 50%; }

.pa-coord__card--alert .pa-coord__card-dot { background: var(--pa-coord-risk); }
.pa-coord__card--alert .pa-coord__card-head strong { color: var(--pa-coord-risk); }
.pa-coord__card--ok .pa-coord__card-dot { background: var(--pa-coord-ok); }
.pa-coord__card--ok .pa-coord__card-head strong { color: var(--pa-coord-ok); }

.pa-coord__card-body {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--pa-meta);
  line-height: 1.6;
}

.pa-coord__steps {
  display: flex;
  align-items: center;
  gap: 12px clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}

.pa-coord__step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--pa-coord-step);
  font-family: var(--pa-font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: var(--pa-tracking-body);
  white-space: nowrap;
}

.pa-coord__step-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.pa-coord__step--1 { animation: paCoordStep1 var(--pa-coord-loop) linear infinite; }
.pa-coord__step--2 { animation: paCoordStep2 var(--pa-coord-loop) linear infinite; }
.pa-coord__step--3 { animation: paCoordStep3 var(--pa-coord-loop) linear infinite; }
.pa-coord__step--4 { animation: paCoordStep4 var(--pa-coord-loop) linear infinite; }

.pa-coord__note { margin-left: auto; }

/* ---- The video ----
   Set in Proactive Settings, it takes the schematic's place inside the same
   frame and above the same under development note. The box is 16:9 before
   anything loads, so the poster and the video hold one height. contain, not
   cover: a replacement cut to another shape letterboxes rather than losing
   the edge of the interface it shows. */

.pa-coord__media { position: relative; }

.pa-coord__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.pa-coord__toggle {
  position: absolute;
  right: clamp(12px, 1.6vw, 20px);
  bottom: clamp(12px, 1.6vw, 20px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(8, 8, 15, 0.62);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--pa-dur) var(--pa-ease), border-color var(--pa-dur) var(--pa-ease);
}

.pa-coord__toggle[hidden] { display: none; }
.pa-coord__toggle:hover { background: var(--pa-purple); border-color: var(--pa-purple); }
.pa-coord__toggle:focus-visible { border-radius: 50%; }
.pa-coord__toggle-play { margin-left: 3px; }

.pa-coord__media[data-state="playing"] .pa-coord__toggle-play,
.pa-coord__media[data-state="paused"] .pa-coord__toggle-pause { display: none; }

.pa-coord__caption {
  margin: 18px 0 0;
  color: var(--pa-text-on-dark-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ---- Statement and ask ---- */

/* The statement closes the section at the same tier as the opening problem;
   the ask under it is a subheading, so the two never read as equals. */
.pa-coord__statement {
  margin: clamp(40px, 4.6vw, 68px) 0 0;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: var(--pa-h2-statement);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.026em;
  text-wrap: pretty;
}

.pa-coord__statement span { color: var(--pa-purple-on-dark); }

.pa-coord__ask {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 300px), 0.9fr);
  align-items: end;
  gap: 28px clamp(40px, 6vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pa-coord__ask-title {
  margin: 0;
  max-width: 600px;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.pa-coord__ask-body {
  margin: 14px 0 0;
  max-width: 520px;
  color: var(--pa-text-on-dark-soft);
  font-size: 16px;
  line-height: 1.72;
}

.pa-coord__ask-actions {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}

.pa-coord__discord {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(142, 134, 228, 0.32);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
}

.pa-coord__discord:hover { border-bottom-color: #fff; }

/* ---- The loop ---- */

@keyframes paCoordDuct  { 0%, 5% { width: 46%; } 28%, 50% { width: 88%; } 56%, 90% { width: 70%; } 100% { width: 46%; } }
@keyframes paCoordHalo  { 0%, 26% { opacity: 0; } 31%, 50% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes paCoordElbow { 0%, 52% { transform: scaleY(0); opacity: 0; } 59%, 90% { transform: scaleY(1); opacity: 1; } 96%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes paCoordDim1  { 0%, 7% { opacity: 0; } 11%, 17% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes paCoordDim2  { 0%, 20% { opacity: 0; } 24%, 27% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes paCoordDim3  { 0%, 28% { opacity: 0; } 32%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes paCoordDim4  { 0%, 56% { opacity: 0; } 61%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes paCoordAlert { 0%, 30% { opacity: 0; transform: translateY(10px); } 35%, 50% { opacity: 1; transform: translateY(0); } 55%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes paCoordOk    { 0%, 56% { opacity: 0; transform: translateY(10px); } 61%, 88% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes paCoordStep1 { 0%, 4% { color: var(--pa-coord-step); } 8%, 26% { color: var(--pa-purple-on-dark); } 30%, 100% { color: var(--pa-coord-step); } }
@keyframes paCoordStep2 { 0%, 28% { color: var(--pa-coord-step); } 32%, 40% { color: var(--pa-coord-risk); } 44%, 100% { color: var(--pa-coord-step); } }
@keyframes paCoordStep3 { 0%, 40% { color: var(--pa-coord-step); } 44%, 52% { color: var(--pa-coord-risk); } 56%, 100% { color: var(--pa-coord-step); } }
@keyframes paCoordStep4 { 0%, 56% { color: var(--pa-coord-step); } 60%, 88% { color: var(--pa-coord-ok); } 92%, 100% { color: var(--pa-coord-step); } }
@keyframes paCoordPulse { 0%, 100% { opacity: 0.35; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } }

/* ---- Responsive ---- */

/* Below 1100px the six items no longer fit on one line. Scrolling them behind
   a fade cut the later names off mid-word and hid them from anyone who did not
   think to swipe, so the rail becomes a column instead, as the direction rail
   further down the page does at the same width. The arrows turn to point down
   the list and sit in a gutter the first item is indented to match. The drop
   line is not drawn: from the pill it would run through the items below it,
   and the rule and the section name straight after the rail close it instead. */
@media (max-width: 1100px) {
  .pa-croad {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: clamp(30px, 3.4vw, 46px);
    overflow-x: visible;
  }
  .pa-croad__item { gap: 12px; }
  .pa-croad__item:first-child { padding-left: 28px; }
  .pa-croad__arrow { width: 16px; text-align: center; transform: rotate(90deg); }
  .pa-croad__name,
  .pa-croad__later { white-space: normal; }
  .pa-croad__drop { display: none; }
}

@media (max-width: 900px) {
  .pa-coord__ask { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 480px) {
  .pa-croad__pill { padding: 11px 15px; }
  .pa-croad__pill .pa-croad__name { font-size: 16px; }
}

/* The loop is illustration, not information: the caption underneath already
   states the outcome. So rather than freezing mid-cycle, reduced motion is
   shown the resolved end state, which is the frame the caption describes. */
@media (prefers-reduced-motion: reduce) {
  .pa-coord__stage *,
  .pa-coord__steps * { animation: none !important; }

  .pa-coord__duct { width: 70%; }
  .pa-coord__elbow { transform: scaleY(1); opacity: 1; }
  .pa-coord__card--ok,
  .pa-coord__dim--4 { opacity: 1; transform: none; }
  .pa-coord__card--alert,
  .pa-coord__dim--1,
  .pa-coord__dim--2,
  .pa-coord__dim--3,
  .pa-coord__halo,
  .pa-coord__risk { opacity: 0; }
  .pa-coord__step--4 { color: var(--pa-coord-ok); }
}