/* =========================================
   DESIGN SYSTEM
   Apple HIG: clarity, deference, depth
   ========================================= */

:root {
    --gs-nav-height: 52px;
    /* The width of the site's frame: the nav, the footer and the home page's sections line up on it. */
    --gs-site-maxw: 1160px;
    /* The space between the frame's edge and its content: 2rem, 1rem on a phone. */
    --gs-gutter: 2rem;
    /* A white box on the page: a faint outline, rounded corners and a soft two-layer shadow. */
    --gs-box-border: 1px solid rgba(0, 0, 0, 0.04);
    --gs-box-radius: 16px;
    --gs-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --gs-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --gs-text: #1c1c1e;
    --gs-text-secondary: #8e8e93;
    --gs-accent: #00d1b2;
    /* Teal for text and focus rings on light backgrounds (4.5:1); the accent above is for fills. */
    --gs-dev-teal-text: #007563;
    --gs-bg: #f5f5f7;
    --gs-separator: rgba(60, 60, 67, 0.12);
    --gs-radius: 12px;
    --gs-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --gs-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.10);
    --gs-transition: 0.15s ease;
}

@media (max-width: 640px) {
    :root { --gs-gutter: 1rem; }
}

/* Bulma's container on the site's frame: its content lines up with the nav and footer. Admin keeps Bulma's. */
body:not(.adm) .container:not(.is-fluid):not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: calc(var(--gs-site-maxw) - 2 * var(--gs-gutter));
}

/* Bulma's section pads its sides by its own measure; on the site's gutter instead, so the edges match. */
body:not(.adm) .section {
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

/* On a phone Bulma stacks its columns but keeps the negative margins that space them side by side, which
   pushed them past the gutter. Stacked, they need neither the margins nor the matching padding. */
@media (max-width: 768px) {
    body:not(.adm) .columns:not(.is-mobile) {
        margin-left: 0;
        margin-right: 0;
    }

    body:not(.adm) .columns:not(.is-mobile) > .column {
        padding-left: 0;
        padding-right: 0;
    }
}

/* --- Base --- */
body {
    font-family: var(--gs-font);
    color: var(--gs-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    background: var(--gs-bg);
}

/* --- Global Bulma overrides --- */
.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
}

.product-section {
    margin-top: 4em;
    margin-bottom: 4em;
}

h1.title, h2.title, h3.title, h4.title, h5.title, h6.title, .title {
    font-weight: 600 !important;
    color: var(--gs-text);
}

.subtitle {
    color: var(--gs-text-secondary);
}

.button {
    border-radius: 980px;
    transition: all var(--gs-transition);
}

.box {
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow);
    border: 1px solid var(--gs-separator);
}

.card {
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow);
}

/* Bulma's boxes and cards in the site's box style; admin keeps the flatter one above. */
body:not(.adm) .box,
body:not(.adm) .card {
    border: var(--gs-box-border);
    border-radius: var(--gs-box-radius);
    box-shadow: var(--gs-box-shadow);
}

.notification {
    border-radius: var(--gs-radius);
}

.navbar { display: none; }

.gs-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 245, 247, 0.3);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--gs-separator);
    height: var(--gs-nav-height);
}

.gs-nav-inner {
    max-width: var(--gs-site-maxw);
    margin: 0 auto;
    padding: 0 var(--gs-gutter);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gs-nav-logo {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gs-text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.gs-nav-logo span { color: var(--gs-accent); }

/* "Size" in the brand name, in the logo's teal wherever the name is written out in a heading. */
.gs-brand-accent { color: var(--gs-accent); }

.gs-nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .gs-nav-inner { padding: 0 1rem; }
}

/* --- Account disc and its menu --- */
.gs-account { position: relative; }

/* A person in a ring: outlined in grey when signed out, white on the teal of an owner's own
   profile avatar when signed in, with the same light-to-deep gradient and glow. */
.gs-account-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 2px solid rgba(60, 60, 67, 0.35);
    border-radius: 50%;
    color: var(--gs-text-secondary);
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.gs-account-disc::-webkit-details-marker { display: none; }
.gs-account-disc:hover, .gs-account[open] .gs-account-disc { border-color: var(--gs-accent); }
.gs-account-disc:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }

.gs-account-disc.is-signed-in {
    border: none;
    color: #fff;
    background: linear-gradient(160deg, #00e0c0 0%, #00b89c 100%);
    box-shadow: 0 3px 8px -3px rgba(0, 209, 178, 0.55);
}

.gs-account-disc.is-signed-in:hover, .gs-account[open] .gs-account-disc.is-signed-in {
    box-shadow: 0 3px 8px -3px rgba(0, 209, 178, 0.55), 0 0 0 3px rgba(0, 209, 178, 0.2);
}

.gs-account-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1000;
    min-width: 240px;
    padding: 0.375rem 0;
    background: #fff;
    border-radius: var(--gs-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gs-account-who {
    margin: 0;
    padding: 0.5rem 1rem 0.625rem;
    font-size: 0.75rem;
    color: var(--gs-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Links and buttons alike, so Log out and the language row sit in the list like the rest. */
.gs-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 1rem;
    border: none;
    background: none;
    color: var(--gs-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.gs-account-item:hover { background: var(--gs-bg); }
.gs-account-item.is-primary { font-weight: 600; }
.gs-account-value { color: var(--gs-text-secondary); }

.gs-account-rule {
    margin: 0.375rem 0;
    border: none;
    border-top: 1px solid var(--gs-separator);
}

.gs-account form { margin: 0; }

/* --- Language sheet --- */
.gs-lang-dialog {
    border: none;
    padding: 0;
    background: transparent;
    width: min(360px, calc(100vw - 2rem));
}

.gs-lang-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.gs-lang-sheet {
    background: var(--gs-surface, #fff);
    border-radius: 18px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 8px 40px rgba(0, 0, 0, 0.15), 0 24px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.gs-lang-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--gs-separator);
}

.gs-lang-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gs-text);
}

.gs-lang-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(60, 60, 67, 0.08);
    color: var(--gs-text-secondary);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.gs-lang-close:hover { background: rgba(60, 60, 67, 0.15); }

.gs-lang-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.gs-lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8125rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gs-text);
    text-decoration: none;
    border-bottom: 1px solid var(--gs-separator);
}

.gs-lang-list li:last-child .gs-lang-option { border-bottom: none; }
.gs-lang-option:hover { background: rgba(60, 60, 67, 0.06); }
.gs-lang-option.is-current { color: var(--gs-accent); }

/* Log out is a form post, so the control is a button. It should be indistinguishable from the
   links beside it. */
.gs-nav-form { display: contents; }

.gs-nav-button {
    font-family: inherit;
    line-height: inherit;
    background: none;
    border: none;
    padding: 0;
}

.footer { display: none; } /* hide Bulma default if any */

.gs-footer {
    border-top: 1px solid rgba(60, 60, 67, 0.08);
    padding: 2.5rem 0 2rem;
    background: var(--gs-bg);
}

/* Four groups on a four-column grid, on the site's width and gutter. */
.gs-footer-inner {
    max-width: var(--gs-site-maxw);
    margin: 0 auto;
    padding: 0 var(--gs-gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.gs-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gs-footer-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-text);
    margin-bottom: 0.25rem;
}

.gs-footer-col a {
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
    cursor: pointer;
}

.gs-footer-col a:hover {
    color: var(--gs-accent);
}

/* Margins rather than padding, so the rule above the company line spans the content, not the gutter. */
.gs-footer-bottom {
    width: calc(100% - 4rem);
    max-width: calc(var(--gs-site-maxw) - 4rem);
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(60, 60, 67, 0.06);
    font-size: 0.6875rem;
    color: rgba(60, 60, 67, 0.4);
}

@media (max-width: 640px) {
    .gs-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
        align-items: start;
        padding: 0 1rem;
    }

    .gs-footer-bottom { width: calc(100% - 2rem); }
}

.button-list {
    display: flex;
    flex-wrap: wrap;
}

.button-list button {
    white-space: normal;
    word-wrap: break-word;
    margin: 0.25rem;
}

@media (max-width: 768px) {
    .button-list {
        flex-direction: column;
        width: 100%;
    }

    .button-list button {
        width: 100%;
        white-space: normal;
        word-wrap: break-word;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
        height: auto;
        line-height: 1.5;
    }

    /* Make breadcrumb links wrap properly on mobile */
    .breadcrumb ul {
        flex-wrap: wrap;
    }

    .breadcrumb li {
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.5;
    }

    .breadcrumb a {
        white-space: normal;
        word-wrap: break-word;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        line-height: 1.5;
    }

    /* Ensure all buttons have proper text wrapping and padding */
    .button {
        white-space: normal;
        word-wrap: break-word;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
        height: auto;
        line-height: 1.5;
    }
}

/* Responsive video container for full-width YouTube embeds */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100vw;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Product suggestions grid for browsing multiple products */
.product-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .product-suggestions-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.size-chart-tabs {
    text-align: left;
}

/* Hide radio buttons */
.size-chart-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.size-chart-tablist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.size-chart-tab {
    cursor: pointer;
}

/* Active state for tabs - using general sibling combinator */
#size-chart-tab-0:checked ~ .size-chart-tablist label[for="size-chart-tab-0"],
#size-chart-tab-1:checked ~ .size-chart-tablist label[for="size-chart-tab-1"],
#size-chart-tab-2:checked ~ .size-chart-tablist label[for="size-chart-tab-2"],
#size-chart-tab-3:checked ~ .size-chart-tablist label[for="size-chart-tab-3"],
#size-chart-tab-4:checked ~ .size-chart-tablist label[for="size-chart-tab-4"],
#size-chart-tab-5:checked ~ .size-chart-tablist label[for="size-chart-tab-5"],
#size-chart-tab-6:checked ~ .size-chart-tablist label[for="size-chart-tab-6"],
#size-chart-tab-7:checked ~ .size-chart-tablist label[for="size-chart-tab-7"],
#size-chart-tab-8:checked ~ .size-chart-tablist label[for="size-chart-tab-8"],
#size-chart-tab-9:checked ~ .size-chart-tablist label[for="size-chart-tab-9"] {
    border-color: #00d1b2;
    color: #ffffff;
    background-color: #00d1b2;
}

.size-chart-panels {
    display: grid;
    gap: 1.5rem;
}

.size-chart-panel {
    display: none;
    border: 1px solid #dbdbdb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(10, 10, 10, 0.05);
}

/* Show panel when corresponding radio is checked */
#size-chart-tab-0:checked ~ .size-chart-panels #size-chart-panel-0,
#size-chart-tab-1:checked ~ .size-chart-panels #size-chart-panel-1,
#size-chart-tab-2:checked ~ .size-chart-panels #size-chart-panel-2,
#size-chart-tab-3:checked ~ .size-chart-panels #size-chart-panel-3,
#size-chart-tab-4:checked ~ .size-chart-panels #size-chart-panel-4,
#size-chart-tab-5:checked ~ .size-chart-panels #size-chart-panel-5,
#size-chart-tab-6:checked ~ .size-chart-panels #size-chart-panel-6,
#size-chart-tab-7:checked ~ .size-chart-panels #size-chart-panel-7,
#size-chart-tab-8:checked ~ .size-chart-panels #size-chart-panel-8,
#size-chart-tab-9:checked ~ .size-chart-panels #size-chart-panel-9 {
    display: block;
}

