:root {
            --ink: #0c1826; --ink-2: #1e3a56; --navy: #15304c;
            --green: #a97b33; --green-light: #f2e4c8; --green-bright: #f0b429;
            --amber: #a8552c; --amber-light: #f1dfcf;
            --paper: #f8fafc; --white: #ffffff; --ash: #5b6472;
            --line: #e2e8f0; --line-dark: rgba(255,255,255,0.12);
            --blue: #37567c; --teal: #2b6e63;
            /* 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;
        }
        html { overflow-x: hidden; max-width: 100%; }
        body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: #1e293b; line-height: 1.6; margin: 0; overflow-x: hidden; max-width: 100%; }
        .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
        .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: 'Playfair Display', Georgia, serif; font-size: 26px; 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: linear-gradient(90deg, var(--ink-2) 0%, var(--ink) 100%); 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: 'Playfair Display', Georgia, serif; font-size: 22px; 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); }

        /* Mobile flattened menu — every section's links in one stacked
           list, since there's no off-canvas drawer system on the public
           site the way the authenticated app has (sidebar-nav.php). */
        .tn-mobile-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); z-index: 145; }
        .tn-mobile-links.open { display: flex; }
        .tn-mobile-links a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); color: #1e293b; min-height: 44px; display: flex; align-items: center; font-size: 15px; }
        .tn-mobile-links .tn-mobile-heading { padding: 14px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
        .tn-mobile-links .btn-primary { margin-top: 12px; 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; }
        .btn-primary:hover { background: #276128; 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: white; color: var(--navy); border: 1px solid var(--line); }
        .btn-ghost.light:hover { background: var(--paper); }

        /* ── Hero (from index2: doors-rack signature + shield tagline + trust card) ──
           White background (not the dark navy the .org-hero/.about-hero
           siblings use) 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.
           .eyebrow and .btn-ghost below are shared with organizations.php/
           about-us.php's dark headers, so their light-bg treatment here is
           scoped under .hero rather than changed at the base rule. */
        .hero { position: relative; background: var(--white); color: #1e293b; 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 {
                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 { 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 { background: var(--paper); border-color: var(--line); }
        .hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 46px; line-height: 1.14; margin: 0 0 18px; max-width: 560px; }
        .hero h1 em { font-style: italic; color: var(--amber); }
        .hero p.lede { font-size: 17.5px; max-width: 520px; margin: 0 0 20px; color: #475569; }
        .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
        .hero .btn-ghost { background: var(--paper); color: var(--navy); border: 1px solid var(--line); }
        .hero .btn-ghost:hover { background: var(--line); }

        .hero-trust-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 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: 16px; }
        .hero-trust-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
        .hero-trust-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: #475569; 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); }

        /* No max-width here on purpose — .doors-rack fills the same width
           as .hero-content above it. It used to be capped at 980px with no
           auto margin, so on any viewport wider than ~1030px it sat flush
           left with a growing dead-space gap on the right instead of lining
           up with the trust card above it. Full-width fixes that; column
           count still narrows at the 700px breakpoint below. */
        .doors-rack { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; margin-top: 40px; }
        .door-card { background: var(--ink-2); border: 1px solid rgba(240,180,41,0.4); border-radius: 14px; padding: 22px 10px 18px; text-align: center; box-shadow: 0 0 24px rgba(240,180,41,0.16); }
        .door-lock { width: 40px; height: 40px; margin: 0 auto 12px; }
        .lock-shackle { transform: rotate(-20deg) translate(-2px, -4px); transform-origin: 68% 95%; }
        .door-label { font-size: 13.5px; font-weight: 700; color: white; margin-bottom: 3px; }
        .door-sub { font-size: 11px; color: #7f93ac; letter-spacing: 0.03em; }
        @keyframes doorUnlock { from { transform: rotate(0deg) translate(0,0); } to { transform: rotate(-20deg) translate(-2px, -4px); } }
        @keyframes doorGlow { from { border-color: var(--line-dark); box-shadow: none; } to { border-color: rgba(240,180,41,0.4); box-shadow: 0 0 24px rgba(240,180,41,0.16); } }
        @media (prefers-reduced-motion: no-preference) {
            .door-card { animation: doorGlow 0.7s ease both; }
            .lock-shackle { animation: doorUnlock 0.7s ease both; }
            .door-card:nth-child(1), .door-card:nth-child(1) .lock-shackle { animation-delay: .3s; }
            .door-card:nth-child(2), .door-card:nth-child(2) .lock-shackle { animation-delay: .45s; }
            .door-card:nth-child(3), .door-card:nth-child(3) .lock-shackle { animation-delay: .6s; }
            .door-card:nth-child(4), .door-card:nth-child(4) .lock-shackle { animation-delay: .75s; }
            .door-card:nth-child(5), .door-card:nth-child(5) .lock-shackle { animation-delay: .9s; }
            .door-card:nth-child(6), .door-card:nth-child(6) .lock-shackle { animation-delay: 1.05s; }
        }

        /* ── Sections (shared) ── */
        .section { padding: 84px 0; }
        .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: #475569; 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). */
        #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: #1e293b; padding: 92px 0 110px; position: relative; }
        .shield-band-divider { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; display: block; }
        .shield-statement { font-family: 'Playfair Display', Georgia, 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: #475569; max-width: 660px; margin: 0 auto 48px; text-align: center; line-height: 1.75; }
        .shield-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 820px; 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); }
        .shield-item .shield-icon { color: var(--amber); margin-bottom: 12px; }
        .shield-item .shield-icon svg { width: 24px; height: 24px; margin: 0 auto; }
        .shield-item h4 { font-size: 15px; color: var(--navy); margin: 0 0 8px; }
        .shield-item p { font-size: 13.5px; color: #475569; margin: 0; line-height: 1.6; }

        /* ── Shared dark page hero + 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. */
        .page-hero, .about-hero, .org-hero { position: relative; background: radial-gradient(ellipse at top right, #16233b 0%, var(--ink) 55%); color: white; padding: 76px 0 64px; text-align: center; overflow: hidden; }
        .page-hero h1, .about-hero h1, .org-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 44px; line-height: 1.15; margin: 0 auto 20px; font-weight: 800; max-width: 760px; }
        .page-hero h1 em, .about-hero h1 em, .org-hero h1 em { font-style: italic; color: var(--green-bright); }
        .page-hero p.lede, .about-hero p.lede, .org-hero .lede { font-size: 18px; max-width: 620px; margin: 0 auto; color: #cbd5e1; }

        .final-cta { background: var(--ink); color: white; text-align: center; padding: 80px 0; }
        .final-cta h2 { color: white; font-family: 'Playfair Display', Georgia, 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: 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); }
        .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: 'Playfair Display', Georgia, 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: #475569; 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: #334155; line-height: 1.5; }
        .pricing-list li svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--green); 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: 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: #475569; 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: #94a3b8; }

        /* ── 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: #475569; 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); }
        .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: #64748b; }
        /* #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: #94a3b8; }
        #tools.section .showcase-tab.active .showcase-tab-sub { color: #cbd5e1; }

        .showcase-media { position: relative; min-height: 420px; background: 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: #475569; line-height: 1.55; }
        .showcase-list li svg { width: 16px; height: 16px; color: var(--green); 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: #64748b; 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: 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; }
        .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: white; border: 1px solid var(--line); border-radius: 12px; padding: 4px 22px; margin-bottom: 12px; }
        .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: #475569; 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; }
        .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; } }

        footer { background: var(--navy); color: #cbd5e1; padding: 60px 0 24px; }
        .footer-security { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cbd5e1; margin: 0 0 10px; }
        .footer-security svg { width: 15px; height: 15px; color: var(--green-bright); flex-shrink: 0; }
        .footer-copyright { margin: 0 0 10px; font-size: 13.5px; color: #94a3b8; }
        .footer-legal-links { font-size: 13.5px; }
        .footer-legal-links a { color: #94a3b8; text-decoration: none; }
        .footer-legal-links a:hover { color: white; }

        /* ── Full footer (4-column: brand + Product/Company/Legal) ── */
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .footer-col h4 { color: white; font-size: 14px; margin-bottom: 14px; }
        .footer-col a { display: block; color: #94a3b8; text-decoration: none; font-size: 14px; margin-bottom: 10px; }
        .footer-col a:hover { color: white; }
        .footer-grid-bottom { padding-top: 22px; }
        .footer-grid-bottom p { margin: 0 0 10px; }
        .footer-grid-bottom p:last-child { margin-bottom: 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; }
        }
        @media (max-width: 700px) {
            .container { padding: 0 18px; max-width: 100%; }
            .tn-inner { padding: 0 18px; gap: 14px; }
            .tn-logo { font-size: 19px; }
            .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 */
            .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%; }
            .doors-rack { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
            .scroll-cue { 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; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .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%; }
        }