/* Netspective — base stylesheet.
 *
 * Every color, type-scale step, spacing step, radius, shadow, and breakpoint below
 * is a named token from `specs/constitution/design-system.md` §2 — no off-token value is used
 * (DT-07/DT-08). Provenance is noted per block: "Observed" cites the exact live-site
 * value this token reproduces; "Extension" cites the spec section that introduced it.
 *
 * System font stack only; no external font/CDN requests
 * (SYSTEM-MODEL.md INV-2 / ARCHITECTURE.md D12: zero third-party requests).
 *
 * Dark mode is explicitly out of scope (DESIGN-SYSTEM.md §2.2.3) — there is
 * deliberately no `prefers-color-scheme` block here; adding one is a governed
 * spec change, not a local addition.
 */

:root {
    /* Color tokens — Observed, DESIGN-SYSTEM.md §2.2 (hex values computed from the
       exact live HSL values cited there). */
    --background: #FFFFFF;
    --foreground: #020817;
    --card: #FFFFFF;
    --card-foreground: #020817;
    --muted: #F6F4F4;
    --muted-foreground: #705C5C;
    --primary: #8A2828;
    --primary-foreground: #FFFFFF;
    --secondary: #5C2323;
    --secondary-foreground: #FFFFFF;
    --accent: #F2690D;
    --border: #E9E4E2;
    --ring: #8A2828;

    /* Extension tokens — DESIGN-SYSTEM.md §2.2.1, added for WCAG AA text contrast
       and the PLG.md three-band semantic; not present on the live site. */
    --success: #128A3E;
    --warning: #C77A0A;
    --destructive: #EF4444;
    --destructive-text: #D31212;
    --accent-text: #B84F0A;

    /* Refinement tokens (pass 1) — DESIGN-SYSTEM.md §2.2.1a, added 2026-09-11
       by the screenshot-driven /resources visual-elevation pass (docs/prompts/
       refinement-design-system.md). Purpose-scoped, not a replacement for the
       Observed --border/--primary tokens above. */
    --border-subtle: #e2e8f0;
    --border-hover: #cbd5e1;
    --kicker-text: #991b1b;

    /* Refinement tokens (pass 2) — DESIGN-SYSTEM.md §2.2.1b, added by the
       brand/typography/component polish pass targeting the IEC 62304 guide
       and global shell (docs/prompts/refinement-design-system.md, entry 2).
       --kicker-bg is UPDATED (not added) here — see that entry for the old
       value. All others are new, purpose-scoped tones distinct from the core
       Observed palette; none replace it globally. */
    --kicker-bg: rgba(185, 28, 28, 0.07);
    --kicker-border: rgba(185, 28, 28, 0.15);
    --header-border: #e2e8f0; /* INV-VB-08, specs/001-visual-branding — was #eef0f3 */
    --ink: #0f172a;
    --ink-hover: #1e293b;
    --ink-secondary: #334155;
    --link-brand: #b91c1c;
    --surface-tint: #f8fafc;
    --input-border: #cbd5e1;

    /* specs/000-global-shell/spec.md — a genuinely distinct cool-slate tone
       from --muted-foreground (#705C5C, warm); reused wherever spec.md's own
       var(--text-body, #334155) matches an existing token exactly
       (--ink-secondary) rather than duplicated. */
    --text-muted: #64748b;

    /* specs/001-visual-branding, homepage/capability-card refinement pass —
       a cooler, darker secondary-text tone than --muted-foreground (#705C5C)
       and --text-muted (#64748b) for the one spot this pass targets
       (.capability-card p): #475569 meets WCAG AAA (7:1) for normal-size body
       text against #ffffff, which the other two do not reliably clear. Scoped
       to .capability-card p only, not a --muted-foreground-wide retheme —
       that token has many other consumers outside this pass's stated scope. */
    --text-card-secondary: #475569;

    /* EvidencePanel variant tokens — DESIGN-SYSTEM.md §2.2.1c, added by the
       2026-09-14 legacy-migration & styling pass. The resolved, governed form
       of the two-state EvidencePanel comparison card §2.2.4/§4 already
       described conceptually (bg-destructive/5 / bg-primary/5 Tailwind
       shorthand) but never assigned concrete token values to. */
    --evidence-negative-bg: rgba(185, 28, 28, 0.04);
    --evidence-negative-border: rgba(185, 28, 28, 0.2);
    --evidence-negative-text: #991b1b;
    --evidence-positive-bg: rgba(22, 101, 52, 0.04);
    --evidence-positive-border: rgba(22, 101, 52, 0.2);
    --evidence-positive-text: #166534;

    /* Structural tokens — Observed, DESIGN-SYSTEM.md §2.3. */
    --radius: 0.75rem;        /* 12px, matches --radius in the live :root */
    /* specs/001-visual-branding tasks.md T-31: 65ch (character-count-based
       measure, per typographic convention) instead of a fixed 48rem — was
       already flagged (spec.md §2) as a naming/value drift against the
       spec's own "45rem optimal reading measure" language; this resolves it
       with a unit that tracks the actual rendered font, not a fixed rem
       width. All three consumers (.pr .measure, .plg-item-label,
       .campaign-banner) are prose/text-line-length contexts where ch is the
       correct unit. */
    --measure: 65ch;
    --header-h: 4rem;         /* fixed SiteHeader height (64px), SOURCE h-16 */


    /* specs/015-typography-and-styling-parity: Tailwind 3 type scale (SOURCE),
       so components reference names instead of ad-hoc rem/px literals. Body
       line-height stays 1.6 (design-system.md §2.1 refinement, DELIBERATE);
       headings no longer inherit it (see the heading reset below). */
    --fs-xs: 0.75rem;   --lh-xs: 1rem;
    --fs-sm: 0.875rem;  --lh-sm: 1.25rem;
    --fs-base: 1rem;    --lh-base: 1.5rem;
    --fs-lg: 1.125rem;  --lh-lg: 1.75rem;
    --fs-xl: 1.25rem;   --lh-xl: 1.75rem;
    --fs-2xl: 1.5rem;   --lh-2xl: 2rem;
    --fs-3xl: 1.875rem; --lh-3xl: 2.25rem;
    --fs-4xl: 2.25rem;  --lh-4xl: 2.5rem;
    --fs-5xl: 3rem;     --lh-5xl: 1;
    --tracking-tight: -0.025em;

    /* Container and vertical rhythm (SOURCE `container px-4 lg:px-8`, `py-20`). */
    --container-max: 80rem;   /* 1280px; 1400px from 96rem, below */
    --gutter: 1rem;           /* 2rem from 64rem, below */
    --section-y: 5rem;        /* 80px */

    color-scheme: light;
}
@media (min-width: 64rem) { :root { --gutter: 2rem; } }
@media (min-width: 96rem) { :root { --container-max: 87.5rem; } }

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    /* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
       §1: supersedes INV-VB-05's matte #f8fafc canvas with a clean enterprise
       white, reconciling against the reference site. --surface-tint itself is
       left unchanged (still used by .site-footer/.lectio-container, out of
       this pass's stated scope) — this declaration hardcodes the literal
       value rather than repointing the shared token. */
    background: #ffffff;
    color: var(--foreground);
    /* specs/001-visual-branding/spec.md §2.3 System Font Stack Discipline —
       supersedes the prior Observed ui-sans-serif stack; still no web font. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;      /* text-base, 16px */
    /* 1.6 — DESIGN-SYSTEM.md §2.1 "Body line-height (Refinement 2026-09-14)".
       Supersedes the Observed 1.5rem/24px (ratio 1.5): ordinary prose read
       measurably denser than the already-refined .resource-page .proposition
       context (§2.1a, 1.65) suggested the rest of the type system should be. */
    line-height: 1.6;
    padding-top: var(--header-h); /* offsets the fixed SiteHeader (below) */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;          /* INV-VB per specs/001-visual-branding; was 600 (Observed default) */
    letter-spacing: -0.025em;  /* Observed global heading default */
    margin: 0;
}

a { color: inherit; }

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* specs/015 Phase 1: global heading reset. Headings stop inheriting the body's
   1.6 line-height (which made e.g. the About H1 57.6px tall) and take SOURCE's
   tight tracking. Component rules (class selectors) still override both. */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
}

.wrap {
    /* Refined container, DESIGN-SYSTEM.md §2.3 "Refined canonical container"
       (2026-09-11, docs/prompts/refinement-design-system.md) — supersedes the
       original 1400px Observed cap. */
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- SiteHeader (specs/000-global-shell/spec.md §2.1-§2.2) ----------
   Supersedes the prior DESIGN-SYSTEM.md-refinement-pass header CSS below this
   comment block (kept in git history, not restated here) — a governed,
   independently-planned shell contract, not an incremental refinement of it.
   Functional translucency for legibility while the page scrolls beneath it —
   not the glassmorphism pattern DESIGN-SYSTEM.md §5.3 excludes: this is a
   near-opaque (95%) fill with a modest blur, not a translucent panel over
   photographic/gradient content. */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    height: var(--header-h); /* 4rem = 64px, matches SOURCE Navigation h-16 */
    /* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
       §2: supersedes INV-VB-08's light translucent header with the
       reference site's deep burgundy bar. No backdrop-filter needed on a
       solid, opaque background. */
    background-color: var(--secondary);
    border-bottom: 1px solid var(--secondary);
}
.header-inner {
    max-width: 1160px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* .brand-link: was shared with a footer brand-link (raster logo + text,
   two children) as of prompts/03-elevate-brandmark-logo-and-strip-tagline.md
   §3, which is why gap: 0.75rem was kept even after this rule stopped
   needing it for its own (single-child) content. prompts/04-live-logo-and-
   elevate-shell.md §3 removed the footer's brand-link entirely, so
   .brand-link now has exactly one usage (the header) — gap is inert there
   (nothing to space out) but harmless, so it's left rather than removed
   purely for its own sake. line-height: 0 trims the baseline whitespace
   the browser adds below an inline <img>/<svg> child. */
/* The dark chip this rule used to carry (background: #3f1414) was a stand-in
   for the "much larger, unrequested redesign" its own prior comment called
   out: static/images/netspective-logo.png is a white-wordmark asset designed
   for the live site's own dark maroon header (confirmed by screenshotting
   https://www.netspective.com/ directly). That redesign is exactly what
   specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
   §2 now requests — .site-header itself is dark burgundy (#4a151b) — so the
   chip is redundant (dark-on-dark) and removed; the white logo is legible
   directly against the header now, matching the reference site. */
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    line-height: 0;
    padding: 0.4rem 0.75rem;
}
/* specs/000-global-shell/prompts/04-live-logo-and-elevate-shell.md §4:
   .brand-logo-img replaces .brand-logo-full — the top navbar mark is now
   the real downloaded PNG (static/images/netspective-logo.png, 139x37
   native) rather than the hand-reconstructed inline SVG .brand-logo-full
   sized. object-fit: contain (rather than -full's plain height/width auto)
   guards against any future asset swap with a different native aspect
   ratio. Distinct from .brand-logo below, which still sizes the footer's
   separate raster-logo + text-group pair. */
/* specs/001-visual-branding/prompts/05-fix-footer-logo-and-nav-states.md:
   restores .brand-logo-img (superseding the prior pass's .brand-logo-icon/
   .brand-logo-text arch+text treatment, removed — no longer referenced by
   any template). Real class, not the prompt's literal inline style="" — see
   templates/layout.html's comment on this exact element for why. */
.brand-logo-img {
    height: 32px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
@media (max-width: 640px) {
    .brand-logo-img {
        height: 28px;
        max-width: 175px;
    }
}
.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.brand-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}
.brand-name {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink, #0f172a);
}
.brand-sub {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
}
@media (max-width: 30rem) { .brand-sub { display: none; } }

.header-nav .nav-list {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    /* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
       §2: crisp off-white on the new dark burgundy header (was
       --ink-secondary, tuned for the light header this supersedes). */
    color: #f1f5f9;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.15s ease;
}
/* specs/001-visual-branding/prompts/fix-header-hover-and-light-footer.md §1:
   the real defect here was [aria-current="page"]/.is-active still using
   --ink (near-black) text + a border-bottom underline, left over from
   before the header went dark burgundy — near-invisible against the new
   background and visually read as "a dark underline" against it. Also adds
   explicit :visited so no browser default can reintroduce it. */
.nav-link:visited {
    color: #f1f5f9;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link:active {
    color: var(--accent);
    text-decoration: none;
}
/* .is-active is JS-set via [aria-current="page"] (static/js/nav.js), not a
   per-page Askama field — see templates/layout.html's header comment. */
.nav-link[aria-current="page"],
.nav-link.is-active {
    color: var(--accent);
    font-weight: 600;
}

/* specs/004-identity-and-auth/spec.md GAP-02: .header-action now holds two
   items (the auth link + the BZO Diagnostic CTA) instead of one. */
