/*
 * Every page on the site that is not the report workflow: the landing page, /for-organizations,
 * /trust-center, the /resources hub, the legal policies (via _LegalLayout) and the error pages.
 * Scoped to the pg- namespace; nothing here targets a Bootstrap class. The landing page's two
 * lead-capture dialogs use the native <dialog> element rather than Bootstrap's modal.
 *
 * Was landing.css with an lp- prefix until it outgrew the name. Renamed together with the prefix
 * once the pages stopped changing, following report-workflow.css (which was report-wizard.css until
 * the case page joined it). pg- rather than site-, because site-chrome.css already owns that.
 *
 * home.css is gone: this file replaced its last consumer (_LegalLayout).
 *
 * Contract:
 *  - _Layout must set ViewData["BodyClass"] = "pg-body": the custom properties below live on
 *    .pg-body, .pg so the landing page's dialogs (rendered after </main>, outside .pg) inherit them.
 *  - Bootstrap's CSS is loaded on this page, but only for reboot, .visually-hidden and [hidden].
 *    No Bootstrap component class (.btn, .card, .row, .col-*, .accordion, .modal, .text-*, .d-flex)
 *    appears in the markup this stylesheet targets.
 *  - Values deliberately mirror report-workflow.css (pill buttons, focus ring, radii, shadow,
 *    badge tones, timeline, em breakpoints) so the hero's case-status preview looks like the real
 *    thing, and so the two systems could merge later without a redesign.
 *  - Contrast, checked at 4.5:1 against every surface this file uses: #1976d2 as text is 4.37:1 on
 *    --color-surface and 4.26:1 on the primary tint (fails) — always --pg-link (#1565c0) instead.
 *    #6c757d is 4.45/4.34 on those same surfaces (fails) — always --pg-muted (#495057) instead.
 *    White on the accent blue #21a1ff is 2.76:1 (fails) — that pairing is never used.
 *  - Behaviour hooks are data-pg-* attributes, never classes; visibility is the hidden attribute.
 *  - Mobile-first, em breakpoints at 30/40/48/64em, matching report-workflow.css.
 *  - Motion is colour/transform only, capped at 150ms; the layout's global prefers-reduced-motion
 *    rule already neutralises it, so nothing here needs its own media query for that.
 */

/* ==========================================================================
   Tokens
   ========================================================================= */

.pg-body,
.pg {
    --pg-space-1: .25rem;
    --pg-space-2: .5rem;
    --pg-space-3: .75rem;
    --pg-space-4: 1rem;
    --pg-space-5: 1.5rem;
    --pg-space-6: 2rem;
    --pg-space-7: 3rem;
    --pg-space-8: 4rem;
    --pg-space-9: 6rem;

    --pg-section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
    --pg-gutter: 1rem;
    --pg-container: 72rem;         /* = .site-header__inner, so hero/sections line up with the nav */
    --pg-container-narrow: 46rem;  /* = .rw__container */

    --pg-h1: 2.5rem;
    --pg-h1: clamp(2.5rem, 1.75rem + 3.2vw, 4rem);
    --pg-h2: 1.75rem;
    --pg-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --pg-h3: 1.125rem;
    --pg-h3: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
    --pg-text-lg: 1.0625rem;
    --pg-text-lg: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    --pg-text-sm: .875rem;
    --pg-eyebrow: .75rem;

    --pg-ink: var(--color-brand-navy);
    --pg-text: var(--color-text);
    --pg-muted: #495057;                  /* = --rw-muted: the global #6c757d fails 4.5:1 on tints */
    --pg-link: var(--color-primary-dark); /* = --rw-link: #1976d2 as text fails 4.5:1 on tints */
    --pg-error: #b02a37;                  /* = --rw-error */
    --pg-on-navy: #e7edf3;
    --pg-on-navy-muted: #b9c6d4;

    --pg-tint: rgba(var(--color-primary-rgb), .06);
    --pg-tint-strong: rgba(var(--color-primary-rgb), .12);
    --pg-surface: #fff;
    --pg-surface-tint: var(--color-surface);
    --pg-border: var(--color-border);

    --pg-radius-sm: .5rem;
    --pg-radius-md: .75rem;
    --pg-radius-lg: 1rem;
    --pg-radius-pill: 999px;

    --pg-shadow-sm: 0 1px 2px rgba(30, 42, 56, .06), 0 2px 8px rgba(30, 42, 56, .04);
    --pg-shadow-md: 0 10px 30px rgba(var(--color-primary-rgb), .10); /* = --rw-shadow */
    --pg-shadow-lg: 0 24px 60px rgba(30, 42, 56, .16);
    --pg-focus: 0 0 0 4px rgba(var(--color-primary-rgb), .2);
    --pg-ease: 150ms ease;
}

