/* Cart Station - brand and page styles, layered over the shared theme (style.css, xmenu.css).
   Loaded through /css/sitebundle.css. */

:root {
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: #0f766e;
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #1d3557;
    --cs-navy: #1d3557;
    --cs-cream: #f0fdfa;
    --cs-teal-dark: #0f766e;
}

.pagination {
    --bs-pagination-active-bg: #0d9488;
    --bs-pagination-active-border-color: #0d9488;
}

a {
    color: var(--cs-teal-dark);
}

h2 a:hover {
    color: var(--cs-teal-dark);
}

.btn-primary {
    --bs-btn-bg: #0d9488;
    --bs-btn-border-color: #0d9488;
    --bs-btn-hover-bg: #0f766e;
    --bs-btn-hover-border-color: #0f766e;
    --bs-btn-active-bg: #115e59;
    --bs-btn-active-border-color: #115e59;
    --bs-btn-disabled-bg: #0d9488;
    --bs-btn-disabled-border-color: #0d9488;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: #fff;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        color: #fff;
    }

.btn-outline-primary {
    --bs-btn-color: #0f766e;
    --bs-btn-border-color: #0d9488;
    --bs-btn-hover-bg: #0d9488;
    --bs-btn-hover-border-color: #0d9488;
    --bs-btn-active-bg: #0f766e;
    --bs-btn-active-border-color: #0f766e;
}

.cs-link-button {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    border: 0;
}

/* ---- Wordmark ------------------------------------------------------------------------------ */

.cs-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Fraunces", serif;
    font-size: 26px;
    color: var(--cs-navy);
    text-decoration: none;
    white-space: nowrap;
}

    .cs-wordmark:hover {
        color: var(--cs-navy);
        text-decoration: none;
    }

    .cs-wordmark strong {
        color: #0d9488;
        font-weight: 600;
    }

    .cs-wordmark .material-symbols-outlined {
        font-size: 34px;
        color: #0d9488;
    }

.mobile-header .cs-wordmark {
    font-size: 21px;
}

    .mobile-header .cs-wordmark .material-symbols-outlined {
        font-size: 26px;
    }

.header-customize-right {
    padding-top: 6px;
}

/* Mobile header: logo on the left, menu button on the right, and the menu slides in from the right.
   Overrides the theme (style.css), which centers the logo and flies the menu in from the left. */
header.mobile-header .header-container-wrapper .header-mobile-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

header.mobile-header .header-logo {
    width: auto;
    margin: 0;
}

header.mobile-header .toggle-icon-wrapper {
    position: static;
    padding: 8px;
    margin-right: -8px;
}

    header.mobile-header .toggle-icon-wrapper:before {
        display: none;
    }

    header.mobile-header .toggle-icon-wrapper:focus-visible {
        outline: 3px solid rgba(13, 148, 136, 0.4);
        border-radius: 6px;
    }

.header-mobile-nav.menu-drop-fly {
    left: auto;
    right: -280px;
    border-right: 0;
    border-left: solid 3px #0d9488;
}

    .header-mobile-nav.menu-drop-fly.in {
        left: auto;
        right: 0;
    }

body.menu-mobile-in {
    left: -280px;
}

.cs-mobile-menu-close {
    display: block;
    margin: 8px 8px 0 auto;
    padding: 6px;
    background: none;
    border: 0;
    color: #666;
    line-height: 1;
    cursor: pointer;
}

    .cs-mobile-menu-close .material-symbols-outlined {
        font-size: 28px;
    }

/* ---- Marketing pages ------------------------------------------------------------------------ */

.cs-landing-hero {
    background: linear-gradient(135deg, var(--cs-cream) 0%, #ffffff 60%);
    padding: 72px 0 64px;
}

    .cs-landing-hero h1 {
        font-size: 48px;
        line-height: 1.15;
        color: var(--cs-navy);
    }

    .cs-landing-hero .lead {
        font-size: 20px;
        color: #555;
        max-width: 560px;
    }

.cs-hero-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(29, 53, 87, 0.12);
    padding: 28px;
}

/* Home hero: the photo, and the sample student page over its lower-right corner, where there's only grass. On a
   phone the card sits under the photo, overlapping its bottom edge. */
.cs-hero-visual {
    position: relative;
}

.cs-hero-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(29, 53, 87, 0.18);
}

.cs-hero-visual .cs-hero-card {
    position: relative;
    margin: -24px 16px 0;
    padding: 22px;
}