@media (max-width: 768px) {
    .size-chart-panel {
        padding: 1rem;
    }
}

/* ── Below-fold content: accordions, community strip ── */
.gs-below-fold {
    margin: 2rem auto 0;
    padding: 0 1.5rem 3rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

/* Segmented control, matching .u-segmented in the sizing tool so the same choice looks the same
   in both places. Units and size systems both use it. */
/* One control per row, units above systems. Full width with evenly split buttons, and the same
   rounding as .u-segmented in the sizing tool, so the same choice looks the same in both. */
.gs-segmented {
    display: flex;
    background: rgba(60, 60, 67, 0.08);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 0.5rem;
}

.gs-segmented-btn {
    flex: 1;
    border: 0;
    background: none;
    font-family: var(--gs-font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gs-text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--gs-transition), color var(--gs-transition);
}

.gs-segmented-btn.is-active {
    background: #fff;
    color: var(--gs-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Every size system stays in the markup so a crawler reads them all; the reader reads one. */
.gs-system-hidden {
    display: none;
}

/* The reader asked for a system this shoe has no chart in. #974 asks for that to be said
   clearly, so it carries a background rather than sitting in the same grey as the footnotes. */
.gs-system-fallback {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--gs-text);
    background: rgba(60, 60, 67, 0.05);
    border-radius: var(--gs-radius);
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
}

/* ===== PREFERENCES PAGE =====
   Same 640/592 column as the product page, so the two read as the same site. */
/* Each heading opens a section, so it carries the gap rather than a wrapper doing it. The
   first one does not, because the note above it already spaces the page. */
.gs-prefs-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 2rem 0 0.25rem;
}

/* Linked to as /preferences#notifications, so the jump must not land under the sticky nav. */
#notifications {
    scroll-margin-top: calc(var(--gs-nav-height) + 1rem);
}

#notifications:focus {
    outline: none;
}

.gs-prefs-heading:first-of-type {
    margin-top: 0;
}

.gs-prefs-help {
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Deleting the account: set well apart from the save button, in a red frame, as GitHub does for a
   repository. */
.gs-danger-zone {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gs-separator);
}
.gs-danger-zone .gs-prefs-heading { margin-top: 0; color: #d1242f; }
.gs-danger-zone-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(209, 36, 47, 0.45);
    border-radius: 12px;
    background: var(--gs-surface);
}
.gs-danger-zone-what { flex: 1 1 16rem; }
.gs-danger-zone-title { font-weight: 600; margin: 0 0 0.25rem; }
.gs-danger-zone-help { font-size: 0.8125rem; color: var(--gs-text-secondary); line-height: 1.5; margin: 0; }
.gs-danger-zone-btn {
    flex: 0 0 auto;
    padding: 0.55rem 1.1rem;
    border: 1px solid #d1242f;
    border-radius: 999px;
    color: #d1242f;
    font-weight: 600;
    white-space: nowrap;
}
.gs-danger-zone-btn:hover,
.gs-danger-zone-btn:focus-visible { background: #d1242f; color: #fff; }

/* --- Length unit --- */
.gs-prefs-units {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gs-prefs-unit {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--gs-separator);
    border-radius: var(--gs-radius);
    cursor: pointer;
    transition: border-color var(--gs-transition), box-shadow var(--gs-transition);
}

.gs-prefs-unit:hover {
    border-color: rgba(60, 60, 67, 0.24);
}

.gs-prefs-unit.is-active {
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.18);
}

/* The card is the control; the radio itself only has to stay reachable by keyboard. */
.gs-prefs-unit input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gs-prefs-unit:focus-within {
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.18);
}

.gs-prefs-unit-name {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Shows the setting rather than describing it: one real chart row, in that unit. */
.gs-prefs-unit-example {
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
}

/* --- Size system rank --- */
.gs-prefs-rank {
    list-style: none;
    counter-reset: rank;
    padding: 0;
    margin: 0;
}

.gs-prefs-rank-row {
    counter-increment: rank;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #fff;
    border: 1px solid var(--gs-separator);
    border-radius: var(--gs-radius);
    margin-bottom: 0.5rem;
}

.gs-prefs-rank-row::before {
    content: counter(rank);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gs-text-secondary);
    min-width: 1.25rem;
}

.gs-prefs-rank-name {
    flex: 1;
    font-size: 0.9375rem;
}

.gs-prefs-rank-actions {
    display: flex;
    gap: 0.25rem;
}

.gs-prefs-move {
    border: 0;
    background: none;
    color: var(--gs-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
    border-radius: 6px;
}

.gs-prefs-move:hover,
.gs-prefs-move:focus-visible {
    background: rgba(60, 60, 67, 0.08);
    color: var(--gs-text);
}

/* ===== COLOURWAY PICKER =====
   The one control on the product page that still wore Bulma's .select, which is why it read as
   borrowed from another site. Native <select> underneath: keyboard behaviour and the platform
   picker on a phone are worth more here than full control of the popup. */
.gs-variation {
    margin-bottom: 1.5rem;
}

.gs-variation-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-text-secondary);
    margin-bottom: 0.5rem;
}

.gs-variation-control {
    position: relative;
}

.gs-variation-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-family: var(--gs-font);
    font-size: 0.9375rem;
    color: var(--gs-text);
    background: #fff;
    border: 1px solid var(--gs-separator);
    border-radius: var(--gs-radius);
    padding: 0.8125rem 2.75rem 0.8125rem 1rem;
    cursor: pointer;
    transition: border-color var(--gs-transition), box-shadow var(--gs-transition);
}

.gs-variation-select:hover {
    border-color: rgba(60, 60, 67, 0.24);
}

/* Same mint focus ring the sizing tool uses, so focus looks the same everywhere. */
.gs-variation-select:focus {
    outline: none;
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.18);
}

.gs-variation-chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--gs-text-secondary);
    pointer-events: none;
}

/* ===== SIZE CHART BADGES =====
   Deliberately not the widget's .u-badge-* rules. Those are built from --u-* variables scoped
   to .sizing-v2, so reusing them outside the widget renders unstyled rather than erroring.
   These use the page's own tokens and work anywhere. */
.gs-badge {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    border: 0;
    font-family: inherit;
    vertical-align: middle;
}

button.gs-badge {
    cursor: pointer;
    margin-left: 4px;
}

button.gs-badge:hover,
button.gs-badge:focus-visible {
    filter: brightness(0.94);
}

.gs-badge-official {
    color: #248a3d;
    background: rgba(52, 199, 89, 0.15);
}

/* A brand-wide chart is still the brand's own, so it keeps a badge. It is the less specific of
   the two, so it is muted rather than green. */
.gs-badge-brandwide {
    color: var(--gs-text-secondary);
    background: rgba(60, 60, 67, 0.08);
}

/* Reported by people rather than published by the brand, so it reads as a different kind of
   thing rather than a weaker version of the same one. */
.gs-badge-crowd {
    color: #007aff;
    background: rgba(0, 122, 255, 0.1);
}

.gs-badge-guide {
    max-width: 30rem;
    width: calc(100% - 2rem);
    border: 0;
    border-radius: var(--gs-radius, 12px);
    padding: 1.25rem;
    color: var(--gs-text);
    background: #fff;
}

.gs-badge-guide::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.gs-badge-guide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.gs-badge-guide-head h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.gs-badge-guide-close {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--gs-text-secondary);
    padding: 0.25rem;
    line-height: 0;
}

.gs-badge-guide-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0.5rem;
    border-radius: 8px;
}

/* The badge that was pressed, so the reader lands on the one they asked about. */
.gs-badge-guide-row.is-active {
    background: rgba(60, 60, 67, 0.05);
}

.gs-badge-guide-text {
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Provenance line: says where the sentence above it came from, so it sits quieter than the
   claim itself without being hidden. */
.gs-advice-basis {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
}

.gs-community-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 1rem 0;
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
    border-bottom: 1px solid rgba(60, 60, 67, 0.06);
}

.gs-community-strip svg {
    width: 16px;
    height: 16px;
    color: rgba(60, 60, 67, 0.4);
    flex-shrink: 0;
}

.gs-community-strip .gs-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(60, 60, 67, 0.4);
    flex-shrink: 0;
}

.gs-accordion {
    border-bottom: 1px solid rgba(60, 60, 67, 0.06);
}

.gs-accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--gs-font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gs-text);
    text-align: left;
    gap: 1rem;
    transition: color 150ms ease;
}

.gs-accordion-trigger:hover { color: var(--gs-accent); }

.gs-accordion-chevron {
    width: 18px;
    height: 18px;
    color: rgba(60, 60, 67, 0.4);
    transition: transform 300ms ease;
    flex-shrink: 0;
}

.gs-accordion.open .gs-accordion-chevron { transform: rotate(180deg); }

.gs-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease, opacity 200ms ease;
    opacity: 0;
}

.gs-accordion.open .gs-accordion-body { opacity: 1; }

.gs-accordion-inner {
    padding: 0 0 1.25rem;
    font-size: 0.875rem;
    color: var(--gs-text-secondary);
    line-height: 1.6;
}

.gs-accordion-inner .table-container { overflow-x: auto; }

/* An accordion label is a section heading, so it is marked up as one. The heading element
   carries no styling of its own: the button inside it keeps the look the design had. */
.gs-accordion-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Sections that are not behind a click: the fit answer and the size chart. They are the page's
   own claims, and a reader who arrives from a search should not have to hunt for them. */
.gs-answer {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(60, 60, 67, 0.06);
    font-size: 0.875rem;
    color: var(--gs-text-secondary);
    line-height: 1.6;
}

.gs-answer-heading {
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gs-text);
    line-height: 1.4;
}

/* The sentence that says what the table below covers. */
.gs-answer-lead {
    margin-bottom: 0.75rem;
    color: var(--gs-text);
}

.gs-answer .table-container { overflow-x: auto; }

.gs-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(60, 60, 67, 0.4);
    padding: 2rem 0 0;
    margin: 0;
}

/* ── Model list rows (Apple HIG style) ── */
.gs-model-list {
    background: var(--gs-surface, #fff);
    border-radius: var(--gs-radius, 12px);
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.04),
        0 1px 2px rgba(0,0,0,0.02),
        0 4px 12px rgba(0,0,0,0.04);
    overflow: hidden;
}

.gs-model-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(60, 60, 67, 0.06);
    transition: background 150ms ease;
}

.gs-model-row:last-of-type { border-bottom: none; }

.gs-model-row:hover { background: rgba(0, 0, 0, 0.02); }

.gs-model-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--gs-bg, #f5f5f7);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gs-model-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-model-thumb svg {
    width: 20px;
    height: 20px;
    color: rgba(60, 60, 67, 0.2);
}

