/*
 * GregLink design system.
 *
 * Colors come from the GregLink logo: signal navy, line blue and the red
 * antenna dot. Red is reserved for overdue and destructive actions, the same
 * way the logo uses it as a single point of attention.
 *
 * Loaded after Bootstrap 5.3; Bootstrap's own CSS variables are remapped to
 * these tokens so stock components (buttons, forms, modals) pick them up.
 */

/* ---------- Font (self-hosted IBM Plex Sans; latin-ext carries the ₱ sign) ---------- */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
    --gl-navy: #0A2D57;
    --gl-navy-raised: #16467F;
    --gl-navy-text: #C9D6E8;
    --gl-blue: #1C5FAD;
    --gl-blue-hover: #174F91;
    --gl-blue-tint: #E8F0FA;
    --gl-red: #B8232B;
    --gl-red-hover: #9B1D24;
    --gl-red-tint: #FBECEC;

    --gl-paper: #F5F7FA;
    --gl-surface: #FFFFFF;
    --gl-ink: #16212E;
    --gl-muted: #56657A;
    --gl-line: #D9E0EA;
    --gl-line-strong: #768396;

    --gl-paid: #1D7048;
    --gl-paid-tint: #E7F3EC;
    --gl-balance: #9A5A00;
    --gl-balance-tint: #FBF1E1;
    --gl-pending: #56657A;
    --gl-pending-tint: #EEF1F5;

    --gl-radius-sm: 6px;
    --gl-radius: 10px;

    --gl-sidebar-width: 248px;
    --gl-tabbar-height: 64px;

    --gl-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Bootstrap remap */
    --bs-body-font-family: var(--gl-font);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--gl-ink);
    --bs-body-color-rgb: 22, 33, 46;
    /* Components (inputs, dialogs, lists) sit on white; the page itself is
       paper, set on body below. */
    --bs-body-bg: var(--gl-surface);
    --bs-emphasis-color: var(--gl-ink);
    --bs-secondary-color: var(--gl-muted);
    --bs-heading-color: var(--gl-ink);
    --bs-primary: var(--gl-blue);
    --bs-primary-rgb: 28, 95, 173;
    --bs-danger: var(--gl-red);
    --bs-danger-rgb: 184, 35, 43;
    --bs-success: var(--gl-paid);
    --bs-success-rgb: 29, 112, 72;
    --bs-link-color: var(--gl-blue);
    --bs-link-color-rgb: 28, 95, 173;
    --bs-link-hover-color: var(--gl-blue-hover);
    --bs-link-hover-color-rgb: 23, 79, 145;
    --bs-border-color: var(--gl-line);
    --bs-border-radius: var(--gl-radius-sm);
    --bs-border-radius-lg: var(--gl-radius);
    --bs-focus-ring-color: rgba(28, 95, 173, 0.35);
}

/* ---------- Base ---------- */

body {
    font-family: var(--gl-font);
    background: var(--gl-paper);
    color: var(--gl-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gl-ink);
}

/* Type scale, ratio 1.2 on a 16px base */
.gl-h1 { font-size: 1.75rem; line-height: 1.2; margin: 0; }
.gl-h2 { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.gl-h3 { font-size: 1rem; line-height: 1.4; margin: 0; }

.gl-muted { color: var(--gl-muted); }
.gl-small { font-size: 0.875rem; }

/* Amounts, account and billing numbers: Plex digits are tabular by default;
   the feature setting keeps it explicit if the stack falls back. */
.gl-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

a {
    color: var(--gl-blue);
    text-underline-offset: 0.15em;
}

:focus-visible {
    outline: 2px solid var(--gl-blue);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--gl-blue);
    outline-offset: 2px;
    box-shadow: none;
}

.visually-hidden-focusable:focus {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 16px;
    background: var(--gl-surface);
    border-radius: var(--gl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: var(--gl-radius-sm);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-sm {
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.875rem;
    min-height: 34px;
}

.btn-primary {
    --bs-btn-bg: var(--gl-blue);
    --bs-btn-border-color: var(--gl-blue);
    --bs-btn-hover-bg: var(--gl-blue-hover);
    --bs-btn-hover-border-color: var(--gl-blue-hover);
    --bs-btn-active-bg: var(--gl-blue-hover);
    --bs-btn-active-border-color: var(--gl-blue-hover);
    --bs-btn-disabled-bg: var(--gl-blue);
    --bs-btn-disabled-border-color: var(--gl-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--gl-blue);
    --bs-btn-border-color: var(--gl-blue);
    --bs-btn-hover-bg: var(--gl-blue-tint);
    --bs-btn-hover-color: var(--gl-blue-hover);
    --bs-btn-hover-border-color: var(--gl-blue-hover);
    --bs-btn-active-bg: var(--gl-blue-tint);
    --bs-btn-active-color: var(--gl-blue-hover);
    --bs-btn-active-border-color: var(--gl-blue-hover);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--gl-ink);
    --bs-btn-bg: var(--gl-surface);
    --bs-btn-border-color: var(--gl-line-strong);
    --bs-btn-hover-color: var(--gl-ink);
    --bs-btn-hover-bg: var(--gl-paper);
    --bs-btn-hover-border-color: var(--gl-ink);
    --bs-btn-active-color: var(--gl-ink);
    --bs-btn-active-bg: var(--gl-pending-tint);
    --bs-btn-active-border-color: var(--gl-ink);
}

.btn-danger {
    --bs-btn-bg: var(--gl-red);
    --bs-btn-border-color: var(--gl-red);
    --bs-btn-hover-bg: var(--gl-red-hover);
    --bs-btn-hover-border-color: var(--gl-red-hover);
    --bs-btn-active-bg: var(--gl-red-hover);
    --bs-btn-active-border-color: var(--gl-red-hover);
}

.btn-outline-danger {
    --bs-btn-color: var(--gl-red);
    --bs-btn-border-color: var(--gl-red);
    --bs-btn-hover-bg: var(--gl-red-tint);
    --bs-btn-hover-color: var(--gl-red-hover);
    --bs-btn-hover-border-color: var(--gl-red-hover);
    --bs-btn-active-bg: var(--gl-red-tint);
    --bs-btn-active-color: var(--gl-red-hover);
}

/* Icon-only buttons keep a 40px target */
.gl-icon-btn {
    width: 40px;
    min-height: 40px;
    padding: 0;
}

/* ---------- Forms ---------- */

.form-label {
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
    color: var(--gl-ink);
}

.form-text {
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.form-control,
.form-select {
    border-color: var(--gl-line-strong);
    border-radius: var(--gl-radius-sm);
    min-height: 42px;
    color: var(--gl-ink);
}

.form-control::placeholder {
    color: #6B7889;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gl-blue);
    box-shadow: 0 0 0 3px rgba(28, 95, 173, 0.2);
}

.form-control[readonly] {
    background-color: var(--gl-paper);
}

.input-group-text {
    border-color: var(--gl-line-strong);
    background: var(--gl-paper);
    color: var(--gl-muted);
}

.invalid-feedback {
    color: var(--gl-red);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--gl-red);
}

.gl-required::after {
    content: ' *';
    color: var(--gl-red);
}

.gl-form-section + .gl-form-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gl-line);
}

.gl-form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.gl-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gl-line);
}

/* Search field with a leading icon */
.gl-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

.gl-search .bi {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gl-muted);
    pointer-events: none;
}

.gl-search .form-control {
    padding-left: 2.5rem;
}

/* ---------- Admin shell ---------- */

.gl-shell {
    min-height: 100vh;
}

.gl-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--gl-sidebar-width);
    background: var(--gl-navy);
    color: var(--gl-navy-text);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.875rem;
    overflow-y: auto;
    z-index: 1030;
}

.gl-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem 1.5rem;
    color: #FFFFFF;
    text-decoration: none;
}

.gl-brand:hover {
    color: #FFFFFF;
}

.gl-brand-mark {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--gl-radius-sm);
    background: #FFFFFF;
    display: grid;
    place-items: center;
    padding: 4px;
}

.gl-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gl-brand-name {
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
}

.gl-brand-sub {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--gl-navy-text);
}

.gl-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gl-nav-group {
    margin-top: 1.25rem;
    padding: 0 0.75rem 0.375rem;
    font-size: 0.8125rem;
    color: var(--gl-navy-text);
}

.gl-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--gl-radius-sm);
    color: var(--gl-navy-text);
    text-decoration: none;
    font-weight: 500;
}

.gl-nav-link .bi {
    font-size: 1.125rem;
}

.gl-nav-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

.gl-nav-link[aria-current='page'] {
    color: #FFFFFF;
    background: var(--gl-navy-raised);
    box-shadow: inset 3px 0 0 #FFFFFF;
}

.gl-sidebar :focus-visible {
    outline-color: #FFFFFF;
}

.gl-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
}

/* Manage Website sits at the bottom, just above the signed-in user */
.gl-sidebar-site {
    margin-top: auto;
    padding-top: 1rem;
}

.gl-sidebar-site + .gl-sidebar-footer {
    margin-top: 0;
    padding-top: 0.75rem;
}

/* Signed-in user, with Account and Log out */
.gl-user-card {
    padding: 0.875rem;
    border: 1px solid rgba(201, 214, 232, 0.16);
    border-radius: var(--gl-radius);
    background: rgba(255, 255, 255, 0.05);
}

.gl-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.gl-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--gl-blue);
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.gl-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.gl-user-name {
    color: #FFFFFF;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-user-meta {
    margin: 0.125rem 0;
}