@media (min-width: 40em) {
    .pg-body, .pg { --pg-gutter: 1.5rem; }
}

@media (min-width: 64em) {
    .pg-body, .pg { --pg-gutter: 2rem; }
}

/* ==========================================================================
   Base / layout
   ========================================================================= */

.pg-body {
    font-family: var(--font-sans);
    background: #fff;
    color: var(--pg-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* .pg is the skip-link target (id="main-content"); a ring around the whole page reads as a fault. */
.pg:focus, .pg:focus-visible { outline: none; }

.pg-container {
    width: 100%;
    max-width: var(--pg-container);
    margin: 0 auto;
    padding: 0 var(--pg-gutter);
}

.pg-container--narrow { max-width: var(--pg-container-narrow); }

.pg-section { padding: var(--pg-section-y) 0; }
.pg-section--tint { background: var(--pg-surface-tint); }
.pg-section--navy { background: var(--color-brand-navy); color: var(--pg-on-navy); }
.pg-section[id] { scroll-margin-top: 1rem; }

.pg-section__head {
    max-width: 40rem;
    margin: 0 auto var(--pg-space-7);
    text-align: center;
}

.pg-section__title {
    font-size: 1.75rem;
    font-size: var(--pg-h2);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-3);
    /* Without this, "Give your people a safe way to speak up" drops "speak up" onto a line alone. */
    text-wrap: balance;
}

.pg-section--navy .pg-section__title { color: #fff; }

.pg-section__lead {
    font-size: var(--pg-text-lg);
    line-height: 1.5;
    color: var(--pg-muted);
    margin: 0;
}

.pg-section--navy .pg-section__lead { color: var(--pg-on-navy); }

.pg-section__foot {
    max-width: 40rem;
    margin: var(--pg-space-6) auto var(--pg-space-5);
    text-align: center;
    color: var(--pg-muted);
}

.pg-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--pg-eyebrow);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pg-link);
    margin-bottom: var(--pg-space-3);
}

.pg-section--navy .pg-eyebrow { color: var(--color-primary-accent); } /* #21a1ff on navy = 5.27:1 */

.pg-actions { display: flex; flex-wrap: wrap; gap: var(--pg-space-3); }
.pg-actions--center { justify-content: center; }

/* A card grid followed straight by its action row (the organizations and resources sections) has
   nothing between them to create space, so the buttons sit flush against the cards above. The
   privacy section is unaffected — its closing paragraph already separates the two. */
.pg-grid + .pg-actions { margin-top: var(--pg-space-6); }

.pg-link {
    color: var(--pg-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.pg-link:hover, .pg-link:focus-visible { color: var(--pg-link); text-decoration-thickness: 2px; }

/* body:has(dialog[open]) locks background scroll while a dialog is open. */
body:has(dialog[open]) { overflow: hidden; }

/* ==========================================================================
   Buttons (values = .rw__btn)
   ========================================================================= */

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .625rem 1.375rem;
    border-radius: var(--pg-radius-pill);
    border: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-primary);
    color: var(--color-on-primary);
    transition: background-color var(--pg-ease), color var(--pg-ease), border-color var(--pg-ease);
}

/* Bootstrap reboot's a:hover (0,1,1) outranks .pg-btn (0,1,0), so every variant states its own hover. */
.pg-btn:hover, .pg-btn:focus-visible { background: var(--color-primary-dark); color: var(--color-on-primary); }
.pg-btn:disabled { opacity: .6; cursor: not-allowed; }

.pg-btn--lg { min-height: 52px; padding: .8rem 1.75rem; font-size: 1.0625rem; }

.pg-btn--secondary {
    background: transparent;
    color: var(--pg-link);
    border-color: var(--color-primary);
}
.pg-btn--secondary:hover, .pg-btn--secondary:focus-visible { background: rgba(var(--color-primary-rgb), .08); color: var(--pg-link); }

.pg-btn--ghost { background: transparent; color: var(--pg-link); padding-inline: .875rem; }
.pg-btn--ghost:hover, .pg-btn--ghost:focus-visible { background: rgba(var(--color-primary-rgb), .08); color: var(--pg-link); }