.header-action {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
   §2: rounded pill treatment, superseding the dark-ink rectangular button
   (that dark-on-dark treatment no longer reads against the new burgundy
   header). */
.btn-header-utility {
    background-color: var(--primary);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.btn-header-utility:hover,
.btn-header-utility:focus-visible {
    background-color: #a83232;
}

/* Responsive Degradation Rule (spec.md §2.2): below md (768px), hide the
   inline nav links; keep the brand anchor and the utility CTA reachable.
   No hamburger/toggle — the footer's own nav columns remain the mobile path
   to Services/Industries/About/Contact, per the spec's own wording. */
@media (max-width: 47.99rem) {
    .header-nav { display: none; }
    /* TASK-006: the drawer carries "Contact Us"; the bar keeps Sign In. */
    .header-action .btn-header-utility { display: none; }
}

/* ---------- Mobile navigation (specs/010-visual-content-parity TASK-006) ---------- */
.nav-toggle {
    display: none;
    order: 3; /* after .header-action so the bar reads brand · Sign In · menu */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    margin-left: 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: #f1f5f9;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    position: fixed;
    inset-inline: 0;
    top: var(--header-h);
    z-index: 49;
    background-color: var(--secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem 1.5rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-0.75rem);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}
.mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.mobile-nav-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.mobile-nav-link,
.mobile-nav-link:visited {
    display: block;
    padding: 0.75rem 0;
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-link[aria-current="page"] {
    color: var(--accent);
}
.mobile-nav-cta {
    display: block;
    text-align: center;
    padding: 0.7rem 1.25rem;
}
@media (max-width: 47.99rem) {
    .nav-toggle { display: inline-flex; }
    .mobile-nav { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-nav, .nav-toggle-bar { transition: none; }
}

/* ---------- SiteFooter (specs/000-global-shell/spec.md §3.1-§3.2),
   superseded by prompts/04-live-logo-and-elevate-shell.md §4: dark 4-column
   surface + baseline bar. The prior light-themed rule set (.footer-mission,
   .sovereign-status, .status-indicator, .footer-col-title, .footer-links,
   .footer-trust-band, .trust-badge-line/.trust-pill/.trust-divider,
   .footer-bottom-row) is removed outright rather than left as dead CSS —
   confirmed via grep that none of those classes are referenced by any
   template anymore, since the footer isn't a reused partial. .footer-grid
   and .footer-legal-links (both pre-existing names, now redefined below
   in place) are the only two names this new block reuses from the old
   one. --- */
/* specs/001-visual-branding/prompts/fix-header-hover-and-light-footer.md §3:
   supersedes the dark navy footer (specs/000-global-shell/prompts/
   04-live-logo-and-elevate-shell.md §4's original #0b1329) with a clean
   light canvas, reconciled against the reference site. */
.global-footer-surface {
    background: #ffffff;
    color: #334155;
    border-top: 1px solid var(--border);
    padding: 4.5rem 0 2.5rem 0;
    margin-top: 5rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}
@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.1fr 1.6fr 1.3fr 1.4fr;
        gap: 3.5rem;
    }
}
/* specs/001-visual-branding/prompts/09-reconcile-footer-visual-parity.md §2:
   a real 5th column (Brand) added ahead of the prompt's own 4-column list,
   to carry the existing Standards & Truth column forward unmodified rather
   than delete it. */
@media (min-width: 1024px) {
    .footer-grid--five {
        grid-template-columns: 1.2fr 1fr 1.2fr 1.1fr 1.2fr;
        gap: 2.5rem;
    }
}
.footer-col-brand {
    display: flex;
    flex-direction: column;
}
.footer-brand-logo {
    align-self: flex-start;
    height: 34px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 1.25rem;
}
.footer-bio {
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
    font-size: 0.875rem;
    max-width: 20rem;
}
.footer-social-links {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.footer-social-links a {
    color: #64748b;
    display: inline-flex;
    transition: color 0.15s ease;
}
.footer-social-links a:hover {
    color: var(--primary);
}
/* specs/026-ui-content-kicker-audit T029: footer column headings are <h2>
   (were <h4>), so the page outline never skips a level into the footer. */
.footer-col h2 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    margin: 0 0 1.25rem 0;
}
.footer-col .footer-col-subhead { margin-top: 1.75rem; }
.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-link-list li {
    margin-bottom: 0.65rem;
}
.footer-link-list a {
    color: #475569;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.6;
    transition: color 0.15s ease;
}
.footer-link-list a:hover {
    color: var(--primary);
    text-decoration: none;
}
.footer-channel-lead {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
}
.footer-contact-details p {
    margin: 0.4rem 0;
}
/* specs/001-visual-branding/prompts/fix-header-hover-and-light-footer.md §3:
   necessary follow-on beyond the prompt's own listed selectors — this was
   near-white (#f8fafc), correct only against the dark footer it supersedes;
   left unchanged it would be invisible against the new white background. */
.footer-contact-details a {
    color: #0f172a;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}
.footer-contact-details a:hover {
    color: var(--primary, #8a2828);
}
.footer-hq {
    font-size: 0.825rem;
    color: #64748b;
}
.footer-badge-strip {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
/* specs/001-visual-branding/prompts/fix-header-hover-and-light-footer.md §3:
   the dark-chip override this footer's badges used against the navy
   background is removed — necessary follow-on the prompt didn't list;
   .trust-badge's own base styling (white fill, dark text) is already
   correct on the new light footer. */
.footer-baseline-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    gap: 1rem;
    color: #64748b;
    font-size: 0.825rem;
}
@media (min-width: 640px) {
    .footer-baseline-bar {
        flex-direction: row;
    }
}
.footer-legal-links {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-legal-links a {
    color: #64748b;
    text-decoration: none;
}
.footer-legal-links a:hover {
    color: #0f172a;
    text-decoration: underline;
}
/* specs/001-visual-branding/prompts/09-reconcile-footer-visual-parity.md §2:
   compliance callout card, colors matched to this footer's existing slate
   palette rather than the prompt's own pink-tinted (#faf8f8/#f1e5e5) card,
   which doesn't appear anywhere else on this light footer. */
.footer-soc-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
}
.footer-soc-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.875rem;
    margin: 0 0 0.25rem 0;
}
.footer-soc-subtitle {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}
.footer-soc-badges {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.footer-soc-badges img {
    height: 44px;
    width: 44px;
    object-fit: contain;
}

main { display: block; }

/* ---------- Focus visibility (DESIGN-SYSTEM.md DT-03) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ---------- Page rhythm sections (DESIGN-SYSTEM.md §3) ---------- */
/* Each PR region is full-width with its own background (the "zebra" alternation
   of Part 7); content inside is constrained to the --measure reading width. This
   is a resource/article page, not a sparse marketing page, so the "compact"
   (py-12 / 48px) tier of the Observed section-padding scale is used as the
   uniform per-region rhythm — the largest defined tier (py-20) is sized for
   card-grid marketing sections, not continuous reading content. */
.pr {
    padding-block: 3rem; /* py-12, 48px — DESIGN-SYSTEM.md §2.3 "compact subsection" tier */
    scroll-margin-top: 4rem; /* Observed article h2/h3 rule; clears the fixed header on #anchor jumps */
}
.pr.zebra { background: var(--muted); }

.pr .measure {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 1024px) {
    .pr .measure { padding-inline: 2rem; }
}

.pr h1 {
    font-size: 1.875rem;  /* text-3xl, mobile H1 */
    line-height: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
@media (min-width: 1024px) {
    .pr h1 { font-size: 2.25rem; line-height: 2.5rem; } /* text-4xl, desktop H1 */
}

.pr h2 {
    font-size: 1.5rem;   /* text-2xl, mobile H2 */
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
@media (min-width: 1024px) {
    .pr h2 { font-size: 1.875rem; line-height: 2.25rem; } /* text-3xl, desktop H2 */
}

.pr h3 {
    font-size: 1.25rem;  /* text-xl, mobile H3 */
    line-height: 1.75rem;
    font-weight: 600;
    margin-block: 1.5rem 0.5rem;
}
@media (min-width: 1024px) {
    .pr h3 { font-size: 1.5rem; line-height: 2rem; } /* text-2xl, desktop H3 */
}

.pr p { margin: 0 0 1rem; }
.pr p:last-child { margin-bottom: 0; }

/* ---------- Kicker: retired by specs/026-ui-content-kicker-audit ----------
   The uppercase pill above page headings (.kicker) is gone; categories now
   render below the <h1> as .hero-context. --kicker-* tokens stay in :root
   because .hero-context and other components still use them. */
/* specs/026-ui-content-kicker-audit (Option B): a resource or doc-track
   page's category renders as a quiet wayfinding line *below* the <h1>,
   never as a pill above it. Block-level so a centered hero (Unified Process)
   centers it too. Same tone as the kicker it replaces (--kicker-text). */
.pr .hero-context,
.doc-header .hero-context {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: 500;
    color: var(--kicker-text, #991b1b);
    margin: -0.25rem 0 1rem;
}
.hero-context a {
    color: inherit;
    text-decoration: none;
}
.hero-context a:hover,
.hero-context a:focus-visible {
    text-decoration: underline;
}

/* ---------- Hero (PR1) proposition paragraph — canonical "Lead paragraph" role ---------- */
.proposition {
    font-size: 1.25rem;   /* text-xl, "Lead paragraph / large body" per DESIGN-SYSTEM.md §2.1 */
    line-height: 1.75rem;
    color: var(--foreground);
}

.jump-link { font-size: 0.875rem; }
.jump-link a { color: var(--primary); text-decoration: underline; }
.jump-link a:hover { color: var(--accent-text); }

/* ---------- Body copy inside explanatory sections ---------- */
/* Observed: `article p { color: hsl(var(--muted-foreground)) }` — secondary/
   explanatory copy is muted-foreground, not full-contrast foreground. */
.pr2 p, .pr4 p, .pr6 p { color: var(--muted-foreground); }
.pr2 strong, .pr2 em { color: var(--foreground); }

/* ---------- Resource Reading Article Rhythm (brand/typography polish pass,
   specs/constitution/resource-page-contract.md) ----------
   Scoped to `.resource-page` — the root <article> class on every
   resource_page.html/resource_generic.html render — so this pass never
   touches the homepage's or PLG widget's shared .pr/.measure/.proposition
   rules, only actual reading-article pages. Each override below wins over
   its base rule by specificity (an added .resource-page ancestor class),
   not by source-order luck — see the refinement log for the full reasoning,
   including why the vertical/horizontal split below differs from a single
   `padding: 2.5rem 1.5rem` box: this codebase already separates vertical
   rhythm (.pr, section-level) from reading width (.measure, inner div), and
   stacking a second padding box on top of .pr's existing padding-block would
   double the vertical gap rather than match the requested value. */
.resource-page .pr { padding-block: 2.5rem; }
.resource-page .pr .measure {
    /* 45rem/720px (~72ch) — DESIGN-SYSTEM.md §2.1a "Superseded (2026-09-14)"
       and DT-13. Supersedes the prior 52.5rem/840px refinement: at the
       article's 18px lead size, 840px rendered closer to 85-95 characters
       per line, wider than the 65-75ch target this same document's own
       Body-copy measure rule (§2.1) already names. */
    max-width: 45rem; /* 720px */
    padding-inline: 1.5rem;
}

/* specs/002-corporate-surfaces/prompts/fix-tech-service.md §1, widened by
   prompts/09-card-borders-and-page-margins.md §1: the 45rem reading measure
   above is right for prose (standards/practices/artifacts), but too narrow
   for a commercial services page's card grids and schematic diagrams — those
   want the legacy production site's full container width and generous side
   gutters (the earlier 1.5rem/24px gutter still read as edge-to-edge on wide
   viewports). resource_generic.html swaps `.measure` for
   `.resource-container-wide` on `node.dimension_segment == "services"` only.
   box-sizing: border-box keeps the 75rem cap the actual rendered width
   (padding included) rather than 75rem of content plus padding on top. */
.resource-container-wide {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    padding: 2.5rem 3rem; /* generous 48px side gutters */
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .resource-container-wide {
        padding: 1.5rem 1.25rem;
    }
}
.resource-page .pr h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--ink, #0f172a);
    margin-bottom: 1.25rem;
}
.resource-page .proposition {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink-secondary, #334155);
    margin-bottom: 1.5rem;
}
.resource-page strong {
    color: var(--ink, #0f172a);
    font-weight: 600;
}
/* Prose anchors only: PR1 (.jump-link) and PR6 (.related-list) keep their
   own existing treatment (excluded by section), and any CTA button anywhere
   in the article keeps its button styling (excluded by class) — only plain
   in-body links (PR2-PR5, PR7, PR8 non-button links) get the refined brand
   color, underline removed at rest, underlined on hover. */
.resource-page .pr:not(.pr1):not(.pr6) a:not(.cta-primary):not(.cta-secondary) {
    color: var(--link-brand, #b91c1c);
    text-decoration: none;
}
.resource-page .pr:not(.pr1):not(.pr6) a:not(.cta-primary):not(.cta-secondary):hover {
    text-decoration: underline;
}

.classification-list, .diagnosis-list {
    padding-left: 1.25rem;
    color: var(--muted-foreground);
}
.classification-list li, .diagnosis-list li { margin-block: 0.5rem; }
.classification-list strong { color: var(--foreground); }

/* ---------- CTA buttons (DESIGN-SYSTEM.md §2.3/§4 — canonical button tokens) ---------- */
.cta-primary, .cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;    /* font-semibold */
    font-size: 0.875rem; /* text-sm */
    height: 2.75rem;     /* h-11, 44px — Observed hero button height */
    padding-inline: 1.5rem; /* px-6 */
    border-radius: calc(var(--radius) - 0.125rem); /* rounded-md, 10px — canonical button radius */
    transition: background-color 0.15s, border-color 0.15s, color 0.15s; /* functional hover only */
}
.cta-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
}
.cta-primary:hover { background: var(--secondary); border-color: var(--secondary); }
.cta-secondary {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--border);
}
.cta-secondary:hover { border-color: var(--primary); }

/* Homepage-hero-only secondary-CTA treatment — specs/001-visual-branding
   tasks.md T-22. Scoped to .hero-actions rather than restyling the shared
   .cta-secondary base rule: that class is also used by the PLG gap-assessment
   widget's Calculate/Export buttons, resource-page Download links, and the
   IPLG prompt-card Copy button (templates/_plg_gap_assessment_widget.html,
   resource_page.html, resource_generic.html, _prompt_card.html) — none of
   which this pass's stated scope (homepage layout + capability cards)
   covers; a global .cta-secondary change would have silently restyled all
   four. */
.hero-actions .cta-secondary {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}
.hero-actions .cta-secondary:hover { border-color: var(--primary); }

/* ---------- Artifact block (PR3) ---------- */
/* Observed, DESIGN-SYSTEM.md §2.3: `pre { background: card; border: border;
   border-radius: var(--radius); padding: 1rem }` — a card surface with a border,
   not a gray-tinted fill. */
.artifact-block {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.875rem;   /* text-sm, Observed code font-size */
    line-height: 1.25rem;
    color: var(--foreground);
    white-space: pre-wrap;
}

.disclaimer, .engagement-note, .diagnosis-caveat, .graph-pending {
    color: var(--muted-foreground);
    font-size: 0.875rem; /* text-sm */
}
.disclaimer code, .engagement-note code, .diagnosis-caveat code, .graph-pending code {
    background: var(--muted);
    border-radius: 0.25rem; /* rounded-sm equivalent for inline code, Observed */
    padding: 0.125rem 0.375rem;
    font-size: 0.875rem;
}

/* ---------- Provenance (PR7) ---------- */
.provenance dt {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--foreground);
    margin-top: 1rem;
}
.provenance dt:first-child { margin-top: 0; }
.provenance dd {
    margin-left: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}
.provenance ul { padding-left: 1.1rem; margin: 0.375rem 0 0; }
.provenance li { margin-block: 0.25rem; }

/* ---------- SiteFooter surface (specs/000-global-shell/spec.md §3.2) ---------- */
.site-footer {
    background: var(--surface-tint, #f8fafc);
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    padding-top: 3.5rem;
    padding-bottom: 2rem;
    font-size: 0.875rem;
}
.footer-inner { padding-block: 0; }

/* ---------- Lectio v1 widgets (LECTIO.md §9.1) ----------
   Polished a second time (brand/typography polish pass, docs/prompts/
   refinement-design-system.md entry 2): from a `bg-card`/12px-radius/1.5rem-
   padding EvidencePanel-shaped card into a tighter, tinted "discreet utility
   strip" — same restraint principle (DESIGN-SYSTEM.md §5), smaller footprint. */
.lectio-container {
    margin-block: 2rem;
    padding: 1rem 1.25rem;
    background: var(--surface-tint, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
}
.lectio-container h3 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 0.5rem;
}
.lectio-note {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin: 0 0 1rem;
}
.lectio-status {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    min-height: 1.25rem;
    margin: 0.5rem 0 0;
}
.lectio-signin-form,
.lectio-check-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.lectio-check-form { flex-direction: column; align-items: flex-start; }
.lectio-input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: 6px;
    color: var(--foreground);
    font-size: 0.875rem;
}
/* .lectio-btn is applied alongside .cta-secondary in lectio.js (unchanged —
   no JS edits in this pass); this rule intentionally overrides that outline
   treatment with a solid, tactile dark button for Lectio's own actions only
   — .cta-secondary elsewhere on the site (hero, PLG teaser) is untouched. */
.lectio-btn {
    flex: 0 0 auto;
    background: var(--ink, #0f172a);
    color: #fff;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    border: none;
    height: auto;
}
.lectio-btn:hover { background: var(--ink-hover, #1e293b); }
.lectio-checkbox-label,
.lectio-radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--foreground);
    margin-block: 0.375rem;
    cursor: pointer;
}
.lectio-question {
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.lectio-reaction-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.lectio-reaction-btn { height: 2.25rem; padding-inline: 1rem; }
.lectio-report-link {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

/* Evidence panel (DESIGN-SYSTEM.md §4 EvidencePanel — neutral variant, no
   positive/negative destructive framing needed for these two widgets). */
.evidence-panel {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 0.125rem);
    padding: 1.25rem;
    margin-top: 1.25rem;
}
.evidence-panel:first-of-type { margin-top: 1.5rem; }

/* EvidencePanel positive/negative modifiers (DESIGN-SYSTEM.md §4 EvidencePanel
   "Refined 2026-09-14" block). Only background/border/color change between
   variants — the base .evidence-panel rule above still owns padding/layout;
   a modifier never changes the semantic markup shape. Heading/icon color
   only — body <li> text inside either variant stays --foreground/
   --muted-foreground per the base rule (DESIGN-SYSTEM.md §2.2.2's
   --accent-foreground "restricted small text" precedent). */
.evidence-panel--negative {
    background: var(--evidence-negative-bg);
    border: 1px solid var(--evidence-negative-border);
    border-radius: var(--radius);
    color: var(--evidence-negative-text);
}
.evidence-panel--positive {
    background: var(--evidence-positive-bg);
    border: 1px solid var(--evidence-positive-border);
    border-radius: var(--radius);
    color: var(--evidence-positive-text);
}
/* specs/009-computing-paradigms/prompts/05-transcribe-page.md — two more
   EvidencePanel modifiers, same base rule, needed for the "Key Principle" /
   "Key Insight" / "Implementation Guidance" callouts and the recurring
   "Operational Truth" callouts on the four-paradigms resource page. Neither
   is a positive/negative evidence judgment, so neither reuses those two
   modifiers' semantics. */
.evidence-panel--key {
    background: var(--evidence-neutral-bg, rgba(15, 23, 42, 0.03));
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    color: var(--foreground);
}
.evidence-panel--truth {
    background: rgba(138, 40, 40, 0.04);
    border: 1px solid rgba(138, 40, 40, 0.18);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    color: var(--foreground);
}
.evidence-panel--truth h4,
.evidence-panel--key strong:first-child {
    color: var(--primary);
}

/* specs/009-computing-paradigms/prompts/05-transcribe-page.md — the four
   computing paradigms page's Core Assumptions / Testing Strategies / System
   Examples grids of small cards. Reuses .evidence-table's font scale, not
   a bespoke one. */
.paradigm-grid-2,
.paradigm-grid-3,
.paradigm-grid-4 {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.paradigm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.paradigm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paradigm-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.paradigm-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 0.125rem);
    padding: 1.1rem 1.25rem;
}
.paradigm-card h4 {
    margin: 0 0 0.4rem 0;
    color: var(--foreground);
    font-size: 0.95rem;
    font-weight: 700;
}
.paradigm-card p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    line-height: 1.55;
}
.evidence-panel--truth .paradigm-grid-2 { margin: 1.25rem 0; }

/* Lectio report tables */
.table-scroll { overflow-x: auto; }
.evidence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.evidence-table th,
.evidence-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.evidence-table th {
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
}
.evidence-table code { font-size: 0.75rem; }

/* ---------- PLG Pattern P1 — Gap Assessment widget (PLG.md §3.1) ----------
   Generous whitespace and calm typography over density: the output is a
   scorecard for a professional to act on, not a metrics dashboard. */
.plg-tool {
    margin-block: 1.5rem;
}
.plg-disclaimer {
    background: var(--muted);
    border-color: var(--border);
}
.plg-disclaimer p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.plg-privacy-note { margin-block: 1rem 1.5rem; }

.plg-family-group {
    border: none;
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    margin: 0;
}
.plg-family-group:first-of-type { border-top: none; padding-top: 0.5rem; }
.plg-family-group legend {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    padding: 0;
    margin-bottom: 1rem;
}

.plg-item { margin-bottom: 1.75rem; }
.plg-item:last-child { margin-bottom: 0; }
.plg-item-label {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin: 0 0 0.75rem;
    max-width: var(--measure);
}
.plg-clause {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Status toggle group — plain buttons rather than native radios, so every
   target meets the >=44px touch-target minimum without custom radio-input
   styling (DESIGN-SYSTEM.md §5: accessible, no decorative chrome). */
.plg-status-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.plg-status-btn {
    min-height: 2.75rem; /* 44px */
    padding-inline: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 0.25rem);
    cursor: pointer;
}
.plg-status-btn:hover { border-color: var(--primary); }
.plg-status-btn.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.plg-evidence-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    max-width: 28rem;
}
.plg-evidence-input { display: block; width: 100%; margin-top: 0.375rem; }

.plg-checklist > [data-plg-calculate] { margin-top: 1rem; }

/* Output */
.plg-output { margin-top: 2.5rem; }
.plg-overall h3 { margin: 0 0 0.5rem; }
.plg-overall-pct {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0;
}
.plg-overall-band { color: var(--muted-foreground); font-size: 0.875rem; margin: 0.25rem 0 0; }

/* CapabilityGrid (DESIGN-SYSTEM.md §4): grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
   — one rule set shared by the PLG widget's family grid, the homepage's
   six-cluster grid, and (specs/002-corporate-surfaces/prompts/fix-tech-service.md
   §3) the Technology Services 6-card grid — all the same CapabilityGrid
   component, back on this one shared class instead of a parallel
   `.capability-grid-commercial` variant. */
.plg-family-grid,
.capability-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    /* specs/002-corporate-surfaces/prompts/17-collapse-services-hub-gap.md §2:
       top margin zeroed — the heading (visible or visually-hidden) that
       always precedes this grid already supplies its own bottom margin, so
       a second top margin here only compounded the gap above it. */
    margin: 0 0 3.5rem 0 !important;
}
@media (min-width: 48rem) {
    .plg-family-grid, .capability-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
    .plg-family-grid, .capability-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Refined 2026-09-11 (docs/prompts/refinement-design-system.md,
   DESIGN-SYSTEM.md §4 CapabilityGrid & CapabilityCard): subtle elevation +
   tactile hover, superseding the flat border-only surface below. Transition is
   declared on the base rule (not only :hover) so the lift animates
   symmetrically in and out; :focus-within mirrors :hover for keyboard parity. */
.capability-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary, #8a2828); /* specs/001-visual-branding tasks.md T-22 */
    border-radius: 8px;
    padding: 1.5rem;
    /* specs/001-visual-branding tasks.md T-31: ink-tinted shadow, matching
       .metric-ledger's box-shadow — was rgba(0,0,0,0.04), a plain-black tint
       that had drifted from that already-established sibling value. */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    /* specs/002-corporate-surfaces/prompts/17-operational-truth-defects.md:
       a CSS Grid row already stretches every card in it to equal box height
       (e.g. /services row 3: Card 7 next to the taller Card 8), but a plain
       block .capability-card doesn't use that extra height — its badge row
       sits wherever the short copy above it ends, leaving dead space below.
       flex-column + flex-grow on the trailing <p> absorbs that space instead,
       so a trailing .trust-badge-strip lands flush at the card's bottom edge
       the way Card 8's checklist already does. */
    display: flex;
    flex-direction: column;
}
.capability-card:hover,
.capability-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: var(--border-hover, #cbd5e1);
    /* border-color above is a 4-side shorthand and would otherwise flatten
       the T-22 border-top accent to gray on hover — re-asserted after it. */
    border-top-color: var(--primary, #8a2828);
}
.capability-card h4 { margin: 0 0 0.375rem; font-size: 1rem; }
.capability-card h3 a,
.capability-card h4 a {
    color: var(--foreground);
    text-decoration: none;
    /* DESIGN-SYSTEM.md §2.1 "Card heading weight (Refinement 2026-09-14)" /
       DT-13 — a display-weight override for card-title links specifically;
       non-link, non-card H3/H4 headings stay at the base 600 canonical scale. */
    font-weight: 600; /* specs/015: card titles are 20px/28px w600 sitewide */
}
.capability-card h3 a:hover,
.capability-card h3 a:focus-visible,
.capability-card h4 a:hover,
.capability-card h4 a:focus-visible {
    color: var(--primary);
}
.plg-family-band { margin: 0; font-size: 0.875rem; font-weight: 600; }
.plg-band-ready { color: var(--success); }
.plg-band-partial { color: var(--warning); }
.plg-band-gap { color: var(--destructive-text); }
.plg-band-n-a { color: var(--muted-foreground); }

.plg-remediation ol { padding-left: 1.25rem; margin: 0.75rem 0 0; }
.plg-remediation li { margin-block: 0.5rem; font-size: 0.9375rem; line-height: 1.5rem; }

.plg-export-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ---------- IPLG PromptCard / TryWithAI (PLG.md §13.1/§13.2) ----------
   `.prompt-badge--*` reuses existing color tokens rather than inventing new
   ones (DT-07/DT-08, DESIGN-SYSTEM.md §2.2) — one token per class, distinct
   enough to tell the five apart at a glance. */
.try-with-ai { margin-block: 2rem; }
.try-with-ai-heading { margin-bottom: 0.5rem; }
.try-with-ai-tools { color: var(--muted-foreground); font-weight: 400; font-size: 0.875rem; }
.try-with-ai-purpose { color: var(--muted-foreground); margin-bottom: 1.25rem; }

.prompt-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.prompt-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    border: 1px solid transparent;
}
.prompt-badge--explore   { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.prompt-badge--apply     { background: rgba(138, 40, 40, 0.08); color: var(--primary); border-color: rgba(138, 40, 40, 0.2); }
.prompt-badge--challenge { background: rgba(199, 122, 10, 0.1); color: var(--warning); border-color: rgba(199, 122, 10, 0.25); }
.prompt-badge--generate  { background: rgba(242, 105, 13, 0.1); color: var(--accent-text); border-color: rgba(242, 105, 13, 0.22); }
.prompt-badge--audit     { background: rgba(92, 35, 35, 0.08); color: var(--secondary); border-color: rgba(92, 35, 35, 0.2); }
.prompt-version, .prompt-id {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.prompt-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.prompt-title { margin: 0 0 1rem; font-size: 1.0625rem; }

.prompt-meta { margin-bottom: 1.25rem; }
.prompt-meta dt {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--foreground);
    margin-top: 0.625rem;
}
.prompt-meta dt:first-child { margin-top: 0; }
.prompt-meta dd {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.prompt-body { margin-bottom: 1rem; }

.prompt-action-strip {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
/* Tactile confirmation state — mirrors .plg-status-btn.is-selected's pattern
   of a filled, high-contrast state rather than a color-only change. */
.prompt-copy-btn.is-copied {
    background: var(--success);
    border-color: var(--success);
    color: var(--primary-foreground);
}
.prompt-copy-status {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.prompt-verify-note ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}
.prompt-verify-note li { margin-bottom: 0.375rem; }
.prompt-verify-note li:last-child { margin-bottom: 0; }

.try-with-ai-handoff { margin-top: 1.5rem; }
.try-with-ai-handoff p { margin: 0 0 1rem; }

/* Print stylesheet — the "printable HTML" export leg of PLG.md D3, without a
   separate generated file: the live page itself is the printable surface. */
@media print {
    .site-header, .site-footer, .plg-checklist, .plg-export-row,
    [data-plg-handoff-link] { display: none !important; }
    .plg-output { margin-top: 0; }
    body { padding-top: 0; }
}

/* ---------- Campaign banner (DISCOVERY.md §7.2 contextual message matching) ----------
   Subtle and additive by design: a left accent rule and muted-tone card, not
   a promotional strip -- the canonical content is unchanged underneath it. */
.campaign-banner {
    margin: 1.5rem auto;
    max-width: var(--measure);
    padding: 0.875rem 1.125rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: calc(var(--radius) - 0.25rem);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.4rem;
}

/* ---------- Small utilities ---------- */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.related-list { padding-left: 1.1rem; margin: 0.75rem 0 0; }
.related-list li { margin-block: 0.375rem; }
.related-list a { color: var(--primary); }

/* ---------- Admin: /admin/signals (GTM Signals + Lightweight CRM slice) ----------
   Same CapabilityGrid / EvidencePanel patterns as the PLG widget — an
   internal handoff view, not a metrics dashboard. */
.admin-signals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 48rem) { .admin-signals-grid { grid-template-columns: 1fr 1fr; } }

.admin-signal-card h3 { margin: 0 0 0.25rem; }
.admin-lifecycle-badge {
    display: inline-block;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.admin-signal-contact {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
}
.admin-signal-state {
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
}
.admin-signal-need {
    font-size: 0.9375rem;
    margin: 0 0 1rem;
}
.admin-signal-evidence h4 {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
}
.admin-signal-evidence p { margin: 0; font-size: 0.875rem; }
.admin-signal-details {
    margin-top: 1rem;
    font-size: 0.8125rem;
}
.admin-signal-details dt {
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}
.admin-signal-details dt:first-child { margin-top: 0; }
.admin-signal-details dd { margin: 0.125rem 0 0; }
.admin-evidence-json {
    word-break: break-all;
    font-size: 0.75rem;
}

/* ---------- Homepage (2026-09-11, sovereign public shell: templates/index.html) ---------- */

/* Hero (DESIGN-SYSTEM.md §4 Hero) — solid --background variant (the simpler
   of the two permitted Hero backgrounds; no --gradient-hero token added this
   pass, keeping the restraint bar high on the first real homepage). */
.hero-content {
    max-width: 42rem;
}
.hero h1 {
    font-size: 2.25rem;   /* text-4xl, mobile Display per canonical heading table */
    line-height: 2.5rem;
    font-weight: 700;
    margin: 1rem 0 1.25rem;
}
@media (min-width: 1024px) {
    .hero h1 { font-size: 3.75rem; line-height: 1; } /* text-6xl, desktop Display */
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

/* Hero two-column desktop layout + verification panel — specs/001-visual-branding
   tasks.md T-21. Single column below 1024px so .hero-spec-card stacks under
   the headline on mobile/tablet rather than competing for width. */
.hero-grid {
    display: block;
}
@media (min-width: 1024px) {
    .hero-grid {
        display: grid;
        grid-template-columns: 1.25fr 0.75fr;
        gap: 3rem;
        align-items: center;
    }
}
.hero-spec-card {
    margin-top: 2.5rem;
    background: #ffffff;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
}
@media (min-width: 1024px) {
    .hero-spec-card { margin-top: 0; }
}
.hero-spec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.badge-status {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--success, #128A3E);
    background: rgba(18, 138, 62, 0.08);
    border: 1px solid rgba(18, 138, 62, 0.2);
    border-radius: 4px;
    padding: 0.125rem 0.5rem;
}
.hero-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.hero-spec-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.hero-spec-list li span:first-child {
    color: var(--text-muted, #64748b);
}
.hero-spec-list li strong {
    color: var(--ink, #0f172a);
    font-weight: 600;
    text-align: right;
}

/* Minimal text-size/color utilities — introduced for .hero-spec-card, reused
   wherever a font-mono label needs the same small/muted treatment. */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-muted { color: var(--text-muted, #64748b); }

/* SectionIntro (DESIGN-SYSTEM.md §4 SectionIntro) */
.section-intro { max-width: 48rem; margin-bottom: 0.5rem; }
.section-intro p { color: var(--muted-foreground); margin-top: 0.75rem; }

/* ProofGrid & Statistic (DESIGN-SYSTEM.md §4 ProofGrid) — the authority /
   discipline strip: <dl> of four named, concrete disciplines, not an
   unsourced superlative (BRANDING.md §8). */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 0;
    padding: 0;
}
@media (min-width: 48rem) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.statistic { display: flex; flex-direction: column; gap: 0.25rem; }
.statistic dt {
    font-size: 1.5rem;   /* text-2xl */
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}
.statistic dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
/* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
   §4: bigger, bolder numbers inside the metric-ledger panel specifically —
   scoped rather than raising .statistic dt's base size, since .statistic is
   also used in contexts this pass doesn't otherwise touch. */
.metric-ledger .statistic dt {
    font-size: 2.25rem;
    font-weight: 800;
}

/* CapabilityCard summary copy on the homepage cluster grid */
.capability-card p { margin: 0; font-size: 0.875rem; color: var(--text-card-secondary, #475569); flex-grow: 1; }

/* PLG diagnostic teaser card — same refined card surface as CapabilityCard,
   without the hover-lift (it's a single featured card, not a grid item). */
.plg-teaser-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 2rem;
    max-width: 42rem;
}
.plg-teaser-card h2 { margin-bottom: 0.75rem; }
.plg-teaser-card p { color: var(--muted-foreground); margin-bottom: 1.5rem; }

/* CTASection (DESIGN-SYSTEM.md §4 CTASection) — Page-rhythm Part 8 */
.cta-section .wrap {
    max-width: 42rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.cta-section p { color: var(--muted-foreground); margin: 0; }

/* ---------- Responsive: mobile heading compaction (DESIGN-SYSTEM.md §2.4) ---------- */
@media (max-width: 39.99rem) { /* below sm: 640px */
    .pr { padding-block: 2rem; }
    .cta-primary, .cta-secondary { width: 100%; }
    .lectio-signin-form { flex-direction: column; align-items: stretch; }
    .lectio-reaction-row { flex-direction: column; }
}
/* --- 001 Visual Branding (specs/001-visual-branding, INV-VB-05..08) ---
   The body-background and heading-weight duplicates that used to live here
   were merged into their single earlier rule blocks (main.css:~104, ~118) —
   see specs/001-visual-branding/tasks.md T-02/T-03. The `.evidence-panel`
   block that used to live here (a flat blue/amber left-border variant, no
   spec/constitution provenance) was removed — see T-06: the constitution-
   documented positive/negative/neutral variant system at main.css:699
   (specs/constitution/design-system.md §4) is authoritative; no template
   used the removed block's `.inference` modifier, so nothing depended on it. */
/* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
   §1: supersedes INV-VB-06's ambient engineering-grid watermark — removed
   per the reconciliation against the reference site's clean enterprise
   background. Class name kept (referenced by templates/index.html and
   others, out of this pass's target-file list) so no template edit is
   needed; it now resolves to plain white instead of a grid texture. */
.bg-matte-blueprint {
  background-color: #ffffff;
}
.article-measure {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- specs/001-visual-branding/spec.md §2.3 Metric Ledger & Editorial
   Typography Hierarchy (tasks.md T-15/T-16/T-17) --- */
.tnum {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* .metric-ledger supersedes .proof-grid on templates/about.html's stat block
   (tasks.md T-18) — the class is swapped, not stacked: .metric-ledger's own
   grid-template-columns would otherwise fight .proof-grid's for the same
   property at equal specificity. Made mobile-first responsive to match this
   file's own established .proof-grid/.admin-signals-grid convention (2
   columns by default, 4 at >=48rem) — the 4-column-always version given in
   the originating task spec would cram four columns onto a phone-width
   screen; spec.md §2.3 doesn't actually require non-responsive behavior,
   only the 4-column *desktop* layout the "4-column metric strip" phrase
   describes. */
.metric-ledger {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary, #8a2828);
    /* specs/001-visual-branding/prompts/07-reconcile-visual-parity-with-reference.md
       §4: larger radius + softer, more elevated shadow — reconciled against
       the reference site's card treatment. */
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* specs/002-corporate-surfaces/prompts/17-collapse-services-hub-gap.md §2:
       bottom clamped to 40px so this box's own margin doesn't compound with
       the .pr section padding-block on either side of it. */
    margin: 1.5rem 0 2.5rem 0 !important;
}
@media (min-width: 48rem) { .metric-ledger { grid-template-columns: repeat(4, 1fr); } }
.metric-ledger > div {
    padding: 2rem 1.25rem;
    border-right: 1px solid #f1f5f9;
}
.metric-ledger > div:last-child {
    border-right: none;
}

.section-separator {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 3.5rem 0;
}

/* --- specs/002-corporate-surfaces/prompts/09-card-borders-and-page-margins.md §2 ---
   .capability-checklist is only used on the Technology Services page, so
   this is a direct replacement, not an additive variant, superseding
   prompts/fix-tech-service.md §2/§3 and
   prompts/svg-clamp-ui-defect-fix-tech-services.md's versions of the same
   rules. Elevates the 6 capability areas into bordered cards with a tinted
   icon badge (matching the legacy design reference) instead of unbordered
   floating text; the SVG clamps stay strict `!important` px values for the
   same reason as before — a viewBox-only inline SVG falls back to its
   intrinsic 300x150 box in some contexts. */
.capability-card-commercial {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.capability-card-commercial:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

/* Icon badge container: a tinted square behind the category icon, not a
   bare icon floating on the card background. */
.capability-card-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    background: #fdf2f2 !important;
    border: 1px solid #fee2e2 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.25rem !important;
}
.capability-card-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    color: var(--primary, #8a2828) !important;
}

.capability-card-commercial h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.6rem 0;
}
/* .pr p:last-child (0,2,1) would otherwise zero this margin; the paired
   :last-child selector matches its specificity and wins by source order. */
.capability-card-commercial p,
.capability-card-commercial p:last-child {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 1.25rem 0;
}
.capability-card-commercial p {
    flex-grow: 1;
}

/* specs/002-corporate-surfaces/prompts/16-operational-truth-as-card-eight.md §2:
   Card 8 on /services — Operational Truth™ integrated into the same
   .capability-grid as the 7 commercial service cards, with a 3px top accent
   (vs. the other .capability-card-commercial cards' 2px, see the shared rule
   above) and a compact badge row marking it as doctrine, not a service. */
/* specs/002-corporate-surfaces/prompts/17-operational-truth-defects.md:
   combined-class selector (specificity 0,2,0) rather than bare
   .capability-card-doctrine (0,1,0) — guarantees this border-top wins over
   the base .capability-card-commercial rule's `border: 1px solid ... !important`
   shorthand regardless of stylesheet source order, instead of relying on a
   same-specificity !important tie-break. */
.capability-card-commercial.capability-card-doctrine {
    border-top: 3px solid var(--primary, #8a2828);
    background: #ffffff;
}
/* specs/002-corporate-surfaces/prompts/24-execute-homepage-elevation-tasks.md:
   generalized from .capability-card-doctrine .card-badge-strip (was scoped
   to that one parent) to a bare top-level rule — the homepage's .domain-card
   and its plain (non-doctrine) .capability-card-commercial snapshot cards
   reuse the same compact-badge-row pattern; the scoped version would have
   left those unstyled. Computed style is unchanged for the existing Card 8
   usage this rule already covered. */
.card-badge-strip {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.capability-card-doctrine .trust-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

.capability-checklist {
    list-style: none !important;
    padding: 1rem 0 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
}
.capability-checklist-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-size: var(--fs-sm) !important;      /* specs/015: 14px/20px, w400, muted */
    line-height: var(--lh-sm) !important;
    color: var(--muted-foreground) !important;
    font-weight: 400 !important;
    border-left: none !important; /* no erratic vertical divider bars */
    padding-left: 0 !important;
}
/* Matched three ways (bare `.checklist-icon`, since that class sits
   directly on the `<svg>` in this page's markup, plus two descendant
   fallbacks) so a future markup change can't silently drop the clamp. */
.checklist-icon,
.capability-checklist-item svg.checklist-icon,
.capability-checklist-item svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    color: var(--primary, #8a2828) !important;
}

/* .cta-secondary--outline: the same white-fill/slate-border secondary
   button treatment specs/001-visual-branding T-22 scoped to .hero-actions
   only — generalized here as a reusable modifier so a second call site
   (this CTA strip) doesn't need its own one-off descendant selector. The
   original .hero-actions .cta-secondary rule is left untouched; this is
   additive, not a replacement. */
.cta-secondary--outline {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}
.cta-secondary--outline:hover { border-color: var(--primary); }

/* --- specs/000-global-shell/prompts/01-global-shell-elevation.md ---
   Global conversion & badge primitives. Two deliberate deviations from the
   prompt's literal CSS, both to avoid a duplicate parallel system next to
   something that already exists and is already in use:
   - No .btn-solid-primary/.btn-outline-secondary: functionally near-identical
     to the existing .cta-primary/.cta-secondary(--outline) (primary-colored
     button, white text, hover-darken / white-fill outline button) already
     used across templates/ and src/resources.rs. .conversion-panel's own
     markup should use .cta-primary/.cta-secondary.cta-secondary--outline,
     not a second button vocabulary.
   - .trust-badge-strip/.trust-badge are kept, but as a genuinely distinct
     visual variant (bordered white pill) from the existing footer
     .trust-badge-line/.trust-pill (tinted, borderless pill) — not a
     replacement for the footer, which already uses its own pattern
     correctly. Intended for badge rows outside the footer (e.g. a resource
     page's compliance-framework chips), not wired into any specific page
     by this pass — no target page was named for it. */
.trust-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
/* Streamlined conversion footer (prompts/08-elevate-tech-service.md): when
   the badge strip is nested at the top of .conversion-panel as one unified
   block, drop its own top margin — the panel's padding already provides it. */
.conversion-panel > .trust-badge-strip {
    margin-top: 0;
    margin-bottom: 1.25rem;
}
/* specs/002-corporate-surfaces/prompts/10-execute-full-services-suite-parity.md
   §3: the /services hub's 7 service-line cards each carry one framework tag
   — tighter than the default 1.5rem stacked margin fits the card's own
   .capability-card padding rhythm better. */
.capability-card > .trust-badge-strip {
    margin: 0.75rem 0 0;
}
.trust-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
    /* specs/002-corporate-surfaces/prompts/17-operational-truth-defects.md §1:
       a narrow flex track (e.g. .card-badge-strip on Card 8, or a badge next
       to a long sibling) could otherwise wrap a multi-part badge like
       "NIST SP 800-137" across two lines. */
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* Card titles on the /services hub are links (see .capability-card h3 a
   above); Card 8 specifically also renders through .capability-card-commercial,
   whose h3 has no link-specific rule of its own — remove the raw browser
   underline there and restore it only on hover, matching the plain
   .capability-card link treatment already used by cards 1-7. */
.capability-card-commercial h3 a {
    text-decoration: none !important;
    color: inherit;
}
.capability-card-commercial h3 a:hover {
    color: var(--primary, #8a2828);
    text-decoration: underline;
}

/* .conversion-panel: distinct from the existing .plg-teaser-card (which it
   otherwise closely resembles) by its 3px top accent bar, matching the
   .metric-ledger/.capability-card top-accent convention — a slightly more
   "engineering ledger"-styled CTA box, not a duplicate of plg-teaser-card's
   plainer treatment. */
.conversion-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary, #8a2828);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    margin-top: 3.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.conversion-panel h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #0f172a;
}
.conversion-panel p {
    color: #475569;
    max-width: 38rem;
    margin-bottom: 1.5rem;
}
.cta-button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- specs/002-corporate-surfaces/prompts/fix-tech-service.md §4 ---
   Frame for local SVG/image technical figures — first use is the Technology
   Services client-delivery architecture schematic. The caption is now a two-
   part structure (.caption-primary marker+title, .caption-metadata tags +
   status), superseding the single-row marker/status-pill layout from
   prompts/08-elevate-tech-service.md. */
.technical-figure {
    margin: 2.5rem 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.technical-figure img, .technical-figure svg {
    width: 100%;
    height: auto;
    display: block;
}
.technical-figure-caption {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.caption-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #1e293b;
}
.caption-marker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    color: var(--primary, #8a2828);
}
.caption-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.caption-metadata {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.caption-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}
.caption-status {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    background: #fef2f2;
    color: #991b1b;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    border: 1px solid #fecaca;
    letter-spacing: 0.02em;
}

/* --- specs/002-corporate-surfaces/prompts/19-implement-about-contact-css.md
   (tasks.md Part G, T-45) — Contact & About Corporate Surfaces primitives.
   No conflicting class names existed. Only the CSS is added by this pass;
   templates/about.html and templates/contact.html are rebuilt to consume
   these classes in a later task (T-46/T-47). --- */

.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 2.5rem 0 3.5rem 0;
}
@media (min-width: 900px) {
    .contact-layout-grid {
        grid-template-columns: 1.25fr 1fr;
        gap: 3.5rem;
    }
}

.contact-info-panel {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.contact-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary, #8a2828);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.contact-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.25rem 0;
}

.contact-channel-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.contact-channel-row:last-child {
    margin-bottom: 0;
}

.contact-channel-icon {
    width: 22px;
    height: 22px;
    color: var(--primary, #8a2828);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.contact-channel-detail dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
}

.contact-channel-detail dd {
    margin: 0.15rem 0 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}
.contact-channel-detail dd a {
    color: inherit;
    text-decoration: none;
}
.contact-channel-detail dd a:hover {
    color: var(--primary, #8a2828);
    text-decoration: underline;
}

/* Contact Native Form Controls */
.contact-form-container {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04);
}

.form-field-group {
    margin-bottom: 1.25rem;
}

.form-field-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.4rem;
}

.form-row-dual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .form-row-dual {
        grid-template-columns: 1fr 1fr;
    }
}

.form-control-input,
.form-control-select,
.form-control-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.925rem;
    background: #ffffff;
    color: #0f172a;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control-input:focus,
.form-control-select:focus,
.form-control-textarea:focus {
    border-color: var(--primary, #8a2828);
    outline: none;
    box-shadow: 0 0 0 3px rgba(138, 40, 40, 0.1);
}

/* --- specs/002-corporate-surfaces/prompts/elevate-about-shahid-voice.md ---
   /about elevation: a flat sequence of full-width components (no .pr/.zebra
   section wrappers) instead of the prior multi-section layout — each of
   that layout's sections' own 3rem padding-block was compounding into the
   "excessive vertical whitespace" this pass exists to remove. No naming
   collisions existed for any class below. */
.about-hero-section {
    margin-bottom: 2rem;
}
.about-hero-section h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0.5rem 0 1rem 0;
}
.about-hero-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #334155;
    max-width: 58rem;
    margin-bottom: 1.25rem;
}
.about-hero-contrast {
    font-size: 0.975rem;
    line-height: 1.65;
    color: #475569;
    max-width: 58rem;
    background: #f8fafc;
    border-left: 3px solid var(--primary, #8a2828);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

/* Eliminate dead space between blocks */
.about-section-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2.5rem 0 1.25rem 0;
}

/* The Five 'Ilities' Grid */
.ilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0 2.5rem 0;
}
@media (min-width: 640px) {
    .ilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .ilities-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
.ility-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary, #8a2828);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.ility-card dt {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}
.ility-card dd {
    margin: 0;
    font-size: 0.825rem;
    color: #64748b;
    line-height: 1.45;
}
.ility-artifact {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.725rem;
    color: var(--primary, #8a2828);
    background: #fdf2f2;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #fee2e2;
}

/* AI-Native Operating Model Box */
.ai-delivery-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.ai-delivery-box h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
}
.ai-delivery-box p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.ai-delivery-box .cta-button-group {
    margin-top: 1.25rem;
}

/* This site's CSP (style-src 'self', src/main.rs's security_headers_mw) has
   no 'unsafe-inline'/nonce exception, so an inline style="" attribute is
   silently dropped by the browser — same class of defect as an inline
   <script> under script-src 'self'. The prompt's own about.html draft used
   inline style="" on three elements; these two classes replace those
   instead (the metric-ledger and cta-button-group instances below needed no
   replacement — their default margins already matched or were close enough
   that a one-off override wasn't worth a fourth micro-class). */
.about-timeline-figure {
    margin: 0 0 3rem 0;
}
.about-ilities-intro {
    font-size: 0.975rem;
    color: #475569;
    max-width: 54rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* --- specs/000-global-shell/prompts/03-elevate-brandmark-logo-and-strip-tagline.md
   §3 — Homepage hero and domain-specialization grid primitives, tightened
   by specs/002-corporate-surfaces/prompts/24-execute-homepage-elevation-tasks.md
   (hero padding/h1 sizing only — .domain-grid/.domain-card were already an
   exact match, no change needed there) and wired into templates/index.html
   by that same pass. --- */
/* specs/010-visual-content-parity TASK-008: full-bleed photographic hero.
   The image is declared here, never via an inline style="" (CSP
   style-src 'self'). The three-stop scrim keeps white type legible over the
   photo. The block replaces the earlier light-surface hero rules. */
.home-hero-surface {
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.65)),
        url('/static/images/canyon-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1c1917; /* shown while the image loads */
    color: #ffffff;
    text-align: center;
}
.home-hero-inner {
    padding-block: 4.5rem 4rem;
}
.home-hero-surface h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0.75rem auto 1.25rem auto;
    max-width: 58rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (min-width: 48rem) {
    .home-hero-surface h1 { font-size: 3.25rem; }
}
@media (min-width: 64rem) {
    .home-hero-surface h1 { font-size: 4rem; }
}
.home-hero-accent {
    color: #fdba74; /* fallback where background-clip:text is unsupported */
    background-image: linear-gradient(90deg, #fdba74, #fed7aa, #fde68a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-hero-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 46rem;
    margin: 0 auto 2rem auto;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* Glass pill badge, scoped to the hero: .trust-badge is shared sitewide. */
.home-hero-surface .trust-badge {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.5rem;
    /* base .trust-badge is nowrap !important; this long label must wrap on phones */
    white-space: normal !important;
    text-align: center;
    line-height: 1.35;
}
.home-hero-surface .cta-button-group { justify-content: center; }
/* Hero CTA pair: solid white primary + glass outline secondary (SOURCE Home). */
.home-hero-surface .cta-primary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
    border-radius: 6px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    height: auto;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
}
.home-hero-surface .cta-primary:hover {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}
.home-hero-surface .cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #ffffff;
    border-radius: 6px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    height: auto;
}
.home-hero-surface .cta-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}
.home-hero-surface .cta-primary:focus-visible,
.home-hero-surface .cta-secondary:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* TASK-009: proof / differentiator glass card inside the hero. */
.home-proof-panel {
    display: grid;
    gap: 2rem;
    max-width: 56rem;
    margin: 3.5rem auto 0 auto;
    padding: 2rem;
    text-align: left;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
}
@media (min-width: 48rem) {
    .home-proof-panel { grid-template-columns: 1fr 1fr; align-items: center; padding: 3rem; }
}
.home-proof-panel h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem 0;
}
.home-proof-panel p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1rem 0;
}
.home-proof-panel strong { color: #ffffff; }
.home-proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.home-proof-item { display: flex; align-items: flex-start; gap: 1rem; }
.home-proof-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fdba74;
}
.home-proof-icon svg { width: 20px; height: 20px; }
.home-proof-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}
.home-proof-item p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); margin: 0; }

.domain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin: 1.5rem 0 3.5rem 0;
}
@media (min-width: 768px) {
    .domain-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.domain-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary, #8a2828);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.domain-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0.75rem 0 0.5rem 0;
}
.domain-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

/* specs/002-corporate-surfaces/prompts/24-execute-homepage-elevation-tasks.md:
   this site's CSP (style-src 'self', src/main.rs's security_headers_mw) has
   no 'unsafe-inline'/nonce exception, so the browser drops inline style=""
   attributes — the same class of defect fixed for /about in
   prompts/elevate-about-shahid-voice.md. The prompt's draft used inline
   style on the metric-ledger spacing and the services-gateway header row;
   replaced with these two classes instead. The conversion-panel's own
   inline `margin-top: 3.5rem` needed no replacement — that already matches
   .conversion-panel's existing default margin-top exactly (see that rule
   above), so the inline override was redundant and simply dropped. */
.metric-ledger.home-metric-ledger {
    margin: 2rem 0 3rem 0 !important;
}
.home-services-more {
    margin: -2rem 0 3rem 0;
    font-size: 0.9rem;
    color: var(--text-muted, #64748b);
}
.home-services-more a { color: var(--primary); text-decoration: none; }
.home-services-more a:hover { text-decoration: underline; }
.home-services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 3.5rem 0 1.5rem 0;
}
.home-services-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
}
.home-services-header p {
    font-size: 0.925rem;
    color: #64748b;
    margin: 0;
}

/* ---------- Netspective Minimalist Auth Modal ----------
   specs/004-identity-and-auth/prompts/04-implement-branded-auth-modal.md
   (original) + prompts/01-minimalist-modal-imp.md (T-AUTH-18: re-skin to a
   modern, minimalist card matching reference experiences like Claude/
   Linear — uniform subtle border in place of the old 3px burgundy top
   accent, blurred backdrop, tighter padding). Every rule here is a real
   class — this site's CSP (style-src 'self', no unsafe-inline) silently
   drops inline style="" attributes, so nothing here is ever written that
   way. */
.auth-dialog {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    max-width: 24rem;
    width: 92%;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: #0f172a;
}
.auth-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
}
.auth-dialog-card {
    padding: 2rem 1.75rem;
    position: relative;
    text-align: center;
}
.auth-dialog-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease;
}
.auth-dialog-close:hover {
    color: #0f172a;
}
.auth-modal-title {
    margin: 0 0 0.5rem 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.auth-modal-description {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}
.auth-field {
    margin-bottom: 1rem;
    text-align: left;
}
.auth-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.35rem;
}
.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #0f172a;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input::placeholder {
    color: #94a3b8;
}
.auth-input:focus {
    outline: none;
    border-color: #8a2828;
    box-shadow: 0 0 0 3px rgba(138, 40, 40, 0.12);
}
.auth-submit-btn {
    width: 100%;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 0.25rem;
}
/* Scoped rather than changing the shared .cta-primary:hover (used sitewide)
   — this specific button's requested hover tone differs from that base
   rule's --secondary. */
