/* ===========================================================================
   Crop Schedule UI: account
   /Asserts/Main/cs-account.css

   Preferences.aspx, Notifications.aspx, Contact.aspx, Account.aspx
   (Manage account), Login.aspx (Sign in) with PasswordReset.aspx and
   Register.aspx, About.aspx, and the four legal pages. Loads after
   cs-core.css.

   The pref- names are aliases of the house rules and those aliases live in
   cs-core.css beside the rules they alias, so only the three genuine
   Preferences overrides are here, then a section each for Notifications,
   Contact us and Manage account.

   .pref-card below redefines a cs-core.css rule of the same specificity, so
   it wins on source order and core has to load first.

   .pref-wrap stayed in cs-core.css deliberately: its padding is overridden
   again inside core's max-width 640 media query, and moving the base rule
   here would put it after that media query and undo it on a phone.
   =========================================================================== */

/* Preferences is a form, so it reads better in a narrower column than a
   dashboard does. */

.pref-card {
    border-radius: 10px;
    height: 100%;
}

.pref-farm {
    margin-bottom: 18px;
}

.pref-select {
    width: 100%;
    max-width: 340px;
    height: 36px;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--cs-field-border);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    color: var(--cs-ink);
}

/* ---------------------------------------------------------------------------
   Messages

   .cs-note in core is the amber advisory. A save reports in green or red
   beside it. Two classes, so these win on specificity, not load order.
   --------------------------------------------------------------------------- */

.cs-note.is-ok {
    color: #23663F;
    background: #EEF8F1;
    border-color: #CBE8D5;
}

.cs-note.is-error {
    color: #9B2C20;
    background: #FDF1EF;
    border-color: #F2CFC9;
}

/* A number box the server refused. (0,2,1), level with core's focus rule, so
   source order decides and this sheet loads after core. */
.pref-field input.is-invalid {
    border-color: var(--cs-state-bad);
}

/* ---------------------------------------------------------------------------
   Notifications: Setup

   One row per alert: what it is, how it reaches you, its settings. Three
   columns on a wide screen, one stacked block on a phone, so no header row
   is needed: every channel box carries its own label.
   --------------------------------------------------------------------------- */

.cs-notif-group {
    margin-top: 24px;
}

.cs-notif-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(280px, 1.1fr);
    gap: 12px 28px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--cs-line-soft);
}

.cs-notif-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cs-ink);
    line-height: 1.4;
}

.cs-notif-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--cs-ink-muted);
    margin-top: 2px;
}

.cs-notif-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* An asp:CheckBox with a CssClass renders a span around the input and its
   label, so the span is the chip and the whole of it is clickable. */
.cs-notif-ch {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--cs-field-border);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    font-size: 13px;
    white-space: nowrap;
}

    .cs-notif-ch input {
        margin: 0 7px 0 0;
        cursor: pointer;
    }

    .cs-notif-ch label {
        margin: 0;
        cursor: pointer;
        color: var(--cs-ink);
    }

    /* On is a light tint and a darker edge, not a fill: most rows are mostly
       off, and the chips should not outshout the settings beside them. */
    .cs-notif-ch:has(input:checked) {
        background: var(--cs-surface-sunk);
        border-color: #B9BEC6;
    }

    .cs-notif-ch:has(input:disabled) {
        opacity: 0.45;
    }

        .cs-notif-ch:has(input:disabled) input,
        .cs-notif-ch:has(input:disabled) label {
            cursor: not-allowed;
        }

.cs-notif-settings .pref-field {
    margin-bottom: 6px;
}

    .cs-notif-settings .pref-field:last-child {
        margin-bottom: 0;
    }

    /* "Don't repeat within" does not fit core's 90px label column. */
    .cs-notif-settings .pref-field label {
        flex-basis: 136px;
    }

/* Every channel off: the settings stay editable, they just say they are not
   in use. They are saved as empty. */
.cs-notif-row.is-off .cs-notif-settings {
    opacity: 0.45;
}

.cs-notif-none {
    font-size: 12px;
    line-height: 32px;
    color: var(--cs-ink-muted);
}

@media (max-width: 760px) {
    .cs-notif-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ---------------------------------------------------------------------------
   Notifications: My notifications

   A list rather than bubbles: newest first, one line of meta, then the text.
   Nothing is coloured but New, the one thing worth finding on the page.
   --------------------------------------------------------------------------- */

.cs-notif-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cs-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-notif-item {
    padding: 14px 20px;
    border-top: 1px solid var(--cs-line-soft);
}

    .cs-notif-item:first-child {
        border-top: none;
    }

.cs-notif-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 6px;
}

.cs-notif-type {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-label);
}

.cs-notif-new {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--cs-link);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.6;
}

.cs-notif-farm,
.cs-notif-time {
    font-size: 12px;
    color: var(--cs-ink-muted);
}