.pg-btn--light { background: #fff; color: var(--color-brand-navy); }
.pg-btn--light:hover, .pg-btn--light:focus-visible { background: #e7edf3; color: var(--color-brand-navy); }

.pg-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.pg-btn--outline-light:hover, .pg-btn--outline-light:focus-visible { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.pg-btn--block { width: 100%; }
.pg-btn .bi { font-size: 1.1em; }

@media (max-width: 29.99em) {
    .pg-hero__actions .pg-btn, .pg-cta .pg-actions .pg-btn { width: 100%; }
}

.pg-btn:focus-visible,
.pg-link:focus-visible,
.pg-input:focus-visible,
.pg-textarea:focus-visible,
.pg-faq__q:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--pg-focus);
}

.pg-section--navy .pg-btn:focus-visible,
.pg-dialog__close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 191, 71, .25);
}

/* ==========================================================================
   Cards, tiles, grids
   ========================================================================= */

.pg-card {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-lg);
    box-shadow: var(--pg-shadow-sm);
    padding: var(--pg-space-5);
    min-width: 0;
}

.pg-card--tint { background: var(--pg-surface-tint); }

.pg-card__title {
    font-size: var(--pg-h3);
    font-weight: 700;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-2);
}

/* Spacing lives on the children rather than as a flex `gap`, because these __icon/__title/__text
   classes are also used inside .pg-card (the resource cards and the newsletter card), which is not
   a flex column — a gap there applies to nothing and the text collapses onto its heading. */
.pg-tile {
    display: flex;
    flex-direction: column;
    padding: var(--pg-space-5);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-md);
    background: #fff;
    min-width: 0;
}

.pg-tile--tint { background: var(--pg-surface-tint); }
.pg-tile--navy { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }

.pg-tile__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--pg-radius-sm);
    display: grid;
    place-items: center;
    background: var(--pg-tint-strong);
    color: var(--pg-link);
    font-size: 1.35rem;
    margin-bottom: var(--pg-space-3);
}

.pg-tile--navy .pg-tile__icon { background: rgba(255, 255, 255, .12); color: #fff; }

.pg-tile__title {
    font-size: var(--pg-h3);
    font-weight: 700;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-2);
    /* Three of the four privacy tiles wrap to two lines; balancing stops one from leaving a single
       orphaned word on its second line. */
    text-wrap: balance;
}

.pg-tile--navy .pg-tile__title { color: #fff; }

.pg-tile__text { margin: 0 0 var(--pg-space-2); color: var(--pg-muted); }
.pg-tile__text:last-child { margin-bottom: 0; }
.pg-tile--navy .pg-tile__text { color: var(--pg-on-navy-muted); }

.pg-grid {
    display: grid;
    gap: var(--pg-space-4);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 30em) {
    .pg-grid--2, .pg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
    .pg-grid { gap: var(--pg-space-5); }
    .pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pg-card { padding: var(--pg-space-6); }
}

@media (min-width: 64em) {
    .pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card headings run to one or two lines depending on their wording, which leaves the body copy of a
   short-titled card starting a line higher than its neighbours. Reserving two lines' worth of height
   puts every body paragraph in a row on the same baseline. Scoped to the widths where the cards are
   actually side by side; stacked, it would only add dead space. 2.4em = two lines at line-height 1.2. */
@media (min-width: 30em) {
    .pg-grid--4 .pg-tile__title { min-height: 2.4em; }
}

/* Two-column tiles only need the reserved line while they are narrow enough for a title to wrap.
   Past 64em they are wide enough that every title fits on one line, and holding a second line open
   just opens a gap under each heading. */
@media (min-width: 30em) and (max-width: 63.99em) {
    .pg-grid--2 .pg-tile__title { min-height: 2.4em; }
}

@media (min-width: 48em) {
    .pg-grid--3 .pg-tile__title,
    .pg-grid--3 .pg-step__title { min-height: 2.4em; }
}

/* ==========================================================================
   Interior page header (/for-organizations, /trust-center)
   ========================================================================= */

/* The landing hero is two-column and carries a product preview; these pages just need a title and a
   sentence, so they get a shorter, centred variant of the same luminous treatment rather than
   reusing .pg-hero and overriding half of it. */
.pg-page-header {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
    text-align: center;
}

.pg-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(52rem 26rem at 50% -30%, rgba(var(--color-primary-rgb), .14), transparent 62%);
}

.pg-page-header__inner {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
}

.pg-page-title {
    font-size: 2.25rem;
    font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-4);
    text-wrap: balance;
}