.gs-model-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gs-model-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gs-text, #1c1c1e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-model-meta {
    font-size: 0.6875rem;
    color: var(--gs-text-secondary, #8e8e93);
}

.gs-model-chevron {
    width: 16px;
    height: 16px;
    color: rgba(60, 60, 67, 0.3);
    flex-shrink: 0;
}

.gs-model-load-more {
    padding: 0.75rem 1rem;
    text-align: center;
}

.gs-model-load-btn {
    font-family: var(--gs-font);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gs-accent, #00d1b2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem 1rem;
    border-radius: 980px;
    transition: background 150ms ease;
}

.gs-model-load-btn:hover {
    background: rgba(0, 209, 178, 0.08);
}

/* ── Model list pager: real links, one per page of the brand's guides ── */
.gs-model-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-top: 0.5px solid rgba(60, 60, 67, 0.12);
}

.gs-model-pager-link {
    font-family: var(--gs-font);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gs-accent, #00d1b2);
    padding: 0.375rem 0.6875rem;
    border-radius: 980px;
    transition: background 150ms ease;
}

.gs-model-pager-link:hover {
    background: rgba(0, 209, 178, 0.08);
}

.gs-model-pager-link.is-current {
    color: rgba(60, 60, 67, 0.9);
    background: rgba(60, 60, 67, 0.08);
    cursor: default;
}

.gs-model-pager-gap {
    font-size: 0.8125rem;
    color: rgba(60, 60, 67, 0.4);
    padding: 0 0.125rem;
}

/* ── Model chips: demand-ordered guides on the hub, neighbours on a guide ── */
.gs-model-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.gs-model-chip {
    font-family: var(--gs-font);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(60, 60, 67, 0.9);
    background: var(--gs-surface, #fff);
    border-radius: 980px;
    padding: 0.4375rem 0.875rem;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.06),
        0 1px 2px rgba(0,0,0,0.03);
    transition: background 150ms ease, box-shadow 150ms ease;
}

.gs-model-chip:hover {
    background: rgba(0, 209, 178, 0.06);
    box-shadow:
        0 0 0 0.5px rgba(0, 209, 178, 0.3),
        0 1px 2px rgba(0,0,0,0.03);
}

.gs-neighbours {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.gs-neighbours-all {
    font-family: var(--gs-font);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gs-accent, #00d1b2);
}

.gs-model-search {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--gs-font);
    font-size: 0.875rem;
    color: var(--gs-text, #1c1c1e);
    background: var(--gs-surface, #fff);
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: var(--gs-radius, 12px);
    outline: none;
    margin-bottom: 0.75rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.gs-model-search:focus {
    border-color: var(--gs-accent, #00d1b2);
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.12);
}

.gs-model-search::placeholder {
    color: rgba(60, 60, 67, 0.4);
}

/* =========================================
   FRONTPAGE LAYOUT (gs-fp-*)
   ========================================= */

/* --- Reusable type styles --- */
.gs-fp-caption {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-secondary);
    margin-bottom: 1.5rem;
}

.gs-fp-headline {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gs-text);
    display: block;
}

.gs-fp-body-secondary {
    font-size: 0.9375rem;
    color: var(--gs-text-secondary);
    line-height: 1.5;
    margin-top: 0.25rem;
}

.gs-fp-separator {
    height: 1px;
    background: var(--gs-separator);
    margin: 1rem 0;
}

.gs-fp-container {
    margin: 0 auto;
    padding: 0 1.5rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

/* ===== FULL SCREEN LANDING ===== */
.gs-fp-screen {
    min-height: calc(100vh - 52px); /* viewport minus navbar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-fp-screen-content {
    width: 100%;
    padding: 2rem 0;
}

/* ===== HERO ===== */
.gs-fp-hero {
    text-align: center;
    padding: 0 1.5rem 2rem;
    margin: 0 auto;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

.gs-fp-title {
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gs-text);
    margin-bottom: 0.75rem;
}

.gs-fp-subtitle {
    font-size: 1.0625rem;
    color: var(--gs-text-secondary);
    line-height: 1.55;
    max-width: 440px;
    margin: 0 auto 1.5rem;
}

/* ===== SHOE RACK ===== */
.gs-fp-rack {
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

/* ===== BENEFITS ===== */
.gs-fp-benefits {
    padding: 2rem 0;
}

.gs-fp-benefit-card {
    background: #fff;
    border-radius: var(--gs-radius);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
    padding: 0.25rem 1.25rem;
}

.gs-fp-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
}

.gs-fp-benefit-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 209, 178, 0.1);
    color: var(--gs-accent);
    font-size: 0.875rem;
}

/* ===== HOW IT WORKS ===== */
.gs-fp-steps {
    padding: 2rem 0;
}

.gs-fp-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.gs-fp-step {
    text-align: center;
}

.gs-fp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 209, 178, 0.1);
    color: var(--gs-accent);
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.gs-fp-step .gs-fp-headline {
    margin-bottom: 0.25rem;
}

/* ===== EXPLORE LINKS ===== */
.gs-fp-explore {
    padding: 0 0 3rem;
}

.gs-fp-link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gs-fp-link-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--gs-separator);
    border-radius: var(--gs-radius);
    text-decoration: none;
    background: #fff;
    box-shadow: none;
    transition: box-shadow var(--gs-transition);
}

.gs-fp-link-card:hover {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(0, 0, 0, 0.05);
}

.gs-fp-link-card .gs-fp-body-secondary {
    flex: 1;
    margin-bottom: 0.75rem;
}

.gs-fp-link-arrow {
    color: var(--gs-accent);
    font-size: 1.125rem;
    transition: transform var(--gs-transition);
}

.gs-fp-link-card:hover .gs-fp-link-arrow {
    transform: translateX(3px);
}

/* ===== FRONTPAGE RESPONSIVE ===== */
@media (max-width: 768px) {
    .gs-fp-hero {
        padding: 0 1.5rem 1rem;
    }

    .gs-fp-step-grid,
    .gs-fp-link-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .gs-fp-rack {
        padding: 0 1rem 2rem;
    }

    .gs-fp-benefit-item {
        gap: 0.75rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gs-fp-link-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   HOME PAGE BELOW THE WIDGET (gs-home-*)
   A wider grid than the widget column, so the explanation reads like a page, not a phone.
   ========================================= */

.gs-home {
    --gs-home-maxw: var(--gs-site-maxw);
    --gs-home-ink-2: #3d3d40;
    --gs-home-box-shadow: var(--gs-box-shadow);
}

.gs-home .gs-fp-screen {
    position: relative;
    flex-direction: column;
}

.gs-home-scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gs-text-secondary);
    text-decoration: none;
}

.gs-home-scroll:hover { color: var(--gs-dev-teal-text); }

.gs-home-scroll i {
    font-size: 1rem;
    animation: gs-home-nudge 2s ease-in-out infinite;
}

@keyframes gs-home-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .gs-home-scroll i { animation: none; }
}

.gs-home-wrap {
    max-width: var(--gs-home-maxw);
    margin: 0 auto;
    padding: 0 2rem;
}

.gs-home-section {
    padding: 6rem 0;
    background: var(--gs-bg);
    border-top: 1px solid var(--gs-separator);
    scroll-margin-top: var(--gs-nav-height);
}


.gs-home-h2 {
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--gs-text);
    margin-bottom: 1rem;
}

.gs-home-h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gs-text);
    margin-bottom: 0.5rem;
}

.gs-home-lede {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--gs-home-ink-2);
    max-width: 680px;
    margin-bottom: 1rem;
}

.gs-home-caption {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-secondary);
    margin: 3rem 0 1rem;
}

/* --- What: where the guide works, one row per place, live or coming --- */
.gs-home-surfaces {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gs-home-surfaces li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--gs-separator);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gs-text);
}

.gs-home-surfaces li:first-child { border-top: none; padding-top: 0; }
.gs-home-surfaces li:last-child { padding-bottom: 0; }

.gs-home-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gs-text-secondary);
}

.gs-home-status.is-live { color: var(--gs-dev-teal-text); }

/* A pulsing teal dot after each figure, so the numbers read as live. */
.gs-home-figures dd {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
}

.gs-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gs-accent);
    animation: gs-live-dot 2.4s ease-out infinite;
}

@keyframes gs-live-dot {
    0% { box-shadow: 0 0 0 0 rgba(0, 209, 178, 0.55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(0, 209, 178, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .gs-live-dot { animation: none; }
}

/* A column may be narrower than its widest content, so a full figures row cannot push the page wider. */
.gs-home-split > * { min-width: 0; }

@media (max-width: 640px) {
    .gs-home-figures div { gap: 0.75rem; }
    .gs-home-figures dd { gap: 0.625rem; font-size: 1.5rem; }
}

/* --- The heartbeat trace beside "Live" (shared/live-trace.jte) --- */
.gs-live-trace {
    width: 2.5rem;
    height: 0.875rem;
    flex-shrink: 0;
    overflow: visible;
}

.gs-live-trace path {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Each beat a bright dot runs along the trace and draws the line behind it, the way a monitor does. When
   the dot reaches the end, the dot and then the line fade, and the trace rests until the next beat.
   Both paths are normalised to a length of 100 (pathLength), so the two dash animations stay in step. */
.gs-live-trace-base {
    stroke: rgba(0, 209, 178, 0.55);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: gs-live-trace-draw 2.6s linear infinite;
}

.gs-live-trace-pulse {
    stroke: var(--gs-accent);
    stroke-width: 2.6;
    stroke-dasharray: 4 150;
    stroke-dashoffset: 4;
    animation: gs-live-trace-dot 2.6s linear infinite;
}

/* The line is drawn over the first ~1s, holds a moment, then fades. */
@keyframes gs-live-trace-draw {
    0% { stroke-dashoffset: 100; opacity: 1; }
    38% { stroke-dashoffset: 0; opacity: 1; }
    48% { stroke-dashoffset: 0; opacity: 1; }
    62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* The dot leads the drawing to the end of the line, then fades a little before the line does. */
@keyframes gs-live-trace-dot {
    0% { stroke-dashoffset: 4; opacity: 1; }
    38% { stroke-dashoffset: -96; opacity: 1; }
    46%, 100% { stroke-dashoffset: -96; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-live-trace-base { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
    .gs-live-trace-pulse { display: none; }
}

/* --- What: the database, with its figures in a box beside it --- */
.gs-home-figures { margin: 0; }

.gs-home-figures div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--gs-separator);
}

.gs-home-figures div:first-child {
    border-top: none;
    padding-top: 0;
}

.gs-home-figures div:last-child { padding-bottom: 0; }

.gs-home-figures dt {
    font-size: 1rem;
    color: var(--gs-home-ink-2);
}

.gs-home-figures dd {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--gs-text);
    font-variant-numeric: tabular-nums;
}

.gs-home-buttons.gs-home-buttons-start {
    justify-content: flex-start;
    margin-top: 2rem;
}

/* A note under a figure's label, and under a box or a closing button. */
.gs-home-figures dt small {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
}

.gs-home-box-note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
}

.gs-home-box-note a { color: var(--gs-dev-teal-text); }

/* Body text in a card, for cards without a tick list. */
.gs-home-card-text {
    flex: 1;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gs-home-ink-2);
}

.gs-home-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* A video or picture beside the prose, framed like the boxes. */
.gs-home-media {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--gs-home-box-shadow);
    align-self: center;
}

/* Links inside a step's description or a lede. */
.gs-home-flow-step p a,
.gs-home-lede a { color: var(--gs-dev-teal-text); }

/* Steps across the full width: numbered discs on one line, joined left to right, the text under
   each. Outlined discs lead to a filled last one, as in the stacked flow. Stacked on narrow screens. */
.gs-home-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
}

