/* Fonts */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter.woff2") format("woff2");
}

/*
 * Palette: site-ui-ux-spec.md §1.1 (DECIDED 2026-08-21, owner-approved, WCAG 2.1 AA).
 * Dark is the default theme; [data-theme="light"] overrides the tokens.
 */
:root,
[data-theme="dark"] {
    --bg: #15181D;
    --surface: #1D2127;
    --surface-raised: #242A32;
    --border: #303743;
    --text: #E9EBEE;
    --text-muted: #A7AEBB;
    --tint: #212A18;
    --accent: #9FCD60;
    --accent-hover: #B3DA7D;
    --accent-pressed: #8CBE53;
    --on-accent: #15181D;
    --accent-deep: #537214;
    --success: #9FCD60;
    --danger: #F28B82;
    --warning: #F5C365;
    --info: #8AB4F8;
    --focus-ring: #9FCD60;
}

[data-theme="light"] {
    --bg: #F5F7F3;
    --surface: #FFFFFF;
    --surface-raised: #FBFCFA;
    --border: #D7DCD2;
    --text: #1B2024;
    --text-muted: #555D66;
    --tint: #EDF3E3;
    --accent: #9FCD60;
    --accent-hover: #B3DA7D;
    --accent-pressed: #8CBE53;
    --on-accent: #1B2024;
    --accent-deep: #537214;
    --success: #537214;
    --danger: #C62828;
    --warning: #946200;
    --info: #1E56A8;
    --focus-ring: #537214;
}

/* Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
}

h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.6rem; font-weight: 650; }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1em; }

a {
    color: var(--accent);
    text-decoration: none;
}

/* W6 (2026-09-07): links inside text blocks need a non-color cue (WCAG 1.4.1 /
   Lighthouse link-in-text-block — accent-vs-text contrast ~1.5:1 in the dark theme,
   below the 1.9:1 threshold). Buttons/nav keep the no-underline look via .btn/nav rules. */
p a,
.container-narrow a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

[data-theme="light"] a {
    color: var(--accent-deep);
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none !important;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--surface-raised);
    color: var(--text);
}

.skip-link:focus {
    left: 0;
}

/* Header / nav (spec §2.1) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .site-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    flex-shrink: 0;
}

.brand:hover {
    text-decoration: none;
}

.brand-icon {
    width: 34px;
    height: 34px;
}

.brand-word {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.site-nav > a,
.nav-drop > .nav-drop-btn {
    display: inline-block;
    padding: 8px 12px;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
}

.site-nav > a:hover,
.nav-drop > .nav-drop-btn:hover {
    color: var(--accent);
    text-decoration: none;
    background: var(--surface);
}

[data-theme="light"] .site-nav > a:hover,
[data-theme="light"] .nav-drop > .nav-drop-btn:hover {
    color: var(--accent-deep);
}

.nav-drop {
    position: relative;
}

.nav-drop-btn::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
}

.nav-drop-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    padding: 8px;
    list-style: none;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 240px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s linear;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55);
}

/* Invisible bridge over the gap between the button and the dropdown so the
   menu stays open while the cursor travels down from the button into the menu
   (fixes the old "cursor leaves the trigger before it reaches the submenu"). */
.nav-drop-menu::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav-drop-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text);
    white-space: nowrap;
}

.nav-drop-menu a:hover {
    background: var(--surface);
    color: var(--accent);
    text-decoration: none;
}

[data-theme="light"] .nav-drop-menu a:hover {
    color: var(--accent-deep);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--focus-ring);
}

.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }

/* Buttons (spec §1.1 usage rules) */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }

.btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    border-color: var(--focus-ring);
    color: var(--accent);
}

[data-theme="light"] .btn-secondary:hover {
    color: var(--accent-deep);
}

.header-cta {
    padding: 8px 18px;
}

/* Mobile nav (spec §2.2) */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.nav-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg);
    padding: 88px 24px 32px;
    overflow-y: auto;
}

.mobile-nav .mobile-group {
    margin-bottom: 8px;
}

.mobile-nav .mobile-group-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 18px 0 6px;
}

.mobile-nav a {
    display: block;
    padding: 12px 8px;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
}

.mobile-nav a:hover {
    background: var(--surface);
    text-decoration: none;
}

