/**
 * Site chrome: header, hero, footer, modal shell.
 * Geometry is taken directly from the approved design.
 */

/* ---- Header -------------------------------------------------------------- */

.pa-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--pa-z-header);
  height: var(--pa-header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--pa-dur) var(--pa-ease),
    border-color var(--pa-dur) var(--pa-ease);
}

.pa-header[data-scrolled="true"] {
  background: rgba(10, 12, 18, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

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

.pa-logo { display: block; flex: 0 0 auto; }
.pa-logo img { display: block; height: auto; width: 103px; }

.pa-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; row-gap: 4px; }
.pa-nav a {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--pa-body-sm);
  font-weight: 600;
  letter-spacing: var(--pa-tracking-body);
  white-space: nowrap;
  transition: color var(--pa-dur-fast) ease;
}
.pa-nav a:hover { color: #fff; }

.pa-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pa-header__cta { padding: 11px 20px; }
.pa-on-dark .pa-header__cta:hover { transform: translateY(-1px); }

.pa-header__progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pa-purple);
}

/* Mobile disclosure menu */
/* No positioning here on purpose. The panel below is absolutely positioned and
   must resolve against the fixed header so it spans the full width. Making this
   a containing block pins it to the button and pushes it off screen. */
.pa-menu { display: none; }
.pa-menu[open] .pa-menu__btn { border-color: rgba(255, 255, 255, 0.4); }
.pa-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--pa-radius-sm);
  color: #fff;
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pa-menu__btn::-webkit-details-marker { display: none; }
.pa-menu__btn:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }

.pa-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 10px 18px 0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pa-radius);
  background: rgba(10, 12, 18, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--pa-shadow-float);
}
.pa-menu__panel a {
  padding: 13px 14px;
  border-radius: var(--pa-radius-sm);
  color: var(--pa-text-on-dark-bright);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 600;
}
.pa-menu__panel a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.pa-menu__demo {
  margin-top: 8px;
  padding: 15px 14px 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 !important;
  color: var(--pa-text-on-dark-soft) !important;
}
.pa-menu__demo:hover { background: none !important; color: #fff !important; }

/* ---- Supporting line ------------------------------------------------------
   The Autodesk App Store line under a Download control. The hero sets its
   own spacing and colour below. */

.pa-supporting {
  margin: 14px 0 0;
  color: var(--pa-text-on-dark-soft);
  font-size: var(--pa-meta);
  line-height: 1.6;
}

/* ---- Hero (locked) --------------------------------------------------------
   Composition, proportions, spacing and effects are approved. Shared rules
   must not reach in here. Any change to this block is a hero regression.

   Two parts: the split first screen, then the Get Proactive statement and
   the walkthrough under it. The section clips its own overflow, as the
   design does; the product image overhangs its row only vertically. */

.pa-hero {
  padding: 150px 0 0;
  overflow: hidden;
  background: var(--pa-ink);
  color: var(--pa-text-on-dark);
}

.pa-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

/* The copy sits above the image: where a headline line runs long it passes
   over the image's faded edge rather than under it. */
.pa-hero__main { position: relative; z-index: 2; }

.pa-hero-title--lines .pa-hero-title__line { display: block; white-space: nowrap; }

.pa-hero__copy { margin-top: 40px; }
.pa-hero__lead { color: var(--pa-text-on-dark-bright); }
.pa-hero__support {
  margin: 20px 0 0;
  max-width: 440px;
  color: var(--pa-text-on-dark-faint);
  font-size: 16px;
  line-height: 1.8;
}

.pa-hero__ctas {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pa-hero .pa-supporting {
  margin-top: 16px;
  color: var(--pa-text-on-dark-cool);
}

/* Product illustration: a monitor with two cards and leader lines. It is laid
   out at the design's own size, a fixed 760 by 450 grid in plain pixels, and
   scaled as one piece with a transform, as the design does, but in CSS rather
   than script. tan(atan2(100cqw, 760px)) is the illustration's width over 760
   as a plain number, which a transform needs and a length division cannot yet
   give. Laying out at full size and scaling afterwards keeps the design's real
   hairlines and line heights, and a visitor's minimum font size cannot reflow
   the cards. Beside the headline it takes 80% of its column, left aligned, as
   designed; stacked on a tablet it fills the width. On a phone that scaling
   would take the card text below 7px, so there the cards are drawn larger
   than the monitor (see the 640px rules below). The monitor render's backdrop is the ground
   colour, so it needs no fade.

   The monitor, its floor glow, reflection and screen glow are one group, the
   device, placed on the grid where the design has them. */
.pa-hero__visual {
  position: relative;
  margin: -8px 0 -16px;
}

.pa-hero-comp {
  position: relative;
  width: 80%;
  aspect-ratio: 760 / 450;
  container-type: inline-size;
}

.pa-hero-comp__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 450px;
  color: #fff;
  font-family: var(--pa-font);
  line-height: normal;
  transform: scale(min(1, tan(atan2(100cqw, 760px))));
  transform-origin: 0 0;
}

.pa-hero-comp__device {
  position: absolute;
  left: 0;
  top: 80px;
  width: 600px;
  height: 363px;
}

.pa-hero-comp__monitor {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  max-width: none;
  height: auto;
  opacity: 0.8;
}

.pa-hero-comp__floor {
  position: absolute;
  left: 40px;
  top: 292px;
  width: 520px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(170, 185, 210, 0.10), transparent 70%);
  pointer-events: none;
}