.gs-home-timeline > li { position: relative; }

.gs-home-timeline > li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 52px;
    right: calc(-2rem + 8px);
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(0, 209, 178, 0.1), rgba(0, 209, 178, 0.35));
}

.gs-home-timeline > li:not(:last-child) .gs-avatar {
    background: #fff;
    border: 2px solid var(--gs-accent);
    color: var(--gs-dev-teal-text);
    box-shadow: 0 4px 10px -6px var(--gs-avatar-glow);
}

.gs-home-timeline strong {
    display: block;
    margin: 1.25rem 0 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--gs-text);
}

.gs-home-timeline p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--gs-home-ink-2);
}

.gs-home-timeline p a { color: var(--gs-dev-teal-text); }

.gs-home-timeline p code { color: inherit; overflow-wrap: anywhere; }

/* Four steps instead of five, and lists inside a step (how-to-measure). */
.gs-home-timeline.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gs-home-timeline .gs-home-ticks {
    margin: 0.75rem 0;
    flex: none;
}

.gs-home-timeline .gs-home-ticks li {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
}

.gs-home-timeline + .gs-home-buttons { margin-top: 2.5rem; }

@media (max-width: 960px) {
    .gs-home-timeline,
    .gs-home-timeline.is-four { grid-template-columns: 1fr; gap: 1.75rem; }

    .gs-home-timeline > li { padding-left: 3.5rem; }
    .gs-home-timeline > li > .gs-avatar { position: absolute; left: 0; top: 0; }
    .gs-home-timeline strong { margin-top: 0.5rem; }

    .gs-home-timeline > li:not(:last-child)::before {
        top: 46px;
        bottom: calc(-1.75rem + 6px);
        left: 19px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(rgba(0, 209, 178, 0.1), rgba(0, 209, 178, 0.35));
    }
}

/* The API plans (shared/api-plans.jte) set into a home-style section, a little below its lede. */
.gs-home-plans { margin-top: 2.5rem; }

/* Short reasons in a row under a closing section's lede, each with a teal tick. */
.gs-home-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    margin: 1.5rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

.gs-home-benefits li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gs-text);
}

.gs-home-benefits li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.2rem;
    width: 0.5rem;
    height: 0.8rem;
    border: solid var(--gs-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* "A good fit for": a tick list set in the middle of the closing section, its lines still reading left. */
.gs-home-fit {
    display: inline-block;
    margin: 1rem auto 0.5rem;
    text-align: left;
}

.gs-home-fit .gs-home-caption { margin-top: 0; text-align: center; }
.gs-home-fit .gs-home-ticks { margin-bottom: 0; }

/* --- Prose beside a box: the database figures, the four-step flow --- */
.gs-home-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.gs-home-box {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: var(--gs-home-box-shadow);
    padding: 2rem;
}

.gs-home-box .gs-home-caption { margin-top: 0; }

/* An example conversation with an assistant, in Claude's dark colours. The input is a picture of one, not a field. */
.gs-home-box.gs-home-chat-window {
    background: #191919;
    border-color: #191919;
    color: #efefef;
}

.gs-home-chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gs-home-chat-message {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.gs-home-chat-message.is-user {
    align-self: flex-end;
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background: #252525;
    font-family: inherit;
    font-size: 1rem;
}

.gs-home-chat-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border: 1px solid #3a3a3a;
    border-radius: 16px;
    background: #252525;
    font-size: 0.875rem;
    color: #9c9c9c;
}

/* An address to copy, with the button that copies it. */
.gs-home-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.gs-home-address code {
    font-size: 1rem;
    color: inherit;
    overflow-wrap: anywhere;
}

.gs-home-address button { font-family: inherit; }

/* Every step as tall as the tallest, so the discs sit evenly spaced whatever the length of each description. */
.gs-home-flow-list {
    display: grid;
    grid-auto-rows: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gs-home-flow-step {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.gs-home-flow-step:last-child { padding-bottom: 0; }

/* The line joining one step's disc to the next; the discs are the shared .gs-avatar. */
.gs-home-flow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 46px;
    bottom: 6px;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(rgba(0, 209, 178, 0.1), rgba(0, 209, 178, 0.35));
}

/* Only the result is a filled disc; the steps leading to it are outlined. */
.gs-home-flow-step:not(:last-child) .gs-avatar {
    background: #fff;
    border: 2px solid var(--gs-accent);
    color: var(--gs-dev-teal-text);
    box-shadow: 0 4px 10px -6px var(--gs-avatar-glow);
}

.gs-home-flow-step strong {
    display: block;
    font-size: 1.0625rem;
    color: var(--gs-text);
    margin-top: 0.5rem;
}

.gs-home-flow-step p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gs-home-ink-2);
}

/* --- Cards --- */
.gs-home-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

#who .gs-home-grid-3 { margin-top: 2.5rem; }

.gs-home-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: var(--gs-home-box-shadow);
    padding: 2rem;
}

.gs-home-card-lead {
    font-weight: 600;
    color: var(--gs-text);
    margin-bottom: 1rem;
}

.gs-home-ticks {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    flex: 1;
}

.gs-home-ticks li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.625rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gs-home-ink-2);
}

.gs-home-ticks li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.35rem;
    width: 0.5rem;
    height: 0.8rem;
    border: solid var(--gs-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.gs-home-card-link {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gs-dev-teal-text);
    text-decoration: none;
}

.gs-home-card-link:hover { text-decoration: underline; }

/* --- Closing call to action --- */
/* A light background, so the last ask stands out from the grey above. */
.gs-home-cta {
    text-align: center;
    background: #fff;
}

.gs-home-cta .gs-home-h2,
.gs-home-cta .gs-home-lede {
    margin-left: auto;
    margin-right: auto;
}

.gs-home-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.gs-home-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 980px;
    border: 1px solid var(--gs-separator);
    background: #fff;
    color: var(--gs-text);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--gs-transition), border-color var(--gs-transition);
}

.gs-home-btn:hover { border-color: var(--gs-accent); }

.gs-home-btn-primary {
    background: var(--gs-text);
    border-color: var(--gs-text);
    color: #fff;
}

.gs-home-btn-primary:hover {
    background: #000;
    color: #fff;
}

/* A slow glow on the home page buttons, passing from left to right along the row. Teal unless a button
   sets its own colour in --gs-home-glow (an RGB triplet). */
.gs-home-buttons .gs-home-btn {
    --gs-home-glow: 0, 209, 178;
    animation: gs-home-glow 3.2s ease-in-out infinite;
}

.gs-home-buttons .gs-home-btn + .gs-home-btn { animation-delay: 1.07s; }
.gs-home-buttons .gs-home-btn + .gs-home-btn + .gs-home-btn { animation-delay: 2.13s; }

/* A streak of light that crosses each button once every seven seconds, taking about a second. */
.gs-home-buttons .gs-home-btn {
    position: relative;
    overflow: hidden;
}

.gs-home-buttons .gs-home-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-20deg);
    animation: gs-home-shine 7s ease-in-out infinite;
    pointer-events: none;
}

/* The shine runs left to right along the row. A sweep takes about a second, so each button waits for
   the one before to finish and a short pause after it. */
.gs-home-buttons .gs-home-btn + .gs-home-btn::after { animation-delay: 1.4s; }
.gs-home-buttons .gs-home-btn + .gs-home-btn + .gs-home-btn::after { animation-delay: 2.8s; }

/* The light on a light button takes the button's colour, or it would not show. */
.gs-home-buttons .gs-home-btn:not(.gs-home-btn-primary)::after {
    background: linear-gradient(105deg, transparent 0%, rgba(var(--gs-home-glow), 0.2) 50%, transparent 100%);
}

@keyframes gs-home-shine {
    0% { transform: translateX(-120%) skewX(-20deg); }
    15%, 100% { transform: translateX(320%) skewX(-20deg); }
}

@keyframes gs-home-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gs-home-glow), 0), 0 4px 14px -6px rgba(var(--gs-home-glow), 0.25); }
    50% { box-shadow: 0 0 0 5px rgba(var(--gs-home-glow), 0.10), 0 6px 22px -4px rgba(var(--gs-home-glow), 0.45); }
}

@media (prefers-reduced-motion: reduce) {
    .gs-home-buttons .gs-home-btn,
    .gs-home-buttons .gs-home-btn::after { animation: none; }

    .gs-home-buttons .gs-home-btn::after { display: none; }
}

@media (max-width: 960px) {
    .gs-home-split { grid-template-columns: 1fr; gap: 2.5rem; }
    .gs-home-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .gs-home-wrap { padding: 0 1rem; }
    .gs-home-section { padding: 4rem 0; }
    .gs-home-grid-3 { grid-template-columns: 1fr; }
}

/* =========================================
   HOME PAGE CARDS (the home page, /partners, /mcp-integration, /how-to-measure)
   Icons, colour and hover for the cards. Nothing here hides content: every card is fully visible
   without scrolling, so what a crawler renders is what a visitor reads.
   ========================================= */

/* --- Available on: an icon disc per place, greyed until it is live --- */
.gs-home .gs-home-surface-name {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}

.gs-home .gs-home-surfaces .gs-avatar { font-size: 0.8125rem; }

.gs-home .gs-home-surfaces li.is-soon .gs-avatar {
    --gs-avatar-from: #d8d8dd;
    --gs-avatar-to: #b9b9c0;
    --gs-avatar-glow: rgba(0, 0, 0, 0.15);
}

.gs-home .gs-home-surfaces li.is-soon .gs-home-surface-name { color: var(--gs-home-ink-2); }

/* --- Figures in brand teal, as in the pitch deck --- */
.gs-home .gs-home-figures dd { color: var(--gs-dev-teal-text); }

/* --- Audience cards: an icon disc on top, a lift on hover --- */
.gs-home .gs-home-card-icon {
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
}

.gs-home .gs-home-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gs-home .gs-home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .gs-home .gs-home-card,
    .gs-home .gs-home-card:hover { transition: none; transform: none; }
}

/* =========================================
   BRAND SIZE GUIDE PAGE (sgb-*)
   ========================================= */

.sgb {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
}

.sgb-breadcrumb {
    padding-top: 1.5rem;
}

.sgb-header {
    text-align: center;
    padding: 2rem 0 2.5rem;
}

.sgb-title {
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -0.02em;
    color: var(--gs-text);
    margin-bottom: 0.5rem;
}

