/*
 * Zorvix Infotech — Project Finder ("start-a-project.php")
 *
 * Phase-1B public interactive experience. Reuses the token set already
 * defined in main.css (--z-deep/--z-surface/--z-elevated/--z-navy/--z-ice/
 * --z-steel/--z-steel-dim/--z-orange/--t-fast/--t-med/--ease/--font-ui/
 * --content-max) — nothing here redefines the brand system. No gradients.
 * Orange is reserved for the active route / current step / confirmed
 * signal, exactly as the Header/Hero already use it. main.css's
 * :root already clamps --t-fast/--t-med to 1ms under
 * prefers-reduced-motion, so every transition below inherits that for
 * free — this file adds no separate reduced-motion handling beyond the
 * few places that use an explicit keyframe (none currently do).
 *
 * Breakpoints match the ones already established for the Header/Hero:
 * 1279 / 1099 / 999 / 767 / 480.
 *
 * VISUAL/UX CORRECTION PASS (external design review — the Finder's visible
 * architecture/logic is unchanged; this pass is presentation-only). Adds a
 * small set of Finder-local tokens below, layered strictly ON TOP of
 * main.css's own brand tokens — no new color is introduced anywhere in this
 * file, no gradient, no glassmorphism, no glow/neon effect (every box-shadow
 * below is a hard-edged ring or a soft, low-opacity elevation shadow, never
 * a blurred "glow"). `--pf-font-mono` uses the system's own already-
 * available monospace stack (no font file is loaded) purely for a handful
 * of small tracked technical labels/numerals — an "engineered" detail, not
 * a second typeface: prose, questions, and buttons all continue to use the
 * existing `--font-ui` system stack untouched.
 */

:root {
  --pf-radius-sm: 6px;
  --pf-radius-md: 10px;
  --pf-radius-lg: 16px;
  --pf-control-h: 48px;
  --pf-border: rgba(236, 240, 247, 0.10);
  --pf-border-strong: rgba(236, 240, 247, 0.20);
  --pf-orange-border: rgba(226, 101, 11, 0.50);
  --pf-orange-wash: rgba(226, 101, 11, 0.10);
  --pf-orange-wash-strong: rgba(226, 101, 11, 0.18);
  --pf-shadow-surface: 0 1px 0 rgba(236, 240, 247, 0.05) inset, 0 24px 48px -32px rgba(0, 0, 0, 0.65);
  --pf-shadow-card: 0 16px 32px -24px rgba(0, 0, 0, 0.55);
  --pf-tracking-eyebrow: 0.14em;
  --pf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /*
   * VISUAL CORRECTION PASS (external review, second round): the prior pass
   * shipped a procedural, CSS/SVG-only atmosphere here since no bespoke
   * artwork existed yet. Owner-approved artwork now exists —
   * `finder-atmosphere.{avif,webp,jpg,png}` — a DISTINCT, cooler-toned
   * futuristic city/orbital-highway/planet scene, never the success
   * screen's warm mountain/planet photo and never sharing a file with it.
   * `--pf-finder-bg-image` is the hook (set on `.pf-shell` itself, mirroring
   * the success screen's own `--pf-success-bg-image` precedent) — the old
   * procedural grid/glow layer is removed outright now that real art exists
   * (per explicit instruction not to stack pointless decoration over a real
   * photo); only a light, real readability overlay remains (below).
   *
   * Palette correction: ambient/atmospheric accents are now CYAN-forward
   * (matching the new artwork's own cool palette), with orange strictly
   * reserved for the active/current/selected signal — the same convention
   * this file's own header comment already established for the rest of the
   * Finder ("Orange is reserved for the active route / current step /
   * confirmed signal"); the prior pass's ambient orange glow accidentally
   * diluted that convention and is removed here.
   */
  --pf-finder-glass-bg: rgba(9, 17, 32, 0.44);
  --pf-finder-glass-bg-strong: rgba(7, 14, 27, 0.62);
  --pf-finder-glass-border: rgba(146, 214, 255, 0.20);
  --pf-finder-glow-cyan: rgba(88, 196, 255, 0.20);
  --pf-finder-glow-cyan-soft: rgba(88, 196, 255, 0.10);
  /* A more saturated cyan for small solid-ish accents (the progress ring's
     conic sweep, luminous card edges) where the very translucent ambient
     glow tokens above would read as barely-there. Orange is untouched and
     stays reserved for the active/current/selected signal only. */
  --pf-finder-cyan-strong: rgba(88, 196, 255, 0.85);
}

.pf-shell {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px) clamp(20px, 3.2vw, 56px) clamp(48px, 6vw, 96px);
  color: var(--z-ice);
  font-family: var(--font-ui);
}

/*
 * Cinematic Finder environment — the real approved artwork, painted on
 * `#project-finder-root` rather than `.pf-shell` itself. `.pf-shell` has
 * its own `max-width`/centered content column (so the question/rail/map
 * columns stay a readable width on wide monitors); `#project-finder-root`
 * is the plain, UNCONSTRAINED full-width wrapper start-a-project.php's own
 * markup already provides around it (a bare `<div>` inside `<main>`, no
 * container class) — anchoring the background there gives a genuine
 * edge-to-edge environment behind the whole page section, matching the
 * approved reference's full-bleed composition, without resorting to a
 * `100vw` breakout hack that risks a scrollbar-width horizontal-overflow
 * regression. Its height still exactly matches `.pf-shell`'s own height
 * (the shell is `#project-finder-root`'s only child), so this stays
 * correctly scoped to the Finder section only — never bleeding into the
 * Header above or Footer below.
 *
 * Immersive across the WHOLE section (not a short top band like the
 * success screen's own bottom-masked band — the owner explicitly asked
 * this screen to "fill the viewport convincingly" rather than leave a
 * large dead area below a top-aligned scene). `background-attachment:
 * fixed` is the load-bearing property: it keeps `background-size: cover`
 * computed against the VIEWPORT rather than against this element's own
 * (content-dependent, sometimes very tall — e.g. a long Send validation-
 * error state) box height, so the artwork never gets crushed into an
 * unrecognizable sliver on a tall page the way a plain `cover` sized to
 * the element itself would.
 */
#project-finder-root {
  position: relative;
  isolation: isolate;
  --pf-finder-bg-image: image-set(
    url('/assets/images/project-finder/finder-atmosphere.avif') type('image/avif'),
    url('/assets/images/project-finder/finder-atmosphere.webp') type('image/webp'),
    url('/assets/images/project-finder/finder-atmosphere.jpg') type('image/jpeg')
  );
}

#project-finder-root::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--z-deep);
  background-image: var(--pf-finder-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 64% 38%;
  background-attachment: fixed;
}

/*
 * Readability overlay — separate from the artwork itself so the artwork's
 * own file never needs a second "dark" export. A restrained diagonal
 * darken favoring the LEFT edge (where the new editorial intro text and
 * rail sit), fading out toward the right so the artwork's own strongest
 * architectural/planet detail on that side stays fully visible, per the
 * owner's own art-direction guidance. Never a flat, page-wide dark sheet.
 */
#project-finder-root::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(100deg, rgba(3, 8, 18, 0.86) 0%, rgba(3, 8, 18, 0.55) 26%, rgba(3, 8, 18, 0.22) 48%, transparent 66%);
}

/* Note: background-attachment: fixed is a static positioning choice, not an
   animation, so no prefers-reduced-motion guard applies to it. iOS Safari
   has never supported background-attachment: fixed (it silently falls back
   to `scroll`), which degrades gracefully here to a normal cover background
   sized to this element rather than the viewport — slightly more
   aggressive cropping on a very tall iOS page is an accepted, harmless
   trade-off; nothing breaks, so no override is needed. */

/*
 * Responsive art direction for the finder background — three deliberate
 * tiers, not one `cover` value left to fend for itself. The master artwork
 * is composed with a darker open-left / architectural-right reading; each
 * tier repositions the SAME image so the strongest available detail stays
 * visible while the interactive column it now shares the screen with
 * changes shape.
 *
 * TABLET (768–1099px): the rail/map stack above/below the question here
 * (see .pf-layout's 768-999px override) rather than sitting beside it, so
 * the question surface is the dominant visual weight — shift the crop
 * further right to keep showing real architectural/planet detail while
 * reducing how much of the busiest part of the scene sits directly behind
 * the now-wider, more central question column, and strengthen the overlay
 * slightly so text stays comfortably readable over a narrower art window.
 */
@media (max-width: 1099px) {
  #project-finder-root::before {
    background-position: 72% 32%;
  }

  #project-finder-root::after {
    background-image: linear-gradient(100deg, rgba(3, 8, 18, 0.90) 0%, rgba(3, 8, 18, 0.68) 34%, rgba(3, 8, 18, 0.34) 58%, rgba(3, 8, 18, 0.10) 78%);
  }
}

/*
 * MOBILE (≤767px): a real mobile crop, not the desktop landscape shrunk
 * into a narrow window. `background-attachment: fixed` is dropped here —
 * mobile browsers (notably iOS Safari, but also some Android WebViews)
 * resize their viewport as the address bar shows/hides, which makes a
 * `fixed`-attachment cover image visibly jump/reflow during ordinary
 * scrolling; `scroll` (sized to this element) avoids that entirely, and
 * since the finder section's own height is what matters here (not a tall
 * page composited behind a short viewport), nothing is lost by switching.
 * Position is pulled toward centre-right so a recognisable slice of the
 * blue/cyan atmosphere and its architectural silhouette survives the crop
 * without ever centring a high-contrast highlight directly behind the
 * question surface's own text.
 */
@media (max-width: 767px) {
  #project-finder-root::before {
    background-attachment: scroll;
    background-position: 78% 26%;
  }

  #project-finder-root::after {
    background-image: linear-gradient(180deg, rgba(3, 8, 18, 0.92) 0%, rgba(3, 8, 18, 0.62) 22%, rgba(3, 8, 18, 0.30) 46%, rgba(3, 8, 18, 0.14) 70%, rgba(3, 8, 18, 0.30) 100%);
  }
}