.gl-role-badge {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(201, 214, 232, 0.16);
    color: var(--gl-navy-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.gl-role-badge.is-super {
    background: #FFFFFF;
    color: var(--gl-navy);
}

.gl-user-email {
    color: var(--gl-navy-text);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-user-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(201, 214, 232, 0.16);
}

.gl-user-actions form {
    margin: 0;
}

.gl-user-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 40px;
    padding: 0 0.5rem;
    border: 1px solid rgba(201, 214, 232, 0.24);
    border-radius: var(--gl-radius-sm);
    background: transparent;
    color: var(--gl-navy-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gl-user-action:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(201, 214, 232, 0.4);
    color: #FFFFFF;
}

.gl-user-action[aria-current='page'] {
    background: var(--gl-navy-raised);
    border-color: var(--gl-navy-raised);
    color: #FFFFFF;
}

.gl-user-logout {
    background: var(--gl-red);
    border-color: var(--gl-red);
    color: #FFFFFF;
}

.gl-user-logout:hover {
    background: var(--gl-red-hover);
    border-color: var(--gl-red-hover);
    color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .gl-user-action {
        transition: none;
    }
}

/* The same user row on the light phone "More" sheet */
.gl-user-light {
    padding: 0.25rem 0 1rem;
    margin-bottom: 0.25rem;
}

.gl-user-light .gl-user-name {
    color: var(--gl-ink);
}

.gl-user-light .gl-user-email {
    color: var(--gl-muted);
}

.gl-user-light .gl-role-badge {
    background: var(--gl-blue-tint);
    color: var(--gl-blue);
}

.gl-user-light .gl-role-badge.is-super {
    background: var(--gl-navy);
    color: #FFFFFF;
}

.gl-main {
    margin-left: var(--gl-sidebar-width);
    min-height: 100vh;
}

.gl-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Phone top bar and bottom tab bar */
.gl-topbar,
.gl-tabbar {
    display: none;
}

@media (max-width: 991.98px) {
    .gl-sidebar {
        display: none;
    }

    .gl-main {
        margin-left: 0;
        padding-bottom: calc(var(--gl-tabbar-height) + env(safe-area-inset-bottom));
    }

    .gl-content {
        padding: 1.25rem 1rem 2rem;
    }

    .gl-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 1020;
        height: 56px;
        padding: 0 1rem;
        background: var(--gl-navy);
        color: #FFFFFF;
    }

    .gl-topbar .gl-brand {
        padding: 0;
    }

    .gl-topbar .gl-brand-mark {
        width: 32px;
        height: 32px;
    }

    .gl-tabbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1030;
        height: calc(var(--gl-tabbar-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--gl-surface);
        border-top: 1px solid var(--gl-line);
    }

    .gl-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 48px;
        color: var(--gl-muted);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 500;
        background: none;
        border: 0;
    }

    .gl-tab .bi {
        font-size: 1.25rem;
    }

    .gl-tab[aria-current='page'] {
        color: var(--gl-blue);
    }
}

/* "More" sheet on phones */
.gl-more .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    font-weight: 500;
}

/* ---------- Page header ---------- */

.gl-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gl-page-header p {
    margin: 0.375rem 0 0;
    color: var(--gl-muted);
    max-width: 65ch;
}

.gl-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gl-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    text-decoration: none;
}

/* Bigger tap areas on touch screens for small text links and the dialog close button */
@media (pointer: coarse) {
    .gl-back,
    .gl-see-all {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .gl-back {
        margin-bottom: 0.25rem;
    }

    .modal .btn-close,
    .offcanvas .btn-close {
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        margin: -0.5rem -0.5rem -0.5rem auto;
        background-size: 0.875rem;
    }
}

/* ---------- Panels (flat surfaces, separated by a hairline, not shadows) ---------- */

.gl-panel {
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius);
}

.gl-panel-body {
    padding: 1.5rem;
}

.gl-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gl-line);
}

.gl-panel-head p {
    margin: 0.125rem 0 0;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

@media (max-width: 575.98px) {
    .gl-panel-body {
        padding: 1.125rem;
    }

    .gl-panel-head {
        padding: 0.875rem 1.125rem;
    }
}

/* ---------- Figures ---------- */

.gl-figure-label {
    color: var(--gl-muted);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Big figures shrink with their panel (e.g. the narrow "Owed" panel on a laptop). */
.gl-panel:has(.gl-figure) {
    container-type: inline-size;
}

.gl-figure {
    font-size: clamp(1.5rem, 12cqi, 2.125rem);
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0.25rem 0;
}

.gl-figure-note {
    color: var(--gl-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* The one bold element of the admin side: the collection bar. Each segment
   is a share of the money still owed; overdue gets the logo's red. */
.gl-collect-bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--gl-pending-tint);
    margin: 1.25rem 0 1rem;
}

.gl-collect-bar span {
    display: block;
    height: 100%;
}

.gl-collect-bar span + span {
    border-left: 2px solid var(--gl-surface);
}

.gl-seg-overdue { background: var(--gl-red); }
.gl-seg-balance { background: var(--gl-balance); }
.gl-seg-pending { background: #8A97A8; }
.gl-seg-paid { background: var(--gl-paid); }

.gl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gl-legend a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gl-ink);
    text-decoration: none;
    min-height: 32px;
}

.gl-legend a:hover .gl-legend-label {
    text-decoration: underline;
}

.gl-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.gl-legend-label {
    color: var(--gl-muted);
}

/* ---------- Status ---------- */

.gl-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    background: var(--gl-pending-tint);
    color: var(--gl-pending);
}

.gl-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.gl-status-paid,
.gl-status-active { background: var(--gl-paid-tint); color: var(--gl-paid); }
.gl-status-balance,
.gl-status-suspended { background: var(--gl-balance-tint); color: var(--gl-balance); }
.gl-status-overdue,
.gl-status-disconnected { background: var(--gl-red-tint); color: var(--gl-red); }
.gl-status-pending,
.gl-status-other { background: var(--gl-pending-tint); color: var(--gl-pending); }

.gl-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gl-muted);
    white-space: nowrap;
}

.gl-tag-special {
    border-color: var(--gl-blue);
    color: var(--gl-blue);
}

/* ---------- Toolbar & filter chips ---------- */

.gl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.gl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    padding: 0 0.875rem;
    border: 1px solid var(--gl-line-strong);
    border-radius: 999px;
    background: var(--gl-surface);
    color: var(--gl-ink);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.gl-chip:hover {
    border-color: var(--gl-ink);
    color: var(--gl-ink);
}

.gl-chip[aria-pressed='true'],
.gl-chip[aria-current='true'] {
    background: var(--gl-navy);
    border-color: var(--gl-navy);
    color: #FFFFFF;
}

.gl-chip-count {
    font-variant-numeric: tabular-nums;
    color: var(--gl-muted);
    font-weight: 400;
}

.gl-chip[aria-pressed='true'] .gl-chip-count,
.gl-chip[aria-current='true'] .gl-chip-count {
    color: var(--gl-navy-text);
}

.gl-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ---------- Tables ---------- */

.gl-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.gl-table th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gl-line);
    color: var(--gl-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    background: var(--gl-surface);
}

.gl-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gl-line);
    vertical-align: middle;
}

.gl-table tbody tr:last-child td {
    border-bottom: 0;
}

.gl-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gl-table .actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.gl-table tbody tr[data-row-link],
.gl-table tbody tr[data-bill] {
    cursor: pointer;
}

.gl-table tbody tr:hover td {
    background: #F9FAFC;
}

.gl-cell-sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--gl-muted);
    font-variant-numeric: tabular-nums;
}

.gl-cell-strong {
    font-weight: 500;
}

.gl-table a.gl-row-title {
    color: var(--gl-blue);
    font-weight: 500;
    text-decoration: none;
}

.gl-table a.gl-row-title:hover {
    color: var(--gl-blue);
    text-decoration: underline;
}

.gl-days-late {
    color: var(--gl-red);
    font-weight: 500;
}

/*
 * Tables stack into labelled cards whenever their panel is too narrow for the
 * columns, not just on phones: on a tablet, or a laptop where the sidebar takes
 * 248px, the wide tables (bills, payments) no longer fit either. The wrapper is
 * the container being measured, and it scrolls sideways as a last resort, so
 * the page itself never does.
 */
.gl-table-wrap {
    container: gl-table / inline-size;
    overflow-x: auto;
}

@container gl-table (max-width: 960px) {
    .gl-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .gl-table-stack,
    .gl-table-stack tbody {
        display: block;
        width: 100%;
    }

    /* As many fields per row as fit: two on a phone, four or five on a tablet. */
    .gl-table-stack tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 0.625rem 1rem;
        padding: 1rem 1.125rem;
        border-bottom: 1px solid var(--gl-line);
    }

    .gl-table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    .gl-table-stack td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .gl-table-stack td.num {
        text-align: left;
    }

    /* Dates and references may wrap once they are stacked; long ones break anywhere. */
    .gl-table-stack td,
    .gl-table-stack td .gl-num,
    .gl-table-stack td.gl-num {
        white-space: normal;
    }

    .gl-table-stack td::before {
        content: attr(data-label);
        display: block;
        color: var(--gl-muted);
        font-size: 0.8125rem;
        margin-bottom: 0.125rem;
    }

    .gl-table-stack td.gl-stack-title,
    .gl-table-stack th.gl-stack-title,
    .gl-table-stack td.actions {
        grid-column: 1 / -1;
    }

    .gl-table-stack tbody th {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .gl-table-stack td.gl-stack-title::before,
    .gl-table-stack td.actions::before {
        content: none;
    }

    .gl-table-stack td.actions {
        display: flex;
        justify-content: flex-end;
        width: auto;
    }

    .gl-table-stack td.actions:not(:has(*)) {
        display: none;
    }

    .gl-table-stack td.gl-stack-hide {
        display: none;
    }

    .gl-table-stack tbody tr:hover td {
        background: none;
    }

    /* Names that open a row are easy to tap */
    .gl-table-stack .gl-row-title,
    .gl-table-stack .btn.gl-row-title {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* Short tables (a few columns) only need to stack on narrow panels. Same rules, smaller width. */
.gl-table-wrap-compact {
    container-name: gl-table-compact;
}

@container gl-table-compact (max-width: 640px) {
    .gl-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .gl-table-stack,
    .gl-table-stack tbody {
        display: block;
        width: 100%;
    }

    /* As many fields per row as fit: two on a phone, four or five on a tablet. */
    .gl-table-stack tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 0.625rem 1rem;
        padding: 1rem 1.125rem;
        border-bottom: 1px solid var(--gl-line);
    }

    .gl-table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    .gl-table-stack td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .gl-table-stack td.num {
        text-align: left;
    }

    /* Dates and references may wrap once they are stacked; long ones break anywhere. */
    .gl-table-stack td,
    .gl-table-stack td .gl-num,
    .gl-table-stack td.gl-num {
        white-space: normal;
    }

    .gl-table-stack td::before {
        content: attr(data-label);
        display: block;
        color: var(--gl-muted);
        font-size: 0.8125rem;
        margin-bottom: 0.125rem;
    }

    .gl-table-stack td.gl-stack-title,
    .gl-table-stack th.gl-stack-title,
    .gl-table-stack td.actions {
        grid-column: 1 / -1;
    }

    .gl-table-stack tbody th {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .gl-table-stack td.gl-stack-title::before,
    .gl-table-stack td.actions::before {
        content: none;
    }

    .gl-table-stack td.actions {
        display: flex;
        justify-content: flex-end;
        width: auto;
    }

    .gl-table-stack td.actions:not(:has(*)) {
        display: none;
    }

    .gl-table-stack td.gl-stack-hide {
        display: none;
    }

    .gl-table-stack tbody tr:hover td {
        background: none;
    }

    /* Names that open a row are easy to tap */
    .gl-table-stack .gl-row-title,
    .gl-table-stack .btn.gl-row-title {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* ---------- Description lists (details) ---------- */

.gl-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
}

.gl-details dt {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gl-muted);
    margin-bottom: 0.25rem;
}

.gl-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Totals summary, e.g. inside the payment and bill dialogs */
.gl-summary {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem;
    background: var(--gl-paper);
    border-radius: var(--gl-radius-sm);
}

.gl-summary div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.gl-summary dt {
    font-weight: 400;
    color: var(--gl-muted);
}

.gl-summary dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.gl-summary .gl-summary-total {
    padding-top: 0.5rem;
    border-top: 1px solid var(--gl-line);
}

.gl-summary .gl-summary-total dt,
.gl-summary .gl-summary-total dd {
    color: var(--gl-ink);
    font-weight: 600;
}

/* ---------- Empty state ---------- */

.gl-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--gl-muted);
}

