:root {
            /* Retinted 2026-09-01 from a near-black navy (#0c1826/#15304c)
               to genuine blues, matching img/og-image.png's flat card —
               the old near-black read as generic "enterprise SaaS navy"
               rather than an actual brand color. --ink/--ink-2 drive every
               dark surface (nav, subnav, dark alternating sections,
               final-cta); --navy drives headings/logo text on light
               backgrounds and the footer surface. */
            --ink: #0e2c50; --ink-2: #1a3f6e; --navy: #154282;
            /* --green: solid FILL only (buttons, .step-num) — same
               reasoning as shared.css's own --green (see that file's
               comment), stays this value in both themes since it never
               carries text on its own background. --green-text: the
               same brass hue used AS text/icon color elsewhere on this
               page (nav links, checkmarks, pricing accents) — a
               genuinely separate role from the button fill above, so it
               gets its own token instead of overloading --green like
               before 2026-09-06, and can brighten independently for
               dark mode without breaking every button that uses --green
               as a fill. Both start at the same hex since light mode
               doesn't need the split — only dark mode does. */
            --green: #956d2d; --green-text: #956d2d; --green-light: #f2e4c8; --green-bright: #f0b429; /* --green darkened 2026-09-05, matches shared.css — see that file's comment */
            --amber: #a8552c; --amber-light: #f1dfcf;
            /* Dark orange — distinct from --amber (that's a muted rust,
               used as a small text/border accent, not built to carry a
               full-bleed background). Introduced 2026-08-16 for
               legal.css's .policy-hero, which the user wanted to keep
               dark (unlike the .page-hero family fixed the same session
               — see that fix's comment above) but recolored off navy so
               it doesn't reintroduce the same "blends into the dark nav"
               problem. #9a3412/#c2410c both hold >5:1 contrast with white
               text, so headings and body copy inside the hero stay
               readable. */
            --rust: #9a3412; --rust-light: #fbe4d4;
            /* Neutral grey, not the old blue-tinted slate (#f8fafc) —
               matches shared.css's --bg on the logged-in app, so the
               public and authenticated sides of the site read as one
               product instead of two different shades of "almost
               white." */
            --paper: #f0f0f0; --white: #ffffff; --ash: #5b6472;
            /* Neutral grey, not the old blue-tinted slate (#e2e8f0) —
               matches shared.css's --border for the same reason. */
            --line: #e4e4e7; --line-dark: rgba(255,255,255,0.12);
            --blue: #37567c; --teal: #2b6e63;
            /* Subtle neutral fill for a hover/track/badge surface (tab
               track, closed-ticket badge, button hover) — its own token
               rather than reusing --paper, since this needs to visibly
               sit ON TOP of --paper/--white, not just match the page. */
            --surface: #f1f5f9;
            /* Cards sit on --paper as pure white + a soft shadow (see
               --shadow below) rather than a color difference — same
               elevation pattern as shared.css's .card on the app side. */
            --shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
            /* Aliases for the older token names some public pages still use
               internally (register.php, pricing pages, etc.) — lets those
               pages drop their own duplicate :root block and inherit this
               one unchanged, without a rule-by-rule var() rename. */
            --bg: var(--paper); --slate: var(--ash); --border: var(--line); --text: #1e293b;
        }

        /* ── Dark theme (public site) ──
           Same 3-state pattern as shared.css on the authenticated side —
           see head.php's own comment for how $publicTheme is resolved
           (a logged-in visitor's real saved preference, a 'theme' cookie
           for an anonymous one, or nothing at all, in which case ONLY
           this file's prefers-color-scheme block (below) has any effect;
           the explicit [data-theme="dark"] block just below it is what
           wins once either path sets one). --ink/--ink-2/--rust/
           --line-dark/--green-bright all carry over unchanged — they're
           already dark fills or an accent bright enough for both
           themes, same reasoning as shared.css's --sidebar-bg/--navy-mid.
           --navy/--amber/--blue/--teal are pure TEXT/icon colors on
           this side of the site (unlike shared.css's same-named tokens,
           which are pure FILLS there — verified by grepping for every
           usage before assuming the same "keep it unchanged" fix from
           the authenticated side would apply here; it doesn't, these
           actually needed the opposite: brightening for legibility on a
           now-dark page). --green is the one token that genuinely has
           BOTH roles here (button fills AND icon/text color) — hence
           the --green/--green-text split added above instead of
           brightening --green itself, which would've broken every
           button using it as a fill. All the brightened text tokens
           pick up the same dark values as shared.css's matching -text
           tokens for consistency across both halves of the site. */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                color-scheme: dark;
                --navy: #d7e3f5;
                --green-text: #e3c78f; --green-light: rgba(149,109,45,.22);
                --amber: #e8b79a; --amber-light: rgba(168,85,44,.2);
                --rust-light: rgba(154,52,18,.22);
                --paper: #16181b; --white: #1e2126; --ash: #93a0b1;
                --surface: rgba(255,255,255,.07);
                --line: rgba(255,255,255,.09);
                --blue: #b7c9de; --teal: #9cd8cc;
                --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.55);
                --text: #dbe2ea;
            }
        }
        :root[data-theme="dark"] {
            color-scheme: dark;
            --navy: #d7e3f5;
            --green-text: #e3c78f; --green-light: rgba(149,109,45,.22);
            --amber: #e8b79a; --amber-light: rgba(168,85,44,.2);
            --rust-light: rgba(154,52,18,.22);
            --paper: #16181b; --white: #1e2126; --ash: #93a0b1;
                --surface: rgba(255,255,255,.07);
            --line: rgba(255,255,255,.09);
            --blue: #b7c9de; --teal: #9cd8cc;
            --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.55);
            --text: #dbe2ea;
        }
        html { overflow-x: hidden; max-width: 100%; }
        body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--text); line-height: 1.6; margin: 0; overflow-x: hidden; max-width: 100%; }
        /* 1160→1280 (2026-08-25): this is the shared container every public
           marketing page inherits (index, organizations, about-us, both
           pricing pages, privacy-policy, terms-of-service, support) — it
           was actually the narrowest of the site's three .container
           definitions, auth-login.css and register.css had already
           independently settled on 1200px for their own pages. Widening
           the one page-by-page component caps (organizations.css's .split/
           .privacy-callout/.steps, etc.) sit under can only go so far when
           the ceiling itself is this tight, which is why organizations.php
           and about-us.php kept reading as narrower than index.php even
           after those. 1280 is comfortably past all three previous values. */
        .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

        /* ── Skip link (WCAG 2.4.1 Bypass Blocks) ──
           Same off-screen-until-focused pattern as shared.css's .skip-link
           on the authenticated side, just using this side's own token
           names (--green-bright is this site's equivalent accent to
           shared.css's --gold-glow — see public-nav.php's logo mark).
           First focusable element in the DOM — see head.php, right after
           <body>. Target is #main-content, an empty anchor public-nav.php
           places right after its own </header> (every public page shares
           that one nav partial, but not a single shared content wrapper
           to put the id on directly). */
        .skip-link {
            position: absolute;
            top: -48px;
            left: 12px;
            z-index: 999;
            background: var(--ink);
            color: #fff;
            padding: 12px 20px;
            border-radius: 0 0 8px 8px;
            font-weight: 700;
            text-decoration: none;
            transition: top 0.15s ease;
        }
        .skip-link:focus {
            top: 0;
            outline: 3px solid var(--green-bright);
            outline-offset: -3px;
        }
        .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

        /* ── Nav ──
           PNC-style two-tier top nav: a dark bar of tier-1 sections
           (Personal / For Organizations / About), each opening a
           full-width second row of real links below — same system as
           the authenticated app's top-nav (see shared.css's .top-nav/
           .tn-* comments for the full reasoning), copied rather than
           shared via one file since the public site loads landing.css,
           not shared.css, and pulling the whole authenticated stylesheet
           in just for this would drag in a lot of unrelated app-only
           CSS. Token names below use landing.css's own (--ink/--ink-2/
           --green-bright) instead of shared.css's (--sidebar-bg/
           --sidebar-bg-2/--gold-glow) — same actual colors, just this
           file's existing names. */
        #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--green-bright); z-index: 200; transition: width 0.1s linear; }
        .logo { font-family: 'Inter', system-ui, sans-serif; font-size: 28px; font-weight: 700; color: var(--navy); text-decoration: none; display: flex; align-items: center; gap: 10px; }
        .logo-mark { flex-shrink: 0; display: block; }

        .top-nav { background: var(--ink); position: sticky; top: 0; z-index: 150; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
        .tn-inner { height: 76px; max-width: 1300px; margin: 0 auto; padding: 0 32px; display: flex; align-items: stretch; gap: 28px; }
        .tn-logo { font-family: 'Inter', system-ui, sans-serif; font-size: 24px; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; gap: 8px; letter-spacing: -0.3px; flex-shrink: 0; }
        .tn-logo-mark { flex-shrink: 0; display: block; }
        .tn-links { display: flex; align-items: stretch; gap: 4px; flex: 1; }
        .tn-link { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #dde6f0; text-decoration: none; font-size: 17px; font-weight: 500; padding: 12px 18px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; }
        .tn-link:hover { background: rgba(255,255,255,0.08); color: white; }
        /* Active/open tab: solid fill matching the sub-nav panel below
           (.tn-subnav uses the same --ink) plus a gold bar flush against
           the bar's real top edge — align-items:stretch above is what
           makes top:0 here land on the bar's top, not just the button's
           own shorter box. Square all around, not just top-rounded:
           .tn-subnav is a plain rectangle, so rounded bottom corners
           would leave two gaps right at the seam. */
        .tn-link.active, .tn-link.open { background: var(--ink); color: white; border-radius: 0; }
        .tn-link.active::before, .tn-link.open::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green-bright); }
        .tn-chevron { flex-shrink: 0; opacity: 0.7; transition: transform 0.15s; }
        .tn-group-trigger.open .tn-chevron { transform: rotate(180deg); }

        /* Sub-nav panels — full-width second row, one per tier-1 section.
           Unlike the authenticated app's version, one of these is always
           open (server-rendered via $activeSection, no click needed) —
           PNC always shows the current section's second row rather than
           starting collapsed, and public-nav.js's JS respects that
           instead of treating "none open" as a valid state. */
        /* No position:absolute here, unlike the authenticated app's copy
           of this rule (shared.css) — there, a subnav panel is a
           temporary click-triggered overlay that's fine floating over
           content. Here, one panel is ALWAYS open by design (matching
           PNC — Personal is open by default on load), so it has to
           participate in normal document flow and actually push the
           page content below it down, not float over it. */
        .tn-subnav { display: none; background: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
        .tn-subnav.open { display: block; }
        .tn-subnav-inner { display: flex; align-items: center; gap: 4px; max-width: 1300px; margin: 0 auto; padding: 16px 32px; }
        .tn-subnav-inner a { display: inline-flex; align-items: center; gap: 6px; color: #b8c4d4; text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 6px; transition: background 0.15s, color 0.15s; }
        .tn-subnav-inner a:hover { background: rgba(255,255,255,0.1); color: white; }
        .tn-subnav-inner a.active { color: white; background: rgba(240,180,41,0.14); }

        .tn-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
        .tn-hamburger { display: none; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.08); border: none; align-items: center; justify-content: center; color: white; cursor: pointer; }
        .tn-hamburger svg { width: 20px; height: 20px; }
        .tn-hamburger:hover { background: rgba(255,255,255,0.16); }

        /* ── Light/dark toggle ──
           Sits on .top-nav, which is var(--ink) in both themes (see that
           rule's own comment), so this button's chrome — translucent
           white, same recipe as .tn-hamburger right next to it — never
           needs to change between themes, only which of its two icons
           shows. Default (no explicit choice, "system") follows the OS
           the same way an explicit light/dark choice would once one
           exists — see the prefers-color-scheme block at the bottom of
           this file for the swap logic, mirrored here 3 ways same as
           every other themed token in this app. */
        .tn-theme-toggle {
            width: 40px; height: 40px; border-radius: 8px;
            background: rgba(255,255,255,0.08); border: none;
            display: flex; align-items: center; justify-content: center;
            color: white; cursor: pointer; flex-shrink: 0;
            transition: background 0.15s;
        }
        .tn-theme-toggle:hover { background: rgba(255,255,255,0.16); }
        .tn-theme-toggle svg { width: 19px; height: 19px; }
        .tn-theme-icon-light { display: none; }
        :root[data-theme="dark"] .tn-theme-icon-dark { display: none; }
        :root[data-theme="dark"] .tn-theme-icon-light { display: block; }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) .tn-theme-icon-dark { display: none; }
            :root:not([data-theme="light"]) .tn-theme-icon-light { display: block; }
        }
        .tn-mobile-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

        /* ── Mobile menu (off-canvas drawer) ──
           Redesigned 2026-08-19 to match the authenticated app's own
           sidebar-nav.php drawer redesign the same day ("the mobile menu
           for the public side needs the same treatment") — same recipe:
           a real off-canvas panel (not an absolutely-positioned dropdown
           sitting under the header), a dimming/click-to-close backdrop,
           a body scroll lock, big centered text links with hairline
           separators, and collapsible sections instead of one long flat
           list. Slides in from the right (the hamburger that opens it
           sits on the right of the header) rather than the left the
           authenticated drawer uses — just enough visual distinction
           that the two never get confused for the same surface, while
           using this file's own --ink/--ink-2/--green-bright tokens
           (identical values to shared.css's --sidebar-bg/-bg-2/
           --gold-glow) so the palette still matches. Class names keep
           the existing tn-mobile-* prefix rather than borrowing
           shared.css's .sidebar-*/.nav-* names — this is a genuinely
           separate component (public-nav.php, no PHP session state),
           not a copy of the authenticated one.

           z-index 210/211, not 199/200 — #scroll-progress (index.php
           only) is itself a fixed, full-width z-index:200 bar that comes
           later in that page's DOM, so at an equal z-index it would
           paint its thin 3px strip on top of the open drawer. Clearing
           it outright avoids relying on DOM order between two unrelated
           components. */
        .tn-mobile-overlay { display: none; position: fixed; inset: 0; z-index: 210; background: rgba(6, 12, 20, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .tn-mobile-overlay.open { opacity: 1; pointer-events: auto; }
        body.tn-mobile-open { overflow: hidden; }

        .tn-mobile-links {
            display: none;
            position: fixed;
            top: 0; right: 0;
            width: min(440px, 100vw);
            height: 100vh;
            background: var(--ink);
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 0 0 24px;
            box-shadow: -4px 0 15px rgba(0,0,0,0.25);
            z-index: 211;
            overflow-y: auto;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .tn-mobile-links.open { transform: translateX(0); }

        .tn-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 8px; }
        .tn-mobile-logo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: white; text-decoration: none; }
        .tn-mobile-close { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); border: none; display: flex; align-items: center; justify-content: center; color: #b8c4d4; cursor: pointer; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
        .tn-mobile-close svg { width: 18px; height: 18px; }
        .tn-mobile-close:hover { background: rgba(255,255,255,0.16); color: white; }

        .tn-mobile-group { margin-bottom: 4px; }
        .tn-mobile-group-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: none; border: none; font-family: inherit; cursor: pointer; padding: 16px 20px; }
        .tn-mobile-group-toggle:hover { background: rgba(255,255,255,0.05); }
        .tn-mobile-group-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a97a8; }
        .tn-mobile-group.open .tn-mobile-group-label { color: white; }
        .tn-mobile-chevron { width: 14px; height: 14px; color: var(--slate); flex-shrink: 0; transition: transform 0.2s ease; }
        .tn-mobile-group.open .tn-mobile-chevron { transform: rotate(180deg); }

        .tn-mobile-group-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
        .tn-mobile-group.open .tn-mobile-group-panel { grid-template-rows: 1fr; }
        .tn-mobile-group-panel-inner { overflow: hidden; min-height: 0; }

        .tn-mobile-links a.tn-mobile-item { display: flex; align-items: center; justify-content: center; padding: 16px 20px; color: #c3cbd6; text-decoration: none; font-size: 18px; font-weight: 600; text-align: center; transition: background 0.15s, color 0.15s; border-top: 1px solid rgba(255,255,255,0.07); }
        .tn-mobile-links a.tn-mobile-item:hover { background: rgba(255,255,255,0.06); color: white; }
        .tn-mobile-links a.tn-mobile-item.active { color: var(--green-bright); background: rgba(240,180,41,0.08); }

        .tn-mobile-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 4px 20px 8px; }

        /* width explicit, not left to align-items:stretch — the existing
           ≤700px ".btn { width: 100% }" rule (further down, for the
           page's other mobile buttons) also matches this one, and 100%
           of the drawer's own width PLUS this rule's 20px side margins
           overflowed past the drawer's right edge with nothing clipping
           it (only overflow-y is set on .tn-mobile-links) — that's what
           was pushing "Go to Home"/"Log In" off the page. */
        .tn-mobile-cta.btn-primary { margin: 12px 20px 0; width: calc(100% - 40px); justify-content: center; }

        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.2s ease; border: none; cursor: pointer; }
        .btn-primary { background: var(--green); color: white; }
        /* #276128 was a true green, stale from before --green became a
           tan/gold token (see shared.css's :root and its matching
           .btn-primary:hover fix, 2026-08-12) — #7a5a26 is the darkened-
           tan value the rest of the app already standardized on. */
        .btn-primary:hover { background: #7a5a26; transform: translateY(-1px); }
        .btn-ghost { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.28); }
        .btn-ghost:hover { background: rgba(255,255,255,0.16); }
        .btn-ghost.light { background: var(--white); color: var(--navy); border: 1px solid var(--line); }
        .btn-ghost.light:hover { background: var(--paper); }
        /* Was pasted identically into about-us.css and organizations.css
           (their dark .about-hero/.org-hero sections) — consolidated here
           since both pages already load this file unconditionally. */
        .btn-ghost-dark { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
        .btn-ghost-dark:hover { background: rgba(255,255,255,0.1); }
        .btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
        .btn-outline:hover { background: var(--ink); color: white; }

        /* ── Hero (from index2: doors-rack signature + shield tagline + trust card) ──
           White background so the sticky dark .top-nav meets a light
           section right below it instead of another dark block — the two
           colored bars were blending into each other with no visible seam.
           The .page-hero/.about-hero/.org-hero family below (2026-08-16)
           now gets the same light treatment for the same reason — it had
           the identical nav/hero collision on organizations.php,
           organization-pricing.php, about-us.php, and personal-pricing.php,
           just never fixed there when this page's hero was. .eyebrow and
           .btn-ghost below are shared with that family too, so their
           light-bg treatment here is scoped under .hero/.page-hero/
           .about-hero/.org-hero rather than changed at the base rule
           (which stays translucent-on-dark for genuinely dark surfaces
           like .top-nav itself). */
        .hero { position: relative; background: var(--white); color: var(--text); padding: 32px 0 116px; overflow: hidden; }
        .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: start; }
        @keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
        @media (prefers-reduced-motion: no-preference) {
            .eyebrow, .hero h1, .hero p.lede, .hero-ctas, .hero-cta-group {
                opacity: 0;
                animation: heroFadeUp 0.6s ease forwards;
            }
            .eyebrow { animation-delay: 0.05s; }
            .hero h1 { animation-delay: 0.15s; }
            .hero p.lede { animation-delay: 0.28s; }
            .hero-ctas, .hero-cta-group { animation-delay: 0.4s; }
        }
        .eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px; }
        .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); }
        .hero .eyebrow, .page-hero .eyebrow, .about-hero .eyebrow, .org-hero .eyebrow { background: var(--paper); border-color: var(--line); }
        .hero h1 { font-family: 'Inter', system-ui, sans-serif; font-size: 46px; line-height: 1.14; margin: 0 0 18px; max-width: 560px; }
        .hero h1 em { font-style: normal; color: var(--blue); }
        .hero p.lede { font-size: 17.5px; max-width: 520px; margin: 0 0 20px; color: var(--slate); }
        /* Still used by organizations.php/organization-pricing.php's own
           .org-hero CTAs — index.php's hero moved to .hero-cta-group
           above, but this pair's original layout rule stays for the
           pages that still render two independent .btn elements here.
           margin-top matches .final-cta p's own margin-bottom below,
           since .org-hero .lede has no bottom margin of its own. */
        .hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
        .hero .btn-ghost { background: var(--paper); color: var(--navy); border: 1px solid var(--line); }
        .hero .btn-ghost:hover { background: var(--line); }

        /* Right column of .hero-content: just the intro screenshot,
           borderless so it blends straight into the page background. */
        .hero-right { display: flex; flex-direction: column; }
        .hero-intro-image { width: 100%; height: auto; display: block; }
        .hero-trust-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 28px; box-shadow: 0 12px 30px -22px rgba(0,0,0,0.18); }
        .hero-trust-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
        .hero-trust-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
        .hero-trust-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(--slate); line-height: 1.5; }
        .hero-trust-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(240,180,41,0.12); color: var(--amber); display: flex; align-items: center; justify-content: center; }
        .hero-trust-icon svg { width: 15px; height: 15px; }
        .hero-trust-cta { display: block; text-align: center; background: var(--green-bright); color: var(--ink); font-weight: 700; padding: 13px; border-radius: 10px; text-decoration: none; margin-bottom: 10px; }
        .hero-trust-login { text-align: center; font-size: 13px; color: var(--ash); margin: 0; }
        .hero-trust-login a { color: var(--green-text); }

        /* ── Hero CTAs: one connected control, not two competing buttons ──
           Personal and Organization used to be two separate .btn elements
           with independent styles floating apart — read as two different
           products. Sharing one rounded/shadowed outer shell with a hard
           seam between halves (instead of a gap) makes clear these are two
           doors into the same thing, matching the "Your view / Coach view"
           tabs on .hero-preview below. */
        .hero-cta-group { display: inline-flex; align-items: stretch; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 28px -16px rgba(12,24,38,0.35); margin-top: 4px; }
        .hero-cta-pill { display: flex; flex-direction: column; gap: 3px; padding: 15px 26px; text-decoration: none; transition: background 0.15s ease; }
        .hero-cta-pill-title { font-size: 15.5px; font-weight: 700; }
        .hero-cta-pill-sub { font-size: 11.5px; font-weight: 500; opacity: 0.78; }
        .hero-cta-pill-primary { background: var(--green); color: white; }
        .hero-cta-pill-primary:hover { background: #7a5a26; }
        .hero-cta-pill:not(.hero-cta-pill-primary) { background: var(--ink); color: white; border-left: 1px solid rgba(255,255,255,0.16); }
        .hero-cta-pill:not(.hero-cta-pill-primary):hover { background: var(--ink-2); }
        .hero-cta-note { font-size: 12.5px; color: var(--ash); margin: 12px 0 0; }

        /* ── Hero product preview ──
           Replaces the old doors-rack icon grid. This is a faithful
           recreation of the real home.php "Goals / Pending / Secure"
           dashboard — same card shell, badge, and accent-color language as
           .focus-item in home.css — framed like a browser window, so the
           hero shows the actual product instead of an icon metaphor for
           it. No max-width on purpose: fills the same width as
           .hero-content above it, same reasoning the old .doors-rack had. */
        .hero-preview { width: 100%; margin-top: 40px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 34px 64px -30px rgba(12,24,38,0.4), 0 0 0 1px rgba(12,24,38,0.05); }
        .hp-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
        .hp-chrome-dots { display: flex; gap: 6px; flex-shrink: 0; }
        .hp-chrome-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d4d4d8; }
        .hp-chrome-url { font-size: 11.5px; color: var(--ash); background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 4px 14px; }
        .hp-chrome-tabs { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
        .hp-chrome-tab { font-size: 11.5px; font-weight: 600; color: var(--ash); padding: 5px 12px; border-radius: 99px; }
        .hp-chrome-tab-active { background: var(--ink); color: white; }
        .hp-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px; background: var(--paper); }
        .hp-col-label { font-size: 11.5px; font-weight: 700; color: var(--hp-accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
        .hp-card { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--hp-accent); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
        .hp-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
        .hp-card-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--hp-accent-light); color: var(--hp-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .hp-card-icon svg { width: 13px; height: 13px; }
        .hp-card-title { font-size: 11.5px; font-weight: 700; color: var(--text); flex: 1; line-height: 1.3; }
        .hp-card-badge { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 99px; background: var(--hp-accent-light); color: var(--hp-accent); white-space: nowrap; }
        .hp-card-bar { height: 6px; border-radius: 99px; background: var(--hp-accent-light); overflow: hidden; }
        .hp-card-bar i { display: block; height: 100%; border-radius: 99px; background: var(--hp-accent); }
        .hp-card-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 8px; }
        .hp-card-check { width: 28px; height: 28px; border-radius: 50%; background: var(--hp-accent-light); color: var(--hp-accent); display: flex; align-items: center; justify-content: center; }
        .hp-card-check svg { width: 14px; height: 14px; }
        .hp-card-empty-text { font-size: 10.5px; font-weight: 600; color: var(--ash); line-height: 1.4; }
        @media (prefers-reduced-motion: no-preference) {
            .hero-preview { opacity: 0; animation: heroFadeUp 0.6s ease forwards; animation-delay: 0.5s; }

            /* Bar fill-in — starts once the preview has faded/settled in.
               Deliberately has no "to" keyframe: per the CSS Animations
               spec, an unspecified 100% falls back to the underlying
               value, i.e. whatever width the element already has from
               .u-337dc0f8/.u-51d488e4 in index.php. That keeps those two
               utility classes as the single source of each bar's target
               width — this only adds the 0→target motion on top. "both"
               fill-mode holds the bar at 0 through the animation-delay
               instead of flashing full width first. */
            .hp-card-bar i { animation: hpBarFill 1.1s cubic-bezier(.16,.84,.44,1) both; animation-delay: 1s; }
            @keyframes hpBarFill { from { width: 0; } }

            /* Pending-badge pulse — a quiet, continuous breathing ring
               (same box-shadow-ring technique as home.css's
               focusDotGlowPulse) so the one actionable number in the
               preview reads as "live", not just static copy. Starts
               after the bars finish filling so the one-time entrance
               motion resolves before the ambient loop begins. */
            .hp-badge-pulse { animation: hpBadgePulse 2.2s ease-in-out infinite; animation-delay: 1.6s; }
            @keyframes hpBadgePulse {
                0%, 100% { box-shadow: 0 0 0 0 var(--hp-accent-light); }
                50%      { box-shadow: 0 0 0 5px var(--hp-accent-light); }
            }
        }

        /* ── Sections (shared) ── */
        /* position:relative so any section can host an absolutely-positioned
           .section-shadow scrim (see below) at its own bottom edge without
           every page having to opt in individually. */
        .section { padding: 84px 0; position: relative; }
        .section-header { text-align: center; max-width: 680px; margin: 0 auto 46px; }
        .section-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
        .section-header h2 { font-size: 32px; color: var(--navy); margin: 0 0 12px; }
        .section-header p { font-size: 17px; color: var(--slate); margin: 0; }

        /* index.php alternates white/navy backgrounds down the page from
           "How Forzara works" on: #how (navy) → shield-band (white) →
           #tools (navy) → #pricing (white) → #faq (navy) → final CTA
           (white). #how/#tools/#faq keep the shared .section-header/
           .showcase-tab styling above (built for a light background) as
           their default, so each gets its own dark-bg override here,
           scoped by id+class so it can't leak onto other pages that reuse
           those same class names (e.g. organizations.php's own showcase
           section, support.php's #faq).

           Stays a flat fill rather than a gradient, simply to match
           #how's own flat var(--ink) rather than introduce an inconsistency
           between three sections that share the same dark-bg override. */
        #how.section, #tools.section, #faq.section { background: var(--ink); }
        #how.section .section-eyebrow, #tools.section .section-eyebrow, #faq.section .section-eyebrow { color: var(--green-bright); }
        #how.section .section-header h2, #tools.section .section-header h2, #faq.section .section-header h2 { color: white; }
        #how.section .section-header p, #tools.section .section-header p, #faq.section .section-header p { color: #b8c4d4; }

        /* ── Shield band (from index2) ── */
        .shield-band { background: var(--white); color: var(--text); padding: 92px 0 110px; position: relative; }
        /* .section-eyebrow is display:inline-block and relies on a
           text-align:center parent (normally .section-header) to center
           itself — shield-band puts it straight in .container instead,
           which has no text-align, so it sat left-aligned above the
           .shield-statement/.shield-sub below it (both set their own
           text-align:center directly). Scoped here rather than changing
           the shared .section-eyebrow rule, which every other page's
           .section-header usage still depends on staying inline-block. */
        .shield-band .section-eyebrow { display: block; text-align: center; }

        /* ── Section seam shadow ──
           Generic, reusable seam treatment for where two full-bleed
           section backgrounds meet — without it, every such seam is a flat
           color-swap edge, reading as stacked template sections rather
           than one designed page. Drop `<div class="section-shadow">` as
           the last child of a section (a sibling of .container, right
           before the closing tag) and it adds a soft downward-fading
           scrim across the last ~28px of that section, right before the
           flat color-swap into whatever comes next — a plain, straight
           seam, with a shadow doing the depth work instead of a shape.

           Third design for this seam, all same day (2026-09-05): first a
           symmetric bezier "hill/valley" wave, then a straight diagonal
           cut — both explicitly rejected as reading like a no-code/AI
           template's default section divider. A shadow scrim doesn't have
           that tell at all, and it's simpler than either: no path math, no
           light/dark alternation to track, and (unlike the wave/diagonal,
           which had to fill-match the color of whatever came next) it
           never needs to know what section follows, so the exact same rule
           works at every seam without per-seam color bookkeeping. Renamed
           from .section-wave/.section-wave-diagonal to .section-shadow
           since the markup at every call site changed anyway (svg+path →
           div) — no separate rename pass needed. */
        .section-shadow { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(to bottom, rgba(15,23,42,0) 0%, rgba(15,23,42,0.16) 100%); pointer-events: none; }

        .shield-statement { font-family: 'Inter', system-ui, sans-serif; font-size: 34px; font-weight: 700; line-height: 1.3; max-width: 760px; margin: 0 auto 20px; text-align: center; }
        .shield-sub { font-size: 16px; color: var(--slate); max-width: 660px; margin: 0 auto 48px; text-align: center; line-height: 1.75; }
        .shield-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
        .shield-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; text-align: center; box-shadow: 0 12px 30px -22px rgba(0,0,0,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .shield-item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(12,24,38,0.22); }
        .shield-item .shield-icon { color: var(--amber); margin-bottom: 12px; }
        .shield-item .shield-icon svg { width: 24px; height: 24px; margin: 0 auto; }
        .shield-item h3 { font-size: 15px; color: var(--navy); margin: 0 0 8px; }
        .shield-item p { font-size: 13.5px; color: var(--slate); margin: 0; line-height: 1.6; }

        /* ── Shared light page hero + dark final CTA ──
           Identical rules used to live duplicated in about-us.css's
           .about-hero and organizations.css's .org-hero (and in both
           files' .final-cta) — moved here as the one canonical version.
           Pages can still use their own name (.about-hero/.org-hero) as
           an alias below, or take .page-hero/.final-cta directly like
           personal-pricing.php does, without pulling in an unrelated
           page's CSS file just to get the hero pattern.

           Was a dark radial gradient (#16233b → var(--ink)) until
           2026-08-16 — right under the sticky dark .top-nav, it read as
           one blended dark mass with no visible seam between nav and
           hero (the exact bug .hero above was already fixed for). Now
           light, same fix, same reason. .final-cta below is untouched —
           it sits at the bottom of the page, not against the nav, so it
           has no seam to lose and keeps the dark accent for contrast at
           the end of the page. */
        .page-hero, .about-hero, .org-hero { position: relative; background: var(--white); color: var(--text); padding: 76px 0 64px; text-align: center; overflow: hidden; }
        /* h1/lede max-widths bumped 760/620→880/720 (2026-08-25), same
           "narrower than it needs to be" pass as .container above — these
           three text-only heroes (organizations.php, about-us.php,
           personal-pricing.php, organization-pricing.php all share this
           rule) had no visual element to fill the width the way index.php's
           hero does, so the cap on the text itself mattered more here. */
        .page-hero h1, .about-hero h1, .org-hero h1 { font-family: 'Inter', system-ui, sans-serif; font-size: 44px; line-height: 1.15; margin: 0 auto 20px; font-weight: 800; max-width: 880px; }
        .page-hero h1 em, .about-hero h1 em, .org-hero h1 em { font-style: normal; color: var(--blue); }
        .page-hero p.lede, .about-hero p.lede, .org-hero .lede { font-size: 18px; max-width: 720px; margin: 0 auto; color: var(--slate); }

        /* ── Two-column hero variant (2026-08-25) ──
           Widening .container/h1/lede (above) was "an improvement but not
           a solution" per Andrew — a single centered column of text still
           reads small on a wide page no matter its own max-width, because
           it leaves two matching empty gutters instead of using the page
           like a page. Opt-in wrapper (.hero-split, inside .container,
           around the existing h1/lede/hero-ctas/etc.) rather than changing
           .page-hero/.about-hero/.org-hero's centered behavior outright —
           personal-pricing.php/organization-pricing.php's shorter,
           CTA-light heroes weren't part of this complaint and still read
           fine centered. Right column reuses .hero-trust-card, which
           turns out to be exactly this: it's the original index.php hero's
           own sidebar component (see the "Hero (from index2...)" comment
           above), orphaned when that hero was redesigned, currently just
           reused standalone on the two pricing pages. Putting it back in
           a hero, on the two pages whose heroes are genuinely bare
           centered text, is the component doing the job it was built for. */
        .hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; text-align: left; }
        .hero-split h1, .hero-split .lede { max-width: none; margin: 0 0 18px; text-align: left; }
        .hero-split .hero-ctas { justify-content: flex-start; margin-top: 8px; }
        .hero-split .org-hero-note { text-align: left; }
        @media (max-width: 860px) {
            .hero-split { grid-template-columns: 1fr; text-align: center; gap: 36px; }
            .hero-split h1, .hero-split .lede { text-align: center; margin-left: auto; margin-right: auto; }
            .hero-split .hero-ctas { justify-content: center; }
            .hero-split .org-hero-note { text-align: center; }
        }

        /* position:relative so a .section-shadow can sit at this section's
           own bottom edge (every page that uses .final-cta puts the footer
           right after it — see the .section-shadow usage at each page's
           markup). Flat fill, not a gradient, for the same reason
           #how/#tools/#faq stay flat above: keeps every dark section on
           this page a consistent, uniform var(--ink). */
        .final-cta { position: relative; background: var(--ink); color: white; text-align: center; padding: 80px 0; }
        .final-cta h2 { color: white; font-family: 'Inter', system-ui, sans-serif; font-size: 32px; margin: 0 0 16px; }
        .final-cta p { font-size: 17px; max-width: 540px; margin: 0 auto 32px; color: #cbd5e1; }
        .final-cta .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

        /* ── Pricing ── */
        .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; }
        .pricing-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; box-shadow: 0 12px 30px -22px rgba(0,0,0,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(12,24,38,0.22); }
        .pricing-card-featured { border-color: var(--green); box-shadow: 0 16px 36px -20px rgba(169,123,51,0.28); }
        .pricing-card-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
        .pricing-price { font-family: 'Inter', system-ui, sans-serif; font-size: 32px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
        .pricing-price span { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--ash); margin-left: 4px; }
        .pricing-desc { font-size: 14.5px; color: var(--slate); margin: 0 0 20px; line-height: 1.65; }
        .pricing-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
        .pricing-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
        .pricing-list li svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--green-text); margin-top: 1px; }

        /* ── How it works (4-step path, from index2) ── */
        .path-list { max-width: 760px; margin: 0 auto; position: relative; }
        .path-list::before { content: ""; position: absolute; left: 25px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
        .path-step { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
        .path-step:last-child { border-bottom: none; }
        .path-num { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--white); border: 2px solid var(--amber); color: var(--amber); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
        .path-step h3 { font-size: 17px; color: var(--navy); margin: 0 0 6px; }
        .path-step p { font-size: 14.5px; color: var(--slate); margin: 0; }
        /* #how sits on the navy band (see the alternating-sections rules
           above .shield-band) — the num circle stays a light badge as-is,
           but the connecting line and copy need a dark-bg pass. */
        #how.section .path-list::before { background: var(--line-dark); }
        #how.section .path-step { border-bottom-color: var(--line-dark); }
        #how.section .path-step h3 { color: white; }
        #how.section .path-step p { color: var(--slate); }

        /* ── Showcase (tabs + sliding image panel, from index3) ── */
        .showcase-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
        .showcase-tabs { display: flex; flex-direction: column; gap: 6px; position: relative; }
        .showcase-tab-indicator { position: absolute; left: 0; width: 3px; background: var(--green-bright); border-radius: 3px; transition: top 0.28s cubic-bezier(.4,0,.2,1), height 0.28s cubic-bezier(.4,0,.2,1); }
        .showcase-tab { text-align: left; padding: 16px 18px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--slate); transition: all 0.2s ease; }
        .showcase-tab:hover { background: var(--paper); }
        .showcase-tab.active { background: var(--paper); border-color: var(--line); box-shadow: 0 4px 15px rgba(0,0,0,0.06); color: var(--navy); }
        .showcase-tab-head { display: flex; align-items: center; gap: 9px; }
        .showcase-tab-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--green-text); }
        .showcase-tab-sub { display: block; font-size: 13px; font-weight: 400; color: var(--ash); margin-top: 4px; line-height: 1.4; padding-left: 26px; }
        .showcase-tab.active .showcase-tab-sub { color: var(--slate); }
        /* #tools sits on the navy band (see the alternating-sections rules
           above .shield-band) — the tab list is plain text directly on
           that background (unlike .showcase-media, which is its own white
           card and needs no change), so it gets a light-on-dark pass. */
        #tools.section .showcase-tab { color: #b8c4d4; }
        #tools.section .showcase-tab:hover { background: rgba(255,255,255,0.06); }
        #tools.section .showcase-tab.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: none; color: white; }
        #tools.section .showcase-tab-icon { color: var(--green-bright); }
        #tools.section .showcase-tab-sub { color: var(--slate); }
        #tools.section .showcase-tab.active .showcase-tab-sub { color: #cbd5e1; }

        .showcase-media { position: relative; min-height: 420px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); overflow: hidden; }
        .showcase-panel { position: absolute; inset: 0; opacity: 0; transform: translateX(28px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; display: flex; flex-direction: column; }
        .showcase-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--panel-accent, var(--green)); }
        .showcase-panel.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
        .showcase-panel img { width: 100%; flex: 1; object-fit: cover; }

        /* ── Temporary text placeholder (swap back to img once product
           screenshots exist) — fills the same flex:1 space an <img>
           would occupy inside .showcase-panel. ── */
        .showcase-textblock { flex: 1; padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
        .showcase-textblock p.intro { font-size: 15.5px; color: var(--navy); font-weight: 600; margin: 0 0 20px; line-height: 1.6; }
        .showcase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
        .showcase-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--slate); line-height: 1.55; }
        .showcase-list li svg { width: 16px; height: 16px; color: var(--green-text); flex-shrink: 0; margin-top: 2px; }
        /* Point-of-use scope disclaimer (Court Form Finder panel) — legal
           flagged that the FAQ's "we aren't a law firm" language needed to
           also live where the tool itself is described, not only in the
           FAQ further down the page. */
        .showcase-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--slate); line-height: 1.55; }

        /* ── Track grid (index.php's #tools section) ──
           All four tracks visible at once instead of hidden behind tabs —
           the old tab+single-panel widget (still used by organizations.php,
           see .showcase-* above) left one mostly-empty white card on screen
           at a time. Each card sets --accent/--accent-bg inline the same
           way .showcase-panel sets --panel-accent. Reuses .showcase-list/
           .showcase-note for the checkmarks and legal footnote so the two
           patterns still share type styles. */
        .track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
        .track-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 30px 30px 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .track-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px -12px rgba(12,24,38,0.22); }
        .track-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent, var(--green)); }
        .track-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
        .track-card-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-bg, var(--green-light)); color: var(--accent, var(--green)); display: flex; align-items: center; justify-content: center; }
        .track-card-icon svg { width: 21px; height: 21px; }
        .track-card h3 { font-size: 18.5px; color: var(--navy); margin: 0; }
        .track-card p.intro { font-size: 15px; color: var(--navy); font-weight: 600; margin: 0 0 18px; line-height: 1.6; }

        /* ── FAQ ── */
        .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 4px 22px; margin-bottom: 12px; box-shadow: var(--shadow); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
        .faq-item:hover { border-color: #d4d4d8; box-shadow: 0 8px 22px -12px rgba(12,24,38,0.2); }
        .faq-item summary { padding: 16px 0; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: "+"; font-size: 20px; color: var(--ash); transition: transform 0.2s ease; flex-shrink: 0; margin-left: 12px; }
        .faq-item[open] summary::after { transform: rotate(45deg); }
        .faq-item p { padding-bottom: 18px; color: var(--slate); font-size: 14.5px; margin: 0; }

        .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

        /* ── Focus-visible states (keyboard navigation) ── */
        .btn:focus-visible,
        .showcase-tab:focus-visible,
        .faq-item summary:focus-visible,
        .nav-links a:focus-visible,
        .nav-toggle:focus-visible {
            outline: 2px solid var(--green-bright);
            outline-offset: 2px;
        }

        /* ── Scroll cue beneath the doors-rack ── */
        .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 36px; } /* opacity: 0.6 removed — var(--ash) is already muted (5.98:1); the opacity blended it to 2.56:1, failing AA */
        .scroll-cue span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
        .scroll-cue svg { width: 18px; height: 18px; color: var(--green-bright); }
        @keyframes scrollCueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
        @media (prefers-reduced-motion: no-preference) { .scroll-cue svg { animation: scrollCueBounce 1.8s ease-in-out infinite; } }

        /* Background/base text color are pinned to the exact same tones as
           the logged-in app footer (shared.css's --sidebar-bg/#64748b)
           instead of this file's own --navy — a deliberate one-off match,
           not an oversight, so the two footers read as literally the same
           surface. Andrew's call after comparing them side by side,
           2026-09-05. Links stay the brighter #cbd5e1 the app footer
           itself uses for its <a> tags, so plain copy (copyright, the
           separators) sits dimmer than the links around it, same
           hierarchy as shared.css's .app-footer/.app-footer a. */
        footer { background: #0c1826; color: #94a3b8; padding: 60px 0 24px; } /* #94a3b8, not the 2026-09-05 #64748b swap — that darkening was for light backgrounds only; #94a3b8 already clears AA (6.97:1) against this dark footer bg, #64748b doesn't (3.75:1) */
        .footer-inner { display: flex; flex-direction: column; gap: 16px; }
        .footer-brand { display: flex; flex-direction: column; gap: 4px; }
        /* Mirrors .app-footer-notice (shared.css) almost exactly — same
           font-size/line-height/max-width/icon treatment — since the two
           play the same role: a short reassurance about what is and
           isn't stored, right under the tagline. */
        .footer-security { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #cbd5e1; line-height: 1.6; max-width: 640px; margin: 0; }
        .footer-security svg { width: 15px; height: 15px; color: rgba(255,255,255,0.45); flex-shrink: 0; margin-top: 2px; }
        .footer-copyright { margin: 0; font-size: 13px; }
        /* Mirrors .app-footer-bottom: one centered, wrapping line mixing
           plain text (dim, inherited from footer's own color) with
           brighter links — not a boxed list of links, just the essentials
           that aren't already reachable from the top nav. */
        .footer-legal-links { font-size: 13px; text-align: center; margin: 0; }
        .footer-legal-links a { color: #cbd5e1; text-decoration: none; }
        .footer-legal-links a:hover { color: white; }

        /* ── Support-lines bar — brought over from the logged-in app
           footer (shared.css's .app-footer-crisis), same numbers and
           behavior, just this file's own class prefix since the public
           site doesn't load shared.css's app-* namespace. Shown to
           logged-out visitors too: someone could land on the marketing
           site itself in a moment of crisis, before ever creating an
           account. ── */
        .footer-crisis { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; }
        .footer-crisis-label { font-size: 12px; font-weight: 700; color: var(--green-bright); display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .footer-crisis-label svg { width: 15px; height: 15px; }
        .footer-crisis-numbers { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
        .footer-crisis-num { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e2e8f0; }
        .footer-crisis-num strong { font-size: 14.5px; font-weight: 800; color: white; letter-spacing: 0.01em; }
        .footer-crisis-sep { color: rgba(255,255,255,0.25); }
        .footer-support-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: white; text-decoration: none; flex-shrink: 0; margin-left: auto; }
        .footer-support-link svg { width: 12px; height: 12px; }
        .footer-support-link:hover { text-decoration: underline; }
        @media (max-width: 640px) {
            .footer-crisis-numbers { flex-direction: column; align-items: flex-start; gap: 8px; }
            .footer-crisis-sep { display: none; }
            .footer-crisis { flex-direction: column; align-items: flex-start; gap: 10px; }
            .footer-support-link { margin-left: 0; }
        }

        /* ── Minimal footer (auth-card pages) ── */
        .footer-bottom { text-align: center; }

        @media (max-width: 900px) {
            .showcase-layout { grid-template-columns: 1fr; }
            .showcase-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
            .showcase-tab { flex-shrink: 0; }
            .showcase-tab-sub { display: none; }
            .shield-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
        }
        @media (max-width: 700px) {
            .container { padding: 0 18px; max-width: 100%; }
            .tn-inner { padding: 0 18px; gap: 14px; }
            .tn-logo { font-size: 20px; }
            .tn-links, .tn-subnav { display: none !important; }
            .tn-hamburger { display: flex; }
            .tn-right .btn-primary { display: none; } /* moves into .tn-mobile-links below instead of sitting twice */
            .tn-right .tn-theme-toggle { display: none; } /* moves into .tn-mobile-head-actions instead of sitting twice */
            .tn-mobile-overlay { display: block; }
            .tn-mobile-links { display: flex; }
            .hero { padding: 44px 0 100px; }
            .hero-content { grid-template-columns: 1fr; gap: 32px; }
            .hero h1 { font-size: 30px; max-width: 100%; }
            .hero p.lede { font-size: 16px; max-width: 100%; }
            .scroll-cue { display: none; }
            .hero-cta-group { flex-direction: column; width: 100%; }
            .hero-cta-pill:not(.hero-cta-pill-primary) { border-left: none; border-top: 1px solid rgba(255,255,255,0.16); }
            .hp-body { grid-template-columns: 1fr; }
            .hp-chrome-url { display: none; }
            .section { padding: 52px 0; }
            .section-header h2 { font-size: 24px; }
            .shield-grid { grid-template-columns: 1fr; }
            .track-grid { grid-template-columns: 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
            .shield-statement { font-size: 26px; }
            .btn { min-height: 46px; width: 100%; }
            .hero-ctas .btn { width: auto; }
            .page-hero, .about-hero, .org-hero { padding: 48px 0 44px; }
            .page-hero h1, .about-hero h1, .org-hero h1 { font-size: 28px; }
            .page-hero p.lede, .about-hero p.lede, .org-hero .lede { font-size: 16px; }
            .final-cta h2 { font-size: 26px; }
            .final-cta .cta-buttons .btn { width: 100%; }
        }

/* .js-hidden: server-rendered initial-hide for elements whose ongoing
   show/hide is owned by client JS via direct .style.display assignment
   (not restricted by CSP's style-src, unlike a markup style="" attribute).
   Added while removing 'unsafe-inline' from style-src — see security-headers.php. */
.js-hidden { display: none; }