.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually-hidden-but-focusable — for native inputs whose selection state
   is already shown by the wrapping label's own visual treatment (the
   route cards and chip pills below). Unlike .pf-sr-only this keeps a real
   1x1 box in normal flow so :focus-visible + the parent's :focus-within
   still work exactly like a visible input would. */
.pf-visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ */
/* Top row: phase strip + global Start over (item 9) / draft notice     */
/* (item 8)                                                             */
/* ------------------------------------------------------------------ */

/* Visual redesign pass: the phase strip no longer lives in this row (it
   now mounts inside .pf-rail — see the Rail / Progress module section
   below), so .pf-toprow is now a slim persistent identity strip: the
   static "PROJECT FINDER" wordmark on the left, the existing Start Over
   control on the right. */
.pf-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.pf-toprow__brand {
  margin: 0;
}

.pf-start-over {
  flex-shrink: 0;
  white-space: nowrap;
}

.pf-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid rgba(236, 240, 247, 0.14);
  border-radius: 4px;
  background: var(--z-navy);
  color: var(--z-steel);
  font-size: 14px;
  line-height: 1.5;
}

.pf-notice--restored {
  border-color: rgba(226, 101, 11, 0.35);
  color: var(--z-ice);
}

/* ------------------------------------------------------------------ */
/* Phase strip (§11)                                                   */
/* ------------------------------------------------------------------ */

.pf-phasestrip {
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* Visual/UX correction pass: replaces the previous plain "five thin
   top-border lines" stepper with a connected node + line system-navigator —
   the SAME dot/line visual language the Project Map already establishes
   (.pf-map__node), reused here so the two navigation surfaces read as one
   coherent Zorvix system rather than two unrelated widgets. Still exactly
   five <li> items, an <ol> inside a labelled <nav>, aria-current="step" on
   the current item — no semantic change. */
.pf-phasestrip__list {
  --pf-phasestrip-gap: clamp(8px, 2vw, 24px);
  list-style: none;
  display: flex;
  gap: var(--pf-phasestrip-gap);
  margin: 0;
  padding: 0;
}

.pf-phasestrip__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z-steel-dim);
  transition: color var(--t-med) var(--ease);
}

.pf-phasestrip__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--z-steel-dim);
  transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), width var(--t-med) var(--ease), height var(--t-med) var(--ease);
}

/* The connecting line segment leading OUT of each non-final step, drawn
   across this item's own remaining width plus the flex gap — reaching
   exactly the next item's node under the shared equal-width (flex: 1 1 0)
   layout, mirroring .pf-map__node's own top/bottom absolute-line technique
   turned horizontal. */
.pf-phasestrip__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: calc(100% - 7px + var(--pf-phasestrip-gap));
  height: 1px;
  background: var(--z-steel-dim);
  transition: background var(--t-med) var(--ease);
}

.pf-phasestrip__item--done {
  color: var(--z-steel);
}

.pf-phasestrip__item--done .pf-phasestrip__node {
  background: var(--z-steel);
}

.pf-phasestrip__item--done:not(:last-child)::after {
  background: var(--z-steel);
}

.pf-phasestrip__item--current {
  color: var(--z-ice);
}

.pf-phasestrip__item--current .pf-phasestrip__node {
  background: var(--z-orange);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 4px var(--pf-orange-wash);
}

@media (max-width: 480px) {
  .pf-phasestrip__item {
    font-size: 10px;
    letter-spacing: 0.05em;
    padding-top: 14px;
  }
}

/* Progress ring (visual redesign pass) — purely decorative, aria-hidden
   in the markup; hidden below 1280px so the mobile/tablet composition
   stays the same simple, already-verified horizontal phase strip rather
   than cramming a ring somewhere it doesn't comfortably fit. Real values
   only (renderProgressRing() computes currentIndex/PHASES.length from the
   same state the phase strip already uses — never a hard-coded "1/4"). */
.pf-progress-ring {
  display: none;
}

@media (min-width: 1280px) {
  /* Visual correction pass: the ring keeps its "premium glass surface"
     reading from the shared .pf-rail glass card it already sits inside
     (a second, fully separate nested glass panel here would compete with
     it rather than reinforce it) — a quiet divider marks it as its own
     module within that card. Its progress SWEEP is now cyan ("progress
     energy"), not orange — orange stays reserved for the single small
     current-step dot added below on .pf-progress-ring__phase, matching
     how every other current/selected signal in this file (routes, chips,
     phase strip) is a small precise accent rather than a whole element
     painted orange. */
  .pf-progress-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(146, 214, 255, 0.12);
  }

  .pf-progress-ring__eyebrow {
    margin: 0;
    font-family: var(--pf-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--pf-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--z-steel-dim);
  }

  .pf-progress-ring__dial {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* A faint outer rim, independent of the mask on ::before, so the dial
     reads as a dimensional object (rim + sweep + core) rather than a flat
     ring, without affecting the mask math below. */
  .pf-progress-ring__dial::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(146, 214, 255, 0.14);
  }

  .pf-progress-ring__dial::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--pf-finder-cyan-strong) calc(var(--pf-ring-pct, 20) * 1%), rgba(146, 214, 255, 0.14) 0);
    -webkit-mask-image: radial-gradient(closest-side, transparent 68%, #000 69%);
    mask-image: radial-gradient(closest-side, transparent 68%, #000 69%);
    filter: drop-shadow(0 0 10px rgba(88, 196, 255, 0.35));
  }

  .pf-progress-ring__value {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-family: var(--pf-font-mono);
  }

  .pf-progress-ring__num {
    font-size: 26px;
    font-weight: 700;
    color: var(--z-ice);
  }

  .pf-progress-ring__den {
    font-size: 13px;
    color: var(--z-steel);
  }

  .pf-progress-ring__phase {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--z-ice);
  }

  /* The one small orange accent in this whole module — a precise "you are
     here" signal, the same restrained-dot convention already used by
     .pf-route--active/.pf-chip-label--selected/.pf-phasestrip__item--current
     rather than repainting the ring itself orange. */
  .pf-progress-ring__phase::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--z-orange);
    box-shadow: 0 0 0 3px var(--pf-orange-wash);
    flex-shrink: 0;
  }

  /* The phase strip becomes a vertical stepper inside the rail — the same
     dot/line "system" language .pf-map__node already uses elsewhere in
     this file, turned into a column. No class/id/aria attribute differs
     from the horizontal version; only position/size/axis do. */
  .pf-rail .pf-phasestrip__list {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 100%;
  }

  .pf-rail .pf-phasestrip__item {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-top: 0;
    padding-left: 15px;
    text-align: left;
  }

  .pf-rail .pf-phasestrip__node {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .pf-rail .pf-phasestrip__item:not(:last-child)::after {
    top: calc(50% + 9px);
    left: 3px;
    bottom: -20px;
    width: 1px;
    height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Layout: rail + surface + map                                        */
/*                                                                      */
/* Visual redesign pass: a third grid child, .pf-rail (progress ring +  */
/* phase strip — see the next section), joins the pre-existing surface  */
/* and map. Below 1280px there still isn't a clean three-column desktop */
/* composition available (999px and below are explicitly required      */
/* acceptance widths and must stay genuinely usable, not a cramped      */
/* shrink of the wide layout), so the rail instead sits as a slim full- */
/* width strip above the question, matching this Finder's pre-redesign  */
/* behavior at those sizes — only the ≥1280px tier gets the reference's  */
/* three-zone composition.                                              */
/* ------------------------------------------------------------------ */

.pf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas: "rail rail" "surface map";
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.pf-rail {
  grid-area: rail;
}

.pf-surface {
  grid-area: surface;
  position: relative;
  background: var(--z-surface);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-lg);
  padding: clamp(24px, 4vw, 48px);
  min-width: 0;
  box-shadow: var(--pf-shadow-surface);
}

/* Glass/refractive question surface — desktop only (≥1280px), where the
   cinematic atmosphere behind it is actually visible; below that width
   the plain opaque --z-surface fill above stays exactly as it already
   was, which keeps text contrast simple and unambiguous at every
   narrower required acceptance width. A one-pixel gradient "edge" (the
   ::before below, built with the standard mask-composite double-layer
   technique) stands in for a lit refractive rim without ever drawing a
   blurred glow over the form controls themselves. */
@media (min-width: 1280px) {
  /* Visual correction pass: the question surface becomes the hero
     interaction object the reference gives it — a genuinely dimensional
     glass shell rather than "a conventional dark panel," achieved with
     more generous padding (more presence/breathing room), a stronger
     outer shadow (real depth against the now-visible artwork behind it),
     and a soft cyan ambient glow beneath it — layered ON TOP of the
     existing lit-edge ::before below, not replacing it. */
  .pf-surface {
    padding: clamp(32px, 4.6vw, 56px);
    background: var(--pf-finder-glass-bg-strong);
    border-color: var(--pf-finder-glass-border);
    box-shadow: var(--pf-shadow-surface), 0 40px 90px -40px rgba(3, 8, 18, 0.7), 0 0 120px -60px var(--pf-finder-glow-cyan);
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pf-surface {
      background: rgba(13, 24, 46, 0.58);
      backdrop-filter: blur(22px) saturate(1.2);
      -webkit-backdrop-filter: blur(22px) saturate(1.2);
    }
  }

  /* Send correction: a calmer, more focused reading ("the project is
     ready") than the busier Question/Review screens — CSS-only via :has(),
     no phase flag needed in the markup/state. Browsers without :has()
     simply keep the same surface treatment as every other phase, which is
     still fully correct, just slightly less calmed — a safe, harmless
     degradation. */
  .pf-surface:has(.pf-send) {
    background: rgba(11, 20, 38, 0.62);
    box-shadow: var(--pf-shadow-surface), 0 30px 70px -40px rgba(3, 8, 18, 0.6);
  }

  .pf-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* Palette correction: this luminous edge was accidentally mixed with an
       ambient orange stop in the previous pass — orange is reserved for the
       active/current/selected signal only, so the edge is now cyan-forward
       throughout, matching the new artwork's own cool palette. */
    background: linear-gradient(135deg, rgba(148, 189, 245, 0.35), rgba(88, 196, 255, 0.45) 55%, transparent 85%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

@media (max-width: 999px) {
  .pf-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "rail" "surface" "map";
  }
}

/* Hardening pass item 6: the decorative map and its accessible edit list
   now share one grid-child wrapper, .pf-map-wrap (see the "Project Map"
   section below) — ordering the old .pf-map alone no longer moves anything,
   since .pf-map is no longer itself a direct child of .pf-layout. Tablet
   (768-999px) keeps the approved compact "Project so far" treatment ABOVE
   the active question; mobile (<=767px) is intentionally left with no order
   override here, so it stays question-first in plain source order, with the
   vertical-trail map appearing after the question as before. */
@media (max-width: 999px) and (min-width: 768px) {
  .pf-layout {
    grid-template-areas: "rail" "map" "surface";
  }
}

/* Wide desktop: the reference's three-zone composition (progress rail /
   question surface / supporting rail) — a real third column, not a
   simulated one. 1280px is chosen so every explicitly required
   acceptance width at or above it (1280/1366/1440/1600/1920) gets the
   full composition, while every required width below it (1099 and down)
   keeps the already-verified narrower behavior above untouched. */
@media (min-width: 1280px) {
  .pf-layout {
    grid-template-columns: 240px minmax(0, 1fr) 260px;
    grid-template-areas: "rail surface map";
    gap: clamp(28px, 2.2vw, 40px);
    align-items: start;
  }

  .pf-rail {
    position: sticky;
    top: clamp(24px, 4vw, 64px);
  }
}

@media (min-width: 1600px) {
  .pf-layout {
    grid-template-columns: 264px minmax(0, 1fr) 288px;
  }
}

/* ------------------------------------------------------------------ */
/* Rail: progress ring + phase strip (visual redesign pass)             */
/* ------------------------------------------------------------------ */

.pf-rail {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.pf-rail .pf-phasestrip {
  margin-bottom: 0;
}

/* Left editorial intro (visual correction pass): real, visible, accessible
   copy (never aria-hidden — unlike the decorative progress ring, this is
   genuinely informative text) restoring the reference's "strong editorial
   anchor" reading of the left zone. Shown only in the ≥1280px three-zone
   composition this content was designed for — below that width the rail
   collapses back to the already-verified compact strip (just the ring and
   phase strip), so mobile/tablet never gain a large repeated text block on
   every phase transition; the desktop composition section of the brief is
   what specifically calls for restoring this zone's visual weight. */
.pf-rail-intro {
  display: none;
}

@media (min-width: 1280px) {
  .pf-rail {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    background: var(--pf-finder-glass-bg);
    border: 1px solid var(--pf-finder-glass-border);
    border-radius: var(--pf-radius-lg);
    padding: 26px 22px 30px;
    box-shadow: var(--pf-shadow-surface);
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pf-rail {
      background: rgba(17, 30, 56, 0.42);
      backdrop-filter: blur(20px) saturate(1.15);
      -webkit-backdrop-filter: blur(20px) saturate(1.15);
    }
  }

  .pf-rail-intro {
    display: block;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(146, 214, 255, 0.12);
  }

  .pf-rail-intro__heading {
    margin: 0 0 14px;
    font-size: clamp(26px, 2.3vw, 33px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--z-ice);
  }

  .pf-rail-intro__copy {
    margin: 0 0 18px;
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--z-steel);
  }

  .pf-rail-intro__trust {
    margin: 0;
    max-width: 30ch;
    font-size: 12px;
    line-height: 1.55;
    color: var(--z-steel-dim);
  }
}

/* ------------------------------------------------------------------ */
/* Define — entry routes (§12)                                         */
/* ------------------------------------------------------------------ */

.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--pf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-orange);
}