.gl-empty .bi {
    font-size: 1.75rem;
    color: var(--gl-line-strong);
}

.gl-empty-title {
    margin: 0.75rem 0 0.25rem;
    color: var(--gl-ink);
    font-weight: 600;
}

.gl-empty p {
    margin: 0 auto 1rem;
    max-width: 48ch;
}

/* ---------- Alerts ---------- */

.gl-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--gl-radius-sm);
    border: 1px solid;
}

.gl-alert .bi {
    font-size: 1.125rem;
    line-height: 1.35;
}

.gl-alert ul {
    margin: 0;
    padding-left: 1.125rem;
}

.gl-alert-success {
    background: var(--gl-paid-tint);
    border-color: #B9DCC8;
    color: #14533A;
}

.gl-alert-danger {
    background: var(--gl-red-tint);
    border-color: #EFC2C4;
    color: #8A1A20;
}

.gl-alert-info {
    background: var(--gl-blue-tint);
    border-color: #BFD3EC;
    color: var(--gl-navy);
}

/* ---------- Modals ---------- */

.modal {
    --bs-modal-border-radius: var(--gl-radius);
    --bs-modal-border-color: var(--gl-line);
    --bs-modal-header-border-color: var(--gl-line);
    --bs-modal-footer-border-color: var(--gl-line);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-backdrop {
    --bs-backdrop-bg: #0A2D57;
    --bs-backdrop-opacity: 0.45;
}

.gl-modal-danger .modal-title .bi {
    color: var(--gl-red);
}

/* ---------- Dropdowns ---------- */

.dropdown-menu {
    --bs-dropdown-border-color: var(--gl-line);
    --bs-dropdown-border-radius: var(--gl-radius-sm);
    --bs-dropdown-link-active-bg: var(--gl-blue);
    --bs-dropdown-item-padding-y: 0.5rem;
    box-shadow: 0 6px 20px rgba(10, 45, 87, 0.12);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.dropdown-item.gl-danger {
    color: var(--gl-red);
}

/* ---------- Pagination ---------- */

.gl-pagination {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gl-line);
}

.gl-pagination nav > div:first-child {
    display: none !important;
}

.gl-pagination .pagination {
    --bs-pagination-color: var(--gl-ink);
    --bs-pagination-border-color: var(--gl-line);
    --bs-pagination-hover-bg: var(--gl-paper);
    --bs-pagination-hover-color: var(--gl-ink);
    --bs-pagination-active-bg: var(--gl-navy);
    --bs-pagination-active-border-color: var(--gl-navy);
    --bs-pagination-disabled-color: #8A97A8;
    --bs-pagination-focus-box-shadow: none;
    margin: 0;
    flex-wrap: wrap;
}

.gl-pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.gl-pagination nav > div:last-child {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.gl-pagination p {
    margin: 0;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

/* ---------- Dashboard layout ---------- */

.gl-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
    .gl-dash-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }
}

.gl-stack {
    display: grid;
    gap: 1.5rem;
}

@media (max-width: 991.98px) {
    .gl-stack {
        gap: 1rem;
    }
}

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

.gl-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.gl-otp-input {
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    max-width: 260px;
}

.gl-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.gl-checklist li {
    display: flex;
    gap: 0.75rem;
}

.gl-checklist .bi {
    color: var(--gl-paid);
    font-size: 1.125rem;
    line-height: 1.4;
}

.gl-checklist strong {
    display: block;
    font-weight: 500;
}

.gl-checklist span {
    color: var(--gl-muted);
    font-size: 0.9375rem;
}

.gl-pre-line {
    white-space: pre-line;
}

/* Row titles that open a dialog: look like the link they behave as. */
.btn.gl-row-title {
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--gl-blue);
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    display: inline;
}

.btn.gl-row-title:hover {
    color: var(--gl-blue-hover);
    text-decoration: underline;
}

.gl-dash-grid + .gl-dash-grid {
    align-items: start;
}

/* Filter chips scroll sideways on phones instead of wrapping into rows. */
@media (max-width: 767.98px) {
    .gl-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -1rem;
        padding-right: 1rem;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .gl-chips::-webkit-scrollbar {
        display: none;
    }

    .gl-chip {
        flex: none;
    }

    .gl-toolbar .gl-search {
        max-width: none;
        flex-basis: 100%;
    }
}

/* Phones: the row menu sits in the row's top-right corner; a row with no
   other action then needs no extra line for it. */
@media (max-width: 767.98px) {
    .gl-table-stack tr {
        position: relative;
    }

    .gl-table-stack td.actions .dropdown {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
    }

    .gl-table-stack td.gl-stack-title {
        padding-right: 3rem;
    }

    .gl-table-stack td.actions:not(:has([data-pay])) {
        height: 0;
        margin-top: -0.625rem;
    }
}

.input-group > .gl-icon-btn {
    min-height: 42px;
    width: 44px;
}

.gl-more form .list-group-item {
    width: 100%;
    border-width: 1px 0 0;
    text-align: left;
}

/* =====================================================================
   Public site (landing and sign-in)
   One bold element: the statement card in the hero, styled like the
   printed statement of account subscribers already receive. Everything
   around it stays plain.
   ===================================================================== */

.gl-site {
    background: var(--gl-surface);
}

.gl-site-wrap {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 575.98px) {
    .gl-site-wrap {
        padding: 0 1rem;
    }
}

.gl-site-header {
    background: var(--gl-navy);
    color: #FFFFFF;
}

.gl-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}

.gl-site-header .gl-brand {
    padding: 0;
}

.gl-site-nav {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.875rem;
    border-radius: var(--gl-radius-sm);
    color: var(--gl-navy-text);
    font-weight: 500;
    text-decoration: none;
}

.gl-site-nav a:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.gl-site-header :focus-visible,
.gl-hero :focus-visible {
    outline-color: #FFFFFF;
}

.gl-site-header {
    position: relative;
    z-index: 20;
}

.gl-menu-button {
    display: none;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0 0.875rem;
    border: 1px solid rgba(201, 214, 232, 0.4);
    border-radius: var(--gl-radius-sm);
    background: transparent;
    color: #FFFFFF;
    font-weight: 500;
}

.gl-menu-button .bi {
    font-size: 1.375rem;
    line-height: 1;
}

.gl-menu-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
}

/* Phones: the section links fold into a menu under the header. */
@media (max-width: 767.98px) {
    .gl-menu-button {
        display: inline-flex;
    }

    .gl-site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
        background: var(--gl-navy);
        border-top: 1px solid rgba(201, 214, 232, 0.18);
        box-shadow: 0 16px 24px rgba(0, 0, 0, 0.25);
    }

    .gl-site-nav.is-open {
        display: flex;
    }

    .gl-site-nav a {
        display: flex;
        min-height: 48px;
        padding: 0 0.5rem;
        font-size: 1.0625rem;
    }

    .gl-site-nav li + li {
        border-top: 1px solid rgba(201, 214, 232, 0.12);
    }

    /* "Check my bill" moves from the header into the menu, so the business name has room */
    .gl-site-nav-wrap .gl-header-cta {
        display: none;
    }

    .gl-site-nav li.gl-site-nav-bill {
        border-top: 0;
        padding-top: 0.75rem;
    }

    .gl-site-nav .gl-site-nav-bill a {
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        color: var(--gl-navy);
        font-weight: 600;
    }
}

@media (min-width: 768px) {
    .gl-site-nav-bill {
        display: none;
    }
}

/* ---------- Hero with the bill check ---------- */

.gl-hero {
    position: relative;
    overflow: hidden;
    background: var(--gl-navy);
    color: #FFFFFF;
    padding: 4rem 0 8rem;
}

/* Thin fiber lines sweeping across the hero, behind everything else. */
.gl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 640' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231C5FAD' stroke-width='1.5'%3E%3Cpath d='M-40 520C260 430 470 610 760 500S1180 250 1480 300' opacity='.55'/%3E%3Cpath d='M-40 560C280 470 500 640 790 535S1200 300 1480 350' opacity='.4'/%3E%3Cpath d='M-40 600C300 510 530 670 820 570S1220 350 1480 400' opacity='.3'/%3E%3Cpath d='M-40 140C240 220 520 60 820 150S1240 330 1480 250' opacity='.25'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}

.gl-hero > * {
    position: relative;
}


.gl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.5rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .gl-hero {
        padding: 2.5rem 0 6rem;
    }

    .gl-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

.gl-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid rgba(201, 214, 232, 0.28);
    border-radius: 999px;
    color: var(--gl-navy-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.gl-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8DB8EC;
    box-shadow: 0 0 0 4px rgba(141, 184, 236, 0.2);
}

.gl-hero-title {
    color: #FFFFFF;
    font-size: clamp(2.5rem, 5.6vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin: 0 0 1.25rem;
    max-width: 13ch;
}

.gl-hero-title span {
    color: #8DB8EC;
}

.gl-hero-lead {
    font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
    font-weight: 500;
    color: #FFFFFF;
    max-width: 40ch;
    margin: 0 0 0.75rem;
}

.gl-hero-text {
    color: var(--gl-navy-text);
    max-width: 52ch;
    margin: 0 0 2rem;
}

.gl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gl-hero-primary {
    color: var(--gl-navy);
    font-weight: 600;
}

.gl-btn-ghost-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-border-color: rgba(201, 214, 232, 0.5);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.16);
    --bs-btn-active-border-color: #FFFFFF;
    font-weight: 600;
}

.gl-hero-actions .bi {
    margin-right: 0.25rem;
}

@media (max-width: 479.98px) {
    .gl-hero-actions .btn {
        width: 100%;
    }
}

.gl-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(201, 214, 232, 0.2);
}

.gl-hero-points li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gl-hero-points .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gl-radius);
    background: rgba(28, 95, 173, 0.45);
    color: #FFFFFF;
    font-size: 1.125rem;
}

.gl-hero-points span {
    display: flex;
    flex-direction: column;
    color: var(--gl-navy-text);
    font-size: 0.875rem;
    line-height: 1.35;
}