.auth-dialog .auth-submit-btn:hover {
    background-color: #a83232;
}
/* T-AUTH-17: the Terms/Privacy disclaimer under the email step's submit
   button. */
.auth-modal-disclaimer {
    margin: 1rem 0 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #94a3b8;
}
.auth-modal-disclaimer a {
    color: #64748b;
    text-decoration: underline;
}
.auth-modal-disclaimer a:hover {
    color: #0f172a;
}
/* T-AUTH-17: "Didn't receive it? Resend / use a different email" action
   row on the #auth-step-sent confirmation. */
.auth-modal-action-row {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}
.auth-inline-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #8a2828;
    text-decoration: underline;
    cursor: pointer;
}
.auth-inline-btn:hover {
    color: #a83232;
}
.auth-success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.25rem;
    font-weight: 700;
}
.auth-sent-target {
    color: #0f172a;
}

/* ---------- specs/017-unified-process-card/prompts/07-card-redesign.md ----------
   Live-parity landing-page components for the Unified Process article body
   (resources.rs's shared `NUP_LANDING_BODY_HTML`, rendered on both
   `/resources/unified-process` and `/resources/practices/netspective-
   unified-process`). Supersedes 05/06's `.nup-*` values with this round's
   fuller, exact-value spec, and replaces the 2-card `.up-delivery-grid`/
   `.up-delivery-card` pair with the richer `.nup-arch-*` "Dual Delivery
   Architecture" section. Zero inline `style=""` — this site's CSP
   (style-src 'self') silently drops it.

   `.nup-hero-surface`/`.nup-hero-title`/`.nup-hero-subhead`/`.nup-pill-badge`
   are real class rules below, but reach the page through the
   `[data-resource-id=...]` attribute-selector overrides at the bottom of
   this block rather than a class attribute in body_html — see
   NUP_LANDING_BODY_HTML's doc comment in resources.rs for why: `node.h1`/
   `node.proposition` feed the template's fixed, always-renders-before-
   body_html PR1 section, and duplicating the H1 there and in body_html
   would be worse (bad for accessibility/SEO) than reusing PR1's own
   elements via a scoped override. The pill badge icon is injected by
   `templates/resource_generic.html`'s existing kicker-icon-by-slug branch
   (06-text-font-fix.md), not a `<div class="nup-pill-badge">` in body_html
   as this round's own instruction literally shows — `node.kicker` is
   plain, auto-escaped text, so an `<svg>` can't live inside it; nothing
   about this round's actual pixel values changes because of that, only
   where the markup that carries them lives. */