.mobile-nav .mobile-download {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 24px;
    padding: 14px;
    font-size: 1.1rem;
}

@media (max-width: 860px) {
    .site-nav {
        display: none;
    }

    .nav-burger {
        display: inline-flex;
    }

    /* Mobile header fit (2026-10-03): the header row (brand + theme + Download
       + burger) overran 320–418px viewports at 860px-and-below, pushing the
       burger button off the right edge so mobile users had no menu access.
       The brand word shrinks first (ellipsis) so the actions row — which
       carries the only navigation — always fits. */
    .header-inner {
        gap: 10px;
    }

    .brand {
        gap: 8px;
        flex-shrink: 1;
    }

    .brand-word {
        font-size: 0.95rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        gap: 8px;
        flex-shrink: 0;
    }

    .header-cta {
        padding: 7px 12px;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .brand-word {
        font-size: 0.85rem;
    }

    .header-cta {
        padding: 7px 10px;
    }
}

/* Hero (spec §3.1) */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: 40px;
    align-items: center;
    padding: 72px 0 56px;
}

.hero-copy .hero-eyebrow {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-weight: 550;
}

.hero-copy h1 {
    font-size: 3rem;
    margin-bottom: 16px;
}

.hero-sub {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 28px;
    max-width: 34em;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.hero-platform {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Static placeholder hero card (spec §3.1 placeholder phase) */
.hero-visual {
    margin: 0;
}

.hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 45%, rgba(159, 205, 96, 0.22) 0%, rgba(159, 205, 96, 0.07) 45%, transparent 70%),
        var(--tint);
}

.hero-placeholder img {
    width: 180px;
    height: 180px;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 48px 0 40px;
    }

    .hero-copy h1 {
        font-size: 2.4rem;
    }
}

/* Section scaffolding */
.section {
    padding: 56px 0;
}

.section-tight {
    padding: 32px 0;
}

.section-head {
    max-width: 640px;
    margin-bottom: 32px;
}

.section-head p {
    color: var(--text-muted);
}

/* Feature cards (spec §3.2) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

[data-theme="light"] .feature-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.feature-card h3 {
    margin-bottom: 8px;
}

.feature-card p {
    margin: 0;
    color: var(--text-muted);
}

/* Pricing block + trial CTA (T2.1, G2 2026-09-28): cards reuse .feature-card / .btn;
   only the price line, badge, feature list, compare rows, and trial line are new. */
.hero-trial {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.cta-trial {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.pricing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    min-height: 24px; /* T2.1-FIX (D2): single line at 16px h3 — every card head is the same height */
}

.pricing-head h3 {
    margin-bottom: 0;
}

/* Badge anchor: a ZERO-HEIGHT row below the price (rendered on every tile) that only
   provides the positioning context for the absolute badge — it takes no layout space,
   so the button below it is never pushed down or misaligned between tiles. */
.pricing-badge-row {
    position: relative;
    height: 0;
}

/* The "save N%" badge: absolutely positioned into the gap between the price and the
   button (that gap is reserved by .pricing-cta's margin-top), just under the price
   line, without occupying any flow height. */
.pricing-badge {
    position: absolute;
    top: -26px; /* sit just under the price line, clear of the button below */
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1; /* compact chip: keeps the bottom edge well above the button */
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--tint);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.pricing-price {
    margin: 14px 0 0;
}

.pricing-amount {
    font-size: 1.9rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2; /* keep a wrapped 2-line price inside the fixed-height price box */
}

.pricing-suffix {
    margin-left: 5px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.pricing-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 24px; /* gap below the price box; the absolute badge sits inside it */
    margin-bottom: 18px;
}

.pricing-features {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-features li {
    position: relative;
    padding-left: 22px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.pricing-features li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.42em;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

.pricing-card-primary {
    border-color: var(--accent);
}

.pricing-trial-note {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* T2.1-FIX: the pricing ladder is a 5-up grid (Free / Trial / Pro Monthly /
   Yearly Pro / Lifetime Pro) wrapping 5 -> 2 -> 1. Scoped to #pricing so the
   feature-cards section above keeps .card-grid's auto-fit base rule. */
#pricing .card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1024px) {
    #pricing .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 640px) {
    #pricing .card-grid {
        grid-template-columns: 1fr;
    }
}

/* At 5-up the cards are ~150px wide: shrink the CTA so "Free Download" fits ONE
   line (no wrap) in the narrow column. */
#pricing .pricing-cta {
    font-size: 0.9rem;
    padding: 8px 12px;
    white-space: nowrap;
}

/* At 5-up the amount + suffix of the wider prices ($39.99 / year, $99.99 one-time)
   wraps to two lines while others fit one — fix the price line at two lines' worth
   on every card so the price/CTA/feature rows top-align across all 5 cards. */
#pricing .pricing-price { min-height: 80px; }

.pricing-compare-wrap {
    margin-top: 32px;
    overflow-x: auto; /* mobile: scroll instead of overflowing the page */
}

.pricing-compare {
    min-width: 460px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.pricing-compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
}

.pricing-compare-row:last-child {
    border-bottom: none;
}

.pricing-compare-row-head {
    font-weight: 700;
}

.pricing-compare-label {
    color: var(--text-muted);
}

/* Feature detail blocks (spec §3.3) */
.detail-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    margin-bottom: 56px;
}