.gl-hero-points strong {
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Speed gauge card */
.gl-speed-card {
    padding: 2rem;
    border: 1px solid rgba(201, 214, 232, 0.2);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(28, 95, 173, 0.35), rgba(255, 255, 255, 0.04));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

@media (max-width: 575.98px) {
    .gl-speed-card {
        padding: 1.5rem 1.25rem;
    }
}

.gl-gauge {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.gl-gauge svg {
    display: block;
    width: 100%;
    height: auto;
}

.gl-gauge-track,
.gl-gauge-fill {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
}

.gl-gauge-track {
    stroke: rgba(201, 214, 232, 0.14);
}

.gl-gauge-fill {
    stroke: url(#glGaugeFill);
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: gl-gauge-sweep 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.gl-gauge-tick {
    stroke: rgba(201, 214, 232, 0.35);
    stroke-width: 2;
    stroke-linecap: round;
}

@keyframes gl-gauge-sweep {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-gauge-fill {
        animation: none;
    }
}

.gl-gauge-value {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.gl-gauge-num {
    font-size: clamp(3rem, 7vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.gl-gauge-unit {
    margin-top: 0.25rem;
    color: var(--gl-navy-text);
    font-weight: 500;
}

.gl-speed-title {
    margin: 1rem 0 1.25rem;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 600;
}

.gl-speed-plans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.gl-speed-plans li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--gl-radius);
    background: rgba(255, 255, 255, 0.06);
    color: var(--gl-navy-text);
}

.gl-speed-plans li.is-popular {
    background: #FFFFFF;
    color: var(--gl-muted);
}

.gl-speed-plan-name {
    color: #FFFFFF;
    font-weight: 600;
}

.is-popular .gl-speed-plan-name {
    color: var(--gl-navy);
}

.gl-speed-plan-badge {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--gl-blue);
    color: #FFFFFF;
    font-size: 0.6875rem;
    line-height: 1.25rem;
    vertical-align: 1px;
}

.gl-speed-plan-price {
    color: #FFFFFF;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.is-popular .gl-speed-plan-price {
    color: var(--gl-ink);
}

.gl-speed-plan-price small {
    font-size: 0.8125rem;
    font-weight: 400;
    color: inherit;
    opacity: 0.8;
}

.gl-speed-plans li .gl-speed-plan-price small {
    color: var(--gl-navy-text);
}

.gl-speed-plans li.is-popular .gl-speed-plan-price small {
    color: var(--gl-muted);
}

@media (max-width: 399.98px) {
    .gl-speed-plans li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gl-speed-plan-speed {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.875rem;
        margin-top: -0.75rem;
    }
}

.gl-speed-link {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-top: 1.25rem;
    color: #FFFFFF;
    font-weight: 600;
    text-underline-offset: 3px;
}

/* Header button to the bill check */
.gl-site-nav-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gl-header-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gl-navy);
    font-weight: 600;
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .gl-site-nav a {
        padding: 0 0.5rem;
        white-space: nowrap;
    }
}

.gl-header-cta {
    white-space: nowrap;
}

/* The business name is editable (Website > Details), so a long one wraps
   instead of pushing the header buttons off the screen. */
.gl-brand {
    min-width: 0;
}

.gl-brand-name {
    min-width: 0;
    overflow-wrap: break-word;
}

.gl-site-nav-wrap {
    flex: none;
}

.gl-cta-short {
    display: none;
}

/* Small tablets: the short "My bill" label, so the header links stay on one line */
@media (min-width: 768px) and (max-width: 899.98px) {
    .gl-cta-long {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .gl-cta-short {
        display: inline;
    }
}

@media (max-width: 575.98px) {
    .gl-cta-long {
        /* still read by screen readers, so the link keeps its full name */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .gl-cta-short {
        display: inline;
    }

    .gl-site-nav-wrap {
        gap: 0.5rem;
    }

    .gl-header-cta,
    .gl-menu-button {
        padding: 0 0.75rem;
    }
}

/* On phones the gauge stays, the plan rows wait for the plans section just below. */
@media (max-width: 767.98px) {
    .gl-speed-plans,
    .gl-speed-link {
        display: none;
    }

    .gl-speed-title {
        margin-bottom: 0;
    }

    .gl-speed-card {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .gl-gauge {
        max-width: 260px;
    }
}

/* ---------- Bill check panel (overlaps the bottom of the hero) ---------- */

.gl-billcheck {
    background: var(--gl-paper);
    padding-bottom: 1rem;
}

.gl-billcheck-panel {
    position: relative;
    z-index: 1;
    margin-top: -4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 3rem;
    align-items: start;
    padding: 2rem;
    border: 1px solid var(--gl-line);
    border-radius: 16px;
    background: var(--gl-surface);
    box-shadow: 0 16px 40px rgba(10, 45, 87, 0.12);
}

@media (max-width: 991.98px) {
    .gl-billcheck-panel {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.5rem 1.25rem;
    }
}

.gl-billcheck-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    color: var(--gl-navy);
    font-size: 1.25rem;
    font-weight: 600;
}

.gl-billcheck-title .bi {
    color: var(--gl-blue);
}

.gl-billcheck .gl-lookup-row .form-control {
    border: 1px solid var(--gl-line-strong);
}

.gl-billcheck .gl-lookup-button {
    color: #FFFFFF;
}

.gl-billcheck .gl-lookup-help {
    color: var(--gl-muted);
}

.gl-billcheck-intro {
    padding: 1.25rem 1.5rem;
    border-radius: var(--gl-radius);
    background: var(--gl-paper);
}

.gl-billcheck-intro p {
    margin: 0 0 0.875rem;
    color: var(--gl-muted);
}

.gl-billcheck-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.gl-billcheck-pay {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.gl-billcheck-intro[hidden] {
    display: none;
}

/* The statement sits on white here, so its perforations are white too. */
.gl-billcheck .gl-statement {
    --gl-statement-edge: var(--gl-surface);
    background: var(--gl-paper);
    box-shadow: none;
}

.gl-billcheck .gl-statement:focus-visible {
    outline-color: var(--gl-blue);
}

.gl-billcheck + .gl-site-section {
    padding-top: 3.5rem;
}

.gl-lookup {
    max-width: 480px;
}

.gl-lookup-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.gl-lookup-row {
    display: flex;
    gap: 0.5rem;
}

.gl-lookup-row .form-control {
    min-height: 52px;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    border: 0;
}

.gl-lookup-row .form-control[aria-invalid='true'] {
    box-shadow: 0 0 0 3px #F3A6AA;
}

.gl-lookup-button {
    min-height: 52px;
    padding: 0 1.25rem;
    font-weight: 600;
    color: var(--gl-navy);
    white-space: nowrap;
}

.gl-lookup-help {
    margin: 0.625rem 0 0;
    color: var(--gl-navy-text);
    font-size: 0.9375rem;
}

.gl-lookup-error {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-red-tint);
    color: #8A1A20;
    font-size: 0.9375rem;
}

@media (max-width: 400px) {
    .gl-lookup-row {
        flex-direction: column;
    }
}

/* ---------- The statement ---------- */

.gl-statement {
    position: relative;
    background: var(--gl-surface);
    color: var(--gl-ink);
    border-radius: 4px 4px var(--gl-radius) var(--gl-radius);
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Perforated top edge, like a statement torn from a pad */
.gl-statement::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 12px;
    background: radial-gradient(circle at 8px 6px, var(--gl-statement-edge, var(--gl-navy)) 4px, transparent 4.5px) repeat-x;
    background-size: 16px 12px;
}

.gl-statement:focus {
    outline: none;
}

.gl-statement:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

.gl-statement-kicker {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gl-muted);
    margin: 0 0 0.25rem;
}

.gl-statement-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--gl-line-strong);
}

.gl-statement-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.gl-statement-meta {
    margin: 0.125rem 0 0;
    color: var(--gl-muted);
    font-size: 0.9375rem;
}

.gl-statement-due {
    padding: 1.5rem 0 1.25rem;
}

.gl-statement-due-label {
    margin: 0;
    font-weight: 500;
    color: var(--gl-muted);
}

.gl-statement-amount {
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin: 0.25rem 0 0.5rem;
}

.gl-statement-due-date {
    margin: 0;
    font-weight: 500;
}

.gl-statement-lines {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 1.25rem 0;
    border-top: 1px dashed var(--gl-line-strong);
    border-bottom: 1px dashed var(--gl-line-strong);
}

.gl-statement-lines div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.gl-statement-lines dt {
    font-weight: 400;
    color: var(--gl-muted);
}

.gl-statement-lines dd {
    margin: 0;
    text-align: right;
}

.gl-statement-other {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-balance-tint);
    color: #6E4000;
    font-weight: 500;
}

.gl-statement-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.gl-statement-payments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-statement-payments li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    font-size: 0.9375rem;
}

.gl-statement-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}


@media (max-width: 575.98px) {
    .gl-statement {
        padding: 1.75rem 1.125rem 1.25rem;
    }
}

/* ---------- Sections ---------- */

.gl-site-section {
    padding: 4.5rem 0;
}

.gl-site-section-alt {
    background: var(--gl-paper);
}

@media (max-width: 767.98px) {
    .gl-site-section {
        padding: 3rem 0;
    }
}

.gl-section-head {
    margin-bottom: 2rem;
    max-width: 60ch;
}

.gl-section-title {
    font-size: clamp(1.625rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.gl-section-head p {
    color: var(--gl-muted);
    font-size: 1.0625rem;
    margin: 0;
}

html {
    scroll-padding-top: 1rem;
}

/* How to pay */
.gl-pay-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .gl-pay-methods {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-pay-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius);
}

.gl-pay-method img {
    width: 56px;
    height: 56px;
    border-radius: var(--gl-radius-sm);
    flex: none;
    border: 1px solid var(--gl-line);
}

.gl-pay-method-body {
    flex: 1;
    min-width: 0;
}

.gl-pay-method-name {
    font-size: 1rem;
    margin: 0;
}

.gl-pay-method-holder {
    margin: 0;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.gl-pay-method-number {
    margin: 0.125rem 0 0;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.gl-after-pay {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--gl-line);
}

.gl-steps {
    list-style: none;
    counter-reset: step;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

@media (max-width: 767.98px) {
    .gl-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A real sequence (pay, send proof, we confirm), so it is numbered. */
.gl-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: 0.75rem;
}

.gl-steps li::before {
    content: counter(step);
    grid-row: span 2;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gl-blue-tint);
    color: var(--gl-navy);
    font-weight: 600;
}

.gl-steps strong {
    font-weight: 600;
}

.gl-steps span {
    color: var(--gl-muted);
}

/* Plans */
.gl-plan-group + .gl-plan-group {
    margin-top: 2.5rem;
}

.gl-plan-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gl-navy);
}

.gl-plan-heading .bi {
    color: var(--gl-blue);
}