.sgb-subtitle {
    font-size: 1.0625rem;
    color: var(--gs-text-secondary);
}

.sgb-section {
    padding: 1.5rem 0;
}

.sgb-heading {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--gs-text);
    margin-bottom: 1rem;
}

.sgb-stat-grid {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.sgb-stat {
    text-align: center;
}

.sgb-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gs-text-secondary);
    margin-bottom: 0.25rem;
}

.sgb-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gs-text);
}

.sgb-search {
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

.sgb-search-input {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--gs-text);
    background: #fff;
    border: 1px solid var(--gs-separator);
    border-radius: 980px;
    padding: 0.625rem 1.25rem;
    transition: border-color var(--gs-transition);
}

.sgb-search-input:focus {
    outline: none;
    border-color: var(--gs-accent);
}

.sgb-faq-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gs-separator);
}

.sgb-faq-item:last-child {
    border-bottom: none;
}

.sgb-faq-q {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gs-text);
    margin-bottom: 0.375rem;
}

.sgb-faq-a {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--gs-text-secondary);
}

.sgb-content-block {
    margin-bottom: 1.5rem;
}

.sgb-content-block p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--gs-text);
}

.gs-model-truncated {
    font-family: var(--gs-font);
    font-size: 0.8125rem;
    color: rgba(60, 60, 67, 0.55);
    text-align: center;
    padding: 0.75rem 1rem;
    border-top: 0.5px solid rgba(60, 60, 67, 0.12);
}

/* Contextual pointer from the measuring guide to the kids growth predictor. */
.htm-aside {
    font-family: var(--gs-font);
    font-size: 0.875rem;
    color: var(--gs-text-secondary);
    margin-top: 1rem;
    line-height: 1.5;
}

.htm-aside a {
    color: var(--gs-accent);
}


/* ============================================================
   SHARED PROFILE INVITE  (/s/{token})
   ------------------------------------------------------------
   An invitation, not a form. The page leads with whose rack it is, states
   plainly what accepting gives and what it does not, and offers one action.

   Built on the platform conventions the rest of the app already follows:
   17px body, 13px footnote, hairline separators inset to the text column,
   44px minimum for anything tappable, and one accent used once.
   ============================================================ */
.gs-share {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 8vh, 4.5rem) 1.25rem 4rem;
}

.gs-share-card {
    width: 100%;
    max-width: 30rem;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    /* Two layers: a contact shadow to seat the card, and a wide soft one for depth. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.12);
}

/* Whose rack this is, before anything is said about it. */
.gs-share-avatar { margin: 0 auto 1.25rem; }

.gs-share-title {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.021em;
    color: var(--gs-text);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.gs-share-sub {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
    margin: 0 auto;
    max-width: 24rem;
}

/* Grouped list: what this gives you, and what it does not. */
.gs-share-list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--gs-separator);
}

.gs-share-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--gs-text);
    /* Inset to the text column, the way a grouped list separates its rows. */
    border-bottom: 1px solid var(--gs-separator);
}

.gs-share-item:last-child { border-bottom: none; }

.gs-share-item-muted { color: var(--gs-text-secondary); }

.gs-share-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(60, 60, 67, 0.06);
    color: var(--gs-text-secondary);
}

/* The one thing accepting actually gives you carries the only accent on the page. */
.gs-share-icon-yes {
    background: rgba(0, 209, 178, 0.12);
    color: #00a58c;
}

.gs-share-actions { margin-top: 1.75rem; }

.gs-share-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 0 1.5rem;
    font-family: var(--gs-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    background: var(--gs-accent);
    border: none;
    border-radius: 980px;
    cursor: pointer;
    transition: background var(--gs-transition), transform var(--gs-transition);
}

.gs-share-cta:hover { background: #00b89c; }
.gs-share-cta:active { transform: scale(0.985); }

.gs-share-cta:focus-visible,
.gs-share-home:focus-visible {
    outline: 2px solid var(--gs-accent);
    outline-offset: 3px;
}

.gs-share-note {
    margin: 1rem auto 0;
    max-width: 24rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--gs-text-secondary);
}

/* Nothing to accept: expired, already used, or your own. Same shape, no accent. */
.gs-share-icon-lg {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(60, 60, 67, 0.06);
    color: var(--gs-text-secondary);
}

.gs-share-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1.5rem;
    padding: 0 1.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gs-accent);
    text-decoration: none;
    border-radius: 980px;
    transition: background var(--gs-transition);
}

.gs-share-home:hover { background: rgba(0, 209, 178, 0.08); }

@media (max-width: 480px) {
    .gs-share { padding-top: 1.5rem; }
    .gs-share-card { padding: 2rem 1.375rem 1.5rem; border-radius: 18px; }
    .gs-share-title { font-size: 1.4375rem; }
}

/* The card arrives rather than appearing, once, on load. */
@media (prefers-reduced-motion: no-preference) {
    .gs-share-card {
        animation: gs-share-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    @keyframes gs-share-in {
        from { opacity: 0; transform: translateY(12px) scale(0.985); }
        to { opacity: 1; transform: none; }
    }
}


/* ============================================================
   AVATAR
   ------------------------------------------------------------
   One person, one disc, everywhere: the profile bar and switcher, the people
   with access to a shared rack, the invite page, and a comment author.

   The hue varies so several people in a list stay apart at a glance; the
   construction does not. Each variant sets three custom properties and the
   rest is shared, which is what stopped three different avatars existing.
   ============================================================ */
.gs-avatar {
    --gs-avatar-from: #00e0c0;
    --gs-avatar-to: #00b89c;
    --gs-avatar-glow: rgba(0, 209, 178, 0.55);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-family: var(--gs-font);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #fff;
    background: linear-gradient(160deg, var(--gs-avatar-from) 0%, var(--gs-avatar-to) 100%);
    box-shadow: 0 3px 8px -3px var(--gs-avatar-glow);
    user-select: none;
}

.gs-avatar-md {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
    box-shadow: 0 4px 10px -4px var(--gs-avatar-glow);
}

.gs-avatar-xl {
    width: 72px;
    height: 72px;
    font-size: 1.75rem;
    box-shadow: 0 6px 16px -6px var(--gs-avatar-glow);
}

/* Six hues, each a light-to-deep pair of the same tone. Teal first, so an
   owner's own profile carries the brand colour. */
.gs-avatar-c0 { --gs-avatar-from: #00e0c0; --gs-avatar-to: #00b89c; --gs-avatar-glow: rgba(0, 209, 178, 0.55); }
.gs-avatar-c1 { --gs-avatar-from: #ff9f6b; --gs-avatar-to: #f2703a; --gs-avatar-glow: rgba(242, 112, 58, 0.45); }
.gs-avatar-c2 { --gs-avatar-from: #8f8bff; --gs-avatar-to: #5f57e8; --gs-avatar-glow: rgba(95, 87, 232, 0.45); }
.gs-avatar-c3 { --gs-avatar-from: #6fc78a; --gs-avatar-to: #34a15b; --gs-avatar-glow: rgba(52, 161, 91, 0.45); }
.gs-avatar-c4 { --gs-avatar-from: #ff8fb4; --gs-avatar-to: #e8548a; --gs-avatar-glow: rgba(232, 84, 138, 0.45); }
.gs-avatar-c5 { --gs-avatar-from: #6fb6f5; --gs-avatar-to: #2f86d9; --gs-avatar-glow: rgba(47, 134, 217, 0.45); }


/* ============================================================
   SETTINGS  (notification preferences)
   ------------------------------------------------------------
   A grouped list: one row per thing you can be told about, one column per way
   of being told. Same platform conventions as the rest of the app - 17px body,
   13px footnote, hairline separators, 44px minimum on anything you can hit.
   ============================================================ */
.gs-settings {
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 3.5rem) 1.25rem 5rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

.gs-settings-head { margin-bottom: 1.75rem; }

.gs-settings-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.021em;
    color: var(--gs-text);
    margin: 0 0 0.5rem;
}

.gs-settings-sub {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
    margin: 0;
    max-width: 30rem;
}

.gs-settings-saved {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: rgba(0, 209, 178, 0.1);
    color: var(--gs-dev-teal-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.gs-settings-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -14px rgba(0, 0, 0, 0.12);
}

/* The two channel columns are fixed so their boxes line up down the card, and the
   description takes whatever is left. */
.gs-settings-row {
    display: grid;
    grid-template-columns: 1fr 5rem 5rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gs-separator);
}

.gs-settings-row:last-child { border-bottom: none; }

.gs-settings-row-head {
    min-height: 0;
    padding-top: 0.875rem;
    padding-bottom: 0.625rem;
    background: rgba(60, 60, 67, 0.03);
}

.gs-settings-row-head .gs-settings-channel {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-text-secondary);
}

.gs-settings-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gs-settings-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gs-text);
}

.gs-settings-hint {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gs-text-secondary);
}

/* How often this row is allowed to reach an inbox. Stated per row because it differs per row,
   and because "we will email you" without a frequency is the part people mistrust. */
.gs-settings-cadence {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 980px;
    background: rgba(60, 60, 67, 0.06);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gs-text-secondary);
}

.gs-settings-cadence svg { flex-shrink: 0; }

/* Below the save button, so it needs its own room: the heading inside is the first of its
   kind there and drops its top margin. */

/* A card row that leads to another page rather than holding a setting. */
.gs-settings-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.875rem 1.25rem;
    color: var(--gs-text-secondary);
    text-decoration: none;
    transition: background var(--gs-transition);
}

.gs-settings-link:hover { background: rgba(60, 60, 67, 0.04); }
.gs-settings-link svg { flex-shrink: 0; }

.gs-settings-channel {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* The whole column cell is the target, so the box is never the only thing to hit. */
.gs-check-wrap {
    align-self: stretch;
    min-height: 44px;
    cursor: pointer;
}

.gs-check {
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid rgba(60, 60, 67, 0.3);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    transition: background var(--gs-transition), border-color var(--gs-transition);
}

.gs-check:checked {
    background: var(--gs-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    border-color: var(--gs-accent);
}

.gs-check:hover { border-color: rgba(60, 60, 67, 0.45); }
.gs-check:checked:hover { border-color: var(--gs-accent); }

.gs-check:focus-visible {
    outline: 2px solid var(--gs-accent);
    outline-offset: 2px;
}

/* Always on: ticked, and plainly not something to click. */
.gs-check:disabled,
.gs-check-wrap:has(.gs-check:disabled) { cursor: not-allowed; }
.gs-check:disabled { opacity: 0.45; }

.gs-settings-note {
    margin: 0.875rem 0.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--gs-text-secondary);
}

.gs-settings-actions { margin-top: 1.5rem; }

.gs-settings-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 2rem;
    font-family: var(--gs-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    background: var(--gs-accent);
    border: none;
    border-radius: 980px;
    cursor: pointer;
    transition: background var(--gs-transition), transform var(--gs-transition);
}

.gs-settings-save:hover { background: #00b89c; }
.gs-settings-save:active { transform: scale(0.985); }

.gs-settings-save:focus-visible {
    outline: 2px solid var(--gs-accent);
    outline-offset: 3px;
}

/* Names the box for a screen reader without putting a second label on the screen. */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 460px) {
    .gs-settings-row { grid-template-columns: 1fr 3.5rem 3.5rem; padding: 0.875rem 1rem; }
    .gs-settings-title { font-size: 1.5rem; }
}

/* ============================================================
   NEWS
   ------------------------------------------------------------
   A list of articles, and an article. Reading is the whole job here, so the
   measure is narrow, the type is larger than the app's, and nothing else
   competes with the words.
   ============================================================ */
.gs-news {
    /* One measure for the list and for an article, so moving between them does not move the
       text under the reader. */
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 3.5rem) 1.25rem 5rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

.gs-news-head { margin-bottom: 2.5rem; }

.gs-news-title {
    font-size: clamp(1.875rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--gs-text);
    margin: 0 0 0.625rem;
}

.gs-news-intro {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--gs-text-secondary);
    margin: 0;
    max-width: 34rem;
}