.cs-notif-time {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cs-notif-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cs-ink);
}

    /* A warning from spWarning: the code-behind turns its commas into line
       breaks and this keeps them. pre-line also drops the space after each
       comma at the start of the new line. */
    .cs-notif-body.is-text {
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

.cs-notif-empty,
.cs-notif-foot {
    padding: 22px 20px;
    font-size: 13px;
    color: var(--cs-ink-muted);
}

.cs-notif-foot {
    padding: 10px 20px 14px;
    font-size: 12px;
    border-top: 1px solid var(--cs-line-soft);
}

/* hidden is set by the page script; a display rule on the class would undo
   it, so say it outright. */
.cs-notif-empty[hidden],
.cs-notif-list[hidden],
.cs-notif-item[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .cs-notif-item {
        padding: 12px 14px;
    }

    .cs-notif-time {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   Contact us

   A form card and a details card side by side, stacked on a phone. The page
   still loads Bootstrap 3, which makes every label bold and gives it a
   bottom margin, so the field rules say weight and margin outright.
   --------------------------------------------------------------------------- */

.cs-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 860px) {
    .cs-contact-grid {
        grid-template-columns: 1fr;
    }
}

.cs-contact-field {
    margin-bottom: 16px;
}

    .cs-contact-field label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--cs-ink);
        margin: 0 0 6px;
    }

    .cs-contact-field input,
    .cs-contact-field textarea {
        display: block;
        width: 100%;
        max-width: 460px;
        height: 36px;
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        background: var(--cs-surface);
        color: var(--cs-ink);
        box-shadow: none;
    }

    .cs-contact-field textarea {
        max-width: none;
        height: auto;
        min-height: 190px;
        line-height: 1.5;
        resize: vertical;
    }

        .cs-contact-field input:focus,
        .cs-contact-field textarea:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

        .cs-contact-field input.is-invalid,
        .cs-contact-field textarea.is-invalid {
            border-color: var(--cs-state-bad);
        }

/* The label row carries the counter on the right, so the count reads as part
   of the field rather than a stray line under it. */
.cs-contact-labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    max-width: none;
}

    .cs-contact-labelrow label {
        margin-bottom: 6px;
    }

.cs-contact-count {
    font-size: 12px;
    color: var(--cs-ink-muted);
    font-variant-numeric: tabular-nums;
}

    .cs-contact-count.is-over {
        color: var(--cs-state-bad);
        font-weight: 600;
    }

.cs-contact-again {
    font-size: 13px;
    font-weight: 500;
    color: var(--cs-link);
    text-decoration: none;
}

    .cs-contact-again:hover {
        text-decoration: underline;
    }

/* Bootstrap 3 bolds dt and pads dl, so both are said outright. */
.cs-contact-details {
    margin: 0;
}

    .cs-contact-details dt {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--cs-ink-faint);
        margin: 0 0 3px;
    }

    .cs-contact-details dd {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--cs-ink);
        margin: 0 0 16px;
    }

        .cs-contact-details dd:last-child {
            margin-bottom: 0;
        }

    .cs-contact-details a {
        color: var(--cs-link);
        text-decoration: none;
    }

        .cs-contact-details a:hover {
            text-decoration: underline;
        }

/* ---------------------------------------------------------------------------
   Manage account

   A header card (photo, name, email, farms), then four tabs. Every name is
   cs-acct- on purpose, the map's included: .cs-map, .cs-osm-* and .cs-flash
   already live in cs-admin.css and cs-devicesetup.css, and a third copy
   would be the one that forces the promotion into cs-core.css (CS-CORE.md,
   "Three rules bent twice"). These are this page's own and collide with
   nothing.

   The page loads Bootstrap 4, which gives every label a bottom margin and
   every input its own idea of a border, so the field rules say both outright.
   --------------------------------------------------------------------------- */

.cs-acct [hidden],
.cs-acct-crop[hidden] {
    display: none !important;
}

/* Header */

.cs-acct-head {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
    margin-bottom: 4px;
}

.cs-acct-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cs-surface-sunk);
    box-shadow: 0 0 0 1px var(--cs-line);
    flex: 0 0 auto;
}

    .cs-acct-avatar img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

        .cs-acct-avatar img.is-hidden {
            display: none;
        }

.cs-acct-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cs-link);
    background: #E7E9F3;
}

.cs-acct-who {
    min-width: 0;
    flex: 1 1 auto;
}

.cs-acct-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--cs-ink-strong);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cs-acct-email {
    font-size: 13px;
    color: var(--cs-label);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

.cs-acct-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
    color: var(--cs-ink-muted);
    margin-top: 6px;
}

    .cs-acct-meta:empty {
        display: none;
    }

.cs-acct-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cs-surface-sunk);
    color: var(--cs-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cs-acct-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
}

    .cs-acct-photo-actions .cs-btn {
        margin-right: 0;
    }

.cs-acct-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--cs-link);
    text-decoration: none;
}

    .cs-acct-link:hover {
        text-decoration: underline;
        color: var(--cs-link);
    }

/* Success messages fade out after a few seconds (cs-manage-account.js). */
.cs-acct .cs-note.is-ok {
    transition: opacity 0.4s ease;
}

    .cs-acct .cs-note.is-ok.is-fading {
        opacity: 0;
    }

.cs-acct-who .cs-note {
    margin: 12px 0 0;
    max-width: 520px;
}

@media (max-width: 560px) {
    .cs-acct-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
    }
}

/* Cards and fields */

.cs-acct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

.cs-acct-narrow {
    max-width: 640px;
}