@media (min-width: 992px) {
    /* Room below the photo for the card's button and bottom padding (41px + 18px), so the top of "Donate to
       Emma" lines up with the photo's bottom edge */
    .cs-hero-visual {
        padding-bottom: 59px;
    }

        .cs-hero-visual .cs-hero-card {
            position: absolute;
            right: -36px;
            bottom: 0;
            width: 300px;
            margin: 0;
            padding: 18px 20px;
        }

            .cs-hero-visual .cs-hero-card h3 {
                font-size: 1.35rem;
                margin-bottom: 8px !important;
            }

            .cs-hero-visual .cs-hero-card .cs-raised {
                font-size: 2rem;
            }

            .cs-hero-visual .cs-hero-card .cs-donate-button {
                padding-top: 8px;
                padding-bottom: 8px;
                font-size: 1.05rem;
            }
}

.cs-steps .cs-step {
    text-align: center;
    padding: 12px 18px;
}

    .cs-steps .cs-step .material-symbols-outlined {
        font-size: 44px;
        color: #0d9488;
        background: var(--cs-cream);
        border-radius: 50%;
        padding: 16px;
        margin-bottom: 12px;
    }

.cs-feature {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

    .cs-feature .material-symbols-outlined {
        color: #0d9488;
        font-size: 28px;
    }

    .cs-feature h3 {
        font-size: 20px;
        margin-bottom: 4px;
    }

.cs-plan-card {
    border: 1px solid #e9e2dc;
    border-radius: 16px;
    padding: 28px;
    height: 100%;
    background: #fff;
}

    .cs-plan-card.cs-plan-featured {
        border: 2px solid #0d9488;
        box-shadow: 0 12px 40px rgba(13, 148, 136, 0.12);
    }

    .cs-plan-card .cs-plan-fee {
        font-family: "Fraunces", serif;
        font-size: 44px;
        color: var(--cs-navy);
        line-height: 1;
    }

    .cs-plan-card ul {
        list-style: none;
        padding-left: 0;
    }

        .cs-plan-card ul li {
            padding: 4px 0;
        }

        .cs-plan-card ul .material-symbols-outlined {
            font-size: 18px;
            vertical-align: -4px;
            margin-right: 6px;
        }

        .cs-plan-card .cs-plan-features li {
            display: flex;
            align-items: flex-start;
        }

        .cs-plan-card .cs-plan-features .material-symbols-outlined {
            margin-top: 6px;
        }

        .cs-plan-card .cs-plan-feature-name {
            display: block;
        }

        .cs-plan-card .cs-plan-feature-detail {
            display: block;
            font-size: 13px;
            color: #777;
            line-height: 1.4;
        }

        .cs-plan-card .cs-plan-feature-missing .cs-plan-feature-name {
            color: #999;
        }

    .cs-plan-card h3 {
        font-size: 26px;
    }

/* The pricing page's estimator (pricing-estimator.js) */
.cs-estimator {
    background: var(--cs-cream);
    padding: 56px 0;
    margin-top: 32px;
}

    .cs-estimator .cs-estimator-inputs {
        background: #fff;
        border: 1px solid #e9e2dc;
        border-radius: 16px;
        padding: 24px;
    }

.cs-estimate-card {
    border: 1px solid #e9e2dc;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
}

    .cs-estimate-card.cs-plan-featured {
        border: 2px solid #0d9488;
        box-shadow: 0 12px 40px rgba(13, 148, 136, 0.12);
    }

    .cs-estimate-card h3 {
        font-size: 24px;
        margin-bottom: 2px;
    }

    .cs-estimate-card .cs-estimate-reason {
        min-height: 3.2em;
    }

    .cs-estimate-card .cs-estimate-rows {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        margin: 16px 0;
        padding-top: 12px;
        border-top: 1px solid #f0e9e3;
    }

        .cs-estimate-card .cs-estimate-rows dt {
            font-weight: normal;
            color: #555;
        }

        .cs-estimate-card .cs-estimate-rows dd {
            margin: 0;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

    .cs-estimate-card .cs-estimate-keep {
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #f0e9e3;
    }

    .cs-estimate-card .cs-estimate-keep-amount {
        font-family: "Fraunces", serif;
        font-size: 36px;
        color: var(--cs-navy);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .cs-estimate-card .cs-estimate-compare {
        color: #2b8a3e;
        font-weight: 600;
        min-height: 1.5em;
    }

        .cs-estimate-card .cs-estimate-compare.cs-estimate-compare-less {
            color: #c92a2a;
        }

/* A plan card that is a radio button (signup step 3) */
.cs-plan-option {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 24px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .cs-plan-option:hover {
        border-color: #99f6e4;
    }

    .cs-plan-option .cs-plan-radio {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 22px;
        height: 22px;
        margin: 0;
    }

    .cs-plan-option .cs-plan-radio:checked {
        background-color: #0d9488;
        border-color: #0d9488;
    }

    .cs-plan-option:has(.cs-plan-radio:checked) {
        border: 2px solid #0d9488;
        padding: 23px;
        box-shadow: 0 12px 40px rgba(13, 148, 136, 0.14);
    }

    .cs-plan-option:has(.cs-plan-radio:focus-visible) {
        outline: 3px solid rgba(13, 148, 136, 0.35);
        outline-offset: 2px;
    }

    .cs-plan-option .cs-plan-goal-fee {
        color: var(--cs-navy);
        min-height: 1.5em;
    }

/* Home page: the live demo, shown on a laptop and a phone drawn in CSS around the screenshots */
.cs-demo {
    background: var(--cs-cream);
    padding: 64px 0;
    margin-top: 24px;
    overflow: hidden;
}

    .cs-demo .cs-demo-kicker {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 13px;
        font-weight: 700;
        color: var(--cs-teal-dark);
        margin-bottom: 8px;
    }

    .cs-demo h2 {
        margin-bottom: 16px;
    }

    .cs-demo .cs-demo-points {
        list-style: none;
        padding-left: 0;
        margin: 20px 0 28px;
    }

        .cs-demo .cs-demo-points li {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
        }

        .cs-demo .cs-demo-points .material-symbols-outlined {
            color: #2b8a3e;
            font-size: 20px;
        }

    .cs-demo .cs-demo-open {
        font-size: 18px;
        vertical-align: -3px;
        margin-left: 4px;
    }

.cs-devices {
    position: relative;
    padding: 0 9% 7% 0;
}

.cs-device-laptop .cs-device-screen {
    border: 10px solid #1f2937;
    border-bottom-width: 14px;
    border-radius: 14px 14px 0 0;
    background: #1f2937;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 20px 50px rgba(29, 53, 87, 0.18);
}

.cs-device-laptop .cs-device-base {
    position: relative;
    height: 14px;
    margin: 0 -7%;
    background: linear-gradient(#e5e7eb, #9ca3af);
    border-radius: 0 0 14px 14px;
}

    /* The notch to open the lid */
    .cs-device-laptop .cs-device-base::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 16%;
        height: 5px;
        transform: translateX(-50%);
        background: #9ca3af;
        border-radius: 0 0 6px 6px;
    }

.cs-device-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25%;
    aspect-ratio: 390 / 844;
    border: 7px solid #111827;
    border-radius: 26px;
    background: #111827;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(29, 53, 87, 0.28);
}

    .cs-device-screen img,
    .cs-device-phone img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

@media (max-width: 575.98px) {
    .cs-demo {
        padding: 44px 0;
    }

    .cs-device-laptop .cs-device-screen {
        border-width: 6px;
        border-bottom-width: 9px;
        border-radius: 10px 10px 0 0;
    }

    .cs-device-laptop .cs-device-base {
        height: 9px;
    }

    .cs-device-phone {
        width: 28%;
        border-width: 4px;
        border-radius: 16px;
    }
}

.cs-band {
    background: var(--cs-navy);
    color: #fff;
    padding: 48px 0;
}

    .cs-band h2 {
        color: #fff;
    }

/* ---- Account pages -------------------------------------------------------------------------- */

/* The theme's placeholders are nearly as dark as typed text, so an example looked like an answer */
.form-control::placeholder {
    color: #adb5bd;
    opacity: 1;
}

.cs-account-card {
    max-width: 520px;
    margin: 48px auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 32px;
}

    .cs-account-card.cs-account-wide {
        max-width: 760px;
    }

    .cs-account-card.cs-account-xwide {
        max-width: 1100px;
    }

/* Signup: 1 account, 2 store, 3 event */
.cs-signup-steps {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

    .cs-signup-steps li {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 10px;
        border-top: 4px solid #eee;
        color: #999;
        font-size: 14px;
    }

    .cs-signup-steps .cs-signup-step-number {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #eee;
        color: #777;
        font-weight: 600;
    }

        .cs-signup-steps .cs-signup-step-number .material-symbols-outlined {
            font-size: 18px;
        }

    .cs-signup-steps li.cs-step-done {
        border-color: #99f6e4;
        color: #555;
    }

        .cs-signup-steps li.cs-step-done .cs-signup-step-number {
            background: #fde3d4;
            color: #0d9488;
        }

    .cs-signup-steps li.cs-step-current {
        border-color: #0d9488;
        color: var(--cs-navy);
        font-weight: 600;
    }

        .cs-signup-steps li.cs-step-current .cs-signup-step-number {
            background: #0d9488;
            color: #fff;
        }

@media (max-width: 575.98px) {
    .cs-account-card {
        padding: 24px 16px;
        margin: 24px auto;
    }

    .cs-signup-steps li {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
    }
}

.cs-slug-field .input-group-text {
    color: #777;
}

/* ---- Event and participant pages (the {{tags}} in DefaultPageTemplates) ---------------------- */

.cs-org-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 12px 0;
    /* style.css gives every <header> a bottom margin, which shows as a white strip above the hero */
    margin-bottom: 0;
}

    .cs-org-header .cs-org-name {
        font-family: "Fraunces", serif;
        font-size: 22px;
        color: var(--cs-header-text, var(--cs-navy));
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

        .cs-org-header .cs-org-name img {
            max-height: 44px;
            width: auto;
        }

/* Share button and language drop down, on the right of the store header. They take the
   header's text color (HeaderTextColor, or white on a dark header background). */
.cs-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-header-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cs-header-text, var(--cs-navy));
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 18px;
    padding: 4px 12px;
    font-weight: 700;
    background: transparent;
}

    .cs-header-button:hover,
    .cs-header-button:focus-visible,
    .cs-header-button.show {
        color: var(--cs-header-text, var(--cs-navy));
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    .cs-header-button .material-symbols-outlined {
        font-size: 18px;
    }

.cs-flag {
    width: 20px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.cs-org-header .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .cs-org-header .dropdown-item.active,
    .cs-org-header .dropdown-item:active {
        background-color: var(--cs-cream);
        color: var(--cs-teal-dark);
    }

.cs-hero {
    background: linear-gradient(135deg, var(--cs-navy) 0%, #2a4a75 100%);
    color: #fff;
    padding: 56px 0 48px;
    text-align: center;
}

    /* The height is the event's setting (_StoreLayout); both limits are maximums with the width and height
       automatic, so the logo keeps its shape whichever one it reaches. A logo up to four times as wide as it is
       tall gets the full height; the width is never more than 80% of the screen, so a wide logo shrinks on phones. */
    .cs-hero .cs-hero-logo {
        display: block;
        width: auto;
        height: auto;
        max-height: var(--cs-hero-logo-height, 120px);
        max-width: min(calc(var(--cs-hero-logo-height, 120px) * 4), 80%);
        margin: 0 auto 16px;
    }

    .cs-hero .cs-hero-kicker {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 14px;
        opacity: 0.8;
        margin-bottom: 8px;
    }

    .cs-hero .cs-hero-title {
        color: #fff;
        font-size: 44px;
        margin-bottom: 8px;
    }

    .cs-hero .cs-hero-subtitle {
        font-size: 20px;
        opacity: 0.9;
        margin-bottom: 4px;
    }

    .cs-hero .cs-hero-dates {
        opacity: 0.8;
    }

.cs-section {
    padding-top: 40px;
    padding-bottom: 24px;
}

/* The event's description, written in the rich text editor */
.cs-description h2 {
    font-size: 1.3rem;
    margin-top: 1.25rem;
}

.cs-description h3 {
    font-size: 1.1rem;
    margin-top: 1rem;
}

.cs-description > :last-child {
    margin-bottom: 0;
}

/* The progress bar under a page's first heading (event, participant, class and grade pages) */
.cs-goal-progress {
    margin: 16px 0 20px;
}

/* Class and grade pages: how many have reached their own goal, under the total */
.cs-team-reached {
    margin: 8px 0 16px;
    color: #666;
}

.cs-address {
    color: #666;
}

.cs-progress-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(29, 53, 87, 0.12);
    padding: 24px;
    position: sticky;
    top: 20px;
}

    .cs-progress-card .cs-raised {
        font-family: "Fraunces", serif;
        font-size: 40px;
        color: var(--cs-navy);
        line-height: 1.1;
    }

    .cs-progress-card .cs-goal {
        color: #666;
        margin-bottom: 14px;
    }

/* The full-width progress bar under the hero, with $0 and the goal beneath it */
.cs-progress-band {
    background: #fff;
    border-bottom: 1px solid #f0ece8;
    padding: 28px 0 22px;
}

    .cs-progress-band .cs-progress {
        height: 28px;
        border-radius: 14px;
        margin-bottom: 8px;
        box-shadow: inset 0 1px 3px rgba(29, 53, 87, 0.12);
    }

        .cs-progress-band .cs-progress .progress-bar {
            border-radius: 14px;
        }

.cs-progress-scale {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: var(--cs-navy);
}

.cs-progress {
    height: 14px;
    border-radius: 7px;
    margin-bottom: 20px;
    background-color: #f1ece8;
}

    .cs-progress .progress-bar {
        background-color: #0d9488;
        border-radius: 7px;
    }

.cs-donate-button {
    font-weight: 700;
}

.cs-empty {
    color: #777;
    font-style: italic;
}

.cs-participant-search {
    margin-bottom: 12px;
    max-width: 420px;
}

.cs-participant-items {
    max-height: 480px;
    overflow-y: auto;
}

.cs-participant-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

    .cs-participant-item .cs-participant-name {
        font-weight: 700;
        color: var(--cs-navy);
    }

    .cs-participant-item .cs-participant-detail {
        color: #777;
        font-size: 14px;
    }

    .cs-participant-item .cs-participant-raised {
        margin-left: auto;
        color: var(--cs-teal-dark);
        font-weight: 700;
    }

.cs-leaderboard {
    padding-left: 1.4em;
}

    .cs-leaderboard li {
        padding: 8px 0;
        border-bottom: 1px solid #f0ece8;
    }

        .cs-leaderboard li > * {
            display: inline-block;
        }

        .cs-leaderboard li > span:last-child {
            float: right;
            font-weight: 700;
            color: var(--cs-teal-dark);
        }

.cs-donations {
    list-style: none;
    padding-left: 0;
}

    .cs-donations li {
        padding: 12px 0;
        border-bottom: 1px solid #f0ece8;
    }

    .cs-donations .cs-donation-header {
        display: flex;
        justify-content: space-between;
    }

        .cs-donations .cs-donation-header span {
            color: var(--cs-teal-dark);
            font-weight: 700;
        }

    .cs-donations .cs-donation-message {
        margin: 4px 0;
        font-style: italic;
        color: #444;
    }

    .cs-donations .cs-donation-date {
        font-size: 13px;
        color: #888;
    }

.cs-powered-by {
    font-size: 14px;
    color: #888;
}

@media (max-width: 767px) {
    .cs-landing-hero h1 {
        font-size: 34px;
    }

    .cs-hero .cs-hero-title {
        font-size: 32px;
    }

    .cs-progress-card {
        position: static;
    }
}

/* ---- Contact page --------------------------------------------------------------------------- */

/* The honeypot field: kept in the page for bots, moved off screen for people */
.cs-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cs-contact-sent-icon {
    font-size: 56px;
    color: #0d9488;
    margin-bottom: 8px;
}

/* ---- Donate page ---------------------------------------------------------------------------- */

.cs-donate {
    max-width: 680px;
}

.cs-donate-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .cs-donate-amounts .btn {
        flex: 1 1 0;
        min-width: 72px;
        padding: 10px 12px;
        font-weight: 600;
    }

.cs-donate-lock {
    font-size: 16px;
    vertical-align: -3px;
}

.cs-donate-done {
    font-size: 56px;
    color: #0d9488;
}

/* ---- Legal pages (privacy policy) ----------------------------------------------------------- */

.cs-legal {
    max-width: 820px;
}

    .cs-legal h2 {
        margin-top: 2rem;
        font-size: 1.5rem;
        scroll-margin-top: 16px;
    }

    .cs-legal h3 {
        margin-top: 1.25rem;
        font-size: 1.15rem;
    }

    .cs-legal li {
        margin-bottom: 6px;
    }

.cs-legal-summary {
    background: var(--cs-cream);
    border-left: 4px solid #0d9488;
    border-radius: 8px;
    padding: 16px 20px;
}

.cs-legal-contents {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px 20px 4px;
    margin-bottom: 1rem;
}

    .cs-legal-contents ol {
        columns: 2;
        column-gap: 32px;
        padding-left: 20px;
    }

@media (max-width: 575.98px) {
    .cs-legal-contents ol {
        columns: 1;
    }
}

/* ---- FAQ ------------------------------------------------------------------------------------ */

.cs-faq {
    max-width: 880px;
}

    .cs-faq h2 {
        margin: 2.25rem 0 1rem;
        font-size: 1.6rem;
        scroll-margin-top: 16px;
    }

    .cs-faq .accordion-button {
        font-weight: 600;
        font-size: 1.05rem;
    }

        .cs-faq .accordion-button:not(.collapsed) {
            color: #b8440a;
            background-color: var(--cs-cream);
            box-shadow: none;
        }

        .cs-faq .accordion-button:focus {
            box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
        }

    .cs-faq .accordion-body p:last-child,
    .cs-faq .accordion-body ul:last-child {
        margin-bottom: 0;
    }

.cs-faq-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

    .cs-faq-sections a {
        border: 1px solid #e9e2dc;
        border-radius: 999px;
        padding: 6px 14px;
        text-decoration: none;
    }

        .cs-faq-sections a:hover {
            border-color: #0d9488;
        }

.cs-faq-more {
    margin-top: 3rem;
    padding: 28px;
    background: var(--cs-cream);
    border-radius: 16px;
}

    .cs-faq-more h2 {
        margin-top: 0;
    }

/* ---- Sign in with Google (Google's branding: white button, standard "G") ---------------------- */

.cs-google-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #747775;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

    .cs-google-button:hover {
        background: #f8f8f8;
    }

    .cs-google-button:focus-visible {
        outline: 3px solid rgba(66, 133, 244, 0.4);
        outline-offset: 2px;
    }

.cs-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #888;
    font-size: 14px;
}

    .cs-or-divider::before,
    .cs-or-divider::after {
        content: "";
        flex: 1;
        border-top: 1px solid #e5e5e5;
    }

/* ---- Support guide (/support) -------------------------------------------------------------- */

.cs-support-hero {
    background: var(--cs-cream);
    padding: 48px 0 40px;
    text-align: center;
}

    .cs-support-hero .lead {
        max-width: 640px;
        margin: 0 auto 24px;
    }

.cs-support-start {
    margin: 16px 0 0;
}

.cs-support-search {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}

    .cs-support-search > .material-symbols-outlined {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
        pointer-events: none;
    }

    .cs-support-search .form-control {
        padding-left: 42px;
        min-width: 0;
    }

.cs-support-aside .cs-support-search {
    max-width: none;
}

.cs-support-card {
    height: 100%;
    padding: 24px;
    border: 1px solid #eee4dc;
    border-radius: 16px;
    background: #fff;
}

    .cs-support-card h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

        .cs-support-card h2 a {
            color: inherit;
            text-decoration: none;
        }

            .cs-support-card h2 a:hover {
                color: var(--cs-teal-dark);
            }

        .cs-support-card h2 .material-symbols-outlined,
        .cs-support-title .material-symbols-outlined {
            color: #0d9488;
            font-size: 1.6em;
        }

    .cs-support-card p {
        color: #666;
    }

    .cs-support-card ol {
        padding-left: 20px;
        margin-bottom: 0;
    }

        .cs-support-card ol li {
            margin-bottom: 4px;
        }

.cs-support-breadcrumb {
    font-size: 0.95rem;
}

.cs-support-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 2.2rem;
}

.cs-support-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    color: #777;
    font-size: 0.95rem;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.cs-support-body {
    font-size: 1.075rem;
    line-height: 1.7;
}

    .cs-support-body h2 {
        font-size: 1.45rem;
        margin-top: 2rem;
    }

    .cs-support-body h3 {
        font-size: 1.15rem;
        margin-top: 1.5rem;
    }

    .cs-support-body li {
        margin-bottom: 6px;
    }

    .cs-support-body table {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }

    /* A wide table scrolls sideways on a phone rather than widening the page */
    @media (max-width: 575.98px) {
        .cs-support-body table {
            display: block;
            overflow-x: auto;
            font-size: 0.95rem;
        }
    }

        .cs-support-body th,
        .cs-support-body td {
            padding: 8px 10px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }

    /* A tip or a note: <div class="cs-support-tip"> / <div class="cs-support-note"> */
    .cs-support-body .cs-support-tip,
    .cs-support-body .cs-support-note {
        padding: 14px 18px;
        margin: 1.25rem 0;
        border-radius: 10px;
        border-left: 4px solid #0d9488;
        background: var(--cs-cream);
    }

    .cs-support-body .cs-support-note {
        border-left-color: var(--cs-navy);
        background: #eef3f8;
    }

        .cs-support-body .cs-support-tip > :last-child,
        .cs-support-body .cs-support-note > :last-child {
            margin-bottom: 0;
        }

.cs-support-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}

    .cs-support-pager a {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 16px 20px;
        border: 1px solid #eee4dc;
        border-radius: 12px;
        text-decoration: none;
    }

        .cs-support-pager a:hover {
            border-color: #0d9488;
        }

    .cs-support-pager-next {
        grid-column: 2;
        text-align: right;
    }

.cs-support-pager-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #777;
    font-size: 0.9rem;
}