.gs-news-list { display: flex; flex-direction: column; }

.gs-news-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--gs-separator);
    text-decoration: none;
    color: inherit;
    transition: opacity var(--gs-transition);
}

.gs-news-item:last-child { border-bottom: 1px solid var(--gs-separator); }
.gs-news-item:hover .gs-news-item-title { color: var(--gs-accent); }

.gs-news-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
}

/* The kind is a label, not a decoration: a release and an article are read differently. */
.gs-news-kind {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 980px;
    background: rgba(60, 60, 67, 0.08);
    color: var(--gs-text-secondary);
}

.gs-news-kind-release {
    background: rgba(0, 209, 178, 0.14);
    color: var(--gs-dev-teal-text);
}

.gs-news-item-title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--gs-text);
    transition: color var(--gs-transition);
}

.gs-news-summary {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gs-text-secondary);
}

.gs-news-empty { color: var(--gs-text-secondary); font-size: 1.0625rem; }

/* === One article === */
.gs-article-back {
    display: inline-block;
    margin-bottom: 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gs-accent);
    text-decoration: none;
}

.gs-article-back:hover { text-decoration: underline; }

.gs-article-head { margin-bottom: 2rem; }

.gs-article-title {
    font-size: clamp(1.875rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--gs-text);
    margin: 0.75rem 0 0;
    text-wrap: balance;
}

.gs-article-standfirst {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--gs-text-secondary);
    margin: 0.875rem 0 0;
}

/* The body is markdown we wrote, so these are the only elements it can produce. */
.gs-article-body {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--gs-text);
}

.gs-article-body h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 2.5rem 0 0.75rem;
}

.gs-article-body h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 2rem 0 0.5rem;
}

.gs-article-body p { margin: 0 0 1.25rem; }

.gs-article-body a { color: var(--gs-accent); text-decoration: none; }
.gs-article-body a:hover { text-decoration: underline; }

.gs-article-body ul,
.gs-article-body ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
/* The base stylesheet strips list markers; a list in an article is a list. */
.gs-article-body ul { list-style: disc; }
.gs-article-body ol { list-style: decimal; }

.gs-article-body li { margin-bottom: 0.5rem; }

.gs-article-body blockquote {
    margin: 1.5rem 0;
    padding-left: 1.125rem;
    border-left: 3px solid var(--gs-separator);
    color: var(--gs-text-secondary);
}

/* An article that opens on a blockquote is opening on an aside to the reader, not a pull quote. */
.gs-article-body > blockquote:first-child {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--gs-accent);
    border-radius: 0 12px 12px 0;
    background: rgba(0, 209, 178, 0.07);
    color: var(--gs-text);
}

.gs-article-body > blockquote:first-child p:last-child { margin-bottom: 0; }

.gs-article-body code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 0.9em;
    background: rgba(60, 60, 67, 0.06);
    padding: 2px 6px;
    border-radius: 6px;
}

.gs-article-body pre {
    overflow-x: auto;
    padding: 1rem 1.125rem;
    border-radius: 12px;
    background: rgba(60, 60, 67, 0.05);
}

.gs-article-body pre code { background: none; padding: 0; }

.gs-article-body img { max-width: 100%; height: auto; border-radius: 12px; }

.gs-article-body hr { border: none; border-top: 1px solid var(--gs-separator); margin: 2.5rem 0; }

/* Data tables in articles. Scrolls on its own so a wide table never widens the page. */
.gs-article-body .gs-table-scroll {
    overflow-x: auto;
    margin: 1.75rem 0;
    -webkit-overflow-scrolling: touch;
}

.gs-article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.gs-article-body th,
.gs-article-body td {
    text-align: left;
    padding: 0.6875rem 0.875rem;
    border-bottom: 1px solid var(--gs-separator);
    white-space: nowrap;
}

.gs-article-body th {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gs-text-secondary);
    border-bottom-width: 1.5px;
}

.gs-article-body td:first-child { font-weight: 500; }

/* Figures line up when they are read down a column. */
.gs-article-body td:not(:first-child) { font-variant-numeric: tabular-nums; }

.gs-article-body tbody tr:last-child td { border-bottom: none; }

.gs-article-foot {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gs-separator);
    font-size: 0.9375rem;
}

.gs-article-foot a { color: var(--gs-accent); text-decoration: none; font-weight: 600; }
.gs-article-foot a:hover { text-decoration: underline; }

/* The thread under an article. Reads as a second section, not as part of the piece. */
.gs-article-comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gs-separator);
}

.gs-article-comments-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
}

/* The unsubscribe form asks for the address rather than carrying it in the link. */
.gs-unsub-input {
    width: 100%;
    min-height: 46px;
    margin-bottom: 0.75rem;
    padding: 0 1rem;
    font-family: var(--gs-font);
    font-size: 1rem;
    color: var(--gs-text);
    background: #fff;
    border: 1px solid var(--gs-separator);
    border-radius: 12px;
    outline: none;
    transition: border-color var(--gs-transition);
}

.gs-unsub-input:focus { border-color: var(--gs-accent); }

.gs-unsub-error {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #c0392b;
}

/* --- Follow-ups: the home for our open questions ------------------------------------------
   One card per question, the answer taken in place. Deliberately close to the settings page:
   this is somewhere you come to deal with a short list and leave, not somewhere to browse. */