.cs-acct-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.cs-acct-field {
    margin-bottom: 16px;
    min-width: 0;
}

    .cs-acct-field label,
    .cs-acct-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--cs-ink);
        margin: 0 0 6px;
    }

    .cs-acct-field input[type="text"],
    .cs-acct-field input[type="email"],
    .cs-acct-field input[type="tel"],
    .cs-acct-field input[type="password"],
    .cs-acct-field input:not([type]),
    .cs-acct-field select {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 420px;
        height: 36px;
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        background: var(--cs-surface);
        color: var(--cs-ink);
        box-shadow: none;
    }

        .cs-acct-field input:focus,
        .cs-acct-field select:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

        .cs-acct-field input:disabled,
        .cs-acct-field select:disabled {
            background: var(--cs-surface-alt);
            color: var(--cs-label);
            cursor: not-allowed;
        }

        .cs-acct-field input.is-invalid,
        .cs-acct-field select.is-invalid {
            border-color: var(--cs-state-bad);
        }

    .cs-acct-field input.cs-acct-short {
        max-width: 140px;
    }

    /* select2 writes its own inline width; this only caps it. */
    .cs-acct-field .select2-container {
        max-width: 420px;
    }

.cs-acct-static {
    font-size: 13.5px;
    color: var(--cs-ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cs-acct-help {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cs-ink-muted);
    margin: 6px 0 0;
    max-width: 520px;
}

    .cs-acct-help a {
        color: var(--cs-link);
    }

    .cs-acct-help.is-warn {
        color: #7A5B12;
    }

.cs-acct-empty {
    font-size: 13px;
    line-height: 1.5;
    color: var(--cs-label);
    margin: 0 0 4px;
}

/* Telegram */

.cs-acct-telegram {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.cs-acct-qr-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.cs-acct-qr {
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    border: 1px solid var(--cs-line);
    border-radius: 10px;
    padding: 6px;
    background: #fff;
}

.cs-acct-qr-btn:hover .cs-acct-qr,
.cs-acct-qr-btn:focus-visible .cs-acct-qr {
    border-color: #B9BEC6;
    box-shadow: var(--cs-shadow-raised);
}

.cs-acct-qr-hint {
    font-size: 11.5px;
    color: var(--cs-link);
}

/* The enlarged code: as big as the screen allows, up to 420px. */
.cs-acct-qr-box {
    max-width: 480px;
    text-align: center;
}

.cs-acct-qr-large {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    image-rendering: auto;
}

.cs-acct-qr-box .cs-acct-help {
    max-width: none;
    margin-top: 12px;
}

.cs-acct-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cs-ink);
}

    .cs-acct-steps li {
        margin-bottom: 8px;
    }

    .cs-acct-steps a {
        color: var(--cs-link);
    }

@media (max-width: 480px) {
    .cs-acct-telegram {
        flex-direction: column;
    }
}

/* Password */

/* For password managers only. Off screen, not display:none, which some of
   them skip. */
.cs-acct-username {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cs-acct-pass {
    position: relative;
    max-width: 420px;
}

    .cs-acct-pass input,
    .cs-acct-key,
    .cs-acct-map,
    .cs-acct-osm,
    .cs-acct-crop-box {
        box-sizing: border-box;
    }

    .cs-acct-field .cs-acct-pass input {
        padding-right: 64px;
    }

.cs-acct-eye {
    position: absolute;
    top: 4px;
    right: 4px;
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cs-link);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

    .cs-acct-eye:hover {
        background: var(--cs-surface-sunk);
    }

.cs-acct-checks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 12.5px;
    color: var(--cs-ink-muted);
}

    .cs-acct-checks li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 4px;
    }

        .cs-acct-checks li::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 6px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--cs-field-border);
        }

        /* Met: a tick as well as the colour, so it does not rest on colour. */
        .cs-acct-checks li.is-met {
            color: #23663F;
        }

            .cs-acct-checks li.is-met::before {
                content: '\2713';
                top: 0;
                left: 1px;
                width: auto;
                height: auto;
                background: none;
                font-weight: 700;
                color: #23663F;
            }

/* API key */

.cs-acct-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--cs-line);
    border-radius: 8px;
    background: var(--cs-surface-alt);
}

.cs-acct-key-text {
    flex: 1 1 260px;
    min-width: 0;
    font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
    font-size: 13px;
    color: var(--cs-ink-strong);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}

.cs-acct-key-actions {
    display: flex;
    gap: 6px;
}

    .cs-acct-key-actions .cs-btn {
        margin-right: 0;
        padding: 5px 12px;
    }

/* Farm */

.cs-acct-farm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

/* Details and coordinates on the left, the map on the right. On a phone the
   map sits between them, so the numbers it writes are just under it. */
.cs-acct-farm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-areas:
        "top map"
        "bottom map";
    grid-template-rows: auto 1fr;
    gap: 0 28px;
}

.cs-acct-farm-top {
    grid-area: top;
    min-width: 0;
}

.cs-acct-farm-map {
    grid-area: map;
    min-width: 0;
}

.cs-acct-farm-bottom {
    grid-area: bottom;
    min-width: 0;
}

@media (max-width: 900px) {
    .cs-acct-farm {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "top"
            "map"
            "bottom";
        grid-template-rows: auto;
    }

    .cs-acct-farm-map {
        margin-bottom: 16px;
    }
}