.pg-page-lead {
    font-size: var(--pg-text-lg);
    line-height: 1.5;
    color: var(--pg-muted);
    margin: 0;
    text-wrap: balance;
}

/* ==========================================================================
   Icon list (compliance bullets, security practices)
   ========================================================================= */

.pg-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pg-space-2);
}

.pg-list__item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    color: var(--pg-muted);
}

.pg-list__item .bi {
    flex: none;
    color: var(--pg-link);
    /* Matches the body line-height so the glyph sits on the first line of a wrapping item. */
    line-height: 1.6;
}

/* ==========================================================================
   Hero
   ========================================================================= */

.pg-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: clamp(3rem, 2rem + 4vw, 6rem) 0 var(--pg-space-6);
}

.pg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(var(--color-primary-rgb), .14), transparent 60%),
        radial-gradient(40rem 24rem at 5% 100%, rgba(var(--color-primary-rgb), .07), transparent 60%);
}

.pg-hero__inner {
    position: relative;
    display: grid;
    gap: var(--pg-space-7);
    align-items: center;
}

.pg-hero__copy { min-width: 0; }

.pg-hero__title {
    font-size: 2.5rem;
    font-size: var(--pg-h1);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.06;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-4);
    text-wrap: balance;
}

.pg-hero__accent { color: var(--pg-link); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .pg-hero__accent {
        background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.pg-hero__lead {
    font-size: 1.125rem;
    font-size: clamp(1.125rem, 1.05rem + .5vw, 1.375rem);
    line-height: 1.5;
    color: var(--pg-text);
    margin: 0 0 var(--pg-space-3);
    max-width: 34rem;
}

.pg-hero__sub {
    font-size: var(--pg-text-lg);
    line-height: 1.5;
    color: var(--pg-muted);
    margin: 0 0 var(--pg-space-6);
    max-width: 34rem;
}

.pg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pg-space-3); }

.pg-hero__visual { display: none; }

/* Centred rather than left-aligned: it spans the full container under a two-column hero, so
   left-aligning it leaves the right half of the rule visibly empty. */
.pg-trust {
    grid-column: 1 / -1;
    list-style: none;
    margin: var(--pg-space-5) 0 0;
    padding: var(--pg-space-4) 0 0;
    border-top: 1px solid var(--pg-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pg-space-2) var(--pg-space-5);
    font-size: var(--pg-text-sm);
    font-weight: 600;
    color: var(--pg-muted);
}

.pg-trust__item { display: inline-flex; align-items: center; gap: .4rem; }
.pg-trust__item .bi { color: var(--pg-link); font-size: 1rem; }

@media (min-width: 48em) {
    .pg-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .pg-hero__visual { display: block; position: relative; }
}

@media (min-width: 64em) {
    .pg-hero__inner { gap: var(--pg-space-8); }
}

/* ==========================================================================
   Hero mock (case-status preview) — values mirror .rw__badge / .rw__timeline / .rw__message
   ========================================================================= */

.pg-mock {
    position: relative;
    max-width: 26rem;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-lg);
    box-shadow: var(--pg-shadow-lg);
    padding: var(--pg-space-5);
    font-size: .875rem;
}

.pg-mock::before {
    content: "";
    position: absolute;
    inset: -2.5rem;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--color-primary-rgb), .16), transparent);
}

.pg-mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: var(--pg-space-3);
}

.pg-mock__eyebrow {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pg-muted);
    word-break: break-all;
}

.pg-mock__title { font-size: 1.25rem; font-weight: 800; color: var(--pg-ink); margin: 0 0 var(--pg-space-4); }

.pg-mock__thread { list-style: none; margin: 0 0 var(--pg-space-3); padding: 0; }

