/* 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;
    }
}

/* 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);
}

/* 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;
}

/* 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;
}

/* 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; }

@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;
    }
}