.gl-plan-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.gl-plan-cards-commercial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .gl-plan-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .gl-plan-cards-commercial {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (max-width: 479.98px) {
    .gl-plan-cards-commercial {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

.gl-plan-name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gl-blue);
}

.gl-plan-card.is-featured .gl-plan-name {
    color: var(--gl-navy-text);
}

.gl-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gl-plan-card:hover {
    border-color: var(--gl-blue);
    box-shadow: 0 4px 16px rgba(10, 45, 87, 0.08);
}

.gl-plan-cards-commercial .gl-plan-card {
    padding: 1.5rem;
}

.gl-plan-speed {
    margin: 0;
    color: var(--gl-muted);
    font-weight: 500;
}

.gl-plan-speed-num {
    color: var(--gl-navy);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.gl-plan-cards-commercial .gl-plan-speed-num {
    font-size: 2.75rem;
}

.gl-plan-meter {
    height: 4px;
    margin: 0.75rem 0 1rem;
    border-radius: 2px;
    background: var(--gl-blue-tint);
    overflow: hidden;
}

.gl-plan-meter span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--gl-blue);
}

.gl-plan-price {
    margin: auto 0 1rem;
}

.gl-plan-amount {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gl-ink);
}

.gl-plan-per {
    color: var(--gl-muted);
    font-size: 0.875rem;
}

/* The popular plan is the one navy card in the grid. */
.gl-plan-card.is-featured {
    background: var(--gl-navy);
    border-color: var(--gl-navy);
    color: #FFFFFF;
}

.gl-plan-card.is-featured .gl-plan-speed,
.gl-plan-card.is-featured .gl-plan-per {
    color: var(--gl-navy-text);
}

.gl-plan-card.is-featured .gl-plan-speed-num,
.gl-plan-card.is-featured .gl-plan-amount {
    color: #FFFFFF;
}

.gl-plan-card.is-featured .gl-plan-meter {
    background: rgba(255, 255, 255, 0.18);
}

.gl-plan-card.is-featured .gl-plan-meter span {
    background: #FFFFFF;
}

.gl-plan-badge {
    position: absolute;
    top: -0.6875rem;
    right: 1rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--gl-blue);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.gl-btn-on-navy {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-color: var(--gl-navy);
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-bg: var(--gl-blue-tint);
    --bs-btn-hover-color: var(--gl-navy);
    --bs-btn-hover-border-color: var(--gl-blue-tint);
    --bs-btn-active-bg: var(--gl-blue-tint);
    --bs-btn-active-color: var(--gl-navy);
    --bs-btn-active-border-color: var(--gl-blue-tint);
    font-weight: 600;
}

.gl-plan-card.is-featured .gl-btn-on-navy:focus-visible {
    outline-color: #FFFFFF;
}

@media (max-width: 767.98px) {
    .gl-plan-card,
    .gl-plan-cards-commercial .gl-plan-card {
        padding: 1rem;
    }

    .gl-plan-speed-num,
    .gl-plan-cards-commercial .gl-plan-speed-num {
        font-size: 1.875rem;
    }

    .gl-plan-amount {
        font-size: 1.125rem;
    }

    .gl-plan-badge {
        right: auto;
        left: 1rem;
    }
}

.gl-plan-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 2rem;
}

.gl-plan-more p {
    margin: 0;
    color: var(--gl-muted);
}

.gl-plan-more .bi {
    margin-right: 0.25rem;
}

/* All plans dialog */
.gl-plan-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 767.98px) {
    .gl-plan-tables {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-plan-table {
    width: 100%;
    border-collapse: collapse;
}

.gl-plan-table caption {
    caption-side: top;
    padding: 0 0 0.5rem;
    color: var(--gl-navy);
    font-weight: 600;
}

.gl-plan-table caption .bi {
    color: var(--gl-blue);
    margin-right: 0.25rem;
}

.gl-plan-table th,
.gl-plan-table td {
    padding: 0.625rem 0;
    border-top: 1px solid var(--gl-line);
}

.gl-plan-table thead th {
    color: var(--gl-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.gl-plan-table tbody th {
    font-weight: 500;
}

.gl-plan-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.gl-plan-tag {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--gl-blue-tint);
    color: var(--gl-blue);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* Services */
.gl-section-head .gl-section-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--gl-blue);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gl-services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .gl-services {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

.gl-service {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gl-line);
    border-radius: 14px;
    background: var(--gl-surface);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gl-service:hover {
    box-shadow: 0 14px 32px rgba(10, 45, 87, 0.12);
    transform: translateY(-2px);
}

.gl-service-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--gl-paper);
}

.gl-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gl-service:hover .gl-service-media img {
    transform: scale(1.03);
}

.gl-service-media {
    overflow: hidden;
}

/* Icon badge sitting on the photo's bottom edge */
.gl-service-icon {
    position: absolute;
    left: 1.5rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--gl-radius);
    background: var(--gl-navy);
    color: #FFFFFF;
    font-size: 1.375rem;
    box-shadow: 0 6px 16px rgba(10, 45, 87, 0.3);
}

.gl-service-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.gl-service-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--gl-navy);
}

.gl-service-body > p {
    color: var(--gl-muted);
    margin: 0 0 1rem;
}

.gl-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.gl-service-tags li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--gl-blue-tint);
    color: var(--gl-navy);
    font-size: 0.875rem;
    font-weight: 500;
}

.gl-service-tags .bi {
    color: var(--gl-blue);
}

.gl-service-cta {
    align-self: flex-start;
    margin-top: auto;
    font-weight: 600;
}

.gl-service-cta .bi {
    margin-right: 0.25rem;
}

@media (max-width: 575.98px) {
    .gl-service-body {
        padding: 1.25rem;
    }

    .gl-service-icon {
        left: 1.25rem;
    }

    .gl-service-cta {
        align-self: stretch;
    }
}

/* Call to action under the service cards */
.gl-services-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    border-radius: 14px;
    background: var(--gl-navy);
    color: var(--gl-navy-text);
}

.gl-services-band-title {
    margin: 0 0 0.25rem;
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 600;
}

.gl-services-band p {
    margin: 0;
}

.gl-services-band .btn .bi {
    margin-right: 0.25rem;
}

@media (max-width: 575.98px) {
    .gl-services-band {
        padding: 1.5rem 1.25rem;
    }

    .gl-services-band .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gl-service,
    .gl-service-media img {
        transition: none;
    }

    .gl-service:hover,
    .gl-service:hover .gl-service-media img {
        transform: none;
    }
}

/* Common questions */
.gl-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 1rem 3rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .gl-faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-faq {
    border-top: 1px solid var(--gl-line);
}

.gl-faq-item {
    border-bottom: 1px solid var(--gl-line);
}

.gl-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 56px;
    padding: 0.875rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.gl-faq-item summary::-webkit-details-marker {
    display: none;
}

.gl-faq-item summary .bi {
    flex-shrink: 0;
    color: var(--gl-blue);
    transition: transform 0.15s ease;
}

.gl-faq-item[open] summary .bi {
    transform: rotate(180deg);
}

.gl-faq-item summary:hover {
    color: var(--gl-blue);
}

.gl-faq-item p {
    margin: 0 0 1.25rem;
    max-width: 62ch;
    color: var(--gl-muted);
}

@media (prefers-reduced-motion: reduce) {
    .gl-faq-item summary .bi {
        transition: none;
    }
}

/* Contact */
.gl-contact-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}

.gl-contact-head .gl-section-head {
    margin-bottom: 0;
}

.gl-contact-cta .bi {
    margin-right: 0.375rem;
}

@media (max-width: 575.98px) {
    .gl-contact-cta {
        width: 100%;
    }
}
.gl-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 2.5rem;
}

@media (max-width: 767.98px) {
    .gl-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-contact li {
    display: flex;
    gap: 1rem;
}

.gl-contact .bi {
    font-size: 1.375rem;
    color: var(--gl-blue);
    line-height: 1.3;
}

.gl-contact a {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.gl-contact p {
    margin: 0.25rem 0 0;
    color: var(--gl-muted);
}

/* Footer */
.gl-site-footer {
    position: relative;
    overflow: hidden;
    background: var(--gl-navy);
    color: var(--gl-navy-text);
    padding: 4rem 0 1.5rem;
    font-size: 0.9375rem;
    border-top: 4px solid var(--gl-blue);
}

/* The same fiber lines as the hero, fainter, behind the footer content. */
.gl-site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 480' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231C5FAD' stroke-width='1.5'%3E%3Cpath d='M-40 90C300 20 560 170 860 90S1240 -20 1480 40' opacity='.35'/%3E%3Cpath d='M-40 130C320 60 590 210 890 130S1260 20 1480 80' opacity='.22'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}

.gl-site-footer > * {
    position: relative;
}

.gl-site-footer a,
.gl-link-button {
    color: #FFFFFF;
}

/* Buttons keep their own colours, not the footer link white. */
.gl-site-footer a.btn {
    color: var(--bs-btn-color);
}

.gl-site-footer :focus-visible {
    outline-color: #FFFFFF;
}

.gl-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.5rem;
}

@media (max-width: 991.98px) {
    .gl-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .gl-site-footer {
        padding-top: 3rem;
    }

    .gl-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

.gl-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    text-decoration: none;
}

.gl-footer-mark {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: none;
    padding: 6px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.gl-footer-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gl-footer-wordmark {
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.gl-footer-wordmark span {
    color: var(--gl-navy-text);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
}

.gl-footer-tagline {
    margin: 0 0 0.375rem;
    color: #8DB8EC;
    font-size: 1.125rem;
    font-weight: 600;
}

.gl-footer-brand p:not(.gl-footer-tagline) {
    max-width: 36ch;
    margin: 0;
}

.gl-footer-social {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.gl-footer-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201, 214, 232, 0.28);
    border-radius: 50%;
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gl-footer-social a:hover {
    background: var(--gl-blue);
    border-color: var(--gl-blue);
}

.gl-footer-title {
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0.5rem 0 1rem;
}

.gl-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.gl-footer-list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--gl-navy-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gl-footer-list a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gl-footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 32px;
}

.gl-footer-contact .bi {
    flex: none;
    color: #8DB8EC;
}

.gl-footer-contact a {
    min-height: 0;
}

.gl-footer-cta p {
    margin: 0 0 1rem;
}

.gl-footer-cta .bi {
    margin-right: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .gl-footer-social a {
        transition: none;
    }
}

.gl-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(201, 214, 232, 0.2);
}

.gl-footer-bottom p {
    margin: 0;
}

.gl-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-link-button {
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font: inherit;
}

/* Legal text in dialogs */
.gl-legal {
    font-size: 0.9375rem;
    line-height: 1.65;
}