.pg-mock__msg {
    border: 1px solid var(--pg-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    padding: .625rem .75rem;
    margin-bottom: .5rem;
    background: #fff;
}

.pg-mock__msg--owner { border-left-color: var(--color-primary); }
.pg-mock__msg--team { border-left-color: var(--color-brand-slate); }
.pg-mock__msg p { margin: .35rem 0 0; }

.pg-mock__author {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.pg-mock__msg--owner .pg-mock__author { background: var(--pg-tint-strong); color: var(--pg-link); }

.pg-mock__time { margin-left: .5rem; font-size: .8rem; color: var(--pg-muted); }

.pg-mock__foot { margin: 0; font-size: .8rem; color: var(--pg-muted); }
.pg-mock__foot .bi { color: var(--pg-link); margin-right: .3rem; }

.pg-mock__caption {
    text-align: center;
    font-size: var(--pg-text-sm);
    color: var(--pg-muted);
    margin: var(--pg-space-4) 0 0;
}

/* ---- badge (= .rw__badge) ------------------------------------------------ */

.pg-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.pg-badge[data-tone="progress"] {
    background: rgba(var(--color-primary-rgb), .10);
    color: var(--color-primary-dark);
    border-color: rgba(var(--color-primary-rgb), .28);
}

.pg-badge[data-tone="attention"] {
    background: rgba(138, 82, 0, .10);
    color: #8a5200;
    border-color: rgba(138, 82, 0, .28);
}

.pg-badge[data-tone="done"] {
    background: rgba(21, 101, 60, .10);
    color: #15653c;
    border-color: rgba(21, 101, 60, .28);
}

/* ---- timeline (= .rw__timeline) ------------------------------------------ */

.pg-timeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    list-style: none;
    margin: 0 0 var(--pg-space-4);
    padding: 0;
}

.pg-tl__step { position: relative; text-align: center; padding-top: 2rem; }

.pg-tl__step::before, .pg-tl__step::after {
    content: "";
    position: absolute;
    top: .625rem;
    height: 2px;
    background: var(--pg-border);
}

.pg-tl__step::before { left: 0; right: 50%; }
.pg-tl__step::after { left: 50%; right: 0; }
.pg-tl__step:first-child::before, .pg-tl__step:last-child::after { display: none; }

.pg-tl__step.is-done::before, .pg-tl__step.is-done::after { background: var(--color-primary); }
.pg-tl__step.is-current::after { background: var(--pg-border); }

.pg-tl__dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--pg-border);
    display: grid;
    place-items: center;
    font-size: .7rem;
    color: transparent;
}

.pg-tl__step.is-done .pg-tl__dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pg-tl__step.is-current .pg-tl__dot { box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .18); }

.pg-tl__label { display: block; font-size: .7rem; line-height: 1.25; color: var(--pg-muted); padding: 0 .15rem; }
.pg-tl__step.is-current .pg-tl__label { color: var(--color-text); font-weight: 700; }

/* ==========================================================================
   How-it-works steps
   ========================================================================= */

.pg-step {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-lg);
    box-shadow: var(--pg-shadow-sm);
    padding: var(--pg-space-5);
}

.pg-step__num {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: var(--pg-space-4);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
}

.pg-step__title { font-size: var(--pg-h3); font-weight: 700; color: var(--pg-ink); margin: 0 0 var(--pg-space-2); text-wrap: balance; }
.pg-step__text { margin: 0; color: var(--pg-muted); }
.pg-steps__note { max-width: 46rem; margin: var(--pg-space-6) auto 0; }

/* ==========================================================================
   CTA band
   ========================================================================= */

/* This is the page's closing ask, so it carries more weight than the cards above it: a deeper glow,
   a blue-tinted edge and a larger heading. It stays light rather than filled — it sits directly
   above the navy "For organizations" band, and two dark blocks in a row would read as heavy. */
.pg-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--pg-space-8) var(--pg-space-5);
    border: 1px solid rgba(var(--color-primary-rgb), .22);
    border-radius: var(--pg-radius-lg);
    box-shadow: var(--pg-shadow-md);
    background: radial-gradient(42rem 22rem at 50% -35%, rgba(var(--color-primary-rgb), .20), transparent 68%), #fff;
}

.pg-cta .pg-section__title {
    margin-bottom: var(--pg-space-3);
    font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
}

.pg-cta p { color: var(--pg-muted); font-size: var(--pg-text-lg); margin: 0 0 var(--pg-space-6); }

/* ==========================================================================
   Resources + share
   ========================================================================= */

.pg-resource { display: flex; flex-direction: column; transition: border-color var(--pg-ease), box-shadow var(--pg-ease); }

/* Only the resource cards get a hover: they are the ones that lead somewhere. The privacy and step
   tiles are not interactive, and a hover on those would promise a click that does nothing. */
.pg-resource:hover { border-color: rgba(var(--color-primary-rgb), .35); box-shadow: var(--pg-shadow-md); }