.cs-support-pager-next .cs-support-pager-label {
    justify-content: flex-end;
}

.cs-support-pager-label .material-symbols-outlined {
    font-size: 18px;
}

.cs-support-pager-title {
    font-weight: 700;
    color: var(--cs-navy);
}

@media (max-width: 575.98px) {
    .cs-support-pager {
        grid-template-columns: 1fr;
    }

    .cs-support-pager-next {
        grid-column: 1;
    }
}

.cs-support-aside {
    position: sticky;
    top: 16px;
}

.cs-support-toc,
.cs-support-topics {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

    .cs-support-toc li,
    .cs-support-topics li {
        border-left: 3px solid transparent;
        padding: 5px 0 5px 12px;
    }

        .cs-support-toc li.active,
        .cs-support-topics li.active {
            border-left-color: #0d9488;
            font-weight: 700;
        }

    .cs-support-toc a,
    .cs-support-topics a {
        text-decoration: none;
    }

    .cs-support-topics li {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

.cs-support-article-list {
    padding-left: 22px;
}

    .cs-support-article-list li {
        margin-bottom: 16px;
    }

        .cs-support-article-list li > a {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .cs-support-article-list li p {
            margin: 4px 0 0;
            color: #666;
        }

.cs-support-narrow {
    max-width: 820px;
}

.cs-support-results {
    list-style: none;
    padding-left: 0;
}

    .cs-support-results li {
        padding: 14px 0;
        border-bottom: 1px solid #eee;
    }

        .cs-support-results li > a {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .cs-support-results li p {
            margin: 4px 0 0;
            color: #666;
        }

.cs-support-results-category {
    margin-left: 8px;
    font-size: 0.85rem;
    color: #888;
}

/* On phones the topic list follows the article rather than leading it */
@media (max-width: 991.98px) {
    .cs-support-aside {
        position: static;
    }
}

/* ---- Resources (the blog) ---------------------------------------------------------------- */

/* The banner: an article's primary image fills it under a dark tint (the tint keeps white text readable on any photo);
   the Resources page and an article without an image use the brand navy instead */
.cs-blog-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    padding: 56px 0 44px;
    color: #fff;
    background-color: var(--cs-navy);
    background-size: cover;
    background-position: center;
}

    .cs-blog-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(16, 28, 46, 0.25) 0%, rgba(16, 28, 46, 0.55) 45%, rgba(16, 28, 46, 0.85) 100%);
    }

    .cs-blog-hero > .container {
        position: relative;
    }

    .cs-blog-hero h1 {
        color: #fff;
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.15;
        margin-bottom: 12px;
        max-width: 900px;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    }

    .cs-blog-hero .lead {
        color: rgba(255, 255, 255, 0.9);
        max-width: 720px;
    }

.cs-blog-hero-plain {
    min-height: 0;
    padding: 64px 0 52px;
    background: linear-gradient(135deg, var(--cs-navy) 0%, #2b4c7e 100%);
}

    .cs-blog-hero-plain::before {
        display: none;
    }

.cs-blog-hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

    .cs-blog-hero-kicker a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }

        .cs-blog-hero-kicker a:hover {
            color: #fff;
            text-decoration: underline;
        }

.cs-blog-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767.98px) {
    .cs-blog-hero {
        min-height: 300px;
        padding: 40px 0 32px;
    }
}

