:root {
    --pico-spacing: 1.5rem;

    --is3-clr-logo-green: #83A13C;
    --is3-clr-logo-dark-green: #5b9600;

    --is3-clr-bg-light: white;
    --is3-clr-bg-muted: var(--pico-color-sand-150);

    --is3-clr-primary: var(--pico-color-green-350);
    --is3-clr-secondary: var(--pico-color-green-850);

    --is3-clr-headings: linear-gradient(to right, #4f009e 0px, #ea6800 50%, #83A13C 100%);
    --is3-clr-font-muted: #6c6964;
    --is3-clr-font-body: var(--pico-color-green-800);
    --is3-clr-font-primary: var(--pico-color-green-450);
    --is3-clr-font-gray: #666c;
    --is3-clr-font-alternate: #497685;

    --is3-clr-dark: #31231d;
    --is3-clr-complementary: #44301E;
    --is3-gradient: linear-gradient(to right, #278808 0px, #8fc73f 50%, #4da01f 100%);

    --is3-warning-red: #811d26;

    --is3-font-alternate: "Inter", sans-serif;
}

body {
    color: var(--pico-color-green-800);
    background-color: var(--pico-color-sand-50);
}

header {
    padding: 1rem 0;
    background-color: var(--is3-clr-bg-light);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(10%) blur(50px);
    background: var(--pico-background);
}

header .container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}

header a {
    color: var(--is3-clr-secondary);
    text-decoration: none;
}

header a:hover {
    text-decoration: underline;
}

header a.logo img {
    height: 60px;
    min-width: 200px;
}

header a.logo strong {
    display: none;
    color: var(--is3-clr-secondary);
    font-weight: normal;
    font-size: 14px;
    margin-left: 0.75rem;
}

header a.logo:hover {
    text-decoration: none;
}

header nav ul {
    align-items: baseline;
    /* override pico */
}



header nav li.desktop-only {
    display: none;
    /* hide "download" on small screens (mobile) */
}

@media (min-width: 768px) {
    header nav li.desktop-only {
        display: inline-flex;
        /* show "download" on non-mobile */
    }
}

footer .copyright {
    color: var(--is3-clr-font-muted);
    font-size: 0.7rem;
    text-align: center;
}

/* navbar handle media queries */
@media (min-width: 1280px) {
    .container {
        max-width: 950px;
        /* keep it narrow */
    }
}

@media (min-width: 1024px) {
    header a.logo strong {
        display: inline-flex;
        /* hide "digital media transcription software" */
    }
}


h1,
h2,
h3 {
    background: var(--is3-clr-headings);
    background-clip: text;
    color: transparent;
}

video {
    max-width: 100%;
}

[role=button],
[type=button],
[type=file]::file-selector-button,
[type=reset],
[type=submit],
button,
button.primary,
button.secondary,
a[role="button"].primary,
a[role="button"].secondary {
    border-radius: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

button.primary,
a[role="button"].primary {
    color: white;
    background-color: var(--is3-clr-primary);
    border-color: var(--is3-clr-primary);
}

button.secondary {
    background-color: var(--is3-clr-secondary);
    border-color: var(--is3-clr-secondary);
}

button.muted {
    background-color: var(--is3-clr-font-muted);
    border-color: var(--is3-clr-font-muted);
}

button.sm,
a.sm[role="button"] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

section {
    margin-top: calc(var(--pico-spacing) * 2);
    margin-bottom: calc(var(--pico-spacing) * 2);
}
section:first-of-type {
    margin-top: var(--pico-spacing);
}
section.banner {
    background-color: #dae2ff;
    margin: var(--pico-spacing) 0 calc(var(--pico-spacing) * 3) 0;
    padding: var(--pico-spacing);
}
section.hero .grid {
    column-gap: 2.5rem;
}

article.muted {
    background-color: var(--is3-clr-bg-muted);
    border-radius: 1rem;
}

footer {
    background-color: lightgrey;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer ul li {
    font-size: 80%;
    list-style-type: none;
}


/* Make some elements less than full width on desktop. */
.max-w-sm {
    max-width: 576px;
}

.max-w-md {
    max-width: 768px;
}

.max-w-lg {
    max-width: 1024px;
}

.max-w-xl {
    max-width: 1280px;
}

.max-w-xxl {
    max-width: 1536px;
}

/* Django forms */
.errorlist {
    color: var(--is3-warning-red);
}

/* Accordions */
details summary {
    font-weight: bold;
    margin-bottom: calc(var(--pico-spacing) * 0.5);
}

details[open]>summary {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: calc(var(--pico-spacing) * 0.5);
}

.faq details {
    margin-left: calc(var(--pico-spacing) * 1.25);
    margin-bottom: calc(var(--pico-spacing) * 0.5);
}

.faq details>summary {
    margin-left: calc(var(--pico-spacing) * -1.25);
    margin-bottom: calc(var(--pico-spacing) * 0.25);
}

pre {
    font-size: 0.6rem;
    padding: calc(var(--pico-spacing) * 0.25);
}

/* Formatting Utils */
.center {
    text-align: center;
}

.pad-vertically {
    padding-top: calc(var(--pico-spacing) * 1.5);
    padding-bottom: calc(var(--pico-spacing) * 1.5);
}

.strike-through {
    text-decoration: line-through;
}

/* Feature Comparison Table has tighter spacing */
table.tight {
    table-layout: fixed;
    width: 100%;
    font-size: 0.8rem;
}

table.tight tr {
    vertical-align: top;
}

table.tight td,
table.tight th {
    padding: 0.5rem;
    line-height: 1rem;
}

table.tight th h3 {
    font-size: 1rem;
    margin-bottom: 0;
}

table.feature-comparison {
    background-color: var(--is3-clr-bg-light);
    min-width: 450px;
}

table.feature-comparison th:first-child {
    width: 40%;
}

table.feature-comparison th:not(:first-child) {
    width: 20%;
}


/* Icons */
.icon {
    width: 100%;
    height: 24px;
}

.icon.yes {
    background: url("../img/check.8d5821f74a63.png") no-repeat top;
}

.icon.no {
    background: url("../img/x.e48c4b6c3ff4.png") no-repeat top;
}


/* Quotes */
blockquote {
    margin: 3rem 3rem;
    padding: 1rem;
    font-size: 1.5rem;
    line-height: 1.7rem;
    font-weight: 400;
    color: var(--is3-clr-font-alternate);
    border-left: none;
}

blockquote footer {
    display: inline;
    font-size: 0.8rem;
    line-height: 0.8rem;
    margin-top: 0.5rem;
    background-color: transparent;
}


.caption {
    text-align: center;
    font-size: 0.8rem;
    font-style: italic;
}