* { padding: 0; margin: 0; }

:root {
    --text-font: PolymathWeb, serif;
    --text-font-condensed: PolymathWeb, sans-serif;
    --text-accent-font: PolymathWeb, sans-serif;
    --accent-font: PolymathWeb, sans-serif;
    --headline-font: PolymathWeb, sans-serif;
    --mono-font: PolymathWeb, "CovikSansMono-Web", monospace;
    --maxwidth: 1200px;
}

body {
    background: #aaa;
    font-family: var(--text-font);
}

i {
    font-style: normal;
}

#outer {
    background: white;
    overflow: hidden;
}

header {
    position: relative;
    text-align: center;
    /* box-shadow: 0 0 20px rgba(0,0,0,0.2); */
    z-index: 100;
    margin-bottom: 0px;
    background-color: whitesmoke;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-bottom: 1px solid #ccc;
    background-image: url("../GoodhertzRepeatingLogoPattern.08148c302007.png");
    background-size: 500px 150px;
}

header .pattern-bg {
    opacity: 0.25;
    background-size: 100px 100px;
}

#tempbanner {
    background: white;
    border-bottom: 1px solid hsl(17, 60%, 85%);
    background-image: url("../GoodhertzPluginLogosBG.de3498b55633.png?t=2");
    background-size: 500px 50px;
    background-position: 0% 0%;
}

#tempbanner .inner {
    max-width: 650px;
    margin: auto auto;
    padding: 0px 20px;
    text-align: center;
    font-variation-settings: "wght" 350, "opsz" 14, "ital" 1;
    color: hsl(19, 90%, 40%);
    color: hsl(230, 80%, 40%);
    color: #444;
    line-height: 110%;
}

#tempbanner .inner .text {
    display: inline-block;
    backdrop-filter: blur(1px);
    padding: 10px 90px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

#tempbanner .inner .text strong {
    font-variation-settings: "wght" 750, "opsz" 14, "ital" 1;
}

/* #tempbanner .inner span::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: red;
    mask: linear-gradient(to top, transparent, black 35%);
    backdrop-filter: blur(10px);
 } */

#tempbanner .inner a {
    color: inherit;
    /* text-decoration: none; */
}

#main {
    position: relative;
    z-index: 0;
    max-width: var(--maxwidth);
    margin: auto auto;
    padding: 10px;
    box-sizing: border-box;
}

.account-info-bg {
    background: #eee;
    background-image: url("../GoodhertzRepeatingLogoPattern2.54fa0dabbd2c.png");
    background-size: 500px 100px;
    border-bottom: 1px solid #ddd;
}

.account-info {
    text-align: right;
    color: #555;
    height: 30px;
    font-size: 0.85rem;
    position: relative;
    z-index: 10;
    font-variation-settings: "wght" 700, "ital" 0, "opsz" 0;
    max-width: var(--maxwidth);
    margin: auto auto;
    position: relative;
}

.account-info .account-info-inner {
    position: absolute;
    top: 7px;
    right: 36px;
}

.account-info a {
    text-decoration: underline;
    color: royalblue;
}

.account-info form {
    display: inline-block;
}

.account-info button { /* to make logout look like a link */
    text-decoration: underline;
    border: none;
    background: none;
    color: royalblue;
    font-family: var(--text-font), sans-serif;
    font-variation-settings: "wght" 700, "ital" 0, "opsz" 0;
    cursor: pointer;
}

.account-info .sep {
    color: #ccc;
    display: inline-block;
    margin: 0 10px;
}

.main-nav .circle-logo {
    display: block;
    text-decoration: none;
    z-index: 100;
    position: absolute;
    top: -20px;
    left: 20px;
    height: 135px;
    width: 135px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border: 1px solid #ccc;
    /* transform: rotate(-2deg); */
}

.main-nav .circle-logo img {
    width: 100%;
}

.main-nav .logo svg {
    margin: auto auto;
}

#gordy {
    transform: translate(10px, 0px);
    margin: auto auto;
}

header .headers {
    height: 88px;
    position: relative;
    max-width: var(--maxwidth);
    margin: auto auto;
}

/* The nav is one bar: a white capsule holding quiet text links, with the
   green Buy (or View Cart) at its end as the one thing that asks to be
   pressed. It floats over the header's pattern, so it has its own ground. */
header .top-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: 21px;
    right: 28px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.05);
}

header .top-nav li {
    position: relative;
    list-style: none;
    background: none;
}

/* a faint rule between each item and the one before it; not before the
   green Buy, which stands apart on its own */
