:root {
    --fund-primary: #1b5e20;
    --fund-primary-dark: #124516;
    --fund-accent: #e8f5e9;
    --fund-ink: #17311a;
}

body {
    color: var(--fund-ink);
    background: #f8faf8;
}

.support-navbar {
    background: var(--fund-primary);
}

.skip-link {
    position: absolute;
    z-index: 1100;
    padding: .75rem 1rem;
    background: #fff;
    color: var(--fund-primary-dark);
}

.support-hero {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(18, 69, 22, .97), rgba(46, 125, 50, .92));
}

.support-hero .lead {
    max-width: 48rem;
}

.legal-content {
    max-width: 56rem;
}

.legal-content section {
    scroll-margin-top: 1.5rem;
}

.download-logo {
    display: inline-grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    border: .2rem solid rgba(255, 255, 255, .75);
    border-radius: 1.5rem;
    color: var(--fund-primary-dark);
    background: #fff;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.08em;
}

.download-logo-lg {
    width: 8rem;
    height: 8rem;
    font-size: 2.75rem;
}

.product-intro {
    max-width: 46rem;
    font-size: 1.1rem;
}

.hero-metadata {
    margin: 0;
}

.hero-metadata > div {
    min-width: 8.5rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .65rem;
    background: rgba(0, 0, 0, .12);
}

.hero-metadata dt {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .8;
}

.hero-metadata dd {
    margin-bottom: 0;
    font-weight: 600;
}

.landing-section {
    scroll-margin-top: 1.5rem;
}

.section-heading {
    max-width: 48rem;
}

.feature-card {
    border: 1px solid #dfe9df;
    box-shadow: 0 .25rem .9rem rgba(19, 66, 24, .06);
}

.feature-card h3 {
    color: var(--fund-primary-dark);
}

.screenshot-card {
    overflow: hidden;
    border: 1px solid #dfe9df;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 .25rem .9rem rgba(19, 66, 24, .06);
}

.screenshot-card img,
.screenshot-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.4;
    object-fit: cover;
}

.screenshot-placeholder {
    display: grid;
    place-items: center;
    padding: 1rem;
    color: var(--fund-primary-dark);
    background:
        linear-gradient(145deg, #edf7ee, #dceede);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.release-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid #e4ebe4;
}

.release-list > div:last-child {
    border-bottom: 0;
}

.release-list dd {
    margin-bottom: 0;
    text-align: right;
}

.support-card {
    height: 100%;
    border: 0;
    border-top: .25rem solid var(--fund-primary);
    box-shadow: 0 .35rem 1.25rem rgba(19, 66, 24, .08);
}

.support-card .card-title,
.support-section h2 {
    color: var(--fund-primary-dark);
}

.support-card:focus-within,
.support-card:hover {
    box-shadow: 0 .55rem 1.5rem rgba(19, 66, 24, .14);
}

.video-tutorial-card {
    overflow: hidden;
    border: 1px solid #dfe9df;
    border-radius: .85rem;
    box-shadow: 0 .35rem 1.25rem rgba(19, 66, 24, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.video-tutorial-card:hover,
.video-tutorial-card:focus-within {
    transform: translateY(-.2rem);
    box-shadow: 0 .6rem 1.5rem rgba(19, 66, 24, .14);
}

.video-thumbnail-link {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #102312;
}

.video-tutorial-thumbnail {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 2.8rem;
    border-radius: .75rem;
    background: rgba(205, 32, 31, .94);
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%);
}

.video-play-button::after {
    position: absolute;
    top: 50%;
    left: 52%;
    width: 0;
    height: 0;
    border-top: .55rem solid transparent;
    border-bottom: .55rem solid transparent;
    border-left: .85rem solid #fff;
    content: '';
    transform: translate(-50%, -50%);
}

.video-meta-badge {
    display: inline-flex;
    padding: .28rem .65rem;
    border-radius: 999px;
    color: var(--fund-primary-dark);
    background: var(--fund-accent);
    font-size: .78rem;
    font-weight: 700;
}

.video-topic-badge {
    color: #425245;
    background: #edf1ed;
}

.video-empty-state {
    padding: clamp(2.5rem, 8vw, 5rem) 1.5rem;
    border: 1px dashed #b7cab9;
    border-radius: 1rem;
    background: #fff;
}

.video-empty-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--fund-primary);
    font-size: 1.35rem;
}

.support-section {
    scroll-margin-top: 1.5rem;
}

.support-section .section-body {
    background: #fff;
    border: 1px solid #dfe9df;
    border-radius: .75rem;
}

.support-section li + li {
    margin-top: .4rem;
}

.troubleshooting-item {
    border-left: .25rem solid var(--fund-primary);
}

.accordion-button:not(.collapsed) {
    color: var(--fund-primary-dark);
    background: var(--fund-accent);
}

.accordion-button:focus,
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(46, 125, 50, .3);
}

.support-footer {
    color: #dcebdc;
    background: var(--fund-primary-dark);
}

.support-footer a {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}