.cs-acct-farm-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cs-line-soft);
}

    .cs-acct-farm-summary:empty {
        display: none;
    }

.cs-acct-stat {
    min-width: 0;
}

.cs-acct-stat-sub {
    display: block;
    font-size: 11.5px;
    color: var(--cs-ink-muted);
    margin-top: 1px;
}

.cs-acct-coords {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 12px;
}

    .cs-acct-coords .cs-acct-field input {
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 420px) {
    .cs-acct-coords {
        grid-template-columns: 1fr 1fr;
    }
}

.cs-acct-search {
    position: relative;
    margin-bottom: 10px;
}

.cs-acct-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .cs-acct-search-row input,
    .cs-acct-search-row .cs-acct-place {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cs-acct-search-row input {
        box-sizing: border-box;
        height: 36px;
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        background: var(--cs-surface);
        color: var(--cs-ink);
    }

        .cs-acct-search-row input:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

    .cs-acct-search-row .cs-btn {
        margin-right: 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

/* Google's own element. Its colours come through custom properties. */
.cs-acct-place {
    display: block;
    color-scheme: light;
    --gmpx-color-surface: var(--cs-surface);
    --gmpx-color-on-surface: var(--cs-ink);
    --gmpx-font-family-base: 'Roboto', sans-serif;
}

.cs-acct-map {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--cs-line);
    background: var(--cs-surface-sunk);
}

@media (max-width: 640px) {
    .cs-acct-map {
        height: 320px !important;
    }
}

/* OpenStreetMap results, under the search box, over the map. */
.cs-acct-osm {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--cs-surface);
    border: 1px solid var(--cs-field-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
}

.cs-acct-osm-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--cs-line-soft);
    background: none;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cs-ink);
    cursor: pointer;
}

    .cs-acct-osm-option:hover,
    .cs-acct-osm-option:focus {
        background: var(--cs-surface-sunk);
        outline: none;
    }

.cs-acct-osm-empty,
.cs-acct-osm-credit {
    margin: 0;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--cs-ink-muted);
}

.cs-acct-osm-credit {
    font-size: 11px;
}

/* A number that changes under a pin somebody is dragging. */
@keyframes cs-acct-flash {
    from { background-color: #FFF3C4; }
    to { background-color: var(--cs-surface); }
}

.cs-acct-field input.cs-acct-flash {
    animation: cs-acct-flash 1.2s ease-out;
}

/* Crop dialog */

.cs-acct-noscroll {
    overflow: hidden;
}

.cs-acct-crop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 35, 49, 0.55);
}

.cs-acct-crop-box {
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--cs-surface);
    border-radius: var(--cs-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.25);
    padding: 18px 20px 20px;
    color: var(--cs-ink);
    font-family: 'Roboto', sans-serif;
}

.cs-acct-crop-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-ink-strong);
    margin-bottom: 12px;
}

.cs-acct-crop-stage {
    width: 100%;
    height: 320px;
    border-radius: 8px;
    overflow: hidden;
    background: #1C2331;
}

    .cs-acct-crop-stage img {
        display: block;
        max-width: 100%;
    }

    /* The crop window is a circle, because that is how the photo shows. */
    .cs-acct-crop-stage .cropper-view-box,
    .cs-acct-crop-stage .cropper-face {
        border-radius: 50%;
    }

    .cs-acct-crop-stage .cropper-view-box {
        outline: 2px solid rgba(255, 255, 255, 0.9);
        outline-offset: 0;
    }

.cs-acct-crop-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

    .cs-acct-crop-tools .cs-acct-label {
        margin: 0;
    }

    .cs-acct-crop-tools input[type="range"] {
        flex: 1 1 auto;
        accent-color: var(--cs-ink);
    }

    .cs-acct-crop-tools .cs-btn {
        margin-right: 0;
    }

.cs-acct-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

    .cs-acct-crop-actions .cs-btn {
        margin-right: 0;
    }

/* ---------------------------------------------------------------------------
   Sign in (Login.aspx), and the pages that share its look: Reset password
   (PasswordReset.aspx) and Create an account (Register.aspx)

   The page fills the height between the header and the footer, so the footer
   sits at the bottom as it did before. One card in two halves: the farm on
   the left, the form on the right. On a phone the farm half goes and the
   form has the screen.

   The one piece of motion nobody asked for is the centre pivot turning over
   its circle, and it turns at about the speed a real one would look from
   the air. Everything else moves only when it is used: the tick, the
   spinner, the shake on a refused sign in. All of it stops for people who
   ask their system for less motion.

   nicepage and Login.css style bare elements on this page, so the rules here
   name their elements and say margins and colours outright.
   --------------------------------------------------------------------------- */

.cs-login-page {
    --cs-login-ink: #1C2331;
    --cs-login-navy: #2C367E;
    --cs-login-navy-deep: #222A63;
    --cs-login-crop: #173327;
    --cs-login-leaf: #6CC08D;
    --cs-login-field: #F6F7FA;

    box-sizing: border-box;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 64px;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(44, 54, 126, 0.07), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(108, 192, 141, 0.10), transparent 60%),
        #F4F6F9;
    font-family: 'Roboto', sans-serif;
    color: var(--cs-ink);
}

    .cs-login-page *,
    .cs-login-page *::before,
    .cs-login-page *::after {
        box-sizing: border-box;
    }

    .cs-login-page [hidden] {
        display: none !important;
    }