header .top-nav > li + li:not(.nav-cart-slot):not(.nav-menu-slot)::before {
    content: "";
    position: absolute;
    left: -1.5px;
    top: 50%;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

header .top-nav li a {
    position: relative;
    display: block;
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2b2b30;
    font-size: 15px;
    line-height: 20px;
    font-variation-settings: "wght" 560, "opsz" 24;
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s;
}

header .top-nav li a.heavy {
    /* font-variation-settings: "wght" 750, "ital" 1; */
}

/* the cart link only appears when there is something in the cart, so it is
   filled in rather than outlined: the one nav item that is about the customer's
   own state, not about where they can go */
/* green, like the savings and totals on the checkout page it leads to */
header .top-nav li a.cart,
header .top-nav li a.buy {
    margin-left: 4px;
    background: seagreen;
    color: white;
    font-variation-settings: "wght" 700, "opsz" 24;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.18);
}

/* the same lift the site's other filled buttons use: the green brightens a
   little and the cart rolls forward, rather than changing colour */
header .top-nav li a.cart,
header .top-nav li a.buy {
    transition: filter 0.15s ease-out;
}

header .top-nav li a.cart:hover,
header .top-nav li a.buy:hover {
    background: seagreen;
    color: white;
    filter: brightness(1.12);
}

header .top-nav li a.cart .nav-cart,
header .top-nav li a.buy .nav-cart {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

header .top-nav li a.cart:hover .nav-cart,
header .top-nav li a.buy:hover .nav-cart {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    header .top-nav li a.cart:hover .nav-cart,
    header .top-nav li a.buy:hover .nav-cart {
        transform: none;
    }
}

/* the glyph is in the markup either way, so add-to-cart.js can turn Buy into
   the cart link without building any; only the cart state shows it */
.nav-cart {
    display: none;
    position: relative;
    margin-right: 7px;
}

.cart .nav-cart,
.buy .nav-cart,
.add-to-cart .nav-cart {
    display: inline-block;
    vertical-align: -3px;
}

.nav-cart svg {
    display: block;
}

/* the count sits at the far end from the cart, pinned to the corner rather than
   set in the flow: the nav is a grid of equal columns, so a badge that took
   width would widen every button and push the row under the logo */
.nav-cart-count {
    display: none;
    position: absolute;
    top: -9px;
    right: -9px;
    min-width: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid seagreen;
    border-radius: 100px;
    font-size: 11px;
    line-height: 16px;
    font-variation-settings: "wght" 800, "ital" 0;
    text-align: center;
}

.cart .nav-cart-count {
    display: block;
}

.nav-cart-count:empty {
    display: none;
}

/* the badge's own text takes the button's background, so it reads as a hole
   punched in the cart rather than a second colour */
header .top-nav li a.cart .nav-cart-count {
    background: white;
    color: seagreen;
}

header .top-nav li a.cart:hover .nav-cart-count {
    background: white;
    color: seagreen;
}

/* the glyph no longer holds anything, so it needs no positioning context */
.nav-cart {
    position: static;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* where you are: tinted in the site's blue rather than underlined */
header .top-nav li a#current-page {
    background: rgba(65, 105, 225, 0.1);
    color: royalblue;
}

header .top-nav li a:not(.cart):not(.buy):hover {
    background: #f0f0f3;
    color: #111;
}

header .top-nav li a#current-page:hover {
    background: rgba(65, 105, 225, 0.14);
    color: royalblue;
}

@media (max-width: 650px) {
    .account-identifier {
        display: none;
    }
    
    #content .plugin-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Narrow screens: the bar keeps only the cart and the menu button, and the
   rest of the links are in the menu (nav-menu.js, which uses the same width).
   Wider than a phone, so the full bar never crowds the logo. */
@media (max-width: 760px) {
    header .top-nav {
        right: 12px;
    }

    header .top-nav > li:not(.nav-cart-slot):not(.nav-menu-slot) {
        display: none;
    }

    /* the cart is its glyph and its count; the menu spells it out */
    header .top-nav li a.cart,
    header .top-nav li a.buy {
        margin-left: 0;
        padding: 7px 11px;
    }

    header .top-nav li a.cart .nav-label,
    header .top-nav li a.buy .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    header .top-nav li a.cart .nav-cart,
    header .top-nav li a.buy .nav-cart {
        margin-right: 0;
    }

    /* no dividers once it is only the cart and the menu */
    header .top-nav > li::before {
        display: none;
    }
}

#content .plugin-list {
    padding: 0;
    margin: 10px 0 0 0;
}

#content .plugin-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
    list-style-type: none;
    align-items: center;
    margin: auto auto;
}

#content .plugin-list .nameplate-wrapper {
    width: 100%;
}

#content .plugin-list a {
    color: rgba(255,255,255,0.75);
    display: flex;
    flex-direction: column;
    margin: auto;
    height: 124px;
    max-width: 420px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    transition: 0.15s;
}

