html { scroll-padding-top: 80px; }
        /* Homepage-specific: transparent header over the hero, solid
           navy once scrolled (§9: no glass blur, no translucent pane) */
        .site-header {
            background: transparent;
            transition: background var(--motion-hover), box-shadow var(--motion-hover);
        }

        .site-header.scrolled {
            background: var(--bg-primary);
            box-shadow: 0 1px 0 rgba(184, 149, 90, 0.1);
        }

        /* Hero (§9: the ledger-grid motif belongs here — 48px minor /
           192px major, restrained gold at a maximum of 4% opacity on
           navy; the old decorative gold radial wash is retired) */
        .hero {
            background: linear-gradient(180deg, #0f172a 0%, #16203a 55%, #0f172a 100%);
            padding: 10rem 0 8rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgba(184, 149, 90, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(184, 149, 90, 0.02) 1px, transparent 1px),
                linear-gradient(to right, rgba(184, 149, 90, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(184, 149, 90, 0.04) 1px, transparent 1px);
            background-size: 48px 48px, 48px 48px, 192px 192px, 192px 192px;
        }

        .hero > * { position: relative; z-index: 1; }

        /* §9: desktop H1 56–72px at 0.98–1.04 line-height */
        .hero h1 {
            font-size: clamp(3.5rem, 3.2vw + 1.8rem, 4.5rem);
            font-weight: 600;
            color: var(--text-heading-on-dark);
            line-height: 1.02;
            margin-bottom: 1.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-value {
            font-size: 0.95rem;
            color: var(--accent);
            margin: 1rem auto 1.5rem;
            letter-spacing: 0.02em;
        }

        .hero-sub {
            font-size: 1.15rem;
            color: var(--text-on-dark);
            max-width: 600px;
            margin: 0 auto 2rem;
            line-height: 1.7;
        }
        .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 2rem;
        }
        .hero-actions .cta-btn.primary {
            background: var(--accent);
            color: var(--bg-primary);
        }
        .hero-actions .cta-btn.primary:hover {
            background: var(--accent-hover);
            color: var(--bg-primary);
        }
        .hero-actions .cta-btn.secondary {
            background: rgba(184, 149, 90, 0.06);
            color: var(--accent);
            border: 1px solid rgba(184, 149, 90, 0.60);
            font-family: 'DM Sans', sans-serif;
        }
        .hero-actions .cta-btn.secondary:hover {
            background: rgba(184, 149, 90, 0.12);
            color: var(--accent);
        }
        .hero-note {
            margin-top: 1rem;
            font-size: 0.9rem;
            color: var(--text-on-dark);
        }
        .hero-note a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid rgba(184, 149, 90, 0.5);
        }
        .hero-note a:hover { opacity: 0.8; }

        /* W3-1: partnership links are explicit ghost actions in the
           View Sample Report family, never bare gold text. */
        .partnership-action-row {
            display: flex;
            justify-content: center;
            margin-top: 1rem;
        }
        .ghost-button,
        .hero-actions .ghost-button,
        .pricing-teams .ghost-button {
            border: 1px solid rgba(184, 149, 90, 0.60);
            background: rgba(184, 149, 90, 0.06);
            color: var(--accent);
            font-family: 'DM Sans', sans-serif;
            text-decoration: none;
        }
        .ghost-button:hover,
        .hero-actions .ghost-button:hover,
        .pricing-teams .ghost-button:hover {
            background: rgba(184, 149, 90, 0.12);
            color: var(--accent);
        }

        /* Section dividers (§9: ivory boundaries use navy at 10%) */
        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--rule-on-ivory) 20%, var(--rule-on-ivory) 80%, transparent);
        }

        /* Value Props */
        .value-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        /* W-2B (2026-07-27): card-based layout for the major marketing
           sections. §9 (Package 3): white evidence cards, 1px neutral
           border, level-one elevation, 4px radius, stationary on
           hover — the active state only raises border contrast. */
        .value-card, .process-card {
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: var(--radius-figure);
            padding: 2rem;
            box-shadow: var(--elev-1);
            transition: border-color var(--motion-hover);
        }
        .value-card:hover, .process-card:hover {
            border-color: var(--border-card-active);
        }

        /* Methodology Section — W-4: slate-tinged alt layer */
        .methodology-section {
            background: var(--navy-alt);
            text-align: center;
            position: relative;
        }

        /* §9 ledger-grid motif in the navy methodology band: 48px minor /
           192px major, restrained gold at a maximum of 4% opacity */
        .methodology-section::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgba(184, 149, 90, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(184, 149, 90, 0.02) 1px, transparent 1px),
                linear-gradient(to right, rgba(184, 149, 90, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(184, 149, 90, 0.04) 1px, transparent 1px);
            background-size: 48px 48px, 48px 48px, 192px 192px, 192px 192px;
        }

        .methodology-section .section-inner {
            position: relative;
            z-index: 1;
        }

        .methodology-section .section-header {
            margin-bottom: 2rem;
        }

        .methodology-section p {
            color: var(--text-on-dark);
            max-width: 680px;
            margin: 0 auto 1.5rem;
            line-height: 1.7;
        }

        /* W-5: methodology three-step system (W-4 dark elevation);
           the section column widens so the three steps breathe */
        .methodology-section .section-prose {
            max-width: 1080px;
        }
        .method-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 2.5rem;
            text-align: left;
        }
        .method-step {
            background: var(--navy-surface);
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-figure);
            padding: 2rem;
            box-shadow: var(--elev-1);
            transition: border-color var(--motion-hover);
        }
        .method-step:hover {
            border-color: var(--border-card-dark-active);
        }
        .method-num {
            font-family: 'EB Garamond', serif;
            font-size: 1.8rem;
            color: var(--accent);
            margin-bottom: 0.75rem;
        }
        .method-step h3 {
            font-size: 1.2rem;
            color: var(--text-heading-on-dark);
            margin-bottom: 0.6rem;
        }
        .method-step p {
            font-size: 0.92rem;
            color: var(--text-on-dark);
            line-height: 1.65;
            max-width: none;
            margin: 0;
        }
        @media (max-width: 900px) {
            .method-steps { grid-template-columns: 1fr; }
        }

        /* Process */
        .process-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .process-num {
            font-family: 'EB Garamond', serif;
            font-size: 2.5rem;
            color: var(--gold-ink);
            display: inline-block;
            margin-bottom: 1rem;
        }

        /* Who section (dark) — W-4: slate-tinged alt layer */
        .who-section {
            background: var(--navy-alt);
            text-align: center;
            position: relative;
        }

        /* W-2B: who-grid cards (dark-section variant of the card language).
           W-4: the card itself lives in northscope.css (shared .who-card
           elevation system) — only the grid is page-local. */
        .who-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            text-align: left;
        }
        @media (max-width: 900px) {
            .who-grid { grid-template-columns: 1fr; }
        }

        /* FAQ */
        .faq-list { list-style: none; }

        .faq-list details {
            border-bottom: 1px solid var(--border-subtle);
        }

        .faq-card .faq-list details:first-child {
            border-top: none;
        }

        .faq-list summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 0;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--text-primary);
            list-style: none;
        }

        .faq-list summary::-webkit-details-marker { display: none; }

        .faq-list summary::after {
            content: '+';
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--gold-ink);
            flex-shrink: 0;
            margin-left: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }

        .faq-list details[open] summary::after {
            content: '\2212';
        }

        .faq-answer {
            padding: 0 0 1.5rem;
            color: var(--text-primary);
            line-height: 1.75;
            max-width: 90%;
        }

        /* Dark-on-dark divider (§9: navy boundaries use the restrained
           gold rule at 22% opacity) */
        .section-divider--dark {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--rule-on-navy) 20%, var(--rule-on-navy) 80%, transparent);
        }

        /* Navy-to-cream boundary — hard edge + the §9 gold hairline */
        .section-transition-ramp {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--rule-on-navy) 20%, var(--rule-on-navy) 80%, transparent);
        }

        /* Pipeline Steps */
        .pipeline-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .pipeline-step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(184, 149, 90, 0.15);
            color: var(--gold-ink);
            font-family: 'EB Garamond', serif;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        /* Report Coverage (Bases Covered) — W-4: slate-tinged alt layer */
        .coverage-section {
            background: var(--navy-alt);
            padding-bottom: 4rem;
        }

        .coverage-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
        }

        .coverage-card {
            flex: 0 1 calc(33.333% - 1.34rem);
            min-width: 300px;
            background: var(--navy-surface);
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-figure);
            padding: 2rem;
            position: relative;
            box-shadow: var(--elev-1);
            transition: border-color var(--motion-hover);
        }

        .coverage-card:hover {
            border-color: var(--border-card-dark-active);
        }

        .coverage-icon {
            color: var(--accent);
            margin-bottom: 1rem;
        }

        .coverage-card h3 {
            font-family: 'EB Garamond', serif;
            font-size: 1.2rem;
            color: var(--accent);
            margin-bottom: 0.5rem;
            letter-spacing: 0.04em;
        }

        .coverage-lead {
            font-size: 0.9rem;
            color: var(--text-on-dark);
            font-style: italic;
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .coverage-bullets {
            list-style: none;
            padding: 0;
        }

        .coverage-bullets li {
            padding: 0.4rem 0;
            padding-left: 1.25rem;
            position: relative;
            font-size: 0.88rem;
            color: var(--text-on-dark);
            line-height: 1.65;
        }

        .coverage-bullets li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.75rem;
            width: 5px;
            height: 5px;
            background: var(--accent);
            border-radius: 50%;
        }

        .coverage-bullets strong {
            color: var(--text-heading-on-dark);
        }

        @media (max-width: 768px) {
            .coverage-card {
                flex: 0 1 100%;
                min-width: unset;
            }
        }

        /* Pricing Section */
        .pricing-section {
            background: var(--bg-primary);
        }

        .pricing-card-wrapper {
            display: flex;
            justify-content: center;
        }

        .pricing-card {
            background: var(--navy-surface);
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-major);
            padding: 3rem;
            max-width: 480px;
            width: 100%;
            text-align: center;
            box-shadow: var(--elev-1);
            transition: border-color var(--motion-hover);
        }

        .pricing-card:hover {
            border-color: var(--border-card-dark-active);
        }

        .pricing-amount {
            font-family: 'EB Garamond', serif;
            font-size: 3.5rem;
            color: var(--accent);
            font-weight: 600;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .pricing-subtitle {
            color: var(--text-on-dark);
            font-size: 0.95rem;
            margin-bottom: 2rem;
        }

        .pricing-features {
            list-style: none;
            text-align: left;
            padding: 0;
        }

        .pricing-features li {
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(184, 149, 90, 0.15);
            color: var(--text-on-dark);
            font-size: 0.95rem;
            padding-left: 1.5rem;
            position: relative;
        }

        .pricing-features li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: var(--accent);
            border-radius: 50%;
        }

        .pricing-features li:last-child {
            border-bottom: none;
        }

        /* the navigation system moved to northscope.css (WEB-FIX-4,
           site-wide); index.css keeps the homepage-only rules. */

        /* Mobile */
        @media (max-width: 768px) {
            .hero {
                padding: 7rem 0 4rem;
                text-align: left;
            }
            .hero h1 {
                font-size: 2.75rem;
                line-height: 1.05;
                margin-left: 0;
            }
            .hero-sub {
                margin-left: 0;
                font-size: 1.05rem;
            }
            .hero-actions { justify-content: flex-start; flex-direction: column; gap: 1rem; width: 100%; }

            .value-grid {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .process-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .process-card {
                text-align: left;
                display: flex;
                align-items: flex-start;
                gap: 1.25rem;
            }
            .process-card .process-num {
                font-size: 2rem;
                margin-bottom: 0;
                flex-shrink: 0;
            }
            .pipeline-grid {
                grid-template-columns: 1fr !important;
            }
            .section-transition-ramp {
                height: 1px;
            }
            .pricing-card {
                padding: 2rem 1.5rem;
            }
        }


        /* === WEBSITE train Package 2 (spec §7 order + §11 public-safe
           diagrams; IA-07 compact desktop header) — new classes only;
           no existing rule is modified === */

        /* Compact desktop header (§7 item 1). Desktop ≥1024px: the
           direct header links; below that the protected-master drawer
           toggle serves the collapse (IA-07, §9 responsive). */
        /* the compact-header rules moved to northscope.css (WEB-FIX-4). */

        /* Five-stage source-to-decision rail (§7.3; PROOF-04) */
        .rail {
            display: flex;
            justify-content: center;
            align-items: stretch;
            flex-wrap: wrap;
            gap: 2.25rem;
            margin: 0 auto 3rem;
            max-width: 1080px;
            list-style: none;
        }
        .rail-stage {
            position: relative;
            display: flex;
            align-items: center;
            text-align: center;
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            padding: 0.75rem 1.1rem;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-primary);
        }
        .rail-stage + .rail-stage::before {
            content: '\2192';
            position: absolute;
            left: -1.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gold-ink);
            font-weight: 600;
        }

        /* Proof crops (§11: annotations outside the image, each crop
           linked to its full illustrative sample) */
        .proof-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: stretch;
        }
        .proof-grid--single {
            grid-template-columns: minmax(0, 720px);
            justify-content: center;
        }
        /* Proof frames (§9: 1px restrained-gold border at 36%, a subtle
           6% ivory inner highlight, and the level-two elevation — the
           only exterior shadow; radius 12px; pointer lift ≤4px) */
        .proof-frame {
            background: var(--bg-card);
            border: 1px solid var(--border-proof);
            border-radius: var(--radius-major);
            padding: 1.25rem;
            box-shadow: var(--inner-highlight-ivory), var(--elev-2);
            margin: 0;
            transition: transform var(--motion-hover);
            display: flex;
            flex-direction: column;
        }
        @media (hover: hover) {
            .proof-frame:hover { transform: translateY(-3px); }
        }
        .proof-frame img {
            display: block;
            width: 100%;
            height: auto;
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
        }
        .proof-frame figcaption {
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .proof-annotations {
            list-style: none;
            margin-top: 1rem;
        }
        .proof-annotations li {
            position: relative;
            padding: 0.3rem 0 0.3rem 1.25rem;
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.65;
        }
        .proof-annotations li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.8rem;
            width: 5px;
            height: 5px;
            background: var(--accent);
            border-radius: 50%;
        }
        .proof-annotations strong { color: var(--text-primary); }
        .proof-note {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.65;
            margin-top: 1rem;
        }
        .proof-link { margin-top: auto; padding-top: 1rem; }
        .proof-link a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            color: var(--gold-ink);
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            border-bottom: 1px solid rgba(125, 98, 48, 0.5);
            transition: color var(--motion-hover);
        }
        .proof-link a:hover { color: var(--gold-ink-hover); }

        /* The merged record ledger (§7.5; IA-02): the coverage cards
           stack into one compact overview column */
        .record-ledger {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .record-ledger .coverage-card {
            flex: none;
            min-width: 0;
        }
        .coverage-lead--plain { font-style: normal; }

        /* W3-4: the two pipeline lanes stack in reading order. Cards
           within each lane share equal-height grid tracks. */
        .io-lanes {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        .io-lane {
            width: 100%;
        }
        .io-lane-label {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.24em;
            color: var(--gold-ink);
            margin-bottom: 1.25rem;
        }
        .io-lane-intro {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }
        .io-cards {
            display: grid;
            gap: 1.5rem;
            grid-auto-rows: 1fr;
        }
        .io-cards--two { grid-template-columns: 1fr 1fr; }
        .io-cards--inputs { grid-template-columns: repeat(3, 1fr); }
        .io-input-card {
            display: flex;
            align-items: center;
            min-height: 72px;
            padding: 1rem 1.25rem;
            background: var(--bg-card);
            border: 1px solid var(--border-card-light);
            border-radius: var(--radius-figure);
            color: var(--text-primary);
            font-family: 'DM Sans', sans-serif;
            font-weight: 600;
            box-shadow: var(--elev-1);
        }
        .deal-types-covered { margin-top: 2.5rem; }
        .deal-type-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 1fr;
            gap: 1.5rem;
        }
        .io-card-note {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.75rem;
            margin-bottom: 0;
        }

        /* Public-safe provenance states (§7.7; PROOF-05) */
        .provenance-strip {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 2.5rem;
            list-style: none;
        }
        .provenance-state {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            color: var(--text-on-dark);
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-ledger);
            padding: 0.45rem 1rem;
        }

        /* Participant-use composition (§7.4; PROOF-06): one spanning
           evidence record feeding three equal participant areas. */
        .participant-use { max-width: 900px; margin: 3rem auto 0; }
        .participant-use-record {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-figure);
            background: var(--navy-surface);
            padding: 1rem 1.5rem;
            color: var(--text-heading-on-dark);
            font-weight: 600;
        }
        .participant-use-connectors {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 0.75rem;
        }
        .participant-use-tick {
            width: 1px;
            height: 18px;
            margin: 0 auto;
            background: rgba(184, 149, 90, 0.60);
        }
        .participant-use-areas {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 0.75rem;
        }
        .participant-use-area {
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-figure);
            background: var(--navy-surface);
            padding: 1.25rem 1.5rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .participant-use-area h3 {
            color: var(--text-heading-on-dark);
            font-size: 1.05rem;
            margin: 0;
        }
        .participant-beneficiaries {
            max-width: 640px;
            margin: 1.5rem auto 0;
            text-align: center;
            color: var(--text-on-dark);
            font-size: 0.9rem;
            line-height: 1.7;
        }

        /* How participants use the record (§7.9; STK-01) */
        .participant-groups {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            text-align: left;
        }
        .participant-group > h3 {
            font-family: 'EB Garamond', serif;
            font-size: 1.5rem;
            color: var(--text-heading-on-dark);
            margin-bottom: 1.25rem;
        }
        .participant-card-grid {
            display: grid;
            grid-auto-rows: 1fr;
            gap: 1.5rem;
        }
        .participant-card-grid--teams,
        .participant-card-grid--workflow {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .participant-card-grid--partners {
            grid-template-columns: minmax(0, 1fr);
        }
        .participant-group .who-card {
            display: flex;
            flex-direction: column;
            margin: 0;
        }
        .who-card h4 {
            font-size: 1.05rem;
            color: var(--accent);
            margin-bottom: 0.6rem;
            letter-spacing: 0.04em;
        }
        .participant-link { margin-top: auto; padding-top: 1rem; }
        .participant-link a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            color: var(--accent);
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            border-bottom: 1px solid rgba(184, 149, 90, 0.5);
        }
        .participant-link a:hover { opacity: 0.8; }

        /* Workflow-incorporation strip (§11; PROOF-07 — no API, sync,
           dashboard, or vendor claims) */
        .workflow-strip { margin-top: 1.5rem; }
        .workflow-strip-flow {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        .workflow-strip-flow li {
            position: relative;
            border: 1px solid var(--border-card-dark);
            border-radius: var(--radius-ledger);
            padding: 0.6rem 0.9rem;
            font-size: 0.85rem;
            color: var(--text-on-dark);
        }
        .workflow-strip-flow li + li::before {
            content: '\2192';
            position: absolute;
            left: -1.3rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent);
        }
        .workflow-strip-caption {
            margin-top: 1rem;
            font-size: 0.85rem;
            color: var(--text-on-dark);
            line-height: 1.65;
        }

        /* Sample card previews (§10 samples: the business card previews
           p.19; the property card alone previews property p.15) */
        .sample-link--preview {
            flex-direction: column;
            padding: 1rem;
            gap: 0.75rem;
        }
        .sample-preview {
            display: block;
            width: 220px;
            height: auto;
            border-radius: 4px;
            border: 1px solid rgba(184, 149, 90, 0.35);
        }

        /* Teams & Partners path beside the single-deal price (§7.12) */
        .pricing-teams {
            max-width: 640px;
            margin: 2rem auto 0;
            text-align: center;
        }
        .pricing-teams a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid rgba(184, 149, 90, 0.5);
        }
        .pricing-teams a:hover { opacity: 0.8; }

        /* Inline text link on light fields (Package 6: AA ink gold) */
        .text-link {
            color: var(--gold-ink);
            text-decoration: none;
            border-bottom: 1px solid rgba(125, 98, 48, 0.5);
            transition: color var(--motion-hover);
        }
        .text-link:hover { color: var(--gold-ink-hover); }

        /* Final CTA (§7.14) */
        .final-cta-section {
            background: var(--bg-primary);
            text-align: center;
        }
        .final-cta-section .section-header { margin-bottom: 1.5rem; }

        /* Package 2 responsive: every multi-column composition becomes
           one logical column, reading order preserved */
        @media (max-width: 900px) {
            .proof-grid,
            .participant-use-areas,
            .deal-type-cards { grid-template-columns: 1fr; }
            .participant-card-grid--teams,
            .participant-card-grid--workflow { grid-template-columns: 1fr; }
            .io-cards--two,
            .io-cards--inputs { grid-template-columns: 1fr; }
            .participant-use-connectors { display: none; }
        }
        @media (max-width: 768px) {
            .rail {
                flex-direction: column;
                align-items: center;
                gap: 1.75rem;
            }
            .rail-stage + .rail-stage::before {
                content: '\2193';
                left: 50%;
                top: -1.6rem;
                transform: translateX(-50%);
            }
            .sample-preview { width: 100%; }
        }


        /* === WEBSITE train Package 3 (spec §9) — texture: the paper
           grain on large ivory marketing fields + the ledger grid in
           the source-to-decision proof section === */

        /* Paper grain (§9 texture): large ivory marketing fields ONLY.
           Rendered opacity 1.8% (hard maximum 2.5%); halved on narrow
           mobile; removed under reduced-transparency or forced-colors.
           Never on forms, tables, legal pages, operational states,
           buttons, sample-report images, or small cards — the opaque
           cards and proof crops sit above it untouched. */
        #source-to-decision, #pipeline, #proof, #process, #questions {
            position: relative;
        }
        #source-to-decision::before, #pipeline::before, #proof::before,
        #process::before, #questions::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('/static/img/paper-grain.png');
            background-repeat: repeat;
            opacity: 0.018;
            pointer-events: none;
        }
        #source-to-decision .section-inner, #pipeline .section-inner,
        #proof .section-inner, #process .section-inner,
        #questions .section-inner {
            position: relative;
            z-index: 1;
        }

        /* Ledger-grid motif (§9): in the source-to-decision proof
           section the field is ivory, so the lines are navy at a
           maximum of 3% opacity */
        #source-to-decision::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgba(15, 23, 42, 0.015) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(15, 23, 42, 0.015) 1px, transparent 1px),
                linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
            background-size: 48px 48px, 48px 48px, 192px 192px, 192px 192px;
        }

        @media (max-width: 768px) {
            /* §9: on narrow mobile the grain opacity halves */
            #source-to-decision::before, #pipeline::before, #proof::before,
            #process::before, #questions::before {
                opacity: 0.009;
            }
        }
        @media (prefers-reduced-transparency: reduce) {
            /* §9: the grain disappears under reduced transparency */
            #source-to-decision::before, #pipeline::before, #proof::before,
            #process::before, #questions::before {
                display: none;
            }
        }
        @media (forced-colors: active) {
            /* §9: the grain is removed under forced colors */
            #source-to-decision::before, #pipeline::before, #proof::before,
            #process::before, #questions::before {
                display: none;
            }
        }
        /* the ToS/checkout component rules moved to northscope.css
           (P16 1c: the component is shared site-wide). */

        /* ── P16 1g: the residual inline styles live here */
        .coverage-lead--plain { font-style: normal; }
        .sample-note--plain {
            list-style: none;
            margin-top: 0.5rem;
            font-style: normal;
        }
        .pricing-card .cta-btn.primary {
            width: 100%;
            margin-top: 1.5rem;
        }