.pf-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--z-orange);
}

.pf-define {
  display: block;
}

.pf-define__heading,
.pf-question__heading,
.pf-review__heading,
.pf-send__heading {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pf-define__heading {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  color: var(--z-ice);
}

/* Visual correction pass: every phase heading receives a programmatic
   focus() on transition (focusElement(), so the right content is announced
   and keyboard focus lands somewhere sane) — the PREVIOUS pass answered the
   resulting default focus rectangle by suppressing it outright
   (`outline: none`) on this and the other three phase headings below. An
   external accessibility review correctly flagged that as a regression:
   removing a focus indicator from an element that legitimately receives
   focus is never acceptable merely because the default browser rectangle
   looked visually unplanned. Fixed here by giving all four phase headings
   ONE shared, intentional focus treatment instead (immediately below) —
   the same orange outline already used for every other interactive
   :focus-visible state in this file (buttons, chips, routes, inputs), just
   pulled further away from the glyphs (a larger offset + soft rounding)
   so it reads as a deliberate framing device around the heading rather
   than a tight default box hugging the text. */

.pf-define__heading:focus-visible,
.pf-question__heading:focus-visible,
.pf-review__heading:focus-visible,
.pf-send__heading:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 8px;
  border-radius: 6px;
}

.pf-define__supporting {
  margin: 0 0 32px;
  max-width: 56ch;
  color: var(--z-steel);
  font-size: 16px;
  line-height: 1.65;
}

.pf-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 767px) {
  .pf-routes {
    grid-template-columns: 1fr;
  }
}

.pf-route {
  position: relative;
  text-align: left;
  background: var(--z-navy);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-lg);
  padding: 20px 22px 20px 26px;
  min-height: 44px;
  color: var(--z-ice);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* A restrained left-edge signal bar — replaces "the whole rectangle turns
   orange" with a single precise accent, consistent with how the phase strip
   and Project Map both signal state via one accent element, never a filled
   block. */
.pf-route::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}

.pf-route:hover {
  border-color: var(--z-steel);
  box-shadow: var(--pf-shadow-card);
  transform: translateY(-1px);
}

/* item 12: the interactive/focusable element is now the native
   <input type="radio"> itself (visually hidden below), not the <label> —
   :focus-within lets the label still show a focus ring on keyboard focus. */
.pf-route:focus-within {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

.pf-route--active {
  border-color: var(--pf-orange-border);
  background: var(--z-elevated);
  box-shadow: var(--pf-shadow-card);
}

.pf-route--active::before {
  background: var(--z-orange);
}

.pf-route__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

.pf-route__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-route__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.pf-route__hint {
  font-size: 13px;
  color: var(--z-steel);
}

/* ------------------------------------------------------------------ */
/* Understand / Shape — questions (§13/§16)                            */
/* ------------------------------------------------------------------ */

.pf-question {
  display: block;
}

.pf-question__heading {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.7vw, 28px);
  line-height: 1.25;
}

/* focus-visible treatment for this heading now lives with the other three
   phase headings' shared rule near the top of this file (accessibility
   correction pass) — removed the duplicate `outline: none` that used to
   live here so it can no longer shadow that shared rule later in the
   cascade. */

/* Visual/UX correction pass: one consistent "(optional)" indicator style —
   a small tracked-caps tag — used identically here and on every Send field
   (project-finder.css's Send section reuses this exact same class, never a
   second, divergent optional-indicator treatment). */
.pf-question__optional {
  display: inline-block;
  margin: 0 0 20px;
  padding: 2px 9px;
  border: 1px solid var(--pf-border-strong);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--z-steel-dim);
}

.pf-question__hint {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--z-steel);
}

.pf-question__empty {
  color: var(--z-steel);
  font-size: 14px;
}

/* item 14: a single, calm free-text privacy note near the first
   meaningful description field — never styled as an alarm/warning. */
.pf-privacy-note {
  margin: 0 0 24px;
  max-width: 56ch;
  padding: 10px 14px;
  border-left: 2px solid var(--z-steel-dim);
  color: var(--z-steel);
  font-size: 13px;
  line-height: 1.5;
}

.pf-question-form {
  margin: 0;
}

/* Final micro-hardening pass item 1: Define is now a real <form> — reset
   the browser's default form margin, matching .pf-question-form above.
   .pf-routes/.pf-route/.pf-route--active/.pf-field/.pf-nav/.pf-validation
   are all pre-existing descendant selectors (no `>` child combinators), so
   the added form/fieldset nesting renders correctly under them unchanged. */
.pf-define-form {
  margin: 0;
}

.pf-field {
  border: 0;
  margin: 0 0 28px;
  padding: 0;
}

.pf-option-text-slot:not(:empty) {
  margin-top: -14px;
  margin-bottom: 28px;
}

/* item 4: an inline, accessible, non-alarming validation message — shown
   only after a failed Continue attempt on this question.
   Visual/UX correction pass: rendered snapshots of the Send screen's error
   state (finding #8, label/field/helper spacing discipline) showed this
   message's text crowding/touching the control's bottom border — the
   original -14px pull-up, combined with this text's own line-height
   leading, left an almost-zero visible gap between the border and the
   glyphs. Empirically measured (rendered box position + actual glyph
   ink, not just the CSS box) against the taller `--pf-control-h`
   controls and recalibrated to +3px, which yields a clean ~8px visible
   gap — consistent with this design's other small vertical rhythms —
   while the message still sits close enough to read as attached to its
   own field rather than floating toward the next one. Shared by both the
   Question phase and the Send phase (no separate per-phase override), so
   both benefit identically; nothing else about the rule, the element's
   markup, or its accessible role/name changed. */
.pf-validation {
  margin: 3px 0 20px;
  max-width: 56ch;
  color: var(--z-orange);
  font-size: 13px;
  line-height: 1.5;
}

.pf-validation[hidden] {
  display: none;
}

.pf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* item 12: both single-select (native radio) and multi-select/chips
   (native checkbox) share one pill-style label pattern — the underlying
   input is real, focusable and labelled, just visually hidden, since the
   label itself already carries the selected/hover/focus treatment.
   Visual/UX correction pass: adds one small leading signal dot (::before,
   purely decorative generated content — the label's real accessible text
   is unchanged) so selection reads as a deliberate system signal rather
   than only a background-color swap; the exact same class is reused for
   every question chip AND the Send screen's preferred-contact/timeline
   chips, so all three read as one consistent chip system. */