.cs-login-shell {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 60px -24px rgba(23, 51, 39, 0.30);
    animation: cs-login-arrive 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes cs-login-arrive {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

/* The farm half ------------------------------------------------------------ */

.cs-login-brand {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    padding: 44px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 90% at 100% 100%, #23503B 0%, transparent 60%),
        linear-gradient(160deg, #10241B 0%, var(--cs-login-crop) 55%, #1D4231 100%);
    isolation: isolate;
}

.cs-login-field-art {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* A pivot is a circle of crop seen from the air: rings for the wheel tracks,
   an arm from the centre, and the wetted ground trailing behind the arm. */
.cs-login-pivot {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 5px, transparent 6px),
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0.10) 0 1px, transparent 1.5px 34px),
        radial-gradient(circle, rgba(108, 192, 141, 0.20), rgba(108, 192, 141, 0.06) 70%, transparent 71%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

    .cs-login-pivot i {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(from 0deg,
            rgba(108, 192, 141, 0) 0deg,
            rgba(108, 192, 141, 0.06) 200deg,
            rgba(108, 192, 141, 0.34) 268deg,
            rgba(214, 245, 226, 0.85) 269.5deg,
            rgba(108, 192, 141, 0) 270.5deg);
        animation: cs-login-sweep 40s linear infinite;
    }

.cs-login-pivot-main {
    width: 640px;
    height: 640px;
    right: -250px;
    top: -170px;
}

.cs-login-pivot-far {
    width: 300px;
    height: 300px;
    left: -110px;
    top: 230px;
    opacity: 0.55;
}

    .cs-login-pivot-far i {
        animation-duration: 64s;
        animation-delay: -20s;
    }

@keyframes cs-login-sweep {
    to { transform: rotate(360deg); }
}

.cs-login-brand-text {
    max-width: 360px;
}

.cs-login-page p.cs-login-headline {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.cs-login-page p.cs-login-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.74);
}

/* The form half ------------------------------------------------------------ */

.cs-login-panel {
    padding: 52px 52px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cs-login-page h1.cs-login-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: var(--cs-login-ink) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.cs-login-page p.cs-login-sub {
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--cs-label);
}

.cs-login-panel .cs-note {
    margin-bottom: 20px;
    font-size: 13px;
}

    .cs-login-panel .cs-note.is-error {
        animation: cs-login-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

@keyframes cs-login-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.cs-login-field {
    margin-bottom: 18px;
}

.cs-login-labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

    .cs-login-labelrow label {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--cs-login-ink);
    }

.cs-login-page .cs-login-textbtn {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cs-login-navy);
    text-decoration: none;
    cursor: pointer;
}

    .cs-login-page .cs-login-textbtn:hover {
        color: var(--cs-login-navy-deep);
        text-decoration: underline;
    }

/* An input with its icon inside on the left. */
.cs-login-input {
    position: relative;
}

    .cs-login-input > svg {
        position: absolute;
        left: 14px;
        top: 50%;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        fill: none;
        stroke: #8A919C;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
        transition: stroke 0.15s ease;
    }

    .cs-login-input input {
        display: block;
        width: 100%;
        height: 48px;
        margin: 0;
        padding: 0 46px 0 44px;
        font-family: inherit;
        font-size: 15px;
        color: var(--cs-login-ink);
        background: var(--cs-login-field);
        border: 1.5px solid #E1E4EA;
        border-radius: 12px;
        box-shadow: none;
        outline: none;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }

        .cs-login-input input::placeholder {
            color: #A8AEB8;
        }

        .cs-login-input input:hover {
            border-color: #CBD0D8;
        }

        .cs-login-input input:focus {
            background: #fff;
            border-color: var(--cs-login-navy);
            box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.12);
        }

        .cs-login-input:focus-within > svg {
            stroke: var(--cs-login-navy);
        }

        .cs-login-input input.is-invalid {
            border-color: var(--cs-state-bad);
            background: #FFFBFA;
        }

        /* Chrome paints autofilled boxes pale blue. Painted back to ours. */
        .cs-login-input input:-webkit-autofill,
        .cs-login-input input:-webkit-autofill:hover,
        .cs-login-input input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--cs-login-ink);
            -webkit-box-shadow: 0 0 0 40px #fff inset;
            caret-color: var(--cs-login-ink);
        }

.cs-login-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}

    .cs-login-eye:hover {
        background: #EEF0F4;
    }

    .cs-login-eye:focus-visible {
        outline: 2px solid var(--cs-login-navy);
        outline-offset: 1px;
    }

    .cs-login-eye svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #6B7280;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cs-login-eye .is-hide,
    .cs-login-eye.is-on .is-show {
        display: none;
    }

    .cs-login-eye.is-on .is-hide {
        display: block;
    }

.cs-login-captcha {
    min-height: 78px;
    margin: 4px 0 16px;
}

/* Keep me signed in. The asp:CheckBox renders a span around a box and its
   label; the box is redrawn so it has room and a proper tick. */
.cs-login-keep {
    margin: 4px 0 24px;
}

    .cs-login-keep > span {
        display: inline-flex;
        align-items: center;
    }