.nup-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.nup-hero-actions--center {
    justify-content: center;
}
.nup-hero-lead {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.65;
    max-width: 700px;
    margin: 0 auto 2.25rem auto;
}
/* Button typography & overrides (06/07, "CRITICAL"): `!important` on the
   core color/decoration properties to guarantee these resist any other
   rule in the cascade (the global `a { color: inherit; }` base rule
   included) regardless of load order — an explicit, scoped exception to
   this file's normal no-!important style, not a default to reach for
   elsewhere. */
.nup-btn-primary,
a.nup-btn-primary,
a.nup-btn-primary:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #8a2828 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(138, 40, 40, 0.25);
    transition: transform 0.15s ease, background-color 0.15s ease;
}
a.nup-btn-primary:hover {
    background-color: #702020 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.nup-btn-secondary,
a.nup-btn-secondary,
a.nup-btn-secondary:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
a.nup-btn-secondary:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    text-decoration: none !important;
}
/* Hero pill badge's `award` icon (templates/resource_generic.html's PR1
   kicker-icon branch, by slug) — stroke color set via CSS, which takes
   precedence over the SVG's own `stroke="currentColor"` presentation
   attribute in the cascade. */
.nup-badge-svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke: #8a2828;
    margin-right: 0.3rem;
    vertical-align: -0.1rem;
}