.pf-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px 10px 16px;
  border: 1px solid var(--pf-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--z-ice);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.pf-chip-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--z-steel-dim);
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.pf-chip-label:hover {
  border-color: var(--z-steel);
}

.pf-chip-label:hover::before {
  background: var(--z-steel);
}

.pf-chip-label:focus-within {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

.pf-chip-label--selected {
  border-color: var(--pf-orange-border);
  background: var(--pf-orange-wash);
  color: var(--z-ice);
}

.pf-chip-label--selected::before {
  background: var(--z-orange);
  box-shadow: 0 0 0 3px var(--pf-orange-wash-strong);
}

/* Visual correction pass — major answer-option correction: the compact
   pill above stays exactly as-is for the Send screen's own lightweight
   preferred-contact/timeline chips (a real utility choice, not the main
   interaction), but the Question phase's real answer options — the
   reference's dominant "substantial selectable modules" — now get a much
   larger, card-like presentation of the SAME markup: same <label>, same
   visually-hidden native input, same class names, same
   pf-chip-label--selected toggle, same event hooks. Nothing about
   semantics, values, or behavior changes here — every rule below is
   `.pf-question` (or `.pf-question-form`, its descendant) ancestor-scoped,
   so it can never affect Send's own chip usage. Where a question happens
   to carry many options, the auto-fill grid below simply wraps to more
   rows rather than forcing a fixed column count that would harm
   usability. */
.pf-question .pf-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.pf-question .pf-chip-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 18px 20px;
  border-radius: var(--pf-radius-lg);
  background: rgba(13, 24, 46, 0.34);
  border: 1px solid var(--pf-finder-glass-border);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* The leading dot becomes a small square marker at module scale — still
   purely decorative/generic (no per-option icon data exists to draw from,
   so nothing fabricated here), just sized to match the module rather than
   a pill. */
.pf-question .pf-chip-label::before {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  background: rgba(146, 214, 255, 0.10);
  border: 1px solid var(--pf-finder-glass-border);
}

.pf-question .pf-chip-label:hover {
  border-color: var(--pf-finder-cyan-strong);
  background: rgba(13, 24, 46, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgba(88, 196, 255, 0.55);
}

.pf-question .pf-chip-label:hover::before {
  background: rgba(88, 196, 255, 0.20);
}

.pf-question .pf-chip-label:focus-within {
  outline-offset: 3px;
}

.pf-question .pf-chip-label--selected {
  border-color: var(--pf-orange-border);
  background: var(--pf-orange-wash);
  box-shadow: 0 0 0 1px var(--pf-orange-border), 0 16px 32px -18px rgba(226, 101, 11, 0.4);
}

.pf-question .pf-chip-label--selected::before {
  background: var(--z-orange);
  border-color: var(--z-orange);
  box-shadow: 0 0 0 3px var(--pf-orange-wash-strong);
}

@media (max-width: 480px) {
  .pf-question .pf-options {
    grid-template-columns: 1fr;
  }
}

.pf-chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

.pf-chip-text {
  pointer-events: none;
}

.pf-text-input,
.pf-textarea {
  width: 100%;
  max-width: 640px;
  background: var(--z-navy);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-sm);
  padding: 13px 15px;
  color: var(--z-ice);
  font-family: var(--font-ui);
  font-size: 15px;
  min-height: var(--pf-control-h);
  transition: border-color var(--t-fast) var(--ease);
}

.pf-textarea {
  resize: vertical;
}

.pf-textarea--compact {
  min-height: 72px;
}

.pf-text-input:focus-visible,
.pf-textarea:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
  border-color: var(--z-orange);
}

.pf-field__extra {
  margin-top: 4px;
}

.pf-field__extra-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--z-steel);
}

.pf-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pf-btn {
  min-height: var(--pf-control-h);
  padding: 10px 22px;
  border-radius: var(--pf-radius-md);
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.pf-btn:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

/* Visual correction pass: a more dimensional, controlled-glow primary
   button — a subtle lighten-toward-top gradient (still solidly orange,
   never a hue shift) plus a slightly wider, softer shadow reads as
   "premium" rather than a flat filled rectangle; hover/disabled states
   are unchanged in behavior, just tuned to match. */
.pf-btn--primary {
  background: linear-gradient(180deg, #ef8a2e, var(--z-orange));
  border: 1px solid var(--z-orange);
  color: var(--z-deep);
  font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(226, 101, 11, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pf-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -14px rgba(226, 101, 11, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.pf-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Visual correction pass: Back/secondary now reads as a refined glass
   surface (matching the surface/rail glass language) rather than a plain
   transparent outline — still visibly quieter than the primary button, but
   unmistakably interactive rather than looking disabled. */
.pf-btn--ghost {
  background: rgba(146, 214, 255, 0.05);
  border: 1px solid var(--pf-finder-glass-border);
  color: var(--z-ice);
}

.pf-btn--ghost:hover {
  border-color: var(--pf-finder-cyan-strong);
  background: rgba(146, 214, 255, 0.10);
}

.pf-btn--text {
  background: transparent;
  border: 1px solid transparent;
  color: var(--z-steel);
}

.pf-btn--text:hover {
  color: var(--z-ice);
}

/* ------------------------------------------------------------------ */
/* Review / Snapshot (§17–§20)                                         */
/* ------------------------------------------------------------------ */

.pf-review {
  display: block;
}

.pf-review__heading {
  margin: 0 0 24px;
  font-size: clamp(22px, 3vw, 30px);
}

/* focus-visible treatment for this heading now lives with the other three
   phase headings' shared rule (accessibility correction pass). */

/* Visual correction pass — Review as an assembled "project blueprint"
   rather than plain dark boxes: each answer group becomes its own
   connected module (rounded glass card, small schematic connector node on
   the left rail, threaded together by a continuous vertical line) instead
   of a flat divider list. Purely presentational — same elements, same
   .pf-snapshot-section/__head/__title/__framing classes, same Edit
   (.pf-change) button, same content and order. */
.pf-snapshot-section {
  position: relative;
  margin: 0 0 14px;
  padding: 18px clamp(14px, 4vw, 20px) 18px clamp(20px, 6vw, 28px);
  border: 1px solid rgba(146, 214, 255, 0.12);
  border-radius: var(--pf-radius-lg);
  background: rgba(13, 24, 46, 0.24);
}

/* At the narrowest required widths every pixel of content column matters
   more than the module's own connector geometry — pull the connector in
   rather than let the module's padding compete with its own content
   (this is what caused a real, measured horizontal-overflow regression at
   320px during the responsive sweep: .pf-service__head's badge no longer
   had room to sit beside its label at the previous fixed 28px inset). */
@media (max-width: 380px) {
  .pf-snapshot-section::before {
    left: 8px;
  }

  .pf-snapshot-section:not(:last-child)::after {
    left: 11px;
  }
}

.pf-snapshot-section:last-child {
  margin-bottom: 0;
}

/* The schematic connector: a small node marking this module, plus a
   vertical line threading down to the next one — the "connection
   geometry" the brief asks for, built the same dot/line way this file
   already draws the phase strip and Project Map, just vertical here. */
.pf-snapshot-section::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-finder-cyan-strong);
  box-shadow: 0 0 0 3px var(--pf-finder-glow-cyan-soft);
}

.pf-snapshot-section:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 31px;
  left: 15px;
  width: 1px;
  height: calc(100% - 7px);
  background: rgba(146, 214, 255, 0.18);
}

.pf-snapshot-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pf-snapshot-section__title {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--z-ice);
}

.pf-snapshot-section__framing {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--z-steel);
  font-style: italic;
}

/* A more deliberate "Edit" control than a bare text link — a quiet
   pill outline that lights up cyan on hover/focus, still unmistakably
   secondary to the primary Continue action elsewhere on the page. */
.pf-change {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid rgba(146, 214, 255, 0.18);
  border-radius: 999px;
}

.pf-change:hover {
  color: var(--z-ice);
  border-color: var(--pf-finder-cyan-strong);
  background: rgba(88, 196, 255, 0.08);
}

/* item 10: Improve mode's combined "Current situation" section renders as
   one row per contributing answer (improve.exists / improve.failing),
   each with its own clearly-labeled Change control, instead of one row
   with a single ambiguous button. */
.pf-snapshot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 14px;
}

.pf-snapshot-row:last-child {
  margin-bottom: 0;
}

.pf-snapshot-row .pf-answer-value,
.pf-snapshot-row > div,
.pf-snapshot-row > p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pf-snapshot-section--unknowns {
  opacity: 0.92;
}

.pf-answer-value p {
  margin: 0 0 8px;
  color: var(--z-ice);
  line-height: 1.6;
}

.pf-taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
}

.pf-taglist li {
  background: var(--z-navy);
  border: 1px solid rgba(236, 240, 247, 0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--z-ice);
}

.pf-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-service {
  border: 1px solid rgba(236, 240, 247, 0.12);
  border-radius: 4px;
  padding: 16px 18px;
  background: var(--z-navy);
}

.pf-service--lead {
  border-color: rgba(226, 101, 11, 0.4);
}

.pf-service--additional {
  opacity: 0.75;
}

.pf-service__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
}

.pf-service__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--z-ice);
}

.pf-badge {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--z-orange);
  border: 1px solid rgba(226, 101, 11, 0.5);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.pf-service__wording {
  margin: 8px 0 0;
  color: var(--z-steel);
  font-size: 13px;
  line-height: 1.5;
}

.pf-flow {
  margin: 0;
  padding-left: 20px;
  color: var(--z-ice);
}

.pf-flow__step {
  padding: 4px 0;
  line-height: 1.5;
}

.pf-unknowns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-unknowns li {
  border-left: 2px solid var(--z-steel-dim);
  padding: 4px 0 4px 14px;
  color: var(--z-steel);
  font-size: 14px;
  line-height: 1.5;
}

.pf-review__boundary {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(236, 240, 247, 0.10);
  color: var(--z-steel);
  font-size: 14px;
  max-width: 60ch;
}

