/* ---------------------------------------------------------------------------
   ui.css — shared components for the claim sites.

   theme.css next to this file is the brand's own stylesheet, kept verbatim so
   it can be replaced wholesale when a brand ships a new one. Everything we add
   or override lives here instead, and this sheet loads second.

   Rules that belong here: anything that has to look the same on every page, on
   every case, for every company. Rules that belong in a template: layout for
   that one page. When a page-level style starts repeating, it has outgrown the
   template and should move here.
--------------------------------------------------------------------------- */

/* Brand colour: violet, chosen over the original #7700FF, which read as neon
   against the black chrome. The lighter and darker steps are tuned to it so
   hovers and the status dot stay in the same family. */
:root {
    --ca-primary: #7C3AED;
    --ca-primary-lighter: #9c6bf5;
    --ca-primary-darker: #6425d1;

    --ca-radius: 25px;
    --ca-radius-sm: 20px;
}

/* ---------------------------------------------------------------------------
   Primary action
   ---------------------------------------------------------------------------
   One purple button, one hover, everywhere: submit a claim in the header, in
   the footer, the contact button at the foot of a reference page, the lookup
   on the home page, the button in the scam-warning dialog.

   These had drifted into five implementations with three different hovers —
   one of them slid the whole button sideways, which on a black footer read as
   the layout shifting rather than a button responding.

   The hover is: the fill lightens, and the arrow steps forward. The arrow
   moves, not the button. A button that moves out from under the pointer is
   the one thing a hover should never do, and the arrow already says "this
   goes somewhere", so it is the part with something to say.

   Lighter rather than darker on hover because most of these sit on black —
   the header bar, the footer, the dark claim card — and a deeper violet on
   black loses its edge.

   Sizing is deliberately not set here. Each of these buttons has a different
   job and a different amount of room, so padding and font-size stay with the
   thing that owns them. Only the identity and the behaviour are shared. */
.cta-p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--ca-primary);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.cta-p:hover,
.cta-p:focus-visible {
    background: var(--ca-primary-lighter);
    color: #fff !important;
}

/* The icon is optional — a form submit ("Continue") has nowhere to point. When
   it is there, this is the whole animation. */
.cta-p .bi {
    transition: transform 0.18s ease;
}

.cta-p:hover .bi,
.cta-p:focus-visible .bi {
    transform: translateX(3px);
}

.cta-p:focus-visible {
    outline: 2px solid var(--ca-primary);
    outline-offset: 2px;
}

/* On the dark bars the violet focus ring disappears into the background. */
.site-head .cta-p:focus-visible,
.foot .cta-p:focus-visible {
    outline-color: #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cta-p,
    .cta-p .bi {
        transition: none;
    }
}

/* theme.css's own button is a gradient with a ::before overlay. Once the header
   and footer went flat it read as a leftover from the old build, and a gradient
   appearing in two places is an accident rather than a decision. Flattened
   here rather than in theme.css so that file stays untouched — CMS-authored
   content can still contain .btn-ca, so it has to keep working. */
.btn-ca,
.btn-ca:hover,
.btn-ca:active,
.btn-ca:focus {
    background: var(--ca-primary);
}

.btn-ca:hover {
    background: var(--ca-primary-lighter);
    box-shadow: none;
}

.btn-ca::before {
    display: none;
}

/* ---------------------------------------------------------------------------
   Error pages
   ---------------------------------------------------------------------------
   Shared by 404 and 500. A claimant who mistypes a URL from a printed notice
   lands here, and the thing they need is not an apology — it is the way back
   to the page they were looking for. So this is a short line and a list of the
   pages that exist, inside the same header and footer as everywhere else. */
/* The band above says "Error". This says what went wrong — a sentence, set at
   a size a sentence can be read at rather than a page title. */
.err-t {
    margin: 0 0 12px;
    max-width: 24ch;
    color: #060606;
    font-size: 27px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.6px;
}

.err-d {
    margin: 0;
    max-width: 68ch;
    color: #555;
    font-size: 16px;
    line-height: 25px;
}

.err-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    max-width: 720px;
}

.err-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid #e6e4e1;
    border-radius: var(--ca-radius-sm);
    background: #fff;
    color: #060606 !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.err-links a:hover,