/* Unified Process Delivery Tracks (specs/019) — formerly "Dual Delivery
   Architecture", which replaced 05/06's simpler 2-card `.up-delivery-*`
   grid. Kicker, title, lead, and one tag-and-checklist card per entry in
   `NUP_DELIVERY_TRACKS` (src/resources.rs): 1 column below the md
   breakpoint, 3 equal columns from 48rem (768px); a 4th+ track wraps. */
.nup-arch-section {
    max-width: 1140px;
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: left;
}
.nup-arch-title {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #0b0f19;
    letter-spacing: -0.025em;
    margin: 0 0 1rem 0;
}
.nup-arch-lead {
    font-size: 1.0625rem;
    color: #475569;
    line-height: 1.65;
    max-width: 820px;
    margin: 0 0 2.5rem 0;
}
.nup-arch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 48rem) {
    .nup-arch-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.nup-arch-card {
    background: var(--card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nup-arch-card:hover {
    border-color: rgba(138, 40, 40, 0.35);
    box-shadow: 0 8px 24px rgba(138, 40, 40, 0.06);
}
/* Tablet: three columns at 768–1023px leave little text width. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .nup-arch-card {
        padding: 1.5rem 1.25rem;
    }
}
.nup-arch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.nup-arch-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}
.nup-arch-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b0f19;
    margin: 0 0 0.85rem 0;
}
.nup-arch-card-desc {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}
.nup-arch-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}
.nup-arch-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
}
.nup-arch-check-glyph {
    color: var(--primary);
    font-weight: 700;
}
.nup-arch-btn,
a.nup-arch-btn,
a.nup-arch-btn:visited {
    align-self: flex-start;
    background-color: #ffffff !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
a.nup-arch-btn:hover {
    border-color: #8a2828;
    color: #8a2828 !important;
    background-color: #fdf2f2 !important;
}

/* High-specificity centered lead block (shared with `REGULATED_SDLC_STANDARD`'s
   own intro section) — `!important` throughout so this always centers
   regardless of any ancestor prose styling (`#pr2-explanation p` sets its
   own max-width/font-size elsewhere in this file; this block must win).
   specs/017-unified-process-card/prompts/08-fix-space-text-color.md:
   tightened vertical spacing and added the light burgundy card treatment. */
.prose .nup-center-lead, .resource-body .nup-center-lead, div.nup-center-lead {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 1.75rem auto !important;
    max-width: 820px !important;
    padding: 1.5rem 1.75rem !important;
    background: #fdf8f8 !important;
    border: 1px solid #f9e8e8 !important;
    border-radius: 0.75rem !important;
    float: none !important;
}
.prose .nup-center-lead h2, .resource-body .nup-center-lead h2, .nup-center-lead h2 {
    text-align: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: #8a2828 !important;
    line-height: 1.25 !important;
}
.prose .nup-center-lead p, .resource-body .nup-center-lead p, .nup-center-lead p {
    text-align: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 740px !important;
    font-size: 0.9625rem !important;
    line-height: 1.6 !important;
    color: #554444 !important;
}

.nup-card-cta {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
    text-decoration: none;
}
.nup-card-cta:hover {
    text-decoration: underline;
}
.nup-card-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}
/* Centered section headers for the 3-card-grid sections (live-audit.md
   §1.4/§1.5/§1.6 all center their H2 + intro; the 2-column sections don't). */
.nup-section-heading {
    text-align: center;
    max-width: 42rem;
    margin: 3.5rem auto 2rem auto;
}
.nup-section-heading h2 {
    margin: 0 0 0.75rem 0;
}
.nup-section-heading p {
    margin: 0;
    color: #64748b;
}

/* "What NUP Provides" feature cards — icon badge + title + copy. */
.nup-feature-card {
    background: #ffffff;
    border: 1px solid #e9e4e2;
    border-radius: 0.75rem;
    padding: 1.75rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.nup-feature-card:hover {
    border-color: rgba(138, 40, 40, 0.35);
    box-shadow: 0 6px 16px rgba(138, 40, 40, 0.06);
    transform: translateY(-2px);
}
.nup-feature-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
}
.nup-feature-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.55;
}
.nup-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background-color: rgba(138, 40, 40, 0.08);
    color: #8a2828;
    margin-bottom: 1.25rem;
}
.nup-card-svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* The NUP Lifecycle — 6 numbered step cards. */
.nup-lifecycle-section {
    max-width: 1140px;
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: center;
}
.nup-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    /* specs/019 T005d: min() stops 3px overflow at 360px (column is 297px). */
    gap: 1.5rem;
    text-align: left;
}
.nup-lifecycle-card {
    background: #ffffff;
    border: 1px solid #e9e4e2;
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.nup-lifecycle-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}
.nup-lifecycle-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nup-lifecycle-header h3 {
    margin: 0;
    font-size: 1rem;
}
.nup-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 9999px;
    background-color: #8a2828;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