.detail-block:nth-child(even) .detail-media {
    order: 2;
}

.detail-media .media-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--tint);
}

.detail-media .media-slot img {
    width: 96px;
    height: 96px;
}

.detail-copy p {
    color: var(--text-muted);
}

.detail-copy h3 {
    font-size: 1.35rem;
}

@media (max-width: 900px) {
    .detail-block {
        grid-template-columns: 1fr;
    }

    .detail-block:nth-child(even) .detail-media {
        order: 0;
    }
}

/* How it works (spec §3.4) */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}

.step h3 {
    margin-bottom: 6px;
}

.step p {
    margin: 0;
    color: var(--text-muted);
}

/* CTA band + teasers (spec §3.5) */
.cta-band {
    padding: 40px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--tint);
}

.cta-band h2 {
    margin-bottom: 16px;
}

.cta-band .btn {
    margin: 6px;
}

.teaser-band {
    padding: 20px 24px;
    text-align: center;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.teaser-band a {
    font-weight: 600;
}

/* Content pages (spec §5.4) */
.page {
    padding: 48px 0 64px;
}

.page > h1 {
    margin-bottom: 16px;
}

.page .page-lead {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Team page (spec §5.4) — consistent avatar + bio card; one bio block per
   member (avoids the old flex where each <p> became its own column). */
.team-member {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 18px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color .18s ease, transform .18s ease;
}

.team-member:hover {
    border-color: var(--focus-ring);
    transform: translateY(-2px);
}

.team-avatar {
    width: 104px;
    height: 104px;
}

.team-avatar .team-photo {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.team-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, var(--surface-raised), var(--tint));
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.team-body h2 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.team-body p {
    margin-bottom: 0.8em;
    color: var(--text-muted);
}

.team-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .team-member {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .team-body {
        text-align: left;
    }
}

/* Video embed */
.video-embed {
    margin: 24px 0;
}

/* FAQ page spacing */
.faq-page .page-lead {
    margin-bottom: 32px;
}

/* Trial entry point callout (T2.2): WhatIs trial band + FAQ Pro-plans CTA.
   Palette matches the site theme (--surface / --border, theme-aware). */
.trial-callout {
    margin-top: 28px;
    padding: 20px;
    background: var(--surface, #f8f9fa);
    border-radius: 10px;
    border: 1px solid var(--border, #e9ecef);
}

.trial-callout p { margin: 0 0 12px; }
.trial-callout p:last-child { margin-bottom: 0; }
/* T2.1-FIX (D3): the callout's two CTA buttons are a flex row, not inline-block
   in a <p> — inline baseline alignment dropped the second button ~19px lower. */
.callout-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.faq-subscribe-cta { margin-top: 16px; }

/* Social-proof band (T2.3): homepage stats row — subtle weight like the pricing
   section; palette matches the site theme (--surface / --border, theme-aware). */
.stats-band {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 12px 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 150px;
}

.stat-item .stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.stat-item .stat-label {
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--text-muted, #555d66);
}

@media (max-width: 640px) {
    .stats-band {
        flex-direction: column;
        gap: 24px;
    }
}

/* Landing result cards (spec §5.5) */
.result-wrap {
    display: flex;
    justify-content: center;
    padding: 72px 24px;
}

.status-card {
    max-width: 560px;
    width: 100%;
    padding: 40px 36px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
}

.status-icon svg {
    width: 30px;
    height: 30px;
}

.status-success .status-icon {
    background: var(--tint);
    color: var(--success);
}

.status-failure .status-icon,
.status-error .status-icon {
    color: var(--danger);
}

.status-failure .status-icon,
.status-error .status-icon {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--danger);
}

.status-warning .status-icon {
    color: var(--warning);
    border: 1px solid var(--warning);
}

.status-info .status-icon {
    color: var(--info);
    border: 1px solid var(--border);
}

.status-card h1 {
    font-size: 1.7rem;
    margin-bottom: 12px;
}

.status-card .status-message p {
    color: var(--text-muted);
    margin-bottom: 0.8em;
}

.status-card .status-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.status-card .status-actions a {
    font-weight: 600;
}

/* Share Rover page (W3.2): launcher card + always-visible download fallback (capture 1432) */
.share-rover-card .status-message h1 {
    margin-bottom: 8px;
}

.share-rover-card .status-message p {
    color: var(--text-muted);
}

.share-rover-card .share-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
}

.share-rover-card .share-missing {
    color: var(--warning);
    font-size: 0.9rem;
    max-width: 40ch;
    margin: 10px auto 0;
}

.share-rover-card .share-fallback {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.share-rover-card .share-fallback h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.share-rover-card .share-fallback p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.share-rover-card .share-fallback-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.share-rover-card .share-fallback-actions .btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.share-rover-card .share-fallback-note {
    font-size: 0.8rem;
    margin-top: 12px;
    color: var(--text-muted);
}

/* Contact / remote-assistance forms (W3; base styles now) */
.form-field {
    margin-bottom: 18px;
    text-align: left;
}

.form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--focus-ring);
    outline: 2px solid var(--focus-ring);
    outline-offset: 0;
}

.form-success {
    padding: 24px;
    border: 1px solid var(--success);
    border-radius: 12px;
    background: var(--tint);
    color: var(--text);
}

/* W3.3 site forms (Contact + Remote Assistance, spec §4.4/§4.5) */
.form-required-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.form-required-note .req,
.form-field label .req {
    color: var(--accent);
}

.form-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin: 6px 0 0;
}