/* An article's card: the 16:9 image (or the brand colors), title and summary; the whole card is the link */
.cs-blog-card {
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .cs-blog-card:hover {
        box-shadow: 0 10px 28px rgba(29, 53, 87, 0.12);
        transform: translateY(-2px);
    }

.cs-blog-card-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.cs-blog-card-image-none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cs-navy) 0%, #2b4c7e 100%);
}

    .cs-blog-card-image-none .material-symbols-outlined {
        font-size: 64px;
        color: rgba(255, 255, 255, 0.85);
    }

.cs-blog-card .card-title a {
    color: var(--cs-navy);
    text-decoration: none;
}

.cs-blog-card-more {
    color: var(--cs-teal-dark);
    font-weight: 700;
}

/* The featured article, above the others on the Resources page: wide, on the brand cream, with an orange edge and badge */
.cs-blog-featured {
    border-radius: 18px;
    overflow: hidden;
    background: var(--cs-cream);
    box-shadow: 0 14px 40px rgba(13, 148, 136, 0.18);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .cs-blog-featured:hover {
        box-shadow: 0 18px 48px rgba(13, 148, 136, 0.26);
        transform: translateY(-2px);
    }

.cs-blog-featured-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cs-blog-featured-image-none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d9488 0%, #f59f00 100%);
}

    .cs-blog-featured-image-none .material-symbols-outlined {
        font-size: 120px;
        color: rgba(255, 255, 255, 0.9);
    }

