:root {
    /* Primary colors.

       --color-primary is the one that may carry TEXT, in either direction:
       white on it (5.0:1) and it on the page background (4.8:1) both clear the
       WCAG AA 4.5:1 floor for normal-size text. --color-secondary is 3.6:1 and
       3.45:1 on those same pairs, so it is a border, focus-ring and gradient
       colour only — it was the primary CTA's background on every page until
       2026-09-15, which made the conversion button the lowest-contrast text on
       the site (F-05). tests/cta-contrast.test.ts computes both ratios from
       these hex values and fails the build if either drops below 4.5.

       --color-primary-hover exists because the hover state used to go LIGHTER:
       --color-secondary-light is 80% alpha, which composites to #5ba3d6 over
       white, and white on that is 2.7:1 — worse than the resting state the
       audit flagged. A button's hover has to darken. */
    --color-primary: #2675ac;
    --color-primary-hover: #1f6291;
    --color-secondary: #328dcc;
    --color-secondary-light: #328ccccc;
    --color-secondary-xlight :#328ccc9c;
    
    /* Text colors */
    --color-text: rgb(43, 43, 43);
    --color-text-secondary: rgb(80, 80, 80);
    --color-text-tertiary: #6b7280;
    
    /* Background colors */
    --color-background: rgb(249, 250, 251);
    --color-white: #ffffff;
    --color-white-hover: #eff2f5;
    
    /* Border colors */
    --color-border: #e0e0e0;
    
    /* Error/Danger colors */
    --color-danger: #d03333;
    --color-danger-hover: #c43030;

    --filter-text-secondary: invert(45%) sepia(9%) saturate(396%) hue-rotate(182deg) brightness(94%) contrast(90%);
    --filter-text: invert(20%) sepia(8%) saturate(396%) hue-rotate(182deg) brightness(94%) contrast(90%);
}

body {
    font-family: "Rubik", sans-serif;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    background-color: var(--color-background);
    /* 100vh less the browser's default 8px body margin, top and bottom. Plain
       100vh made every short page 16px taller than the window, so the 404 and
       "Analytics not available" scrolled with nothing to scroll to (measured
       2026-10-31: 1006px in a 990px window). */
    min-height: calc(100vh - 16px);
    position: relative;
}

/* Form elements don't inherit font-family by default */
input, button, select, textarea {
    font-family: inherit;
}

h1, h2, h3, h4 {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
}

.logout-form {
    display: inline;
    margin: 0;
}

.logout-form button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.link {
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
    font-weight: 600;
    font-size: 16px;
    margin-right: 30px;
    text-decoration: underline;
}

/* That 30px is nav spacing, and it leaked into body copy: an inline
   `<a class="link">` inside a paragraph rendered a 30px gap before whatever
   followed it, so the pricing box read "30-day refund on any charge , no
   questions asked." and the comparison note read "Plausible , Fathom". Prose
   contexts get it back to zero rather than every prose anchor needing a
   second class it will eventually be written without. */
p .link,
li .link,
td .link,
figcaption .link {
    margin-right: 0;
}

/* WCAG 2.2 asks for 24x24 CSS px of target. A 16px link is 19px tall, so nav
   and footer links were under it on every page — the padding is invisible
   because these sit on their own line. */
header .nav .link,
footer .link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* A label that exists for screen readers and nothing else. The hero input had
   only a placeholder, which is not an accessible name: it disappears on focus
   and is not exposed as one. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.link:hover {
    color: inherit;
}

.red-link {
    color: var(--color-danger);
}

.red-link:hover {
    color: var(--color-danger-hover);
}

header {
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    padding-left: 140px;
    padding-right: 140px;
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}

.website-name {
    color: var(--color-primary);
    margin: 0;
    font-size: 30px;
    font-weight: 700;
}

.nav {
    justify-self: end;
    display: flex;
    align-items: center;
}

.standard-button {
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    background-color: var(--color-white);
}

.standard-button:hover {
    background-color: var(--color-white-hover);
    transform: translateY(+2px);
}

.standard-button:active {
    background-color: var(--color-white-hover);
    transform: translateY(0);
}

.blue-button {
    background-color: var(--color-primary);
    color: white;
    border: none;
}

.blue-button:hover {
    background-color: var(--color-primary-hover);
}

main {
    margin-left: 140px;
    margin-right: 140px;
}

.standard-text {
    font-size: 19px;
    font-weight: 450;
    text-align: center;
    color: #6b7280;
}

.bottom {
    position: absolute;
    bottom: 15px;
}

@media screen and (max-width: 900px) {
    header {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }

    main {
        margin-left: 10px;
        margin-right: 10px;
    }

    .link {
        margin-right: 15px;
    }

    .desktop-only {
        display: none;
    }
}

/* Common card styles */
.card, .hover-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Native navigation links use the same button geometry. */
a.standard-button { display: inline-block; text-decoration: none; text-align: center; }
.badge-copy-button { border: 0; padding: 0; background: transparent; cursor: pointer; }

/* Keep both account navigation controls inside a320px header. */
@media (max-width: 480px) { header .nav { gap: 8px; } header .nav .link { margin-right: 0; } }