#content .plugin-list a:hover {
    color: rgba(255,255,255,1.0);
    transform: scale(1.03, 1.03);
}

#content .plugin-list a img {
    display: block;
    margin: auto auto;
    max-height: 100px;
    /* margin-top: -6px; */
    margin-bottom: -10px;
}

#content .plugin-list a .tagline {
    padding: 0px 20px 4px;
    font-variation-settings: 'wght' 400, 'ital' 1;
    text-align: center;
    font-size: 16px;
    margin: auto;
}

@media (max-width: 400px) {
    #content .plugin-list a {
        height: 120px; 
    }

    #content .plugin-list a img {
        max-height: 88px;
    }
}

#text {
    max-width: 700px;
    margin: auto auto;
    /* margin-top: 20px; */
    /* display: grid; */
    /* grid-template-columns: 1fr; */
    /* grid-template-areas: "a" "c"; */
    padding: 40px 10px;
}

#text.narrow {
    max-width: 500px;
    margin: auto auto;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 200px;
}

#text.form {
    max-width: 750px;
    margin: auto auto;
    text-align: center;
}

#text.has-sidebar {
    max-width: 800px;
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    grid-template-areas: "x a a a a" "b c c c c";
    grid-column-gap: 20px;
}

@media (max-width:650px) {
    #text.has-sidebar {
        grid-template-columns: 100%;
        grid-template-areas: "x" "a" "b" "c";
    }

    #text .content {
        margin-top: 60px;
    }
}

#text .title {
    grid-area: a;
}

#text .sidebar {
    /* border-top: 2px solid #eee; */
    grid-area: b;
}

#text .sidebar ul {
    padding: 0;
}

#text .sidebar .toc li {
    font-family: var(--accent-font);
    font-size: 16px;
    list-style: none;
}

#text .sidebar .toc li a {
    border-bottom: none;
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px 20px;
}

#text .sidebar .toc li a:hover {
    background: #eee;
}

#text .content {
    grid-area: c;
}

#content .big-plugin-link {
    position: relative;
    text-decoration: none;
    color: royalblue;
    font-size: 24px;
    font-family: var(--accent-font);
    margin-bottom: 1px;
}

#content .big-plugin-link .pattern-bg {
    opacity: 0.2;
    background-size: 50%;
}

.center {
    text-align: center !important;
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { margin-bottom: 20px; color: #222; }

#content h1 { font-variation-settings: 'opsz' 18, 'wght' 800; font-size: 3em; line-height: 100%; margin-bottom: 60px; }

#content h2 { font-variation-settings: 'opsz' 16, 'wght' 750; font-size: 2.5em; line-height: 100%; margin-bottom: 30px; }
#content h2:not(:first-child) { margin-top: 60px; }
#content h3 { font-variation-settings: 'opsz' 12, 'wght' 725; font-size: 1.3em; line-height: 100%; }
#content h4 { font-variation-settings: 'opsz' 12, 'wght' 700; font-size: 1.2em; line-height: 110%; }
#content h5 { font-variation-settings: 'opsz' 12, 'wght' 775; font-size: 1.1em; line-height: 120%; }
#content h6 { font-variation-settings: 'opsz' 12, 'wght' 700; font-size: 1.05em; line-height: 100%; }

#content h1 em { font-variation-settings: 'opsz' 18, 'wght' 800, 'ital' 1; }
#content h2 em { font-variation-settings: 'opsz' 16, 'wght' 750, 'ital' 1; }
#content h3 em { font-variation-settings: 'opsz' 12, 'wght' 725, 'ital' 1; }
#content h4 em { font-variation-settings: 'opsz' 12, 'wght' 700, 'ital' 1; }
#content h5 em { font-variation-settings: 'opsz' 12, 'wght' 675, 'ital' 1; }
#content h6 em { font-variation-settings: 'opsz' 12, 'wght' 650, 'ital' 1; }

#content ul, #content ol {
    margin-bottom: 20px;
    padding: 0 20px;
}

#content li {
    margin-bottom: 12px;
    font-variation-settings: "wght" 400, "ital" 0;
    line-height: 140%;
}

#content li ul {
    /* margin-top: 10px; */
    font-size: 0.8em;
    font-variation-settings: "wght" 400, "ital" 1;
}

#content ul li ul {
    margin-top: -6px;
}

#content li ul li {
    margin-bottom: 2px;
}

#content li p:last-of-type {
    margin-bottom: 6px;
}

#content p {
    font-variation-settings: "opsz" 12, "wght" 400;
    margin-bottom: 20px;
    line-height: 150%;
}

#content em {
    font-variation-settings: 'wght' 400, 'ital' 1;
    font-style: normal;
}