.err-links a:focus-visible {
    border-color: var(--ca-primary);
    transform: translateY(-2px);
}

.err-links .bi {
    color: var(--ca-primary);
    font-size: 14px;
    transition: transform 0.18s ease;
}

.err-links a:hover .bi,
.err-links a:focus-visible .bi {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .err-links a,
    .err-links .bi {
        transition: none;
    }
}

@media (max-width: 767px) {
    .err {
        padding: 44px 0 60px;
    }

    .err-t {
        font-size: 32px;
        line-height: 37px;
        letter-spacing: -0.8px;
    }

    .err-links {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Designed blocks
   ---------------------------------------------------------------------------
   The notice and the rights table. These used to be styled by matching the
   shape of pasted markup (.content-body .row:has(.home-lo-block) and friends),
   which worked only for as long as nobody edited the paste. The markup now
   comes from a template, so these are plain classes. */
.notice-b-h {
    margin: 0 0 18px;
    color: #060606;
    font-size: 17px;
    font-weight: 700;
    line-height: 27px;
    /* Case as typed. Notices differ (some set this sentence in caps, some
       don't), and the court-approved wording is the one to follow. */
    letter-spacing: 0.2px;
}

.notice-b-d {
    color: #333;
    font-size: 16px;
    line-height: 27px;
}

.notice-b-d p:last-child {
    margin-bottom: 0;
}

.rights {
    margin-top: 46px;
}

/* Same treatment as a section heading in page copy — the violet marker, the
   same size and spacing — because that is what this is. It reads as a
   different kind of heading otherwise, purely because of where it came from. */
.rights-h {
    position: relative;
    margin: 0 0 22px;
    padding-top: 16px;
    color: #060606;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 34px;
}

.rights-h::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: var(--ca-primary);
}

/* The table's own heading, under a section title: a caption, not a second
   section. */
.rights-cap {
    margin: 0 0 14px;
    color: #060606;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
}

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

/* Each option is its own bordered row rather than a table: on a phone a real
   <table> of five options with paragraphs in one column is unreadable, and
   this reflows to stacked without losing which date belongs to which choice. */
.rights-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
    margin: 0 0 12px;
    padding: 18px 22px;
    border: 2px solid #ebe8e4;
    border-radius: 20px;
}

/* The divider between the option and what it means. On the stacked layout it
   moves to the bottom edge, since a vertical rule between two full-width
   blocks separates nothing. */
.rights-opt {
    padding-inline-end: 22px;
    border-inline-end: 1px solid #e6e4e1;
}

.rights-desc {
    padding-inline-start: 22px;
}

/* The option and its deadline are one sentence. A step below the description
   beside it — uppercase and bold already carry the weight, so matching the
   body size on top of both made the left column shout. */
.rights-label {
    margin: 0;
    color: #060606;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
}

/* Only the date takes the brand colour: it is the part that changes, and the
   part a claimant is scanning for.

   nowrap so it wraps as one thing. Left to itself the line broke inside the
   date — "DECEMBER 1," on one line and "2026" on the next — which is the one
   piece of this row that has to be read at a glance. */
.rights-date {
    color: var(--ca-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rights-date-note {
    color: #777;
}

.rights-desc {
    color: #444;
    font-size: 15px;
    line-height: 24px;
}

.rights-desc p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .rights-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 18px;
    }

    .rights-opt {
        padding: 0 0 12px;
        border-inline-end: 0;
        border-bottom: 1px solid #e6e4e1;
    }

    .rights-desc {
        padding: 12px 0 0;
    }
}

/* ---------------------------------------------------------------------------
   Page header
   ---------------------------------------------------------------------------
   The dark band a page opens on. A theme with its own look overrides these in
   its own partial — fidexis does — but they live here so a theme that has not
   styled one still gets a page header rather than a bare <h1>. */