/* ------------------------------------------------------------------ */
/* Project Map (§14/§15)                                               */
/* ------------------------------------------------------------------ */

.pf-map__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pf-map__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 10px 4px;
}

.pf-map__node:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 32px;
  bottom: -10px;
  width: 1px;
  background: var(--z-steel-dim);
}

.pf-map__dot {
  width: var(--node-dormant, 4px);
  height: var(--node-dormant, 4px);
  border-radius: 50%;
  background: var(--z-steel-dim);
  flex-shrink: 0;
  transition: background var(--t-med) var(--ease), width var(--t-med) var(--ease), height var(--t-med) var(--ease);
}

.pf-map__node--filled .pf-map__dot {
  background: var(--z-steel);
}

.pf-map__node--active .pf-map__dot {
  background: var(--z-orange);
  width: var(--node-terminal, 8px);
  height: var(--node-terminal, 8px);
  box-shadow: 0 0 0 4px var(--pf-orange-wash);
}

.pf-map__label {
  font-size: 13px;
  color: var(--z-steel-dim);
}

.pf-map__node--filled .pf-map__label {
  color: var(--z-steel);
}

.pf-map__node--active .pf-map__label {
  color: var(--z-ice);
  font-weight: 600;
}

@media (max-width: 999px) and (min-width: 768px) {
  /* Tablet: compact horizontal strip rather than a vertical list. */
  .pf-map__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .pf-map__node:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Mobile: compact vertical trail — same list, tighter spacing, smaller type. */
  .pf-map__node {
    padding: 6px 0 6px 4px;
  }
  .pf-map__label {
    font-size: 12px;
  }
}

/* item 11: the real, always-accessible, keyboard-reachable edit list that
   sits alongside (never instead of) the decorative aria-hidden visual map
   above — every filled/editable node gets a real, labelled, focusable
   control here, not just a graphic. */
.pf-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Supporting right-hand rail treatment (visual redesign pass, desktop
   only). This is the same real "Project so far" content that already
   existed — a decorative trail plus its own always-accessible edit
   list — now framed as a deliberate glass panel to match the rail on the
   opposite side, rather than adding any new copy, icon, or control.
   No fake video button, no invented feature: an informational panel with
   nothing in it beyond the visitor's own real progress was judged more
   honest than inventing marketing copy this screen never had. */
@media (min-width: 1280px) {
  .pf-map-wrap {
    position: sticky;
    top: clamp(24px, 4vw, 64px);
    background: var(--pf-finder-glass-bg-strong);
    border: 1px solid var(--pf-finder-glass-border);
    border-radius: var(--pf-radius-lg);
    padding: 26px 22px 30px;
    box-shadow: var(--pf-shadow-surface);
  }

  /* Visual correction pass: against the new bright artwork, the panel's
     previous lighter tint left the mostly-faded "not yet answered" trail
     items low-contrast to the point of reading as empty space rather than
     upcoming steps. A stronger, more saturated glass fill (still the same
     token family used everywhere else, just the "-strong" variant already
     defined for the question surface) restores that legibility without
     inventing any new visual language. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pf-map-wrap {
      background: rgba(9, 17, 32, 0.66);
      backdrop-filter: blur(22px) saturate(1.15);
      -webkit-backdrop-filter: blur(22px) saturate(1.15);
    }
  }

  /* A quiet divider so the always-accessible Edit list reads as part of
     this same panel/module rather than a second, disconnected element
     floating below it. */
  .pf-map-edit {
    display: block;
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgba(146, 214, 255, 0.12);
  }
}

/* Visual/UX correction pass: a small tracked eyebrow label above the rail —
   the journey rail previously had no heading of its own at all, which was
   part of why it read as "visually weak" despite the space it occupies.
   Purely a visible label; the rail's own real accessible name
   ("Project so far", the .pf-map-edit nav's aria-label) is unchanged. */
.pf-map-eyebrow {
  margin: 0;
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--pf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-steel-dim);
}

.pf-map-edit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-map-edit__item {
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--pf-radius-sm);
  font-size: 13px;
}

.pf-map-edit__item:hover {
  color: var(--z-ice);
  background: rgba(236, 240, 247, 0.05);
}

@media (max-width: 999px) {
  .pf-map-wrap {
    gap: 12px;
  }

  /* External-review correction (visual closeout pass, Blocker 4): the
     decorative, aria-hidden Project Map (.pf-map) and the real, keyboard-
     accessible edit list (.pf-map-edit) show essentially the same
     "journey so far" content twice — at tablet the decorative map turns
     horizontal (the 768-999px rule above) while the real edit list stays
     a full vertical list right below it, producing several hundred
     pixels of duplicate, dead space before the Finder surface even
     starts; on mobile both surfaces persist as a long duplicate tail
     after the surface. Only the DECORATIVE, aria-hidden map is hidden
     here — never .pf-map-edit itself, which remains fully in the DOM,
     fully keyboard-reachable, and fully unaffected by this rule. Desktop
     (>999px) is completely unchanged — this whole block is scoped to
     max-width: 999px only. */
  .pf-map {
    display: none;
  }

  /* The one remaining "journey so far" surface at this size is now
     .pf-map-edit alone — redesigned here from a vertical list into a
     compact, wrapped row of chip-style controls, so it reads as a short
     recap strip rather than a second, full-height vertical list. Every
     control keeps its existing tag/role/click-handler/aria-label
     (render.js is unchanged) — only its visual presentation changes. */
  .pf-map-edit__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pf-map-edit__item {
    width: auto;
    padding: 6px 12px;
    border: 1px solid var(--pf-border-strong);
    border-radius: 999px;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Fatal error state (§37)                                             */
/* ------------------------------------------------------------------ */

.pf-error {
  max-width: 60ch;
  margin: 96px auto;
  padding: 0 24px;
  text-align: center;
  color: var(--z-ice);
}

.pf-error h2 {
  margin: 0 0 12px;
}

.pf-error p {
  color: var(--z-steel);
  line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* JavaScript-unavailable fallback (§37) — see start-a-project.php's    */
/* <noscript> block, which uses these same tokens inline via a small    */
/* embedded style since <noscript> content renders before this          */
/* stylesheet is guaranteed to have been parsed in every edge case.     */
/* ------------------------------------------------------------------ */

.pf-noscript {
  max-width: 60ch;
  margin: 96px auto;
  padding: 0 24px;
  text-align: center;
  color: var(--z-ice);
  font-family: var(--font-ui);
}

/* ------------------------------------------------------------------ */
/* Send (Phase 1C-B1) — reuses every token/pattern already established  */
/* above (pf-field/pf-text-input/pf-textarea/pf-options/pf-chip-label/   */
/* pf-validation/pf-nav/pf-btn) rather than inventing a second visual    */
/* language; only genuinely new shapes (the summary strip, the combined  */
/* consent control, the error summary) get their own rules here.        */
/*                                                                       */
/* VISUAL/UX CORRECTION PASS (HIGH PRIORITY): the field-level containers */
/* below were rebuilt as ONE CSS grid (.pf-send-form) instead of         */
/* separate ad-hoc flex rows — every field's id/name/value/order/aria    */
/* wiring is byte-for-byte unchanged (render.js only adds a              */
/* `.pf-send-field--full` layout modifier class where a field should     */
/* span the full row); this is a pure alignment/geometry correction, not */
/* a field/contract change. The old per-block border-top separators      */
/* ("horizontal separators fragmenting the Send screen") are removed —   */
/* spacing and each block's own tracked title now carry that distinction */
/* instead of a line.                                                    */
/* ------------------------------------------------------------------ */

.pf-send {
  display: block;
}

.pf-send__heading {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  color: var(--z-ice);
}

/* focus-visible treatment for this heading now lives with the other three
   phase headings' shared rule (accessibility correction pass). */

.pf-send__supporting {
  margin: 0 0 28px;
  max-width: 56ch;
  color: var(--z-steel);
  font-size: 16px;
  line-height: 1.65;
}

/* The condensed, always-visible Snapshot summary strip (§4) — rebuilt to
   feel like the opening of a generated project brief: one bordered,
   elevated card, its title/eyebrow already the only signal needed to tell
   its blocks apart (no internal separator line). Width-matched to
   .pf-send-form below so the whole Send screen reads as one disciplined
   column, not a full-bleed strip sitting above a narrower form. */
.pf-send-summary {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 0 28px;
  padding: 22px 24px;
  max-width: 760px;
  background: var(--z-navy);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-card);
}

.pf-send-summary__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-send-summary__title {
  margin: 0;
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--pf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-orange);
}

.pf-send-summary__text {
  margin: 0;
  color: var(--z-ice);
  line-height: 1.6;
  font-size: 15px;
}

.pf-send__back-to-review {
  margin: 0 0 32px;
  padding-left: 0;
}

/* The core alignment fix: one disciplined desktop grid rather than
   independent flex rows — guarantees Name/Company and Email/Phone share
   exact column widths AND row heights, guarantees every full-width field
   (preferred contact, notes, timeline, consent) lines up to the same left
   edge, and needs no per-pair wrapper markup (render.js appends every
   field directly; grid auto-placement pairs them two-per-row in source
   order). Collapses to one column at the same 767px breakpoint every
   other Finder layout already uses. */
.pf-send-form {
  margin: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 28px;
  align-items: start;
}

.pf-send-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .pf-send-form {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

/* Phase 1C-B2 addition: the hidden anti-bot trap field (submission-
   controller.php's SUBMISSION_HONEYPOT_FIELD_NAME). Off-screen via
   position/left, deliberately NOT display:none/visibility:hidden (some
   simple bots skip fields hidden that way but still fill an off-screen
   one) — paired in render.js with tabindex="-1"/aria-hidden="true" so a
   real keyboard or screen-reader visitor never lands on it regardless of
   this file's own styling. Absolutely positioned, so it takes no grid
   track of its own regardless of source position. */
.pf-send-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Busy state while a real Send submission is in flight
   (beginSendSubmitBusyState()/endSendSubmitBusyState(), main.js/render.js).
   Only the submit button's own label/cursor changes — every already-typed
   Send field stays exactly as the visitor left it, editable or not, per
   §16's "Server-error behavior" (a field is never locked while a request
   most visitors will see resolve in well under a second is in flight). */
.pf-send-form[aria-busy='true'] #pf-send-submit {
  cursor: wait;
}