.gs-followups {
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

.gs-followups-head { margin-bottom: 1.5rem; }

.gs-followups-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.gs-followups-intro,
.gs-followups-empty {
    color: var(--gs-text-secondary, #6b7280);
    margin: 0;
    line-height: 1.6;
}

.gs-followups-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gs-followup {
    position: relative;
    background: #fff;
    border: 1px solid var(--gs-border, #e5e7eb);
    border-radius: 12px;
    padding: 1rem 2.5rem 1rem 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Answered questions leave, because the list is what is still open. */
.gs-followup.is-answered {
    opacity: 0;
    transform: translateY(-4px);
}

.gs-followup-subject {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gs-followup-name { font-weight: 600; }

.gs-followup-detail {
    color: var(--gs-text-secondary, #6b7280);
    font-size: 0.875rem;
}

.gs-followup-question {
    margin: 0.25rem 0 0.75rem;
    color: var(--gs-text-secondary, #6b7280);
}

.gs-followup-actions {
    display: flex;
    gap: 0.5rem;
}

.gs-followup-yes,
.gs-followup-no,
.gs-followup-open {
    flex: 1;
    text-align: center;
    padding: 0.625rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--gs-border, #e5e7eb);
    background: #fff;
    color: var(--gs-text-secondary, #6b7280);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
}

.gs-followup-yes {
    background: var(--gs-accent, #00d1b2);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.gs-followup-dismiss {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: 0;
    background: none;
    color: var(--gs-text-tertiary, #9ca3af);
    cursor: pointer;
    line-height: 0;
    padding: 4px;
    border-radius: 6px;
}

.gs-followup-dismiss:hover { color: var(--gs-text-secondary, #6b7280); }

/* ============================================================
   DEVELOPER
   ------------------------------------------------------------
   The developer area: plan, usage, keys, invoices, pricing and the
   cancel flow. Same grouped cards and type scale as Preferences, in a
   slightly wider column so the usage chart has room. The usage meter is
   the one large element; everything else is rows.
   ============================================================ */
/* The developer palette, on the developer pages and on the plans wherever they are shown
   (shared/api-plans.jte also sits on /partners, outside .gs-dev). */
.gs-dev,
.gs-dev-plans {
    /* The avatar's finish: a 160deg teal gradient over a soft teal shadow. Used for every
       primary action and the one highlighted plan, so depth means "this is the one". */
    --gs-dev-teal: linear-gradient(160deg, #00e0c0 0%, #00b89c 100%);
    --gs-dev-teal-glow: 0 3px 8px -3px rgba(0, 209, 178, 0.55);
    --gs-dev-red: linear-gradient(160deg, #d1242f 0%, #b01e28 100%);
    --gs-dev-red-glow: 0 3px 8px -3px rgba(209, 36, 47, 0.5);
    --gs-dev-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --gs-dev-danger: #d1242f;
    /* Darker than the site's secondary grey: 13px notes and hints need 4.5:1 on white and on the
       page background, which #8e8e93 does not reach. */
    --gs-text-secondary: #6e6e73;
    /* Text on the bright teal: the avatar gradient keeps its look, and dark text on it reads at
       about 9:1 where white managed under 3:1. */
    --gs-dev-on-teal: #00332b;
    /* Teal for text and focus rings: 4.5:1 on white and on the page background. The bright accent
       is for fills only. */
    --gs-dev-teal-text: #007563;
    --gs-dev-warn-bg: #fff6e0;
    --gs-dev-warn-text: #7a4b00;
}

.gs-dev {
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 3.5rem) 1.25rem 5rem;
    max-width: var(--gs-site-maxw);
    padding-left: var(--gs-gutter);
    padding-right: var(--gs-gutter);
}

.gs-dev-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gs-dev-teal-text);
    text-decoration: none;
}
.gs-dev-back:hover { color: var(--gs-text); }
.gs-dev a:focus-visible { outline: 2px solid var(--gs-dev-teal-text); outline-offset: 2px; border-radius: 4px; }
/* Inside a card that clips its corners, an outer ring would be cut off. */
.gs-dev a.gs-dev-row:focus-visible { outline-offset: -2px; border-radius: 0; }

.gs-dev-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.021em;
    color: var(--gs-text);
    margin: 0 0 0.5rem;
}

.gs-dev-lede {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
    margin: 0 0 2rem;
}
.gs-dev-lede a { color: var(--gs-dev-teal-text); font-weight: 600; }
.gs-dev-title-solo { margin-bottom: 1.75rem; }
.gs-dev-note.gs-dev-footnote { margin-top: 2.25rem; }
.gs-dev-title + .gs-dev-flash { margin-top: 1.25rem; }

.gs-dev-section { margin-top: 2.25rem; }
.gs-dev-section:first-of-type { margin-top: 0; }

.gs-dev-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0.25rem 0.625rem;
}

.gs-dev-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gs-text);
    margin: 0;
}

.gs-dev-aside {
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
}
.gs-dev-aside-link { color: var(--gs-dev-teal-text); font-weight: 600; text-decoration: none; }
.gs-dev-aside-link:hover { color: var(--gs-text); }

.gs-dev-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(60, 60, 67, 0.05),
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 14px 32px -18px rgba(16, 24, 40, 0.2);
}

.gs-dev-pad { padding: 1.25rem 1.25rem 1.375rem; }

/* --- Messages --- */
.gs-dev-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    background: rgba(0, 209, 178, 0.1);
    color: var(--gs-dev-teal-text);
}
.gs-dev-flash svg { flex-shrink: 0; margin-top: 2px; }
.gs-dev-flash a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.gs-dev-flash.is-error { background: rgba(209, 36, 47, 0.08); color: var(--gs-dev-danger); }
.gs-dev-flash.is-warn { background: var(--gs-dev-warn-bg); color: var(--gs-dev-warn-text); }

/* --- Plan --- */
.gs-dev-plan-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.gs-dev-plan-name {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gs-text);
    margin: 0;
}

.gs-dev-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 980px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(60, 60, 67, 0.06);
    color: var(--gs-text-secondary);
}
.gs-dev-pill.is-accent {
    background: linear-gradient(160deg, rgba(0, 224, 192, 0.16) 0%, rgba(0, 184, 156, 0.1) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 184, 156, 0.18);
    color: var(--gs-dev-teal-text);
}
.gs-dev-pill.is-warn { background: var(--gs-dev-warn-bg); color: var(--gs-dev-warn-text); }

.gs-dev-limits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0.625rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    color: var(--gs-text);
}
.gs-dev-limits strong { font-weight: 700; }

.gs-dev-status {
    margin: 0.875rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
}

.gs-dev-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
}
.gs-dev-actions form { margin: 0; }

/* --- Buttons. Same pill as the Preferences save button. --- */
.gs-dev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 1.5rem;
    font-family: var(--gs-font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gs-dev-on-teal);
    background: var(--gs-dev-teal);
    border: none;
    border-radius: 980px;
    box-shadow: var(--gs-dev-highlight), var(--gs-dev-teal-glow);
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow var(--gs-transition), transform var(--gs-transition), filter var(--gs-transition);
}
/* The avatar's hover: the same shadow plus a faint ring. */
.gs-dev-btn:hover { color: var(--gs-dev-on-teal); filter: brightness(1.03); box-shadow: var(--gs-dev-highlight), var(--gs-dev-teal-glow), 0 0 0 3px rgba(0, 209, 178, 0.2); }
.gs-dev-btn:active { transform: scale(0.985); }
.gs-dev-btn:focus-visible { outline: 2px solid var(--gs-dev-teal-text); outline-offset: 3px; }
.gs-dev-btn.is-danger { background: var(--gs-dev-red); color: #fff; box-shadow: var(--gs-dev-highlight), var(--gs-dev-red-glow); }
.gs-dev-btn.is-danger:hover { color: #fff; }
.gs-dev-btn.is-danger:hover { box-shadow: var(--gs-dev-highlight), var(--gs-dev-red-glow), 0 0 0 3px rgba(209, 36, 47, 0.18); }
.gs-dev-btn.is-danger:focus-visible { outline-color: var(--gs-dev-danger); }
.gs-dev-btn.is-quiet { background: rgba(60, 60, 67, 0.07); color: var(--gs-text); box-shadow: none; }
.gs-dev-btn.is-quiet:hover { background: rgba(60, 60, 67, 0.12); color: var(--gs-text); filter: none; box-shadow: none; }
.gs-dev-btn[disabled] { background: rgba(60, 60, 67, 0.07); color: var(--gs-text-secondary); box-shadow: none; filter: none; cursor: default; transform: none; }
.gs-dev-btn.is-small { min-height: 36px; padding: 0 1rem; font-size: 0.875rem; }

/* A text action: secondary or destructive, never competing with the pill. */
.gs-dev-textlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font-family: var(--gs-font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gs-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.gs-dev-textlink:hover { color: var(--gs-text); }
.gs-dev-textlink.is-danger { color: var(--gs-dev-danger); }
.gs-dev-textlink.is-danger:hover { color: #b01e28; }
.gs-dev-textlink:focus-visible { outline: 2px solid var(--gs-dev-teal-text); outline-offset: 2px; border-radius: 4px; }

/* --- Usage meter --- */
.gs-dev-usage-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
}
.gs-dev-usage-used {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--gs-text);
}
.gs-dev-usage-of {
    font-size: 1rem;
    color: var(--gs-text-secondary);
}

.gs-dev-meter {
    position: relative;
    height: 10px;
    margin: 0.875rem 0 0.5rem;
    border-radius: 980px;
    background: rgba(60, 60, 67, 0.08);
    overflow: hidden;
}
.gs-dev-meter > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 980px;
    background: var(--gs-dev-teal);
    box-shadow: 0 1px 4px -1px rgba(0, 209, 178, 0.6);
}
.gs-dev-meter.is-warn > span { background: linear-gradient(160deg, #ffc24d 0%, #ef940a 100%); box-shadow: 0 1px 4px -1px rgba(239, 148, 10, 0.6); }
.gs-dev-meter.is-full > span { background: var(--gs-dev-red); box-shadow: 0 1px 4px -1px rgba(209, 36, 47, 0.6); }

.gs-dev-meter-note {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
}

.gs-dev-chart {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gs-separator);
}
.gs-dev-chart-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gs-text);
    margin: 0 0 0.75rem;
}
.gs-dev-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 88px;
}
.gs-dev-bars > span {
    flex: 1;
    min-height: 2px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, #00e0c0 0%, #00b89c 100%);
}
.gs-dev-bars > span.is-zero { background: rgba(60, 60, 67, 0.1); }
.gs-dev-bars-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--gs-text-secondary);
}

/* --- Rows: keys, invoices, cancel consequences --- */
.gs-dev-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gs-separator);
    color: var(--gs-text);
    text-decoration: none;
}
.gs-dev-row:last-child { border-bottom: none; }
a.gs-dev-row { transition: background var(--gs-transition); }
a.gs-dev-row:hover { background: rgba(60, 60, 67, 0.04); color: var(--gs-text); }
a.gs-dev-row svg { flex-shrink: 0; color: var(--gs-text-secondary); }

.gs-dev-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-dev-row-name { font-size: 0.9375rem; font-weight: 600; color: var(--gs-text); }
.gs-dev-row-hint { font-size: 0.8125rem; line-height: 1.45; color: var(--gs-text-secondary); }
.gs-dev-row-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--gs-text-secondary);
}
.gs-dev-row-end strong { color: var(--gs-text); font-weight: 600; }
.gs-dev-row-end a { color: var(--gs-dev-teal-text); font-weight: 600; text-decoration: none; }
.gs-dev-row-end a:hover { color: var(--gs-text); }
.gs-dev-row-link { display: inline-flex; align-items: center; min-height: 44px; }

/* One API key: name and prefix on the left, dates in fixed columns so they line up down the
   list, revoke on the right. Below 560px the dates wrap under the name. */
.gs-dev-key {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gs-separator);
}
.gs-dev-key:last-child { border-bottom: none; }
.gs-dev-key.is-revoked .gs-dev-row-name { color: var(--gs-text-secondary); }
.gs-dev-key-main { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.gs-dev-key-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; min-height: 36px; }
.gs-dev-key-prefix {
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(60, 60, 67, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--gs-text-secondary);
    letter-spacing: 0.01em;
}
.gs-dev-key-meta { display: grid; grid-template-columns: 6.5rem 6.5rem; gap: 1rem; margin: 0; }
.gs-dev-key-meta dt { font-size: 0.75rem; color: var(--gs-text-secondary); margin: 0 0 2px; }
.gs-dev-key-meta dd { font-size: 0.9375rem; font-weight: 600; color: var(--gs-text); margin: 0; font-variant-numeric: tabular-nums; }
.gs-dev-key-action { justify-self: end; }
/* In a key row the rename button only takes room while the name is being edited; Enter in the
   field saves it too. */
.gs-dev-key .gs-dev-rename { flex: 1 1 auto; min-width: 0; }
.gs-dev-key .gs-dev-rename .gs-dev-input { field-sizing: fixed; width: 100%; min-width: 0; }
.gs-dev-key-id { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gs-dev-key .gs-dev-rename { position: relative; }
.gs-dev-key .gs-dev-rename .gs-dev-input {
    text-overflow: ellipsis;
    /* Looks like text, but an underline says it can be edited. */
    text-decoration: underline dotted rgba(60, 60, 67, 0.4);
    text-underline-offset: 4px;
}
.gs-dev-key .gs-dev-rename .gs-dev-input:focus { text-decoration: none; }
.gs-dev-key .gs-dev-rename:focus-within .gs-dev-input { padding-right: 6rem; }
/* Out of the layout so it never pushes the row about, and hidden with a short delay rather than at
   once: Safari does not focus a button it is clicking, so the field's blur would otherwise hide the
   button before the click landed. */
.gs-dev-key .gs-dev-rename .gs-dev-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    translate: 0 -50%;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--gs-transition), visibility 0s linear 0.25s;
}
.gs-dev-key .gs-dev-rename:focus-within .gs-dev-btn {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
.gs-dev-key-action form { margin: 0; }

/* An action shown as an icon: round, 36px, labelled for screen readers and on hover. */
.gs-dev-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gs-text-secondary);
    cursor: pointer;
    transition: background var(--gs-transition), color var(--gs-transition);
}
.gs-dev-icon-btn:hover { background: rgba(209, 36, 47, 0.08); color: var(--gs-dev-danger); }
.gs-dev-icon-btn.is-danger { color: var(--gs-dev-danger); }
.gs-dev-icon-btn:focus-visible { outline: 2px solid var(--gs-dev-teal-text); outline-offset: 2px; }

@media (max-width: 560px) {
    .gs-dev-key { grid-template-columns: minmax(0, 1fr) auto; }
    .gs-dev-key-meta { grid-column: 1 / -1; grid-row: 2; }
    .gs-dev-key-action { grid-column: 2; grid-row: 1; }
}

.gs-dev-empty {
    padding: 1.25rem;
    font-size: 0.9375rem;
    color: var(--gs-text-secondary);
}

/* Each consequence of cancelling is a row: when it applies on the left, what it means on the right. */
.gs-dev-consequence {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.25rem 1.25rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gs-separator);
}
.gs-dev-consequence:last-child { border-bottom: none; }
.gs-dev-consequence-when { font-size: 0.875rem; font-weight: 600; color: var(--gs-text); }
.gs-dev-consequence-what { font-size: 0.9375rem; line-height: 1.5; color: var(--gs-text); margin: 0; }
.gs-dev-consequence-what span { color: var(--gs-text-secondary); }
.gs-dev-consequence.is-warn { background: var(--gs-dev-warn-bg); }
.gs-dev-consequence.is-warn .gs-dev-consequence-when,
.gs-dev-consequence.is-warn .gs-dev-consequence-what { color: var(--gs-dev-warn-text); }