.cs-login-page .cs-login-keep input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 11px 0 0;
    padding: 0;
    display: inline-grid;
    place-content: center;
    background: #fff;
    border: 1.5px solid #C2C7D0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cs-login-page .cs-login-keep input[type="checkbox"]::before {
        content: '';
        width: 11px;
        height: 11px;
        background: #fff;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        transform: scale(0);
        transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.6, 1);
    }

    .cs-login-page .cs-login-keep input[type="checkbox"]:hover {
        border-color: var(--cs-login-navy);
    }

    .cs-login-page .cs-login-keep input[type="checkbox"]:checked {
        background: var(--cs-login-navy);
        border-color: var(--cs-login-navy);
    }

        .cs-login-page .cs-login-keep input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

    .cs-login-page .cs-login-keep input[type="checkbox"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.16);
    }

.cs-login-page .cs-login-keep label {
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--cs-ink);
    cursor: pointer;
    user-select: none;
}

/* Sign in button. A link button underneath, dressed as a button; Register's
   Continue is a real button in the same dress. */
.cs-login-page a.cs-login-btn,
.cs-login-page button.cs-login-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(180deg, #34408F 0%, var(--cs-login-navy) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 20px -8px rgba(44, 54, 126, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .cs-login-page button.cs-login-btn {
        border: none;
        font-family: inherit;
        cursor: pointer;
    }

    .cs-login-page a.cs-login-btn:hover,
    .cs-login-page button.cs-login-btn:hover {
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 12px 26px -10px rgba(44, 54, 126, 0.7);
    }

    .cs-login-page a.cs-login-btn:active,
    .cs-login-page button.cs-login-btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 4px 12px -6px rgba(44, 54, 126, 0.6);
    }

    .cs-login-page a.cs-login-btn:focus-visible,
    .cs-login-page button.cs-login-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.25);
    }

.cs-login-spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    opacity: 0;
}

.cs-login-page a.cs-login-btn.is-busy {
    pointer-events: none;
    transform: none;
}

    .cs-login-page a.cs-login-btn.is-busy .cs-login-btn-text {
        opacity: 0;
    }

    .cs-login-page a.cs-login-btn.is-busy .cs-login-spinner {
        opacity: 1;
        animation: cs-login-spin 0.7s linear infinite;
    }

@keyframes cs-login-spin {
    to { transform: rotate(360deg); }
}

.cs-login-page p.cs-login-register {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--cs-line-soft);
    font-size: 13.5px;
    color: var(--cs-label);
}

    .cs-login-page p.cs-login-register a {
        color: var(--cs-login-navy);
        font-weight: 500;
        text-decoration: none;
    }

        .cs-login-page p.cs-login-register a:hover {
            text-decoration: underline;
        }

/* Reset password and Create an account ------------------------------------- */

.cs-login-page p.cs-login-help {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cs-ink-muted);
}

.cs-login-optional {
    font-size: 12px;
    color: var(--cs-ink-muted);
}

.cs-login-page a.cs-login-inline {
    color: var(--cs-login-navy);
    font-weight: 500;
    text-decoration: none;
}

    .cs-login-page a.cs-login-inline:hover {
        text-decoration: underline;
    }

/* A box with no icon. */
.cs-login-input.is-plain input {
    padding-left: 14px;
}

/* The country list, dressed like the boxes. */
.cs-login-input.is-select select {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 38px 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--cs-login-ink);
    background-color: var(--cs-login-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    border: 1.5px solid #E1E4EA;
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

    .cs-login-input.is-select select:focus {
        background-color: #fff;
        border-color: var(--cs-login-navy);
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.12);
    }

.cs-register-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 14px;
}

/* The two steps. Numbered because they are a sequence. */
.cs-login-page ol.cs-register-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

    .cs-register-steps li {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        padding-top: 10px;
        border-top: 3px solid #E6E8EC;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--cs-ink-muted);
        transition: border-color 0.25s ease, color 0.25s ease;
    }

        .cs-register-steps li span {
            display: inline-grid;
            place-items: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #EEF0F4;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--cs-label);
            transition: background-color 0.25s ease, color 0.25s ease;
        }

        .cs-register-steps li.is-current,
        .cs-register-steps li.is-done {
            border-top-color: var(--cs-login-navy);
            color: var(--cs-login-ink);
        }

            .cs-register-steps li.is-current span,
            .cs-register-steps li.is-done span {
                background: var(--cs-login-navy);
                color: #fff;
            }

/* A step slides in as the answer to Continue or Back. */
.cs-login-page [data-step]:not([hidden]) {
    animation: cs-register-step 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes cs-register-step {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: none; }
}

.cs-login-page ul.cs-register-checks {
    margin: 10px 0 0;
}

.cs-login-page button.cs-login-btn-next {
    margin-top: 8px;
}

.cs-register-terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 5px;
}

    .cs-register-terms a {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--cs-login-navy);
        text-decoration: none;
    }

        .cs-register-terms a:hover {
            text-decoration: underline;
        }

.cs-login-page button.cs-register-back {
    display: block;
    margin: 18px 0 0;
}

/* Reset sent */