.gl-legal h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.gl-legal-section + .gl-legal-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gl-line);
}

.gl-legal ul {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.gl-legal p:last-child,
.gl-legal ul:last-child {
    margin-bottom: 0;
}

.gl-legal-note {
    padding: 0.625rem 0.875rem;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-blue-tint);
    color: var(--gl-navy);
}

/* ---------- Sign in ---------- */

.gl-auth {
    min-height: calc(100vh - 72px);
    background: var(--gl-paper);
    display: grid;
    place-items: start center;
    padding: 4rem 1rem;
}

.gl-auth-card {
    width: 100%;
    max-width: 420px;
}

.gl-auth-card .gl-panel-body {
    padding: 2rem;
}

@media (max-width: 575.98px) {
    .gl-auth {
        padding: 2rem 1rem;
    }

    .gl-auth-card .gl-panel-body {
        padding: 1.5rem 1.25rem;
    }
}

.gl-auth-title {
    font-size: 1.5rem;
    margin: 0 0 0.375rem;
}

.gl-auth-lead {
    color: var(--gl-muted);
    margin: 0 0 1.75rem;
}

.gl-auth-foot {
    margin: 1.25rem 0 0;
    text-align: center;
    color: var(--gl-muted);
    font-size: 0.9375rem;
}

/* =====================================================================
   Overview charts
   Plain HTML marks: 24px-wide columns with a 4px rounded top, square at
   the baseline, 2px surface gap between stacked segments, hairline grid.
   Series 1 is the brand blue, series 2 amber (validated pair, both 3:1 on white).
   ===================================================================== */

.gl-dash-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: -0.5rem 0 1.5rem;
}

.gl-dash-filter-label {
    font-weight: 500;
}

.gl-dash-filter .form-select {
    width: auto;
    min-width: 12rem;
}

.gl-change {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: 600;
}

.gl-change.is-up { color: var(--gl-paid); }
.gl-change.is-down { color: var(--gl-red); }

.gl-series-1 { background: #1C5FAD; }
.gl-series-2 { background: #C98500; }

.gl-chart {
    margin: 0;
}

/* Charts side by side share a height, so a row has no ragged gap; a column chart
   grows into any extra height instead of leaving it empty under the chart. */
.gl-dash-grid.gl-dash-charts {
    align-items: stretch;
}

.gl-dash-charts > .gl-panel {
    display: flex;
    flex-direction: column;
}

.gl-dash-charts > .gl-panel > .gl-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gl-dash-charts .gl-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gl-dash-charts .gl-chart-plot {
    flex: 1 0 228px;
    max-height: 420px;
}

.gl-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.gl-chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gl-chart-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Plot: 200px of bars plus a 28px band for the month labels. */
.gl-chart-plot {
    position: relative;
    height: 228px;
    min-height: 228px;
    margin-top: 1.25rem;
}

.gl-chart-grid {
    position: absolute;
    inset: 0 0 28px 0;
}

.gl-chart-tick {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #E6EAF0;
}

.gl-chart-tick span {
    position: absolute;
    left: 0;
    width: 44px;
    transform: translateY(-50%);
    padding-right: 8px;
    background: var(--gl-surface);
    color: var(--gl-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.gl-chart-tick:first-child {
    border-top-color: var(--gl-line-strong);
}

.gl-chart-cols {
    position: absolute;
    inset: 0 0 0 48px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--gl-radius-sm);
    outline-offset: 2px;
    cursor: default;
}

/* The whole column slot is the hover target, not just the painted bar. */
.gl-col-area {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 28px;
}

.gl-col-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    width: min(24px, 64%);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    transition: filter 0.12s ease;
}

.gl-col-seg {
    flex-basis: 0;
    min-height: 1px;
}

.gl-col.is-quiet .gl-col-seg.gl-series-1 {
    background: #A9B7C9;
}

.gl-col:hover,
.gl-col:focus-visible {
    background: rgba(28, 95, 173, 0.06);
}

.gl-col:hover .gl-col-stack,
.gl-col:focus-visible .gl-col-stack {
    filter: brightness(1.12);
}

.gl-col-value {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -6px);
    white-space: nowrap;
    color: var(--gl-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.gl-col-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--gl-muted);
    font-size: 0.75rem;
}

.gl-col.is-highlight .gl-col-label {
    color: var(--gl-ink);
    font-weight: 600;
}

/* Twelve labels don't fit on a phone: keep every other one (the table has them all).
   The highlighted month always shows, so its neighbours step aside for it. */
@container gl-chart (max-width: 420px) {
    .gl-chart-dense .gl-chart-cols .gl-col:nth-child(even):not(.is-highlight) .gl-col-label,
    .gl-chart-dense .gl-chart-cols .gl-col:has(+ .gl-col.is-highlight) .gl-col-label,
    .gl-chart-dense .gl-chart-cols .gl-col.is-highlight + .gl-col .gl-col-label {
        visibility: hidden;
    }
}

.gl-panel-body:has(> .gl-chart) {
    container: gl-chart / inline-size;
}

@media (prefers-reduced-motion: reduce) {
    .gl-col-stack {
        transition: none;
    }
}

.gl-chart-table {
    margin-top: 1rem;
    font-size: 0.9375rem;
}

.gl-chart-table summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--gl-blue);
    font-weight: 500;
    cursor: pointer;
}

.gl-chart-table .gl-table {
    margin-top: 0.5rem;
}

.gl-chart-table .gl-table th,
.gl-chart-table .gl-table td {
    padding: 0.5rem 0.75rem;
}

/* Horizontal bars: label and value on one line, bar underneath. */
.gl-hbars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.gl-hbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.375rem 1rem;
    align-items: baseline;
}

.gl-hbar-label {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.gl-hbar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gl-hbar-value span {
    display: block;
    color: var(--gl-muted);
    font-size: 0.8125rem;
}

.gl-hbar-track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 4px;
    background: var(--gl-blue-tint);
}

.gl-hbar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #1C5FAD;
}

/* Shared chart tooltip (admin.js): value first, name second, line key for the series. */
.gl-tip {
    position: fixed;
    z-index: 1080;
    min-width: 168px;
    max-width: 260px;
    padding: 0.625rem 0.75rem;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-ink);
    color: #FFFFFF;
    font-size: 0.8125rem;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(10, 45, 87, 0.25);
    pointer-events: none;
}

.gl-tip[hidden] {
    display: none;
}

.gl-tip-title {
    margin: 0 0 0.375rem;
    color: #C9D6E8;
    font-weight: 500;
}

.gl-tip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gl-tip-row strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gl-tip-row span {
    color: #C9D6E8;
}

.gl-tip-key {
    width: 12px;
    height: 3px;
    flex: none;
    border-radius: 2px;
}

.gl-tip-key:empty:not([class*="gl-series"]) {
    background: transparent;
}

/* =====================================================================
   Editable site content (Website in the admin)
   Only used when an admin turns something on or leaves an image out, so
   the site looks as before until then.
   ===================================================================== */

/* Announcement banner above the header: a solid band in blue (news) or amber
   (service interruptions) with a label, the message, an optional link button and
   a close button. Closing hides that announcement for the visitor (site.js). */
.gl-site-banner {
    --banner-bg: var(--gl-blue);
    --banner-text: #FFFFFF;
    --banner-soft: rgba(255, 255, 255, 0.16);
    --banner-soft-hover: rgba(255, 255, 255, 0.26);
    --banner-button-bg: #FFFFFF;
    --banner-button-text: var(--gl-navy);
    --banner-button-hover: #E6EEF8;
    position: relative;
    background: var(--banner-bg);
    color: var(--banner-text);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.gl-site-banner.is-info {
    background: linear-gradient(90deg, #17549B 0%, var(--gl-blue) 45%, #2368B8 100%);
}

.gl-site-banner.is-warning {
    --banner-bg: #F4B63F;
    --banner-text: #2E1D00;
    --banner-soft: rgba(46, 29, 0, 0.1);
    --banner-soft-hover: rgba(46, 29, 0, 0.18);
    --banner-button-bg: #2E1D00;
    --banner-button-text: #FFFFFF;
    --banner-button-hover: #4A3205;
    background: linear-gradient(90deg, #F2AE2E 0%, #F4B63F 50%, #F6C05A 100%);
}

.gl-banner-closed .gl-site-banner {
    display: none;
}

.gl-site-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 56px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.gl-site-banner-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--banner-soft);
    font-size: 0.9375rem;
}

.gl-site-banner-text {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: 500;
}

.gl-site-banner-label {
    flex: none;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--banner-soft);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gl-site-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    min-height: 2rem;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    background: var(--banner-button-bg);
    color: var(--banner-button-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.gl-site-banner-link:hover {
    background: var(--banner-button-hover);
    color: var(--banner-button-text);
}

.gl-site-banner-link .bi {
    font-size: 0.8125rem;
}

.gl-site-banner-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
}

.gl-site-banner-close:hover {
    background: var(--banner-soft-hover);
}

.gl-site-banner :focus-visible {
    outline: 2px solid var(--banner-text);
    outline-offset: 2px;
}

/* Phones: icon, text and close on top; the link button under the text */
@media (max-width: 575.98px) {
    .gl-site-banner-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.5rem 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .gl-site-banner-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8125rem;
    }

    .gl-site-banner-text {
        grid-column: 2;
        padding-top: 0.125rem;
    }

    .gl-site-banner-text {
        display: block;
    }

    .gl-site-banner-label {
        display: table;
        margin: 0 0 0.25rem;
    }

    .gl-site-banner-link {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .gl-site-banner-close {
        grid-column: 3;
        grid-row: 1;
        margin-top: -0.375rem;
    }
}

/* The live preview under Website > Home page */
.gl-banner-preview {
    overflow: hidden;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius-sm);
}

.gl-banner-preview .gl-site-wrap {
    padding: 0 1rem;
}

.gl-banner-preview .gl-site-banner-close {
    margin-right: -0.25rem;
}

.gl-banner-preview.is-off .gl-site-banner {
    opacity: 0.45;
    filter: grayscale(0.6);
}

/* Payment method without a logo */
.gl-pay-method-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-blue-tint);
    color: var(--gl-blue);
    font-size: 1.5rem;
}