.form-status {
    color: var(--danger);
    margin-top: 12px;
}

/* Honeypot: visually hidden, still present in the DOM (filled only by bots —
   the server swallows it silently, no email, no rate quota burned). */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    margin-top: 6px;
}

.form-actions .btn {
    min-width: 150px;
}

.form-success h2 {
    margin-top: 0;
}

/* Remote Assistance (F-07) */
.remote-assistance-page h2 {
    margin-top: 2rem;
}

.remote-assistance-screenshot {
    display: block;
    max-width: 100%;
    margin: 16px auto 0;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.remote-assistance-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    border-left: 3px solid var(--border);
    padding: 4px 0 4px 14px;
    margin: 8px 0 24px;
}

/* Donate (F-05, spec §4.3) */
.donate-page .donate-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 8px;
}

.donate-chip {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.donate-chip:hover {
    border-color: var(--focus-ring);
    color: var(--accent);
}

[data-theme="light"] .donate-chip:hover {
    color: var(--accent-deep);
}

.donate-chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.donate-custom {
    margin: 10px 0 4px;
}

.donate-custom label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.donate-custom input {
    width: 180px;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.donate-custom input:focus {
    border-color: var(--focus-ring);
    outline: none;
}

.donate-custom-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.donate-actions {
    margin-top: 22px;
}

.donate-actions .btn {
    min-width: 180px;
}

/* FAQ accordion (W4; base styles now, spec §5.1) */
.faq-group {
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}

.faq-group > h2 {
    margin: 0;
    padding: 16px 20px;
    font-size: 1.15rem;
    background: var(--surface);
}

.faq-item {
    border-top: 1px solid var(--border);
}

.faq-item summary {
    display: block;
    padding: 14px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

.faq-item summary::before {
    content: "+";
    display: inline-block;
    width: 1.4em;
    font-weight: 700;
    color: var(--accent);
}

[data-theme="light"] .faq-item summary::before {
    color: var(--accent-deep);
}

.faq-item[open] summary::before {
    content: "–";
}

.faq-item .faq-answer {
    padding: 0 20px 16px 3.4em;
    color: var(--text-muted);
}

/* 404 (spec §5.6) */
.notfound {
    text-align: center;
    padding: 96px 24px;
}

.notfound .notfound-code {
    font-size: 5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
}

.notfound h1 {
    font-size: 1.8rem;
}

.notfound p {
    color: var(--text-muted);
}

.notfound .notfound-links {
    margin: 24px 0;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Footer (spec §2.3) */
.site-footer {
    margin-top: 64px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 48px 0 32px;
}

.footer-columns h2 {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.footer-columns ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-columns li {
    margin-bottom: 10px;
}

.footer-columns a {
    color: var(--text);
}

.footer-columns a:hover {
    color: var(--accent);
}

[data-theme="light"] .footer-columns a:hover {
    color: var(--accent-deep);
}

.footer-social a {
    margin-right: 14px;
}

.legal-strip {
    border-top: 1px solid var(--border);
    padding: 24px 0 32px;
}

.legal-strip .legal-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 860px;
}

.legal-strip .legal-text p {
    margin-bottom: 0.6em;
}

.legal-copy {
    margin-top: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 860px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .footer-columns {
        grid-template-columns: 1fr;
    }
}

/* Thank-You funnel page (F-01) */
.ty-video-head {
    margin-top: 36px;
    text-align: center;
}

.ty-video {
    max-width: 640px;
    margin: 0 auto;
}

.ty-video iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Install-guide step strip on the Thank-You page (2026-09-09): one screenshot per
   step with an explicit click instruction, pre-arming users for the not-code-signed
   "Unknown Publisher" dialogs. */
.ty-install {
    margin-top: 36px;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: 12px;
    padding: 20px;
}

.ty-install-head,
.ty-install-intro {
    text-align: center;
}

.ty-steps {
    list-style: none;
    margin: 20px 0 4px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ty-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ty-step > img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.ty-step-cap {
    margin: 0;
    font-size: 0.95em;
}

.ty-step-no {
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
    color: var(--accent);
}

[data-theme="light"] .ty-step-no {
    color: var(--accent-deep);
}

.ty-step-cap code {
    font-size: 0.95em;
}

@media (max-width: 640px) {
    .ty-steps {
        grid-template-columns: 1fr;
    }
}

/* Version History (F-01/F-12, spec §5.2; 2026-09-03 rework — accordion with the
   actual legacy changelog (SiteVersionHistory) and download buttons in the header). */
.vh-list {
    margin: 24px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vh-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.vh-item[open] {
    border-color: var(--focus-ring);
}

.vh-item-current {
    box-shadow: inset 3px 0 0 var(--accent);
}

.vh-item-deprecated {
    opacity: 0.8;
}

.vh-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.vh-head::-webkit-details-marker {
    display: none;
}

.vh-head::before {
    content: "+";
    display: inline-block;
    width: 1.3em;
    flex-shrink: 0;
    text-align: center;
    font-weight: 800;
    color: var(--accent);
}

.vh-item[open] > .vh-head::before {
    content: "–";
}

.vh-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.vh-version {
    font-weight: 700;
    font-size: 1.05rem;
}

.vh-date {
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.vh-version + .vh-date {
    margin-left: auto;
}

.vh-item-deprecated .vh-version {
    color: var(--text-muted);
}

.vh-deprecated-badge,
.vh-nonrel-badge {
    display: inline-block;
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.vh-deprecated-badge {
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.vh-nonrel-badge {
    color: var(--warning);
    border: 1px solid var(--warning);
}

.vh-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vh-actions .btn-compact {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.vh-na {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.vh-body {
    padding: 4px 18px 18px 40px;
    border-top: 1px solid var(--border);
}

.vh-notes {
    margin: 0;
    padding-left: 1.1em;
    color: var(--text-muted);
}

.vh-notes li {
    margin-bottom: 0.35em;
}

.vh-nonereleasenote {
    color: var(--text-muted);
    font-style: italic;
}

.version-badge {
    display: inline-block;
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.page-footnote {
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    .vh-head {
        flex-wrap: wrap;
    }

    .vh-version + .vh-date {
        margin-left: 0;
    }

    .vh-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Subscribe (W3.1, F-03) — live-page parity port */
.subscribe {
    text-align: center;
    padding: 2rem 1rem 3rem;
}

.subscribe h1 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.subscribe-subhead {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.subscribe #image {
    max-width: 150px;
    max-height: 200px;
    margin: 0 auto 0.5rem;
    display: block;
    object-fit: contain;
}

.pay-text {
    display: block;
    font-size: 18px;
    text-align: center;
    margin: 0.5rem 0;
}

.subscribe-buttons {
    margin: 2rem auto 0;
}

.subscribe-buttons a img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.subscribe-divider {
    height: 20px;
}

.stripe-note {
    display: block;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

.ssl-badge {
    display: block;
    margin: 2.5rem auto 0;
}

/* ============================================================
   Motion & polish (spruce-up, 2026-09-03)
   Reveals only activate when JS adds .js-reveal (script) so a
   no-JS visit still shows all content.
   ============================================================ */

/* Screenshots (hero + feature detail blocks) */
.hero-visual {
    display: flex;
}

.hero-shot,
.feature-shot {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(159, 205, 96, 0.14), transparent 55%),
        var(--tint);
    box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.65);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hero-visual .hero-shot {
    flex: 1;
}

.hero-shot img,
.feature-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.hero-shot figcaption,
.feature-shot figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.hero-shot:hover,
.feature-shot:hover {
    transform: translateY(-4px);
    border-color: var(--focus-ring);
    box-shadow: 0 28px 54px -26px rgba(0, 0, 0, 0.75);
}

.feature-shot:hover {
    transform: translateY(-4px);
}

/* Buttons: depth, lift, and a soft moving shine on the primary CTA */
.btn {
    transition: transform .15s ease, box-shadow .22s ease, background-color .2s ease,
        border-color .2s ease, color .2s ease;
}

.btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px -10px rgba(159, 205, 96, 0.8);
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(159, 205, 96, 0.9);
}

.btn-primary:hover::after {
    left: 140%;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary:hover {
    transform: translateY(-2px);
}

/* Top-nav links: growing underline on hover */
.site-nav > a {
    position: relative;
}

.site-nav > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.site-nav > a:hover::after {
    transform: scaleX(1);
}

/* Card + step hover lift */
.feature-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 18px 34px -24px rgba(0, 0, 0, 0.7);
}

.step {
    transition: transform .18s ease, border-color .18s ease;
}

.step:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.step .step-num {
    transition: transform .2s ease;
}

.step:hover .step-num {
    transform: scale(1.1);
}

/* Feature detail media + copy entrance feel */
.detail-copy h3 {
    background: linear-gradient(90deg, var(--text), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CTA band: gentle breathing glow */
.cta-band {
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 130% at 50% 125%, rgba(159, 205, 96, 0.32), transparent 62%);
    animation: cta-glow 6s ease-in-out infinite;
    pointer-events: none;
}

.cta-band > * {
    position: relative;
}

@keyframes cta-glow {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* Scroll reveal — hidden state only under .js-reveal (added by site.js) */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: calc(var(--reveal-stagger, 0) * 70ms);
}

.js-reveal [data-reveal].in-view {
    opacity: 1;
    transform: none;
}

.card-grid .feature-card:nth-child(1) { --reveal-stagger: 0; }
.card-grid .feature-card:nth-child(2) { --reveal-stagger: 1; }
.card-grid .feature-card:nth-child(3) { --reveal-stagger: 2; }
.card-grid .feature-card:nth-child(4) { --reveal-stagger: 3; }
.steps .step:nth-child(1) { --reveal-stagger: 0; }
.steps .step:nth-child(2) { --reveal-stagger: 1; }
.steps .step:nth-child(3) { --reveal-stagger: 2; }

/* Reviews page (T2.4): curated third-party review cards — palette matches the
   site theme (--surface / --border, theme-aware), consistent with .feature-card. */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.reviews-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

[data-theme="light"] .reviews-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.reviews-card h2 {
    margin: 0 0 6px;
}

.reviews-rating {
    margin: 0 0 2px;
    font-weight: 600;
    color: var(--text);
}

.reviews-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.reviews-quote {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: var(--tint);
    border-radius: 0 8px 8px 0;
}

.reviews-quote p {
    margin: 0;
}

.reviews-footer {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    .js-reveal [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}