.pg-resource__actions { margin-top: auto; padding-top: var(--pg-space-4); display: flex; flex-wrap: wrap; gap: var(--pg-space-2); }

.pg-share {
    margin-top: var(--pg-space-7);
    display: grid;
    gap: var(--pg-space-4);
}

.pg-share__title { font-size: var(--pg-h3); font-weight: 700; color: var(--pg-ink); margin: 0 0 var(--pg-space-2); }
.pg-share__body p { margin: 0; color: var(--pg-muted); }
.pg-share__actions { display: flex; flex-wrap: wrap; gap: var(--pg-space-3); }

@media (min-width: 48em) {
    .pg-share { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ==========================================================================
   FAQ (<details>)
   ========================================================================= */

.pg-faq { display: grid; gap: var(--pg-space-6); }
.pg-faq__list { display: grid; gap: var(--pg-space-3); }

.pg-faq__item {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-md);
    box-shadow: var(--pg-shadow-sm);
    transition: border-color var(--pg-ease);
}

.pg-faq__item:hover { border-color: rgba(var(--color-primary-rgb), .35); }
.pg-faq__item[open] { border-color: rgba(var(--color-primary-rgb), .35); }

.pg-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-3);
    min-height: 44px;
    padding: var(--pg-space-4) var(--pg-space-5);
    cursor: pointer;
    font-weight: 700;
    color: var(--pg-ink);
    border-radius: inherit;
    list-style: none;
}

.pg-faq__q::-webkit-details-marker { display: none; } /* Safari <= 16 */
.pg-faq__q::marker { content: ""; }

.pg-faq__icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pg-tint-strong);
    color: var(--pg-link);
    font-size: .9rem;
    transition: transform var(--pg-ease);
}

.pg-faq__item[open] .pg-faq__icon { transform: rotate(45deg); }

.pg-faq__a { padding: 0 var(--pg-space-5) var(--pg-space-5); color: var(--pg-text); }
.pg-faq__a p:last-child { margin-bottom: 0; }

@media (min-width: 64em) {
    .pg-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
    .pg-faq__intro { position: sticky; top: var(--pg-space-6); }
}

/* ==========================================================================
   Forms
   ========================================================================= */

.pg-contact { display: grid; gap: var(--pg-space-5); }

@media (min-width: 48em) {
    .pg-contact { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

.pg-field { margin-bottom: var(--pg-space-4); }

.pg-label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--color-text); }
.pg-help { display: block; font-size: var(--pg-text-sm); color: var(--pg-muted); margin-top: .35rem; }

.pg-input, .pg-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .625rem .875rem;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-sm);
    background: #fff;
    color: var(--color-text);
    font: inherit;
}

.pg-input:hover, .pg-textarea:hover { border-color: rgba(var(--color-primary-rgb), .5); }
.pg-textarea { min-height: 8rem; resize: vertical; }
.pg-input[aria-invalid="true"], .pg-textarea[aria-invalid="true"] { border-color: var(--pg-error); }

.pg-inline-form { display: flex; flex-direction: column; gap: var(--pg-space-3); }

@media (min-width: 30em) {
    .pg-inline-form { flex-direction: row; }
    .pg-inline-form .pg-input { flex: 1 1 auto; }
}

/* Inline status region every marketing form carries (data-pg-status). */
.pg-form__status {
    border: 1px solid var(--pg-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--pg-radius-sm);
    background: var(--pg-tint);
    padding: .75rem .875rem;
    margin-top: var(--pg-space-3);
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-text);
}