/* The monitor's stand, mirrored faintly in the floor. */
.pa-hero-comp__mirror {
  position: absolute;
  left: 0;
  top: 299px;
  width: 600px;
  height: 64px;
  overflow: hidden;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}
.pa-hero-comp__mirror img {
  position: absolute;
  left: 0;
  top: -39px;
  width: 600px;
  max-width: none;
  height: auto;
  transform: scaleY(-1);
}

.pa-hero-comp__glow {
  position: absolute;
  left: 54px;
  top: 42px;
  width: 492px;
  height: 214px;
  border-radius: 6px;
  box-shadow:
    0 0 50px 6px rgba(91, 75, 214, 0.10),
    0 0 100px 24px rgba(30, 214, 224, 0.03);
  mix-blend-mode: screen;
  pointer-events: none;
}

.pa-hero-comp__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pa-hero-comp__lines polyline { fill: none; stroke: var(--pa-hero-cyan); stroke-width: 1.25; }
.pa-hero-comp__lines circle { fill: var(--pa-hero-cyan); }

/* Cards */
.pa-hero-card {
  position: absolute;
  z-index: 2;
  padding: 16px 18px 18px;
  border: 1px solid rgba(140, 160, 190, 0.26);
  background: rgba(10, 17, 27, 0.95);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pa-hero-card--rule {
  left: 420px;
  top: 0;
  width: 330px;
  border-radius: 10px;
}
.pa-hero-card--status {
  left: 468px;
  top: 270px;
  width: 312px;
  border-radius: 8px;
  background: rgba(10, 17, 27, 0.94);
  transform: scale(0.93);
  transform-origin: top left;
}

.pa-hero-card__head { display: flex; align-items: center; gap: 8px; }
.pa-hero-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pa-hero-cyan);
  color: var(--pa-hero-cyan-ink);
}
.pa-hero-card__icon svg { width: 11px; height: 11px; }
.pa-hero-card__label {
  color: var(--pa-text-on-dark-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pa-hero-card__pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--pa-radius-pill);
  background: rgba(30, 214, 224, 0.14);
  color: var(--pa-hero-cyan);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pa-hero-card__pill svg { width: 10px; height: 10px; }
.pa-hero-card__title {
  display: block;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.pa-hero-card__body {
  margin: 4px 0 0;
  color: var(--pa-text-on-dark-cool);
  font-size: 13px;
  line-height: 1.45;
}

.pa-hero-card__move {
  margin-top: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(140, 160, 190, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.pa-hero-card__side { display: flex; flex-direction: column; gap: 3px; }
.pa-hero-card__from-label {
  color: var(--pa-text-on-dark-soft);
  font-size: 12px;
  white-space: nowrap;
}
.pa-hero-card__from-value {
  color: var(--pa-hero-struck);
  font-size: 14px;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: rgba(107, 115, 130, 0.7);
  overflow-wrap: break-word;
}
.pa-hero-card__arrow {
  width: 18px;
  height: 12px;
  color: var(--pa-hero-cyan);
}
.pa-hero-card__to-label {
  color: var(--pa-hero-cyan);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pa-hero-card__to-value {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.pa-hero-card__heading {
  display: block;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(140, 160, 190, 0.2);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pa-hero-card__status {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pa-hero-card__ring {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  opacity: 0.85;
}
.pa-hero-card__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.pa-hero-card__ring circle { fill: none; stroke-width: 5; }
.pa-hero-card__ring-track { stroke: var(--pa-hero-ring-track); }
.pa-hero-card__ring-arc { stroke: var(--pa-hero-cyan); }
.pa-hero-card__ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pa-hero-card__ring-value {
  color: var(--pa-text-on-dark-bright);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.pa-hero-card__ring-label {
  margin-top: 3px;
  color: var(--pa-text-on-dark-faint);
  font-size: 12px;
}

.pa-hero-card__rows {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.pa-hero-card__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  color: var(--pa-text-on-dark-faint);
}
.pa-hero-card__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.8;
}
.pa-hero-card__name { white-space: nowrap; }
.pa-hero-card__count { margin-left: auto; color: var(--pa-text-on-dark-cool); }
.pa-hero-card__row--ok .pa-hero-card__dot { background: var(--pa-hero-cyan); }
.pa-hero-card__row--attention .pa-hero-card__dot { background: var(--pa-hero-red); }

/* The auto-corrected count is the one the illustration is about. */
.pa-hero-card__row--fixed {
  padding: 10px;
  border: 1px solid rgba(255, 200, 120, 0.55);
  border-radius: 7px;
  background: rgba(255, 196, 110, 0.2);
  box-shadow: 0 0 18px rgba(255, 196, 110, 0.12);
}
.pa-hero-card__row--fixed .pa-hero-card__dot {
  width: 10px;
  height: 10px;
  background: var(--pa-hero-amber);
  box-shadow: 0 0 10px rgba(255, 203, 128, 0.8);
  opacity: 1;
}
.pa-hero-card__row--fixed .pa-hero-card__name { color: #fff; font-weight: 700; }
.pa-hero-card__row--fixed .pa-hero-card__count {
  color: var(--pa-hero-amber);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Stacked on a tablet, the drawing fills the width rather than 80% of it,
   and may grow past the design's own size to do so. */
@media (max-width: 940px) {
  .pa-hero-comp { width: 100%; }
  .pa-hero-comp__stage { transform: scale(tan(atan2(100cqw, 760px))); }
}

/* Phone. Scaled whole, the drawing would set the card text at 4 to 7px, so
   the cards are drawn larger while the monitor keeps its size. The device
   scales as it would at 80% of the width, as designed. The cards sit against
   the right edge, using the margin the design leaves there, at the design's
   size or as near it as the width allows (--c, reaching 1 at 400px wide), so
   their text stays 9px and up from a 360px phone. The rule card sits above the
   monitor and the status card below it, each overlapping only a corner, so
   the monitor stays in view. Each card draws its own leader line, straight
   down or up into the screen, landing on it at any phone width. */
@media (max-width: 640px) {
  .pa-hero-comp { aspect-ratio: auto; }
  .pa-hero-comp__stage {
    --c: min(1, tan(atan2(100cqw, 400px)));
    position: relative;
    width: 100%;
    height: max(
      calc(333.5px * var(--c) + 0.2203 * 100cqw),
      calc(181px * var(--c) + 0.3821 * 100cqw)
    );
    transform: none;
  }
  .pa-hero-comp__device {
    top: calc(181px * var(--c));
    transform: scale(tan(atan2(100cqw, 950px)));
    transform-origin: 0 0;
  }
  .pa-hero-comp__lines { display: none; }

  .pa-hero-card { transform-origin: top right; }
  .pa-hero-card--rule {
    left: auto;
    right: 0;
    transform: scale(var(--c));
  }
  .pa-hero-card--status {
    left: auto;
    right: 0;
    top: calc(181px * var(--c) + 0.2203 * 100cqw);
    transform: scale(calc(0.93 * var(--c)));
  }

  .pa-hero-card::before,
  .pa-hero-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .pa-hero-card::before { left: 24px; border-left: 1.25px solid var(--pa-hero-cyan); }
  .pa-hero-card::after {
    left: 21.6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pa-hero-cyan);
  }
  .pa-hero-card--rule::before { top: 100%; height: 40px; }
  .pa-hero-card--rule::after { top: calc(100% + 37px); }
  .pa-hero-card--status::before { bottom: 100%; height: 32px; }
  .pa-hero-card--status::after { bottom: calc(100% + 29px); }
}

/* The drawing is scaled by atan2() of a container width against a pixel
   length. A browser that cannot do that shows the monitor alone, where the
   design places it: one without container units or trig functions, and
   Firefox before 152, which accepts atan2() only when both sides share a
   unit. The test is that exact construct, so such a browser is caught. */
@supports not (transform: scale(tan(atan2(1cqw, 1px)))) {
  .pa-hero-comp { aspect-ratio: 760 / 450; }
  .pa-hero-comp__stage { position: absolute; width: 100%; height: 100%; transform: none; }
  .pa-hero-comp__device { top: 17.78%; width: 78.95%; height: auto; transform: none; }
  .pa-hero-comp__monitor { position: relative; width: 100%; }
  .pa-hero-comp__stage > :not(.pa-hero-comp__device),
  .pa-hero-comp__device > :not(.pa-hero-comp__monitor) { display: none; }
}

/* Get Proactive statement */
.pa-hero__tagline {
  margin-top: clamp(56px, 6vw, 88px);
  max-width: 920px;
}
.pa-hero__tagline-title {
  margin: 0;
  font-family: var(--pa-font);
  font-size: clamp(29px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.024em;
}
.pa-hero__tagline-a { display: block; color: var(--pa-text-on-dark-quiet); }
.pa-hero__tagline-b { display: block; color: var(--pa-text-on-dark); white-space: nowrap; }
.pa-hero__tagline-body {
  margin: 12px 0 0;
  max-width: 560px;
  color: var(--pa-text-on-dark-faint);
  font-size: var(--pa-body);
  line-height: 1.8;
  text-wrap: balance;
}

/* Walkthrough: a product frame with a caption over its foot, and three tabs.
   app.js drives the steps; without it the first step stands on its own. */
.pa-walkthrough { margin-top: clamp(34px, 3.6vw, 52px); }

.pa-walkthrough__frame {
  padding: clamp(8px, 1.1vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: var(--pa-ink-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 90px rgba(0, 0, 0, 0.5);
}

.pa-walkthrough__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--pa-radius);
  background: var(--pa-ink-black);
}

/* Contained, not cropped: a still that is not 16:9 keeps every panel in view. */
.pa-walkthrough__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The theme's own still is 4:3, so it stands full height in the middle of the
   frame, and its sides fade into the ground instead of meeting it at an edge.
   A poster set in Proactive Settings is expected at 16:9 and is not faded. */
.pa-walkthrough__media--fallback {
  left: 50%;
  right: auto;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.pa-walkthrough__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(6, 7, 11, 0) 0%, rgba(6, 7, 11, 0.55) 55%, rgba(6, 7, 11, 0.82) 100%);
  pointer-events: none;
}

/* Every caption shares one grid cell, so they cross fade in place. A hidden
   caption leaves the accessibility tree once it has faded out. */
.pa-walkthrough__captions {
  position: absolute;
  left: clamp(16px, 2.4vw, 32px);
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(14px, 2.2vw, 28px);
  display: grid;
  pointer-events: none;
}
.pa-walkthrough__caption {
  grid-area: 1 / 1;
  align-self: end;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  line-height: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.5s var(--pa-ease),
    transform 0.5s var(--pa-ease),
    visibility 0s linear 0.5s;
}
.pa-walkthrough__caption.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.pa-walkthrough__badge {
  padding: 5px 9px;
  border-radius: var(--pa-radius-xs);
  background: var(--pa-purple);
  color: #fff;
  font-family: var(--pa-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pa-walkthrough__line {
  color: #fff;
  font-family: var(--pa-font);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* The pause control. It sits in the corner away from the captions, and is
   the same control the Coordination video carries. */
.pa-walkthrough__toggle {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  right: 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-walkthrough__toggle[hidden] { display: none; }
.pa-walkthrough__toggle:hover { background: var(--pa-purple); border-color: var(--pa-purple); }
.pa-walkthrough__toggle:focus-visible { border-radius: 50%; }
.pa-walkthrough__toggle-play { margin-left: 3px; }

.pa-walkthrough:not([data-state="stopped"]) .pa-walkthrough__toggle-play,
.pa-walkthrough[data-state="stopped"] .pa-walkthrough__toggle-pause { display: none; }

/* Always three across, at every width, so the steps read as one sequence.
   The design lets them drop to a column on narrow screens; they are kept in a
   row at the owner's request, with the type a step smaller on a phone. */
.pa-walkthrough__tabs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
}

/* The design dims the steps that are not selected to 0.55. At that their
   descriptions measure 3.1:1 against the ground, under WCAG AA. 0.75 is the
   least that clears it with a margin (4.8:1) and keeps the emphasis. */
/* A flex column, not a block: the grid stretches every tab in a row to the
   tallest, and a block button centres its content in that height, which
   would drop a one line step below its neighbours. */
.pa-walkthrough__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--pa-dur) var(--pa-ease);
}
.pa-walkthrough__tab[aria-selected="true"] { opacity: 1; }

/* A touch screen keeps :hover on the last tab tapped, which would leave it
   looking selected after the steps move on. */
@media (hover: hover) {
  .pa-walkthrough__tab:hover { opacity: 1; }
}

.pa-walkthrough__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.pa-walkthrough__fill {
  position: absolute;
  inset: 0;
  background: var(--pa-purple-progress);
  transform: scaleX(0);
  transform-origin: left;
}
.pa-walkthrough__tab.is-past .pa-walkthrough__fill { transform: scaleX(1); }

.pa-walkthrough__title {
  display: block;
  color: #fff;
  font-family: var(--pa-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.008em;
}
.pa-walkthrough__body {
  display: block;
  margin-top: 8px;
  max-width: 34ch;
  color: var(--pa-text-on-dark-faint);
  font-size: var(--pa-body-sm);
  line-height: 1.6;
}

.pa-hero__tail { height: clamp(64px, 7vw, 104px); }

/* ---- Approved responsive behaviour for chrome and hero -------------------- */

@media (max-width: 940px) {
  .pa-nav { gap: 22px; }
  .pa-hero { padding-top: 142px; }
  .pa-hero__split { grid-template-columns: minmax(0, 1fr); }
  .pa-hero-title { font-size: clamp(38px, 7.4vw, 62px); }
  .pa-hero__visual { margin: 8px 0 -16px; }
}

@media (max-width: 720px) {
  .pa-hero__tagline-b { white-space: normal; }
}

@media (max-width: 700px) {
  .pa-header { height: var(--pa-header-h-sm); }
  .pa-header__row { gap: 12px; }
  .pa-nav { display: none; }
  .pa-menu { display: block; }
  .pa-hero { padding-top: 116px; }

  /* Scrolling down swaps the menu for the primary CTA, never both at once. */
  .pa-header:not([data-dir="down"]) .pa-header__cta { display: none; }
  .pa-header[data-dir="down"] .pa-menu { display: none; }
}

@media (max-width: 420px) {
  .pa-logo img { width: 92px; }
  .pa-header__cta { padding: 11px 14px; font-size: var(--pa-meta); }
  .pa-menu__btn { padding: 10px 12px; font-size: 13.5px; }
}

@media (max-width: 520px) {
  .pa-hero-title--lines .pa-hero-title__line { display: inline; white-space: normal; }
}

/* Phones: the two calls to action share a row, as they do on larger screens,
   instead of stacking. Each takes part of the width, so the type is a step
   smaller and the side padding tighter: both labels fit from 355px. Narrower
   than that they cannot share a row at a readable size, and wrap to two full
   width rows rather than overflow. A button on its own keeps its own width. */
@media (max-width: 480px) {
  .pa-hero__ctas { align-items: stretch; gap: 8px; }
  .pa-hero__ctas .pa-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 12px;
    font-size: var(--pa-meta);
  }
  .pa-hero__ctas .pa-btn--secondary { gap: 8px; }
  .pa-hero__ctas .pa-btn:only-child { flex-grow: 0; }
}

@media (max-width: 380px) {
  .pa-hero__ctas .pa-btn { padding-inline: 8px; }
}

/* Phones: the three steps stay in a row. Each is about a third of the width,
   so the step name and description are a step smaller; the longest default
   name, 02 Intervene, fits the narrowest column (320px screen) at 14px. */
@media (max-width: 480px) {
  .pa-walkthrough__tabs { gap: 12px; }
  .pa-walkthrough__title { font-size: var(--pa-meta); }
  .pa-walkthrough__body { margin-top: 6px; font-size: var(--pa-micro); line-height: 1.5; }
}

@media (max-width: 360px) {
  .pa-header { height: auto; padding: 10px 0; }
  .pa-header__row { flex-wrap: wrap; row-gap: 10px; }
  .pa-header__actions { flex: 0 0 100%; margin-left: 0; justify-content: space-between; }
  .pa-hero { padding-top: 150px; }
}

/* ---- Footer -------------------------------------------------------------- */

.pa-footer { padding: 60px 0 40px; background: var(--pa-ink-deep); color: var(--pa-text-on-dark); }

.pa-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 52px);
}

@media (max-width: 1100px) {
  .pa-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (max-width: 460px) {
  .pa-footer__cols { grid-template-columns: 1fr; }
}

.pa-footer__heading {
  margin: 0;
  color: #fff;
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
}

.pa-footer__nav {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.pa-footer__nav a { color: var(--pa-text-on-dark-soft); font-size: var(--pa-meta); }
.pa-footer__nav a:hover { color: #fff; }

.pa-footer__primary {
  color: #fff;
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 700;
}
.pa-footer__primary:hover { color: var(--pa-purple-on-dark); }

.pa-footer__discord { display: inline-flex; align-items: center; gap: 8px; font-size: var(--pa-meta); }

.pa-footer__status {
  margin: 16px 0 0;
  max-width: 300px;
  color: var(--pa-text-on-dark-soft);
  font-size: var(--pa-meta);
  line-height: 1.65;
}

.pa-footer__base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

.pa-footer__identity { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pa-footer__mark { display: block; opacity: 0.9; }
.pa-footer__mark img { display: block; height: auto; width: 82px; }

.pa-footer__anchors { display: flex; gap: 22px; flex-wrap: wrap; }
.pa-footer__anchors a { color: var(--pa-text-on-dark-soft); font-size: var(--pa-micro); }
.pa-footer__anchors a:hover { color: #fff; }

.pa-footer__copy {
  margin: 0;
  color: var(--pa-text-on-dark-soft);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
}

/* Quiet links on dark carry the approved hairline underline. */
.pa-on-dark .pa-link-quiet {
  padding-bottom: 4px;
  border-bottom-color: rgba(142, 134, 228, 0.32);
}
.pa-on-dark .pa-link-quiet:hover { border-bottom-color: rgba(255, 255, 255, 0.5); }

.pa-discord-mark { display: block; flex: 0 0 auto; }
.pa-ext, .pa-arrow { font-size: 15px; line-height: 1; }