/* A page-level error summary (§17/§19) — shown only after a failed Send
   attempt, listing every field that needs attention, in addition to each
   field's own inline message. Same visual language as .pf-notice, tinted
   like .pf-validation to read as "needs your attention," never alarming.
   A [hidden] grid item creates no track, so this costs no layout space
   while hidden, exactly as before the grid rework. */
.pf-send-error-summary {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--pf-orange-border);
  border-radius: var(--pf-radius-md);
  background: var(--pf-orange-wash);
  color: var(--z-ice);
  font-size: 14px;
  line-height: 1.6;
}

.pf-send-error-summary[hidden] {
  display: none;
}

/* External-review correction (visual closeout pass, Blocker 1): a calm,
   non-alarming status shown near the Send action while submissions are
   temporarily unavailable — deliberately the SAME neutral visual language
   as `.pf-notice` (never the orange validation-error tint
   `.pf-send-error-summary` above uses), so it never reads as a server
   error or a field-level problem the visitor needs to fix. */
.pf-send-unavailable {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(236, 240, 247, 0.14);
  border-radius: 4px;
  background: var(--z-navy);
  color: var(--z-steel);
  font-size: 14px;
  line-height: 1.5;
}

.pf-send-error-summary p {
  margin: 0 0 8px;
}

.pf-send-error-summary ul {
  margin: 0;
  padding-left: 20px;
}

.pf-send-error-summary li {
  color: var(--z-orange);
  padding: 2px 0;
}

/* Width is now governed entirely by the grid/.pf-send-form's own
   max-width above, so every field (paired or full-width) shares exactly
   the same column geometry — no per-field max-width override needed.
   External-review correction (Blocker 2): every Send field also carries
   the generic `.pf-field` class (margin: 0 0 28px — the Question phase's
   own block-stacking spacing unit), which is ADDITIVE on top of
   `.pf-send-form`'s own `row-gap: 28px` (24px at the 767px collapse)
   since CSS Grid does not collapse a grid item's own margin into the
   gap. Left alone, every Send row carried both, compounding into a much
   larger and inconsistent gap than the grid's row-gap alone. Zeroed
   here so `.pf-send-form`'s row-gap is the SOLE authority for vertical
   spacing between Send fields; the generic `.pf-field` rule itself is
   untouched, so Question-phase spacing (a plain block-flow stack, not a
   grid) is completely unaffected. */
.pf-send-field {
  max-width: none;
  margin-bottom: 0;
}

.pf-send-field .pf-text-input,
.pf-send-field .pf-textarea {
  max-width: none;
}

.pf-send-field__label-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
}

/* External-review correction (Blocker 2): `.pf-question__optional` is a
   Question-phase component whose `margin-bottom: 20px` assumes it sits on
   its OWN line, stacked above the next block element (its original,
   unchanged context — untouched here). Inside `.pf-send-field__label-row`
   it instead sits INLINE, side-by-side with the field label as a flex
   child — a flex child's own margin is never collapsed away, so that same
   20px was inflating the label row's rendered height on every Send field
   that carries the tag (effectively every Send field, since none are
   required), on top of the label row's own intentional 10px margin-bottom
   above. That extra, purposeless height is exactly what could misalign a
   paired row's control position depending on which sibling happened to
   render the tag. Neutralized only in this Send-specific context; the
   Question-phase rule above is completely unchanged. */
.pf-send-field__label-row .pf-question__optional {
  margin: 0;
}

/* External-review correction (visual closeout pass, Blocker 2): the base
   `.pf-question__optional` rule above sets `display: inline-block` — an
   AUTHOR rule at the same (0,0,1,0) specificity as the `[hidden]` UA
   stylesheet rule it's meant to defer to. At equal specificity the
   AUTHOR rule wins regardless of source order, so setting the DOM
   `hidden` property on a Send field's optional tag (render.js's
   `optionalTag.hidden = Boolean(required)`, and its in-place
   updateAfterSendFieldChange() toggle for Phone) never actually hid it —
   Name/Email's "(optional)" tag remained visible despite both fields
   being required. This attribute-selector-boosted override
   ((0,0,2,0) specificity) reliably wins over the base rule without
   touching its declaration or any other context `.pf-question__optional`
   already appears in (the Question phase's own always-conditionally-
   rendered, never dynamically-hidden, "Optional" tag is completely
   unaffected).

   `visibility: hidden` rather than `display: none` is deliberate here,
   and is itself a Blocker 3 fix, not just a Blocker 2 one: `display: none`
   removes the tag from layout entirely, so a label row that has a visible
   badge (an optional field, e.g. Phone by default) renders measurably
   TALLER than one whose badge is hidden (a required field, e.g. Email) —
   `.pf-send-field__label-row` is `align-items: baseline`, so that
   height difference shows up as a different top offset for the two
   fields' INPUTS directly below them, silently reopening the exact
   Email/Phone misalignment Blocker 3 fixes elsewhere in this file.
   `visibility: hidden` keeps the hidden tag's layout box (so every label
   row is the same height regardless of required/optional state) while
   still making it fully invisible to sighted users AND excluded from the
   accessibility tree (the same `hidden` DOM attribute is also always
   present whenever this applies) — never announced, never rendered,
   exactly like `display: none` from every user-facing perspective, just
   without the layout side effect. Scoped to the Send label-row context
   only, matching where this tag is ever toggled at runtime. */
.pf-send-field__label-row .pf-question__optional[hidden] {
  visibility: hidden;
}

.pf-send-field__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--z-ice);
}

.pf-send-timeline-date {
  max-width: 240px;
}

/* The one combined consent checkbox (§9) — the native input sits inline
   with its own full compound copy as clickable label text, never an
   icon-only or ambiguous control. Wrapped as its own small card (rather
   than a bare checkbox floating in the form) so the final confirmation
   step before Send carries appropriate visual weight of its own. */
.pf-send-consent {
  /* External-review correction (final cleanup pass, item 2): the wrapper
     holds the consent <label> (checkbox + copy) and its own validation
     <p> as two stacked siblings — the default flex row direction let the
     visible error lay out beside the consent statement instead of
     cleanly underneath it. Column stacking is the narrow fix; the
     checkbox/label's own internal layout, touch target, and focus
     treatment (.pf-send-consent__label/__input below) are unchanged. */
  display: flex;
  flex-direction: column;
}

.pf-send-consent__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  min-height: 44px;
  cursor: pointer;
  color: var(--z-ice);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-md);
  background: var(--z-navy);
  transition: border-color var(--t-fast) var(--ease);
}

.pf-send-consent__label:hover {
  border-color: var(--z-steel);
}

.pf-send-consent__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--z-orange);
}

.pf-send-consent__input:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

.pf-send-consent__link {
  color: var(--z-ice);
  text-decoration: underline;
  text-decoration-color: var(--z-steel);
}

.pf-send-consent__link:hover {
  text-decoration-color: var(--z-orange);
}

/* The culmination action — deliberately more substantial than every other
   button on this screen (bigger, heavier weight, its own soft directional
   shadow), with clear enabled/disabled/focus-visible states; the "Sending…"
   busy-state label swap and aria-busy/disabled wiring are handled entirely
   in render.js/main.js and are unchanged here. */
.pf-send__submit {
  min-width: 220px;
  min-height: 52px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 28px -16px rgba(226, 101, 11, 0.55);
}

.pf-send__submit:disabled {
  box-shadow: none;
}

