/*
 * The signed-in customer pages: Profile, Change Password, Payment History and a payment receipt.
 */

:root {
    --acct-width: 1280px;
    --acct-gutter: 24px;
    --acct-ink: #2c3e50;
    --acct-muted: #8a97a3;
    --acct-line: #e6eaee;
    --acct-bg: #f5f7f9;
    --acct-blue: #1766b0;
    --acct-green: #1e8e4e;
    --acct-red: #c0392b;
}

/* ---------------------------------------------------------------- site header */

.acct-header {
    background: #fff;
    border-bottom: 1px solid var(--acct-line);
    position: relative;
    z-index: 5;
}

.acct-header .nav-container.main-navigation.account {
    padding-bottom: 0;
}

.acct-header nav.bar.bar-4.bar--transparent.bar--absolute.fixed-navigation {
    background: transparent;
    margin: 0 auto !important;
    max-width: var(--acct-width);
    padding: 14px var(--acct-gutter) !important;
    position: static !important;
    top: auto !important;
    width: 100%;
}

.acct-header nav.bar > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.acct-header nav.bar::after {
    clear: both;
    content: "";
    display: table;
}

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

.acct-page {
    background: var(--acct-bg);
    min-height: 60vh;
    padding: 34px 0 60px;
}

.acct-page .container,
.acct-nav .container {
    display: block !important;
    margin: 0 auto !important;
    max-width: var(--acct-width) !important;
    padding: 0 var(--acct-gutter) !important;
    width: 100% !important;
}

.acct-shell {
    margin: 0 auto;
    max-width: 760px;
}

.acct-shell--wide {
    max-width: none;
}

.acct-card {
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(44, 62, 80, .05);
    padding: 30px;
}

.acct-title {
    color: var(--acct-ink);
    font-size: 26px;
    font-weight: 300;
    margin: 0 0 6px;
}

.acct-sub {
    color: var(--acct-muted);
    font-size: 13px;
    margin: 0 0 24px;
}

/* ---------------------------------------------------------------- nav */

.acct-nav {
    background: #fff;
    border-bottom: 1px solid var(--acct-line);
}

.acct-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.acct-nav {
    padding: 0;
}