#content a {
    color: royalblue;
    text-decoration: underline;
    text-decoration-color: #ddd;
}

#content strong { font-variation-settings: "opsz" 12, "wght" 750; }
#content strong em { font-variation-settings: "opsz" 12, "wght" 750, "ital" 1; }
#content em strong { font-variation-settings: "opsz" 12, "wght" 750, "ital" 1; }

#content pre,
#content code {
    font-family: var(--mono-font);
}

#content table {
    border: 1px solid #eee;
    padding: 5px;
}

#content table td, #content table th {
    padding: 6px 12px;
}

#content table thead {
    background: #eee;
}

#content table tr:nth-child(even) {
    background: whitesmoke;
}

#content code {
    font-family: var(--mono-font);
    color: darkorchid;
}

#content blockquote {
    font-variation-settings: 'wght' 400, 'ital' 1;
    font-size: 95%;
    padding-left: 20px;
    color: #555;
}

#content cite {
    text-align: right;
    display: block;
    margin-top: -20px;
    font-style: normal;
    font-variation-settings: "wght" 350, "ital" 1, "opsz" 24;
}

footer {
    background: #333;
    color: white;
    text-align: right;
    position: relative;
    border-bottom: 10px solid #111;
}

footer .pattern-bg {
    background-image: url("../footer_pattern_light.a3d486542528.png");
    opacity: 0.05;
    background-size: 200px;
}

.footer-inner {
    display: grid;
    margin: auto auto;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    max-width: var(--maxwidth);
}

.footer-inner .column {
    margin: 5px 4px 20px 0;
    padding: 20px 10px;
    /* border-top: 10px solid rgba(255,255,255,0.3); */
    position: relative;
}

.footer-inner .column:after {
    position: absolute;
    background-image: url("../img/logos/hertz-color-danico-250-lssy-by.324879df5cb0.png");
    background-repeat: no-repeat;
    width: 125px;
    height: 125px;
    background-size: 125px;
    bottom: -22px;
    right: -20px;
}

.footer-inner .column:nth-child(1):after {
    content: "";
}

.footer-inner .column:not(:nth-child(1)):after {
    content: none;
}

#henry-danico {
    width: 125px;
    position: absolute;
    bottom: -25px;
    right: -15px;
}

footer ul {
    list-style: none;
}

footer a {
    color: white;
    text-decoration: none;
    border-bottom: 4px solid rgba(255,255,255,0.3);
    display: inline-block;
    padding: 6px 6px 1px 10px;
}

/* a line of text among the links, introducing the ones below it */
footer .footer-note {
    padding: 12px 6px 1px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-variation-settings: "wght" 400, "ital" 1;
}

footer a:hover {
    background-color: none !important;
    border-bottom-color: white;
    /* padding-right: 20px; */
}

@media (max-width: 875px) {
    .footer-inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-inner .column.spacer {
        display: block !important;
    }

    .footer-inner .column:nth-child(4):after {
        content: "";
    }

    .footer-inner .column:not(:nth-child(4)):after {
        content: none;
    }
}

@media (max-width: 500px) {
    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-inner .column:nth-child(5):after {
        content: "";
        left: 8px;
    }

    .footer-inner .column:not(:nth-child(5)):after {
        content: none;
    }

    .footer-inner li {
        margin: 4px 0px;
    }
}


/* generics */

.pattern-bg {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
}

.pattern-fg {
    position: relative;
    z-index: 1;
}

.small-text {
    font-size: 16px;
    line-height: 24px;
}

hr {
    margin-top: 40px;
    margin-bottom: 40px;
    border: 0;
    border-top: 1px solid #eee;
}

form.simple {
    margin: 30px auto 20px auto !important;
    text-align: center;
    max-width: 750px;
}

form.simple .grid {
    display: grid;
    /*grid-template-columns: calc(50% - 138px) minmax(232px, 320px) auto;*/
    grid-template-columns: minmax(auto, 200px) minmax(232px, 300px) minmax(auto, 140px);
    grid-template-rows: min-content 1fr;
    grid-gap: 0px 8px;
    text-align: left;
    align-items: center;
    place-content: center;
}

@media (max-width: 500px) {
    form.simple .grid {
        grid-gap: 0px 6px;
    }
}

form.simple .grid .column1,
form.simple .grid .column1-label {
    grid-column: 1 / 2;
    text-align: right;
    margin-right: 6px;
}

@media (max-width: 500px) {
    form.simple .grid .column1-label {
        grid-column: 2 / -1;
        text-align: left !important;
        /*margin-left: -20px;*/
    }
}

form.simple .grid .column2,
form.simple .grid .text-field {
    grid-column-start: 2;
}

form.simple .grid .recaptcha {
    grid-column: 2 / 3;
}