/* Service without a photo: a tinted panel with the icon */
.gl-service-media.is-empty {
    background: linear-gradient(135deg, var(--gl-blue-tint), #D3E1F3);
}

.gl-service-media.is-empty .gl-service-icon {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 4.5rem;
    height: 4.5rem;
    transform: translate(-50%, -50%);
    font-size: 2.25rem;
}

/* ---------- Admin: Website section ---------- */

.gl-subnav {
    display: flex;
    gap: 0.25rem;
    margin: -0.5rem 0 1.5rem;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--gl-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.gl-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.875rem;
    margin-bottom: -3px;
    border-bottom: 3px solid transparent;
    color: var(--gl-muted);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.gl-subnav-link:hover {
    color: var(--gl-ink);
}

.gl-subnav-link[aria-current='page'] {
    color: var(--gl-navy);
    border-bottom-color: var(--gl-blue);
}

@media (max-width: 767.98px) {
    .gl-subnav {
        margin-right: -1rem;
        padding-right: 1rem;
    }
}

.gl-form-section-note {
    margin: -0.25rem 0 1rem;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.gl-form-subtitle {
    margin: 1.75rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.gl-point-row + .gl-point-row {
    margin-top: 0.25rem;
}

@media (max-width: 767.98px) {
    .gl-point-row {
        padding-top: 0.75rem;
        border-top: 1px solid var(--gl-line);
    }
}

.gl-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.375rem;
}

.gl-row-actions form {
    margin: 0;
}

.gl-content-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.gl-content-thumb {
    width: 64px;
    height: 40px;
    flex: none;
    border-radius: var(--gl-radius-sm);
    border: 1px solid var(--gl-line);
    object-fit: cover;
    background: var(--gl-paper);
}

.gl-content-thumb.is-square {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.gl-content-thumb.is-large {
    width: 72px;
    height: 72px;
}

.gl-content-thumb.is-icon {
    display: grid;
    place-items: center;
    background: var(--gl-blue-tint);
    color: var(--gl-blue);
    font-size: 1.125rem;
}

.gl-form-image {
    display: block;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--gl-radius);
    border: 1px solid var(--gl-line);
}

.gl-sharing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .gl-sharing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-sharing-image {
    display: block;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: var(--gl-radius);
    border: 1px solid var(--gl-line);
}

.gl-serp {
    display: grid;
    gap: 0.125rem;
    font-family: Arial, sans-serif;
}

.gl-serp-url {
    color: #202124;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.gl-serp-title {
    color: #1A0DAB;
    font-size: 1.1875rem;
    line-height: 1.3;
}

.gl-serp-text {
    color: #4D5156;
    font-size: 0.875rem;
    line-height: 1.5;
}

.gl-fbcard {
    overflow: hidden;
    border: 1px solid #DADDE1;
    border-radius: var(--gl-radius-sm);
    background: #F0F2F5;
}

.gl-fbcard img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.gl-fbcard div {
    display: grid;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
}

.gl-fbcard-url {
    color: #65676B;
    font-size: 0.75rem;
}

.gl-fbcard-title {
    color: #050505;
    font-weight: 600;
    line-height: 1.3;
}

/* Website lists keep their move and edit buttons on phones (the row menu still sits top right). */
.gl-table-stack td.actions.gl-content-actions {
    height: auto;
    margin-top: 0;
}

/* =====================================================================
   Invitations: the invite link on the Account page, the waiting list,
   and the public "Set up your account" page.
   ===================================================================== */

.gl-alert-warning {
    background: var(--gl-balance-tint);
    border-color: #EBCF9F;
    color: #6E4000;
}

.gl-invite-link {
    margin: -0.5rem 0 1.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius-sm);
    background: #FFFFFF;
}

.gl-invite-link .form-control {
    font-size: 0.9375rem;
    background: var(--gl-paper);
}


.gl-panel-subhead {
    padding: 1.25rem 1.5rem 0.75rem;
    border-top: 1px solid var(--gl-line);
}

.gl-panel-subhead p {
    margin: 0.125rem 0 0;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

@media (max-width: 575.98px) {
    .gl-panel-subhead {
        padding: 1rem 1.125rem 0.5rem;
    }
}

.gl-role-options {
    display: grid;
    gap: 0.625rem;
}

.gl-invite-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-bottom: 0.875rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--gl-blue-tint);
    color: var(--gl-blue);
    font-size: 0.8125rem;
    font-weight: 600;
}

.gl-invite-email {
    position: relative;
}

.gl-invite-email .bi {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gl-muted);
    pointer-events: none;
}

.gl-invite-email .form-control {
    padding-left: 2.5rem;
    background: var(--gl-paper);
    color: var(--gl-ink);
    font-weight: 500;
}

.gl-password-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.gl-password-rules li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gl-password-rules li.is-met {
    color: var(--gl-paid);
}

.gl-invite-state {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--gl-blue-tint);
    color: var(--gl-blue);
    font-size: 1.5rem;
}

/* A label with a link on the right, e.g. Password and "Forgot password?" */
.gl-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.gl-label-link {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* An extra action inside a dialog, between the form and the footer */
.gl-modal-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 var(--bs-modal-padding, 1rem);
    padding: 1rem 0;
    border-top: 1px solid var(--gl-line);
}

.gl-modal-section-title {
    margin: 0 0 0.125rem;
    font-weight: 500;
}


@media (max-width: 575.98px) {
    .gl-modal-section {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Backups panel on the Account page */
.gl-backup-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    border-bottom: 1px solid var(--gl-line);
}

.gl-backup-status {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.gl-backup-status .bi {
    font-size: 1.25rem;
    line-height: 1.3;
}

.gl-backup-status.is-ok .bi { color: var(--gl-paid); }
.gl-backup-status.is-warning .bi { color: var(--gl-balance); }
.gl-backup-status.is-muted .bi { color: var(--gl-muted); }

.gl-backup-status strong {
    display: block;
    font-weight: 500;
}

.gl-backup-status span {
    display: block;
    color: var(--gl-muted);
    font-size: 0.9375rem;
}

.gl-backup-status.is-warning strong {
    color: var(--gl-balance);
}


/* Button inside a success alert, e.g. "Print receipt" */
.gl-alert-action {
    margin-left: auto;
    flex: none;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .gl-alert:has(.gl-alert-action) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gl-alert-action {
        grid-column: 2;
        justify-self: start;
        margin-left: 0;
    }
}

/* Transactions: date range and method filter, and the total of what's shown */
.gl-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.gl-filter-row .gl-filter-field {
    display: grid;
    gap: 0.25rem;
}

.gl-filter-row .gl-filter-field .form-label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gl-muted);
}

.gl-filter-row .form-control,
.gl-filter-row .form-select {
    width: auto;
    min-width: 10.5rem;
}

.gl-filter-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.gl-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gl-line);
}

.gl-summary-bar strong {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gl-navy);
}

.gl-summary-bar span {
    color: var(--gl-muted);
}

@media (max-width: 575.98px) {
    .gl-filter-row .gl-filter-field,
    .gl-filter-row .form-control,
    .gl-filter-row .form-select {
        width: 100%;
    }

    .gl-filter-row .gl-filter-field {
        flex: 1 1 100%;
    }

    .gl-summary-bar {
        padding: 0.875rem 1.125rem;
    }
}

/* =====================================================================
   Printable payment receipt (payments/receipt). One page, A5 or A4.
   ===================================================================== */

.gl-receipt-page {
    background: var(--gl-paper);
    color: var(--gl-ink);
    padding: 1.5rem 1rem 3rem;
}

.gl-receipt-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 640px;
    margin: 0 auto 1rem;
}

.gl-receipt {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem;
    background: #FFFFFF;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius);
}

.gl-receipt-head {
    display: grid;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gl-navy);
}