@media (max-width: 480px) {
  .pf-send-summary {
    padding: 18px 20px;
  }

  .pf-send__submit {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Success screen (Notifications + Success, architecture §8/§9.3/§30)   */
/*                                                                      */
/* VISUAL REDESIGN, CORRECTION PASS #2 (owner-directed, reference-image- */
/* led, external-review-corrected): this screen ONLY is deliberately     */
/* given a luminous, cinematic gradient/glow treatment, overriding this  */
/* file's own general "no gradient / no glassmorphism / no glow/neon"    */
/* rule stated in the header comment above. That general rule still      */
/* fully governs every other screen in this file (Define/Understand/     */
/* Shape/Review/Send) — none of those selectors are touched here, and no */
/* shared/global token is redefined. The teal/blue glow accents below    */
/* are new, LOCAL, success-screen-only custom properties declared on     */
/* .pf-success itself (--pf-success-*), never global :root tokens.       */
/*                                                                        */
/* BACKGROUND ASSET INTEGRATION (external review, pass #3): the bespoke  */
/* background-only asset requested in pass #2 has now been approved and  */
/* delivered, and is wired up through the same --pf-success-bg-image     */
/* hook this comment previously specified — no parallel styling system   */
/* was introduced. Actual file: assets/images/project-finder/            */
/* success-atmosphere.{avif,webp,jpg} (master source kept alongside as   */
/* success-atmosphere.png, never overwritten). See the final report for  */
/* exact dimensions/filesizes and the full integration write-up.         */
/*                                                                        */
/*   .pf-success {                                                       */
/*     --pf-success-bg-image: image-set(                                 */
/*       url("/assets/images/project-finder/success-atmosphere.avif") type("image/avif"), */
/*       url("/assets/images/project-finder/success-atmosphere.webp") type("image/webp"), */
/*       url("/assets/images/project-finder/success-atmosphere.jpg")     */
/*     );                                                                */
/*   }                                                                    */
/*                                                                        */
/* Placement note: the custom property is declared here on .pf-success   */
/* (so it stays discoverable at the same scope this comment has always   */
/* documented it at), but the image itself is painted by the descendant  */
/* .pf-success__atmosphere band below, not by .pf-success's own          */
/* background — this page's content can run to several thousand pixels   */
/* tall (long-content-stress, mobile), and a single `background-size:    */
/* cover` image stretched across the WHOLE component would have to blow  */
/* itself up to an extreme, unrecognizable crop to cover that height.    */
/* Confining the real photo to a top-anchored hero band (with a bottom   */
/* mask-fade into the existing navy gradient) is what actually satisfies */
/* "do not just use background-size: cover and assume the job is done."  */
/* .pf-success itself keeps only the plain navy gradient as its base —   */
/* the correct backdrop for everything below the hero band, and the      */
/* correct fallback if every image format in the image-set() ever fails. */
/*                                                                        */
/* Every animation below is purely decorative opacity/box-shadow and    */
/* explicitly disabled under prefers-reduced-motion (main.css's blanket */
/* --t-fast/--t-med clamp does not reach a keyframe `animation:`        */
/* declaration, so this block adds its own guard). Color is never the   */
/* only signal for anything meaningful — the reset-error and            */
/* copy-status text each carry their own wording, exactly as this file's */
/* existing §30 rule already requires elsewhere.                        */
/* ------------------------------------------------------------------ */

.pf-success {
  --pf-success-teal: #2FE0C0;
  --pf-success-blue: #3E7BD6;
  --pf-success-blue-bright: #6FB4FF;
  --pf-success-ice-glow: rgba(255, 255, 255, 0.16);
  --pf-success-max: 1600px;
  --pf-success-bg-image: image-set(
    url('/assets/images/project-finder/success-atmosphere.avif') type('image/avif'),
    url('/assets/images/project-finder/success-atmosphere.webp') type('image/webp'),
    url('/assets/images/project-finder/success-atmosphere.jpg') type('image/jpeg')
  );
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--z-deep) 0%, #0C2450 42%, #0A1F42 70%, var(--z-navy) 100%);
}

/* The real cinematic photo, confined to a top hero band (see placement
   note above). Height clamp matches what the previous CSS-only
   illustration used for the same band, so overall hero proportions are
   unchanged — only the artwork inside the band is now real. A
   mask-image fade at the bottom blends the photo into the plain navy
   gradient below rather than ending in a hard seam; the same mask
   applies to this element's ::before/::after overlay children too,
   since they paint within the same box. */
.pf-success__atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(460px, 62vw, 760px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-image: var(--pf-success-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 68% 22%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
}

/* Selective readability overlay, not a blanket dark sheet — the owner
   explicitly wants the page brighter and the photo to stay visible.
   A soft diagonal darkening covers only the upper-left quadrant, where
   the eyebrow/headline/body copy are laid directly over the image; the
   photo's own right/lower two-thirds (where the artwork's own dark sky
   and dense mountain silhouette already sit) are left essentially
   untouched so the real artwork reads clearly. Declared BEFORE the
   responsive block below on purpose: its mobile override has identical
   specificity, so source order (not media-query nesting) decides which
   wins, and the narrower, more targeted override must come second. */
.pf-success__atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(4, 11, 28, 0.62) 0%, rgba(4, 11, 28, 0.4) 26%, rgba(4, 11, 28, 0.12) 46%, transparent 62%);
}

/* A handful of extra star specks, concentrated in the photo's own plain
   sky area (upper-left) as a small complementary detail rather than
   competing with the photo's own starfield (upper-right) — kept subtle
   and low-opacity on purpose. */
.pf-success__atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.4px 1.4px at 10% 14%, rgba(236, 240, 247, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 22% 28%, rgba(236, 240, 247, 0.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 34%, rgba(236, 240, 247, 0.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 30% 10%, rgba(236, 240, 247, 0.4), transparent 60%);
}

/* Responsive art direction: the photo's bright landmarks (the glowing
   planet-limb arc, the mountain ridge, the lit lake) sit roughly in its
   right two-thirds, with plain dark sky across its own left third — a
   fortunate match for this layout's own left-headline/right-card
   asymmetry at wide widths. As the hero collapses to one column
   (<1100px) and the band's own aspect ratio gets taller relative to its
   width on narrow phones, the position is nudged so the arc/horizon
   stays a deliberate, visible feature instead of drifting off-canvas or
   shrinking to a sliver — never a re-crop of "the whole desktop scene
   squeezed smaller," a genuinely different, deliberate crop per range,
   per this pass's explicit instruction. */
@media (max-width: 1365px) {
  .pf-success__atmosphere {
    background-position: 63% 24%;
  }
}

@media (max-width: 999px) {
  .pf-success__atmosphere {
    height: clamp(360px, 68vw, 560px);
    background-position: 62% 30%;
  }
}

/* Visual QA at 600px specifically caught a real contrast gap this tier
   alone didn't cover: .pf-success__title's own font-size clamp
   (clamp(32px, 4.6vw, 56px)) resolves SMALLER at 600px than it does at
   767-999px (4.6vw clamps to its 32px floor here, vs. an unclamped
   ~38-46px just above), so "Project received successfully!" fits on one
   long line here instead of wrapping — reaching much further across the
   band, closer to the image's own bright arc, than the shorter wrapped
   line above this range. Rather than fight that pre-existing type-scale
   behavior (out of scope for an asset-integration pass), a moderately
   stronger overlay in exactly this 600-999px band keeps the longer line
   readable without darkening the image any more than necessary above or
   below it. */
@media (max-width: 999px) and (min-width: 600px) {
  .pf-success__atmosphere::before {
    background: linear-gradient(130deg, rgba(4, 11, 28, 0.7) 0%, rgba(4, 11, 28, 0.48) 32%, rgba(4, 11, 28, 0.18) 54%, transparent 70%);
  }
}

@media (max-width: 599px) {
  .pf-success__atmosphere {
    height: clamp(260px, 82vw, 380px);
    /* Pushed further right/down than the tablet crop: at this band's
       proportionally taller aspect ratio, the wide-viewport position put
       the bright orange arc directly behind the (also orange) headline
       accent word — a genuine contrast problem, not a stylistic
       preference. Moving the focal point further from the top-left text
       zone keeps the headline over the photo's own calmer sky. */
    background-position: 82% 58%;
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%);
  }

  /* Mobile-only reinforcement of the readability overlay above: the band
     is proportionally taller relative to the headline's own footprint
     here than at wider widths, so the same "soft diagonal, not a
     blanket sheet" approach needs a bit more reach/strength to keep the
     confirmation paragraph (which runs further down than the headline
     alone) clear of the mountain silhouette texture. This rule comes
     after the base .pf-success__atmosphere::before rule above in source
     order, so it correctly wins at this width despite equal specificity. */
  .pf-success__atmosphere::before {
    background: linear-gradient(160deg, rgba(4, 11, 28, 0.78) 0%, rgba(4, 11, 28, 0.6) 34%, rgba(4, 11, 28, 0.28) 58%, transparent 78%);
  }
}

.pf-success__inner {
  position: relative;
  z-index: 1;
  max-width: var(--pf-success-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 72px) clamp(56px, 7vw, 104px);
  color: var(--z-ice);
  font-family: var(--font-ui);
}

/* ---------------------------------------------------------------- */
/* Hero: text + hero cards. One column by default; an intentionally  */
/* asymmetric two-column composition opens up from ~1100px so the    */
/* hero uses the available width instead of floating a narrow column */
/* inside a huge dark canvas (external review, pass #2).             */
/* ---------------------------------------------------------------- */
.pf-success__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 44px;
}

@media (min-width: 1100px) {
  .pf-success__hero {
    grid-template-columns: minmax(360px, 1fr) minmax(440px, 620px);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
  }
}

@media (min-width: 1600px) {
  .pf-success__hero {
    grid-template-columns: minmax(420px, 0.85fr) minmax(480px, 680px);
  }
}

.pf-success__hero-text {
  max-width: 60ch;
}

.pf-success__eyebrow {
  margin: 0 0 14px;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: var(--pf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pf-success-blue-bright);
}

.pf-success__title {
  margin: 0 0 22px;
  font: 700 clamp(32px, 4.6vw, 56px)/1.1 var(--font-ui);
  color: var(--z-ice);
  text-shadow: 0 2px 30px rgba(111, 180, 255, 0.25);
}

.pf-success__title-accent {
  color: var(--z-orange);
}

/* #pf-success-heading is a non-interactive H1 (tabindex="-1") that only
   ever receives PROGRAMMATIC focus, once, from success.js's own
   accessibility-required initial-focus behavior (§30) — it is never a
   real interactive control a visitor tabs to or activates. External
   review (pass #2): that programmatic focus must keep happening (do not
   remove focusSuccessHeadingOnce() or this rule's selector), but it must
   not paint a giant interactive-looking rectangle around an entire
   headline. Every REAL interactive control on this screen (the copy
   button, the CTAs) keeps a full, unmodified :focus-visible outline —
   see .pf-success__copy-btn/.pf-success__cta below, both unchanged. */
.pf-success__title:focus-visible {
  outline: none;
}

.pf-success__confirmation,
.pf-success__next,
.pf-success__contact-method {
  margin: 0 0 12px;
  color: var(--z-ice);
  opacity: 0.82;
  line-height: 1.65;
  font-size: 15.5px;
}

/* ---------------------------------------------------------------- */
/* Hero cards — the reference card is the strongest visual object on */
/* the page (external review, pass #2): more weight/space than the   */
/* email card, not an equal twin.                                    */
/* ---------------------------------------------------------------- */
.pf-success__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.pf-success__ref-card,
.pf-success__email-card {
  position: relative;
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(165deg, rgba(46, 78, 138, 0.55), rgba(13, 32, 66, 0.7));
  box-shadow: var(--pf-shadow-card), 0 30px 60px -30px rgba(6, 16, 38, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

.pf-success__ref-card {
  flex: 1.35 1 340px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px);
  text-align: center;
  background: linear-gradient(165deg, rgba(52, 88, 152, 0.6), rgba(11, 28, 60, 0.75));
}

.pf-success__email-card {
  flex: 1 1 260px;
  padding: 24px 26px;
}

.pf-success__ref-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: var(--pf-success-teal);
  background: radial-gradient(circle at 40% 32%, rgba(47, 224, 192, 0.32), rgba(47, 224, 192, 0.1));
  border: 1px solid rgba(47, 224, 192, 0.55);
  box-shadow: 0 0 0 8px rgba(47, 224, 192, 0.10), 0 0 40px rgba(47, 224, 192, 0.45);
  animation: pf-success-pulse 2.6s ease-in-out infinite;
}