@media (max-width: 500px) {
    form.simple .grid .recaptcha {
        margin: auto;
        grid-column: 1 / -1 !important;  
    }
}

form.simple .grid .spacer {
    margin-bottom: 20px;
    grid-column: 1 / -1;
}

form.simple .grid hr {
    grid-column-start: 2;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #ccc;
}

form.simple .grid .wave {
    grid-column: 1 / -1;
}

form.simple p {
    padding: 4px;
}

form.simple h2 {
    text-align: center;
}

form.simple .grid p.explainer {
    padding: 4px 0px;
    max-width: 440px; 
    margin: auto  !important;
    font-variation-settings: 'wght' 400, 'ital' 1;
    font-size: 14px !important;
    font-size: 0.8em;
}

form.simple label {
    display: block;
    color: #333;
    font-variation-settings: 'wght' 700, 'ital' 1;
    margin-top: 10px;
    margin-bottom: 4px;
    padding-left: 2px;
}

form.simple li {
    text-align: left;
}

form.simple .helptext,
form.simple .errorlist {
    display: block;
    color: hsl(0, 65%, 50%);
    font-size: 14px !important;
    font-variation-settings: 'wght' 400, 'ital' 1;
    font-size: 0.8em;
    line-height: 1.0em;
    text-align: left;
    width: fit-content;
    margin: 4px 0px 10px;
    grid-column-start: 2;
}

form.simple .helptext { /*hide helptext by default*/
    display: none;
}

form.simple .helptext.invalid {
    display: block;
}

form.simple ul.errorlist,
form.simple .helptext ul  {
    margin: 4px 0px 10px !important; 
    padding: 0px !important;
}

form.simple input[type='text'],
form.simple input[type='password'],
form.simple input[type='email'] {
    font-family: var(--text-font);
    font-size: 18px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    margin: 4px auto;
    width: 100%;
    max-height: 40px;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    form.simple input[type='text'],
    form.simple input[type='password'],
    form.simple input[type='email'] {
        font-size: 16px;
    }
}

form.simple .valid-indicator {
    content: "";
    background-image: none;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    grid-column-start: 3;
}

form.simple .valid-indicator.valid {
    background-image: url("../icons/ghz_icon_checkmark.dfcbd45f049b.svg");
}

form.simple .valid-indicator.invalid {
    background-image: url("../icons/ghz_icon_xmark.38f6feb3427e.svg");
}

form.simple input[type='checkbox'] {
    -webkit-appearance: none;
    border-radius: 2px;
    background-color: #fff;
    height: 28px;
    width: 28px;
    border: 2px solid #c1c1c1;
    padding: 2px;
    font-size: 24px;
    font-variation-settings: 'wght' 700, 'ital' 1;
    position: relative;
    margin-bottom: -7px;
    margin-left: 12px;
}

form.simple input[type='checkbox']:hover {
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.15);
    border-color: #a9a9a9;
}

form.simple input[type='checkbox']:checked:after {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    left: 2px;
    bottom: -1px;
    color: #41c1bc;
    transition: all 0.2s;
    background-image: url("../icons/ghz_icon_checkmark.dfcbd45f049b.svg");
    background-repeat: no-repeat; 
}

form.simple button[type='submit'] {
    display: block;
    font-family: var(--text-font);
    font-variation-settings: 'wght' 700, 'ital' 1;
    font-size: 24px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border: 1px solid white;
    outline: none;
    background: darkorchid;
    color: white;
    width: 240px;
    height: 60px;
    margin: auto;
}

form.simple .grid button {
    margin: 0px;
    grid-column: 2 / 3; 
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

form.simple .grid button:active {
    filter: brightness(0.75);
    transition: all 0.1s ease 0s;
}

form.simple .grid .button-align {
    grid-column-start: 2;
    width: 240px;
    text-align: center;
}

@media (max-width: 500px) {
    form.simple .grid button[type='submit'] {
        margin: auto;
        grid-column: 1 / -1; 
    }

    form.simple .grid .button-align {
        margin: auto;
        grid-column: 1 / -1; 
    }
}

form.simple select[multiple] {
    font-family: var(--text-font-condensed);
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 100%;
    /* min-height: 450px; */
}

form.simple select {
    font-family: var(--text-font-condensed);
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 100%;
    /* min-height: 450px; */
}

form.checkboxes {
    margin: 30px auto 20px auto !important;
    text-align: center;
    max-width: 750px;
}

form.checkboxes label {
    font-size: 18px;
    font-variation-settings: 'wght' 400, 'ital' 1;
}

form.checkboxes button[type='submit'] {
    display: block;
    font-family: var(--text-font);
    font-variation-settings: 'wght' 700, 'ital' 1;
    font-size: 20px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border: 1px solid white;
    outline: none;
    background: darkorchid;
    color: white;
    padding: 10px 20px;
    margin: auto;
    margin-top: 30px;
}

form.checkboxes input[type='checkbox'] {
    -webkit-appearance: none;
    border-radius: 2px;
    background-color: #fff;
    height: 28px;
    width: 28px;
    border: 2px solid #c1c1c1;
    padding: 2px;
    font-size: 24px;
    font-variation-settings: 'wght' 700, 'ital' 1;
    position: relative;
    margin-bottom: -7px;
    margin-left: 12px;
}

form.checkboxes input[type='checkbox']:hover {
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.15);
    border-color: #a9a9a9;
}