.cs-blog-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: #0d9488;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .cs-blog-featured-badge .material-symbols-outlined {
        font-size: 18px;
    }

.cs-blog-featured-title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    margin-bottom: 12px;
}

    .cs-blog-featured-title a {
        color: var(--cs-navy);
        text-decoration: none;
    }

.cs-blog-featured-summary {
    font-size: 1.05rem;
    color: #4b5563;
}

/* The button sits under the card's link, which covers the whole card */
.cs-blog-featured .btn {
    pointer-events: none;
}

.cs-blog-more-heading {
    margin: 56px 0 24px;
    font-size: 1.5rem;
}

/* The article: support-guide typography, with room for long guides, pictures and tables */
.cs-blog-body {
    font-size: 1.1rem;
    line-height: 1.75;
}

    .cs-blog-body h2 {
        font-size: 1.6rem;
        margin-top: 2.5rem;
        padding-top: 0.5rem;
    }

    .cs-blog-body h3 {
        font-size: 1.2rem;
        margin-top: 1.75rem;
    }

    .cs-blog-body li {
        margin-bottom: 6px;
    }

    .cs-blog-body img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin: 0.5rem 0 1rem;
    }

    .cs-blog-body blockquote {
        margin: 1.25rem 0;
        padding: 14px 20px;
        border-left: 4px solid var(--cs-navy);
        background: #f6f8fb;
        border-radius: 0 10px 10px 0;
    }

        .cs-blog-body blockquote > :last-child {
            margin-bottom: 0;
        }

    .cs-blog-body table {
        width: 100%;
        margin-bottom: 1.25rem;
        border-collapse: collapse;
        font-size: 1rem;
    }

        .cs-blog-body th,
        .cs-blog-body td {
            padding: 8px 10px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }

        .cs-blog-body th {
            background: #f6f8fb;
            text-align: left;
        }

    /* A wide table scrolls sideways on a phone rather than widening the page */
    @media (max-width: 575.98px) {
        .cs-blog-body table {
            display: block;
            overflow-x: auto;
            font-size: 0.95rem;
        }
    }

    /* A highlighted tip: <div class="cs-blog-tip"> */
    .cs-blog-body .cs-blog-tip {
        padding: 14px 18px;
        margin: 1.25rem 0;
        border-radius: 10px;
        border-left: 4px solid #0d9488;
        background: var(--cs-cream);
    }

        .cs-blog-body .cs-blog-tip > :last-child {
            margin-bottom: 0;
        }