.cs-login-done-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: #EAF6EF;
    animation: cs-login-mark 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) both;
}

    .cs-login-done-mark svg {
        width: 26px;
        height: 26px;
        fill: none;
        stroke: #23663F;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@keyframes cs-login-mark {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

.cs-login-page ul.cs-login-steps {
    margin: 0 0 26px;
    padding: 0 0 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cs-ink);
}

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

    .cs-login-steps a {
        color: var(--cs-login-navy);
        font-weight: 500;
    }

/* Smaller screens ---------------------------------------------------------- */

@media (max-width: 880px) {
    .cs-login-shell {
        grid-template-columns: minmax(0, 1fr);
        max-width: 460px;
    }

    .cs-login-brand {
        display: none;
    }

    .cs-login-panel {
        padding: 40px 32px 32px;
    }
}

@media (max-width: 480px) {
    .cs-login-page {
        min-height: calc(100vh - 90px);
        align-items: flex-start;
        padding: 20px 12px 40px;
    }

    .cs-login-panel {
        padding: 30px 22px 24px;
    }

    .cs-login-page h1.cs-login-title {
        font-size: 26px !important;
    }
}

@media (max-width: 420px) {
    .cs-register-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-login-page [data-step]:not([hidden]),
    .cs-login-done-mark,
    .cs-login-shell,
    .cs-login-pivot i,
    .cs-login-panel .cs-note.is-error,
    .cs-login-page a.cs-login-btn.is-busy .cs-login-spinner {
        animation: none;
    }

    .cs-login-page a.cs-login-btn,
    .cs-login-page .cs-login-keep input[type="checkbox"]::before {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   About (About.aspx)

   The Sign in page's field and pivot, opened up into a band across the top
   of the page, so the public pages read as one site. The pivot classes come
   from the Sign in section above; only their size and place change here.
   Everything below the band is quiet: two columns of text, a ruled list of
   what the system does, and one way to get in touch.
   --------------------------------------------------------------------------- */

.cs-about {
    --cs-login-ink: #1C2331;
    --cs-login-navy: #2C367E;
    --cs-login-crop: #173327;

    box-sizing: border-box;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 72px;
    font-family: 'Roboto', sans-serif;
    color: var(--cs-ink);
}

    .cs-about *,
    .cs-about *::before,
    .cs-about *::after {
        box-sizing: border-box;
    }

.cs-about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 440px;
    padding: 64px 56px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(120% 90% at 100% 100%, #23503B 0%, transparent 60%),
        linear-gradient(160deg, #10241B 0%, var(--cs-login-crop) 55%, #1D4231 100%);
    box-shadow: 0 24px 60px -30px rgba(23, 51, 39, 0.45);
    animation: cs-login-arrive 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

    .cs-about-hero .cs-login-pivot-main {
        width: 760px;
        height: 760px;
        right: -170px;
        top: -260px;
    }

    .cs-about-hero .cs-login-pivot-far {
        width: 320px;
        height: 320px;
        left: auto;
        right: 470px;
        top: 250px;
        opacity: 0.45;
    }

.cs-about-hero-text {
    max-width: 580px;
}

.cs-about h1.cs-about-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 46px !important;
    line-height: 1.06 !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    color: #fff !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-wrap: balance;
}

.cs-about p.cs-about-lede {
    max-width: 520px;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.cs-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.cs-about a.cs-about-btn {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    background: linear-gradient(180deg, #34408F 0%, var(--cs-login-navy) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 20px -10px rgba(44, 54, 126, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .cs-about a.cs-about-btn:hover {
        color: #fff;
        transform: translateY(-1px);
        text-decoration: none;
    }

    .cs-about a.cs-about-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.25);
    }

/* On the green band the main button is white and the second one an outline. */
.cs-about-hero a.cs-about-btn {
    background: #fff;
    color: var(--cs-login-crop);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}

    .cs-about-hero a.cs-about-btn:hover {
        color: var(--cs-login-crop);
    }

    .cs-about-hero a.cs-about-btn.is-ghost {
        background: transparent;
        color: #fff;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
    }

        .cs-about-hero a.cs-about-btn.is-ghost:hover {
            color: #fff;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
        }

    .cs-about-hero a.cs-about-btn:focus-visible {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
    }

.cs-about h2.cs-about-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--cs-login-ink) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.cs-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 64px;
    margin: 72px 0 0;
    padding: 0 8px;
}

    .cs-about-story p {
        max-width: 60ch;
        margin: 0 0 14px;
        font-size: 15px;
        line-height: 1.7;
        color: var(--cs-ink);
    }

.cs-about-what {
    margin: 64px 0 0;
    padding: 44px 8px 0;
    border-top: 1px solid var(--cs-line);
}

.cs-about ul.cs-about-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 64px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

    .cs-about-list li {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin: 0;
    }

    .cs-about-list svg {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 10px;
        border-radius: 12px;
        background: #EAF6EF;
        fill: none;
        stroke: #23503B;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cs-about-list strong {
        display: block;
        margin: 2px 0 5px;
        font-size: 15.5px;
        font-weight: 600;
        color: var(--cs-login-ink);
    }

    .cs-about-list span {
        display: block;
        max-width: 52ch;
        font-size: 14px;
        line-height: 1.65;
        color: var(--cs-label);
    }

.cs-about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    margin: 72px 0 0;
    padding: 32px 36px;
    border: 1px solid var(--cs-line);
    border-radius: 18px;
    background: #F4F6F9;
}

    .cs-about-cta h2.cs-about-heading {
        margin-bottom: 6px !important;
    }

    .cs-about-cta p {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--cs-label);
    }

