/* Cross-document view transitions, public side — mirrors shared.css's
           block so nav between marketing pages (or into/out of login)
           cross-fades too. .tn-logo shares the same view-transition-name. */
        @view-transition {
            navigation: auto;
        }
        @media (prefers-reduced-motion: reduce) {
            ::view-transition-group(*),
            ::view-transition-old(*),
            ::view-transition-new(*) {
                animation: none !important;
            }
        }

        :root {
            /* Retinted to genuine blues, matching img/og-image.png — the old
               near-black navy read as generic SaaS rather than a brand color.
               --ink/--ink-2 drive dark surfaces (nav, subnav, alternating
               sections); --navy drives headings/logo/footer text. */
            --ink: #0e2c50; --ink-2: #1a3f6e; --navy: #154282;
            /* Pinned to the pre-retint navy on purpose — the tier-2 nav
               dropdown needs to stay visibly darker than the --ink bar it
               drops from (matches shared.css's --sidebar-bg). */
            --ink-dark: #0c1826;
            /* --green: solid fill only (buttons, .step-num), same value in
               both themes. --green-text: the brass hue used as text/icon
               color elsewhere (nav links, checkmarks) — a separate role, so
               it gets its own token and can brighten independently in dark
               mode without touching buttons. */
            --green: #956d2d; --green-text: #956d2d; --green-light: #f2e4c8; --green-bright: #f0b429; /* matches shared.css's --green */
            --amber: #a8552c; --amber-light: #f1dfcf;
            /* Dark orange, distinct from --amber (a muted rust text/border
               accent) — used for .policy-hero, which stays dark on purpose
               but recolored off navy so it doesn't blend into the dark nav.
               #9a3412/#c2410c both hold >5:1 contrast with white text. */
            --rust: #9a3412; --rust-light: #fbe4d4;
            /* Neutral grey, matches shared.css's --bg so public and
               authenticated pages read as one product. */
            --paper: #f0f0f0; --white: #ffffff; --ash: #5b6472;
            --line: #e4e4e7; --line-dark: rgba(255,255,255,0.12); /* matches shared.css's --border */
            --blue: #37567c; --teal: #2b6e63;
            /* Hover/track/badge surface — its own token since it needs to
               sit visibly on top of --paper/--white, not just match the page. */
            --surface: #f1f5f9;
            /* Cards sit on --paper as white + shadow, not a color difference
               — same elevation pattern as shared.css's .card. */
            --shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
            /* Aliases for older token names some pages (register.php,
               pricing) still use, so they can drop their own :root block. */
            --bg: var(--paper); --slate: var(--ash); --border: var(--line); --text: #1e293b;
        }

        /* Dark theme, public side — same 3-state pattern as shared.css (see
           head.php for how $publicTheme resolves: a logged-in visitor's
           saved preference, an anonymous visitor's 'theme' cookie, or
           nothing, in which case only the prefers-color-scheme block below
           has any effect). --navy/--amber/--blue/--teal are pure text/icon
           colors here (unlike shared.css's same-named fills), so they
           brighten for legibility instead of staying put. --green is the
           one token used both ways, hence the --green/--green-text split
           above rather than brightening --green itself. */
        @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%; }
        /* Shared container for every marketing page. Widened to 1280 —
           it was the narrowest of the site's three .container definitions
           (auth-login.css/register.css already used 1200px). */
        .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

        /* Skip link (WCAG 2.4.1), same pattern as shared.css's .skip-link
           with this side's token names. Target is #main-content, an anchor
           public-nav.php places right after its own </header>. */
        .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; }

        /* Two-tier top nav (dark bar of sections, each opening a full-width
           row of links below) — same system as shared.css's .top-nav/.tn-*,
           copied rather than shared via one file since landing.css doesn't
           want to pull in the whole authenticated stylesheet. Token names
           differ (--ink/--ink-2/--green-bright vs. --sidebar-bg/-bg-2/
           --gold-glow); --ink-dark is the one still pinned to shared.css's
           --sidebar-bg exactly. */
        #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; view-transition-name: forzara-mark; }
        .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: fill matching the sub-nav panel (--ink-dark,
           deliberately darker than this bar's --ink) plus a gold bar flush
           against the bar's real top edge. Square all around — .tn-subnav
           has no rounding, so a rounded bottom here would leave a gap. */
        .tn-link.active, .tn-link.open { background: var(--ink-dark); 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: unlike the authenticated app, one is always open
           (server-rendered via $activeSection) rather than starting
           collapsed, so no position:absolute here — it needs to sit in
           normal flow and push page content down instead of floating over it. */
        /* clip-path stops this panel's own box-shadow from blurring
           upward onto .top-nav's lighter --ink bar directly above it —
           without it, that soft shadow reads as a visible seam/gap
           between the two bars even though they sit perfectly flush
           (no margin/border between them). Shadow still shows normally
           on the other three sides, over the page content below.
           margin-top:-1px (2026-09-12) belt-and-braces on top of that —
           .top-nav is position:sticky, and Chromium on a non-100%-scaled
           Windows display rounds sticky elements to the nearest device
           pixel while their normal-flow children lay out at subpixel
           precision, which can leave a hairline of the page background
           peeking through at exactly this boundary depending on scroll/
           zoom state (inconsistent screenshot-to-screenshot, not a real
           box-model gap — see the clip-path fix above and its own
           reasoning). Pulling this panel up 1px makes it overlap and
           paint over that hairline outright instead of hoping the
           rounding lands cleanly. */
        .tn-subnav { display: none; background: var(--ink-dark); box-shadow: 0 8px 20px rgba(0,0,0,0.18); clip-path: inset(0 -100vw -100vw -100vw); margin-top: -1px; }
        .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); }

        /* "Marketing Page" button (login.php's child nav only, 2026-09-12) —
           same shape/right-alignment as shared.css's .tn-subnav-coach-btn:
           margin-left:auto pushes it to the row's own right edge rather
           than sitting inline with the plain trust/legal links. */
        .tn-subnav-marketing-btn {
            margin-left: auto;
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--green); color: white;
            font-size: 13px; font-weight: 600;
            padding: 9px 16px; border-radius: 8px;
            text-decoration: none; white-space: nowrap;
            transition: background 0.15s;
        }
        .tn-subnav-inner a.tn-subnav-marketing-btn { color: white; } /* wins over .tn-subnav-inner a's blue-grey on specificity */
        .tn-subnav-marketing-btn:hover { background: #7a5a26; }

        .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 — .top-nav is var(--ink) in both themes, so this
           button's chrome never changes, just which of its two icons shows. */
        .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; }

        /* Generic account icon + dropdown (2026-09-12, login.php only) —
           same 40px icon-button shape as .tn-theme-toggle right next to
           it, opening a small dark panel styled like .tn-subnav rather
           than the authenticated app's shared.css .tn-dropdown (that
           stylesheet never loads here, see landing.css's own top-of-file
           note on why this bar's rules are copied, not shared). */
        .tn-user-dropdown { position: relative; flex-shrink: 0; }
        .tn-user-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-user-toggle:hover, .tn-user-dropdown.open .tn-user-toggle { background: rgba(255,255,255,0.16); }
        .tn-user-toggle svg { width: 20px; height: 20px; }
        .tn-user-menu {
            display: none; position: absolute; top: calc(100% + 8px); right: 0;
            min-width: 160px; background: var(--ink-dark); border-radius: 8px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.25); padding: 6px; z-index: 160;
        }
        .tn-user-dropdown.open .tn-user-menu { display: block; }
        .tn-user-menu a { display: block; color: #dde6f0; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: 6px; transition: background 0.15s, color 0.15s; }
        .tn-user-menu a:hover { background: rgba(255,255,255,0.1); color: white; }
        .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, same recipe as the authenticated
           app's sidebar (backdrop, scroll lock, big centered links,
           collapsible groups) but slides in from the right, not the left,
           so the two never get confused for the same surface. Uses this
           file's own tokens. z-index 210/211 (not 199/200) clears
           #scroll-progress, a fixed z-index:200 bar on index.php that would
           otherwise paint over the open drawer. */
        .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; }

        /* Explicit width, not align-items:stretch — the ≤700px ".btn { width:
           100% }" rule further down also matches this, and stacking both
           overflowed the drawer's right edge. */
        .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; }
        .btn-primary:hover { background: #7a5a26; transform: translateY(-1px); } /* darkened --green, matches shared.css's own .btn-primary:hover */
        .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); }
        /* Consolidated from identical copies in about-us.css/organizations.css. */
        .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: white background so the sticky dark .top-nav meets a light
           section instead of blending into another dark block. The
           .page-hero/.about-hero/.org-hero family below gets the same
           light treatment for the same reason. */
        .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
           two-button .org-hero CTAs (index.php's hero moved to .hero-cta-group). */
        .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: intro screenshot, borderless. */
        .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 instead of two separate buttons
           that used to read as two different products — a hard seam
           between halves instead of a gap, like "two doors into one thing". */
        .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; }

        /* Plain-text-link look on a real <button> — used for client-side-only
           actions (index.php's returning-visitor toggle) that need button
           semantics for a11y but shouldn't look like a button. */
        .link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
        .link-button:hover { color: var(--navy); }

        /* Hero product preview: mirrors staff-home.php's mission-control
           layout (today's schedule, needs-review card, caseload progress)
           framed like a browser window, so the hero shows the real product.
           No max-width — fills the same width as .hero-content above it. */
        .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-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; }
        /* Illustrated stand-in for a real schedule/caseload row list. */
        .hp-mini-list { display: flex; flex-direction: column; gap: 6px; }
        .hp-mini-row { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text); }
        .hp-mini-time { font-weight: 700; color: var(--hp-accent); flex-shrink: 0; }
        .hp-mini-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hp-mini-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 99px; background: var(--hp-accent-light); color: var(--hp-accent); flex-shrink: 0; }
        .hp-mini-meta { font-size: 9.5px; color: var(--ash); font-weight: 600; flex-shrink: 0; }
        @media (prefers-reduced-motion: no-preference) {
            .hero-preview { opacity: 0; animation: heroFadeUp 0.6s ease forwards; animation-delay: 0.5s; }

            /* Bar fill-in, starting once the preview settles. No "to"
               keyframe — an unspecified 100% falls back to the element's
               own width (from index.php's inline utility classes), so
               those stay the single source of each bar's target width. */
            .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 — quiet breathing ring so the one
               actionable number reads as live, not static copy. Starts
               after the bars finish filling. */
            .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 lets any section host an
           absolutely-positioned .section-shadow scrim at its own bottom edge. */
        .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:
           #how (navy) → Trust & Security/API columns (white) → #tools
           (navy) → #pricing (white) → #faq (navy, now the last section
           on the page). Scoped by id+class so it can't leak onto other
           pages reusing the same class names (organizations.php's
           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; }

        /* Section seam shadow: reusable soft downward scrim for where two
           full-bleed section backgrounds meet, so the seam doesn't read as
           a flat template color-swap. Drop a .section-shadow div as the
           last child of a section. A shadow scrim (vs. an earlier wave or
           diagonal-cut design) needs no path math and no per-seam color
           matching to whatever section follows. */
        .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; }

        /* Trust & Security / API & Integrations columns: index.php runs
           these two as a left/right .split half-width pair instead of two
           stacked full-width sections (that section's own comment
           explains the merge) — .tsi-col styles the shared bits (heading,
           intro paragraph) left-aligned instead of the centered
           .section-header these would otherwise sit in. .shield-grid/
           .shield-item back the left column's three claims; nothing else
           uses this component post-merge, so it's built directly for a
           half-width column (single-row icon+text items) rather than the
           full-width 3-cards-across layout it had before. */
        .tsi-col > .section-eyebrow { display: block; }
        .tsi-col h2 { font-family: 'Inter', system-ui, sans-serif; font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.3; margin: 0 0 14px; }
        .tsi-intro { font-size: 15.5px; color: var(--slate); line-height: 1.7; margin: 0 0 24px; }
        .shield-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 24px; }
        .shield-item { display: flex; align-items: flex-start; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; 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); flex-shrink: 0; margin-top: 2px; }
        .shield-item .shield-icon svg { width: 24px; height: 24px; }
        .shield-item h3 { font-size: 15px; color: var(--navy); margin: 0 0 6px; }
        .shield-item p { font-size: 13.5px; color: var(--slate); margin: 0; line-height: 1.6; }

        /* Shared light page hero + dark final CTA — the canonical version
           of what used to be duplicated as .about-hero/.org-hero. Pages can
           use either name, or .page-hero/.final-cta directly.
           Light background for the same nav-seam reason as .hero above;
           .final-cta stays dark since it sits at the bottom of the page,
           not against the nav. */
        .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 widened — these text-only heroes have no visual element
           to fill the width the way index.php's hero does. */
        .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: opt-in wrapper (rather than changing the
           centered default) for pages whose single centered text column
           reads small on a wide screen. Right column reuses .hero-trust-card
           (originally index.php's own hero sidebar, orphaned when that hero
           was redesigned). */
        .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
           bottom edge. Flat fill, matching #how/#tools/#faq above. */
        .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) */
        .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 — connecting line and copy need a
           dark-bg pass; the num circle stays a light badge as-is. */
        #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 */
        .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 — the tab list is plain text on that
           background, so it gets a light-on-dark pass (.showcase-media is
           its own white card and needs no change). */
        #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; }

        /* Text placeholder until product screenshots exist — fills the same
           space an <img> would 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; }
        /* "Not a law firm" disclaimer, also needed at point of use (Court
           Form Finder panel), not just in the FAQ further down. */
        .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. Each card sets
           --accent/--accent-bg inline like .showcase-panel's --panel-accent,
           reusing .showcase-list/.showcase-note for checkmarks/footnote. */
        .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; } /* no opacity — var(--ash) alone is already AA (5.98:1); adding opacity dropped it to 2.56:1 */
        .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; } }

        /* Pinned to the exact same tones as the logged-in app footer
           (shared.css's --sidebar-bg/#94a3b8) rather than this file's own
           --navy, so the two footers read as the same surface. */
        footer { background: #0c1826; color: #94a3b8; padding: 60px 0 24px; } /* #94a3b8, not #64748b — that darkening is for light backgrounds; #94a3b8 clears AA (6.97:1) on this dark bg */
        .footer-inner { display: flex; flex-direction: column; gap: 16px; }
        .footer-brand { display: flex; flex-direction: column; gap: 4px; }
        /* Mirrors .app-footer-notice (shared.css) — same reassurance about
           what is/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, dim text
           with brighter links, not a boxed list. */
        .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, carried over from shared.css's .app-footer-crisis
           with this file's own class prefix. Shown to logged-out visitors
           too, since someone could land on the marketing site in crisis. */
        .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; }
        }
        @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 instead of sitting twice */
            .tn-right .tn-theme-toggle { display: none; } /* moves into .tn-mobile-head-actions instead */
            .tn-right .tn-user-dropdown { display: none; } /* Register moves into .tn-mobile-links as a plain CTA instead */
            .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; }
            .section { padding: 52px 0; }
            .section-header h2 { font-size: 24px; }
            .track-grid { grid-template-columns: 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
            .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%; }
        }

/* Server-rendered initial-hide for elements whose show/hide is owned by
   client JS via .style.display (CSP-safe, unlike a style="" attribute). */
.js-hidden { display: none; }