.gs-dev-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--gs-text);
    cursor: pointer;
}
.gs-dev-confirm .gs-check { flex-shrink: 0; margin-top: 1px; }
.gs-dev-confirm a { color: var(--gs-dev-teal-text); font-weight: 600; }

/* --- Forms on the keys page --- */
.gs-dev-input {
    width: 100%;
    min-height: 44px;
    padding: 0 0.875rem;
    font-family: var(--gs-font);
    font-size: 1rem;
    color: var(--gs-text);
    background: #fff;
    border: 1px solid rgba(60, 60, 67, 0.2);
    border-radius: 10px;
    transition: border-color var(--gs-transition), box-shadow var(--gs-transition);
}
.gs-dev-input:focus { outline: none; border-color: var(--gs-dev-teal-text); box-shadow: 0 0 0 3px rgba(0, 117, 99, 0.25); }
.gs-dev-input.is-inline { min-height: 36px; font-size: 0.9375rem; font-weight: 600; border-color: transparent; background: transparent; padding: 0 0.5rem; margin-left: -0.5rem; }
.gs-dev-input.is-inline:hover { border-color: rgba(60, 60, 67, 0.2); }
.gs-dev-input.is-inline:focus { background: #fff; }

.gs-dev-create { display: flex; gap: 0.75rem; align-items: center; }

.gs-dev-sum { margin: 1rem 0 0.5rem; border-top: 1px solid rgba(60, 60, 67, 0.12); }
.gs-dev-sum > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--gs-text-secondary); font-variant-numeric: tabular-nums; }
.gs-dev-sum dd { margin: 0; color: var(--gs-text); }
.gs-dev-sum > .is-total { border-top: 1px solid rgba(60, 60, 67, 0.12); font-weight: 700; color: var(--gs-text); }
.gs-dev-status a { color: var(--gs-dev-teal-text); font-weight: 600; }

.gs-dev-form { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.gs-dev-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.gs-dev-field.is-full { grid-column: 1 / -1; }
.gs-dev-label { font-size: 0.875rem; font-weight: 600; color: var(--gs-text); }
.gs-dev-field-hint { font-size: 0.8125rem; line-height: 1.45; color: var(--gs-text-secondary); margin: 0.125rem 0 0; }
select.gs-dev-input { appearance: auto; padding-right: 0.5rem; }
@media (max-width: 560px) {
    .gs-dev-form { grid-template-columns: 1fr; }
}

/* The key's name is the field. Its button only shows while the name is being edited, so a list of
   keys reads as a list rather than a column of identical buttons; it is in the tab order all along. */
.gs-dev-rename { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.gs-dev-rename .gs-dev-input { field-sizing: content; min-width: 8rem; max-width: 100%; }
.gs-dev-rename .gs-dev-btn { opacity: 0; transition: opacity var(--gs-transition); }
.gs-dev-rename:focus-within .gs-dev-btn { opacity: 1; }
.gs-dev-create .gs-dev-input { flex: 1; }

.gs-dev-secret {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9375rem;
    word-break: break-all;
    color: var(--gs-text);
    background: rgba(60, 60, 67, 0.05);
    border: 1px solid var(--gs-separator);
    border-radius: 10px;
    resize: none;
}

.gs-dev-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }

.gs-dev-note {
    margin: 0.875rem 0.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
}
.gs-dev-note a { color: var(--gs-dev-teal-text); font-weight: 600; }

/* --- Pricing --- */
.gs-dev.is-wide { max-width: var(--gs-site-maxw); }
.gs-dev-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.gs-dev-plan {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.375rem;
}
/* Every plan card carries a 2px border so the highlighted one can show the avatar's gradient in
   it without shifting its contents against the others. */
.gs-dev-plan { border: 2px solid transparent; }
.gs-dev-plan.is-featured,
.gs-dev-plan.is-current {
    background: linear-gradient(#fff, #fff) padding-box, var(--gs-dev-teal) border-box;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -20px rgba(0, 184, 156, 0.55);
}
.gs-dev-plan-cta form { margin: 0; }
.gs-dev-plan-cta form .gs-dev-btn { width: 100%; }

/* An account with no plan: the choice is the page. */
.gs-dev-choose-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gs-text);
    margin: 0 0 0.375rem;
}
.gs-dev-choose-lede {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gs-text-secondary);
    margin: 0 0 1.5rem;
}


.gs-dev-plan-summary { font-size: 0.9375rem; line-height: 1.5; color: var(--gs-text-secondary); margin: 0; }
.gs-dev-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0.875rem 0 0; }
.gs-dev-plan-amount { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--gs-text); font-variant-numeric: tabular-nums; }
.gs-dev-plan-amount.is-text { font-size: 1.375rem; }
.gs-dev-plan-per { font-size: 0.875rem; color: var(--gs-text-secondary); }
.gs-dev-plan-list { margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.5; }
.gs-dev-plan-list li { padding: 0.375rem 0; border-top: 1px solid var(--gs-separator); }
.gs-dev-plan-cta { margin-top: auto; padding-top: 0.75rem; }
.gs-dev-plan-cta .gs-dev-btn { width: 100%; }

@media (max-width: 1100px) {
    .gs-dev-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .gs-dev-plans { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .gs-dev-consequence { grid-template-columns: 1fr; }
    .gs-dev-title { font-size: 1.5rem; }
    .gs-dev-usage-used { font-size: 2rem; }
    .gs-dev-create { flex-direction: column; align-items: stretch; }
    .gs-dev-row { padding: 0.875rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-dev-btn, .gs-dev-row { transition: none; }
}

/* Developer: touch and narrow screens. */
@media (pointer: coarse) {
    .gs-dev-btn.is-small, .gs-dev-input.is-inline { min-height: 44px; }
}
@media (max-width: 520px) {
    .gs-dev-row.is-stackable { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
}
.gs-dev-key-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--gs-text); margin: 0 0 0.5rem; }
.gs-dev-key-ident { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.gs-dev-chart-empty { font-size: 0.8125rem; color: var(--gs-text-secondary); margin: 0 0 0.5rem; }
.gs-dev-copy-status { font-size: 0.8125rem; color: var(--gs-dev-teal-text); font-weight: 600; }

/* ============================================================
   INVOICE
   ------------------------------------------------------------
   A document on screen and on A4: a white sheet with the seller,
   the buyer, the details, the lines and the totals, and the
   company's legal details along the foot. Printing shows only
   the sheet.
   ============================================================ */
.gs-invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gs-invoice-toolbar .gs-dev-back { margin-bottom: 0; }

.gs-invoice {
    background: #fff;
    border-radius: 6px;
    padding: 3rem 3rem 2rem;
    color: var(--gs-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: 0 0 0 1px rgba(60, 60, 67, 0.06), 0 18px 40px -22px rgba(16, 24, 40, 0.3);
}
.gs-invoice p { margin: 0; }

.gs-invoice-test {
    margin: -1rem 0 2rem !important;
    padding: 0.5rem 0.75rem;
    border: 1px dashed #ef940a;
    border-radius: 6px;
    color: #7a4b00;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.gs-invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 2.5rem; }
.gs-invoice-brand { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.gs-invoice-brand span { color: #00a88f; }
.gs-invoice-title { text-align: right; }
.gs-invoice-title h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.gs-invoice-title p { color: var(--gs-text-secondary); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }

.gs-invoice-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    margin-bottom: 2rem;
}
.gs-invoice-parties h2,
.gs-invoice-meta dt,
.gs-invoice-lines th {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gs-text-secondary);
}
/* Number, date, period and status side by side, label over value, between two rules. */
.gs-invoice-meta {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 1rem 1.5rem;
    margin: 0 0 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--gs-separator);
    border-bottom: 1px solid var(--gs-separator);
}
.gs-invoice-meta dt { margin: 0 0 0.25rem; }
.gs-invoice-meta dd { margin: 0; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.gs-invoice-lines { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.gs-invoice-lines th { text-align: left; padding: 0 0 0.5rem; border-bottom: 1px solid var(--gs-text); }
.gs-invoice-lines td { padding: 0.875rem 0; border-bottom: 1px solid var(--gs-separator); vertical-align: top; }
.gs-invoice-lines .is-num { text-align: right; padding-left: 1.25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.gs-invoice-totals { width: min(100%, 20rem); margin: 0 0 2rem auto; display: grid; grid-template-columns: 1fr auto; row-gap: 0.375rem; }
.gs-invoice-totals > div { display: contents; }
.gs-invoice-totals dt { color: var(--gs-text-secondary); }
.gs-invoice-totals dd { margin: 0; padding-left: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.gs-invoice-totals .is-total dt,
.gs-invoice-totals .is-total dd {
    padding-top: 0.625rem;
    border-top: 1px solid var(--gs-text);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gs-text);
}

.gs-invoice-note { color: var(--gs-text-secondary); font-size: 0.875rem; margin-bottom: 2.5rem !important; }

.gs-invoice-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0.25rem 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gs-separator);
    font-size: 0.75rem;
    color: var(--gs-text-secondary);
}

@media (max-width: 640px) {
    .gs-invoice { padding: 1.75rem 1.25rem 1.25rem; }
    .gs-invoice-parties { grid-template-columns: 1fr; }
    .gs-invoice-meta { grid-template-columns: 1fr 1fr; }
}

@media print {
    @page { size: A4; margin: 16mm; }
    body, main { background: #fff !important; }
    body:has(.gs-invoice) > *:not(main),
    body:has(.gs-invoice) main > *:not(.gs-dev),
    .gs-invoice-toolbar,
    .cookie-banner, #cookie-consent { display: none !important; }
    body:has(.gs-invoice) .gs-dev { max-width: none; padding: 0; }
    .gs-invoice { box-shadow: none; border-radius: 0; padding: 0; }
    .gs-invoice-parties { grid-template-columns: 1fr 1fr; }
    .gs-invoice-meta { grid-template-columns: 1fr 1.6fr 1fr; }
    .gs-invoice-test { margin: 0 0 2rem !important; border-color: #000; color: #000; }
    .gs-invoice-brand span { color: #000; }
}

.gs-dev code { color: var(--gs-text); background: rgba(60, 60, 67, 0.07); border-radius: 4px; padding: 1px 5px; }

/* Partners: teal buttons with dark text, like the developer area, so they read at 4.5:1. */

/* Invoice on a phone: quantity is always one and the unit price equals the amount, so those two
   columns go rather than pushing the sheet sideways. */
@media (max-width: 640px) {
    .gs-invoice-lines .is-secondary { display: none; }
}

/* The Terms and the Privacy Policy: long reading text, so the measure of the news column, and
   section headings that stay below the page title. */
/* On the site's frame like every other page; the Bulma container around it sets the width. */
.gs-legal {
    margin: 0 auto;
}
.gs-legal.content h2 { font-size: 1.25rem; margin-top: 2rem; }
.gs-legal.content h3 { font-size: 1.05rem; }