.cs-about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.cs-about a.cs-about-phone {
    font-size: 15px;
    font-weight: 500;
    color: var(--cs-login-navy);
    text-decoration: none;
    white-space: nowrap;
}

    .cs-about a.cs-about-phone:hover {
        text-decoration: underline;
    }

@media (max-width: 860px) {
    .cs-about-hero {
        min-height: 400px;
        padding: 44px 28px;
    }

    /* On a narrow band the pivot would run through the headline, so it
       moves up into the corner and the small one goes. */
    .cs-about-hero .cs-login-pivot-main {
        width: 460px;
        height: 460px;
        right: -250px;
        top: -270px;
        opacity: 0.8;
    }

    .cs-about-hero .cs-login-pivot-far {
        display: none;
    }

    .cs-about h1.cs-about-title {
        font-size: 34px !important;
    }

    .cs-about-story,
    .cs-about ul.cs-about-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-about-story {
        margin-top: 48px;
    }
}

@media (max-width: 480px) {
    .cs-about {
        padding: 12px 12px 48px;
    }

    .cs-about-hero {
        border-radius: 18px;
        padding: 36px 22px;
    }

    .cs-about h1.cs-about-title {
        font-size: 30px !important;
    }

    .cs-about-cta {
        padding: 26px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-about-hero {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Legal documents (TermsOfUse, PrivacyPolicy, CookiePolicy, PAIAManual)

   A heading, a switcher between the four, and the PDF as wide and tall as
   the screen allows. On a phone, or wherever the browser cannot show a PDF
   in the page, a card with Open and Download instead; LegalDocumentPage's
   script adds .has-viewer when the viewer is on.
   --------------------------------------------------------------------------- */

/* The page shell, title and intro are the house ones (.pref-wrap,
   .pref-title, .pref-intro in cs-core.css), so the heading is the same size
   as every other page's. */
.cs-legal {
    --cs-legal-navy: #2C367E;
}

    .cs-legal *,
    .cs-legal *::before,
    .cs-legal *::after {
        box-sizing: border-box;
    }

.cs-legal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

/* The intro's own bottom margin would double the gap above the switcher. */
.cs-legal .pref-intro {
    margin-bottom: 0;
}

.cs-legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Only beside a viewer; on a phone the card carries them. */
.cs-legal:not(.has-viewer) .cs-legal-actions {
    display: none;
}

.cs-legal a.cs-legal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 11px;
    background: linear-gradient(180deg, #34408F 0%, var(--cs-legal-navy) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px -8px rgba(44, 54, 126, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .cs-legal a.cs-legal-btn:hover {
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .cs-legal a.cs-legal-btn.is-ghost {
        background: #fff;
        color: var(--cs-legal-navy);
        box-shadow: inset 0 0 0 1.5px #D9DDE3;
    }

        .cs-legal a.cs-legal-btn.is-ghost:hover {
            color: var(--cs-legal-navy);
            box-shadow: inset 0 0 0 1.5px var(--cs-legal-navy);
        }

    .cs-legal a.cs-legal-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.25);
    }

/* The switcher. Scrolls sideways on a narrow phone rather than wrapping. */
.cs-legal-nav {
    display: flex;
    gap: 4px;
    margin: 22px 0 18px;
    padding: 4px;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    background: var(--cs-surface-sunk);
    border-radius: 10px;
    scrollbar-width: none;
}

    .cs-legal-nav::-webkit-scrollbar {
        display: none;
    }

    .cs-legal-nav a {
        flex: 0 0 auto;
        padding: 8px 14px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 500;
        color: var(--cs-label);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .cs-legal-nav a:hover {
            color: var(--cs-ink);
            text-decoration: none;
        }

        .cs-legal-nav a.is-active {
            background: #fff;
            color: var(--cs-ink-strong);
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
        }

.cs-legal-viewer {
    display: none;
}

.cs-legal.has-viewer .cs-legal-viewer {
    display: block;
    height: calc(100vh - 260px);
    min-height: 560px;
    border: 1px solid var(--cs-line);
    border-radius: 14px;
    overflow: hidden;
    background: #525659;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -24px rgba(16, 24, 40, 0.35);
}

.cs-legal-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.cs-legal-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 18px;
    padding: 22px;
    border: 1px solid var(--cs-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cs-legal.has-viewer .cs-legal-card {
    display: none;
}

    .cs-legal-card svg {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        padding: 12px;
        border-radius: 14px;
        background: #EEF0F8;
        fill: none;
        stroke: var(--cs-legal-navy);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cs-legal-card-text {
    flex: 1 1 200px;
    min-width: 0;
}

    .cs-legal-card-text strong {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: var(--cs-ink-strong);
    }

    .cs-legal-card-text span {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--cs-label);
    }

.cs-legal-card-actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 760px) {
    .cs-legal-card-actions {
        width: 100%;
    }

        .cs-legal-card-actions .cs-legal-btn {
            flex: 1 1 0;
        }
}