form.checkboxes input[type='checkbox']:checked:after {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    left: 2px;
    bottom: -1px;
    color: #41c1bc;
    transition: all 0.2s;
    background-image: url("../icons/ghz_icon_checkmark.dfcbd45f049b.svg");
    background-repeat: no-repeat; 
}

#text pre {
    overflow: scroll;
    text-align: left;
    font-size: 12px;
    color: darkorchid;
    background: whitesmoke;
    padding: 10px;
}

/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	/* padding-top: 25px; */
    height: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ghz-inline-control {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.ghz-play {
    background-image: url("../icons/ghz_icon_play.bd2c2e86e9b5.svg");
    background-position-y: 3px;
}

.ghz-pause {
    background-image: url("../icons/ghz_icon_pause.c9bb3c655747.svg");
    background-position-y: 3px;
}

.audio-span audio {
    display: none;
}

.audio-span .sep-title.webaudio {
/*font-size: 80%;*/
padding: 0 0px 0 0;
display: inline-block;
border-radius: 4px;
/*box-shadow: 0 0 2px rgba(0,0,0,0.2);*/
position: relative;
cursor: pointer;
/*border: 1px solid #ddd;*/
/*background: white;*/
color: dodgerblue;
margin: 0 1px;
line-height: 161%;
text-indent: 0;
}

.webaudio .progress {
position: absolute;
background: black;
opacity: 0.3;
height: 100%;
width: 40px;
top: 0;
left: 0;
display: none;
}

.webaudio i.fa {
margin-right: 0.5em;
opacity: 0.9;
width: 12px;
text-align: center;
}

.footnote {
    font-size: 0.8em;
}

sup {
    vertical-align: baseline;
}

#content .footnote-ref {
    display: inline-block;
    padding: 0 6px;
    margin: 0 0 0 3px;
    font-size: 0.8em;
    line-height: 150%;
    font-variation-settings: 'wght' 700;
    border: 1px solid #eee;
    background: whitesmoke;
    border-radius: 100%;
    text-decoration: none;
}

.warning-box {
    background: #222;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    text-align: center;
    color: white;
}

.warning-box .warnings {
    max-width: 800px;
    color: white;
    margin: auto auto;
    padding: 10px 0;
    list-style: none;
    text-align: center;
    font-size: 16px;
    font-variation-settings: 'wght' 400, 'ital' 1;
}

.warning-box h3 { margin-bottom: 10px; font-variation-settings: 'wght' 750, 'ital' 1; }
.warning-box h4 { margin-top: 10px; font-variation-settings: 'wght' 650, 'ital' 0; }
.warning-box h5 { margin-top: 10px; font-variation-settings: 'wght' 650, 'ital' 0; font-size: 1em; font-feature-settings: "tnum" 1; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 10px; }

.warning-box strong {
    background: rgba(233, 37, 216, 0.706);
    display: inline-block;
    padding: -8px;
    font-variation-settings: 'wght' 750, 'ital' 1;
}

.warning-box a {
    color: white;
}

.warning-box ul {
    list-style: none;
}

.warning-box.coupon-sale {
    background: rgba(25, 156, 217, 0.885) !important;
}

.message-box {
    background: #333;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.message-box .messages {
    max-width: 500px;
    color: white;
    margin: auto auto;
    padding: 6px 0;
    list-style: none;
    text-align: center;
    font-size: 1.1em;
    font-variation-settings: 'wght' 300, 'ital' 1;
}

.message-box .messages strong {
    font-variation-settings: 'wght' 750, 'ital' 0;
}

.message-box.special {
    background: black;
    color: white;
    text-align: center;
}

.message-box.special {
    h1 {
        font-size: 2em;
        font-variation-settings: "wght" 700, 'ital' 0;
        margin-top: 20px;
    }

    p {
        max-width: 600px;
        padding: 20px;
        margin: auto auto;
        margin-bottom: 20px;
    }

    a {
        color: white;
    }
}