.cs-blog-more {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid #eee;
}

    .cs-blog-more > h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

/* ---- Home page: the embed code card in the hero --------------------------------------------- */

.cs-code-card {
    background: var(--cs-navy);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(29, 53, 87, 0.18);
    color: #e2e8f0;
    padding: 20px 24px;
}

    .cs-code-card-title {
        color: #99f6e4;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
        margin-bottom: 12px;
        text-transform: uppercase;
    }

    .cs-code-card pre {
        color: inherit;
        font-size: 14px;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
    }

/* ---- A store's product page and the buyer's pages (Views/Store, _StoreLayout) ---------------- */

.cs-product-image {
    box-shadow: 0 10px 30px rgba(29, 53, 87, 0.12);
}

.cs-product-name {
    font-family: "Fraunces", serif;
    color: var(--cs-navy);
}

.cs-buy-box {
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
}

    .cs-buy-box .cs-product-price {
        font-family: "Fraunces", serif;
        font-size: 34px;
        font-weight: 600;
        color: var(--cs-navy);
        margin-bottom: 12px;
    }

.cs-product-description img {
    max-width: 100%;
    height: auto;
}

.cs-file-list {
    list-style: none;
    padding-left: 0;
}

    .cs-file-list li {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
    }

    .cs-file-list .material-symbols-outlined {
        color: #0d9488;
    }