.acct-nav li a {
    display: block;
    padding: 16px 20px;
    color: var(--acct-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.acct-nav li a:hover {
    color: var(--acct-ink);
}

.acct-nav li.is-active a {
    color: var(--acct-blue);
    border-bottom-color: var(--acct-blue);
}

/* ---------------------------------------------------------------- forms */

.acct-field {
    margin-bottom: 20px;
}

.acct-field label {
    display: block;
    color: var(--acct-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.acct-field input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--acct-line);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--acct-ink);
    background: #fff;
}

.acct-field input:focus {
    border-color: var(--acct-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 102, 176, .12);
}

.acct-field .acct-error {
    color: var(--acct-red);
    font-size: 12px;
    margin: 6px 0 0;
}

.acct-field input.has-error {
    border-color: var(--acct-red);
}

.acct-forgot {
    font-size: 13px;
    margin: 6px 0 0;
    text-align: right;
}

.acct-contact {
    border-top: 1px solid var(--acct-line);
    margin-top: 30px;
    padding: 24px 0 0;
}

.acct-section-title {
    color: var(--acct-ink);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
}

.acct-contact .acct-sub {
    margin-bottom: 8px;
}

.acct-contact-row {
    border-bottom: 1px solid var(--acct-line);
    padding: 16px 0;
}

.acct-contact-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.acct-label {
    color: var(--acct-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.acct-contact-value {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.acct-value-group {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
}

.acct-value {
    color: var(--acct-ink);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.acct-value.is-empty {
    color: var(--acct-muted);
}

.acct-contact-actions {
    display: flex;
    flex: none;
    gap: 18px;
}

.acct-contact .acct-link {
    background: none;
    border: 0;
    letter-spacing: normal;
    text-transform: none;
    color: var(--acct-blue);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 0;
}

.acct-contact .acct-link:hover,
.acct-contact .acct-link:focus-visible {
    text-decoration: underline;
}

.acct-change {
    background: var(--acct-bg);
    border-radius: 6px;
    margin-top: 14px;
    padding: 18px;
}

.acct-change .acct-field {
    margin-bottom: 8px;
}

.acct-change .acct-note {
    margin: 0;
}

.acct-change-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.acct-change .acct-change-buttons .acct-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 28px;
    width: auto;
}

@media (max-width: 480px) {
    .acct-change {
        margin-left: -12px;
        margin-right: -12px;
        padding: 16px 12px;
    }

    .acct-change .acct-change-buttons .acct-btn {
        padding: 10px 20px;
    }
}

.acct-change .otp-sent-to {
    margin-top: 0;
}

.acct-status {
    align-items: center;
    color: var(--acct-muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
}

.acct-status.is-verified {
    color: var(--acct-green);
}

.acct-tick {
    flex: none;
    height: 14px;
    width: 14px;
}

.acct-field input[readonly],
.acct-field input[readonly]:focus {
    background: var(--acct-bg);
    border-color: var(--acct-line);
    box-shadow: none;
    cursor: default;
}

.acct-note {
    color: var(--acct-muted);
    font-size: 12px;
    margin: 6px 0 0;
}

.acct-note a {
    color: var(--acct-blue);
}

.acct-actions {
    margin-top: 26px;
}

.acct-btn {
    background: var(--acct-blue);
    border: 1px solid var(--acct-blue);
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 34px;
}

.acct-btn:hover { background: #12558f; }

.acct-btn--ghost {
    background: #fff;
    color: var(--acct-ink);
    border-color: var(--acct-line);
}

.acct-btn--ghost:hover { background: var(--acct-bg); }

.acct-flash {
    background: #eaf7ef;
    border: 1px solid #bfe4cd;
    border-radius: 4px;
    color: var(--acct-green);
    font-size: 14px;
    margin-bottom: 20px;
    padding: 12px 14px;
}

/* ---------------------------------------------------------------- code forms and messages (js/account.js) */

.otp-flow[hidden],
.otp-flow [hidden] {
    display: none !important;
}

.otp-sent-to {
    margin: 0 0 16px;
    color: var(--acct-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.otp-actions {
    display: flex;
    justify-content: space-between;
    margin: 12px 0 0;
}

.otp-link {
    border: 0;
    background: none;
    height: auto;
    padding: 0;
    color: var(--acct-blue);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.otp-link:disabled {
    background: none;
    color: var(--acct-muted);
    text-decoration: none;
    cursor: default;
}

.otp-message {
    margin: 12px 0 0;
    color: var(--acct-blue);
    font-size: 13px;
    line-height: 1.5;
}

.otp-message:empty {
    margin: 0;
}

.otp-message.is-error {
    color: var(--acct-red);
    font-weight: 600;
}

.otp-flow input[aria-invalid="true"] {
    border-color: var(--acct-red);
}

.otp-captcha {
    margin: 16px 0 0;
    min-height: 78px;
}

/* ---------------------------------------------------------------- table */

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

.acct-table th {
    background: var(--acct-bg);
    border-bottom: 1px solid var(--acct-line);
    color: var(--acct-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 15px 18px !important;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    width: auto !important;
}

.acct-table td {
    background-color: transparent;
    border-bottom: 1px solid var(--acct-line);
    color: var(--acct-ink);
    font-size: 14px;
    line-height: 1.5;
    padding: 22px 18px !important;
    vertical-align: middle;
    width: auto !important;
}

.acct-table tbody tr:hover { background: #fafbfc; }

.acct-table .num { text-align: right; white-space: nowrap; }
.acct-table .ref { font-weight: 600; white-space: nowrap; }
.acct-table .when { color: var(--acct-muted); white-space: nowrap; }

.acct-link {
    color: var(--acct-blue);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

.acct-link:hover { text-decoration: underline; }

.acct-removed {
    color: var(--acct-muted);
    font-style: italic;
}

.acct-empty {
    color: var(--acct-muted);
    padding: 50px 20px;
    text-align: center;
}

/* ---------------------------------------------------------------- payment status */

.pstatus {
    display: block;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.pstatus--ok  { color: var(--acct-green); }
.pstatus--bad { color: var(--acct-red); }

.pstatus-note {
    color: var(--acct-muted);
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 3px;
}

/* ---------------------------------------------------------------- pagination */

.acct-pager {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    padding: 18px 4px 0;
}

.acct-pager .count {
    color: var(--acct-muted);
    font-size: 13px;
}

.acct-pager .steps { display: flex; gap: 6px; }

.acct-pager a,
.acct-pager span.step {
    border: 1px solid var(--acct-line);
    border-radius: 4px;
    color: var(--acct-ink);
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    padding: 9px 12px;
    text-decoration: none;
}

.acct-pager a:hover { background: var(--acct-bg); }

.acct-pager span.step {
    color: #c4ccd4;
    cursor: default;
}

/* ---------------------------------------------------------------- receipt */

.rcpt-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--acct-line);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding-bottom: 22px;
}

.rcpt-logo img { max-height: 54px; max-width: 190px; }

.rcpt-meta { text-align: right; }

.rcpt-meta dt {
    color: var(--acct-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rcpt-meta dd {
    color: var(--acct-ink);
    font-size: 14px;
    margin: 0 0 12px;
}

.rcpt-payer {
    padding: 22px 0;
}

.rcpt-payer .who {
    color: var(--acct-ink);
    font-size: 17px;
    font-weight: 600;
}

.rcpt-payer .detail {
    color: var(--acct-muted);
    font-size: 13px;
    margin-top: 3px;
}

.rcpt-totals {
    background: var(--acct-bg);
    border-radius: 6px;
    margin-top: 22px;
    padding: 18px 20px;
}

.rcpt-totals .line {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    padding: 5px 0;
}

.rcpt-totals .line--sum {
    border-top: 1px solid var(--acct-line);
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    padding-top: 14px;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 767px) {
    .acct-card { padding: 20px; }

    .acct-nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .acct-nav ul::-webkit-scrollbar { display: none; }

    .acct-nav li a {
        padding: 14px 12px;
        white-space: nowrap;
    }
    .rcpt-meta { text-align: left; }

    .acct-table thead { display: none; }

    .acct-table,
    .acct-table tbody,
    .acct-table tr,
    .acct-table td { display: block; width: 100%; }

    .acct-table tr {
        border: 1px solid var(--acct-line);
        border-radius: 6px;
        margin-bottom: 14px;
        padding: 6px 4px;
    }

    .table-responsive { overflow-x: visible; }

    .acct-table td {
        border: none;
        display: flex;
        gap: 14px;
        justify-content: space-between;
        padding: 8px 14px !important;
        text-align: right;
        width: 100% !important;
    }

    .acct-table td > * { min-width: 0; }

    .acct-table .ref,
    .acct-table .num,
    .acct-table .when { white-space: normal; word-break: break-word; }

    .acct-table td[data-label=""] { justify-content: flex-end; }
    .acct-table td[data-label=""]::before { content: none; }

    .acct-table td::before {
        color: var(--acct-muted);
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .acct-table .num { text-align: right; }
}

/* ---------------------------------------------------------------- bank account payments */

.bank-lead {
    color: var(--acct-ink);
    font-size: 14px;
    margin: 0 0 18px;
}

.bank-problem {
    background: #fdf0ee;
    border: 1px solid #f1c6c0;
    border-radius: 4px;
    color: var(--acct-red);
    font-size: 14px;
    margin: 0 0 20px;
    padding: 12px 14px;
}

a.bank-link-button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

a.bank-link-button:hover,
a.bank-link-button:focus {
    color: #fff;
    text-decoration: none;
}

a.bank-link-button.acct-btn--ghost:hover,
a.bank-link-button.acct-btn--ghost:focus {
    color: var(--acct-ink);
}

.bank-summary {
    border: 1px solid var(--acct-line);
    border-radius: 6px;
    margin: 0 0 8px;
    padding: 0 16px;
}

.bank-summary > div {
    border-bottom: 1px solid var(--acct-line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 12px 0;
}

.bank-summary > div[hidden] {
    display: none;
}

.bank-summary > div:last-child {
    border-bottom: 0;
}

.bank-summary dt {
    color: var(--acct-muted);
    font-size: 14px;
    font-weight: 400;
}

.bank-summary dd {
    color: var(--acct-ink);
    font-size: 14px;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.bank-summary .bank-total dt,
.bank-summary .bank-total dd {
    color: var(--acct-ink);
    font-size: 16px;
    font-weight: 700;
}

.bank-fee-note {
    display: block;
    font-size: 12px;
}

.bank-step {
    border-top: 1px solid var(--acct-line);
    margin-top: 24px;
    padding-top: 22px;
}

.bank-account-list {
    border: 0;
    list-style: none;
    margin: 0 0 12px;
    min-width: 0;
    padding: 0;
}

.bank-account-list legend {
    border: 0;
    margin-bottom: 10px;
}

.bank-account {
    align-items: center;
    border: 1px solid var(--acct-line);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    gap: 6px 12px;
    margin: 0 0 10px;
    padding: 12px 14px;
    width: 100%;
}

label.bank-account,
.bank-consent {
    cursor: pointer;
    pointer-events: auto;
}

.bank-account input[type="radio"],
.bank-consent input[type="checkbox"] {
    flex: none;
    height: auto;
    margin: 0;
    padding: 0;
    width: auto;
}

label.bank-account:has(input:checked) {
    border-color: var(--acct-blue);
    box-shadow: 0 0 0 1px var(--acct-blue);
}

.bank-account-name {
    color: var(--acct-ink);
    flex: 1 1 0;
    font-size: 15px;
    min-width: 0;
}

.acct-field label .bank-optional {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.bank-account-page .acct-link,
.bank-accounts-section .acct-link {
    background: none;
    border: 0;
    color: var(--acct-blue);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    padding: 2px 0;
    text-transform: none;
}

.bank-account-page .acct-link:hover,
.bank-accounts-section .acct-link:hover {
    text-decoration: underline;
}

ul.bank-account-list > li {
    list-style: none;
}

form.bank-account::before,
form.bank-account::after {
    display: none;
}

.bank-account .bank-account-logo {
    flex: none;
    height: 40px;
    margin: 0;
    object-fit: contain;
    width: 87px;
}

.bank-account .acct-link.bank-remove {
    color: var(--acct-red);
    flex: none;
    height: auto;
    margin: 0;
    width: auto;
}

.bank-account .otp-message {
    flex-basis: 100%;
    margin: 0;
}

.bank-add-link {
    margin: 0 0 8px;
}

.bank-pay-button {
    margin-top: 8px;
}

.acct-field select {
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--acct-ink);
    font-size: 12px;
    height: 2.78571429em;
    padding: 0 12px;
    width: 100%;
}

.acct-field select:focus {
    border-color: var(--acct-blue);
    box-shadow: 0 0 0 3px rgba(23, 102, 176, .12);
    outline: none;
}

.bank-form .acct-field input[aria-invalid="true"],
.bank-form .acct-field select[aria-invalid="true"] {
    border-color: var(--acct-red);
}

.bank-consent {
    align-items: flex-start;
    color: var(--acct-ink);
    display: flex;
    font-size: 13px;
    font-weight: 400;
    gap: 10px;
    margin: 4px 0 8px;
}

.bank-consent input[type="checkbox"] {
    margin-top: 3px;
}

.bank-consent input[aria-invalid="true"] {
    outline: 2px solid var(--acct-red);
}

.acct-btn.is-busy[disabled] {
    background: var(--acct-blue);
    color: #fff;
    cursor: progress;
}

.bank-spinner {
    animation: bank-spin .8s linear infinite;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    border-top-color: #fff;
    display: inline-block;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    width: 14px;
}

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

@media (prefers-reduced-motion: reduce) {
    .bank-spinner {
        animation-duration: 2s;
    }
}

/* ---------------------------------------------------------------- bank account pay page */

.bank-account-page .acct-sub,
.bank-account-page .acct-note,
.bank-account-page .bank-fee-note,
.bank-account-page .acct-status,
.bank-account-page .otp-message {
    font-size: 13px;
}

.bank-account-page .acct-field label,
.bank-account-page .acct-label {
    font-size: 12px;
}

.bank-account-page .acct-link,
.bank-account-page .bank-consent {
    font-size: 14px;
}

.bank-account-page .acct-field select,
.bank-account-page .acct-btn,
.bank-account-page .bank-problem,
.bank-account-page .bank-summary dt,
.bank-account-page .bank-summary dd {
    font-size: 15px;
}

.bank-account-page .acct-field input {
    font-size: 15px !important;
    height: 2.78571429em;
}

.bank-account-page .bank-lead,
.bank-account-page .acct-value,
.bank-account-page .bank-account-name {
    font-size: 16px;
}

.bank-account-page .bank-summary .bank-total dt,
.bank-account-page .bank-summary .bank-total dd {
    font-size: 18px;
}

/* ---------------------------------------------------------------- log in and register (js/login.js) */

/* The theme's desktop Register button is white, for the home page's photo header. */
.acct-header .login-window.register {
    border: 1px solid #0C2A76 !important;
    border-radius: 30px;
    color: #0C2A76 !important;
}

.acct-card.login-card {
    margin: 0 auto;
    max-width: 480px;
}

.login-card form[hidden] {
    display: none !important;
}

.login-modes {
    border: 1px solid var(--acct-blue);
    border-radius: 30px;
    display: flex;
    margin: 0 0 24px;
    overflow: hidden;
}

.login-mode {
    background: #fff;
    border: 0;
    color: var(--acct-blue);
    cursor: pointer;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.2;
    margin: 0;
    padding: 10px;
    text-transform: none;
    width: auto;
}

.login-mode.is-active {
    background: var(--acct-blue);
    color: #fff;
}

.login-mode:focus-visible {
    outline: 2px solid #0c2a76;
    outline-offset: -4px;
}

.login-card .acct-actions .acct-btn {
    width: 100%;
}

.login-other {
    border-top: 1px solid var(--acct-line);
    color: var(--acct-muted);
    font-size: 13px;
    margin: 26px 0 0;
    padding-top: 18px;
    text-align: center;
}

.login-other a {
    color: var(--acct-blue);
    font-weight: 600;
}

/* ---------------------------------------------------------------- inside the public site's popup (js/popup.js) */

body.acct-popup {
    background: #fff;
    margin: 0;
    padding: 0;
}

.acct-popup .acct-card {
    border: 0;
    box-shadow: none;
    padding: 48px 30px 30px;
}

/* The page around the popup shows reCAPTCHA's badge. */
.acct-popup .grecaptcha-badge {
    visibility: hidden;
}

/* ---------------------------------------------------------------- the public site's own pages (site/*) */

.acct-alert {
    background: #fdf0ee;
    border: 1px solid #f2c9c3;
    border-radius: 4px;
    color: var(--acct-red);
    font-size: 14px;
    margin-bottom: 20px;
    padding: 12px 14px;
}

.acct-field textarea {
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--acct-ink);
    display: block;
    font-size: 14px;
    height: auto;
    min-height: 140px;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}

.acct-field textarea:focus {
    border-color: var(--acct-blue);
    box-shadow: 0 0 0 3px rgba(23, 102, 176, .12);
    outline: none;
}

.acct-field textarea.has-error {
    border-color: var(--acct-red);
}

/* custom.css takes the top margin off every h1-h3. */
.site-doc h2 {
    color: var(--acct-ink);
    font-size: 18px;
    font-weight: 600;
    margin: 30px 0 10px;
    margin-top: 30px !important;
}

.site-doc h3 {
    color: var(--acct-ink);
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 8px;
    margin-top: 22px !important;
}

.site-doc p,
.site-doc li,
.site-doc td,
.site-doc th {
    color: #5d6b78;
    font-size: 14px;
    line-height: 1.7;
}

.site-doc p {
    margin: 0 0 12px;
}

.site-doc .acct-sub {
    font-size: 13px;
}

.site-doc ul,
.site-doc ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.site-doc ul { list-style: disc; }
.site-doc ol { list-style: decimal; }

.site-doc li {
    margin-bottom: 6px;
}

.site-doc a {
    color: var(--acct-blue);
}

.site-doc strong {
    color: var(--acct-ink);
    font-weight: 600;
}

.site-note {
    background: var(--acct-bg);
    border-left: 3px solid var(--acct-blue);
    border-radius: 0 4px 4px 0;
    margin: 16px 0;
    padding: 12px 16px;
}

.site-note p {
    margin: 0;
}

.site-table {
    border-collapse: collapse;
    margin: 6px 0 16px;
    width: 100%;
}

.site-table th,
.site-table td {
    border-bottom: 1px solid var(--acct-line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.site-table th {
    color: var(--acct-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.site-table td:first-child {
    color: var(--acct-ink);
    font-weight: 600;
    width: 35%;
}

.site-contact {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.site-contact-fields {
    column-gap: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-contact .acct-note {
    margin-top: 20px;
}

.site-contact-details {
    border-left: 1px solid var(--acct-line);
    padding-left: 40px;
}

.site-contact-details .acct-section-title {
    font-size: 15px;
    margin: 0 0 8px;
}

.site-contact-details * + .acct-section-title {
    margin-top: 28px !important;
}

.site-contact-details p {
    color: #5d6b78;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 6px;
}

.site-contact-details a {
    color: var(--acct-blue);
}

.site-social {
    display: flex;
    font-size: 18px;
    gap: 18px;
    margin-top: 22px !important;
}

.site-social a {
    color: var(--acct-muted) !important;
}

.site-social a:hover {
    color: var(--acct-blue) !important;
}

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

    .site-contact {
        gap: 24px;
    }

    .site-contact-details {
        border-left: 0;
        border-top: 1px solid var(--acct-line);
        padding: 24px 0 0;
    }
}