.pg-form__status[hidden] { display: none; }
.pg-form__status[data-state="pending"] { border-left-color: var(--color-primary); background: var(--pg-tint); }
.pg-form__status[data-state="success"] { border-left-color: #15653c; background: rgba(21, 101, 60, .07); color: #15653c; }
.pg-form__status[data-state="error"] { border-left-color: var(--pg-error); background: rgba(176, 42, 55, .07); color: var(--pg-error); }

/* Standalone notice (the no-JS notice in Get in touch). */
.pg-notice {
    border: 1px solid var(--pg-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--pg-radius-sm);
    background: var(--pg-tint);
    padding: .875rem 1rem;
    font-size: .95rem;
    color: var(--color-text);
}

.pg-notice[data-tone="warning"] { border-left-color: #8a5200; background: rgba(138, 82, 0, .08); }
.pg-notice[hidden] { display: none; }
.pg-notice p:last-child { margin-bottom: 0; }
.pg-notice .bi { color: var(--pg-link); margin-right: .4rem; }

/* ==========================================================================
   Dialogs (native <dialog>, replacing Bootstrap's .modal on this page)
   ========================================================================= */

.pg-dialog {
    padding: 0;
    border: 0;
    border-radius: var(--pg-radius-lg);
    box-shadow: var(--pg-shadow-lg);
    width: min(30rem, calc(100% - 2rem));
    background: #fff;
    color: var(--color-text);
}

.pg-dialog::backdrop { background: rgba(30, 42, 56, .55); }

.pg-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pg-space-3);
    padding: var(--pg-space-5) var(--pg-space-5) var(--pg-space-4);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border-top-left-radius: var(--pg-radius-lg);
    border-top-right-radius: var(--pg-radius-lg);
}

.pg-dialog__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: .25rem;
}

.pg-dialog__title { font-size: 1.25rem; font-weight: 800; margin: 0; color: #fff; }

.pg-dialog__close {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.1rem;
}

.pg-dialog__close:hover { background: rgba(255, 255, 255, .26); }

.pg-dialog__body { padding: var(--pg-space-5); }
.pg-dialog__body > p:first-child { margin-top: 0; }

.pg-dialog__checks {
    list-style: none;
    margin: 0 0 var(--pg-space-4);
    padding: 0;
    display: grid;
    gap: .35rem;
    font-size: var(--pg-text-sm);
    color: var(--pg-muted);
}

.pg-dialog__checks .bi { color: var(--pg-link); margin-right: .4rem; }

.pg-dialog__foot {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-2);
    padding: 0 var(--pg-space-5) var(--pg-space-5);
}

@media (min-width: 30em) {
    .pg-dialog__foot { flex-direction: row; justify-content: flex-end; }
    .pg-dialog__foot .pg-btn--block { width: auto; }
}

/* ==========================================================================
   Error pages (404, 500)
   ========================================================================= */

/* Four routes out of a dead end is a lot of buttons for one row; let them breathe and wrap. */
.pg-error__actions { margin-top: var(--pg-space-6); }
.pg-error__detail { margin-top: var(--pg-space-6); }

/* These two pages are short enough that the footer would otherwise stop mid-viewport with a band of
   white underneath it. Scoped to a body class rather than applied globally: every other page is long
   enough not to need it, and the report workflow already paints its own full-height background. */
.pg-body--fill {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pg-body--fill > main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}

.pg-body--fill > main > .pg-page-header { width: 100%; }

/* ==========================================================================
   Long-form document pages (the legal policies)
   ========================================================================= */

/* A reading column, not a marketing layout: one measure, generous leading, and headings that step
   down clearly enough to scan a policy. Replaces the bespoke block that used to live inline in
   _LegalLayout, which asked for 'Roboto' — a face the site has never loaded. */
.pg-doc {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--pg-space-7) var(--pg-gutter) var(--pg-space-8);
}

.pg-doc__article > header { margin-bottom: var(--pg-space-6); }

.pg-doc h1 {
    font-size: 2rem;
    font-size: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-3);
    text-wrap: balance;
}

/* Beats Bootstrap's .h5/.h2 utilities the policy markup carries (0,1,1 over 0,1,0), so the headings
   read as this site's rather than as Bootstrap's defaults. */
.pg-doc h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pg-ink);
    margin: 0 0 var(--pg-space-3);
}

.pg-doc h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pg-ink);
    margin: var(--pg-space-4) 0 var(--pg-space-2);
}

.pg-doc p, .pg-doc li { color: var(--pg-text); }
/* :not(.btn) matters: some guides style anchors as buttons, and repainting their label left
   #1565c0 text on Bootstrap's #0d6efd fill — 1.27:1. Buttons bring their own colour. */
.pg-doc a:not(.btn):not(.pg-btn) { color: var(--pg-link); }
.pg-doc ul, .pg-doc ol { padding-left: 1.25rem; }
.pg-doc li { margin-bottom: .35rem; }

.pg-doc .lead {
    font-size: var(--pg-text-lg);
    line-height: 1.6;
    color: var(--pg-muted);
}

.pg-doc__meta {
    font-size: var(--pg-text-sm);
    color: var(--pg-muted);
    margin-bottom: var(--pg-space-4);
}

