/* ===== Process stepper demo — shared by all four variants =====
   Layout: one horizontal track of 12 panels; only transform moves.
   The no-JS / reduced-motion state is a plain wrapped list, so the twelve
   steps are always readable even if nothing here runs. ===== */
.pd {
  background: linear-gradient(180deg, var(--blue) 0%, var(--navy-2) 100%);
  color: #dfe9f7;
  /* #process is a link target (the client gets sent straight to it), and the
     header is sticky — without this the heading lands underneath it. Same
     treatment the other anchor targets on the site already get. */
  scroll-margin-top: 90px;
}

/* --- the numbered rail --- */
.pd__railwrap { border-block: 1px solid rgba(255,255,255,.16); background: rgba(8,27,58,.30); }
.pd__rail { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.pd__rail::-webkit-scrollbar { display: none; }
.pd-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  padding: .85rem .95rem; min-height: 48px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: #c8d6e9; font: inherit; font-size: .76rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.pd-tab i { font-style: normal; color: #bdd7f6; font-family: var(--font-mono); font-size: .7rem; }
.pd-tab:hover { color: #fff; }
.pd-tab.is-on { color: #fff; border-bottom-color: #fff; }
.pd-tab:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* --- progress --- */
.pd__meter { display: flex; align-items: center; gap: 1rem; padding: 1rem 0 0; }
.pd__meterbar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.pd__meterbar i { display: block; height: 100%; background: #fff; transform-origin: left center;
  transform: scaleX(.08); transition: transform .45s var(--ease); }
.pd__count { font-family: var(--font-mono); font-size: .8rem; color: #fff; letter-spacing: .06em; }

/* --- the track --- */
.pd__clip { overflow: hidden; }
/* The track is one wrap wide per panel, but .pd__clip is full-bleed — so the
   NEXT panel was visible in the margin beside the active one. Clip at the
   wrap, which is where a panel actually ends. */
.pd__clip > .wrap { overflow: hidden; }
.pd__track { display: grid; gap: 1.4rem; padding: 2rem 0 2.6rem; }
.pd-panel { display: grid; grid-template-columns: 1.35fr .8fr; gap: 2.4rem; align-items: center; }
.pd-panel__no { color: #bdd7f6; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.pd-panel h3 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); margin: .45rem 0 .7rem; }
.pd-panel p { margin: 0 0 1rem; max-width: 54ch; color: #d5e2f3; line-height: 1.65; }
.pd-panel__side { position: relative; display: grid; gap: .7rem; justify-items: start; align-content: center; min-height: 170px; }
.pd-ghost { position: absolute; right: 0; top: 50%; transform: translateY(-52%);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem,11vw,12rem);
  line-height: 1; color: rgba(255,255,255,.07); pointer-events: none; user-select: none; }
.pd-tagline { display: inline-block; padding: .42rem .85rem; border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r); color: #fff; font-size: .8rem; font-weight: 700; }

/* --- LIVE: one horizontal track, transform-only --- */
.pd--live .pd__track {
  display: flex; flex-wrap: nowrap; gap: 0;
  /* One panel wide per step. --pd-n is set by js/procdemo.js from the real
     panel count; the 12 fallback is only for a no-JS/odd-cache case. It was
     hard-coded to 12 while the demos ran, which silently mis-sized the track
     the moment Anurag's process grew to 16 steps. */
  width: calc(var(--pd-n, 12) * 100%);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.pd--live .pd-panel { flex: 0 0 calc(100% / var(--pd-n, 12)); opacity: .25; transition: opacity .45s var(--ease); }
.pd--live .pd-panel.is-on { opacity: 1; }

/* --- scroll variants: the stage sticks while the page scrolls past --- */
.pd[data-motion="scroll"] { position: relative; }
.pd[data-motion="scroll"] .pd__stage { position: sticky; top: 78px; }
.pd[data-motion="scroll"][data-len="phases"]  { min-height: 320vh; }
.pd[data-motion="scroll"][data-len="compact"] { min-height: 150vh; }

@media (max-width: 900px) {
  .pd-panel { grid-template-columns: 1fr; gap: 1.1rem; }
  .pd-panel__side { min-height: 90px; }
  .pd[data-motion="scroll"][data-len="phases"]  { min-height: 280vh; }
  .pd[data-motion="scroll"][data-len="compact"] { min-height: 140vh; }
}
/* Reduced motion / no JS: a plain readable list, every step present. */
@media (prefers-reduced-motion: reduce) {
  .pd[data-motion="scroll"] { min-height: 0 !important; }
  .pd[data-motion="scroll"] .pd__stage { position: static; }
  .pd__track { display: grid !important; width: auto !important; transform: none !important; }
  .pd-panel { opacity: 1 !important; }
}
.pd:not(.pd--live) .pd__track { display: grid; width: auto; }
.pd:not(.pd--live) .pd-panel { opacity: 1; }


/* ============================================================
   HOW WE WORK — the pieces Anurag's real content added (2026-08-16):
   an intro paragraph, prev/next controls and the closing commitment chain.
   No chips and no phase badge, because his document has neither. His one-line
   tagline per step reuses the existing .pd-tagline pill in the panel's side
   column — the slot the approved demo already had for exactly that.
   ============================================================ */
/* The section reuses the site-wide centred .sec-head so its heading matches
   every other homepage section — but .sec-head is coloured for the LIGHT
   sections. Measured on this blue, the stock colours came out at 2.27:1 for
   the heading and 1.08:1 for the sub-line: dark navy type on a blue field,
   i.e. all but invisible. Repaint only the type. On --blue (#1657B0),
   #fff = 6.96:1 and #bdd7f6 = 4.70:1, so both clear WCAG AA. */
.pd .sec-head h2 { color: #fff; }
.pd .sec-head__sub { color: #bdd7f6; }

/* --- vertical rhythm (ui-ux-pro-max: content-priority, whitespace-balance) ---
   Measured at 1560px before this: the header text ran 289px before the first
   step, against a step panel of 291px — the introduction outweighed the thing
   it introduces, and the first step opened below the fold. Everything here is
   on the 8pt scale (8 / 16 / 24 / 40 / 48), so the section has a rhythm instead
   of a pile of one-off margins. Net effect ~100px reclaimed, with the heading
   left at the site-wide section size so this section still matches the others. */
.pd.section { padding-block: 40px 48px; }
.pd .sec-head { margin-bottom: 16px; }
.pd .sec-head h2 { margin-bottom: 8px; }
.pd .sec-head__sub { margin-top: 0; }
.pd .pd__meter { padding-top: 8px; }
.pd .pd__track { padding-block: 24px 32px; }

.pd-intro {
  /* Its own measure, not .sec-head's 60ch — see the note in index.html.
     ~90 characters a line rather than the 65–75 the guideline prefers for
     long-form: a deliberate trade to keep this a 4-line lead instead of a
     5-line block, with 1.6 line-height to keep the longer lines trackable. */
  margin: 0 auto; max-width: 72ch;
  color: #cfdcf0; font-size: .97rem; line-height: 1.6; text-align: center;
}

/* prev / next sit with the counter so all the controls are in one place */
.pd-nav { display: inline-flex; gap: .45rem; margin-left: auto; }
.pd-nav__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.pd-nav__btn svg { width: 20px; height: 20px; }
.pd-nav__btn:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.pd-nav__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* the closing chain — his "Understand -> Engineer -> Test -> ..." line */
/* The closing statement is a separate thought, so it keeps a clear gap — but on
   the same 8pt scale as the rest of the section rather than 2.4rem/1.6rem. */
.pd-commit { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); text-align: center; }
.pd-commit__h {
  display: block; margin-bottom: .8rem;
  color: #bdd7f6; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.pd-commit__chain {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .1rem;
  counter-reset: none;
}
.pd-commit__chain li { display: flex; align-items: center; color: #fff; font-size: .92rem; font-weight: 700; }
/* the arrow is decoration between items, so it is generated, not written into
   the markup where a screen reader would read it as a word */
.pd-commit__chain li:not(:last-child)::after {
  content: "\2192"; margin: 0 .55rem; color: #bdd7f6; font-weight: 400;
}
.pd-commit__note { margin: 0 auto; max-width: 70ch; color: #cfdcf0; font-size: .95rem; line-height: 1.65; }

@media (max-width: 700px) {
  /* 16px floor for body copy on phones (ui-ux-pro-max: readable-font-size).
     The narrow measure gives short lines here anyway, so the desktop
     trade-off does not apply — only the spacing needs to come in. */
  .pd-intro { font-size: 1rem; }
  .pd.section { padding-block: 32px 40px; }
  .pd .pd__track { padding-block: 20px 26px; }
  .pd-commit__chain li { font-size: .86rem; }
}