.cs-big-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
}

/* ---- The storefront (/{store}) ---------------------------------------------------------- */

.cs-product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

    .cs-product-card-image {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        background: #f0fdfa;
        overflow: hidden;
    }

        .cs-product-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cs-product-card-image .material-symbols-outlined {
            font-size: 56px;
            color: #99f6e4;
        }

    .cs-product-card-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 16px;
    }

        .cs-product-card-body h2 a {
            color: var(--cs-navy);
            text-decoration: none;
        }

/* ---- The cart page, on its own or in cart.js's overlay ---------------------------------- */

.cs-cart-page {
    max-width: 720px;
}

.cs-cart-items {
    margin-bottom: 0;
}

.cs-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

    .cs-cart-item-image {
        flex: 0 0 64px;
        height: 64px;
        border-radius: 8px;
        background: #f0fdfa;
        overflow: hidden;
    }

        .cs-cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .cs-cart-item-details {
        flex: 1;
        min-width: 0;
    }

    .cs-cart-item-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
    }

        .cs-cart-item-controls input {
            width: 72px;
        }

    .cs-cart-item-total {
        font-weight: 700;
        white-space: nowrap;
    }

/* "You might also like" under the cart */
.cs-cart-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #e2e8f0;
}

/* A license key on the buyer's download page */
.cs-license-key {
    display: inline-block;
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--cs-navy);
    font-size: 15px;
    word-break: break-all;
}

.cs-cart-footer {
    padding-top: 16px;
}

.cs-cart-subtotal {
    font-family: "Fraunces", serif;
    font-size: 24px;
    color: var(--cs-navy);
}

/* ---- _EmbedLayout: pages inside cart.js's overlay -------------------------------------- */

body.cs-embed {
    background: #fff;
}

.cs-embed-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

    .cs-embed-store {
        font-family: "Fraunces", serif;
        font-size: 18px;
        color: var(--cs-navy);
    }

    .cs-embed-close {
        display: inline-flex;
        padding: 6px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #475569;
    }

        .cs-embed-close:hover {
            background: #f1f5f9;
        }

.cs-embed-main {
    padding: 16px;
}

    .cs-embed-main .cs-section {
        padding: 0;
    }