.sale-banner {
    border: 5px solid white;
    border-top: none;
    border-left: none;
    border-right: none;
    color: rgb(150, 90, 125);
    background: rgba(255, 0, 120, 0.2);
    background: rgb(150, 60, 145);
    border-color: rgb(100, 30, 125);
    /* color: white; */
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    z-index: 0;
    position: relative;
    padding: 20px 25px;
    font-variation-settings: 'wght' 400, 'ital' 1;
    text-align: center;
    font-size: 1.1em;
}

.sale-banner hr {
    border-color: rgba(0,0,0,0.1);
    padding: 0;
    margin: 8px 20px 3px;
}

.sale-banner a {
    color: inherit;
}

.wave {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 20px;
}

.wave canvas {
    height: 50px;
    width: 80px;
    margin: auto auto;
    display: block;
}

#content .free-trial-notice {
    text-align: center;
    font-variation-settings: 'wght' 400, 'ital' 1;
    background: whitesmoke;
    color: #333;
    padding: 20px;
    margin: 0;
    /* display: none; */
}

#content .more-videos {
    text-align: center;
    padding: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-variation-settings: "wght" 300;
}

.ghz-icon {
    max-width: 100px;
    display: block;
    margin: auto auto;
}

#mce-success-response { 
    color: seagreen;
}

#mce-error-response {
    color: firebrick;
}

#text.testimonials .preamble {
    font-variation-settings: 'wght' 400, 'ital' 1;
    font-size: 18px;
    max-width: 500px;
    margin-bottom: 50px;
}

#text .sidebar .toc li {
    margin-bottom: 0px;
}

#text .sidebar .toc li a {
    border: none;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    padding: 5px;
}

#text.testimonials .sidebar .toc li a:hover {
    color: hsl(220, 80%, 50%);
}

#text.testimonials .testimonial {
    padding-top: 40px;
    margin-bottom: 40px;
    border-top: 1px dashed #ccc;
}

#text.testimonials .testifier-link {
    font-variation-settings: 'wght' 700, 'ital' 0;
    font-size: 150%;
    display: block;
    margin-bottom: 8px;
}

#text.testimonials .bio {
    font-variation-settings: 'wght' 400, 'ital' 1;
    font-size: 14px;
    color: #555;
    text-align: left;
    margin-bottom: 20px;
    max-width: 400px;
    display: block;
}

#text.testimonials .quotation {
    font-size: 120%;
}

.embedded-screenshot {
    display: block;
    margin: auto auto;
    /* margin: 10px 10px 10px -20px; */
}

.embedded-screenshot a {
    display: block;
    width: 100%;
}

.embedded-screenshot .caption {
    margin-top: -10px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 90%;
    font-variation-settings: 'wght' 400, 'ital' 1;
    text-align: right;
}

.embedded-screenshot img {
    display: block;
    width: 100%;
}

/* #international-users {
    margin-top: 100px;
} */

.mfp-figure:after {
    background: transparent !important;
    box-shadow: none !important;
}
/* ------------------------------------------------- the header's plugin search */

/* The magnifying glass sits in the nav row with the other buttons; what it
   opens is over the page, further down this file. */
.top-nav .nav-search-slot {
    list-style: none;
    background: none;
    display: flex;
    align-items: center;
    flex: 0 0 34px;
    width: 34px;
}

.plugin-search {
    display: flex;
    align-items: center;
    height: 34px;
}

/* an icon button like the links beside it in the bar */
.plugin-search-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2b2b30;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 0.12s, color 0.12s;
}

.plugin-search-open:hover,
.plugin-search-open[aria-expanded="true"] {
    background: #f0f0f3;
    color: #111;
}

/* ---------------------------------------------- the search over the page */

html.search-locked,
html.search-locked body {
    overflow: hidden;
}

.plugin-search-modal[hidden] {
    display: none;
}

.plugin-search-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    /* high on the screen, the way a launcher opens */
    align-items: flex-start;
    padding: 12vh 16px 16px;
}

.plugin-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 30, 0.34);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.plugin-search-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.plugin-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}

.plugin-search-glyph {
    flex: 0 0 auto;
    color: #999;
}

.plugin-search-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: #222;
    font-family: var(--text-font);
    font-size: 21px;
    font-variation-settings: "wght" 500, "ital" 0;
}

.plugin-search-field:focus {
    outline: none;
}

.plugin-search-field::-webkit-search-cancel-button {
    cursor: pointer;
}

/* the keycap that says how to get out of here */
.plugin-search-close {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: whitesmoke;
    color: #888;
    font-family: var(--text-font);
    font-size: 12px;
    font-variation-settings: "wght" 600, "ital" 0;
    cursor: pointer;
}

.plugin-search-close:hover {
    background: #eee;
    color: #555;
}

/* what it finds */
.plugin-search-results {
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
}

