/* ----- Tokens (consolidated v111 — see audit 3.1) -----
     v111: merged the original :root, the meta-h :root (was at line ~76)
     and the AA-override :root (was at lines ~4367–4385) into this single
     declaration. `--line` uses the AA-corrected #DCE5EB (not the original
     #DCE5EB). Do NOT add a second :root block — keep all tokens here. */
  .pw {
    /* Surface */
    --bg: #ffffff;
    --ink: #16252F;
    --ink-soft: #3A4852;
    --muted: #56626B;
    --line: #DCE5EB;             /* AA-corrected — was #DCE5EB */
    --line-strong: #16252F;
    /* Accent + accessible text variant */
    --accent: #FF1654;            /* fills, borders, large-format headlines */
    --accent-soft: #FFE8EE;       /* peach tint for accent panels (NOT a grey) */
    --accent-ink: #B8003A;        /* small-text accent (4.99:1 on white, AA-safe) */
    /* Status colours */
    --warn: #b8000f;              /* AA-safe red */
    --warn-soft: #fff1f1;
    --ok: #1a7a3a;
    --ok-soft: #eef9f1;
    --caution: #8a5a00;           /* amber for "draft for review" — AA-safe */
    --caution-soft: #fff7e6;
    /* Focus */
    --focus: #FF1654;
    --focus-ring: 0 0 0 3px rgba(255, 134, 0, 0.35);
    /* Layout */
    --meta-h: 60px;
  }

  /* ===== Alderton Associates integration (site section chrome) =====
     The app keeps its own orange/black identity; this strip is the only
     place the parent site shows through. Lives INSIDE #top-meta so the
     fixed header's measured height includes it. ===== */
  /* Footer credit + surveyor CTA */
  .pw .aa-cta {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ink);
    background: var(--accent-soft);
    display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  }
  .pw .aa-cta p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
  .pw .aa-cta p strong { color: var(--ink); }
  .pw .aa-cta a.aa-cta-btn {
    display: inline-block; padding: 9px 14px; background: var(--ink); color: #fff;
    font-family: var(--f-body); font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .pw .aa-cta a.aa-cta-btn:hover, .pw .aa-cta a.aa-cta-btn:focus-visible { background: var(--accent); color: var(--ink); }

  /* ----- Reduced motion -----
     v111 (audit 3.5) — consolidated. The second @media block previously at
     ~line 4774 has been merged here. Keep this as the single source of
     truth for prefers-reduced-motion behaviour. */
  @media (prefers-reduced-motion: reduce) {
    .pw *, .pw *::before, .pw *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .pw .jc-arrow,
    .pw .resource-link .arrow,
    .pw .ro-arrow { transition: none !important; }
  }

  .pw *, .pw *::before, .pw *::after { box-sizing: border-box; }
  .pw, .pw { margin: 0; padding: 0; }
  .pw { background: var(--bg); }
  .pw {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .pw .mono {
    font-family: var(--f-body);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* ----- Frame -----
     Top padding reserves the space the fixed .meta header would have
     occupied, so page content never slides under the bar. */
  .pw .frame {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(14px, 2.2vh, 24px) clamp(28px, 3vw, 56px);
    padding-top: calc(var(--meta-h, 60px) + 6px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  @media (max-width: 880px) {
    .pw .frame { padding: 16px 20px; padding-top: calc(var(--meta-h, 60px) + 6px); }
  }

  /* ----- Top meta strip (fixed header — always visible / always on top) -----
     (v111 — --meta-h now lives in the consolidated :root above; audit 3.1) */
  /* Nudge the middle and right meta text down a touch so it aligns visually
     with the logo wordmark baseline rather than the icon's vertical centre. */

  /* ----- Logo button (top-left) ----- */
  /* ----- Wordmark next to logo (2.3 stacked style) ----- */
  /* ----- Right-side meta cluster (section + progress) ----- */
  /* Hide the meta-progress slot entirely when empty so no dash/placeholder shows */
  /* Same treatment for an empty section label (e.g. on the homescreen) */
  /* Ensure the hidden attribute beats our flex display rule */
  /* Separate section name and progress with // on the same line */
  /* Friendly note shown in the top-right of the homescreen only.
     Single line by default; wraps onto two lines only when the viewport
     is too narrow to fit the full string. */
  /* Narrow viewports: allow wrap so it never truncates */

  /* ----- Stage system ----- */
  .pw .stage {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .pw .stage.active { display: flex; }
  /* Question stages still aim to fit the first viewport on desktop/laptop,
     but the page itself scrolls if needed — no internal scrollbar. */

  /* ----- Question stage layout ----- */
  .pw .q-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    flex: 1;
    min-height: 0;
  }
  @media (max-width: 880px) {
    .pw .q-grid { grid-template-columns: 1fr; gap: 24px; }
  }

  .pw :is(h1,h2).headline {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(34px, min(5.6vw, 8.5vh), 76px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ink);
  }
  .pw :is(h1,h2).headline .accent { color: var(--accent); }

  .pw .visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
  }
  .pw .visual img {
    width: 100%;
    max-width: 520px;
    max-height: clamp(220px, 52vh, 460px);
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* ----- Bottom bar (captions + buttons) ----- */
  .pw .bottom {
    margin-top: auto;
    padding-top: clamp(14px, 2.2vh, 22px);
    border-top: 1px solid var(--line-strong);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
    flex-shrink: 0;
  }
  .pw .captions {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    max-width: 640px;
  }
  .pw .captions p { margin: 0 0 4px; }
  .pw .captions p.muted { color: var(--muted); }

  /* ----- Buttons ----- */
  .pw .actions { display: flex; gap: 0; align-items: stretch; }

  .pw .btn {
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border: 1px solid var(--ink);
    background: var(--bg);
    color: var(--ink);
    padding: 14px 32px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    min-width: 100px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .btn + .btn { border-left: none; }
  .pw .btn-primary {
    background: var(--ink);
    color: var(--bg);
  }
  .pw .btn:hover { background: var(--ink); color: var(--bg); }
  .pw .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .pw .btn:active { transform: translateY(1px); }
  .pw .btn-full { width: 100%; min-width: 0; }
  .pw .btn-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ink);
    align-self: flex-start;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .pw .btn-link:hover { color: var(--accent); border-color: var(--accent); }
  .pw .btn-link::before { content: "← "; }

  /* ----- Progress bar (milestones) ----- */
  .pw .progress {
    margin-top: clamp(12px, 1.8vh, 20px);
    padding-top: clamp(10px, 1.4vh, 14px);
    border-top: 1px solid var(--line);
    display: none;
    flex-shrink: 0;
  }
  .pw .progress.visible { display: block; }
  .pw .progress-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: start;
  }
  .pw .progress-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease;
  }
  .pw .progress-step.clickable { cursor: pointer; }
  .pw .progress-step.locked { cursor: not-allowed; opacity: 0.55; }
  .pw .progress-step:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .pw .progress-bar {
    height: 2px;
    background: var(--line);
    transition: background 200ms ease, height 200ms ease;
  }
  .pw .progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    line-height: 1.2;
  }
  .pw .progress-num { color: var(--muted); font-variant-numeric: tabular-nums; }
  .pw .progress-label {
    color: inherit;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pw .progress-step.done { color: var(--ink); }
  .pw .progress-step.done .progress-bar { background: var(--ink); }
  .pw .progress-step.done .progress-num { color: var(--ink); }
  .pw .progress-step.current { color: var(--accent); }
  .pw .progress-step.current .progress-bar { background: var(--accent); height: 3px; }
  .pw .progress-step.current .progress-num { color: var(--accent); }
  .pw .progress-step.clickable:hover { color: var(--accent); }
  .pw .progress-step.clickable:hover .progress-bar { background: var(--accent); }
  .pw .progress-step.clickable:hover .progress-num { color: var(--accent); }
  .pw .progress-step.locked:hover { color: var(--muted); }
  .pw .progress-step.locked:hover .progress-bar { background: var(--line); }
  .pw .progress-step.locked:hover .progress-num { color: var(--muted); }
  @media (max-width: 880px) {
    .pw .progress-label { display: none; }
    .pw .progress-meta { justify-content: flex-start; }
  }

  /* ----- Welcome ----- */
  .pw .welcome-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
    flex: 0 0 auto;
  }
  @media (max-width: 880px) {
    .pw .welcome-grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  }
  /* Make the left column a flex column so its CTA pair can be pushed to the bottom,
     allowing the column to match the height of the right-hand "How it works" + image. */
  .pw .welcome-grid > :first-child {
    display: flex;
    flex-direction: column;
  }
  .pw .welcome-grid > :first-child .welcome-cta-pair {
    margin-top: auto;
  }
  .pw .welcome-headline {
    font-family: var(--f-head);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.03;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 20px;
  }
  .pw .welcome-headline .accent { color: var(--accent); }
  .pw .welcome-lede {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    max-width: 540px;
    margin: 0 0 18px;
  }
  .pw .welcome-side {
    /* heading provides its own top/bottom borders */
    display: flex;
    flex-direction: column;
  }
  .pw .welcome-side :is(h2,h3) {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
  }
  .pw .welcome-numbered {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pw .welcome-numbered li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    font-size: 15px;
    line-height: 1.4;
  }
  .pw .welcome-numbered li:last-child { border-bottom: none; }
  .pw .welcome-numbered .num { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
  .pw .welcome-side-img {
    margin: 14px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
  }
  .pw .welcome-side-img img {
    width: 88%;
    max-width: 460px;
    max-height: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
  @media (max-width: 880px) {
    .pw .welcome-side-img { flex: 0 0 auto; }
    .pw .welcome-side-img img { width: 100%; max-width: 520px; }
  }
  .pw .welcome-prose {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 20px;
    max-width: 540px;
  }

  /* ----- Section 3 sub-clause picker ----- */
  .pw .s3-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px, 3.5vw, 56px);
    align-items: start;
    flex: 1;
    min-height: 0;
    padding-bottom: 20px;
  }
  @media (max-width: 980px) {
    .pw .s3-grid { grid-template-columns: 1fr; gap: 24px; }
  }
  .pw .s3-intro :is(h1,h2).headline {
    font-size: clamp(32px, min(4.6vw, 6.4vh), 56px);
    margin-bottom: 16px;
  }
  .pw .s3-lede {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 12px;
    max-width: 460px;
  }
  .pw .s3-lede.muted { color: var(--muted); }
  .pw .s3-picker {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
  }
  .pw .s3-group {
    border-top: 1px solid var(--line-strong);
    padding-top: 12px;
  }
  .pw .s3-group-title {
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
  }
  .pw .s3-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 120ms ease;
  }
  .pw .s3-item:hover { background: #F6F9FA; }
  .pw .s3-item:last-child { border-bottom: none; }
  .pw .s3-item input[type="checkbox"] {
    margin: 3px 0 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
  }
  .pw .s3-item-text { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
  .pw .s3-item-text small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
  .pw .s3-item-tag {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: #EEF3F6;
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    align-self: start;
    margin-top: 1px;
  }
  .pw .s3-item.checked { background: var(--accent-soft); }
  .pw .s3-item.checked .s3-item-tag { background: #fff; border-color: var(--accent); color: var(--accent); }
  .pw .s3-summary { font-size: 13px; }
  .pw .s3-summary strong { color: var(--ink); font-weight: 600; }

  /* ----- Result ----- */
  .pw .result-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
    flex: 1;
    min-height: 0;
  }
  @media (max-width: 880px) {
    .pw .result-grid { grid-template-columns: 1fr; gap: 24px; }
  }
  .pw .result-headline {
    font-family: var(--f-head);
    font-size: clamp(34px, min(5.2vw, 8vh), 68px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0 0 14px;
  }
  .pw .result-headline .accent { color: var(--accent); }
  .pw .result-lede {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 20px;
    max-width: 520px;
  }
  .pw .notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line-strong);
  }
  /* v111 (audit 3.8) — Legacy `.notice-list li { display: grid; grid-template-columns: 64px 1fr auto; }`
     rule deleted. It was a hold-over from the earlier simple list and was
     colliding with the richer `.notice-card` markup the JS renders today
     (see renderResult()). The override at line ~2435 has also been simplified
     because the bug it papered over no longer exists. */
  .pw .notice-list .badge {
    font-size: 10px;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 4px 8px;
    align-self: center;
  }

  /* ----- Details / form (v19 — Help panel + form, banner-styled inputs) ----- */
  .pw .form-grid {
    /* Oct 2026 — site.css gives .form-grid a 12-column grid for the contact
       form; that squeezed each wizard form-section into one narrow column so
       the headings and text overlapped. Reset to a normal stacked block. */
    display: block;
    margin-top: 24px;
  }
  .pw .form-section {
    display: grid;
    grid-template-columns: 300px 1fr;
    column-gap: 56px;
    padding: 28px 0 32px;
    border-top: 1px solid var(--line-strong);
  }
  .pw .form-section:last-of-type { border-bottom: 1px solid var(--line-strong); }
  @media (max-width: 880px) {
    .pw .form-section { grid-template-columns: 1fr; column-gap: 0; row-gap: 16px; }
  }
  .pw .form-aside { padding-top: 4px; }
  .pw .form-aside h2 {
    font-size: 26px;
    margin: 0 0 14px;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--accent);
    font-weight: 800;
  }
  .pw .form-aside p {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 0 0 10px;
    max-width: 280px;
  }
  .pw .form-aside p .term { color: var(--ink); font-weight: 600; }
  .pw .form-fields {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 20px;
    row-gap: 20px;
  }
  @media (max-width: 720px) { .pw .form-fields { grid-template-columns: 1fr; } }
  .pw .field { margin: 0; position: relative; display: flex; flex-direction: column; }
  .pw .field.full { grid-column: 1 / -1; }
  .pw .field label {
    display: block;
    font-size: 15px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
  }
  .pw .field input,
  .pw .field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background: #F6F9FA;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 14px 12px;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 150ms ease, border-color 150ms ease;
    line-height: 1.4;
  }
  .pw .field textarea { resize: vertical; min-height: 96px; }
  .pw .field input::placeholder,
  .pw .field textarea::placeholder { color: var(--muted); }
  .pw .field input:hover,
  .pw .field textarea:hover { background: #F6F9FA; }
  .pw .field input:focus,
  .pw .field textarea:focus {
    outline: none;
    background: #ffffff;
    border-top-color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .pw .field-error {
    display: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    margin: 6px 0 0;
  }
  .pw .field-error.visible { display: block; }
  .pw .field-hint {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 0 0;
  }
  .pw .field-aux {
    align-self: flex-start;
    font-size: 12px;
    color: var(--ink);
    margin: 8px 0 0;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    border-bottom: 1px solid var(--ink);
    font-family: inherit;
  }
  .pw .field-aux:hover { color: var(--accent); border-color: var(--accent); }

  .pw .address-field { position: relative; }
  .pw .address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ink);
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 50;
    display: none;
    max-height: 280px;
    overflow-y: auto;
  }
  .pw .address-suggestions.visible { display: block; }
  .pw .address-suggestions li {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
  }
  .pw .address-suggestions li:last-child { border-bottom: none; }
  .pw .address-suggestions li[aria-selected="true"],
  .pw .address-suggestions li:hover { background: var(--accent-soft); color: var(--ink); }
  .pw .address-suggestions li.empty,
  .pw .address-suggestions li.loading {
    color: var(--muted);
    cursor: default;
    background: transparent;
  }

  /* ----- Preview ----- */
  .pw .preview-stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
  }
  .pw .preview-page {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    padding: 48px 56px;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink);
  }
  @media (max-width: 600px) {
    .pw .preview-page { padding: 28px 22px; font-size: 9px; }
  }
  .pw .preview-page h3 {
    text-align: right;
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
  }
  .pw .preview-page .sub { text-align: right; font-size: 11px; color: var(--ink-soft); margin: 0 0 24px; }
  .pw .preview-page p { margin: 0 0 12px; color: var(--ink); font-size: 11px; }
  .pw .preview-page .serve { font-weight: 600; margin: 16px 0; }
  .pw .preview-page .bullet { margin-left: 0; padding-left: 0; }
  .pw .preview-page .works { background: #F6F9FA; padding: 12px 14px; border-radius: 4px; white-space: pre-wrap; margin: 8px 0 16px; }
  .pw .preview-page .signoff { margin-top: 32px; }
  .pw .preview-page .signoff div { margin-bottom: 16px; }
  .pw .preview-page .tick {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
  }
  .pw .preview-page .tick::before {
    content: '';
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border: 1px solid var(--ink);
    border-radius: 0;
    margin-top: 4px;
  }
  .pw .preview-page .tick span { flex: 1 1 auto; }
  .pw .preview-page .ack-fields p { margin: 4px 0; }

  /* Generic helpers */
  .pw .stack { display: flex; flex-direction: column; gap: 24px; }
  .pw .footer-spacer { height: 40px; }

  /* ----- Welcome resources strip ----- */
  .pw .welcome-resources { margin-top: clamp(20px, 3vh, 32px); }
  .pw .welcome-resources :is(h2,h3) {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
  }
  .pw .resources-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  @media (max-width: 980px) { .pw .resources-list { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .pw .resources-list { grid-template-columns: 1fr; } }
  .pw .resources-list li { display: flex; }
  .pw .resource-link {
    width: 100%; background: var(--accent-soft);
    border: 1px solid var(--accent); border-left-width: 4px;
    padding: 14px 14px;
    text-align: left; cursor: pointer; font: inherit; color: var(--ink);
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center; gap: 12px;
    transition: background 150ms ease, transform 200ms ease, box-shadow 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .resource-link .res-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent);
    flex: 0 0 32px;
  }
  .pw .resource-link .res-icon svg { width: 24px; height: 24px; display: block; }
  .pw .resource-link .res-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pw .resource-link .ref-tag {
    font-size: 10px; font-weight: 700; color: var(--accent);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0; display: block;
  }
  .pw .resource-link .res-title {
    font-size: 13px; line-height: 1.3; color: var(--ink);
    transition: color 150ms ease;
  }
  .pw .resource-link .arrow {
    font-size: 16px; color: var(--accent); font-weight: 600;
    transition: transform 200ms ease;
  }
  .pw .resource-link:hover { background: #FFD6A0; }
  .pw .resource-link:hover .arrow { transform: translateX(4px); }
  .pw .resource-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ----- FAQ accordion ----- */
  .pw .faq { margin-top: clamp(20px, 3vh, 32px); }
  .pw .faq h3 {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
  }
  .pw .faq-list { }
  .pw .faq-item { border-bottom: 1px solid var(--line); transition: background 150ms ease; }
  .pw .faq-trigger {
    width: 100%; background: none; border: none; padding: 14px 12px;
    display: grid; grid-template-columns: 36px 1fr 24px; gap: 12px;
    align-items: baseline; cursor: pointer; font: inherit; color: var(--ink);
    text-align: left;
  }
  .pw .faq-trigger .num { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
  .pw .faq-trigger .q { font-size: 15px; line-height: 1.4; color: var(--ink); transition: color 150ms ease; }
  .pw .faq-trigger .toggle {
    font-size: 18px; color: var(--muted); text-align: right; line-height: 1;
    transition: transform 200ms ease, color 150ms ease;
  }
  .pw .faq-item:hover { background: #F6F9FA; }
  .pw .faq-trigger:hover .q { color: var(--accent); }
  .pw .faq-trigger:hover .toggle { color: var(--accent); }
  .pw .faq-item.open .faq-trigger .toggle { transform: rotate(45deg); color: var(--accent); }
  .pw .faq-body {
    display: none; padding: 0 12px 16px 60px;
    font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 720px;
  }
  .pw .faq-item.open .faq-body { display: block; }
  .pw .faq-body p { margin: 0 0 8px; }
  .pw .faq-body p:last-child { margin-bottom: 0; }
  .pw .faq-body .ref-tag {
    font-size: 10px; color: var(--muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-top: 8px; display: inline-block;
  }

  /* ----- Reference stages (timeline / atlas) ----- */
  /* Timeline/atlas let the whole page scroll — no inner scroll container */
  .pw .ref-intro {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 3.5vw, 48px); align-items: end;
    margin: 8px 0 28px;
  }
  @media (max-width: 880px) { .pw .ref-intro { grid-template-columns: 1fr; gap: 14px; } }
  .pw .ref-intro .result-headline { margin-bottom: 0; }
  .pw .ref-intro .result-lede { margin-bottom: 0; }

  /* ----- Timeline ----- */
  .pw .timeline {
    display: grid; grid-template-columns: 160px 1fr;
    border-top: 1px solid var(--line-strong); margin-top: 4px;
  }
  @media (max-width: 720px) { .pw .timeline { grid-template-columns: 96px 1fr; } }
  .pw .tl-phase-head {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 160px 1fr;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA; padding: 16px 0 12px; align-items: baseline;
  }
  @media (max-width: 720px) { .pw .tl-phase-head { grid-template-columns: 96px 1fr; } }
  .pw .tl-phase-num {
    font-size: 11px; color: var(--accent);
    letter-spacing: 0.06em; text-transform: uppercase;
    text-align: right; padding-right: 24px;
  }
  .pw .tl-phase-name {
    font-family: var(--f-head);
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
    color: var(--ink); padding-left: 24px;
  }
  .pw .tl-time {
    padding: 18px 24px 18px 0;
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase;
    border-right: 1px solid var(--ink); position: relative;
    text-align: right; font-variant-numeric: tabular-nums; line-height: 1.3;
  }
  .pw .tl-time::after {
    content: ''; position: absolute; right: -5px; top: 22px;
    width: 9px; height: 9px; background: var(--bg);
    border: 1px solid var(--ink); transform: rotate(45deg); z-index: 2;
  }
  .pw .tl-time.accent { color: var(--accent); }
  .pw .tl-time.accent::after { background: var(--accent); border-color: var(--accent); }
  .pw .tl-detail { padding: 16px 0 16px 24px; border-bottom: 1px solid var(--line); }
  .pw .tl-detail .actor {
    font-size: 10px; color: var(--accent);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 6px; display: block;
  }
  .pw .tl-detail h4 {
    font-family: var(--f-head);
    font-size: 17px; font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.3;
    margin: 0 0 6px; color: var(--ink);
  }
  .pw .tl-detail p {
    font-size: 13px; line-height: 1.5;
    color: var(--ink-soft); margin: 0 0 6px; max-width: 620px;
  }
  .pw .tl-detail p:last-child { margin-bottom: 0; }
  .pw .tl-detail .ref-tag {
    font-size: 10px; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    display: inline-block; margin-top: 4px;
  }
  .pw .tl-fork {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 160px 1fr;
    border-bottom: 1px solid var(--line); background: #F6F9FA;
  }
  @media (max-width: 720px) { .pw .tl-fork { grid-template-columns: 96px 1fr; } }
  .pw .tl-fork-time {
    padding: 18px 24px 18px 0;
    font-size: 11px; color: var(--ink);
    letter-spacing: 0.04em; text-transform: uppercase;
    border-right: 1px solid var(--ink); text-align: right;
  }
  .pw .tl-fork-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    padding: 16px 0 16px 24px;
  }
  @media (max-width: 720px) { .pw .tl-fork-grid { grid-template-columns: 1fr; gap: 14px; padding-right: 0; } }
  .pw .tl-branch { padding: 14px 18px 14px 0; border-right: 1px dashed var(--line); }
  .pw .tl-branch:last-child { border-right: none; padding-right: 0; padding-left: 18px; }
  @media (max-width: 720px) {
    .pw .tl-branch { border-right: none; border-bottom: 1px dashed var(--line); padding: 0 0 14px; }
    .pw .tl-branch:last-child { border-bottom: none; padding-top: 14px; padding-left: 0; }
  }
  .pw .tl-branch h5 {
    font-size: 11px; color: var(--accent);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0 0 8px; font-weight: 500;
  }
  .pw .tl-branch.dissent h5 { color: var(--ink); }
  .pw .tl-branch p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 6px; }
  .pw .tl-branch .ref-tag {
    font-size: 10px; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase;
  }

  /* ----- Atlas ----- */
  .pw .atlas-grid {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(28px, 3vw, 48px); align-items: start; margin-top: 8px;
  }
  @media (max-width: 980px) { .pw .atlas-grid { grid-template-columns: 1fr; } }
  .pw .atlas-figure {
    width: 100%; border: 1px solid var(--line);
    background: #F6F9FA; padding: 16px; position: relative;
  }
  .pw .atlas-figure svg { display: block; width: 100%; height: auto; user-select: none; }
  .pw .atlas-figure .figure-cap {
    margin-top: 10px; font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
  }
  .pw .atlas-hotspot { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pw .atlas-hotspot circle {
    fill: var(--accent); stroke: #fff; stroke-width: 2;
    transition: fill 150ms ease;
  }
  .pw .atlas-hotspot text {
    fill: #fff;
    font-family: var(--f-body);
    font-size: 16px; font-weight: 600;
    text-anchor: middle; dominant-baseline: central;
    pointer-events: none;
  }
  .pw .atlas-hotspot:hover circle,
  .pw .atlas-hotspot.active circle { fill: var(--ink); }
  .pw .atlas-detail {
    border-top: 1px solid var(--line-strong);
    padding-top: 16px; min-height: 320px;
  }
  .pw .atlas-detail .ref-tag {
    font-size: 10px; color: var(--accent);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 8px; display: block;
  }
  .pw .atlas-detail h4 {
    font-family: var(--f-head);
    font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
    margin: 0 0 12px; color: var(--ink);
  }
  .pw .atlas-detail h4 .accent { color: var(--accent); }
  .pw .atlas-detail p {
    font-size: 14px; line-height: 1.55;
    color: var(--ink-soft); margin: 0 0 12px; max-width: 540px;
  }
  .pw .atlas-detail dl {
    margin: 16px 0 0; display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 8px; column-gap: 16px;
    border-top: 1px solid var(--line); padding-top: 14px;
  }
  .pw .atlas-detail dt {
    font-size: 10px; color: var(--muted);
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  }
  .pw .atlas-detail dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.4; }
  .pw .atlas-detail dd .accent { color: var(--accent); }
  .pw .atlas-detail .placeholder {
    font-size: 14px; color: var(--muted);
    font-style: italic; line-height: 1.5;
  }

  .pw .ref-bottom {
    margin-top: clamp(28px, 4vh, 44px);
    padding-top: clamp(14px, 2vh, 20px);
    border-top: 1px solid var(--line-strong);
    display: flex; justify-content: space-between;
    align-items: baseline; gap: 24px;
    flex-wrap: wrap; color: var(--muted); font-size: 12px;
  }
  .pw .ref-bottom .ref-bottom-cap { color: var(--muted); max-width: 540px; }
  .pw .ref-bottom .ref-bottom-cap strong { color: var(--ink); font-weight: 500; }

  /* ===== Received-a-notice call-out (front page) ===== */
  .pw .received-callout {
    margin: clamp(16px, 2vh, 24px) 0 clamp(8px, 1vh, 12px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 18px 24px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-left-width: 4px;
    cursor: pointer;
    transition: background 150ms ease, transform 200ms ease;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: var(--ink);
    text-align: left;
    width: 100%;
  }
  .pw .received-callout:hover { background: #FFD6A0; }
  .pw .received-callout:hover .ro-arrow { transform: translateX(6px); }
  .pw .received-callout:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pw .ro-tag {
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
  .pw .ro-tag::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    /* v111 (audit 3.4) — pulsing dot removed; it drew the eye unevenly
       between the two home-page CTAs. Dot is now static. */
  }
  .pw .ro-text { display: flex; flex-direction: column; gap: 3px; }
  .pw .ro-title {
    font-family: var(--f-head);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
  }
  .pw .ro-sub {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.4;
  }
  .pw .ro-arrow {
    font-family: var(--f-head);
    font-size: 18px;
    color: var(--accent);
    font-weight: 600;
    transition: transform 200ms ease;
  }
  @media (max-width: 720px) {
    .pw .received-callout { grid-template-columns: auto 1fr; padding: 14px 16px; gap: 12px; }
    .pw .ro-arrow { display: none; }
    .pw .ro-title { font-size: 15px; }
    .pw .ro-sub { font-size: 12px; }
  }

  /* ===== Received-a-notice stage ===== */
  .pw .recv-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--line);
    transition: background 150ms ease;
    /* v112.3 — When the user jumps via an anchor or a #hash link, leave
       enough room below the fixed top bars (meta + sticky nav) so the
       section's own top border can't bleed into the active anchor's orange
       underline above. The JS click handler also adds its own offset, but
       scroll-margin-top covers native browser-initiated scrolls. */
    scroll-margin-top: calc(var(--meta-h, 60px) + 72px);
  }
  .pw .recv-section:first-of-type { border-top: 1px solid var(--line-strong); }
  .pw .recv-section:last-of-type { border-bottom: 1px solid var(--line-strong); }
  .pw .recv-section-head {
    display: grid;
    grid-template-columns: 80px 1fr 36px;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 0;
    padding: 18px 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background 150ms ease;
  }
  .pw .recv-section-head::after {
    content: '+';
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: var(--muted);
    text-align: right;
    transition: transform 220ms ease, color 150ms ease;
    transform-origin: center;
    align-self: center;
  }
  .pw .recv-section:hover > .recv-section-head { background: #F6F9FA; }
  .pw .recv-section:hover > .recv-section-head::after { color: var(--accent); }
  .pw .recv-section.is-open > .recv-section-head::after {
    transform: rotate(45deg);
    color: var(--accent);
  }
  /* Collapse-by-default: hide every direct child of .recv-section apart from the clickable head. */
  .pw .recv-section > :not(.recv-section-head) { display: none; }
  .pw .recv-section.is-open > :not(.recv-section-head) { display: block; }
  .pw .recv-section.is-open > .recv-section-head { padding-bottom: 10px; }
  /* Inner body wrapper for top padding when open */
  .pw .recv-section-body {
    padding: 0 12px 22px;
  }
  .pw .recv-section.is-open > .recv-section-body { display: block; }
  @media (max-width: 720px) { .pw .recv-section-head { grid-template-columns: 1fr 36px; gap: 6px; } .pw .recv-section-head .recv-section-num { grid-column: 1 / -1; } }
  .pw .recv-section-num {
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-section-title {
    font-family: var(--f-head);
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
  }
  .pw .recv-section-title .accent { color: var(--accent); }
  .pw .recv-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 18px;
    max-width: 720px;
  }
  .pw .recv-id-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
  @media (max-width: 880px) { .pw .recv-id-grid { grid-template-columns: 1fr; } }
  .pw .recv-id-card {
    padding: 20px 22px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pw .recv-id-card:last-child { border-right: none; }
  @media (max-width: 880px) {
    .pw .recv-id-card { border-right: none; border-bottom: 1px solid var(--line); }
    .pw .recv-id-card:last-child { border-bottom: none; }
  }
  .pw .recv-id-tag {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pw .recv-id-name {
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
  }
  .pw .recv-id-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .pw .recv-id-period {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
    padding-top: 8px;
  }
  .pw .recv-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 980px) { .pw .recv-options { grid-template-columns: 1fr; } }
  .pw .recv-option {
    border: 1px solid var(--ink);
    background: var(--bg);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 150ms ease, border-color 150ms ease;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    width: 100%;
  }
  .pw .recv-option:hover { border-color: var(--accent); background: #F6F9FA; }
  .pw .recv-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pw .recv-option-num {
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }
  .pw .recv-option-title {
    font-family: var(--f-head);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
  }
  .pw .recv-option-title .accent { color: var(--accent); }
  .pw .recv-option-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
  }
  .pw .recv-option-legal {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }
  .pw .recv-option-meta {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 12px;
    row-gap: 6px;
  }
  .pw .recv-option-meta dt {
    font-family: var(--f-body);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
  }
  .pw .recv-option-meta dd {
    margin: 0;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
  }
  .pw .recv-option.expanded { border-color: var(--accent); background: var(--accent-soft); }
  .pw .recv-option-detail {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 134, 0, 0.4);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .pw .recv-option.expanded .recv-option-detail { display: block; }
  .pw .recv-option-detail p { margin: 0 0 8px; }
  .pw .recv-option-detail p:last-child { margin-bottom: 0; }
  .pw .recv-option-detail h6 {
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    margin: 12px 0 4px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-transform: none;
  }
  .pw .recv-option-detail .ref-tag {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--f-body);
    margin-top: 6px;
    display: inline-block;
  }
  .pw .recv-option-toggle {
    margin-top: 14px;
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-option.expanded .recv-option-toggle::before { content: '\2014 Collapse'; }
  .pw .recv-option:not(.expanded) .recv-option-toggle::before { content: '+ See what this means'; }
  .pw .recv-clock {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--line-strong);
    margin: 0;
  }
  @media (max-width: 880px) { .pw .recv-clock { grid-template-columns: 1fr; } }
  .pw .recv-clock-step {
    padding: 18px 18px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg);
    min-height: 160px;
  }
  .pw .recv-clock-step:last-child { border-right: none; }
  @media (max-width: 880px) {
    .pw .recv-clock-step { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
    .pw .recv-clock-step:last-child { border-bottom: none; }
  }
  .pw .recv-clock-step.now { background: var(--accent-soft); }
  .pw .recv-clock-step.warn { background: #fff6f6; }
  .pw .recv-clock-day {
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-clock-step.warn .recv-clock-day { color: var(--warn); }
  .pw .recv-clock-title {
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .pw .recv-clock-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .pw .recv-clock-ref {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--f-body);
    margin-top: auto;
    padding-top: 6px;
  }
  .pw .recv-explainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-strong);
  }
  @media (max-width: 880px) { .pw .recv-explainer { grid-template-columns: 1fr; } }
  .pw .recv-explainer-cell {
    padding: 20px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pw .recv-explainer-cell:nth-child(2n) { border-right: none; }
  @media (max-width: 880px) {
    .pw .recv-explainer-cell { border-right: none; }
  }
  .pw .recv-explainer-tag {
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-explainer-title {
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .pw .recv-explainer-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .pw .recv-explainer-body p { margin: 0 0 6px; }
  .pw .recv-explainer-body p:last-child { margin-bottom: 0; }
  .pw .recv-explainer-body .ref-tag {
    font-family: var(--f-body);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 6px;
    display: inline-block;
  }
  .pw .recv-costs {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    margin: 0;
  }
  @media (max-width: 720px) { .pw .recv-costs { grid-template-columns: 1fr; } }
  .pw .recv-costs > dt,
  .pw .recv-costs > dd {
    padding: 14px 18px;
    margin: 0;
    border-bottom: 1px solid var(--line);
  }
  .pw .recv-costs > dt:nth-last-of-type(1),
  .pw .recv-costs > dd:nth-last-of-type(1) { border-bottom: none; }
  .pw .recv-costs > dt {
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    background: #F6F9FA;
    border-right: 1px solid var(--line);
    align-self: start;
  }
  .pw .recv-costs > dd {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
  }
  @media (max-width: 720px) {
    .pw .recv-costs > dt { border-right: none; }
  }
  .pw .recv-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line-strong);
  }
  @media (max-width: 720px) { .pw .recv-pair { grid-template-columns: 1fr; } }
  .pw .recv-pair-cell {
    padding: 22px 24px;
    border-right: 1px solid var(--line-strong);
  }
  .pw .recv-pair-cell:last-child { border-right: none; }
  @media (max-width: 720px) {
    .pw .recv-pair-cell { border-right: none; border-bottom: 1px solid var(--line-strong); }
    .pw .recv-pair-cell:last-child { border-bottom: none; }
  }
  .pw .recv-pair-tag {
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
  }
  .pw .recv-pair-cell h5 {
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
    color: var(--ink);
    line-height: 1.2;
  }
  .pw .recv-pair-cell ul { list-style: none; margin: 0; padding: 0; }
  .pw .recv-pair-cell ul li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: baseline;
  }
  .pw .recv-pair-cell ul li:last-child { border-bottom: none; }
  .pw .recv-pair-cell ul li::before {
    content: '\2192';
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-warning {
    border: 1px solid #C86A00;
    background: #FFE8EE;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 22px;
    align-items: start;
  }
  @media (max-width: 720px) { .pw .recv-warning { grid-template-columns: 1fr; gap: 10px; } }
  .pw .recv-warning-tag {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 700;
    color: #B8003A;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pw .recv-warning-tag::before {
    content: '!';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #C86A00;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: var(--f-head);
    font-weight: 700;
  }
  .pw .recv-warning-body h4 {
    font-family: var(--f-head);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .pw .recv-warning-body p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 8px;
    max-width: 720px;
  }
  .pw .recv-warning-body p:last-child { margin-bottom: 0; }
  .pw .recv-warning-body strong { color: var(--ink); font-weight: 600; }
  .pw .recv-anchors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin: 18px 0 24px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
    /* v112.2 — Pin to top via position:fixed + a JS-managed spacer below.
       We tried position:sticky first, but `html, body { overflow-x: hidden }`
       (mobile horizontal-scroll guard ~line 4923) creates a scroll context
       that prevents position:sticky from latching to the viewport, so the
       nav simply scrolled away with the page. Fixed-positioning side-steps
       the issue entirely and is what the meta bar already uses. */
    transition: box-shadow 200ms ease, border-color 200ms ease;
  }
  .pw .recv-anchors.is-stuck {
    /* v112.5 — left/width are set inline by JS to match the .frame's
       inner content rect (so the stuck nav lines up with the unstuck
       width instead of stretching edge-to-edge). top is also set inline
       to the meta bar's live rendered height. */
    position: fixed;
    z-index: 90;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-top-color: var(--line);
    border-bottom-color: var(--line-strong);
  }
  /* JS-managed spacer immediately follows the nav and matches its height
     while .is-stuck is applied, so the content below doesn't jump up when
     the nav lifts out of flow. */
  .pw .recv-anchors-spacer { display: none; }
  .pw .recv-anchors-spacer.is-active { display: block; }
  .pw .recv-anchor {
    background: none;
    border: none;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 16px 18px 18px;
    font: inherit;
    font-family: var(--f-body);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* v112.1 — Drop padding transition. The stuck/unstuck swap should be a
       clean snap; animating the padding made the descriptor text jump under
       its own clip-rect on Firefox/Safari and felt unresponsive on Chrome. */
    transition: color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .recv-anchor:hover { color: var(--accent); background: #fff; }
  .pw .recv-anchor:nth-child(6n) { border-right: none; }
  .pw .recv-anchor:nth-last-child(-n+6) { border-bottom: none; }
  /* v112 — scroll-spy active state (4.4). The IntersectionObserver in JS
     tags the anchor whose section is currently in view. */
  .pw .recv-anchor.is-active {
    background: #fff;
    box-shadow: inset 0 -3px 0 var(--accent);
  }
  .pw .recv-anchor.is-active .recv-anchor-title { color: var(--ink); font-weight: 700; }
  .pw .recv-anchor.is-active .recv-anchor-num   { color: var(--accent); }
  /* v112 — when the strip is pinned to the top, collapse the descriptions
     and tighten padding so the navigator takes less vertical space than
     the relaxed at-top-of-page view. */
  .pw .recv-anchors.is-stuck .recv-anchor { padding: 8px 12px 9px; gap: 2px; }
  .pw .recv-anchors.is-stuck .recv-anchor-desc { display: none; }
  .pw .recv-anchors.is-stuck .recv-anchor-title { font-size: 12.5px; line-height: 1.2; }
  .pw .recv-anchor .num,
  .pw .recv-anchor-num {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-anchor-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
  }
  .pw .recv-anchor-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  /* Responsive: drop columns and hide descriptions as space shrinks */
  @media (max-width: 1100px) {
    .pw .recv-anchors { grid-template-columns: repeat(4, 1fr); }
    .pw .recv-anchor { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .pw .recv-anchor:nth-child(6n) { border-right: 1px solid var(--line); }
    .pw .recv-anchor:nth-last-child(-n+6) { border-bottom: 1px solid var(--line); }
    .pw .recv-anchor:nth-child(4n) { border-right: none; }
    .pw .recv-anchor:nth-last-child(-n+4):nth-child(n+9) { border-bottom: none; }
    .pw .recv-anchor-desc { display: none; }
  }
  @media (max-width: 760px) {
    .pw .recv-anchors { grid-template-columns: repeat(3, 1fr); }
    .pw .recv-anchor { padding: 12px 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .pw .recv-anchor:nth-child(4n) { border-right: 1px solid var(--line); }
    .pw .recv-anchor:nth-child(3n) { border-right: none; }
    .pw .recv-anchor:nth-last-child(-n+3) { border-bottom: none; }
    .pw .recv-anchor-title { font-size: 13px; }
  }
  @media (max-width: 480px) {
    .pw .recv-anchors { grid-template-columns: repeat(2, 1fr); }
    .pw .recv-anchor:nth-child(3n) { border-right: 1px solid var(--line); }
    .pw .recv-anchor:nth-child(2n) { border-right: none; }
    .pw .recv-anchor:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
    .pw .recv-anchor:nth-last-child(-n+2) { border-bottom: none; }
  }

  /* v112 — Floating "Back to top" button on the Received-a-notice page
     (4.4). Appears only after the user has scrolled past the first section
     so it does not crowd the top of the page. */
  .pw .recv-to-top {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(20px, 4vw, 36px);
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    font-family: var(--f-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, color 150ms ease, border-color 150ms ease;
  }
  .pw .recv-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .pw .recv-to-top:hover { color: var(--accent); border-color: var(--accent); }
  .pw .recv-to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pw .recv-to-top .recv-to-top-arrow {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
  }
  @media (max-width: 480px) {
    .pw .recv-to-top { padding: 9px 12px; font-size: 12px; }
  }

  .pw .recv-helper-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
  @media (max-width: 720px) { .pw .recv-helper-grid { grid-template-columns: 1fr; } }
  .pw .recv-helper-q {
    padding: 18px 22px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pw .recv-helper-q:nth-child(2n) { border-right: none; }
  @media (max-width: 720px) { .pw .recv-helper-q { border-right: none; } }
  .pw .recv-helper-q .qq {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .pw .recv-helper-q .aa {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .pw .recv-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 3.5vw, 48px);
    align-items: end;
    margin: 8px 0 24px;
  }
  @media (max-width: 880px) { .pw .recv-hero { grid-template-columns: 1fr; gap: 14px; } }
  .pw .recv-hero :is(h1,h2) {
    font-family: var(--f-head);
    font-size: clamp(34px, min(5.4vw, 8vh), 70px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
  }
  .pw .recv-hero :is(h1,h2) .accent { color: var(--accent); }
  .pw .recv-hero p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
    max-width: 480px;
  }

  /* ===== Stage 5 additions — Top action panel, option 4, dissent, checklist, object grid, helper tool ===== */
  .pw .recv-action-panel {
    border: 1px solid var(--line-strong);
    background: #F6F9FA;
    padding: 22px 24px;
    margin: 18px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pw .recv-action-title {
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
  }
  .pw .recv-action-steps {
    margin: 0;
    padding-left: 22px;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
    counter-reset: recv-step;
    list-style: none;
  }
  .pw .recv-action-steps li {
    counter-increment: recv-step;
    position: relative;
    padding: 4px 0 4px 6px;
  }
  .pw .recv-action-steps li::before {
    content: counter(recv-step) ".";
    position: absolute;
    left: -22px;
    width: 22px;
    text-align: right;
    color: var(--accent);
    font-weight: 700;
    font-family: var(--f-body);
    font-size: 13px;
  }
  .pw .recv-action-reassure {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    border-top: 1px dashed var(--line);
    padding-top: 12px;
  }
  @media (max-width: 720px) {
    .pw .recv-action-panel { padding: 18px 18px; }
  }

  /* Option-card additions: pros/caution lists + clarification card */
  .pw .recv-option-pros,
  .pw .recv-option-caution {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .pw .recv-option-pros li,
  .pw .recv-option-caution li {
    padding: 3px 0 3px 18px;
    position: relative;
  }
  .pw .recv-option-pros li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-option-caution li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: var(--warn);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    top: 4px;
  }
  .pw .recv-option.recv-option-clarify {
    border-style: dashed;
  }
  .pw .recv-option.recv-option-clarify .recv-option-title { color: var(--ink); }

  /* Notice-type cards: extra note + ref */
  .pw .recv-id-note {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    padding: 8px 10px;
  }
  .pw .recv-id-ref {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--f-body);
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .pw .recv-id-ref strong {
    color: var(--ink);
    font-weight: 700;
  }

  /* Dissent explainer block */
  .pw .recv-dissent-block {
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--accent);
    padding: 22px 26px;
    background: #fff;
  }
  .pw .recv-dissent-lead {
    font-family: var(--f-head);
    font-size: 18px;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.015em;
  }
  .pw .recv-dissent-lead strong { color: var(--accent); }
  .pw .recv-dissent-block p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 8px;
  }
  .pw .recv-dissent-block p:last-child { margin-bottom: 0; }

  /* Notice-quality checklist */
  .pw .recv-checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: #fff;
  }
  .pw .recv-checklist-list li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 12px 16px;
    align-items: start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .pw .recv-checklist-list li:last-child { border-bottom: none; }
  .pw .recv-check-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    border-radius: 2px;
    background: var(--accent-soft);
  }

  /* "Can I object" Party Wall vs other matters grid */
  .pw .recv-object-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line-strong);
  }
  @media (max-width: 720px) { .pw .recv-object-grid { grid-template-columns: 1fr; } }
  .pw .recv-object-cell {
    padding: 22px 24px;
    border-right: 1px solid var(--line-strong);
  }
  .pw .recv-object-cell:last-child { border-right: none; }
  @media (max-width: 720px) {
    .pw .recv-object-cell { border-right: none; border-bottom: 1px solid var(--line-strong); }
    .pw .recv-object-cell:last-child { border-bottom: none; }
  }
  .pw .recv-object-pw { background: var(--accent-soft); }
  .pw .recv-object-out { background: #F6F9FA; }
  .pw .recv-object-tag {
    font-family: var(--f-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
  }
  .pw .recv-object-out .recv-object-tag { color: var(--muted); }
  .pw .recv-object-cell h5 {
    font-family: var(--f-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--ink);
    line-height: 1.2;
  }
  .pw .recv-object-cell ul { list-style: none; margin: 0; padding: 0; }
  .pw .recv-object-cell ul li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
    padding: 6px 0 6px 18px;
    position: relative;
    border-bottom: 1px dashed var(--line);
  }
  .pw .recv-object-cell ul li:last-child { border-bottom: none; }
  .pw .recv-object-cell ul li::before {
    content: '\2192';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-object-out ul li::before { color: var(--muted); }

  /* Response template helper tool */
  .pw .recv-helper-tool {
    border: 1px solid var(--line-strong);
    background: #fff;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .pw .recv-helper-options {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 720px) { .pw .recv-helper-options { grid-template-columns: 1fr; } }
  .pw .recv-helper-legend {
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    grid-column: 1 / -1;
    padding: 0;
    margin-bottom: 4px;
  }
  .pw .recv-helper-radio {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    background: #F6F9FA;
    cursor: pointer;
    align-items: start;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .pw .recv-helper-radio:hover { background: #fff; border-color: var(--accent); }
  .pw .recv-helper-radio input[type="radio"] {
    margin: 4px 0 0;
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
  }
  .pw .recv-helper-radio:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  .pw .recv-helper-radio:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .pw .recv-helper-radio-title {
    grid-column: 2;
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .pw .recv-helper-radio-sub {
    grid-column: 2;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .pw .recv-helper-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 720px) { .pw .recv-helper-fields { grid-template-columns: 1fr; } }
  .pw .recv-helper-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pw .recv-helper-field-full { grid-column: 1 / -1; }
  .pw .recv-helper-field label {
    font-family: var(--f-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
  }
  .pw .recv-helper-field input,
  .pw .recv-helper-field textarea {
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    border-radius: 0;
    transition: background 120ms ease, border-color 120ms ease;
    font-family: var(--f-body);
  }
  .pw .recv-helper-field textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
  }
  .pw .recv-helper-field input:focus,
  .pw .recv-helper-field textarea:focus {
    outline: none;
    background: #fff;
    border-top-color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .pw .recv-helper-field[hidden] { display: none; }
  .pw .recv-helper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .pw .recv-helper-status {
    font-size: 12.5px;
    color: var(--ink-soft);
  }
  .pw .recv-helper-status.ok { color: var(--accent); font-weight: 600; }
  .pw .recv-helper-status.err { color: var(--warn); font-weight: 600; }
  .pw .recv-helper-output {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px dashed var(--line);
    padding-top: 14px;
  }
  .pw .recv-helper-output[hidden] { display: none; }
  .pw .recv-helper-output-label {
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }
  .pw .recv-helper-output textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: #F6F9FA;
    padding: 14px 16px;
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    resize: vertical;
    min-height: 240px;
    border-radius: 0;
    box-sizing: border-box;
  }
  .pw .recv-helper-output textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
  }
  .pw .recv-helper-caveat {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
    background: #FFE8EE;
    border-left: 3px solid var(--accent);
    padding: 10px 12px;
  }
  .pw .recv-helper-caveat strong { color: var(--ink); }

  /* Disclaimer block: stack the three paragraphs neatly */
  .pw .recv-disclaimer { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
  .pw .recv-disclaimer p { margin: 0; }

  /* =========================================================
     Stage 1 redesign — minimal UI additions
     (Yes / No / I'm not sure buttons, project type multi-select,
     building owner & adjoining owner repeaters, richer result
     summary). Visual design will be revisited in a later stage.
     ========================================================= */

  /* 3-option answer row (Yes / No / I'm not sure) */
  .pw .actions .btn.btn-not-sure {
    background: #fff;
    color: var(--ink-soft);
    border: 1px dashed var(--line-strong);
  }
  .pw .actions .btn.btn-not-sure:hover {
    background: var(--accent-soft);
    color: var(--ink);
    border-style: solid;
    border-color: var(--accent);
  }

  /* Project type multi-select grid */
  .pw .pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 18px;
  }
  .pw .pt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: border-color 150ms ease, background 150ms ease;
    font-size: 14px;
  }
  .pw .pt-item:hover { border-color: var(--line-strong); }
  .pw .pt-item.checked {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .pw .pt-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
  }

  /* Repeater (building owners / adjoining owners) */
  .pw .repeater { display: flex; flex-direction: column; gap: 18px; }
  .pw .repeater-card {
    border: 1px solid var(--line);
    border-radius: 6px;            /* v111 (audit 3.3) — was 8px; brought into 2/4/6/pill scale */
    padding: 18px 20px;
    background: #fff;
    position: relative;
  }
  .pw .repeater-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 12px;
  }
  .pw .repeater-card-title {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .pw .repeater-remove {
    background: none;
    border: none;
    color: var(--warn);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
  }
  .pw .repeater-remove:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }
  .pw .repeater-add {
    align-self: flex-start;
    background: #fff;
    border: 1px dashed var(--line-strong);
    color: var(--ink);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
  }
  .pw .repeater-add:hover { background: var(--accent-soft); border-color: var(--accent); }
  .pw .repeater-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 720px) {
    .pw .repeater-row { grid-template-columns: 1fr; }
  }
  .pw .repeater-field { display: flex; flex-direction: column; gap: 4px; }
  .pw .repeater-field.full { grid-column: 1 / -1; }
  .pw .repeater-field label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .pw .repeater-field input,
  .pw .repeater-field select,
  .pw .repeater-field textarea {
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 10px;
    background: #fff;
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
  }
  .pw .repeater-field input:focus,
  .pw .repeater-field select:focus,
  .pw .repeater-field textarea:focus {
    outline: none;
    border-color: var(--accent);
  }
  .pw .repeater-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .pw .repeater-checkbox input { accent-color: var(--accent); }

  /* Result summary — richer notice cards.
     (v111 — audit 3.8) The legacy `.notice-list li { display: grid; ... }`
     rule that this card override was paper-over for has been deleted, so the
     paper-over (display:block; grid-template-columns:none; gap:0; align-items:stretch)
     is no longer needed. Only the visual card styling remains here. */
  .pw .notice-list .notice-card {
    list-style: none;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: #fff;
  }
  .pw .notice-list .notice-card.confidence-possible { border-left-color: #b97a18; }
  .pw .notice-list .notice-card.confidence-uncertain { border-left-color: var(--muted); }
  .pw .notice-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .pw .notice-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }
  .pw .notice-card-section {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .pw .notice-card-confidence {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
  }
  .pw .conf-likely    { background: var(--accent-soft); color: var(--accent); }
  .pw .conf-possible  { background: #fff4e0; color: #b97a18; }
  .pw .conf-uncertain { background: #F6F9FA; color: var(--muted); }
  .pw .notice-card-body { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
  .pw .notice-card-meta {
    margin-top: 10px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
  }
  .pw .notice-card-meta strong { color: var(--ink); font-weight: 600; }
  /* (v77) Belt-and-braces: make the card's content blocks behave as full-width block elements
     regardless of any inherited grid/flex context. This guarantees the warning text fills the
     warning panel from left to right, instead of being squashed into a one-word-per-line column. */
  .pw .notice-card-head,
  .pw .notice-card-body,
  .pw .notice-card-warnings,
  .pw .notice-card-applies { display: block; width: 100%; box-sizing: border-box; }
  .pw .notice-card-head { display: flex; }
  .pw .notice-card-warnings p,
  .pw .notice-card-warnings li,
  .pw .notice-card-warnings ul { max-width: 100%; }
  .pw .notice-card-warnings {
    margin-top: 10px;
    padding: 10px 12px;
    background: #FFE8EE;
    border: 1px solid #FFD6A0;
    border-radius: 4px;
    font-size: 13px;
    color: #B8003A;
  }
  .pw .notice-card-warnings ul { margin: 0; padding-left: 18px; }
  .pw .notice-card-applies {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
  }
  .pw .uncertainty-block {
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 16px;
    background: #F6F9FA;
  }
  .pw .uncertainty-block h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .pw .uncertainty-block ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }

  /* Helper text under headlines */
  .pw .q-helper {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 640px;
  }
  .pw .q-followup {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    font-size: 13px;
    color: var(--ink);
  }
  .pw .ws-checkbox-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }
  .pw .ws-checkbox-block .ws-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-soft);
  }
  .pw .ws-checkbox-block input { accent-color: var(--accent); margin-top: 3px; }
  /* v74 — Stacked-option buttons inside a question body.
     Buttons in `.ws-checkbox-block` are vertical multi-choice options, not the
     horizontal `.actions` cluster, so the global `.btn + .btn { border-left: none; }`
     rule (which exists to butt horizontal buttons together) leaves these with a
     missing left border. Restore the full border and give them the same option-card
     treatment used by `.recv-option` elsewhere on the site for consistency. */
  .pw .ws-checkbox-block .btn {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--ink);
    background: var(--bg);
    color: var(--ink);
    padding: 18px 20px;
    min-height: 56px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
  }
  .pw .ws-checkbox-block .btn + .btn { border-left: 1px solid var(--ink); }
  .pw .ws-checkbox-block .btn:hover {
    background: #F6F9FA;
    border-color: var(--accent);
    color: var(--ink);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .pw .ws-checkbox-block .btn:active { transform: translateY(1px); }
  .pw .ws-checkbox-block .btn.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* =========================================================
     v75 — Consistent question-stage heights
     ---------------------------------------------------------
     `<main id="main-content">` is block-level by default, so the
     `.stage { flex: 1; }` rule could never actually make a stage
     fill the .frame — the stage just collapsed to natural content
     height and the Yes/No/Not-sure buttons ended up at a different
     Y position on every question. Make <main> a flex column so
     `.stage { flex: 1 }` finally bites, and add a viewport-tied
     min-height to every question stage so its `.bottom` action bar
     always lands in the same place — the same place where the
     "Start notice check" button sits on the Before-you-start page.

     Headlines and illustration images are clamped a step smaller on
     question stages so the whole layout fits inside a 900px-tall
     desktop / laptop viewport without scrolling. The "Tick the
     works that apply" picker (q2b) is excluded — its picker grid
     and the running tally need to scroll inside the screen if the
     user picks lots of items.
     ========================================================= */
  .pw main#main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  /* Lock every Notice-questions stage to a consistent height.
     `--qstage-h` = viewport minus the fixed meta header (60px),
     minus the topnav (~52px), minus the frame's vertical padding
     (~28-48px), so on a 900px viewport the question fits cleanly
     and the action bar sits at ~860-870px from the top of the page —
     the same band the Before-you-start CTA already lives in. */
  .pw .stage[data-progress="01"].active:not(#stage-q2b) {
    min-height: calc(100vh - var(--meta-h, 60px) - 100px);
  }
  /* Clamp the right-hand illustration so a tall image cannot push
     the action bar below the fold on a 900px viewport. */
  .pw .stage[data-progress="01"] .visual img {
    max-height: clamp(200px, 40vh, 360px);
  }
  /* Slightly tighter headline so longer question titles still fit
     inside the question column above the image. The wizard global
     headline (clamp(34px, ...)) was tuned for the Before page,
     which is taller. */
  .pw .stage[data-progress="01"] :is(h1,h2).headline {
    font-size: clamp(28px, min(4.4vw, 6.2vh), 52px);
    line-height: 1.05;
  }
  .pw .stage[data-progress="01"] .q-helper {
    margin-top: 12px;
    line-height: 1.5;
  }
  /* Below 880px the .q-grid collapses to a single column anyway;
     drop the locked height so vertical content can flow naturally
     and the user can scroll on phones. */
  @media (max-width: 880px) {
    .pw .stage[data-progress="01"].active:not(#stage-q2b) {
      min-height: 0;
    }
    .pw .stage[data-progress="01"] .visual img {
      max-height: 320px;
    }
  }

  /* =========================================================
     Stage 2 redesign — guided homeowner wizard
     ========================================================= */

  /* Reusable info / warning callouts inside wizard steps
     v73: corners squared to match the boxed-banner pattern used elsewhere
     on the site (form-section banners, recv panels, etc.). */
  .pw .wiz-callout {
    border: 1px solid var(--line-strong);
    background: #F6F9FA;
    padding: 14px 16px;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 12px 0;
  }
  .pw .wiz-callout strong { color: var(--ink); font-weight: 600; }
  .pw .wiz-callout.wiz-info { border-left: 4px solid var(--accent); }
  .pw .wiz-callout.wiz-warn { border-left: 4px solid #C86A00; background: #FFE8EE; }
  .pw .wiz-callout.wiz-warn strong { color: #B8003A; }
  .pw .wiz-callout h4 {
    margin: 0 0 6px;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .pw .wiz-callout ul { margin: 6px 0 0 18px; padding: 0; }
  .pw .wiz-callout li { margin: 3px 0; }

  /* Step body — generic content area for the new wizard stages */
  .pw .wiz-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    flex: 1;
    min-height: 0;
    padding: 4px 0 8px;
    align-content: start;
  }
  .pw .wiz-body.with-aside {
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px, 3vw, 48px);
  }
  @media (max-width: 880px) {
    .pw .wiz-body.with-aside { grid-template-columns: 1fr; gap: 20px; }
  }
  .pw .wiz-body :is(h1,h2).headline { font-size: clamp(28px, min(4.4vw, 6.4vh), 56px); }
  .pw .wiz-body p.q-helper { max-width: 720px; }
  .pw .wiz-body .wiz-aside {
    border-left: 1px solid var(--line-strong);
    padding-left: clamp(20px, 2.4vw, 32px);
  }
  @media (max-width: 880px) {
    .pw .wiz-body .wiz-aside { border-left: none; border-top: 1px solid var(--line-strong); padding: 18px 0 0; }
  }
  .pw .wiz-aside h3 {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .pw .wiz-aside ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pw .wiz-aside ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .pw .wiz-aside ul li:last-child { border-bottom: none; }

  /* Step 0 — Before you start */
  .pw .before-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
    flex: 1;
  }
  @media (max-width: 880px) { .pw .before-grid { grid-template-columns: 1fr; } }
  .pw .before-grid :is(h1,h2) {
    font-family: var(--f-head);
    font-size: clamp(34px, min(5.4vw, 8vh), 70px);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
  }
  .pw .before-grid :is(h1,h2) .accent { color: var(--accent); }

  /* Step 1 — Role cards */
  .pw .role-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
  }
  @media (max-width: 980px) { .pw .role-cards { grid-template-columns: 1fr; } }
  .pw .role-card {
    border: 1px solid var(--ink);
    background: #fff;
    padding: 22px 22px 20px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 150ms ease, border-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
  }
  .pw .role-card:hover { border-color: var(--accent); background: var(--accent-soft); }
  .pw .role-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pw .role-card-num {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .pw .role-card-title {
    font-family: var(--f-head);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .pw .role-card-desc {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  /* Stepper (top-of-step progress indicator)
     v73: restyled to match the .recv-anchor pattern used on the
     Received-a-notice page — orange number, bold heading, grey descriptor,
     square corners, grey strip between two strong rules. */
  .pw .stepper {
    display: grid;
    /* v85 — 7 columns after the Works + Start date merge (was 8). */
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin: 0 0 24px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
    font-family: var(--f-body);
    color: var(--ink);
  }
  .pw .stepper .stepper-pill {
    background: none;
    border: none;
    border-right: 1px solid var(--line);
    padding: 14px 14px 16px;
    font: inherit;
    font-family: var(--f-body);
    color: var(--ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .stepper .stepper-pill:last-child { border-right: none; }
  .pw .stepper .stepper-pill:hover { background: #fff; }
  .pw .stepper .stepper-pill.is-locked { opacity: 0.55; }
  .pw .stepper .stepper-pill.is-locked:hover { background: none; }
  .pw .stepper .stepper-num {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
  }
  .pw .stepper .stepper-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
  }
  .pw .stepper .stepper-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  .pw .stepper .stepper-pill.done .stepper-title { color: var(--ink); }
  .pw .stepper .stepper-pill.current { background: #fff; box-shadow: inset 0 -3px 0 var(--accent); }
  .pw .stepper .stepper-pill.current .stepper-title { color: var(--ink); font-weight: 700; }
  .pw .stepper-mobile { display: none; }
  /* Responsive: drop columns and hide descriptions as space shrinks
     (same pattern as .recv-anchors). */
  @media (max-width: 1100px) {
    .pw .stepper { grid-template-columns: repeat(4, 1fr); }
    .pw .stepper .stepper-pill { border-bottom: 1px solid var(--line); }
    .pw .stepper .stepper-pill:nth-child(4n) { border-right: none; }
    .pw .stepper .stepper-pill:nth-last-child(-n+4) { border-bottom: none; }
    .pw .stepper .stepper-pill:last-child { border-right: none; }
    .pw .stepper .stepper-desc { display: none; }
  }
  @media (max-width: 760px) {
    .pw .stepper { grid-template-columns: repeat(3, 1fr); }
    .pw .stepper .stepper-pill { padding: 12px 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .pw .stepper .stepper-pill:nth-child(4n) { border-right: 1px solid var(--line); }
    .pw .stepper .stepper-pill:nth-child(3n) { border-right: none; }
    .pw .stepper .stepper-pill:nth-last-child(-n+3) { border-bottom: none; }
    .pw .stepper .stepper-pill:last-child { border-right: none; }
    .pw .stepper .stepper-title { font-size: 13px; }
  }
  @media (max-width: 480px) {
    .pw .stepper { grid-template-columns: repeat(2, 1fr); }
    .pw .stepper .stepper-pill:nth-child(3n) { border-right: 1px solid var(--line); }
    .pw .stepper .stepper-pill:nth-child(2n) { border-right: none; }
    .pw .stepper .stepper-pill:nth-last-child(-n+2) { border-bottom: none; }
    .pw .stepper .stepper-pill:last-child { border-right: none; }
  }

  /* v112 — Sub-question progress strip
     Rendered below the main stepper only while the user is on one of the
     notice-question sub-stages (stage-q1, stage-q1-depth, etc.). Expands the
     opaque "Step 01 — Notice questions" pill into a visible count of how far
     through the question set the user is.
     v112.1 — borders updated to top + bottom only (no left/right edges) so
     the strip reads as a continuation of the stepper rule above. Negative
     top margin of -1px collapses the duplicate horizontal rule between the
     stepper's bottom border and the strip's top border. */
  .pw .q-sub-progress {
    display: none;
    align-items: center;
    gap: 12px;
    margin: -1px 0 24px;
    padding: 10px 14px;
    background: #F6F9FA;
    border: none;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--f-body);
    font-size: 12px;
    color: var(--muted);
  }
  .pw .q-sub-progress.is-visible { display: flex; flex-wrap: wrap; }
  .pw .q-sub-progress .qsp-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin-right: 4px;
  }
  .pw .q-sub-progress .qsp-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .pw .q-sub-progress .qsp-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
  }
  .pw .q-sub-progress .qsp-dot {
    width: 18px;
    height: 6px;
    background: var(--line);
    border-radius: 2px;
    transition: background 150ms ease;
  }
  .pw .q-sub-progress .qsp-dot.is-done { background: var(--accent); }
  .pw .q-sub-progress .qsp-dot.is-current {
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(255, 134, 0, 0.18);
  }
  @media (max-width: 760px) {
    .pw .q-sub-progress { font-size: 11px; gap: 8px; }
    .pw .q-sub-progress .qsp-dot { width: 14px; height: 5px; }
  }
  @media (max-width: 480px) {
    .pw .q-sub-progress .qsp-dots { gap: 4px; }
    .pw .q-sub-progress .qsp-dot { width: 10px; height: 5px; }
  }

  /* Trigger-question block — Step 5 sub-questions share a header */
  .pw .trig-header {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
  }
  .pw .trig-header strong { color: var(--accent); }

  /* Status badges on review cards */
  .pw .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
  }
  .pw .status-incomplete { background: #FFE8EE; color: #B8003A; border-color: #C86A00; }
  .pw .status-draft      { background: #fff4e0; color: #b97a18; border-color: #e2b46c; }
  .pw .status-ready      { background: #effaf1; color: #1a7a3a; border-color: #79c197; }

  /* Review notice card — extra detail rows */
  .pw .notice-card-detail {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .pw .notice-card-detail strong { color: var(--ink); font-weight: 600; }
  .pw .notice-card-detail .nc-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
  }
  .pw .notice-card-detail .nc-row:last-child { border-bottom: none; }
  @media (max-width: 720px) {
    .pw .notice-card-detail .nc-row { grid-template-columns: 1fr; gap: 2px; }
  }
  .pw .notice-card-missing {
    margin-top: 10px;
    padding: 10px 12px;
    background: #FFE8EE;
    border: 1px solid #FFD6A0;
    border-radius: 4px;
    font-size: 13px;
    color: #B8003A;
  }
  .pw .notice-card-missing strong { color: #B8003A; }
  .pw .notice-card-missing ul { margin: 4px 0 0 18px; padding: 0; }

  /* Pre-generation checklist */
  .pw .pre-gen-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
  }
  .pw .pre-gen-list li {
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.45;
    position: relative;
  }
  .pw .pre-gen-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--ink);
    border-radius: 2px;
    background: #fff;
  }

  /* Generic helper for the new wizard form sections (single-step) */
  .pw .wiz-section {
    border-top: 1px solid var(--line-strong);
    padding-top: 18px;
    margin-top: 18px;
  }
  .pw .wiz-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
  .pw .wiz-section h2 {
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .pw .wiz-section .wiz-section-helper {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 12px;
    line-height: 1.5;
    max-width: 720px;
  }

  /* Adaptive works-details — show grouped sub-prompts */
  .pw .works-block {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 14px;
    background: #fff;
  }
  .pw .works-block h4 {
    margin: 0 0 6px;
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .pw .works-block .repeater-row { margin-top: 8px; }

  /* Inline yes/no/not-sure mini buttons (used inside Step 5 sub-blocks if needed) */
  .pw .ynm-row {
    display: inline-flex;
    gap: 0;
    margin-top: 8px;
  }
  .pw .ynm-row .btn { padding: 8px 16px; font-size: 13px; min-width: 0; }

  /* ----- Section 6 drawing step (Stage 3 - drawings & readiness) ----- */
  .pw .s6d-question { margin-top: 14px; }
  .pw .s6d-question h3 {
    margin: 0 0 8px;
    font-family: var(--f-head);
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .pw .s6d-options {
    display: grid; gap: 8px; margin: 8px 0 0;
    grid-template-columns: 1fr;
  }
  .pw .s6d-option {
    display: grid; grid-template-columns: 22px 1fr;
    gap: 12px; align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line-strong); background: #F6F9FA;
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
    font-size: 14px; line-height: 1.45; color: var(--ink); text-align: left;
  }
  .pw .s6d-option:hover { background: #F6F9FA; }
  .pw .s6d-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pw .s6d-option input[type="radio"] {
    width: 16px; height: 16px; accent-color: var(--accent); margin-top: 2px;
  }
  .pw .s6d-option .s6d-opt-title { font-weight: 600; display: block; margin-bottom: 2px; }
  .pw .s6d-option .s6d-opt-help { color: var(--ink-soft); font-size: 13px; }
  .pw .s6d-option.selected { background: var(--accent-soft, #FFE8EE); border-color: var(--accent); }

  .pw .s6d-types {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0;
  }
  @media (max-width: 720px) { .pw .s6d-types { grid-template-columns: 1fr; } }
  .pw .s6d-type {
    display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border: 1px solid var(--line-strong); background: #F6F9FA;
    cursor: pointer; font-size: 14px; color: var(--ink);
  }
  .pw .s6d-type:hover { background: #F6F9FA; }
  .pw .s6d-type input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin-top: 2px; }
  .pw .s6d-type.checked { background: var(--accent-soft, #FFE8EE); border-color: var(--accent); }

  .pw .s6d-followup {
    margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent); background: #fff;
  }
  .pw .s6d-followup h4 {
    margin: 0 0 6px; font-family: var(--f-head);
    font-size: 14px; font-weight: 700; color: var(--ink);
  }
  .pw .s6d-followup label {
    display: block; font-size: 13px; font-weight: 600; margin: 8px 0 4px; color: var(--ink);
  }
  .pw .s6d-followup textarea, .pw .s6d-followup input[type="text"] {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--line-strong); background: #F6F9FA;
    font: inherit; font-size: 14px; color: var(--ink); border-radius: 0; resize: vertical;
  }
  .pw .s6d-followup textarea:focus, .pw .s6d-followup input[type="text"]:focus {
    background: #fff; border-color: var(--accent); outline: none;
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .pw .s6d-confirm {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px;
    align-items: flex-start; margin-top: 16px; padding: 12px 14px;
    border: 1px solid var(--line-strong); background: #F6F9FA;
    font-size: 14px; line-height: 1.5;
  }
  .pw .s6d-confirm input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--accent); margin-top: 2px;
  }
  .pw .s6d-confirm.checked { background: var(--accent-soft, #FFE8EE); border-color: var(--accent); }

  .pw .s6d-checklist { margin: 12px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
  .pw .s6d-checklist li { margin: 3px 0; }

  /* In-card Section 6 drawing block on review screen */
  .pw .nc-drawings-block {
    margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    background: #fff; font-size: 13px; color: var(--ink-soft); line-height: 1.5;
  }
  .pw .nc-drawings-block strong { color: var(--ink); font-weight: 600; }
  .pw .nc-drawings-block ul { margin: 6px 0 0 18px; padding: 0; }
  .pw .nc-drawings-block li { margin: 2px 0; }
  .pw .nc-drawings-block.nc-drawings-warn { border-left-color: #C86A00; background: #FFE8EE; }
  .pw .nc-drawings-block.nc-drawings-warn strong { color: #B8003A; }
  .pw .nc-drawings-block.nc-drawings-caution { border-left-color: #b97a18; background: #fff8eb; }
  .pw .nc-drawings-block.nc-drawings-ok { border-left-color: #1a7a3a; background: #f1faf3; }

  /* ----- Welcome scope & trust blocks (Stage 4 content additions) ----- */
  .pw .welcome-scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 36px);
    margin: clamp(24px, 4vh, 40px) 0 0;
    padding: clamp(18px, 2.4vh, 28px) 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 880px) {
    .pw .welcome-scope { grid-template-columns: 1fr; gap: 22px; }
  }
  .pw .welcome-scope-cell :is(h2,h3) {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .pw .welcome-scope-cell p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
  .pw .welcome-scope-cell ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
  .pw .welcome-scope-cell ul li { margin: 2px 0; }
  .pw .welcome-scope-yes :is(h2,h3) { color: var(--ink); }
  .pw .welcome-scope-no :is(h2,h3) { color: #B8003A; }

  .pw .welcome-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 36px);
    margin: clamp(20px, 3vh, 32px) 0 0;
    padding: clamp(18px, 2.4vh, 28px);
    background: #F6F9FA;
    border: 1px solid var(--line);
  }
  @media (max-width: 880px) {
    .pw .welcome-trust { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  }
  .pw .welcome-trust-cell .ref-tag { display: inline-block; margin: 0 0 8px; }
  .pw .welcome-trust-cell :is(h3,h4) {
    font-family: var(--f-head);
    font-size: 14px;            /* v111 (audit 3.6) — was 16px */
    font-weight: 400;           /* v111 (audit 3.6) — was 700; non-bold so the */
    margin: 0 0 8px;            /*    sibling section h3 (caps 11px) reads as the */
    line-height: 1.3;           /*    heavier label, restoring monotonic scale */
  }
  .pw .welcome-trust-cell p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
  .pw .welcome-trust-cell em { color: var(--warn); font-style: italic; }

  /* ----- Glossary (Stage 4 content addition) ----- */
  .pw .glossary {
    margin: clamp(24px, 4vh, 40px) 0 0;
    padding: clamp(18px, 2.4vh, 28px) 0;
    border-top: 1px solid var(--line-strong);
  }
  .pw .glossary > h3 {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
  }
  .pw .glossary-intro { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
  .pw .glossary-list {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 0 clamp(20px, 3vw, 36px);
    align-items: start;
  }
  @media (max-width: 880px) {
    .pw .glossary-list { grid-template-columns: 1fr; }
  }
  .pw .glossary-list dt {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 14px;
    margin: 12px 0 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--ink);
  }
  .pw .glossary-list dd {
    /* Match dt vertical metrics so each row's term + definition sit on the
       same divider rule. */
    margin: 12px 0 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .pw .glossary-list dd em { color: var(--warn); font-style: italic; font-size: 12px; }

  /* ----- Costs / timescales / service blocks (Stage 4 additions) ----- */
  .pw .info-block {
    margin: clamp(20px, 3vh, 28px) 0 0;
    padding: clamp(16px, 2vh, 22px);
    background: #F6F9FA;
    border-left: 3px solid var(--accent);
  }
  .pw .info-block > h4 {
    font-family: var(--f-head);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
  }
  .pw .info-block p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
  .pw .info-block ul { margin: 6px 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
  .pw .info-block ul li { margin: 3px 0; }
  .pw .info-block em { color: var(--warn); font-style: italic; }
  .pw .info-block .info-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
  }
  /* Collapsible variant — homepage Q&A blocks */
  .pw .info-block.is-collapsible { padding: 0; }
  .pw .info-block.is-collapsible > details { display: block; }
  .pw .info-block.is-collapsible > details > summary {
    list-style: none;
    cursor: pointer;
    padding: clamp(16px, 2vh, 22px);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 14px;
  }
  .pw .info-block.is-collapsible > details > summary::-webkit-details-marker { display: none; }
  .pw .info-block.is-collapsible > details > summary::marker { display: none; }
  .pw .info-block.is-collapsible > details > summary > .info-head { display: block; }
  .pw .info-block.is-collapsible > details > summary > .info-head > .info-q {
    display: block;
    font-family: var(--f-head);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
    color: var(--ink);
  }
  .pw .info-block.is-collapsible > details > summary > .info-head > .info-lead {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .pw .info-block.is-collapsible > details > summary > .info-toggle {
    font-size: 26px;
    line-height: 1;
    color: var(--accent);
    font-weight: 300;
    transition: transform 150ms ease;
    user-select: none;
  }
  .pw .info-block.is-collapsible > details[open] > summary > .info-toggle { transform: rotate(45deg); }
  .pw .info-block.is-collapsible > details > .info-body {
    padding: 0 clamp(16px, 2vh, 22px) clamp(16px, 2vh, 22px);
    border-top: 1px solid var(--line);
    margin-top: 4px;
    padding-top: clamp(12px, 1.6vh, 18px);
  }
  .pw .info-block.is-collapsible > details > .info-body > p:first-child { margin-top: 0; }
  .pw .info-block.is-collapsible > details > summary:hover > .info-head > .info-q { color: var(--accent); }
  .pw .info-block.is-collapsible > details > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .pw .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.4vw, 28px);
  }
  @media (max-width: 880px) {
    .pw .info-block-grid { grid-template-columns: 1fr; }
  }
  .pw .info-block-grid h5 {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
  }

  /* Service checklist on generate page */
  .pw .service-checklist { margin: 6px 0 0; padding: 0; list-style: none; }
  .pw .service-checklist li {
    position: relative; padding: 6px 0 6px 26px;
    font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  }
  .pw .service-checklist li::before {
    content: ''; position: absolute; left: 4px; top: 10px;
    width: 14px; height: 14px; border: 1px solid var(--ink);
    border-radius: 2px; background: #fff;
  }
  .pw .service-checklist li.svc-warn { color: #B8003A; }
  .pw .service-checklist li.svc-warn::before { border-color: #C86A00; background: #FFE8EE; }
  .pw .service-checklist li.svc-ok::before { border-color: #1a7a3a; background: #effaf1; }
  .pw .service-checklist li strong { color: var(--ink); }
  .pw .service-checklist li.svc-warn strong { color: #B8003A; }

  /* ===========================================================
     Stage 6 additions — top nav, journey cards, project cards,
     "What this tool checks" 3-card grid.
     =========================================================== */

  /* ----- Top navigation bar ----- */
  .pw .topnav {
    margin: 0 0 clamp(20px, 3vh, 32px);
    padding: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .pw .topnav-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
  }
  .pw .topnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    flex: 1;
    min-width: 0;
  }
  .pw .topnav-list li { flex-shrink: 0; }
  .pw .topnav-list li { margin: 0; padding: 0; }
  .pw .topnav-link {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 12px 14px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    white-space: nowrap;
  }
  .pw .topnav-link:hover { color: var(--accent); background: #F6F9FA; }
  .pw .topnav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* v111 (audit 3.7) — .topnav-link.is-primary removed; aria-current="page"
     is the single canonical "you are here" signal. */
  /* Active-tab indicator removed per design update — keep the pseudo
     element rule slot here as a no-op so any other selectors that referenced
     it continue to compile cleanly. The active state is communicated by
     aria-current alone (text colour shift on hover/current handled separately). */
  .pw .topnav-link { position: relative; }
  .pw .topnav-link::before { content: none; }
  .pw .topnav-link[aria-current="page"]::before { content: none; background: transparent; }
  .pw .topnav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .pw .topnav-more {
    display: none;
    position: relative;
  }
  .pw .topnav-more-list {
    position: absolute;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--line);
    min-width: 220px;
    z-index: 50;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  }
  .pw .topnav-more.open .topnav-more-list { display: block; }
  .pw .topnav-more:not(.open) .topnav-more-list { display: none; }
  .pw .topnav-more .topnav-link { width: 100%; padding: 10px 16px; }
  @media (max-width: 1360px) {
    .pw .topnav-list .topnav-link.is-secondary { display: none; }
    .pw .topnav-toggle { display: inline-flex; align-items: center; }
    .pw .topnav-more { display: inline-block; }
  }
  @media (max-width: 880px) {
    .pw .topnav-link { padding: 10px 12px; font-size: 11px; }
  }

  /* ----- Homepage merged primary CTA pair (replaces split tabs + journey cards) ----- */
  .pw .welcome-cta-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 22px 0 0;
    border: 1px solid var(--ink);
  }
  .pw .welcome-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 56px 22px 24px;
    background: var(--bg);
    color: var(--ink);
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 112px;
  }
  .pw .welcome-cta + .welcome-cta { border-left: 1px solid var(--ink); }
  /* v113.4 — Non-primary hover now uses --accent-soft (light orange) instead
     of the previous #F6F9FA grey. The grey wasn't pulling enough attention on
     hover; the peach tint matches the primary's orange-fill family without
     competing with it. The .is-primary CTA still gets the full orange fill
     via its own override below. */
  .pw .welcome-cta:hover { background: var(--accent-soft); color: var(--ink); }
  .pw .welcome-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pw .welcome-cta.is-primary { background: var(--ink); color: var(--bg); }
  .pw .welcome-cta.is-primary:hover { background: #C2123F; color: #fff; }
  .pw .welcome-cta-tag {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
  }
  .pw .welcome-cta.is-primary .welcome-cta-tag { color: var(--accent-soft); }
  /* v111 (audit 3.9) — white-on-orange tag colour now scoped to is-primary hover only */
  .pw .welcome-cta.is-primary:hover .welcome-cta-tag { color: rgba(255,255,255,0.85); }
  .pw .welcome-cta-title {
    font-family: var(--f-head);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.012em;
    margin: 0;
  }
  .pw .welcome-cta-sub {
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.92;
    margin: 0;
  }
  .pw .welcome-cta-arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 22px;
    height: 22px;
    line-height: 1;
    transition: transform 150ms ease;
  }
  .pw .welcome-cta-arrow svg { width: 100%; height: 100%; display: block; }
  .pw .welcome-cta:hover .welcome-cta-arrow { transform: translateX(4px); }
  @media (max-width: 720px) {
    .pw .welcome-cta-pair { grid-template-columns: 1fr; }
    .pw .welcome-cta + .welcome-cta { border-left: none; border-top: 1px solid var(--ink); }
  }

  /* v113.1 — Tertiary CTA row (third journey: neighbour starting works without a notice).
     Single-row, low visual weight — clearly secondary to the primary pair.
     v113.3: container is a stretch wrapper only — the button carries the
     border itself and fills the wrapper edge-to-edge, abutting the pair above. */
  .pw .welcome-cta-secondary {
    margin: 0;
    border: none;
    display: block;
  }
  .pw .welcome-cta-tertiary {
    width: 100%;
    min-height: 0;
    padding: 10px 48px 10px 16px;
    background: #F6F9FA;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  /* v113.5 — tertiary hover now uses --accent-soft (light orange) to match
     the affordance pattern on the main pair, rather than the previous white-lift. */
  .pw .welcome-cta-tertiary:hover { background: var(--accent-soft); color: var(--ink); }
  .pw .welcome-cta-tertiary .welcome-cta-tag {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 9.5px;
  }
  .pw .welcome-cta-tertiary .welcome-cta-title {
    font-family: var(--f-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pw .welcome-cta-tertiary .welcome-cta-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    right: 16px;
    color: var(--muted);
  }
  .pw .welcome-cta-tertiary:hover .welcome-cta-arrow {
    transform: translateY(-50%) translateX(4px);
    color: var(--ink);
  }
  @media (max-width: 720px) {
    .pw .welcome-cta-tertiary { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 40px 12px 16px; }
    .pw .welcome-cta-tertiary .welcome-cta-title { white-space: normal; font-size: 13px; }
  }

  /* v113 — Stage-no-notice: callback form card */
  .pw .cta-callback-form {
    margin-top: 22px;
    padding: 22px 24px 24px;
    background: #F6F9FA;
    border: 1px solid var(--ink);
    display: grid;
    gap: 14px;
  }
  .pw .cta-callback-form .cta-cb-head {
    display: flex; flex-direction: column; gap: 4px;
  }
  .pw .cta-callback-form .cta-cb-tag {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink);
  }
  .pw .cta-callback-form .cta-cb-title {
    font-family: var(--f-head);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .pw .cta-callback-form .cta-cb-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .pw .cta-callback-form .cta-cb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 720px) { .pw .cta-callback-form .cta-cb-grid { grid-template-columns: 1fr; } }
  .pw .cta-callback-form .cta-cb-field { display: flex; flex-direction: column; gap: 4px; }
  .pw .cta-callback-form .cta-cb-field-full { grid-column: 1 / -1; }
  .pw .cta-callback-form .cta-cb-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
  }
  .pw .cta-callback-form input,
  .pw .cta-callback-form textarea {
    font: inherit;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: 0;
    color: var(--ink);
  }
  .pw .cta-callback-form textarea { min-height: 86px; resize: vertical; }
  .pw .cta-callback-form input:focus,
  .pw .cta-callback-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }
  .pw .cta-callback-form .cta-cb-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .pw .cta-callback-form .cta-cb-status {
    font-size: 13px;
    color: var(--ink-soft);
  }
  .pw .cta-callback-form .cta-cb-status.ok { color: var(--ok); font-weight: 600; }
  .pw .cta-callback-form .cta-cb-status.err { color: var(--warn); font-weight: 600; }
  .pw .cta-callback-form .cta-cb-privacy {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
  }

  /* v113 — Stage-no-notice: inline cross-link callout used on the Received page.
     v113.6 — background is now --accent-soft (light orange) so the callout
     reads as part of the same affordance family as the homepage CTAs. */
  .pw .recv-noncta-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 1px dashed var(--line-strong);
    background: var(--accent-soft);
    font-size: 14px;
    color: var(--ink-soft);
  }
  .pw .recv-noncta-link strong { color: var(--ink); }
  .pw .recv-noncta-link button {
    font: inherit;
    background: none;
    border: 1px solid var(--ink);
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--ink);
  }
  .pw .recv-noncta-link button:hover { background: var(--ink); color: var(--bg); }

  /* v113 — Stage-no-notice: option-stack (Informal · Written · Final-warning) */
  .pw .nn-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 14px;
  }
  .pw .nn-option {
    border: 1px solid var(--line-strong);
    padding: 18px 20px;
    background: var(--bg);
  }
  .pw .nn-option-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .pw .nn-option-tag {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink);
  }
  .pw .nn-option-title {
    font-family: var(--f-head);
    font-size: 20px;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
  }
  .pw .nn-option-sub { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
  .pw .nn-template-block {
    background: #F6F9FA;
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    margin-top: 10px;
    font-family: var(--f-mono);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
  }

  /* v113 — Stage-no-notice: cannot-do list (Section 03) */
  .pw .nn-cannot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
  }
  @media (max-width: 880px) { .pw .nn-cannot-grid { grid-template-columns: 1fr; } }
  .pw .nn-cannot-cell {
    border: 1px solid var(--line);
    padding: 14px 16px;
    background: var(--warn-soft);
  }
  .pw .nn-cannot-cell h5 {
    margin: 4px 0 6px;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
  }
  .pw .nn-cannot-cell p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
  .pw .nn-cannot-tag {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warn);
  }

  /* v113 — Stage-no-notice: escalation routes (Section 04) */
  .pw .nn-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
  }
  @media (max-width: 880px) { .pw .nn-routes { grid-template-columns: 1fr; } }
  .pw .nn-route {
    border: 1px solid var(--line);
    padding: 14px 16px;
  }
  .pw .nn-route span.nn-route-tag {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink);
  }
  .pw .nn-route h5 {
    margin: 4px 0 6px;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
  }
  .pw .nn-route p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

  /* v113 — Stage-no-notice: checklist grid for Section 01 */
  .pw .nn-trigger-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 14px;
  }
  @media (max-width: 720px) { .pw .nn-trigger-grid { grid-template-columns: 1fr; } }
  .pw .nn-trigger {
    border: 1px solid var(--line);
    padding: 14px 16px;
    background: var(--bg);
  }
  .pw .nn-trigger-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
  }
  .pw .nn-trigger-num {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
  }
  .pw .nn-trigger-title {
    font-family: var(--f-head);
    font-size: 15px;
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
  }
  .pw .nn-trigger-desc { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
  .pw .nn-trigger-outcome {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent-soft);
    padding: 3px 8px;
  }

  /* ----- Welcome mini projects (compact, fits below the two CTAs) ----- */
  .pw .welcome-mini-projects {
    margin: 18px 0 0;
  }
  .pw .welcome-mini-projects > :is(h3,h4) {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 8px;
  }
  .pw .mini-projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  @media (max-width: 520px) {
    .pw .mini-projects-grid { grid-template-columns: 1fr; }
  }
  .pw .mini-project {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .mini-project:hover {
    background: #F6F9FA;
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .pw .mini-project:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pw .mini-project .mp-title {
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
  }
  .pw .mini-project .mp-copy {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-soft);
  }

  /* ----- Welcome project accordions (v57) ----- */
  .pw .welcome-project-accordions {
    margin: 18px 0 0;
  }
  .pw .welcome-project-accordions > :is(h3,h4) {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 6px;
  }
  .pw .welcome-project-accordions > .wpa-intro {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 10px;
  }
  .pw .proj-acc-list {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .pw .proj-acc-item {
    border-top: 1px solid var(--line);
    transition: background 150ms ease;
  }
  .pw .proj-acc-item:first-child { border-top: none; }
  .pw .proj-acc-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 10px 8px;
    display: grid;
    grid-template-columns: 32px 1fr 18px;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .proj-acc-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .pw .proj-acc-trigger:hover .proj-acc-title { color: var(--accent); }
  .pw .proj-acc-trigger:hover .proj-acc-icon { color: var(--accent); border-color: var(--accent); }
  .pw .proj-acc-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--ink);
    background: var(--bg);
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  }
  .pw .proj-acc-icon svg { width: 18px; height: 18px; display: block; }
  .pw .proj-acc-item.open .proj-acc-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .pw .proj-acc-title {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    transition: color 150ms ease;
  }
  .pw .proj-acc-toggle {
    font-size: 18px;
    color: var(--muted);
    text-align: right;
    line-height: 1;
    transition: transform 200ms ease, color 150ms ease;
  }
  .pw .proj-acc-item:hover { background: #F6F9FA; }
  .pw .proj-acc-item.open .proj-acc-toggle { transform: rotate(45deg); color: var(--accent); }
  .pw .proj-acc-body {
    display: none;
    padding: 2px 10px 12px 52px;
  }
  .pw .proj-acc-item.open .proj-acc-body { display: block; }
  .pw .proj-acc-body .pab-lead {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 8px;
  }
  .pw .proj-acc-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .pw .proj-acc-body li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px dashed var(--line);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink);
  }
  .pw .proj-acc-body li:first-child { border-top: none; padding-top: 0; }
  .pw .proj-acc-body .pab-sec {
    font-family: var(--f-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--accent-soft);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .pw .proj-acc-body .pab-cta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .pw .proj-acc-body .pab-cta:hover { color: var(--accent); }
  .pw .proj-acc-body .pab-cta .arrow { transition: transform 150ms ease; }
  .pw .proj-acc-body .pab-cta:hover .arrow { transform: translateX(3px); }
  @media (max-width: 520px) {
    .pw .proj-acc-body { padding-left: 14px; }
  }

  /* ----- Common projects horizontal bar (v70, spacing tightened v71) ----- */
  .pw .proj-bar-section {
    margin: clamp(12px, 1.6vh, 18px) 0 0;
    padding: 0;
  }
  .pw .proj-bar-header {
    /* (v77) Stripped of all horizontal borders and the grey background. The heading now reads
       as a coloured eyebrow, not a banded strip. */
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    padding: 0 0 10px;
    border-top: none;
    border-bottom: none;
    background: transparent;
  }
  .pw .proj-bar-header > :is(h2,h3) {
    /* (v77) Heading colour switched to the brand accent (orange). Typography otherwise unchanged
       so it still reads as a section eyebrow. */
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: none;
    white-space: normal;
    line-height: 1.25;
  }
  .pw .proj-bar-header .pbh-intro {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
  }
  .pw .proj-bar {
    /* (v77) Bottom border removed — only the vertical separators between tiles remain. */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  @media (max-width: 1100px) {
    .pw .proj-bar { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px) {
    .pw .proj-bar { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 380px) {
    .pw .proj-bar { grid-template-columns: 1fr; }
  }
  .pw .proj-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 12px 16px;
    background: var(--bg);
    border: none;
    border-right: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    text-align: center;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 110px;
  }
  .pw .proj-tile:last-child { border-right: none; }
  .pw .proj-tile:hover { background: #F6F9FA; color: var(--accent); }
  .pw .proj-tile:hover .proj-tile-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .pw .proj-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .pw .proj-tile-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    background: var(--bg);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    flex-shrink: 0;
  }
  .pw .proj-tile-icon svg { width: 22px; height: 22px; display: block; }
  .pw .proj-tile-title {
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
  }
  /* responsive borders so internal grid lines look consistent at each breakpoint */
  /* (v77) Inter-row `border-top` rules removed at narrower breakpoints so the bar stays
     free of horizontal lines at every viewport. Vertical separators between tiles remain. */
  @media (max-width: 1100px) {
    .pw .proj-tile { border-right: 1px solid var(--line); border-top: none; }
    .pw .proj-tile:nth-child(3n) { border-right: none; }
  }
  @media (max-width: 640px) {
    .pw .proj-tile { border-right: 1px solid var(--line); border-top: none; }
    .pw .proj-tile:nth-child(3n) { border-right: 1px solid var(--line); }
    .pw .proj-tile:nth-child(2n) { border-right: none; }
  }
  @media (max-width: 380px) {
    .pw .proj-tile { border-right: none; border-top: none; }
  }

  /* ----- (v81) Common works — vertical accordion list inside .welcome-side -----
     The compact 6-tile horizontal bar has been retired in favour of a vertical
     list inside the right-hand side panel. Each row is a button; click expands
     an inline accordion below it that shows typical notifiable works for that
     project type alongside the Section of the Party Wall etc. Act 1996 each
     work falls under, and a clear CTA into the wizard. */
  .pw .welcome-side-intro {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0 0 10px;
    line-height: 1.5;
  }
  .pw .proj-vlist {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: relative; /* (v82) anchor for the absolute accordion panels */
  }
  .pw .proj-vitem {
    border-bottom: 1px solid var(--line);
    background: transparent;
    position: relative; /* (v82) anchor for this row's panel */
  }
  .pw .proj-vbtn {
    width: 100%;
    display: grid;
    grid-template-columns: 30px 1fr 22px;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .proj-vbtn:hover {
    /* v113.5 — keep title text black on the light-orange hover so it stays
       readable; the icon and chevron still carry the accent colour and
       signal the interactive state on their own. */
    color: var(--ink);
    background: rgba(255, 134, 0, 0.05);
  }
  .pw .proj-vbtn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .pw .proj-vicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
  }
  .pw .proj-vicon svg { width: 22px; height: 22px; display: block; }
  .pw .proj-vtitle {
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
  }
  .pw .proj-vchev {
    font-family: var(--f-head);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
    text-align: center;
    transition: transform 220ms ease;
  }
  .pw .proj-vbtn[aria-expanded="true"] {
    /* v113.5 — open-state stays light-orange but title text stays ink black.
       The chevron rotates and the icon keeps its accent, which is enough to
       carry the "open" signal without sacrificing title readability. */
    color: var(--ink);
    background: var(--accent-soft);
  }
  .pw .proj-vbtn[aria-expanded="true"] .proj-vchev {
    transform: rotate(45deg);
  }
  /* (v82) Panel is an absolute overlay anchored to its row, so opening it
     covers the image (and any rows below) instead of pushing them down. */
  .pw .proj-vpanel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--accent-soft);
    padding: 12px 16px 16px 48px;
    border: 1px solid var(--accent);
    border-top: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    max-height: 360px;
    overflow-y: auto;
  }
  .pw .proj-vpanel[hidden] { display: none; }
  .pw .proj-vintro {
    font-size: 12px;
    color: var(--ink);
    margin: 8px 0 8px;
    line-height: 1.45;
  }
  .pw .proj-vworks {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
  }
  .pw .proj-vworks li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px;
    line-height: 1.45;
  }
  .pw .proj-vworks li:first-child { border-top: none; }
  .pw .pvw-text {
    color: var(--ink);
  }
  .pw .pvw-section {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--accent);
    padding: 3px 7px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .pw .proj-vstart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ink);
    color: #fff;
    border: none;
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    margin-top: 4px;
    transition: background 150ms ease, color 150ms ease;
  }
  .pw .proj-vstart:hover {
    background: var(--accent);
    color: #fff;
  }
  .pw .proj-vstart:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  @media (max-width: 520px) {
    .pw .proj-vpanel { padding-left: 16px; }
    .pw .proj-vworks li { grid-template-columns: 1fr; gap: 4px; }
    .pw .pvw-section { justify-self: start; }
  }

  /* ----- (v107) "How it works" — 4 equal boxes, full width; grey row, no header, no bottom border ----- */
  .pw .how-bar-section {
    margin: clamp(16px, 2.4vh, 24px) 0 0;
    padding: 0;
    background: #F6F9FA;
    border: none;
    border-bottom: none;
  }
  .pw .how-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: none;
  }
  .pw .how-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 24px;
    background: transparent;
    color: var(--ink);
    border: none;
    min-height: 150px;
    transition: background 150ms ease, color 150ms ease;
  }
  .pw .how-cell:last-child { border: none; }
  .pw .how-cell:hover { background: #F6F9FA; }
  .pw .how-tag {
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
  }
  .pw .how-title {
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.012em;
    margin: 0;
    color: var(--ink);
  }
  .pw .how-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
  }
  @media (max-width: 1100px) {
    .pw .how-bar { grid-template-columns: repeat(2, 1fr); }
    .pw .how-cell { border-right: none; }
    .pw .how-cell:nth-child(2n) { border-right: none; }
    .pw .how-cell:nth-child(1), .pw .how-cell:nth-child(2) { border-bottom: none; }
  }
  @media (max-width: 560px) {
    .pw .how-bar { grid-template-columns: 1fr; }
    .pw .how-cell { border-right: none; border-bottom: none; }
    .pw .how-cell:last-child { border-bottom: none; }
  }

  /* ----- Homepage journey cards ----- */
  .pw .journey-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.4vw, 24px);
    margin: clamp(28px, 4vh, 40px) 0 0;
  }
  @media (max-width: 880px) {
    .pw .journey-cards { grid-template-columns: 1fr; gap: 16px; }
  }
  .pw .journey-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(20px, 2.6vh, 28px);
    background: var(--bg);
    border: 1px solid var(--ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pw .journey-card:hover { background: #F6F9FA; }
  .pw .journey-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pw .journey-card.is-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .pw .journey-card.is-primary:hover { background: var(--accent); border-color: var(--accent); }
  .pw .journey-card .jc-tag {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .pw .journey-card.is-primary .jc-tag { color: var(--accent-soft); }
  .pw .journey-card .jc-title {
    font-family: var(--f-head);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
  .pw .journey-card .jc-copy {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: inherit;
    opacity: 0.92;
  }
  .pw .journey-card .jc-bullets {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
  }
  .pw .journey-card .jc-bullets li { margin: 2px 0; }
  .pw .journey-card .jc-cta {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .pw .journey-card .jc-arrow { transition: transform 150ms ease; }
  .pw .journey-card:hover .jc-arrow { transform: translateX(4px); }

  /* ----- Common projects grid ----- */
  .pw .projects-section {
    margin: clamp(28px, 4vh, 40px) 0 0;
    padding: clamp(20px, 3vh, 28px) 0 0;
    border-top: 1px solid var(--line-strong);
  }
  .pw .projects-section > :is(h2,h3) {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
  }
  .pw .projects-section .projects-intro {
    margin: 12px 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 720px;
  }
  .pw .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
  }
  @media (max-width: 880px) {
    .pw .projects-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .pw .projects-grid { grid-template-columns: 1fr; gap: 10px; }
  }
  .pw .project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
  .pw .project-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms ease;
  }
  .pw .project-card:hover {
    background: #F6F9FA;
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 -1px var(--line-strong);
  }
  .pw .project-card:hover::before { transform: scaleX(1); }
  .pw .project-card:hover .pc-icon {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .pw .project-card:hover .pc-link { color: var(--accent); }
  .pw .project-card:hover .pc-arrow { transform: translateX(4px); }
  .pw .project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pw .project-card .pc-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    background: var(--bg);
    margin-bottom: 6px;
    flex-shrink: 0;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .pw .project-card .pc-icon svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  .pw .project-card .pc-title {
    font-family: var(--f-head);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: var(--ink);
    transition: color 150ms ease;
  }
  .pw .project-card .pc-copy {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    color: var(--ink-soft);
  }
  .pw .project-card .pc-link {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 180ms ease;
  }
  .pw .project-card .pc-arrow {
    display: inline-block;
    transition: transform 220ms ease;
  }

  /* ----- "What this tool checks" 3-card grid ----- */
  .pw .checks-section {
    margin: clamp(20px, 3vh, 32px) 0 0;
    padding: clamp(20px, 3vh, 28px) 0 0;
    border-top: none;
  }
  .pw .check-card .cc-kicker {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  .pw .check-card .cc-kicker-soft {
    font-weight: 500;
    color: var(--muted, var(--ink-soft));
  }
  .pw .checks-section > :is(h2,h3) {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 6px;
    padding: 12px 16px;
    border-top: none;
    border-bottom: none;
    background: transparent;
  }
  .pw .checks-section .checks-intro {
    margin: 12px 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 720px;
  }
  .pw .checks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: none;
    border-left: none;
  }
  @media (max-width: 880px) {
    .pw .checks-grid { grid-template-columns: 1fr; }
  }
  .pw .check-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 18px;
    background: var(--bg);
    border: none;
  }
  .pw .check-card .cc-title {
    font-family: var(--f-head);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
  }
  .pw .check-card .cc-copy {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    color: var(--ink-soft);
  }
  .pw .check-card .cc-ref {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* ----- "What this tool does not check" full-width block (Stage 6) ----- */
  .pw .scope-no-block {
    margin: clamp(20px, 3vh, 32px) 0 0;
    padding: clamp(18px, 2.4vh, 24px);
    background: #FFE8EE;
    border-left: 3px solid #C86A00;
  }
  .pw .scope-no-block > :is(h2,h3) {
    font-family: var(--f-head);
    font-size: 17px;
    font-weight: 700;
    color: #B8003A;
    margin: 0 0 8px;
    line-height: 1.3;
  }
  .pw .scope-no-block > p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .pw .scope-no-block ul {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    columns: 2;
    column-gap: clamp(20px, 3vw, 36px);
  }
  @media (max-width: 720px) {
    .pw .scope-no-block ul { columns: 1; }
  }
  .pw .scope-no-block ul li { margin: 2px 0; break-inside: avoid; }
  .pw .scope-no-block .scope-no-close {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
  }

  /* =========================================================
     Stage 7 — visual / accessibility / responsive polish pass
     Overrides earlier rules where needed. This block is the
     single source of truth for tokens, focus, contrast,
     typography, button hierarchy, panel polish, mobile nav and
     reduced-motion behaviour. Keep additions here so future
     stages can find them in one place.
     ========================================================= */

  /* --- Token overrides for AA contrast --- */
  /* v111 (audit 3.1) — this :root override block was merged into the
     single consolidated :root at the top of the stylesheet. Do not re-add. */

  /* --- Base typography lift --- */
  .pw {
    font-size: 17px;          /* nudged from 16px for long-form readability */
    line-height: 1.55;
    color: var(--ink);
  }
  @media (max-width: 600px) {
    .pw { font-size: 16px; line-height: 1.55; }
  }
  .pw p, .pw li { color: inherit; }

  /* Skip link for keyboard users */

  /* Visually-hidden helper for screen-reader-only text */
  .pw .sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
  }

  /* --- Universal focus-visible ring --- */
  .pw a:focus,
  .pw button:focus,
  .pw input:focus,
  .pw textarea:focus,
  .pw select:focus,
  .pw [tabindex]:focus { outline: none; }
  .pw a:focus-visible,
  .pw button:focus-visible,
  .pw input:focus-visible,
  .pw textarea:focus-visible,
  .pw select:focus-visible,
  .pw [tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
    border-radius: 2px;
  }

  /* --- Buttons: consistent hierarchy ---
     Primary  = ink fill, white text — main actions only
     Default  = white fill, ink border — secondary
     Warning  = ink-bordered with warn accent — "continue as draft"
     btn-link = inline text link — low priority
  */
  .pw .btn {
    font-size: 16px;            /* up from 15px for tap legibility */
    font-weight: 600;
    padding: 14px 24px;
    min-height: 48px;           /* WCAG 2.5.5 minimum tap target */
    line-height: 1.2;
    border-radius: 2px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  }
  .pw .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
  .pw .btn-primary {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }
  .pw .btn-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .pw .btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
  }
  .pw .btn[disabled],
  .pw .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--ink);
    background: #F6F9FA;
    border-color: var(--line);
  }
  .pw .btn-warn {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-left: 4px solid var(--warn);
    padding-left: 22px;
  }
  .pw .btn-warn:hover {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
  }
  .pw .btn-link {
    font-size: 14px;
    line-height: 1.3;
    padding: 4px 0;
    min-height: 0;
  }
  /* Stack actions cleanly on narrow viewports so primary CTA isn't hidden. */
  @media (max-width: 560px) {
    .pw .actions { flex-wrap: wrap; gap: 8px; }
    .pw .btn + .btn { border-left: 1px solid var(--ink); }
    .pw .btn { width: 100%; }
  }

  /* --- Form fields: visible focus, clearer labels --- */
  .pw .field label {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }
  .pw .field input,
  .pw .field textarea {
    font-size: 16px;            /* prevents iOS zoom on focus */
    min-height: 48px;           /* tap-target friendly */
    color: var(--ink);
    background: #F6F9FA;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .pw .field input:focus,
  .pw .field textarea:focus {
    background: #fff;
    border-top-color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: var(--focus-ring);
  }
  .pw .field-error {
    color: var(--warn);
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
  }
  .pw .field-error::before { content: "⚠ "; }
  .pw .field-hint {
    font-size: 14px;
    color: var(--ink-soft);
  }
  /* Required indicator (visually) plus aria-required handles the rest */
  .pw .field label .req {
    color: var(--warn);
    font-weight: 700;
    margin-left: 4px;
  }

  /* --- Card / panel polish --- */
  .pw .journey-card,
  .pw .recv-option,
  .pw .project-card,
  .pw .check-card {
    border-radius: 4px;
  }
  .pw .journey-card,
  .pw .recv-option {
    min-height: 200px;
  }
  .pw .journey-card .jc-copy,
  .pw .journey-card .jc-bullets,
  .pw .project-card .pc-copy,
  .pw .check-card .cc-copy,
  .pw .recv-option-sub {
    color: var(--ink-soft);
  }
  .pw .journey-card.is-primary .jc-copy,
  .pw .journey-card.is-primary .jc-bullets { color: #F6F9FA; opacity: 1; }
  .pw .project-card .pc-link,
  .pw .check-card .cc-ref { font-size: 12px; }

  /* Static info card (non-clickable) — make sure it doesn't look like a button */
  .pw .check-card { cursor: default; }
  .pw .check-card:hover { background: var(--bg); }

  /* --- Status / warning panels (shared) --- */
  .pw .panel,
  .pw .nc-drawings-block {
    border-radius: 4px;
  }
  /* Status badges paired with a textual indicator so meaning isn't colour-only */
  .pw .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid currentColor;
    line-height: 1.2;
  }
  .pw .status-badge::before { font-size: 13px; line-height: 1; }
  .pw .status-badge.is-incomplete { color: var(--warn); background: var(--warn-soft); }
  .pw .status-badge.is-incomplete::before { content: "⚠"; }
  .pw .status-badge.is-draft { color: var(--caution); background: var(--caution-soft); }
  .pw .status-badge.is-draft::before { content: "✎"; }
  .pw .status-badge.is-checking { color: var(--caution); background: var(--caution-soft); }
  .pw .status-badge.is-checking::before { content: "?"; }
  .pw .status-badge.is-ready { color: var(--ok); background: var(--ok-soft); }
  .pw .status-badge.is-ready::before { content: "✓"; }

  /* Warning callouts paired with a clear text indicator */
  .pw .nc-drawings-block.nc-drawings-warn::before,
  .pw .nc-drawings-block.nc-drawings-caution::before,
  .pw .nc-drawings-block.nc-drawings-ok::before {
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
  }

  /* --- Top navigation polish --- */
  .pw .topnav-link {
    font-size: 13px;
    min-height: 44px;
  }
  /* v111 (audit 3.7) — .topnav-link.is-primary font-weight removed; the underline +
     ink colour applied by aria-current="page" is the only "current page" signal. */
  .pw .topnav-link[aria-current="page"] {
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
  }
  .pw .topnav-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    background: #fff;
  }

  /* Mobile nav: collapse all secondary links into the More menu */
  @media (max-width: 720px) {
    .pw .topnav-list { gap: 0; }
    .pw .topnav-list .topnav-link { padding: 12px 10px; font-size: 13px; }
    .pw .topnav-toggle { padding: 12px 14px; min-height: 44px; }
  }
  @media (max-width: 480px) {
    /* Keep only Home + the two primary journeys visible at very small widths;
       everything else lives behind More. */
    .pw .topnav-list li:nth-child(n+4) { display: none; }
  }

  /* --- Atlas: make markers keyboard-focusable; provide a text fallback list --- */
  .pw .atlas-hotspot:focus { outline: none; }
  .pw .atlas-hotspot:focus-visible circle {
    stroke: var(--focus);
    stroke-width: 4;
  }
  .pw .atlas-fallback {
    margin-top: clamp(20px, 3vh, 28px);
    padding-top: clamp(14px, 2vh, 20px);
    border-top: 1px solid var(--line);
  }
  .pw .atlas-fallback h3 {
    font-size: 11px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: #F6F9FA;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--f-body);
  }
  .pw .atlas-fallback ol {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
  }
  @media (max-width: 720px) {
    .pw .atlas-fallback ol { grid-template-columns: 1fr; }
  }
  .pw .atlas-fallback li {
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    background: #F6F9FA;
    border-radius: 2px;
  }
  .pw .atlas-fallback li strong {
    display: block;
    font-family: var(--f-head);
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .pw .atlas-fallback li .af-ref {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .pw .atlas-fallback li p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  /* --- FAQ accordion: keyboard / ARIA polish --- */
  .pw .faq-trigger {
    min-height: 56px;
    font-size: 16px;
  }
  .pw .faq-trigger:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }
  .pw .faq-trigger[aria-expanded="true"] .toggle {
    transform: rotate(45deg);
    color: var(--accent);
  }
  .pw .faq-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 70ch;
  }
  .pw .faq-trigger .q { font-size: 16px; line-height: 1.45; }

  /* --- Glossary readability --- */
  .pw .glossary-list dt { font-size: 16px; }
  .pw .glossary-list dd { font-size: 15px; line-height: 1.6; color: var(--ink); }

  /* --- Welcome / homepage controlled measure --- */
  .pw .welcome-prose,
  .pw .welcome-lede,
  .pw .recv-lede,
  .pw .projects-section .projects-intro,
  .pw .checks-section .checks-intro {
    max-width: 68ch;
  }
  .pw .welcome-prose { font-size: 16px; color: var(--ink); }
  .pw .welcome-lede { font-size: 18px; color: var(--ink); }
  .pw .check-card .cc-copy,
  .pw .project-card .pc-copy { font-size: 15px; }
  .pw .journey-card .jc-copy { font-size: 15px; }
  .pw .journey-card .jc-bullets { font-size: 14px; }

  /* --- Received-notice journey small polish --- */
  .pw .recv-option-sub { font-size: 15px; line-height: 1.55; }
  .pw .recv-option-detail { font-size: 15px; line-height: 1.65; }

  /* --- Wizard radio-card touch / focus polish --- */
  .pw .s6d-option { min-height: 56px; }
  .pw .s6d-option .s6d-opt-help { font-size: 14px; }
  .pw .s6d-confirm { font-size: 15px; }
  .pw .s6d-option:focus-within {
    box-shadow: var(--focus-ring);
  }

  /* --- Visible focus on every clickable card --- */
  .pw .journey-card:focus-visible,
  .pw .project-card:focus-visible,
  .pw .recv-option:focus-visible,
  .pw .resource-link:focus-visible,
  .pw .received-callout:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
  }

  /* v111 (audit 3.5) — duplicate prefers-reduced-motion block removed.
     The consolidated declaration lives near the top of the stylesheet. */

  /* --- Print: keep notice previews readable --- */
  @media print {
    .pw .topnav, .pw .progress, .pw .actions, .pw .btn, .pw .btn-link { display: none !important; }
    .pw { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
    .pw .preview-page { box-shadow: none; border: 1px solid #000; }
  }

  /* --- Hide inactive SPA stages from screen readers --- */
  .pw .stage:not(.active) {
    visibility: hidden;
  }
  .pw .stage.active { visibility: visible; }

  /* --- Mobile: prevent horizontal scrolling under any circumstances --- */
  .pw, .pw { overflow-x: hidden; max-width: 100%; }
  .pw img, .pw svg { max-width: 100%; height: auto; }

  /* --- Mobile breakpoint tightening --- */
  @media (max-width: 600px) {
    .pw .frame { padding: 14px 16px; }
    .pw .welcome-headline { font-size: clamp(32px, 9vw, 44px); }
    .pw .welcome-lede { font-size: 17px; }
    .pw .recv-section-title { font-size: clamp(22px, 6vw, 28px); }
    .pw :is(h1,h2).headline { font-size: clamp(30px, 8vw, 44px); }
    /* Make sure cards don't crowd the viewport edges */
    .pw .journey-card { padding: 18px 16px; }
    .pw .recv-option { padding: 18px 16px; }
    .pw .check-card { padding: 16px; }
    /* Topnav fits the row, primary CTA stays visible */
  }

  /* ----- Section-level collapsible (Read full detail) ----- */
  .pw .recv-collapse-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    margin-top: 14px;
    background: #F6F9FA;
    border: 1px solid var(--line);
    border-radius: 6px;            /* v111 (audit 3.3) — was 12px; brought into 2/4/6/pill scale */
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
    transition: border-color 160ms ease, background 160ms ease;
  }
  .pw .recv-collapse-trigger:hover { border-color: var(--accent); }
  .pw .recv-collapse-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .pw .recv-collapse-label { flex: 1; }
  .pw .recv-collapse-hint {
    font-weight: 500;
    color: var(--muted);
    font-size: 13px;
    margin-left: 8px;
  }
  .pw .recv-collapse-toggle {
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: transform 180ms ease, color 180ms ease, background 180ms ease;
    flex: 0 0 auto;
  }
  .pw .recv-collapse-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .pw .recv-collapse-trigger[aria-expanded="true"] .recv-collapse-toggle {
    transform: rotate(45deg);
    color: var(--accent);
    background: #fff;
    border-color: var(--accent);
  }
  .pw .recv-collapse-body { display: none; padding-top: 14px; }
  .pw .recv-collapse-trigger[aria-expanded="true"] + .recv-collapse-body { display: block; }

  /* Plain-English / legal subtitle on numbered section titles */
  .pw .recv-section-legal {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  /* ----- Jargon tooltip (term) ----- */
  .pw .term {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    border-radius: 2px;
  }
  .pw .term:hover { color: var(--accent); }
  .pw .term:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--accent);
  }
  .pw #term-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 320px;
    padding: 12px 14px;
    background: var(--ink);
    color: #fff;
    border-radius: 6px;            /* v111 (audit 3.3) — was 8px; brought into 2/4/6/pill scale */
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease;
    visibility: hidden;
  }
  .pw #term-tooltip.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  .pw #term-tooltip .tt-term {
    display: block;
    font-weight: 700;
    color: #ffd8c4;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
  }
  .pw #term-tooltip .tt-def { display: block; }
  .pw #term-tooltip::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: var(--ink);
    transform: rotate(45deg);
    border-radius: 2px;
  }
  .pw #term-tooltip.is-below::after { top: auto; bottom: -6px; }
  @media (max-width: 560px) {
    .pw #term-tooltip { max-width: calc(100vw - 32px); }
  }


  /* ===== Hero — bento 2-tile layout ===== */
  .pw #stage-welcome .welcome-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  @media (max-width: 880px) {
    .pw #stage-welcome .welcome-grid { grid-template-columns: 1fr; }
  }

  /* Headline + lede + prose + CTA pair all live in the left tile */
  .pw #stage-welcome .welcome-grid > :first-child {
    border: 1px solid var(--line);
    background: #fff;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
  }
  .pw #stage-welcome .welcome-headline {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 68px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
  }
  .pw #stage-welcome .welcome-lede {
    font-family: var(--f-head);
    font-size: 18px;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
  }
  .pw #stage-welcome .welcome-prose {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    max-width: 580px;
  }

  /* ===== CTA pair — two bento-style cells ===== */
  .pw #stage-welcome .welcome-cta-pair {
    margin-top: auto !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border: none !important;
    border-radius: 0;
  }
  .pw #stage-welcome .welcome-cta {
    border: 1px solid var(--ink) !important;
    padding: 24px !important;
    min-height: 150px !important;
    background: #fff;
    color: var(--ink);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pw #stage-welcome .welcome-cta.is-primary {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink) !important;
  }
  .pw #stage-welcome .welcome-cta + .welcome-cta { border-left: 1px solid var(--ink) !important; }
  .pw #stage-welcome .welcome-cta-tag {
    color: var(--muted) !important;
    font-size: 10px !important;
  }
  .pw #stage-welcome .welcome-cta.is-primary .welcome-cta-tag { color: rgba(255,255,255,0.55) !important; }
  .pw #stage-welcome .welcome-cta-title {
    font-family: var(--f-head)!important;
    font-weight: 700 !important;
    font-size: 28px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    margin-top: 4px !important;
  }
  .pw #stage-welcome .welcome-cta-sub {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
  }
  .pw #stage-welcome .welcome-cta.is-primary .welcome-cta-sub { color: rgba(255,255,255,0.7) !important; }
  /* Simple line-style arrow, inline at bottom-right of the card (no circle).
     Sits in normal flow so it can never overlap title text at any viewport. */
  .pw #stage-welcome .welcome-cta-arrow {
    position: static !important;
    align-self: flex-end !important;
    margin-top: auto !important;
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: currentColor !important;
    display: block !important;
    transition: transform 200ms ease;
  }
  .pw #stage-welcome .welcome-cta-arrow svg { width: 100% !important; height: 100% !important; display: block; }
  .pw #stage-welcome .welcome-cta:hover .welcome-cta-arrow { transform: translateX(4px); }
  /* v113.4 — Non-primary hover now uses --accent-soft (light orange) for a
     stronger affordance. The .is-primary CTA keeps the full orange fill
     below; the .welcome-cta-tertiary keeps its own white-lift hover. */
  .pw #stage-welcome .welcome-cta:hover {
    background: var(--accent-soft) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
  }

  /* v113.1 — Tertiary CTA overrides inside #stage-welcome (must out-specify
     the !important rules above so the tile renders flat / single-row / muted).
     v113.3 — width: 100% so the button fills its wrapper edge-to-edge,
     matching the width of the primary CTA pair above it. */
  .pw #stage-welcome .welcome-cta-secondary {
    margin: 0 !important;
    border: none !important;
    display: block !important;
  }
  .pw #stage-welcome .welcome-cta-tertiary {
    width: 100% !important;
    border: 1px solid var(--line) !important;
    padding: 10px 48px 10px 16px !important;
    min-height: 0 !important;
    background: #F6F9FA !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }
  /* v113.5 — tertiary hover lifts to --accent-soft (light orange) instead of white,
     so the hover affordance reads as part of the same family as the main pair. */
  .pw #stage-welcome .welcome-cta-tertiary:hover {
    background: var(--accent-soft) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
  }
  .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-tag {
    color: var(--muted) !important;
    font-size: 9.5px !important;
    flex: 0 0 auto;
  }
  .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-title {
    font-family: var(--f-body)!important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    margin-top: 0 !important;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-arrow {
    position: absolute !important;
    align-self: auto !important;
    margin-top: 0 !important;
    top: 50% !important;
    right: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--muted) !important;
    transform: translateY(-50%);
  }
  .pw #stage-welcome .welcome-cta-tertiary:hover .welcome-cta-arrow {
    transform: translateY(-50%) translateX(4px);
    color: var(--ink) !important;
  }
  @media (max-width: 720px) {
    .pw #stage-welcome .welcome-cta-tertiary {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 4px !important;
      padding: 12px 40px 12px 16px !important;
      min-height: 0 !important;
    }
    .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-title {
      white-space: normal;
      font-size: 13px !important;
    }
  }
  .pw #stage-welcome .welcome-cta.is-primary:hover {
    background: #C2123F !important;
    color: #fff !important;
    border-color: #C2123F !important;
  }
  .pw #stage-welcome .welcome-cta.is-primary:hover .welcome-cta-tag,
  .pw #stage-welcome .welcome-cta.is-primary:hover .welcome-cta-sub { color: rgba(255,255,255,0.85) !important; }

  /* ===== Right tile — common works vertical accordion (v81) ===== */
  .pw #stage-welcome .welcome-side {
    border: 1px solid var(--line);
    background: #fff;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative; /* (v82) host for the absolute accordion overlay */
    overflow: hidden; /* keep the overlay inside the welcome-side card */
  }
  /* (v82) Reinstated terrace illustration — always fits within the box.
     Sits at the bottom of the welcome-side, capped to a height that leaves
     comfortable room for the project list above it. */
  .pw #stage-welcome .welcome-side-img {
    margin: 12px 0 0 !important;
    padding: 12px !important;
    background: #fff;
    border: 1px solid var(--line);
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .pw #stage-welcome .welcome-side-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
  }
  /* (v82) Common works heading — match the welcome-grid eyebrow exactly. */
  .pw #stage-welcome .welcome-side > :is(h2,h3).mono {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    font-family: var(--f-body)!important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--accent) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }
  .pw #stage-welcome .welcome-numbered {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .pw #stage-welcome .welcome-numbered li {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    align-items: baseline;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .pw #stage-welcome .welcome-numbered li:last-child { border-bottom: none !important; }
  .pw #stage-welcome .welcome-numbered .num {
    font-family: var(--f-head)!important;
    font-weight: 700 !important;
    font-size: 24px !important;
    color: var(--accent) !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
  }
  .pw #stage-welcome .welcome-side-img {
    margin: 6px 0 0 !important;
    padding: 16px !important;
    background: #fff;
    border: 1px solid var(--line);
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .pw #stage-welcome .welcome-side-img img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* ===== (v84) Short-viewport tightening — keep welcome stage on one screen =====
     Tier 1 catches 1080p laptop viewports (≈880–940px) where the hero card was
     starting to clip. Tier 2 catches 900p / 768p laptops where more aggressive
     trimming is needed (smaller headline, slimmer CTAs, hidden terrace image).
     Wide viewports retain the original design unchanged. */
  @media (max-height: 900px) {
    .pw #stage-welcome .welcome-grid > :first-child {
      padding: 28px !important;
      gap: 14px !important;
    }
    .pw #stage-welcome .welcome-headline {
      font-size: clamp(40px, 5.5vw, 64px) !important;
    }
    .pw #stage-welcome .welcome-lede { font-size: 16px !important; }
    .pw #stage-welcome .welcome-prose { font-size: 12.5px !important; line-height: 1.5 !important; }
    .pw #stage-welcome .welcome-cta { padding: 20px !important; min-height: 130px !important; gap: 10px !important; }
    .pw #stage-welcome .welcome-cta-title { font-size: 24px !important; }
    .pw #stage-welcome .welcome-cta-sub { font-size: 11.5px !important; line-height: 1.4 !important; }
    .pw #stage-welcome .welcome-cta-arrow {
      width: 26px !important; height: 26px !important;
    }
    /* v113.1 — tertiary stays slim at short viewports too. */
    .pw #stage-welcome .welcome-cta-tertiary { padding: 10px 48px 10px 16px !important; min-height: 0 !important; gap: 14px !important; }
    .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-title { font-size: 13.5px !important; }
    .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-arrow { width: 16px !important; height: 16px !important; }
    .pw #stage-welcome .welcome-side { padding: 14px 14px !important; gap: 6px !important; }
    .pw #stage-welcome .welcome-side-img { margin-top: 8px !important; padding: 10px !important; }
  }
  @media (max-height: 760px) {
    .pw #stage-welcome .welcome-grid > :first-child {
      padding: 20px !important;
      gap: 10px !important;
    }
    .pw #stage-welcome .welcome-headline {
      font-size: clamp(34px, 4.6vw, 52px) !important;
      line-height: 0.98 !important;
    }
    .pw #stage-welcome .welcome-lede { font-size: 15px !important; line-height: 1.25 !important; }
    .pw #stage-welcome .welcome-prose { font-size: 12px !important; line-height: 1.45 !important; }
    .pw #stage-welcome .welcome-cta { padding: 16px !important; min-height: 104px !important; gap: 6px !important; }
    .pw #stage-welcome .welcome-cta-title { font-size: 20px !important; }
    .pw #stage-welcome .welcome-cta-sub { font-size: 11px !important; line-height: 1.35 !important; }
    /* v113.1 — tertiary stays slim even on the smallest target viewport. */
    .pw #stage-welcome .welcome-cta-tertiary { padding: 10px 44px 10px 14px !important; min-height: 0 !important; gap: 12px !important; }
    .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-title { font-size: 12.5px !important; }
    .pw #stage-welcome .welcome-cta-tertiary .welcome-cta-arrow { width: 14px !important; height: 14px !important; }
    .pw #stage-welcome .welcome-cta-arrow {
      width: 22px !important; height: 22px !important;
    }
    .pw #stage-welcome .welcome-side { padding: 12px !important; }
    .pw #stage-welcome .welcome-side > :is(h2,h3).mono { margin: 0 0 6px !important; }
    .pw #stage-welcome .welcome-side-img { display: none !important; }
    .pw #stage-welcome .proj-vbtn { padding: 8px 6px !important; }
    .pw #stage-welcome .proj-vtitle { font-size: 12.5px !important; }
  }

  /* ===== Project bar — square-feeling bento tiles ===== */
  .pw #stage-welcome .proj-bar-section { margin-top: 32px !important; }
  .pw #stage-welcome .proj-bar-header { padding: 0 0 14px !important; }
  .pw #stage-welcome .proj-bar-header > :is(h2,h3) {
    color: var(--accent) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  .pw #stage-welcome .proj-bar {
    border: none !important;
    background: transparent !important;
    gap: 10px !important;
    grid-template-columns: repeat(6, 1fr) !important;
  }
  @media (max-width: 1100px) { .pw #stage-welcome .proj-bar { grid-template-columns: repeat(3, 1fr) !important; } }
  @media (max-width: 640px)  { .pw #stage-welcome .proj-bar { grid-template-columns: repeat(2, 1fr) !important; } }
  .pw #stage-welcome .proj-tile {
    border: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    background: #fff !important;
    padding: 18px !important;
    aspect-ratio: 1 / 1.05;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }
  .pw #stage-welcome .proj-tile:hover { border-color: var(--accent) !important; }
  .pw #stage-welcome .proj-tile-icon {
    width: auto !important;
    height: auto !important;
    color: var(--accent) !important;
    background: transparent !important;
    margin: 0 !important;
  }
  .pw #stage-welcome .proj-tile-icon svg { width: 32px !important; height: 32px !important; }
  .pw #stage-welcome .proj-tile-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: var(--ink) !important;
  }

  /* ===== Checks — three numbered rule rows (no cards) ===== */
  .pw #stage-welcome .checks-section { margin-top: 24px !important; } /* (v82) tightened */
  .pw #stage-welcome .checks-section > :is(h2,h3).mono {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: var(--accent) !important;
    letter-spacing: 0.14em !important;
  }
  .pw #stage-welcome .checks-section > :is(h2,h3).mono::after {
    content: '';
    display: block;
    height: 0;
  }
  .pw #stage-welcome .checks-intro {
    font-size: 14px !important;
    color: var(--ink-soft) !important;
    max-width: 720px;
    margin: 8px 0 22px !important;
  }
  .pw #stage-welcome .checks-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    border-top: none !important;
    border-left: none !important;
  }
  /* v101 — checks-grid: bolder headings, no tooltips, polished cards */
  .pw #stage-welcome .checks-grid {
    gap: 16px !important;
  }
  .pw #stage-welcome .check-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 28px 24px 26px !important;
    background: var(--bg) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    align-items: stretch !important;
    position: relative;
    transition: border-color 180ms ease;
  }
  .pw #stage-welcome .check-card:hover,
  .pw #stage-welcome .check-card:active,
  .pw #stage-welcome .check-card:focus-within {
    background: var(--bg) !important;
    border-color: var(--line-strong) !important;
  }
  .pw #stage-welcome .check-card::before {
    content: '' !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
    border-radius: 0;
    transition: height 180ms ease, background-color 180ms ease;
  }
  .pw #stage-welcome .check-card:hover::before,
  .pw #stage-welcome .check-card:focus-within::before {
    height: 7px;
    background: var(--ink);
  }
  .pw #stage-welcome .cc-eyebrow {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 4px 0 0;
    line-height: 1;
    transition: letter-spacing 180ms ease, color 180ms ease;
  }
  .pw #stage-welcome .check-card:hover .cc-eyebrow,
  .pw #stage-welcome .check-card:focus-within .cc-eyebrow {
    letter-spacing: 0.22em;
    color: var(--ink);
  }
  .pw #stage-welcome .cc-kicker {
    font-family: var(--f-head)!important;
    font-size: clamp(22px, 2.4vw, 28px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
    margin: 0 0 6px !important;
  }
  .pw #stage-welcome .cc-image {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: contain;
    object-position: center;
    margin: 6px 0 8px;
    user-select: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .pw #stage-welcome .cc-title {
    font-family: var(--f-head)!important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
    color: var(--ink) !important;
    line-height: 1.3 !important;
  }
  .pw #stage-welcome .cc-copy {
    font-size: 13px !important;
    color: var(--muted) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
  @media (max-width: 880px) {
    .pw #stage-welcome .checks-grid {
      grid-template-columns: 1fr !important;
      border-left: none !important;
      gap: 14px !important;
    }
    .pw #stage-welcome .cc-image { height: 180px; }
    .pw #stage-welcome .cc-kicker {
      font-size: 24px !important;
    }
  }

  /* ===== Scope-no block — header + bullet grid on accent-soft ===== */
  .pw #stage-welcome .scope-no-block {
    background: var(--accent-soft) !important;
    border-left: none !important;
    padding: 28px !important;
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    gap: 32px !important;
    margin-top: 32px !important;
  }
  @media (max-width: 880px) {
    .pw #stage-welcome .scope-no-block { grid-template-columns: 1fr !important; }
    .pw #stage-welcome .scope-no-block > ul { grid-column: 1 !important; grid-row: auto !important; grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 520px) {
    .pw #stage-welcome .scope-no-block > ul { grid-template-columns: 1fr !important; }
  }
  .pw #stage-welcome .scope-no-block > :is(h2,h3) {
    font-family: var(--f-head)!important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    margin: 0 !important;
    grid-column: 1;
    align-self: start;
  }
  .pw #stage-welcome .scope-no-block > :is(h2,h3)::before {
    content: 'Out of scope';
    display: block;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .pw #stage-welcome .scope-no-block > p {
    grid-column: 1;
    font-size: 12px !important;
    color: var(--ink-soft) !important;
    margin: 0 !important;
    align-self: start;
  }
  .pw #stage-welcome .scope-no-block > ul {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 24px !important;
    align-self: center;
  }
  .pw #stage-welcome .scope-no-block > ul li {
    font-size: 12px !important;
    color: var(--ink-soft) !important;
    padding-left: 14px !important;
    position: relative;
    margin: 0 !important;
  }
  .pw #stage-welcome .scope-no-block > ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    left: 0;
    top: 7px;
  }
  .pw #stage-welcome .scope-no-close {
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
    color: var(--muted) !important;
    font-style: italic !important;
    margin: 4px 0 0 !important;
  }

  /* ===== Trust block — keep as 2-col but tighten card chrome ===== */
  .pw #stage-welcome .welcome-trust {
    background: #F6F9FA !important;
    border: 1px solid var(--line) !important;
    padding: 28px !important;
    gap: 40px !important;
    margin-top: 24px !important;
  }
  .pw #stage-welcome .welcome-trust-cell .ref-tag { color: var(--accent) !important; }

  /* ===== Resources — single joined 4-cell strip ===== */
  .pw #stage-welcome .welcome-resources { margin-top: 32px !important; }
  .pw #stage-welcome .resources-list {
    gap: 0 !important;
    border: 1px solid var(--line);
    grid-template-columns: repeat(4, 1fr) !important;
  }
  @media (max-width: 980px) { .pw #stage-welcome .resources-list { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 520px) { .pw #stage-welcome .resources-list { grid-template-columns: 1fr !important; } }
  .pw #stage-welcome .resources-list li:not(:last-child) { border-right: 1px solid var(--line); }
  .pw #stage-welcome .resources-list .resource-link {
    background: #fff !important;
    border: none !important;
    padding: 22px !important;
    border-radius: 0 !important;
    height: 100%;
  }
  .pw #stage-welcome .resources-list .resource-link:hover { background: var(--accent-soft) !important; }
  .pw #stage-welcome .resources-list .resource-link .ref-tag { color: var(--accent) !important; }

  /* ===== Info-block accordions — borderless rows with left bar accent ===== */
  .pw #stage-welcome .info-block.is-collapsible {
    margin-top: 8px !important;
    padding: 0 !important;
    background: #F6F9FA !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    transition: background 180ms ease, border-color 180ms ease;
  }
  /* First accordion gets a little more breathing room from the section above. */
  .pw #stage-welcome .welcome-resources + .info-block.is-collapsible { margin-top: 32px !important; }
  .pw #stage-welcome .info-block.is-collapsible > details > summary {
    padding: 18px 22px !important;
    gap: 18px !important;
  }
  .pw #stage-welcome .info-block.is-collapsible > details > summary > .info-head > .info-q {
    font-size: 15px !important;
    font-family: var(--f-body)!important;
    font-weight: 600 !important;
    color: var(--ink) !important;
  }
  .pw #stage-welcome .info-block.is-collapsible > details > summary > .info-head > .info-lead {
    color: var(--muted) !important;
    margin-top: 6px !important;
  }
  .pw #stage-welcome .info-block.is-collapsible > details > summary > .info-toggle {
    color: var(--ink-soft) !important;
    font-size: 22px !important;
  }
  .pw #stage-welcome .info-block.is-collapsible:has(details[open]) {
    background: var(--accent-soft) !important;
    border-left-color: var(--accent) !important;
  }
  .pw #stage-welcome .info-block.is-collapsible > details[open] > summary > .info-toggle {
    color: var(--accent) !important;
  }
  .pw #stage-welcome .info-block.is-collapsible > details > .info-body {
    border-top-color: rgba(0,0,0,0.05) !important;
    padding: 14px 22px 22px !important;
  }


  /* =========================================================================
     V108 - Notice type explainer pages.
     Three new stages: stage-notice-n1 (Section 1, Line of Junction),
     stage-notice-n2 (Section 3, Party Structure), stage-notice-n6 (Section 6,
     Adjacent Excavation). Plus styling to make the homepage check-cards
     clickable.
     ========================================================================= */

  /* ----- Make the homepage "What this tool checks" cards clickable ----- */
  .pw #stage-welcome .check-card {
    cursor: pointer !important;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
  }
  .pw #stage-welcome .check-card .cc-cta {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
  }
  .pw #stage-welcome .check-card .cc-cta-arrow {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--accent);
    position: relative;
    transition: width 180ms ease;
  }
  .pw #stage-welcome .check-card .cc-cta-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    transform: rotate(45deg);
  }
  .pw #stage-welcome .check-card:hover .cc-cta-arrow,
  .pw #stage-welcome .check-card:focus-visible .cc-cta-arrow {
    width: 28px;
  }
  .pw #stage-welcome .check-card:hover .cc-cta,
  .pw #stage-welcome .check-card:focus-visible .cc-cta {
    color: var(--ink);
  }
  .pw #stage-welcome .check-card:hover .cc-cta-arrow,
  .pw #stage-welcome .check-card:focus-visible .cc-cta-arrow {
    background: var(--ink);
  }
  .pw #stage-welcome .check-card:hover .cc-cta-arrow::after,
  .pw #stage-welcome .check-card:focus-visible .cc-cta-arrow::after {
    border-top-color: var(--ink);
    border-right-color: var(--ink);
  }

  /* ----- Notice page layout shell ----- */
  .pw .notice-page {
    padding: 0;
  }
  .pw .notice-page .notice-back {
    margin: 0 0 18px;
  }
  .pw .notice-hero {
    border: 1px solid var(--line);
    background: #fff;
    padding: clamp(28px, 4vw, 48px);
    margin: 0 0 clamp(24px, 3vh, 36px);
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
  }
  @media (max-width: 880px) {
    .pw .notice-hero { grid-template-columns: 1fr; gap: 20px; }
  }
  .pw .notice-hero-eyebrow {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px;
  }
  .pw .notice-hero :is(h1,h2) {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(36px, 4.8vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .pw .notice-hero :is(h1,h2) .accent { color: var(--accent); }
  .pw .notice-hero p.lede {
    font-family: var(--f-head);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.4;
    margin: 0 0 18px;
    color: var(--ink);
    max-width: 56ch;
  }
  .pw .notice-hero p.sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 56ch;
    margin: 0;
  }
  .pw .notice-hero-stat {
    border-left: 4px solid var(--accent);
    padding: 14px 18px;
    background: #F6F9FA;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pw .notice-hero-stat .nhs-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dotted var(--line);
  }
  .pw .notice-hero-stat .nhs-row:last-child { border-bottom: none; }
  .pw .notice-hero-stat .nhs-k {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .pw .notice-hero-stat .nhs-v {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
  }

  /* ----- Section banner inside notice pages ----- */
  .pw .notice-section {
    margin: clamp(28px, 4vh, 44px) 0 0;
  }
  .pw .notice-section > h2 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: -0.012em;
    line-height: 1.15;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .pw .notice-section > h2 .accent { color: var(--accent); }
  .pw .notice-section > p.np-intro {
    margin: 0 0 18px;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 70ch;
  }

  /* ----- "What is it / when do you need it" two-column ----- */
  .pw .np-whatwhen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 0;
  }
  @media (max-width: 720px) {
    .pw .np-whatwhen { grid-template-columns: 1fr; }
  }
  .pw .np-whatwhen .np-cell {
    background: #F6F9FA;
    border: 1px solid var(--line);
    padding: 18px 20px;
  }
  .pw .np-whatwhen .np-cell h3 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .pw .np-whatwhen .np-cell p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
  .pw .np-whatwhen .np-cell ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
  .pw .np-whatwhen .np-cell li { margin: 2px 0; }

  /* ----- Sub-section expandable cards ----- */
  .pw .np-subs {
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .pw .np-sub {
    border: 1px solid var(--line);
    background: #fff;
  }
  .pw .np-sub > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 56px 16px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pw .np-sub > summary::-webkit-details-marker { display: none; }
  .pw .np-sub > summary:focus { outline: none; }
  .pw .np-sub > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .pw .np-sub > summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-head);
    font-size: 28px;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1;
    transition: transform 180ms ease, color 180ms ease;
  }
  .pw .np-sub[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
    color: var(--accent);
  }
  .pw .np-sub .np-sub-ref {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
  }
  .pw .np-sub .np-sub-title {
    font-family: var(--f-head);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
  }
  .pw .np-sub .np-sub-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .pw .np-sub .np-sub-body p { margin: 0 0 10px; }
  .pw .np-sub .np-sub-body p:last-child { margin-bottom: 0; }
  .pw .np-sub .np-sub-body ul,
  .pw .np-sub .np-sub-body ol {
    margin: 4px 0 12px;
    padding-left: 20px;
  }
  .pw .np-sub .np-sub-body li { margin: 4px 0; }
  .pw .np-sub .np-sub-body .np-note {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff7e6;
    border-left: 3px solid #d97706;
    font-size: 14px;
    color: var(--ink);
  }
  .pw .np-sub .np-sub-body .np-tip {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    font-size: 14px;
    color: var(--ink);
  }

  /* ----- SVG diagram block ----- */
  .pw .np-diagram {
    margin: 14px 0 0;
    border: 1px solid var(--line);
    background: #F6F9FA;
    padding: clamp(16px, 2.4vw, 28px);
  }
  .pw .np-diagram figcaption {
    font-size: 13px;
    color: var(--muted);
    margin: 12px 0 0;
    line-height: 1.55;
    text-align: center;
  }
  .pw .np-diagram svg { display: block; width: 100%; height: auto; max-height: 360px; }
  .pw .np-diagram-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-soft);
    font-family: var(--f-body);
  }
  .pw .np-diagram-legend .leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .pw .np-diagram-legend .leg-swatch {
    width: 14px; height: 4px; display: inline-block;
  }

  /* ----- Yes/No interactive checker ----- */
  .pw .np-check {
    margin: 12px 0 0;
    border: 1px solid var(--ink);
    padding: clamp(20px, 3vw, 28px);
    background: #fff;
  }
  .pw .np-check-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 16px;
  }
  .pw .np-check-head h3 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    color: var(--ink);
  }
  .pw .np-check-head .np-check-reset {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: underline;
  }
  .pw .np-check-head .np-check-reset:hover { color: var(--accent); }
  .pw .np-check-step {
    display: none;
  }
  .pw .np-check-step.is-active { display: block; }
  .pw .np-check-q {
    font-family: var(--f-head);
    font-size: 17px;
    line-height: 1.35;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .pw .np-check-q .np-check-step-num {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-right: 8px;
  }
  .pw .np-check-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  @media (max-width: 600px) {
    .pw .np-check-options { grid-template-columns: 1fr; }
  }
  .pw .np-check-options button {
    padding: 14px 16px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--ink);
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    min-height: 48px;
  }
  .pw .np-check-options button:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .pw .np-check-options button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .pw .np-check-result {
    display: none;
    padding: 18px 20px;
    margin: 0;
  }
  .pw .np-check-result.is-active { display: block; }
  .pw .np-check-result.is-likely {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
  }
  .pw .np-check-result.is-maybe {
    background: #fff7e6;
    border-left: 4px solid #d97706;
  }
  .pw .np-check-result.is-unlikely {
    background: #eef9f1;
    border-left: 4px solid #1a7a3a;
  }
  .pw .np-check-result h4 {
    font-family: var(--f-head);
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .pw .np-check-result p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
  .pw .np-check-result p:last-child { margin-bottom: 0; }
  .pw .np-check-result-tag {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
  }
  .pw .np-check-result.is-maybe .np-check-result-tag { color: #d97706; }
  .pw .np-check-result.is-unlikely .np-check-result-tag { color: #1a7a3a; }
  .pw .np-check-trail {
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px dotted var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
    font-family: var(--f-body);
    color: var(--muted);
  }
  .pw .np-check-trail .nct-pill {
    background: #fff;
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 999px;
  }
  .pw .np-check-trail .nct-sep { color: var(--line); }

  /* ----- CTA pair (bottom of each notice page) ----- */
  .pw .np-cta-pair {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin: clamp(28px, 4vh, 40px) 0 0;
    border: 1px solid var(--ink);
  }
  @media (max-width: 720px) {
    .pw .np-cta-pair { grid-template-columns: 1fr; }
  }
  .pw .np-cta-pair > button {
    background: var(--bg);
    border: none;
    padding: 22px 24px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 96px;
    transition: background 150ms ease, color 150ms ease;
    position: relative;
  }
  .pw .np-cta-pair > button + button { border-left: 1px solid var(--ink); }
  @media (max-width: 720px) {
    .pw .np-cta-pair > button + button { border-left: none; border-top: 1px solid var(--ink); }
  }
  .pw .np-cta-pair > button.is-primary {
    background: var(--ink);
    color: #fff;
  }
  .pw .np-cta-pair > button.is-primary:hover,
  .pw .np-cta-pair > button:hover {
    background: var(--accent);
    color: #fff;
  }
  .pw .np-cta-pair .npc-tag {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .pw .np-cta-pair > button.is-primary .npc-tag { color: var(--accent-soft); }
  .pw .np-cta-pair > button:hover .npc-tag { color: rgba(255,255,255,0.85); }
  .pw .np-cta-pair .npc-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
  }
  .pw .np-cta-pair .npc-sub {
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.9;
  }

  /* ----- Related tools list ----- */
  .pw .np-related {
    margin: clamp(24px, 4vh, 36px) 0 0;
  }
  .pw .np-related > h3 {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
  }
  .pw .np-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  @media (max-width: 720px) {
    .pw .np-related ul { grid-template-columns: 1fr; }
  }
  .pw .np-related li button {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 150ms ease;
  }
  .pw .np-related li button:hover { border-color: var(--ink); }
  .pw .np-related li button .npr-tag {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .pw .np-related li button .npr-title {
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  /* ----- "Quick facts" inline chips at the top of each notice page ----- */
  .pw .np-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
  }
  .pw .np-chips .np-chip {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 999px;
  }
  .pw .np-chips .np-chip.is-accent {
    background: var(--accent-soft);
    color: var(--ink);
    border-color: #f6b89e;
  }

  /* =====================================================================
     v109 (audit 2.3) — Small-text accent → accent-ink swap.
     All small-cap eyebrows, ref-tags, step numbers and tiny labels were
     painted with `--accent` (#FF1654), which fails WCAG 2.2 AA on white
     and on accent-soft. This block remaps them to `--accent-ink`
     (#B8003A, 4.99:1 on white). Larger headlines that previously used
     `.accent` keep `--accent` because AA Large is satisfied at >18pt
     regular or >14pt bold.
     Cascades after the notice-pages and bento blocks so it wins without
     `!important`.
     ===================================================================== */
  .pw .welcome-numbered .num,
  .pw .s3-group-title,
  .pw .s3-item.checked .s3-item-tag,
  .pw .notice-list .ref,
  .pw .resource-link .res-icon,
  .pw .resource-link .ref-tag,
  .pw .resource-link .arrow,
  .pw .faq-trigger .num,
  .pw .tl-phase-num,
  .pw .tl-time.accent,
  .pw .tl-detail .actor,
  .pw .tl-detail .ref-tag,
  .pw .tl-branch h5,
  .pw .atlas-detail .ref-tag,
  .pw .ro-tag,
  .pw .ro-arrow,
  .pw .recv-section-num,
  .pw .recv-id-tag,
  .pw .recv-option-num,
  .pw .recv-option-toggle,
  .pw .recv-clock-day,
  .pw .recv-clock-ref,
  .pw .recv-explainer-tag,
  .pw .recv-pair-tag,
  .pw .recv-object-tag,
  .pw .recv-anchor-num,
  .pw .recv-anchor .num,
  .pw .recv-helper-output-label,
  .pw .recv-helper-legend,
  .pw .recv-action-steps li::before,
  .pw .welcome-cta-tag,
  .pw .proj-bar-header > :is(h2,h3),
  .pw .proj-vicon,
  .pw .how-tag,
  .pw .journey-card .jc-tag,
  .pw .cc-eyebrow,
  .pw .scope-no-block > :is(h2,h3)::before,
  .pw .notice-hero-eyebrow,
  .pw .np-sub-ref,
  .pw .np-check-step-num,
  .pw .np-check-result-tag,
  .pw .ref-tag.mono,
  .pw .ref-tag,
  .pw .pab-cta:hover,
  .pw #stage-welcome .welcome-cta-tag,
  .pw #stage-welcome .proj-bar-header > :is(h2,h3),
  .pw #stage-welcome .welcome-side > :is(h2,h3).mono,
  .pw #stage-welcome .checks-section > :is(h2,h3).mono,
  .pw #stage-welcome .scope-no-block > :is(h2,h3)::before,
  .pw #stage-welcome .info-block.is-collapsible > details[open] > summary > .info-toggle,
  .pw #stage-welcome .welcome-trust-cell .ref-tag,
  .pw #stage-welcome .resources-list .resource-link .ref-tag,
  .pw #stage-welcome .cc-eyebrow,
  .pw #stage-welcome .check-card .cc-cta {
    color: var(--accent-ink);
  }
  /* The pulsing dot keeps the brand accent (decorative). */
  .pw .ro-tag::before { background: var(--accent); }

  /* v110 — Multi-owner repeater card chrome. Each BO/AO card is numbered,
     has its own remove button, and the +Add buttons are now live. */
  .pw .repeater-card { position: relative; }
  .pw .repeater-card-head {
    margin-bottom: 12px;
  }
  .pw .repeater-card-title {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
  }
  .pw .repeater-remove {
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--ink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  }
  .pw .repeater-remove:hover {
    color: var(--warn);
    border-color: var(--warn);
    background: var(--warn-soft);
  }
  .pw .repeater-remove[disabled],
  .pw .repeater-remove[aria-disabled="true"] {
    opacity: 0;
    pointer-events: none;
  }
  .pw .repeater-copy-btn {
    margin-top: 10px;
    background: #fff;
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .pw .repeater-copy-btn::before { content: '⎘ '; color: var(--accent-ink); margin-right: 4px; }
  .pw .repeater-copy-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    border-style: solid;
    color: var(--ink);
  }
  .pw .repeater-copy-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* +Add another — restore the accent treatment now that multi-owner is live. */
  .pw .repeater-add {
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    color: var(--ink);
  }
  .pw .repeater-add:hover {
    background: var(--accent);
    border-style: solid;
    color: #fff;
  }
  /* Numbered step circles on s3-item: the tag colour follows accent-ink
     for AA, but the checked state's right-hand pill keeps its accent
     border (border-only, no AA failure). */
  .pw .s3-item.checked .s3-item-tag { border-color: var(--accent); }
  /* `.welcome-cta.is-primary .welcome-cta-tag` was white@55% on near-black
     (4.06:1) — bump opacity so it passes AA at 10–11 px. */
  .pw #stage-welcome .welcome-cta.is-primary .welcome-cta-tag,
  .pw .welcome-cta.is-primary .welcome-cta-tag {
    color: rgba(255, 255, 255, 0.82) !important;
  }


        .pw .mini-timeline { margin: 22px 0 6px; padding: 22px 4px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .pw .mini-timeline--full { width: 100%; margin-top: 6px; margin-bottom: 22px; }
        .pw .mt-caption { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-family: var(--f-body); font-weight: 600; }
        .pw .mt-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; position: relative; }
        .pw .mt-node { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 4px; min-width: 0; }
        .pw .mt-node::after { content: ""; position: absolute; top: 30px; left: 50%; width: 100%; height: 2px; background: var(--ink); z-index: 0; }
        .pw .mt-node:last-child::after { display: none; }
        .pw .mt-step { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
        .pw .mt-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); position: relative; z-index: 1; }
        .pw .mt-node:first-child .mt-dot, .pw .mt-node:last-child .mt-dot { background: var(--accent); border-color: var(--accent); }
        .pw .mt-label { margin-top: 12px; font-size: 12px; line-height: 1.35; text-align: center; color: var(--ink); }
        @media (max-width: 640px) {
          .pw .mt-track { flex-direction: column; align-items: stretch; gap: 10px; }
          .pw .mt-node { flex-direction: row; align-items: center; padding: 0; gap: 12px; }
          .pw .mt-node::after { top: 50%; left: 7px; width: 2px; height: 100%; }
          .pw .mt-step { margin: 0; min-width: 22px; }
          .pw .mt-dot { flex: 0 0 14px; }
          .pw .mt-label { margin: 0; text-align: left; flex: 1; }
        }
      

/* =========================================================================
   v109 — Preview + PDF styles (audit 2.1, 2.5, 2.6)
   ========================================================================= */
.pw .pv-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 14px;
  padding: 14px 18px;
  background: #F6F9FA;
  border: 1px solid var(--line-strong);
}
.pw .pv-toolbar p { margin: 0; font-size: 13.5px; color: var(--ink-soft); flex: 1 1 auto; }
.pw .pv-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pw .pv-draft-banner {
  margin: 14px 0;
  padding: 16px 18px;
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}
.pw .pv-draft-banner strong { color: var(--warn); }
.pw .pv-draft-banner ul { margin: 6px 0 0 22px; padding: 0; font-size: 14px; color: var(--ink-soft); }
.pw .pv-draft-banner li { margin: 3px 0; }
.pw .pv-draft-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.pw .pv-draft-confirm input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--warn);
  margin-top: 2px;
  flex: 0 0 auto;
}
.pw .pv-page {
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  margin: 18px auto;
  padding: 38px 44px;
  max-width: 760px;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
}
.pw .pv-page.is-draft::before {
  content: 'DRAFT — NOT FOR SERVICE';
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  padding: 4px 10px;
  border-radius: 2px;
}
.pw .pv-page h2.pv-title {
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.pw .pv-page .pv-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
}
.pw .pv-page .pv-block { margin: 0 0 14px; }
.pw .pv-page .pv-block strong { font-weight: 700; color: var(--ink); }
.pw .pv-page .pv-from-to {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px 14px;
  margin: 14px 0;
  font-size: 13px;
}
.pw .pv-page .pv-from-to dt {
  font-weight: 700;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.pw .pv-page .pv-from-to dd { margin: 0; }
.pw .pv-page .pv-serve { font-weight: 700; margin: 18px 0; }
.pw .pv-page .pv-works-box {
  background: #F6F9FA;
  padding: 12px 14px;
  margin: 10px 0;
  white-space: pre-wrap;
}
.pw .pv-page .pv-tick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0;
}
.pw .pv-page .pv-tick::before {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink);
  margin-top: 3px;
  background: #fff;
}
.pw .pv-page .pv-tick.is-checked::before {
  background: var(--accent);
  border-color: var(--accent);
}
.pw .pv-page .pv-tick span { flex: 1 1 auto; }
.pw .pv-page .pv-signoff {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.pw .pv-page .pv-signoff div { margin-bottom: 10px; }
.pw .pv-page.pv-ack { background: #F6F9FA; }
.pw .pv-page .pv-ack-heading {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 4px;
}
.pw .pv-page .pv-resp-options {
  border: 1px solid var(--line-strong);
  margin: 16px 0;
}
.pw .pv-page .pv-resp-option {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
}
.pw .pv-page .pv-resp-option:last-child { border-bottom: none; }
.pw .pv-page .pv-resp-option::before {
  content: '';
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink);
  margin-top: 2px;
  background: #fff;
}
.pw .pv-page .pv-fillin {
  display: block;
  border-bottom: 1px dotted var(--ink);
  height: 22px;
  margin: 6px 0 0;
}
.pw .pv-page hr.pv-sep {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: 24px 0;
}
.pw .pv-empty {
  padding: 28px 24px;
  background: #F6F9FA;
  border: 1px dashed var(--line-strong);
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 18px 0;
}
/* v110 — Pack divider when multiple AOs (each AO gets its own notice + ack
   pair). Sits above each pack to make multi-neighbour packs scannable. */
.pw .pv-ao-header {
  margin: 22px 0 8px;
  padding: 10px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* Missing-field links inside the DRAFT banner. v111 — these are now
   accordion headers that toggle an inline-edit panel. */
.pw .pv-missing-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.pw .pv-missing-item {
  margin: 6px 0;
  border: 1px solid var(--warn);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.pw .pv-missing-item.is-open { box-shadow: 0 2px 8px rgba(184, 0, 15, 0.08); }
.pw .pv-missing-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--warn);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pw .pv-missing-link:hover { background: var(--warn-soft); color: var(--ink); }
.pw .pv-missing-link:focus-visible { outline: 2px solid var(--warn); outline-offset: -2px; }
.pw .pv-missing-caret {
  display: inline-block;
  width: 14px;
  font-size: 12px;
  color: var(--warn);
  flex: 0 0 14px;
  text-align: center;
}
.pw .pv-missing-label { flex: 1 1 auto; }
.pw .pv-missing-fix {
  padding: 14px 16px 12px;
  border-top: 1px solid var(--line);
  background: #F6F9FA;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.pw .pv-missing-fix[hidden] { display: none; }
.pw .pv-fix-row { display: flex; flex-direction: column; gap: 4px; }
.pw .pv-fix-row.pv-fix-full { grid-column: 1 / -1; }
.pw .pv-fix-label {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.pw .pv-fix-input {
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.pw .pv-fix-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 134, 0, 0.15);
}
.pw textarea.pv-fix-input {
  font-family: var(--f-body);
  resize: vertical;
  min-height: 84px;
}
.pw .pv-fix-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.pw .pv-fix-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  margin-top: 2px;
  flex: 0 0 auto;
}
.pw .pv-fix-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pw .pv-fix-copy-works {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 6px 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.pw .pv-fix-copy-works:hover { border-color: var(--accent); color: var(--accent-ink); }
.pw .pv-fix-jumprow {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: flex-end;
}
.pw .pv-fix-jump {
  font: inherit;
  font-size: 12px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
.pw .pv-fix-jump:hover { color: var(--ink); }
.pw .pv-fix-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .pw .pv-missing-fix { grid-template-columns: 1fr; }
}
/* Surveyor fields injected at top of stage-generate */
.pw #surveyor-block { margin-top: 16px; }
.pw #surveyor-block h4 {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}
.pw #surveyor-block .surveyor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 720px) { .pw #surveyor-block .surveyor-grid { grid-template-columns: 1fr; } }
.pw #surveyor-block .repeater-field { display: flex; flex-direction: column; gap: 4px; }
.pw #surveyor-block label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.pw #surveyor-block input {
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.pw #surveyor-block input:focus { outline: none; border-color: var(--accent); }

/* ===== Party wall section — site integration overrides =====
   Everything above is the notice tool's own stylesheet, scoped under .pw
   and re-tokened to the site palette (orange kept as the section accent).
   These rules restyle the section chrome to sit under the main site nav. */
.pw{--meta-h:0px;--pink-soft:#FFE8EE;overflow:visible}
.pw .frame{padding-top:clamp(20px,3vw,36px);min-height:0}
.pw h1,.pw h2,.pw h3,.pw h4{font-family:var(--f-head);font-weight:600;letter-spacing:-0.012em}
.pw .mono{font-family:var(--f-mono);letter-spacing:.08em}
/* secondary navigation — sits directly under the sticky site header */
.pw .topnav{position:sticky;top:var(--pw-header-h,68px);z-index:40;margin:0;border-top:0;border-bottom:1px solid var(--rule);background:#fff}
.pw .topnav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);gap:16px}
.pw .pw-subnav-label{display:inline-flex;align-items:center;gap:10px;padding:0 20px 0 0;margin-right:4px;border-right:1px solid var(--rule);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);font-weight:500;white-space:nowrap;flex:none}
.pw .pw-subnav-label::before{content:"";width:10px;height:10px;background:var(--red);flex:none}
.pw .topnav-list{gap:2px}
.pw .topnav-link{font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-2);padding:15px 12px 13px;border-bottom:2px solid transparent;border-radius:0}
.pw .topnav-link:hover{color:var(--red-ink);background:transparent}
.pw .topnav-link[aria-current="page"]{color:var(--brand-ink);border-bottom-color:var(--red)}
.pw .topnav-toggle{font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.pw .pw-subnav-meta{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none}
.pw .pw-subnav-meta .mp{color:var(--red-ink)}
.pw .meta-welcome-note{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pw .meta-right-stack{display:inline-flex;gap:14px}
@media (max-width:1100px){.pw .pw-subnav-meta,.pw .meta-welcome-note{display:none}}
@media (max-width:880px){.pw .topnav{top:var(--pw-header-h,68px)}.pw .topnav-inner{padding:0 var(--gut)}.pw .pw-subnav-label{display:none}.pw .topnav-link{font-size:13.5px;padding:12px 9px}.pw .topnav-list{overflow-x:auto;scrollbar-width:none}.pw .topnav-list::-webkit-scrollbar{display:none}}
.pw .topnav-more .is-mobile-only{display:none}
@media (max-width:640px){.pw .topnav-list .topnav-link.is-major{display:none}.pw .topnav-more .is-mobile-only{display:block}}
/* fees & guides stage (site components living inside the section) */
.pw #stage-fees .pw-fees{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media (max-width:900px){.pw #stage-fees .pw-fees{grid-template-columns:1fr}}
.pw #stage-fees .tool{border:1px solid var(--rule-strong);background:#fff}
.pw #stage-fees .tool-hd{display:flex;justify-content:space-between;padding:12px 18px;background:var(--brand-ink);color:#fff;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pw #stage-fees .tool-bd{padding:24px 18px;display:flex;flex-direction:column;gap:22px}
.pw #stage-fees .tool-bd.success{display:none}
.pw #stage-fees .tool.is-done .tool-bd.form-body{display:none}
.pw #stage-fees .tool.is-done .tool-bd.success{display:flex}
.pw #stage-fees .seg{display:flex;flex-wrap:wrap;gap:8px}
.pw #stage-fees .opt-btn{min-height:44px;padding:8px 14px;border:1px solid var(--rule-strong);background:#fff;font:600 15px var(--f-body);color:var(--ink);cursor:pointer;border-radius:2px}
.pw #stage-fees .opt-btn[aria-pressed="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.pw #stage-fees .result{border-top:1px solid var(--rule-strong);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.pw #stage-fees .range{font-family:var(--f-head);font-weight:500;font-size:clamp(30px,3vw,40px);line-height:1;color:var(--brand)}
.pw #stage-fees .range small{font-size:16px;color:var(--muted)}
.pw #stage-fees .meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);font-weight:500}
.pw #stage-fees .label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pw #stage-fees .input{min-height:46px;padding:0 12px;border:1px solid var(--rule-strong);border-radius:2px;font:16px var(--f-body);color:var(--ink);width:100%}
.pw #stage-fees .input:focus{outline:2px solid var(--red);outline-offset:1px}
.pw #stage-fees .field{display:flex;flex-direction:column;gap:6px}
.pw #stage-fees .errmsg{display:none;color:var(--red-ink);font-size:14px}
.pw #stage-fees .field.invalid .errmsg{display:block}
.pw #stage-fees .hp{position:absolute;left:-9999px}
.pw #stage-fees .status{display:inline-block;padding:4px 10px;border-radius:2px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.pw #stage-fees .status.info{background:var(--brand-light);color:var(--brand-ink)}
.pw #stage-fees .status.ok{background:var(--green-tint);color:var(--green-ink)}
.pw #stage-fees .small{font-size:14.5px}.pw #stage-fees .muted{color:var(--muted)}
.pw #stage-fees .row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pw #stage-fees .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.pw #stage-fees .g2{grid-template-columns:1fr}}
.pw #stage-fees .choice{display:flex;gap:10px;align-items:flex-start}
.pw #stage-fees .link-arrow{font-weight:600;color:var(--brand)}
.pw #stage-fees .pw-fees-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.pw #stage-fees .pw-fees-list li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule-strong)}
.pw #stage-fees .pw-fees-list .mono{width:48px;flex:none;color:var(--red-ink)}
/* disclaimer strip before the site footer */
.pw-disclaimer{border-top:1px solid var(--rule);padding:20px 0 28px;font-size:14px;line-height:1.6;color:var(--muted)}
.pw-disclaimer p{margin:0 0 6px}.pw-disclaimer strong{color:var(--ink)}
/* v114 — question stages no longer lock to the viewport height. Under the
   site header + sub-nav + stepper the old calc pushed the Yes / No / Not sure
   bar below the fold; let the stage flow naturally and keep the action bar
   directly under the question so it is visible without scrolling. */
.pw .stage[data-progress="01"].active:not(#stage-q2b){min-height:0}
.pw .stage[data-progress="01"] .q-grid{flex:0 0 auto;align-items:center;gap:clamp(16px,2vw,32px);margin-top:4px}
.pw .stage[data-progress="01"] .visual img{max-height:clamp(180px,30vh,280px)}
.pw .stage[data-progress="01"] :is(h1,h2).headline{font-size:clamp(26px,min(3.6vw,5vh),42px)}
.pw .stage[data-progress="01"] .bottom{margin-top:20px}
.pw .stage[data-progress="01"] .btn-link[data-back]{margin:6px 0 0}
.pw .frame{padding-top:clamp(12px,2vw,20px)}

/* Phase 1 — touch targets (30 Sep 2026): every checker control at least 44px tall */
.pw .btn,.pw .opt-btn,.pw .btn-not-sure,.pw .s6d-option,.pw .recv-option,.pw .topnav-link{min-height:44px;box-sizing:border-box}
.pw .btn-link{min-height:44px;padding:12px 0;border-bottom:none;text-decoration:underline;text-underline-offset:3px;font-size:13px}
.pw .progress-step.clickable{min-height:44px}

/* Phase 2 (30 Sep 2026) — linear progress bar above the stepper, and the
   "Your answers" summary beneath it. */
.pw .wiz-bar{position:relative;height:24px;padding-top:20px;margin:0 0 10px;box-sizing:border-box}
.pw .wiz-bar::before{content:'';position:absolute;left:0;right:0;top:20px;bottom:0;background:var(--line)}
.pw .wiz-bar-fill{position:absolute;left:0;top:20px;bottom:0;background:var(--accent);transition:width 220ms ease}
.pw .wiz-bar-text{position:absolute;left:0;top:0;line-height:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pw .wiz-answers{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:-12px 0 24px;padding:10px 14px;border:1px solid var(--line);background:#fff;font-size:13.5px}
.pw .wiz-answers-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:4px}
.pw .wiz-answers dl{display:contents;margin:0}
.pw .wiz-answers dl>div{display:inline-flex;gap:6px;margin:0}
.pw .wiz-answers dt{color:var(--muted);margin:0}
.pw .wiz-answers dt::after{content:':'}
.pw .wiz-answers dd{margin:0;font-weight:600;color:var(--ink)}
.pw .wiz-answers-edit{margin-left:auto;background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:640px){.pw .wiz-answers dl>div{width:100%}.pw .wiz-answers-edit{margin-left:0}}

/* Phase 3 (30 Sep 2026) — party wall hero headings match the site-wide .h1
   (site.css: clamp(34px,4vw,52px), weight 600) instead of 64–76px display sizes. */
.pw #stage-welcome .welcome-headline,
.pw .welcome-headline,
.pw :is(h1,h2).headline,
.pw .recv-hero :is(h1,h2),
.pw .notice-hero :is(h1,h2),
.pw .before-grid :is(h1,h2){
  font-size:clamp(34px,4vw,52px)!important;line-height:1.07!important;letter-spacing:-.02em!important;font-weight:600!important
}
.pw .result-headline{font-size:clamp(28px,3.2vw,40px)!important;line-height:1.1!important;letter-spacing:-.015em!important;font-weight:600!important}

/* Phase 4 (30 Sep 2026) — contrast: small text that used the bright pink
   (#FF1654, 3.6:1) now uses --accent-ink (#B8003A, 5:1 on white). Pink stays
   for fills, rules, large headlines and markers. */
.pw .welcome-numbered .num,
.pw .s3-group-title,
.pw .field-error,
.pw .resource-link .ref-tag,
.pw .resource-link .arrow,
.pw .faq-trigger .num,
.pw .tl-phase-num,
.pw .tl-detail .actor,
.pw .tl-branch h5,
.pw .atlas-detail .ref-tag,
.pw .ro-tag,
.pw .ro-arrow,
.pw .recv-section-num,
.pw .recv-id-tag,
.pw .recv-option-toggle,
.pw .recv-clock-day,
.pw .recv-explainer-tag,
.pw .recv-costs > dt,
.pw .recv-pair-tag,
.pw .recv-anchor .num, .pw .recv-anchor-num,
.pw .recv-action-steps li::before,
.pw .recv-check-icon,
.pw .recv-object-tag,
.pw .recv-helper-legend,
.pw .recv-helper-output-label,
.pw .role-card-num,
.pw .stepper .stepper-num,
.pw .q-sub-progress .qsp-label,
.pw .welcome-cta-tag,
.pw .nn-trigger-num,
.pw .proj-bar-header > :is(h2,h3),
.pw .proj-vchev,
.pw .how-tag,
.pw .journey-card .jc-tag,
.pw .check-card .cc-ref,
.pw .atlas-fallback li .af-ref,
.pw #stage-welcome .welcome-side > :is(h2,h3).mono,
.pw #stage-welcome .proj-bar-header > :is(h2,h3),
.pw #stage-welcome .checks-section > :is(h2,h3).mono,
.pw #stage-welcome .cc-eyebrow,
.pw #stage-welcome .scope-no-block > :is(h2,h3)::before,
.pw #stage-welcome .check-card .cc-cta,
.pw .notice-hero-eyebrow,
.pw .np-sub .np-sub-ref,
.pw .np-check-q .np-check-step-num,
.pw .np-check-result-tag,
.pw .np-cta-pair .npc-tag,
.pw .np-related > :is(h2,h3),
.pw .np-related li button .npr-tag,
.pw .wiz-answers-label{color:var(--accent-ink)!important}
.pw .btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.pw .field-error{color:var(--accent-ink)}
.pw .ref-tag,.pw #stage-welcome .welcome-trust-cell .ref-tag,.pw #stage-welcome .resources-list .resource-link .ref-tag,.pw .s3-item.checked .s3-item-tag,.pw .recv-dissent-lead strong,.pw .trig-header strong,.pw .conf-likely{color:var(--accent-ink)!important}

/* Phase 7 — welcome checks grid must not exceed the viewport at ~1024px */
.pw #stage-welcome .checks-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.pw #stage-welcome .check-card{min-width:0!important}
@media (max-width:880px){.pw #stage-welcome .checks-grid{grid-template-columns:1fr!important}}

/* Oct 2026 — inline-fix items completed while typing are ticked off in place
   (the banner is no longer rebuilt mid-edit, so focus stays where you click). */
.pw .pv-missing-item.is-done .pv-missing-label { color: #23967F; text-decoration: line-through; }
.pw .pv-missing-item.is-done .pv-missing-label::after { content: '  ✓ added'; text-decoration: none; display: inline-block; margin-left: 6px; font-weight: 600; }
.pw .pv-draft-banner.is-complete { border-color: #23967F; background: #EEF8F5; }

/* Oct 2026 — repeater cards, "+ Add another" buttons, address cards and
   error lines span the full field area (they were landing in the narrow
   first column of the 1fr/2fr field grid). */
.pw .form-fields > :not(.field) { grid-column: 1 / -1; }
.pw .form-fields > .repeater-add { justify-self: start; }