.page-head {
    padding: 22px 0 26px;
    background: var(--ca-black, #060606);
    color: #fff;
}

.page-head-k {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.page-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.page-head-t {
    margin: 0;
    color: #fff;
    font-size: 46px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -1.4px;
}

.page-head-m {
    flex: none;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.page-head-s {
    margin: 12px 0 0;
    color: #fff;
    font-size: 16px;
    line-height: 25px;
}

/* An action in the header, where the meta usually sits. Outlined rather than
   filled: the claim button is already in the bar above, and two solid buttons
   a few pixels apart both asking to be pressed is how somebody ends up on the
   wrong one. */
.page-head-a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-bottom: 4px;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.page-head-a:hover,
.page-head-a:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .page-head-a {
        transition: none;
    }
}

@media (max-width: 991px) {
    .page-head {
        padding: 16px 0 20px;
    }

    .page-head-t {
        font-size: 32px;
        line-height: 37px;
        letter-spacing: -0.8px;
    }

    .page-head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .page-head-m {
        margin: 0;
    }
}

/* ---------------------------------------------------------------------------
   Legal documents
   ---------------------------------------------------------------------------
   The privacy policy, and anything else long, numbered and read in fragments.

   Nobody reads one of these end to end. They arrive looking for one thing —
   what is collected, who it goes to, how to get it deleted — so the job is to
   make the sections findable and the paragraphs short enough to scan. Hence a
   narrow measure, numbered headings that stand out from the body, and the
   dense parts pulled out into tables and cards rather than left as prose. */
/* Full width, like every other page. A narrower measure would read better for
   a document this long, but a legal page that is visibly a different width to
   the rest of the site looks like it came from somewhere else — which is the
   opposite of what a privacy policy needs to look like. */
.legal {
    color: #333;
    font-size: 16px;
    line-height: 27px;
}

.legal p {
    margin: 0 0 18px;
}

.legal ul {
    margin: 0 0 18px;
    padding-inline-start: 22px;
}

.legal li {
    margin-bottom: 10px;
}

.legal a {
    color: var(--ca-primary);
}

/* The opening paragraph is darker than the body but the same size. It was set
   a step larger, which just read as two paragraphs that could not agree on a
   font size. */
.legal-lede {
    color: #060606;
}

.legal-h {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 48px 0 18px;
    color: #060606;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 32px;
}

/* The number is the thing people are given when they are told "see section 8",
   so it is a marker rather than part of the sentence. */
.legal-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--ca-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The California notice. A notice inside a policy, so it is framed as one —
   the law requires it to be given, not found. */
.legal-notice {
    margin: 40px 0;
    border: 1px solid #e6e4e1;
    border-radius: var(--ca-radius);
    overflow: hidden;
}

.legal-notice-h {
    margin: 0;
    padding: 16px 24px;
    background: var(--ca-black, #060606);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    text-align: center;
}

.legal-notice-b {
    padding: 24px;
    font-size: 15px;
    line-height: 25px;
}

.legal-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.legal-col {
    padding: 20px;
    border-radius: var(--ca-radius-sm);
    background: #f2f0ee;
}

.legal-col-h {
    margin: 0 0 14px;
    color: #060606;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
}

.legal-col ul {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
}

/* Category / meaning. Same two-column-to-stacked pattern as the rights table,
   for the same reason: a real table of paragraphs is unusable on a phone. */
.legal-defs {
    margin: 24px 0 8px;
}

.legal-def {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: start;
    padding: 16px 0;
    border-top: 1px solid #e6e4e1;
}

.legal-def:last-child {
    border-bottom: 1px solid #e6e4e1;
}

.legal-def dt {
    padding-inline-end: 20px;
    color: #060606;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
}

.legal-def dd {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
}

.legal-contact {
    margin-top: 8px;
    padding: 24px 26px;
    border-radius: var(--ca-radius);
    background: #f2f0ee;
}

.legal-contact-t {
    margin: 0 0 4px !important;
    color: #060606;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.legal-contact-d {
    margin: 0 0 16px !important;
    color: #555;
    font-size: 15px;
    line-height: 24px;
}

.legal-contact-l {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

/* !important because the theme underlines every link in content. Here the
   underline ran under the gap before the arrow as well, which reads as a
   mistake rather than a link. */
.legal-contact-l a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ca-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.legal-contact-l .bi {
    font-size: 13px;
    transition: transform 0.18s ease;
}

.legal-contact-l a:hover .bi {
    transform: translateX(3px);
}

.legal-contact-a {
    margin: 16px 0 0 !important;
    color: #777;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .legal-contact-l .bi {
        transition: none;
    }
}

@media (max-width: 767px) {
    .legal {
        padding-top: 28px;
        padding-bottom: 48px;
        font-size: 15px;
        line-height: 25px;
    }

    .legal-h {
        margin: 36px 0 14px;
        font-size: 20px;
        line-height: 28px;
    }

    .legal-cols,
    .legal-def {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-def dt {
        padding: 0 0 6px;
    }
}

/* ---------------------------------------------------------------------------
   Claim form
   ---------------------------------------------------------------------------
   The one page on a settlement site that asks for something rather than
   explaining something, and the one a claimant is most likely to abandon. It
   was Bootstrap's default cards — grey headers, hairline borders, fields at
   whatever size the framework picked — which read as a database admin screen
   on a page asking for a social security number.

   Numbered sections, because the form is long and unavoidably so: a claimant
   who can see there are five parts will finish; one scrolling into an
   apparently endless column will not. The prefix is `cform-` rather than `cf-`
   because Cloudflare Turnstile already owns `.cf-turnstile` on this page. */
/* Full width of the form. Capping the measure left the intro stopping short of
   the section cards below it, which read as a layout bug. */
.cform-lede {
    margin: 0 0 24px;
    color: #555;
    font-size: 16px;
    line-height: 26px;
}

.cform-lede strong {
    color: #060606;
}

/* The asterisk carries real meaning on a legal form, so it is not decoration
   to be dimmed. */
.req {
    margin-inline-start: 3px;
    color: #d33;
    font-weight: 700;
}

/* Each section is one object: a black header band joined to a white body.
   Floating the heading above a white card left the page a single pale column
   with nothing marking where one part ended and the next began — on a form
   this long, that is what makes it feel endless. */
.cform-sec {
    margin: 0 0 24px;
    border: 1px solid #e6e4e1;
    border-radius: var(--ca-radius);
    overflow: hidden;
}

.cform-sec-h {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 26px;
    background: var(--ca-black, #060606);
    color: #fff;
}

/* The number, matching the legal pages' section markers — same device, same
   meaning: this is part N of a numbered document. Violet holds up on the black
   band; white would read as a second title. */
.cform-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 9px;
    background: var(--ca-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cform-sec-copy {
    min-width: 0;
}

.cform-sec-t {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 30px;
}

/* Full-strength rather than dimmed: on a claim form this line is usually the
   answer to "what do you want from me", not decoration under the title. */
.cform-sec-d {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14.5px;
    line-height: 22px;
}

/* The body of the section. No border or radius of its own — the wrapper
   carries both, and doubling them left a hairline inside the rounded corner. */
.cform-card {
    padding: 26px;
    background: #fff;
}

/* Repeated groups — purchase 1, purchase 2 — divided and labelled. Stacked on
   a phone they are otherwise one undifferentiated column of inputs. */
.cform-rep + .cform-rep {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #eee;
}

.cform-rep-k {
    margin: 0 0 12px;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* The notice proven at the gate, shown on the form it unlocked. A fact about
   the claim rather than a field, so it reads as one: label, value, tick. */
.cform-verified {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.cform-verified-k {
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cform-verified-v {
    color: #060606;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cform-verified .bi {
    color: #16a34a;
}

.cform-verified-test {
    padding: 2px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
}

.cform-verified-change {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #555;
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cform-verified-change:hover {
    color: var(--ca-primary);
}

/* Confirms the Digital Disbursements widget handed back a payment token. */
.cform-dd-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 14px;
}

.cform-dd-done .bi {
    color: #16a34a;
}

/* ── Payment method ───────────────────────────────────────────────────
   A tile per method rather than a dropdown: the choice is the one thing in
   this section a claimant has to get right, so it is shown, not listed. */
.cform-pay-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

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

.cform-pay-opt {
    position: relative;
    min-width: 0;
}

/* The real input, kept for keyboard and screen-reader use but drawn by the
   tile. */
.cform-pay-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cform-pay-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 16px 16px 14px;
    border: 1px solid #dcd9d5;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cform-pay-tile:hover {
    border-color: #b9b3ad;
}

.cform-pay-radio:focus-visible + .cform-pay-tile {
    outline: 2px solid var(--ca-primary);
    outline-offset: 2px;
}

.cform-pay-radio:checked + .cform-pay-tile {
    border-color: var(--ca-primary);
    background: #faf7ff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.cform-pay-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 11px;
    background: #f4f2f0;
    color: #060606;
    font-size: 19px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cform-pay-radio:checked + .cform-pay-tile .cform-pay-ico {
    background: var(--ca-primary);
    color: #fff;
}

.cform-pay-name {
    color: #060606;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.cform-pay-sub {
    color: #777;
    font-size: 13px;
    line-height: 18px;
}

/* A *highlighted* word in the Notice ID instructions — "printed in red" on
   the notice, shown in red here. Readable on the dark home-page card and on
   the white entry page alike. */
.notice-hl {
    color: #ff4d4f;
    font-weight: 700;
}

.cform-lede .notice-hl {
    color: #d92d20;
}

/* The prepaid card's approved blurb is far longer than the others; a point
   smaller keeps it to three lines on desktop. */
#pay-gift_card + .cform-pay-tile .cform-pay-sub {
    font-size: 12px;
    line-height: 17px;
}

/* The tick in the corner of the chosen tile: the state said twice, colour
   and mark, for anyone who cannot see the first. */
.cform-pay-tick {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ca-primary);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cform-pay-radio:checked + .cform-pay-tile .cform-pay-tick {
    opacity: 1;
    transform: scale(1);
}

/* The whole group goes red when no method is chosen on submit. */
.cform-pay-choice.is-invalid .cform-pay-tile {
    border-color: #d33;
}

.cform-pay-choice.is-invalid .invalid-feedback,
.cform-consent .invalid-feedback {
    display: block;
}

.cform-pay-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.cform-pay-lead {
    margin: 0 0 14px;
    color: #444;
    font-size: 14.5px;
    line-height: 22px;
}

.cform-pay-note {
    margin: 10px 0 0;
    color: #777;
    font-size: 13px;
    line-height: 19px;
}

/* The settled fact after a dialog: where the check or card goes. Green when
   confirmed, amber while the window was closed without finishing. */
.cform-pay-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 14px;
    line-height: 20px;
}

.cform-pay-done [data-pay-done-ok] {
    color: #16a34a;
}

.cform-pay-done [data-pay-done-warn] {
    display: none;
    color: #d97706;
}

.cform-pay-done.is-pending {
    background: #fffbeb;
    color: #78350f;
}

.cform-pay-done.is-pending [data-pay-done-ok] {
    display: none;
}

.cform-pay-done.is-pending [data-pay-done-warn] {
    display: inline;
}

.cform-pay-change {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* The address echoed back inside the check dialog. */
.cform-pay-addr {
    padding: 14px 16px;
    border: 1px dashed #cfcac4;
    border-radius: 14px;
    background: #faf9f8;
    color: #060606;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}

.cform-pay-addr.is-empty {
    color: #a33;
    font-weight: 500;
}

/* The agree box: its own row, set apart from the fields above it. */
.cform-consent {
    margin: 18px 0 0;
    padding: 14px 16px 14px 44px;
    border: 1px solid #e6e4e1;
    border-radius: 14px;
    background: #faf9f8;
}

.cform-consent .form-check-input {
    width: 20px;
    height: 20px;
    margin: 1px 0 0 -28px;
    border-color: #b9b3ad;
    cursor: pointer;
}

.cform-consent .form-check-input:checked {
    border-color: var(--ca-primary);
    background-color: var(--ca-primary);
}

.cform-consent .form-check-input:focus {
    border-color: var(--ca-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* Locked until the terms have been scrolled through. */
.cform-consent.is-gated {
    background: #f4f2f0;
}

.cform-consent.is-gated .form-check-input,
.cform-consent.is-gated .form-check-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.cform-consent-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: #78350f;
    font-size: 13px;
    line-height: 19px;
}

.cform-consent.is-gated .cform-consent-hint {
    display: flex;
}

.cform-consent .form-check-label {
    color: #060606;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
}

/* The dialogs, in the claim form's own idiom rather than Bootstrap's stock
   grey chrome. */
.cform-modal .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.cform-modal .modal-header {
    gap: 12px;
    padding: 20px 26px;
    border-bottom: 1px solid #eee;
}

.cform-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #060606;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.cform-modal .modal-title .bi {
    color: var(--ca-primary);
}

/* "Step 1 of 2", above the dialog's text rather than crowding the title. */
.cform-pay-kicker {
    margin: 0 0 8px;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cform-modal .modal-body {
    padding: 24px 26px;
}

.cform-modal .modal-footer {
    gap: 10px;
    padding: 16px 26px;
    border-top: 1px solid #eee;
}

.cform-modal .modal-footer .cta-p {
    padding: 11px 22px;
    font-size: 14px;
}

.cform-modal .modal-footer .cta-p:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cform-pay-back {
    margin-right: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cform-pay-back:hover {
    color: var(--ca-primary);
}

/* The card issuer's disclosures: a scrolling box so the whole thing is
   present without taking over the window. */
.cform-terms {
    max-height: 300px;
    overflow: auto;
    padding: 16px 18px;
    border: 1px solid #e6e4e1;
    border-radius: 14px;
    background: #faf9f8;
    color: #333;
    font-size: 13.5px;
    line-height: 20px;
}

.cform-terms:focus-visible {
    outline: 2px solid var(--ca-primary);
    outline-offset: 2px;
}

.cform-terms p,
.cform-terms ul {
    margin: 0 0 10px;
}

.cform-terms-h {
    margin: 0 0 10px;
    color: #060606;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cform-terms-h + .cform-terms-h,
.cform-terms p + .cform-terms-h {
    margin-top: 18px;
}

.cform-terms-fees {
    margin: 0 0 12px;
}

.cform-terms-fees > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.cform-terms-fees dt {
    font-weight: 500;
}

.cform-terms-fees dd {
    flex: none;
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cform-terms-q {
    margin-top: 12px;
    color: #060606;
    font-weight: 700;
}

@media (max-width: 767px) {
    .cform-pay-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .cform-pay-grid {
        grid-template-columns: 1fr;
    }

    .cform-pay-tile {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px 12px;
        padding: 12px 14px;
    }

    .cform-pay-ico {
        margin-bottom: 0;
    }

    .cform-pay-sub {
        flex-basis: 100%;
        padding-left: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-pay-tile,
    .cform-pay-ico,
    .cform-pay-tick {
        transition: none;
    }
}

/* A court-approved form's own instructions above section 1. */
.cform-intro p {
    margin: 0 0 12px;
}

/* ── Claim confirmation ───────────────────────────────────────────────── */
.claim-done {
    max-width: 760px;
}

.claim-done-h {
    margin: 0 0 22px;
    color: #060606;
    font-size: 26px;
    font-weight: 700;
}

.claim-done-ref {
    margin: 0 0 22px;
    padding: 20px 24px;
    border: 1px solid #e4e1dd;
    border-radius: var(--ca-radius);
    background: #fff;
}

.claim-done-ref-k {
    margin: 0 0 4px;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.claim-done-ref-v {
    margin: 0;
    color: #060606;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

.claim-done-sub {
    margin: 28px 0 10px;
    color: #060606;
    font-size: 19px;
    font-weight: 700;
}

.claim-done-body {
    color: #333;
    font-size: 15.5px;
    line-height: 25px;
}

.claim-done-body p {
    margin: 0 0 12px;
}

/* The gate: one short card, not a page of form. */
.cform-gate {
    max-width: 640px;
}

.cform-gate .cform-gate-err {
    margin: 0 0 18px;
}

/* Reveals the next purchase row. Quiet on purpose: most claimants list one
   purchase, and a loud button reads as "you must add more". */
.cform-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 9px 16px;
    border: 1px dashed #cfcac4;
    border-radius: 999px;
    background: #fff;
    color: #060606;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cform-add:hover,
.cform-add:focus-visible {
    border-color: var(--ca-primary);
    color: var(--ca-primary);
}

/* ── Fields ──────────────────────────────────────────────────────────────
   Scoped to .claim-form so restyling Bootstrap's controls here cannot reach
   the panel or a CMS-authored form elsewhere on the site. */
.claim-form .form-label {
    margin-bottom: 6px;
    color: #060606;
    font-size: 14px;
    font-weight: 600;
}

.claim-form .form-control,
.claim-form .form-select {
    padding: 11px 14px;
    border: 1px solid #dcd9d5;
    border-radius: 12px;
    background-color: #fff;
    color: #060606;
    font-size: 15px;
    line-height: 22px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.claim-form .form-control::placeholder {
    color: #a8a8a8;
}

.claim-form .form-control:focus,
.claim-form .form-select:focus {
    border-color: var(--ca-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
    outline: 0;
}

.claim-form .form-control:disabled {
    background-color: #f4f2f0;
    color: #888;
}

.claim-form .form-text {
    margin-top: 6px;
    color: #777;
    font-size: 13px;
    line-height: 19px;
}

/* Invalid state. Red border and message, and never only colour — the message
   underneath is what carries it for anyone who cannot see the difference. */
.claim-form .form-control.is-invalid,
.claim-form .form-select.is-invalid {
    border-color: #d33;
    background-image: none;
    padding-right: 14px;
}

.claim-form .form-control.is-invalid:focus,
.claim-form .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.15);
}

.claim-form .invalid-feedback {
    margin-top: 5px;
    color: #c22;
    font-size: 13px;
    line-height: 19px;
}

.cform-err {
    margin-top: 6px;
    color: #c22;
    font-size: 13px;
    line-height: 19px;
}

.cform-err-block {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(221, 51, 51, 0.3);
    border-radius: 14px;
    background: rgba(221, 51, 51, 0.05);
}

/* ── Uploads ───────────────────────────────────────────────────────────── */
.cform-up + .cform-up {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #eee;
}

.claim-form .cform-up .form-control[type='file'] {
    padding: 10px 14px;
    background: #faf9f8;
}

.claim-form .cform-up .form-control[type='file']::file-selector-button {
    margin-inline-end: 14px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: #060606;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cform-up-list {
    margin-top: 10px;
}

/* ── Failed submit ─────────────────────────────────────────────────────── */
.cform-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 24px;
    padding: 18px 22px;
    border: 1px solid rgba(221, 51, 51, 0.3);
    border-radius: var(--ca-radius);
    background: rgba(221, 51, 51, 0.05);
}

.cform-alert > .bi {
    flex: none;
    margin-top: 2px;
    color: #d33;
    font-size: 19px;
}

.cform-alert-t {
    margin: 0 0 3px;
    color: #060606;
    font-size: 16px;
    font-weight: 700;
}

.cform-alert-d {
    margin: 0;
    color: #555;
    font-size: 14.5px;
    line-height: 22px;
}

/* ── Certification ─────────────────────────────────────────────────────── */
.cform-card-final {
    border-color: #d8d5d1;
}

/* Set apart from the fields under it: this is the sentence a claimant is
   signing, not a caption on the signature box. */
.cform-oath {
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: var(--ca-radius-sm);
    background: #f2f0ee;
    color: #060606;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
}

/* The attestation is the case's own wording now, so it arrives as paragraphs. */
.cform-oath p {
    margin: 0 0 10px;
}

.cform-oath p:last-child {
    margin-bottom: 0;
}

.cform-turnstile {
    margin-top: 20px;
}

.cform-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #eee;
}

.cform-go {
    padding: 15px 30px;
    font-size: 16px;
}

.cform-submit-d {
    flex: 1 1 320px;
    margin: 0;
    color: #666;
    font-size: 13.5px;
    line-height: 21px;
}

@media (max-width: 767px) {
    .cform-sec-t {
        font-size: 18px;
        line-height: 26px;
    }

    .cform-sec-h {
        padding: 16px 18px;
    }

    .cform-card {
        padding: 20px 18px;
    }

    /* Full width, because a half-width button on a phone reads as a secondary
       action and this is the only one on the page. */
    .cform-go {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------------
   Two parties, their addresses, and one warning. No form: a form is a message
   going into a queue nobody has promised to empty, and somebody chasing a
   payment wants a number they can ring. */
/* One panel rather than two boxes bracketing the cards: the mistake to avoid,
   then the pages that answer most questions without anyone having to write.
   The red is confined to the top band so the warning still reads as a warning
   and the guidance under it does not. */
.contact-intro {
    margin: 0 0 28px;
    border: 1px solid #e6e4e1;
    border-radius: var(--ca-radius);
    overflow: hidden;
}

.contact-intro-warn {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(229, 62, 62, 0.25);
    background: rgba(229, 62, 62, 0.06);
}

.contact-intro-warn > .bi {
    flex: none;
    margin-top: 2px;
    color: #d33;
    font-size: 20px;
}

.contact-intro-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 16px 24px;
    background: #faf9f8;
}

.contact-intro-help-d {
    margin: 0;
    color: #555;
    font-size: 14.5px;
    line-height: 23px;
}

.contact-intro-help-l {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.contact-intro-help-l a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ca-primary);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.contact-intro-help-l .bi {
    font-size: 12px;
    transition: transform 0.18s ease;
}

.contact-intro-help-l a:hover .bi {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .contact-intro-help-l .bi {
        transition: none;
    }
}

.contact-warn-t {
    margin: 0 0 4px;
    color: #060606;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* No max-width. The panel is already the page's measure, and capping the line
   length inside it just left a ragged column of text in a wide box. */
.contact-warn-d {
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 24px;
}

/* Two explicit columns, not auto-fit.

   auto-fit sized the tracks from the container, which at most widths left a
   collapsed third track in the template ("580px 580px 0px") and pushed the two
   cards off an even split. Two parties is the normal case and they carry equal
   weight, so the split is stated rather than derived. A third contact wraps to
   the next row at the same width. */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* A column, so the details can be pinned to the bottom.

   The blocks above them are not the same height between cards — counsel names
   two attorneys where the administrator names one — which left Post, Phone and
   Email sitting at different heights in two cards standing side by side. The
   cards stretch to match (the grid default) and the detail rows are pushed
   down, so those lines start level whatever is written above them. */
.contact-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid #e6e4e1;
    border-radius: var(--ca-radius);
    background: #fff;
}

/* The role leads, the company qualifies it — so the company is set lighter
   and regular. It is the same line, not a subtitle. */
.contact-name {
    margin: 0;
    color: #060606;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 30px;
}

.contact-of {
    color: #6b6b6b;
    font-weight: 500;
}

.contact-role {
    margin: 8px 0 0;
    color: #666;
    font-size: 14px;
    line-height: 22px;
}

.contact-people {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: #060606;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
}

.contact-rows {
    margin: 18px 0 0;
    padding-top: 6px;
    /* Pinned to the bottom so the two cards' details line up. */
    margin-top: auto;
}

.contact-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid #eee;
}

.contact-row dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.contact-row dd {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 24px;
}

.contact-row a {
    color: var(--ca-primary);
    font-weight: 500;
}

.contact-empty {
    padding: 32px;
    border-radius: var(--ca-radius);
    background: #f2f0ee;
    color: #555;
    text-align: center;
}

.contact-empty p {
    margin: 0;
}

/* Two cards of addresses need the room before the phone breakpoint does. */
@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

/* ---------------------------------------------------------------------------
   Standalone pages
   ---------------------------------------------------------------------------
   Black, centred, no chrome. Used by two pages that deliberately do not wear
   the site's header and footer:

     · the site that has not opened yet — there is no site to frame it with
     · the 500 fallback — the header and footer read from the database, and a
       500 is often the database, so the page that reports the failure cannot
       depend on the thing that failed

   Everything here is self-contained: no logo, no query, no asset that has to
   resolve for the page to make sense. */
.solo {
    /* Border-box explicitly: this page does not load Bootstrap, so nothing
       else sets it, and 100vh plus 40px of padding overflowed by exactly the
       padding — a page with nothing on it that scrolled. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 24px;
    background: #060606;
    color: #fff;
    text-align: center;
}

.solo-k {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* The heading here is a sentence rather than a title, so it needs a wider
   measure than a page heading would — and balance, which keeps a sentence off
   three ragged lines with one word stranded on the last. */
.solo-t {
    margin: 0;
    max-width: 30ch;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -1.2px;
    text-wrap: balance;
}

.solo-d {
    margin: 20px 0 0;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 26px;
    text-wrap: pretty;
}

/* A single hairline under the message, the width of the text — the one piece
   of decoration, and it is there to close the block rather than to be seen. */
.solo-rule {
    width: 56px;
    height: 2px;
    margin: 32px 0 0;
    border: 0;
    background: var(--ca-primary);
    opacity: 1;
}

@media (max-width: 767px) {
    .solo-t {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.8px;
    }

    .solo-d {
        font-size: 15px;
        line-height: 24px;
    }
}