.plugin-search-result {
    margin: 0;
    padding: 0;
    background: none;
}

.plugin-search-result a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--plugin-theme, #222);
    text-align: left;
    text-decoration: none;
}

.plugin-search-result.active a,
.plugin-search-result a:hover {
    background: rgba(65, 105, 225, 0.1);
}

.plugin-search-result img {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

/* what a page has instead of a logo */
.plugin-search-page-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    background: whitesmoke;
    color: #8a8a8a;
}

/* somewhere else entirely: a little arrow in the corner of its mark */
.plugin-search-page-mark.away {
    position: relative;
}

.plugin-search-page-mark.away::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 15px;
    height: 15px;
    border: 1px solid #e4e4e4;
    border-radius: 100px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h9v9'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.plugin-search-result.page a {
    color: #333;
}

.plugin-search-result.page .plugin-search-name {
    font-size: 16px;
}

.plugin-search-words {
    flex: 1 1 auto;
    min-width: 0;
}

.plugin-search-name {
    display: block;
    font-size: 17px;
    font-variation-settings: "wght" 700, "opsz" 16;
}

.plugin-search-tagline {
    display: block;
    color: #777;
    font-size: 13px;
    font-variation-settings: "wght" 400, "ital" 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plugin-search-free {
    flex: 0 0 auto;
    color: seagreen;
    font-size: 11px;
    font-variation-settings: "wght" 800, "ital" 0;
    text-transform: uppercase;
}

/* nothing typed yet: just the box, no rule under it */
.plugin-search-panel.is-empty .plugin-search-bar {
    border-bottom: none;
}

.plugin-search-panel.is-empty .plugin-search-results {
    display: none;
}

.plugin-search-note[hidden] {
    display: none;
}

/* how to drive it, and what it says when nothing matches */
.plugin-search-note {
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 16px;
    border-top: 1px solid #eee;
    background: whitesmoke;
    color: #888;
    font-size: 13px;
    font-variation-settings: "wght" 400, "ital" 0;
}

/* on a phone the search opens from the menu, and sits a little higher */
@media (max-width: 650px) {
    .plugin-search-modal {
        padding: 8vh 10px 10px;
    }

    .plugin-search-panel {
        max-height: 82vh;
    }

    .plugin-search-field {
        font-size: 18px;
    }
}

/* --------------------------------------------------- the phone's menu */

/* the hamburger, only on a phone; an icon button like the search's */
header .top-nav li.nav-menu-slot {
    display: none;
    list-style: none;
}

.nav-menu-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2b2b30;
    cursor: pointer;
    transition: background-color 0.12s;
}

.nav-menu-open:hover,
.nav-menu-open[aria-expanded="true"] {
    background: #f0f0f3;
}

@media (max-width: 760px) {
    header .top-nav li.nav-menu-slot {
        display: flex;
    }
}

html.menu-locked,
html.menu-locked body {
    overflow: hidden;
}

.nav-menu-modal[hidden] {
    display: none;
}

/* laid out as the search is: a sheet near the top of a blurred page */
.nav-menu-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 10px 10px;
}

.nav-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 30, 0.34);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.nav-menu-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 8px 10px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.nav-menu-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 8px 10px;
}

.nav-menu-title {
    color: #999;
    font-size: 13px;
    font-variation-settings: "wght" 600, "ital" 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f3f3f6;
    color: #555;
    cursor: pointer;
}

/* search first, looking like the field it opens */
.nav-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 6px;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: #f3f3f6;
    color: #777;
    font-family: var(--text-font);
    font-size: 17px;
    font-variation-settings: "wght" 500, "opsz" 24;
    text-align: left;
    cursor: pointer;
}

.nav-menu-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu-links li {
    margin: 0;
    padding: 0;
    background: none;
}

.nav-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #2b2b30;
    font-size: 19px;
    font-variation-settings: "wght" 600, "opsz" 24;
    text-decoration: none;
}

.nav-menu-link:hover {
    background: #f0f0f3;
}

/* where you are */
.nav-menu-link.current {
    background: rgba(65, 105, 225, 0.1);
    color: royalblue;
}

/* the cart, in the green it has in the header */
.nav-menu-link.is-cart {
    margin-top: 8px;
    background: seagreen;
    color: white;
    font-variation-settings: "wght" 700, "opsz" 24;
}

.nav-menu-link.is-cart:hover {
    background: seagreen;
    filter: brightness(1.1);
}

.nav-menu-link .nav-cart {
    display: inline-block;
    margin: 0;
}

.nav-menu-count {
    margin-left: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 100px;
    background: white;
    color: seagreen;
    font-size: 13px;
    font-variation-settings: "wght" 800, "ital" 0;
    text-align: center;
}