/* Regulatory Framework Coverage — 6 shield-badged cards. */
.nup-frameworks-section {
    max-width: 1140px;
    margin: 4.5rem auto;
    padding: 0 1.5rem;
    text-align: center;
}
.nup-frameworks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    /* specs/019 T005d: min() stops 3px overflow at 360px (column is 297px). */
    gap: 1.5rem;
    text-align: left;
    margin-top: 2.5rem;
}
.nup-framework-card {
    background: #ffffff;
    border: 1px solid #e9e4e2;
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: border-color 0.15s ease;
}
.nup-framework-card:hover {
    border-color: rgba(138, 40, 40, 0.3);
}
.nup-framework-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}
.nup-framework-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.nup-framework-header h3 {
    margin: 0;
    font-size: 1.05rem;
}
.nup-shield-svg {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    color: #8a2828;
    flex-shrink: 0;
}

/* 2-column layout shared by "Why Regulated Software..." and "Integrates
   with Your QMS" — stacked below 1024px. */
.nup-two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1140px;
    margin: 3.5rem auto;
    padding: 0 1.5rem;
}
@media (min-width: 64rem) {
    .nup-two-col-layout { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: 3.5rem; }
}
.nup-feature-list, .nup-qms-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 2rem;
}
.nup-feature-item, .nup-qms-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.nup-feature-item h4, .nup-qms-feature-item h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}
.nup-feature-item p, .nup-qms-feature-item p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}
.nup-qms-icon {
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    color: #8a2828;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.nup-check-icon {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    color: #8a2828;
    flex-shrink: 0;
}

/* "The Compliance Gap" card (right column of "Why Regulated Software..."). */
.nup-compliance-card {
    background: #ffffff;
    border: 1px solid #e9e4e2;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.nup-compliance-card h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem 0;
    font-size: 1.15rem;
}
.nup-gap-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}
.nup-gap-list li {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    color: #475569;
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
}
.nup-gap-list li span {
    color: #dc2626;
    font-weight: 700;
}
.nup-card-highlight {
    color: #8a2828;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}
.nup-card-divider {
    border: 0;
    border-top: 1px solid #e9e4e2;
    margin: 1.5rem 0;
}

/* QMS Integration Section. */
.nup-qms-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1140px;
    margin: 4.5rem auto;
    padding: 0 1.5rem;
}
@media (min-width: 64rem) {
    .nup-qms-section { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: 3.5rem; }
}
.nup-what-you-get-card {
    background: #ffffff;
    border: 1px solid #e9e4e2;
    border-radius: 0.75rem;
    padding: 2.25rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.nup-what-you-get-card h3 {
    margin: 0 0 1.5rem 0;
}
.nup-what-you-get-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.nup-what-you-get-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: #334155;
}

/* Scoped page-identity overrides for the two nodes that render
   `NUP_LANDING_BODY_HTML` (data-resource-id is set from `node.slug` by
   resource_generic.html) — pure CSS, no template edit needed. Widens the
   normally prose-width `.measure` column so the section-scoped `max-width:
   1140px` blocks above have room to lay out (each manages its own width
   and centering now, so this just needs to be at least that wide), and
   restyles the shared sitewide PR1 h1/proposition into this page's
   hero-title/hero-subhead look (its kicker pill was retired by specs/026). */
.nup-hero-surface,
[data-resource-id="unified-process"] #pr1-answer,
[data-resource-id="netspective-unified-process"] #pr1-answer {
    text-align: center;
    max-width: 820px;
    margin: 3rem auto 2.5rem auto;
    padding: 0 1.5rem;
}
.nup-hero-title,
[data-resource-id="unified-process"] #pr1-answer h1,
[data-resource-id="netspective-unified-process"] #pr1-answer h1 {
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: #0b0f19;
    letter-spacing: -0.03em;
    margin: 0 0 1rem 0;
    line-height: 1.15;
}
.nup-hero-subhead,
[data-resource-id="unified-process"] #pr1-answer .proposition,
[data-resource-id="netspective-unified-process"] #pr1-answer .proposition {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 500;
    color: #475569;
    margin: 0 auto 1.25rem auto;
    line-height: 1.4;
    max-width: 660px;
}
[data-resource-id="unified-process"] .measure,
[data-resource-id="netspective-unified-process"] .measure {
    max-width: 1200px;
}

/* specs/019 T005b: full-width NUP body. The site-wide
   `#pr2-explanation .resource-container { max-width: 68rem; }` rule (T-RH-20,
   below) outranks the `.measure` override above and caps this page at
   1088px. This rule is scoped to the two NUP pages and is more specific, so
   it lifts the cap to 80rem (1280px) without touching the shared rule. The
   major sections drop their own 1140px caps so the container alone sets
   their width; reading-width caps (.nup-arch-lead, .nup-section-heading,
   #pr2-explanation p) stay as they are. */
[data-resource-id="unified-process"] #pr2-explanation .resource-container,
[data-resource-id="netspective-unified-process"] #pr2-explanation .resource-container {
    max-width: 80rem;
}
[data-resource-id="unified-process"] .nup-arch-section,
[data-resource-id="netspective-unified-process"] .nup-arch-section,
[data-resource-id="unified-process"] .nup-two-col-layout,
[data-resource-id="netspective-unified-process"] .nup-two-col-layout,
[data-resource-id="unified-process"] .nup-lifecycle-section,
[data-resource-id="netspective-unified-process"] .nup-lifecycle-section,
[data-resource-id="unified-process"] .nup-frameworks-section,
[data-resource-id="netspective-unified-process"] .nup-frameworks-section,
[data-resource-id="unified-process"] .nup-qms-section,
[data-resource-id="netspective-unified-process"] .nup-qms-section {
    max-width: none;
    width: 100%;
}

/* specs/019 T005c: full-width rules between the seven major NUP sections,
   following the hr.cp-section-divider precedent. Full width means the 80rem
   container above, not 100vw: 100vw includes the scrollbar and causes
   horizontal scroll on desktop. The 3rem margin collapses with each
   section's own 3.5–4.5rem margin, so the larger one sets the gap. */
hr.nup-section-divider {
    display: block;
    width: 100%;
    max-width: none;
    margin: 3rem 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* ---------- specs/010-visual-content-parity TASK-004 components ---------- */

/* 4-up capability grid: 1 col < 48rem, 2 cols >= 48rem, 4 cols >= 64rem. */
@media (min-width: 64rem) {
    .capability-grid.capability-grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* Gradient primary CTA (SOURCE `hero` button variant). */
.cta-primary--gradient,
.cta-primary--gradient:hover {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-color: transparent;
    color: var(--primary-foreground);
}
.cta-primary--gradient {
    box-shadow: 0 4px 12px rgba(138, 40, 40, 0.25);
    transition: opacity 0.15s, box-shadow 0.15s;
}
.cta-primary--gradient:hover {
    opacity: 0.9;
    box-shadow: 0 6px 16px rgba(138, 40, 40, 0.3);
}

/* Compliance / audience chip row (regulation strips, audience chips). */
.trust-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}
.trust-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--primary);
    background: rgba(138, 40, 40, 0.06);
    border: 1px solid rgba(138, 40, 40, 0.2);
    border-radius: 9999px;
    padding: 0.3rem 0.85rem;
    white-space: nowrap;
}

/* Tinted service hero (SOURCE `from-primary/5` hero gradient). */
.service-hero-tint {
    background: linear-gradient(180deg, rgba(138, 40, 40, 0.05), rgba(138, 40, 40, 0));
}

/* ---------- TASK-011: linked domain cards + gradient conversion panel ---------- */
.domain-card h3 a { color: inherit; text-decoration: none; }
.domain-card h3 a:hover { color: var(--primary); text-decoration: underline; }
.domain-card-link {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.domain-card-link:hover { text-decoration: underline; }


.conversion-panel--gradient,
.cta-section--gradient .conversion-panel {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: 0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(92, 35, 35, 0.35);
}
.conversion-panel--gradient h3,
.cta-section--gradient .conversion-panel h3 { color: #ffffff; }
.conversion-panel--gradient p,
.cta-section--gradient .conversion-panel p { color: rgba(255, 255, 255, 0.9); margin-inline: auto; }
.conversion-panel--gradient .trust-badge-strip,
.conversion-panel--gradient .cta-button-group,
.cta-section--gradient .conversion-panel .trust-badge-strip,
.cta-section--gradient .conversion-panel .cta-button-group { justify-content: center; }
.conversion-panel--gradient .trust-badge,
.cta-section--gradient .conversion-panel .trust-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}
.conversion-panel--gradient .cta-primary,
.cta-section--gradient .conversion-panel .cta-primary {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
}
.conversion-panel--gradient .cta-primary:hover,
.cta-section--gradient .conversion-panel .cta-primary:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.9); }
.conversion-panel--gradient .cta-secondary,
.cta-section--gradient .conversion-panel .cta-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.conversion-panel--gradient .cta-secondary:hover,
.cta-section--gradient .conversion-panel .cta-secondary:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.1); }