.gl-receipt-brand {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.gl-receipt-brand img {
    width: 44px;
    height: auto;
}

.gl-receipt-brand strong,
.gl-receipt-number h1 {
    display: block;
    color: var(--gl-navy);
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}

.gl-receipt-brand span,
.gl-receipt-number span {
    display: block;
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.gl-receipt-number {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.gl-receipt-number h1 {
    flex: 1 1 100%;
}

.gl-receipt-number span {
    color: var(--gl-ink);
}

.gl-receipt-number h1 {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.9375rem;
}

.gl-receipt-number strong {
    color: var(--gl-ink);
    font-variant-numeric: tabular-nums;
}

.gl-receipt-amount {
    position: relative;
    display: grid;
    gap: 0.125rem;
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-blue-tint);
}

.gl-receipt-label,
.gl-receipt-grid dt {
    color: var(--gl-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gl-receipt-amount strong {
    color: var(--gl-navy);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gl-receipt-words {
    font-size: 0.9375rem;
    font-style: italic;
}

.gl-receipt-stamp {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--gl-paid);
    border-radius: var(--gl-radius-sm);
    color: var(--gl-paid);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transform: rotate(-4deg);
}

.gl-receipt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin: 0 0 1.5rem;
}

.gl-receipt-grid .is-wide {
    grid-column: 1 / -1;
}

.gl-receipt-grid dd {
    margin: 0.125rem 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.gl-receipt-table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.gl-receipt-table caption {
    caption-side: top;
    padding: 0 0 0.5rem;
    color: var(--gl-navy);
    font-weight: 600;
}

.gl-receipt-table th,
.gl-receipt-table td {
    padding: 0.5rem 0;
    border-top: 1px solid var(--gl-line);
}

.gl-receipt-table th {
    font-weight: 400;
    color: var(--gl-muted);
}

.gl-receipt-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gl-receipt-table .is-total th,
.gl-receipt-table .is-total td {
    border-top: 2px solid var(--gl-ink);
    color: var(--gl-ink);
    font-weight: 600;
}

.gl-receipt-sign {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.gl-receipt-sign > div {
    width: 14rem;
    text-align: center;
    color: var(--gl-muted);
    font-size: 0.8125rem;
}

.gl-receipt-line {
    display: block;
    height: 2.5rem;
    border-bottom: 1px solid var(--gl-ink);
    margin-bottom: 0.25rem;
}

.gl-receipt-foot {
    padding-top: 1rem;
    border-top: 1px dashed var(--gl-line);
    color: var(--gl-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.gl-receipt-foot p {
    margin: 0 0 0.25rem;
}

@media (max-width: 575.98px) {
    .gl-receipt-page {
        padding: 1rem 0.75rem 2rem;
    }

    .gl-receipt {
        padding: 1.25rem;
    }

    .gl-receipt-grid {
        grid-template-columns: 1fr;
    }

    .gl-receipt-stamp {
        position: static;
        justify-self: start;
        margin-top: 0.5rem;
    }
}

@media print {
    @page {
        margin: 10mm;
    }

    /* Everything is sized in rem, so this shrinks the whole receipt to fit a half sheet */
    html:has(.gl-receipt-page) {
        font-size: 12.5px;
    }

    .gl-receipt-page {
        background: #FFFFFF;
        padding: 0;
    }

    .gl-receipt-toolbar {
        display: none;
    }

    .gl-receipt {
        max-width: none;
        border: 0;
        padding: 0;
    }

    .gl-receipt-amount {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        margin: 1rem 0;
        padding: 0.875rem 1.125rem;
    }

    /* Fits on one half sheet (A5) as well as A4 or Letter */
    .gl-receipt {
        font-size: 0.875rem;
    }

    .gl-receipt-amount strong {
        font-size: 1.625rem;
    }

    .gl-receipt-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1.25rem;
        margin-bottom: 1rem;
    }

    .gl-receipt-stamp {
        position: absolute;
        margin: 0;
    }

    .gl-receipt-table {
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .gl-receipt-table th,
    .gl-receipt-table td {
        padding: 0.3rem 0;
    }

    .gl-receipt-sign {
        margin-bottom: 0.75rem;
    }

    .gl-receipt-line {
        height: 1.75rem;
    }

    .gl-receipt-foot {
        padding-top: 0.5rem;
    }
}

/* A toolbar with the search on one line and more filters under it */
.gl-toolbar-stack {
    flex-direction: column;
    align-items: stretch;
}

.gl-toolbar-stack .gl-search {
    flex: none;
    max-width: 26rem;
}

/* ---------- Admin: Website > Plans ---------- */
.gl-plans-admin + .gl-plans-admin {
    margin-top: 1.5rem;
}

.gl-plan-cards-admin {
    padding: 1rem 1.25rem 1.25rem;
    border-bottom: 1px solid var(--gl-line);
    background: var(--gl-paper);
}

.gl-plan-cards-admin .gl-h3 {
    margin-bottom: 0.75rem;
}

.gl-plan-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-plan-card-list li {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 280px;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-radius);
    background: var(--gl-surface);
}

.gl-plan-card-list li.is-featured {
    border-color: var(--gl-navy);
    background: var(--gl-navy);
    color: #FFFFFF;
}

.gl-plan-card-list li.is-off {
    opacity: 0.6;
    border-style: dashed;
}

.gl-plan-card-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.gl-plan-card-list-body strong {
    font-size: 1.0625rem;
}

.gl-plan-card-list-body span {
    color: var(--gl-muted);
    font-size: 0.875rem;
}

.gl-plan-card-list li.is-featured .gl-plan-card-list-body span {
    color: var(--gl-navy-text);
}

.gl-plan-card-list .gl-plan-card-list-badge {
    align-self: flex-start;
    margin-bottom: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: var(--gl-blue);
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 600;
}

.gl-plan-card-list-move {
    display: flex;
    gap: 0.25rem;
    flex: none;
}

.gl-plan-card-list-move form {
    margin: 0;
}

.gl-plan-card-list li.is-featured .gl-icon-btn {
    --bs-btn-bg: transparent;
    --bs-btn-color: #FFFFFF;
    --bs-btn-border-color: rgba(201, 214, 232, 0.5);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-border-color: rgba(201, 214, 232, 0.5);
    background: transparent;
    color: #FFFFFF;
}

.gl-plan-card-list li.is-featured .gl-icon-btn:disabled {
    opacity: 0.35;
}

@media (max-width: 575.98px) {
    .gl-plan-card-list li {
        max-width: none;
    }
}

/* ---------- Admin on phones: final touches ---------- */
@media (max-width: 575.98px) {
    /* Page buttons share the row evenly instead of leaving a ragged edge */
    .gl-page-header {
        gap: 0.75rem;
    }

    .gl-page-actions {
        width: 100%;
    }

    .gl-page-actions > .btn,
    .gl-page-actions > form,
    .gl-page-actions > .dropdown {
        flex: 1 1 auto;
    }

    .gl-page-actions > form > .btn,
    .gl-page-actions > .dropdown > .btn {
        width: 100%;
    }

    /* Dialog buttons fill each row; the main action gets a full-width row when they don't fit */
    .modal-footer {
        gap: 0.5rem;
    }

    .modal-footer > * {
        margin: 0;
    }

    .modal-footer > .btn,
    .modal-footer > form {
        flex: 1 1 auto;
    }

    .modal-footer > form > .btn {
        width: 100%;
    }

    .modal-footer > .me-auto {
        margin-right: 0 !important;
    }

    /* Dialogs use the whole width, with room to scroll past the keyboard */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }
}

/* Names in tables that open a bill are easy to tap on touch screens */
@media (pointer: coarse) {
    .gl-table .btn-link.gl-row-title {
        min-height: 36px;
    }
}

/* =====================================================================
   Public site on phones: a calmer scale. Smaller headings and body text,
   less padding, shorter photos. Form fields stay at 16px or more so
   phones don't zoom in when they're tapped.
   ===================================================================== */
@media (max-width: 575.98px) {
    .gl-site {
        font-size: 0.9375rem;
    }

    /* Header */
    .gl-site-header-inner {
        min-height: 64px;
    }

    .gl-site-header .gl-brand-mark {
        width: 36px;
        height: 36px;
    }

    .gl-site-header .gl-brand-name {
        font-size: 1rem;
    }

    .gl-site-header .gl-brand-sub {
        font-size: 0.75rem;
    }

    .gl-menu-button {
        min-height: 40px;
        font-size: 0.9375rem;
    }

    /* Hero */
    .gl-hero {
        padding: 1.75rem 0 5.5rem;
    }

    .gl-hero-eyebrow {
        font-size: 0.8125rem;
        margin-bottom: 1rem;
    }

    .gl-hero-title {
        font-size: 2rem;
        line-height: 1.08;
        margin-bottom: 0.875rem;
    }

    .gl-hero-text {
        font-size: 0.9375rem;
        line-height: 1.55;
        margin-bottom: 1.5rem;
    }

    .gl-hero .btn {
        min-height: 46px;
        font-size: 1rem;
    }

    .gl-hero-points {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.75rem;
        padding-top: 1.25rem;
    }

    .gl-hero-points .bi {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .gl-hero-points strong {
        font-size: 0.875rem;
    }

    .gl-hero-points span {
        font-size: 0.8125rem;
    }

    .gl-speed-card {
        padding: 1.25rem 1rem 1rem;
    }

    .gl-gauge {
        max-width: 200px;
        margin-bottom: 1rem;
    }

    .gl-speed-title {
        font-size: 1rem;
    }

    /* Bill check */
    .gl-billcheck-panel {
        padding: 1.25rem 1rem;
    }

    .gl-billcheck-title {
        font-size: 1.0625rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    #lookupQuery {
        font-size: 1.0625rem;
    }

    .gl-lookup-help {
        font-size: 0.8125rem;
    }

    .gl-billcheck-intro {
        padding: 1rem;
    }

    .gl-billcheck-intro p {
        font-size: 0.875rem;
    }

    /* Sections */
    .gl-site-section {
        padding: 2.75rem 0 2.5rem;
    }

    .gl-section-head {
        margin-bottom: 1.5rem;
    }

    .gl-section-title {
        font-size: 1.375rem;
    }

    .gl-section-head p {
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .gl-section-eyebrow {
        font-size: 0.75rem;
    }

    /* Plans */
    .gl-plan-heading {
        font-size: 1.0625rem;
        margin-bottom: 0.75rem;
    }

    .gl-plan-cards {
        gap: 0.75rem;
    }

    .gl-plan-card {
        padding: 1rem;
    }

    .gl-plan-name {
        font-size: 0.875rem;
    }

    .gl-plan-speed-num {
        font-size: 1.625rem;
    }

    .gl-plan-amount {
        font-size: 1rem;
    }

    .gl-plan-meter {
        margin: 0.625rem 0 0.75rem;
    }

    .gl-plan-card .btn {
        min-height: 40px;
        font-size: 0.9375rem;
    }

    .gl-plan-more {
        margin-top: 1.5rem;
        font-size: 0.875rem;
    }

    /* Services */
    .gl-services {
        gap: 1rem;
    }

    .gl-service-media {
        aspect-ratio: 16 / 9;
    }

    .gl-service-body {
        padding: 1rem;
    }

    .gl-service-title {
        font-size: 1.0625rem;
    }

    .gl-service-body p {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    .gl-service-tags {
        margin-bottom: 1rem;
    }

    .gl-service-tags li {
        font-size: 0.75rem;
        padding: 0.1875rem 0.625rem;
    }

    .gl-service .btn {
        min-height: 40px;
        font-size: 0.9375rem;
    }

    .gl-services-band {
        padding: 1.25rem 1rem;
        margin-top: 1.5rem;
    }

    /* How to pay */
    .gl-pay-method {
        padding: 1rem;
    }

    .gl-pay-method-number {
        font-size: 1.0625rem;
    }

    .gl-steps li {
        font-size: 0.875rem;
    }

    /* Questions */
    .gl-faq summary {
        font-size: 0.9375rem;
        padding: 0.75rem 0;
    }

    .gl-faq details p {
        font-size: 0.875rem;
        line-height: 1.55;
        margin-bottom: 1rem;
    }

    /* Contact and footer */
    #contact {
        padding: 2.5rem 0;
    }

    .gl-site-footer {
        font-size: 0.875rem;
        padding-top: 2.5rem;
    }

    .gl-footer-wordmark {
        font-size: 1.25rem;
    }

    /* Large buttons at a normal size: they're full width already */
    .gl-site .btn-lg {
        min-height: 46px;
        font-size: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .gl-contact {
        font-size: 0.9375rem;
    }
}

/* =====================================================================
   Public site motion. Everything here is switched off for visitors who
   ask their device for reduced motion, and content is never hidden
   unless the script that reveals it is running (html.gl-motion).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.gl-site) {
        scroll-behavior: smooth;
    }

    @keyframes gl-rise {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes gl-drop {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }

    /* Hero: the copy and the gauge card come in one after another on load */
    .gl-hero-copy > *,
    .gl-speed-card {
        animation: gl-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .gl-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
    .gl-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
    .gl-hero-copy > :nth-child(4) { animation-delay: 0.18s; }
    .gl-hero-copy > :nth-child(5) { animation-delay: 0.24s; }
    .gl-speed-card { animation-delay: 0.2s; }

    .gl-billcheck-panel {
        animation: gl-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    }

    /* Sections fade up as they scroll into view (see initReveal in site.js) */
    .gl-motion [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--gl-reveal-delay, 0s);
    }

    .gl-motion [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }

    /* A checked bill's statement and the FAQ answers ease in */
    [data-statement]:not([hidden]) {
        animation: gl-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .gl-faq-item[open] p {
        animation: gl-drop 0.25s ease both;
    }

    /* Hover feedback */
    .gl-site .btn {
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .gl-site .btn:active {
        transform: translateY(1px);
    }

    .gl-plan-card {
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .gl-plan-card:hover {
        transform: translateY(-2px);
    }

    .gl-pay-method {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .gl-pay-method:hover {
        box-shadow: 0 6px 18px rgba(10, 45, 87, 0.08);
    }

    .gl-site-nav a,
    .gl-site-footer a {
        transition: color 0.15s ease, background-color 0.15s ease;
    }
}

/* Phone menu slides down instead of appearing at once */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .gl-site-nav {
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .gl-site-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }
}