.pf-success__ref-check-halo {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 224, 192, 0.22), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

@keyframes pf-success-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(47, 224, 192, 0.10), 0 0 40px rgba(47, 224, 192, 0.45); }
  50% { box-shadow: 0 0 0 14px rgba(47, 224, 192, 0.06), 0 0 56px rgba(47, 224, 192, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-success__ref-check {
    animation: none;
  }
}

.pf-success__ref-label {
  margin: 0 0 12px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-success-blue-bright);
}

.pf-success__ref-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-success__ref-value {
  font-family: var(--pf-font-mono);
  font-size: clamp(20px, 2.8vw, 28px);
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--z-ice);
  word-break: break-word;
}

.pf-success__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--pf-radius-sm);
  border: 1px solid var(--pf-border-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--z-ice);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.pf-success__copy-btn:hover,
.pf-success__copy-btn:focus-visible {
  color: var(--z-orange);
  border-color: var(--pf-orange-border);
  background: rgba(226, 101, 11, 0.12);
}

.pf-success__copy-btn:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

.pf-success__ref-gotit {
  margin: 20px 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-success-blue-bright);
}

.pf-success__ref-gotit span {
  position: relative;
  padding: 0 14px;
}

.pf-success__ref-gotit span::before,
.pf-success__ref-gotit span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  border-top: 1px solid var(--pf-border-strong);
}

.pf-success__ref-gotit span::before { right: 100%; }
.pf-success__ref-gotit span::after { left: 100%; }

.pf-success__copy-status {
  min-height: 16px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-success-teal);
}

.pf-success__email-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pf-success__email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--pf-success-blue-bright);
  background: radial-gradient(circle at 35% 30%, rgba(111, 180, 255, 0.3), rgba(62, 123, 214, 0.12));
  border: 1px solid rgba(111, 180, 255, 0.45);
  box-shadow: 0 0 20px rgba(62, 123, 214, 0.3);
}

.pf-success__email-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--z-ice);
}

.pf-success__email-copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--z-ice);
  opacity: 0.78;
}

/* ---------------------------------------------------------------- */
/* Completion ribbon — a light, luminous surface breaking up the dark */
/* hero (external review, pass #2: "too dark", "plain vertical        */
/* utility list" rejected). Connected nodes, first three complete,    */
/* final Submitted stage strongly highlighted. A 2-column grid from    */
/* 767px down (never a bare stacked list, never horizontal overflow). */
/* ---------------------------------------------------------------- */
.pf-success__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 44px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px);
  list-style: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(236, 240, 247, 0.97), rgba(210, 222, 242, 0.92));
  box-shadow: 0 20px 44px -20px rgba(4, 12, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.pf-success__progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-right: clamp(18px, 3vw, 36px);
  margin-right: clamp(18px, 3vw, 36px);
}

.pf-success__progress-item:not(.is-final)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(18px, 3vw, 36px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pf-success-blue), var(--pf-success-teal));
  opacity: 0.7;
  transform: translate(100%, -50%);
}

.pf-success__progress-item.is-final:not(:last-child)::after {
  background: linear-gradient(90deg, var(--pf-success-blue), var(--z-orange));
}

.pf-success__progress-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(155deg, var(--pf-success-blue-bright), var(--pf-success-blue));
  box-shadow: 0 6px 16px -4px rgba(62, 123, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  flex: 0 0 auto;
}

.pf-success__progress-item.is-final .pf-success__progress-icon {
  background: linear-gradient(155deg, #FF9A4D, var(--z-orange));
  box-shadow: 0 0 0 5px rgba(226, 101, 11, 0.18), 0 8px 20px -4px rgba(226, 101, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--z-deep);
}

.pf-success__progress-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--z-deep);
}

.pf-success__progress-state {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pf-success-blue);
}

.pf-success__progress-item.is-final .pf-success__progress-state {
  color: var(--z-orange);
}

.pf-success__summary {
  margin: 0 0 40px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(165deg, rgba(30, 58, 108, 0.4), rgba(10, 24, 52, 0.35));
  border: 1px solid var(--pf-border);
}

.pf-success__summary-heading {
  margin: 0 0 8px;
  font: 700 24px/1.3 var(--font-ui);
  color: var(--z-ice);
  text-align: center;
}

.pf-success__summary-sub {
  margin: 0 auto 28px;
  max-width: 56ch;
  text-align: center;
  color: var(--z-ice);
  opacity: 0.75;
  font-size: 14px;
}

.pf-success__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

.pf-success__snapshot {
  position: relative;
  padding: 22px 24px;
  border-radius: var(--pf-radius-md);
  background: linear-gradient(165deg, rgba(58, 96, 162, 0.35), rgba(12, 28, 58, 0.55));
  border: 1px solid var(--pf-border-strong);
  box-shadow: 0 18px 34px -22px rgba(4, 12, 30, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.pf-success__snapshot-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(236, 240, 247, 0.14);
}

.pf-success__snapshot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--z-orange);
  background: radial-gradient(circle at 35% 30%, rgba(226, 101, 11, 0.28), rgba(226, 101, 11, 0.08));
  border: 1px solid var(--pf-orange-border);
  box-shadow: 0 0 16px rgba(226, 101, 11, 0.28);
  flex: 0 0 auto;
}

.pf-success__snapshot h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--z-ice);
}

.pf-success__snapshot p,
.pf-success__snapshot li {
  color: var(--z-ice);
  opacity: 0.82;
  line-height: 1.65;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.pf-success__snapshot ul {
  margin: 0;
  padding-left: 20px;
}

.pf-success__snapshot li + li {
  margin-top: 6px;
}

/* The one restrained live region on this screen (§30) — a color change is
   never the only signal a reset failed, so the text content itself
   (toggled by success.js) is what actually communicates the failure;
   this rule only positions/spaces it. Hidden by default via the native
   [hidden] attribute, exactly like .pf-validation[hidden] above. */
.pf-success__error {
  margin: 0 0 20px;
  color: var(--z-orange);
  font-size: 14px;
  line-height: 1.5;
}

.pf-success__error[hidden] {
  display: none;
}

.pf-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pf-success__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--pf-radius-sm);
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.pf-success__cta--primary {
  border: 1px solid var(--z-orange);
  background: linear-gradient(155deg, #FF9A4D, var(--z-orange));
  color: var(--z-deep);
  box-shadow: 0 10px 26px -8px rgba(226, 101, 11, 0.6);
  padding-left: 32px;
  padding-right: 32px;
}

.pf-success__cta--secondary {
  border: 1px solid var(--pf-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--z-ice);
}

.pf-success__cta:hover {
  opacity: 0.9;
}

.pf-success__cta:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

/* Busy/disabled state (success.js's setBusyState()) — conveyed through
   both the native :disabled/aria-busy attributes AND a visible opacity
   change together, never color alone (§30's own "color never the sole
   signal" rule); main.css's :root already clamps --t-fast/--t-med to 1ms
   under prefers-reduced-motion, so this opacity transition needs no
   separate reduced-motion override. */
.pf-success__cta--primary:disabled,
.pf-success__cta--primary[aria-busy='true'] {
  opacity: 0.4;
  cursor: wait;
}

/* ---------------------------------------------------------------- */
/* Responsive corrections (external review, pass #2): the ribbon      */
/* becomes a compact 2-column grid rather than a plain vertical list, */
/* and a 2x2 grid is explicitly acceptable even at 320px. Never a     */
/* single-file stacked utility list, never horizontal overflow.       */
/*                                                                    */
/* Breakpoint note (pass #2 visual QA, 834px spot-check): the         */
/* horizontal 4-across flex ribbon only has room to stay on one row   */
/* down to roughly 900px — below that it used to flex-wrap, stranding */
/* "Submitted" alone on a second row with a dangling connector and no */
/* leading one, an actually-broken-looking chain, not the "four       */
/* horizontal columns become unreadable -> use the grid" case the     */
/* 320px note anticipated. So the 2-column grid takes over at 900px,  */
/* a full step earlier than the 767px point everything else (button   */
/* stacking) still uses — 999px+ still gets the connected single-row  */
/* ribbon, exactly as before.                                         */
/* ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .pf-success__progress {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--pf-radius-lg);
    gap: 14px 18px;
  }

  .pf-success__progress-item {
    /* A cramped icon-beside-label row leaves too little width for the
       label at 2-column widths (~130-150px per cell) — ordinary words
       like "Requirements" or "Completed" don't fit beside a 36px icon
       and end up force-broken mid-word, which reads as broken rather
       than "carefully designed" (external review's own bar for this
       2x2 state). Stacking icon-above-label instead gives the label the
       item's full width, so it wraps normally, on whole words, exactly
       like a small compact tile. */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-right: 0;
    padding-right: 0;
    padding: 14px 12px;
    border-radius: var(--pf-radius-md);
    background: rgba(255, 255, 255, 0.55);
    /* A flex item's default min-width:auto uses its content's intrinsic
       minimum, which can exceed the 2-column grid track and overflow the
       ribbon horizontally (the exact bug external review's 320px pass
       caught: "Requirements Completed" clipped past the right edge).
       min-width: 0 lets it shrink to the track and wrap instead. */
    min-width: 0;
  }

  .pf-success__progress-label,
  .pf-success__progress-state {
    /* Safety net only, not the primary fix — with the column layout
       above, whole-word wrapping is normally sufficient. break-word only
       forces a mid-word break as a last resort (unlike `anywhere`, which
       permits it more eagerly), so a genuinely long label still wraps on
       word boundaries first. */
    overflow-wrap: break-word;
    width: 100%;
  }

  .pf-success__progress-item::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .pf-success__actions {
    flex-direction: column;
  }

  .pf-success__cta {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .pf-success__ref-value-row {
    flex-direction: column;
  }

  .pf-success__progress-label {
    font-size: 12.5px;
  }
}