/* ---------- TASK-013: service-node enrichments ---------- */
.trust-chip-label {
    margin: 1.5rem 0 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

/* FDA human-factors documentation levels: semantic tokens, not ad-hoc colours. */
.risk-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0 2.5rem 0;
}
@media (min-width: 48rem) {
    .risk-card-grid { grid-template-columns: repeat(3, 1fr); }
}
.risk-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--risk-accent, var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
}
.risk-card--low  { --risk-accent: var(--success); }
.risk-card--mid  { --risk-accent: var(--warning); }
.risk-card--high { --risk-accent: var(--destructive-text); }
.risk-card-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--risk-accent);
    margin-bottom: 0.5rem;
}
.risk-card h4 { margin: 0 0 0.5rem 0; font-size: 1.05rem; color: #0f172a; }
.risk-card p { margin: 0 0 0.75rem 0; font-size: 0.9rem; color: #475569; }
.risk-card ul { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; color: #475569; }
.risk-card li { margin-bottom: 0.25rem; }

/* ---------- TASK-014: industries ---------- */
@media (min-width: 48rem) {
    .capability-grid.capability-grid--two { grid-template-columns: repeat(2, 1fr); }
}
.capability-card-commercial p.deliverables-label {
    flex-grow: 0;
    margin: 0.25rem 0 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

/* ---------- TASK-015: about story ---------- */
.about-story {
    width: 100%;
    max-width: 100%; /* Removes the narrow 65ch constraint to stretch fully across the container */
    margin: 2.5rem 0 3rem 0;
}

.about-story p {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--ink-secondary, #334155);
    margin: 0 0 1.25rem 0;
}

/* ---------- TASK-016: contact booking card ---------- */
.contact-card--booking p { color: var(--text-card-secondary, #475569); margin: 0 0 1.25rem 0; }

/* ---------- TASK-018: computing-paradigms visual parity ---------- */
/* .paradigm-card now also carries .capability-card (top rule, radius, hover
   lift); keep the compact type scale the four-paradigms page was written for. */
.paradigm-card.capability-card { padding: 1.25rem 1.5rem; }
.paradigm-card.capability-card h4 { font-size: 0.95rem; }
.paradigm-card.capability-card p { font-size: 0.85rem; }

/* T-CP-14 (specs/009-computing-paradigms/prompts/02-implement-visual-parity.md):
   per-paradigm section header icon badge, closing the one genuine visual gap
   the 2026-09-22 audit found against SOURCE's ComputingParadigms.tsx (each
   paradigm's <h2> there is preceded by a colored icon tile). Icon color is
   set via `color` + `currentColor` stroke so the inline SVGs below carry no
   `style=""` attribute — strict CSP (`style-src 'self'`) stays satisfied. */
.paradigm-header-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 2.5rem 0 1rem 0;
}
.paradigm-header-wrapper h2 { margin: 0 0 0.25rem 0; }
.paradigm-header-wrapper p { margin: 0; }
.paradigm-icon-badge {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: calc(var(--radius) - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.paradigm-icon-badge svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.paradigm-icon-badge--primary {
    background: rgba(138, 40, 40, 0.1);
    color: var(--primary);
}
.paradigm-icon-badge--accent {
    background: rgba(242, 105, 13, 0.1);
    color: var(--accent);
}

/* T-CP-19 (specs/009-computing-paradigms/prompts/03-content-visual-parity-impl.md):
   outer width constraint for the comparison matrix, matching SOURCE's
   ComputingParadigms.tsx max-w-6xl (1152px) treatment. Complements, not
   replaces, .table-scroll--matrix below (which owns border/scroll/zebra,
   not width). */
.matrix-table-container {
    max-width: 72rem;
    margin: 0 auto;
}
/* T-CP-33 (specs/009-computing-paradigms/prompts/06-phase6-imp.md): full
   cell borders + larger padding matching SOURCE's `border border-border
   p-4` table convention — scoped to this one table via
   .matrix-table-container, not the shared .evidence-table rule (border-
   bottom-only, 0.5rem/0.75rem padding) used by ~90 other resource nodes'
   tables elsewhere on the site. */
.matrix-table-container table td,
.matrix-table-container table th {
    border: 1px solid var(--border);
    padding: 1rem;
}
/* Small per-column identity icon in the matrix header cells, reusing the
   same paradigm-icon-badge glyph paths at inline size — no separate SVG
   sprite needed. */
.matrix-th-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    vertical-align: -3px;
}
.matrix-th-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.matrix-th-icon--primary { color: var(--primary); }
.matrix-th-icon--accent { color: var(--accent); }

/* Full-border-tint callout variants matching SOURCE's actual Tailwind
   convention (bg-{color}/5 border-{color}/20 on all four sides) more
   closely than the existing left-border-accent .evidence-panel--key/
   --truth modifiers. Scoped to this one node's body_html — the shared
   .evidence-panel--positive/--key modifiers keep their existing (green /
   neutral-gray+amber-left-border) semantics wherever else they're used. */
.card-callout-destructive,
.card-callout-primary,
.card-callout-accent {
    border-radius: var(--radius);
    padding: 1.25rem;
    color: var(--foreground);
}
.card-callout-destructive {
    background: var(--evidence-negative-bg);
    border: 1px solid var(--evidence-negative-border);
}
.card-callout-destructive h4 { color: var(--evidence-negative-text); }
.card-callout-primary {
    background: rgba(138, 40, 40, 0.05);
    border: 1px solid rgba(138, 40, 40, 0.2);
}
.card-callout-primary h4 { color: var(--primary); }
.card-callout-accent {
    background: rgba(242, 105, 13, 0.1);
    border: 1px solid rgba(242, 105, 13, 0.25);
}
.card-callout-accent strong:first-child { color: var(--accent); }

/* Numbered step badges for the "Getting started" adoption list — SOURCE
   renders these as circular number tiles, not a plain <ol>. */
.step-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.step-item p { margin: 0; }
.step-badge-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(138, 40, 40, 0.1);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* T-CP-24 (specs/009-computing-paradigms/prompts/04-visual-parity-imp.md,
   "visual polish" subset — see tasks.md Phase 4 for what was and wasn't
   done): small icon prefixed onto specific section/card headings that
   SOURCE pairs with AlertTriangle (risk/failure framing) or CheckCircle
   (positive/works-well framing), plus a Database icon on every Operational
   Truth callout heading and an ArrowRight after its trailing link text. */
.heading-icon {
    display: inline-flex;
    margin-right: 0.4rem;
    vertical-align: -3px;
}
.heading-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.heading-icon--destructive { color: var(--evidence-negative-text); }
.heading-icon--primary { color: var(--primary); }
.link-arrow {
    display: inline-flex;
    margin-left: 0.3rem;
    vertical-align: -2px;
}
.link-arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* T-CP-28 (specs/009-computing-paradigms/prompts/05-imp.md): small inline
   icon for individual list items (distinct from .heading-icon, which is
   for section/card headings) — currently only used on "What goes wrong"'s
   XCircle bullets. */
.list-icon {
    display: inline-flex;
    margin-right: 0.4rem;
    vertical-align: -3px;
    flex-shrink: 0;
}
.list-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.list-icon--destructive { color: var(--evidence-negative-text); }
.list-icon--primary { color: var(--primary); }

/* T-CP-28: scoped (not site-wide) heading/paragraph spacing bump for this
   one node, via the article's own data-resource-id attribute — resolves
   Phase 4's T-CP-24 finding that a blanket `.pr h2/p` rule change would
   have affected all ~90 resource nodes. */
.resource-page[data-resource-id="four-computing-paradigms"] h2,
.resource-page[data-resource-id="four-computing-paradigms"] p {
    margin-bottom: 1.5rem;
}

/* T-CP-35: centered heading + subhead group above the comparison matrix,
   matching SOURCE's centered two-line treatment. Replaces the previous
   `text-center` class on this element, which had no matching CSS rule in
   this codebase's hand-authored (non-utility-class) stylesheet and so was
   a no-op — this node's matrix heading was not actually centered before. */
.matrix-header-group {
    text-align: center;
    margin-bottom: 2rem;
}
.matrix-header-group h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-align: center;
}
.matrix-header-group p {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* T-RH-09/10/12/15-17 (specs/014-resource-hub-and-chrome-cleanup/
   prompts/03-fix.md, then prompts/04-phase7-execution.md's refinement
   pass): the Resource Hub root's "Resource Hub" layout.
   Cards now use dedicated `.hub-card`/`.hub-card-featured`/`.hub-card-grid`
   classes (this refinement pass's own explicit ask) rather than the
   earlier reuse of `.capability-grid`/`.capability-card` — the dimension
   sub-index fallback grid (below, in resources_index.html) still uses
   `.capability-card` unchanged, since only the hub root's own sections
   were asked to move to the new classes. */
/* T-RH-25/26 (specs/014-resource-hub-and-chrome-cleanup/prompts/06-main-gap-fix.md):
   root cause of the reported "large gap" — this container is instantiated
   once PER SECTION (hero, metrics, spotlight, clusters each wrap their own
   .resource-hub-container), so its old `2.5rem 1.5rem 5rem` vertical
   padding was stacking on top of `.pr`'s own `padding-block: var(--section-y)`
   (5rem, main.css ~3605) on every single section — not a one-time page
   margin the way it may have looked from a single section in isolation.
   Horizontal-only now, matching the exact established precedent for
   `.resource-container-wide` (`.pr .resource-container-wide { padding-block:
   0; }`, main.css ~3606-3608) — `.pr` is this codebase's one source of
   truth for vertical section rhythm; a container class nested inside a
   `.pr` section should never also carry its own vertical padding. */
.resource-hub-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.hub-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0 2rem;
}
/* T-RH-23 (specs/014-resource-hub-and-chrome-cleanup/prompts/05-space-fix.md):
   tightened vertical rhythm between the metrics strip and the spotlight
   section — was relying on .hub-metrics-grid's own bottom margin plus
   .pr's default section padding stacking on top of it, producing the
   excessive dead space this task reports. */
.hub-spotlight-section {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 3.5rem;
}
.hub-spotlight-section h2 {
    margin-bottom: 1.25rem;
    font-size: 1.875rem;
    font-weight: 700;
}
.hub-metric-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card, #ffffff);
}
.hub-metric-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.hub-metric-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.35rem;
}
.hub-metric-desc {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.825rem;
    line-height: 1.4;
}
.hub-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card, #ffffff);
    transition: border-color 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hub-card:hover,
.hub-card:focus-within {
    border-color: var(--primary);
    transform: translateY(-2px);
}
.hub-card-featured {
    border-top: 3px solid var(--primary);
}
.hub-card h3,
.hub-card h4 {
    margin: 0 0 0.375rem;
    font-size: 1rem;
}
.hub-card h3 a,
.hub-card h4 a {
    color: var(--foreground);
    text-decoration: none;
}
.hub-card p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
}
.hub-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.hub-cluster {
    margin-bottom: 3rem;
}
.hub-cluster:last-child {
    margin-bottom: 0;
}
.hub-cluster-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.hub-cluster-summary {
    color: var(--muted-foreground);
    margin: 0 0 1.25rem;
    max-width: 60rem;
}

/* T-CP-38/39 (specs/009-computing-paradigms/prompts/08-divider-styling.md):
   hero lead-paragraph width/type treatment and the `<hr>` section dividers
   between each major section of this one node's body_html. */
.cp-hero-lead {
    max-width: 48rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    margin-bottom: 2.5rem;
}
/* T-CP-42 (specs/009-computing-paradigms/prompts/09-task-imp.md): hero H1
   two-line wrap for this one node, matching SOURCE's "Computing Paradigms
   for Modern / Systems Engineering" line break. */
.resource-page[data-resource-id="four-computing-paradigms"] h1 {
    max-width: 48rem;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

/* T-CP-43: full-width section dividers. The prompt's own selector list
   also named `.resource-article`/`.resource-body-prose` ancestor scopes —
   neither exists anywhere in this codebase's templates (verified by grep,
   same dead-class situation `specs/014-resource-hub-and-chrome-cleanup/
   prompts/04-phase7-execution.md` T-RH-20 hit) — omitted rather than added
   as inert selectors; `hr.cp-section-divider` alone, with no ancestor
   combinator, already matches every `<hr>` this page renders regardless of
   its container, which is the actual fix. */
hr.cp-section-divider {
    width: 100%;
    max-width: 100%;
    margin: 4.5rem 0 4rem;
    border: none;
    border-top: 1px solid var(--border);
    display: block;
}

/* T-RH-20 (specs/014-resource-hub-and-chrome-cleanup/prompts/04-phase7-execution.md):
   elongated layout for generic resource pages. Scoped to `#pr1-answer`/
   `#pr2-explanation` — unique ids that appear only in
   `templates/resource_generic.html`, nowhere else in this codebase's
   templates — rather than editing the shared `.measure`/
   `.resource-container-wide` classes those sections' inner
   `.resource-container` divs also carry, which are reused site-wide by
   `privacy.html`, `terms.html`, the PLG tool pages, `admin_signals.html`,
   and others. This widens/restyles every generic resource page without
   touching any of those unrelated templates. */
#pr1-answer .resource-container,
#pr1-answer .resource-container-wide,
#pr2-explanation .resource-container,
#pr2-explanation .resource-container-wide {
    max-width: 68rem;
}
#pr1-answer .proposition {
    max-width: 54rem;
    font-size: 1.25rem;
    line-height: 1.7;
}
#pr2-explanation p {
    max-width: 52rem;
    font-size: 1.0625rem;
    line-height: 1.75;
}
#pr2-explanation .table-scroll,
#pr2-explanation .matrix-table-container,
#pr2-explanation .evidence-panel,
#pr2-explanation .card-callout-destructive,
#pr2-explanation .card-callout-primary,
#pr2-explanation .card-callout-accent {
    max-width: 68rem;
    width: 100%;
}

/* Hero kicker icon (four-computing-paradigms only — see resource_generic.html). */
.kicker-icon {
    display: inline-flex;
    margin-right: 0.4rem;
    vertical-align: -2px;
}
.kicker-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Comparison matrix: bordered, scrollable on narrow screens, banded rows. */
.table-scroll--matrix {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    margin: 1.25rem 0 2rem 0;
}
.table-scroll--matrix .evidence-table { min-width: 44rem; }
.table-scroll--matrix .evidence-table thead th {
    background: var(--muted);
    color: var(--foreground);
}
.table-scroll--matrix .evidence-table tbody tr:nth-child(even) { background: rgba(246, 244, 244, 0.5); }
.table-scroll--matrix .evidence-table tbody tr:last-child td { border-bottom: 0; }
.table-scroll--matrix .evidence-table td:first-child,
.table-scroll--matrix .evidence-table th:first-child { font-weight: 600; color: var(--foreground); }

/* Verification pass: don't stretch the inquiry form to the info column's height. */
.contact-layout-grid .contact-form-container { align-self: start; }

/* ---------- specs/011-navigation-and-footer-refinements ---------- */

/* Header dropdowns (Services, Industries). Opened by :hover and :focus-within
   so they work from the keyboard with no script; the trigger is a real link
   to the hub page, which is also what a tap on touch hardware follows. */
.header-nav { align-self: stretch; }
.header-nav .nav-list { height: 100%; }
.nav-dropdown {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.nav-caret {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
    transform: rotate(180deg);
}
.nav-dropdown:hover > .nav-dropdown-trigger,
.nav-dropdown:focus-within > .nav-dropdown-trigger {
    color: var(--accent);
}
.nav-dropdown-menu {
    position: absolute;
    top: 100%;            /* the li spans the full header height, so no hover gap */
    left: -0.75rem;
    z-index: 60;
    min-width: 15.5rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.4rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown-item,
.nav-dropdown-item:visited {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border-radius: calc(var(--radius) - 0.25rem);
    color: var(--foreground);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
    background-color: var(--muted);
    color: var(--primary);
    outline: none;
}
.nav-dropdown-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }

/* Drawer sublists (below 48rem). */
.mobile-nav-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem 1rem;
}
.mobile-nav-sublink,
.mobile-nav-sublink:visited {
    display: block;
    padding: 0.5rem 0;
    color: rgba(241, 245, 249, 0.8);
    font-size: 0.9rem;
    text-decoration: none;
}
.mobile-nav-sublink:hover,
.mobile-nav-sublink:focus-visible { color: var(--accent); }

/* Footer legal bar: two-line copy on the left, links on the right. */
.footer-copy p { margin: 0; }
.footer-copy .footer-trademark {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}
@media (max-width: 39.99rem) {
    .footer-copy { text-align: center; }
}