.pg-doc__section {
    margin-bottom: var(--pg-space-6);
    scroll-margin-top: 1rem;
}

/* ---- guide furniture ------------------------------------------------------ */

/* Absorbed from resources.css and resources-document.css, which between them dressed the eleven
   guides three different ways. Same vocabulary, one implementation, on the site's tokens. */

.pg-doc--wide { max-width: 60rem; }

/* The document guides centre their masthead; the article guides do not have one. */
.pg-doc__header {
    text-align: center;
    margin-bottom: var(--pg-space-7);
}

.pg-doc__section {
    margin-bottom: var(--pg-space-6);
    scroll-margin-top: 1rem;
}

/* Was .highlight-box: an aside that should read as lifted out of the prose, not as a warning. */
.pg-doc__note {
    background: var(--pg-surface-tint);
    border: 1px solid var(--pg-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--pg-radius-sm);
    padding: var(--pg-space-4) var(--pg-space-5);
    margin: var(--pg-space-5) 0;
}

.pg-doc__note > :last-child { margin-bottom: 0; }

/* --color-danger is a fill colour and measures 3.6:1 as text; --color-danger-text is the red that
   clears 4.5:1 on these surfaces. */
.pg-doc__warning {
    color: var(--color-danger-text);
    font-weight: 700;
}

.pg-doc__related {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: var(--pg-space-2);
}

.pg-doc__related a {
    color: var(--pg-link);
    font-weight: 600;
}

/* ---- breadcrumb ------------------------------------------------------------ */

.pg-doc .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 var(--pg-space-5);
    font-size: var(--pg-text-sm);
}

.pg-doc .breadcrumb-item + .breadcrumb-item::before { content: "›"; }
.pg-doc .breadcrumb-item.active { color: var(--pg-muted); }

/* ---- print affordance ------------------------------------------------------ */

/* Fixed on desktop, inline on narrow screens, hidden when printing. Sits below the shared header:
   at top: 20px it covered the header's "Make a report" CTA between roughly 800px and 1100px wide. */
.pg-doc .print-button {
    position: fixed;
    top: 85px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: var(--pg-radius-pill);
    background: var(--color-brand-slate);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    z-index: 1000;
}

.pg-doc .print-button:hover { background: var(--color-brand-navy); }

.pg-doc .print-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--pg-focus);
}

@media (max-width: 48em) {
    .pg-doc .print-button {
        position: static;
        display: inline-flex;
        margin: 0 auto var(--pg-space-5);
        width: fit-content;
    }
}

@media print {
    .no-print { display: none; }
    .pg-doc { max-width: none; padding: 0; }
}

/* ---- table of contents ---------------------------------------------------- */

.pg-doc__toc {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-md);
    box-shadow: var(--pg-shadow-sm);
    padding: var(--pg-space-4) var(--pg-space-5);
    margin-bottom: var(--pg-space-6);
}

.pg-doc__toc-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pg-muted);
    margin: 0 0 var(--pg-space-2);
}

.pg-doc__toc-list { margin: 0; padding-left: 1.25rem; }
.pg-doc__toc-list li { margin-bottom: .25rem; }

/* --color-primary as text is 4.37:1 on this surface; the darker partner clears 4.5:1. */
.pg-doc__toc-list a {
    color: var(--pg-link);
    text-decoration: none;
}

.pg-doc__toc-list a:hover, .pg-doc__toc-list a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   High contrast
   ========================================================================= */

@media (forced-colors: active) {
    .pg-card, .pg-tile, .pg-step, .pg-faq__item, .pg-notice, .pg-form__status,
    .pg-mock, .pg-mock__msg, .pg-badge, .pg-cta, .pg-dialog {
        border: 1px solid CanvasText;
        box-shadow: none;
    }
    .pg-btn { border: 1px solid ButtonText; }
    .pg-hero::before, .pg-mock::before { display: none; }
    .pg-hero__accent { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
    .pg-step__num, .pg-tile__icon, .pg-faq__icon, .pg-dialog__close { border: 1px solid CanvasText; }
    .pg-section--navy { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
    .pg-trust { border-top-color: CanvasText; }
    .pg-tl__step.is-done::before, .pg-tl__step.is-done::after, .pg-tl__step.is-current::before { background: Highlight; }
    .pg-tl__step.is-done .pg-tl__dot { background: Highlight; border-color: Highlight; }
    .pg-tl__step.is-current .pg-tl__dot { border-color: Highlight; }
}