/* ---------- specs/012-industries-content-visual-parity ---------- */
.industry-section { scroll-margin-top: 5rem; }
.industry-panel h2 {
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
}
.capability-card-commercial.industry-panel p { max-width: 60rem; }
/* Deliverables in two columns on wide screens. */
@media (min-width: 48rem) {
    .capability-checklist.capability-checklist--cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
}
.capability-card-commercial p.industry-links {
    flex-grow: 0;
    margin: 1.25rem 0 0 0;
    font-size: 0.875rem;
    color: var(--text-muted, #64748b);
}
.industry-links a { color: var(--primary); text-decoration: none; }
.industry-links a:hover { text-decoration: underline; }
.industry-subhead {
    margin: 2rem 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}
.capability-grid--three { margin-bottom: 0 !important; }
.capability-grid--three .capability-card h4 { margin: 0 0 0.4rem 0; font-size: 1rem; color: #0f172a; }

/* ---------- specs/013-homepage-content-visual-parity ---------- */
.home-showcase { margin: 1rem 0 3.5rem 0; }
.home-showcase h2 { margin: 0.5rem 0 0.5rem 0; font-size: 1.75rem; font-weight: 700; color: #0f172a; }
.home-showcase-lead { max-width: 46rem; margin: 0 0 1.5rem 0; color: var(--ink-secondary, #334155); }
.home-showcase .capability-card-commercial .domain-card-link { margin-top: auto; }
.home-showcase-chips { margin: 0 0 1.75rem 0; }
.trust-chip--link { text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.trust-chip--link:hover,
.trust-chip--link:focus-visible {
    background: rgba(138, 40, 40, 0.12);
    border-color: var(--primary);
    text-decoration: none;
}
.home-showcase-cta { margin: 0; }
@media (min-width: 64rem) {
    .ilities-grid.ilities-grid--eight { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- specs/012 dedicated industry pages ---------- */
.gradient-text {
    background-image: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary); /* fallback where background-clip:text is unsupported */
}
.industry-page .industry-intro {
    max-width: 46rem;
    margin: 0 0 1.5rem 0;
    color: var(--ink-secondary, #334155);
}
.industry-page .capability-grid { margin-bottom: 0 !important; }
.industry-page .trust-badge-strip { margin: 1.25rem 0 1.5rem 0; }
.industry-panel h2 a { color: inherit; text-decoration: none; }
.industry-panel h2 a:hover { color: var(--primary); text-decoration: underline; }
.capability-card-commercial p.industry-explore { flex-grow: 0; margin: 1.25rem 0 0 0; }


/* ==========================================================================
   specs/015-typography-and-styling-parity — Phases 2–4
   Values are SOURCE (Tailwind 3) equivalents, expressed through the tokens in
   :root. Kept as one block, in phase order, so a later pass can fold each rule
   into its original home. Zero inline styles (CSP style-src 'self').
   ========================================================================== */

/* ---- Phase 1 (cont.): container + section rhythm ------------------------- */
.resource-container-wide {
    max-width: var(--container-max);
    padding-inline: var(--gutter);
}
.header-inner {
    max-width: var(--container-max);
    padding-inline: var(--gutter);
}
.pr { padding-block: var(--section-y); }
/* The section already supplies the vertical space; the wide container's own
   40px block padding would stack on top of it. */
.pr .resource-container-wide { padding-block: 0; }
.pr.service-hero-tint { padding-block: 4rem; }   /* SOURCE pt-32 (64px visible under the header) / pb-16 */
.resource-page .pr { padding-block: 2.5rem; }    /* Mode B resource pages keep their own rhythm */
.resource-page .pr .resource-container-wide { padding-block: 0; }
/* Homepage sections are not .pr blocks; give the headings the same air. */
.home .about-section-heading,
.home .home-services-header,
.home .home-showcase { margin-top: var(--section-y); }

/* ---- Phase 2: shell, navigation, buttons --------------------------------- */
.header-nav .nav-list > li { display: flex; align-items: center; align-self: stretch; }
.nav-link {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: 500;
    padding: 0;
}
.nav-link[aria-current="page"],
.nav-link.is-active { font-weight: 500; }
.nav-dropdown-trigger { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.nav-caret { width: 1rem; height: 1rem; }
.nav-dropdown-menu {
    border-radius: calc(var(--radius) - 2px);
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.nav-dropdown-item,
.nav-dropdown-item:visited {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: 400;
    padding: 0.375rem 0.5rem;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
    background-color: var(--accent);
    color: #ffffff;
}
.nav-dropdown-item:focus-visible { box-shadow: none; }
.btn-header-utility {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    border-radius: calc(var(--radius) - 2px);   /* constitution §5: no pill buttons */
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn-header-utility:hover,
.btn-header-utility:focus-visible {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0.9;
}
.mobile-nav-link { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.mobile-nav-sublink { font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* Hero buttons: SOURCE `size="lg"` = 44px, 10px radius, px-8; outline is 2px. */
.home-hero-surface .cta-primary,
.home-hero-surface .cta-secondary {
    height: 2.75rem;
    padding: 0 2rem;
    border-radius: calc(var(--radius) - 2px);
}
.home-hero-surface .cta-secondary { border-width: 2px; }
/* specs/026-ui-content-kicker-audit (Finding 3.0): the badge follows the
   <h1>, so it needs its own gap before the lead paragraph. */
.home-hero-surface h1 + .trust-badge { margin-bottom: 1.75rem; }
.home-hero-surface .trust-badge {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: 500;
    padding: 0.5rem 1rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ---- Phase 3: headings, cards, leads ------------------------------------- */
.pr h1,
.about-hero-section h1 {
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}
.pr h2,
.about-section-heading,
.home-services-header h2,
.home-showcase h2,
.industry-panel h2 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}
.conversion-panel h3 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    letter-spacing: var(--tracking-tight);
}
@media (min-width: 64rem) {
    .pr h1,
    .about-hero-section h1 { font-size: var(--fs-5xl); line-height: var(--lh-5xl); }
    .pr h2,
    .about-section-heading,
    .home-services-header h2,
    .home-showcase h2,
    .industry-panel h2 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
    .conversion-panel h3 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
/* Mode B resource pages keep their own H1 scale (.resource-page .pr h1). */

/* One card-title size everywhere: 20px/28px, w600. */
.capability-card-commercial h3,
.domain-card h3,
.capability-card h3,
.contact-card h3,
.pr .capability-card h3,
.pr .capability-card-commercial h3 {
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}

/* Leads: 20px/28px, muted, 48rem measure. */
.proposition,
.about-hero-lead,
.home-showcase-lead,
.industry-intro {
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
    color: var(--muted-foreground);
    max-width: 48rem;
}
.home-hero-lead { font-size: var(--fs-xl); line-height: var(--lh-xl); }

/* Card descriptions: 16px/24px, muted. */
.capability-card-commercial p,
.capability-card-commercial p:last-child,
.domain-card p,
.capability-card p {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--muted-foreground);
}
.capability-card-commercial p.deliverables-label,
.capability-card-commercial p.industry-links {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}
.capability-card-commercial p.industry-links { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.paradigm-card.capability-card p { font-size: 0.85rem; line-height: 1.55; }   /* Mode B: keep compact */

/* Metric ledger numbers: 30px/36px w700 (was 36px/57.6px w800). */
.metric-ledger .statistic dt,
.metric-ledger dt {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
    font-weight: 700;
    letter-spacing: 0;
}
.metric-ledger dd { font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* ---- Phase 4: forms and footer -------------------------------------------- */
.form-field-group label {
    font-size: var(--fs-sm);
    line-height: 1;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}
.form-control-input,
.form-control-select {
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
}
.form-control-textarea {
    min-height: 5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
}
@media (min-width: 48rem) {
    .form-control-input,
    .form-control-select,
    .form-control-textarea { font-size: var(--fs-sm); line-height: var(--lh-sm); }
}
.form-control-input::placeholder,
.form-control-textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
.contact-form-container .cta-primary { line-height: var(--lh-sm); }

.footer-col h2 {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: 600;
    text-transform: none;
    letter-spacing: var(--tracking-tight);
    color: var(--foreground);
    margin-bottom: 1rem;
}
.footer-link-list li { margin-bottom: 0.5rem; }
.footer-link-list a {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--muted-foreground);
}
.footer-link-list a:hover,
.footer-legal-links a:hover { color: var(--primary); text-decoration: none; }
.footer-baseline-bar {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}
.footer-copy p,
.footer-legal-links a {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--muted-foreground);
}
.footer-copy .footer-trademark { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.footer-bio { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.footer-soc-title { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.industry-page .industry-intro { color: var(--muted-foreground); }

/* `.nup-center-lead` (used by both `REGULATED_SDLC_STANDARD`'s intro
   section and this package's `NUP_LANDING_BODY_HTML`) is now defined by
   the high-specificity block in the
   specs/017-unified-process-card/prompts/07-card-redesign.md section
   above — this simpler rule it superseded is intentionally removed, not
   left as dead/conflicting CSS. */

/* ==========================================================================
   specs/018-deterministic-software-migration T009 — documentation shell for
   the Netspective Unified Process for Deterministic Software
   (templates/doc_track_page.html). Existing tokens only; no inline
   styles (CSP style-src 'self').
   ========================================================================== */
.doc-shell { max-width: 87.5rem; }
.doc-layout {
    display: grid;
    grid-template-columns: 18.5rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

/* ---- Sidebar ---- */
.doc-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
    padding-right: 1.25rem;
    border-right: 1px solid var(--border-subtle);
}
.doc-sidebar-header {
    padding-bottom: 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}
.doc-track-title {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}
.doc-track-title:hover { color: var(--primary); }
.doc-track-subtitle {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.doc-section-group { margin: 0; }
.doc-section-group + .doc-section-group { border-top: 1px solid var(--border-subtle); }
.doc-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.25rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-secondary);
}
.doc-section-heading::-webkit-details-marker { display: none; }
.doc-section-heading::before {
    content: "\25B8";
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.doc-section-group[open] > .doc-section-heading::before { transform: rotate(90deg); }
.doc-section-title { flex: 1; }
.doc-section-heading:hover .doc-section-title { color: var(--primary); }
.doc-section-count {
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--surface-tint);
    border: 1px solid var(--border-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}
.doc-section-links {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0 0 0 0.75rem;
}
.doc-nav-link {
    display: block;
    padding: 0.3rem 0.6rem;
    border-left: 2px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ink-secondary);
    text-decoration: none;
}
.doc-nav-link:hover { color: var(--primary); border-left-color: var(--border-hover); }
.doc-nav-link.is-active {
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
    background: var(--kicker-bg);
}

/* ---- Main column ---- */
.doc-main { min-width: 0; }
.breadcrumb-nav { margin-bottom: 1.25rem; }
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before {
    content: "/";
    margin: 0 0.5rem;
    color: var(--border-hover);
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs [aria-current="page"] { color: var(--ink-secondary); }
.doc-header {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
}
.doc-header h1 {
    margin: 0 0 0.75rem;
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.doc-lead {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink-secondary);
}

/* ---- Article body (generated HTML) ---- */
.doc-content {
    max-width: 50rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-secondary);
}
.doc-content h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--ink);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
.doc-content h3,
.doc-content h4,
.doc-content h5,
.doc-content h6 {
    margin: 2rem 0 0.75rem;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--ink);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
.doc-content h4, .doc-content h5, .doc-content h6 { font-size: 1rem; }
.doc-content p,
.doc-content ul,
.doc-content ol { margin: 0 0 1rem; }
.doc-content ul, .doc-content ol { padding-left: 1.5rem; }
.doc-content li { margin-bottom: 0.35rem; }
.doc-content li > ul, .doc-content li > ol { margin: 0.35rem 0 0; }
.doc-content a { color: var(--link-brand); }
.doc-content a:hover { color: var(--primary); }
.doc-content code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--muted);
    font-size: 0.875em;
}
.doc-content pre code { padding: 0; background: none; font-size: inherit; }
.doc-content .artifact-block { margin: 0 0 1.25rem; }
.doc-content .table-scroll {
    margin: 0 0 1.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: calc(var(--radius) - 0.25rem);
}
.doc-content .evidence-table { font-size: 0.875rem; }
.doc-content .evidence-table th { background: var(--surface-tint); color: var(--ink); white-space: normal; }
.doc-content .evidence-table tr:last-child td { border-bottom: 0; }
.doc-toc {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: calc(var(--radius) - 0.25rem);
    background: var(--surface-tint);
    font-size: 0.875rem;
}
.doc-toc-title {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.doc-toc ul { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: 2rem; }
.doc-toc li { margin: 0 0 0.35rem; break-inside: avoid; }
.doc-toc a { color: var(--ink-secondary); text-decoration: none; }
.doc-toc a:hover { color: var(--primary); }
.doc-checklist { list-style: none; padding-left: 0.25rem; }
.checklist-item { display: flex; gap: 0.6rem; align-items: baseline; }
.checklist-box { flex: none; font-size: 1.05em; line-height: 1; color: var(--text-muted); }
.doc-callout {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--primary);
    border-radius: 0 calc(var(--radius) - 0.25rem) calc(var(--radius) - 0.25rem) 0;
    background: var(--kicker-bg);
    color: var(--ink-secondary);
}
.doc-callout > :last-child { margin-bottom: 0; }
/* specs/020: collapsible "Technical Implementation Notes" blocks and
   highlighted draft notices from the Probabilistic Track corpus. */
.doc-details {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--card);
}
.doc-details > summary {
    cursor: pointer;
    color: var(--ink);
}
.doc-details[open] > summary {
    margin-bottom: 0.75rem;
}
.doc-details > :last-child { margin-bottom: 0; }
.doc-content mark {
    padding: 0 0.2em;
    background: var(--kicker-bg);
    color: var(--ink);
}
/* specs/021 FR-010c: a quoted example of language to avoid (the content
   audit skips text inside data-audit-skip="example"). Italic only, so the
   quoted term reads as a mention, not a use. */
[data-audit-skip="example"] {
    font-style: italic;
}
.doc-diagram-container {
    margin: 0 0 1.75rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--card);
    text-align: center;
}
.doc-diagram-container img { max-width: 100%; height: auto; }
.doc-diagram-container figcaption {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ---- Pagination ---- */
.doc-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 50rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}
.pagination-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: calc(var(--radius) - 0.25rem);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.pagination-link:hover { border-color: var(--primary); }
.pagination-next { grid-column: 2; text-align: right; }
.pagination-label { font-size: 0.75rem; color: var(--text-muted); }
.pagination-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.pagination-link:hover .pagination-title { color: var(--primary); }

/* ---- Mobile drawer (<= 48rem; static/js/doc-nav.js) ---- */
.doc-mobile-bar { display: none; }
@media (max-width: 47.99rem) {
    .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .doc-mobile-bar {
        display: block;
        margin-bottom: 1rem;
    }
    .doc-drawer-toggle {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.65rem 0.9rem;
        border: 1px solid var(--border-subtle);
        border-radius: calc(var(--radius) - 0.25rem);
        background: var(--surface-tint);
        font: inherit;
        font-size: 0.8125rem;
        text-align: left;
        color: var(--ink-secondary);
        cursor: pointer;
    }
    .doc-drawer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .doc-sidebar {
        display: none;
        position: static;
        max-height: none;
        margin-bottom: 1.5rem;
        padding: 0 0 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }
    .doc-sidebar.is-open { display: block; }
    .doc-header h1 { font-size: 1.75rem; }
    .doc-pagination { grid-template-columns: minmax(0, 1fr); }
    .pagination-next { grid-column: 1; }
}

/* specs/022-seo-aeo-implementation: the GTM <noscript> iframe the server
   injects in production (GTM_ENABLED only). Hidden by class, not by Google's
   inline style="" (dropped under style-src 'self'). */
.gtm-noscript {
    display: none;
    visibility: hidden;
}

/* specs/026-ui-content-kicker-audit T033: eleven sub-headings in the
   four-computing-paradigms and Unified Process bodies moved from <h4> to <h3>
   so the outline no longer skips a level under their <h2>. These rules pin
   the exact size, weight, spacing and color they had as <h4> (verified by
   computed-style comparison at 375px and 1280px), overriding `.pr h3` and
   `.pr .capability-card h3`. */
.resource-page .card-callout-destructive > h3,
.resource-page .card-callout-primary > h3,
.resource-page .evidence-panel--truth > h3,
.resource-page .nup-feature-item h3,
.resource-page .nup-qms-feature-item h3 {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}
.resource-page .card-callout-destructive > h3,
.resource-page .card-callout-primary > h3,
.resource-page .evidence-panel--truth > h3 { margin: 0; }
.resource-page .card-callout-destructive > h3 { color: var(--evidence-negative-text); }
.resource-page .card-callout-primary > h3,
.resource-page .evidence-panel--truth > h3 { color: var(--primary); }
.resource-page .nup-feature-item h3,
.resource-page .nup-qms-feature-item h3 { margin: 0 0 0.25rem 0; color: var(--foreground); }
.resource-page .paradigm-card.capability-card > h3 {
    font-size: 0.95rem;
    line-height: 1.1875rem;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    margin: 0 0 0.375rem 0;
    color: var(--foreground);
}