/* ============================================================
   legal.css — shared shell for the statement pages:
       /accessibility   Views/Home/Accessibility.cshtml
       /privacy         Views/Home/Privacy.cshtml
       /usage           (Terms, when it gets rebuilt)

   REPLACES accessibility.css. These pages want to look like each other, and
   maintaining the same hero/section/card rules in three files is how they
   drift apart. Everything is scoped under .lg-page.

   Local tokens resolve against the site palette first and fall back to
   literals, so the page renders correctly even if it loads before
   ew-theme.css in some future bundling change. --ew-brand is the current
   brand token; --ew-gold is deprecated and is NOT referenced here.

   Dark mode uses the standard EW2027 pair: explicit [data-theme="dark"] for
   the toggle, plus a prefers-color-scheme block guarded against an explicit
   light choice.

   These pages in particular have to practice what they preach:
     * every interactive element has a visible :focus-visible ring
     * body copy holds a comfortable measure rather than the full width
     * nothing depends on color alone
     * no transitions that fight prefers-reduced-motion
   ============================================================ */

.lg-page {
    --lg-brand: var(--ew-brand, #DDB785);
    --lg-ink: var(--ew-text, #14161a);
    --lg-ink-soft: var(--ew-text-muted, #4d5560);
    --lg-rule: var(--ew-border, #e2e5ea);
    --lg-surface: var(--ew-surface, #ffffff);
    --lg-surface-alt: var(--ew-surface-alt, #f6f7f9);
    max-width: 68rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4.5rem;
    color: var(--lg-ink);
}

[data-theme="dark"] .lg-page {
    --lg-brand: var(--ew-brand, #9389C5);
    --lg-ink: var(--ew-text, #e8eaee);
    --lg-ink-soft: var(--ew-text-muted, #a3abb7);
    --lg-rule: var(--ew-border, #2b3038);
    --lg-surface: var(--ew-surface, #14171c);
    --lg-surface-alt: var(--ew-surface-alt, #1b1f26);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lg-page {
        --lg-brand: var(--ew-brand, #9389C5);
        --lg-ink: var(--ew-text, #e8eaee);
        --lg-ink-soft: var(--ew-text-muted, #a3abb7);
        --lg-rule: var(--ew-border, #2b3038);
        --lg-surface: var(--ew-surface, #14171c);
        --lg-surface-alt: var(--ew-surface-alt, #1b1f26);
    }
}

/* ---------- shared type ---------- */

.lg-page p,
.lg-page li {
    line-height: 1.65;
}

.lg-page p {
    max-width: 68ch;
    margin: 0 0 1rem;
}

/* Links have to LOOK like links.

   The previous rule inherited body colour with a 1px underline, which on a page
   of prose reads as emphasis rather than something clickable — several links in
   the FAQ answers were being missed entirely.

   Colour alone can't carry it. --ew-brand is #DDB785 on light, which lands near
   1.9:1 against white — nowhere near the 4.5:1 body text needs, so brand-coloured
   link text would be both hard to read and a WCAG failure. The underline does the
   identifying work instead: 2px, in the brand colour, which is legible because
   it's a rule rather than a glyph. That also satisfies the requirement not to use
   colour as the only means of conveying information — the underline is present in
   both themes, in high contrast mode, and for anyone who can't distinguish the
   hue at all. */
.lg-page a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--lg-brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

    .lg-page a:hover {
        text-decoration-thickness: 3px;
        text-decoration-color: var(--lg-ink);
    }

    /* Buttons opt out — they already read as controls, and an underline inside a
   filled button just looks like a mistake. */
    .lg-page a.lg-btn,
    .lg-page a.footer-privacy-link {
        text-decoration: none;
    }

/* Inside FAQ answers the body text is --lg-ink-soft, so a link inheriting that
   sits at the same weight as everything around it. Pull links back to full ink
   so they're the darkest thing in the paragraph. */
.ct-faq-body a,
.lg-card a {
    color: var(--lg-ink);
    font-weight: 550;
}

.lg-page a:focus-visible {
    outline: 2px solid var(--lg-brand);
    outline-offset: 3px;
    border-radius: 2px;
}

.lg-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.05em 0.3em;
    border-radius: 3px;
    background: var(--lg-surface-alt);
}

/* ---------- hero ---------- */

.lg-hero {
    padding: 1rem 0 2.25rem;
    border-bottom: 1px solid var(--lg-rule);
}

.lg-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lg-brand);
}

.lg-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 22ch;
}

.lg-hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--lg-ink-soft);
}

.lg-dates {
    margin: 1.25rem 0 0;
    font-size: 0.88rem;
    color: var(--lg-ink-soft);
}

/* ---------- callout (the accessibility "tell us" block, the privacy summary) ---------- */

.lg-callout {
    margin: 2.25rem 0 0;
    padding: 1.75rem;
    border: 1px solid var(--lg-rule);
    border-left: 4px solid var(--lg-brand);
    border-radius: 10px;
    background: var(--lg-surface-alt);
}

    .lg-callout h2 {
        margin: 0 0 0.75rem;
        font-size: 1.3rem;
        letter-spacing: -0.01em;
    }

    .lg-callout > :last-child {
        margin-bottom: 0;
    }

.lg-callout-note {
    margin: 0;
    font-size: 0.92rem;
    color: var(--lg-ink-soft);
}

/* Plain-language summary bullets inside a callout. */
.lg-plain {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

    .lg-plain li {
        position: relative;
        padding-left: 1.4rem;
        max-width: 68ch;
    }

        /* Marker is decorative — the list is still a list to a screen reader. */
        .lg-plain li::before {
            content: "";
            position: absolute;
            left: 0.15rem;
            top: 0.62em;
            width: 0.42rem;
            height: 0.42rem;
            border-radius: 50%;
            background: var(--lg-brand);
        }

/* ---------- contact list ---------- */

.lg-contact {
    list-style: none;
    margin: 1.25rem 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
}

    .lg-contact li {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

.lg-contact-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-ink-soft);
}

.lg-contact a,
.lg-contact span:not(.lg-contact-label) {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--lg-ink);
}

/* ---------- table of contents ---------- */

.lg-toc {
    margin: 2.5rem 0 0;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--lg-rule);
    border-radius: 10px;
}

    .lg-toc h2 {
        margin: 0 0 1rem;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--lg-ink-soft);
    }

    .lg-toc ol {
        margin: 0;
        padding: 0 0 0 1.4rem;
        columns: 2;
        column-gap: 2.5rem;
    }

    .lg-toc li {
        margin: 0 0 0.45rem;
        break-inside: avoid;
    }

@media (max-width: 44rem) {
    .lg-toc ol {
        columns: 1;
    }
}

/* ---------- sections ---------- */

.lg-section {
    margin: 3rem 0 0;
    scroll-margin-top: 5rem; /* clears the sticky header on anchor jumps */
}

    .lg-section h2 {
        margin: 0 0 1rem;
        font-size: clamp(1.35rem, 2.4vw, 1.75rem);
        letter-spacing: -0.015em;
    }

    .lg-section h3 {
        margin: 1.75rem 0 0.6rem;
        font-size: 1.05rem;
        letter-spacing: -0.005em;
    }

.lg-lead {
    color: var(--lg-ink-soft);
    font-size: 1.05rem;
}

.lg-aside {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 2px solid var(--lg-rule);
    font-size: 0.95rem;
    color: var(--lg-ink-soft);
}

.lg-list {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
    max-width: 68ch;
}

    .lg-list li {
        margin-bottom: 0.5rem;
    }

/* ---------- card grid ---------- */

.lg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.lg-card {
    padding: 1.25rem;
    border: 1px solid var(--lg-rule);
    border-radius: 10px;
    background: var(--lg-surface);
}

    .lg-card h3 {
        margin: 0 0 0.5rem;
        font-size: 1.02rem;
    }

    .lg-card p {
        margin: 0;
        font-size: 0.94rem;
        color: var(--lg-ink-soft);
        max-width: none;
    }

/* ---------- definition list (known limitations, defined terms) ---------- */

.lg-defs {
    margin: 1.5rem 0 0;
    padding: 0;
}

    .lg-defs dt {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--lg-rule);
        font-size: 1.02rem;
        font-weight: 650;
    }

        .lg-defs dt:first-child {
            margin-top: 0.5rem;
        }

    .lg-defs dd {
        margin: 0.4rem 0 0;
        max-width: 68ch;
        line-height: 1.65;
        color: var(--lg-ink-soft);
    }

/* ---------- tables (cookie inventory, CCPA categories) ----------
   Wrapped in .lg-table-wrap, which scrolls horizontally on small screens.
   The wrapper carries tabindex="0" and role="region" in the markup so a
   keyboard user can actually reach and scroll it. */

.lg-table-wrap {
    margin: 1.5rem 0;
    overflow-x: auto;
    border: 1px solid var(--lg-rule);
    border-radius: 10px;
}

    .lg-table-wrap:focus-visible {
        outline: 2px solid var(--lg-brand);
        outline-offset: 2px;
    }

.lg-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.93rem;
}

    .lg-table caption {
        padding: 0.9rem 1rem;
        text-align: left;
        font-size: 0.88rem;
        color: var(--lg-ink-soft);
        border-bottom: 1px solid var(--lg-rule);
    }

    .lg-table th,
    .lg-table td {
        padding: 0.75rem 1rem;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--lg-rule);
    }

    .lg-table thead th {
        font-size: 0.74rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--lg-ink-soft);
        background: var(--lg-surface-alt);
    }

    .lg-table tbody th {
        font-weight: 650;
        white-space: nowrap;
    }

    .lg-table tbody tr:last-child th,
    .lg-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .lg-table td {
        color: var(--lg-ink-soft);
    }

/* ---------- closing ---------- */

.lg-closing {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--lg-rule);
}

.lg-reviewed {
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: var(--lg-ink-soft);
}

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

@media (max-width: 40rem) {
    .lg-page {
        padding: 1.5rem 1rem 3.5rem;
    }

    .lg-callout,
    .lg-toc {
        padding: 1.25rem;
    }

    .lg-contact {
        gap: 1rem;
    }
}

/* ---------- respect the setting ---------- */

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

/* ---------- forced colors (Windows high contrast) ---------- */

@media (forced-colors: active) {
    .lg-callout,
    .lg-card,
    .lg-toc,
    .lg-table-wrap {
        border: 1px solid CanvasText;
    }

    .lg-plain li::before {
        background: CanvasText;
    }

    .lg-page a:focus-visible {
        outline: 2px solid Highlight;
    }
}

/* ============================================================
   Advertising opt-out UI — /privacy-choices and the GPC confirmation
   banner on /privacy.
   ============================================================ */

/* The "Opt-Out Preference Signal Honored" notice. CPPA regulations effective
   1 Jan 2026 require visibly confirming the signal was received, so this has
   to be legible, not a whisper. role="status" in the markup announces it. */
.lg-signal {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--lg-rule);
    border-left: 4px solid var(--lg-brand);
    border-radius: 8px;
    background: var(--lg-surface-alt);
    max-width: 68ch;
    font-size: 0.96rem;
}

/* Symmetry of choice is a legal requirement here, not a style preference:
   opting out must be no harder than opting in. Both buttons therefore share
   one class with identical weight, and .is-current only marks the current
   state — it does not promote either option. Do not add a "primary" variant. */
.lg-choice-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.lg-btn {
    font: inherit;
    font-weight: 600;
    padding: 0.7rem 1.15rem;
    color: var(--lg-ink);
    background: var(--lg-surface);
    border: 1px solid var(--lg-rule);
    border-radius: 8px;
    cursor: pointer;
}

    .lg-btn:hover {
        border-color: var(--lg-brand);
    }

    .lg-btn:focus-visible {
        outline: 2px solid var(--lg-brand);
        outline-offset: 3px;
    }

    /* Current state is marked with a border AND a check, never with color alone. */
    .lg-btn.is-current {
        border-color: var(--lg-brand);
        background: var(--lg-surface-alt);
    }

        .lg-btn.is-current::before {
            content: "\2713\00a0";
            font-weight: 700;
        }

@media (forced-colors: active) {
    .lg-signal,
    .lg-btn {
        border: 1px solid CanvasText;
    }

        .lg-btn.is-current {
            border: 2px solid Highlight;
        }
}

/* ============================================================
   Legalese blocks — the all-caps warranty and liability paragraphs.

   These are set in caps because "conspicuous" is a legal standard under UCC
   2-316 and courts have leaned on capitalization to satisfy it. Caps are also
   genuinely harder to read, so everything else here works to offset that:
   slightly smaller, looser tracking, extra line-height, and a narrower measure
   than surrounding prose. Do not "fix" this by removing the caps.
   ============================================================ */

.lg-legalese {
    font-size: 0.86rem;
    line-height: 1.75;
    letter-spacing: 0.02em;
    max-width: 60ch;
    padding: 1rem 1.25rem;
    border: 1px solid var(--lg-rule);
    border-radius: 8px;
    background: var(--lg-surface-alt);
    color: var(--lg-ink-soft);
}

/* ============================================================
   Contact form — /contact
   ============================================================ */

.ct-form {
    max-width: 46rem;
    margin-top: 1.5rem;
}

.ct-field {
    margin-bottom: 1.25rem;
}

    .ct-field label {
        display: block;
        margin-bottom: 0.35rem;
        font-weight: 600;
        font-size: 0.95rem;
    }

.ct-optional {
    font-weight: 400;
    color: var(--lg-ink-soft);
}

.ct-field input,
.ct-field select,
.ct-field textarea {
    width: 100%;
    font: inherit;
    padding: 0.65rem 0.8rem;
    color: var(--lg-ink);
    background: var(--lg-surface);
    border: 1px solid var(--lg-rule);
    border-radius: 8px;
}

.ct-field textarea {
    resize: vertical;
    min-height: 8rem;
}

    .ct-field input:focus-visible,
    .ct-field select:focus-visible,
    .ct-field textarea:focus-visible {
        outline: 2px solid var(--lg-brand);
        outline-offset: 2px;
        border-color: var(--lg-brand);
    }

    /* :invalid alone would flag every empty required field before the person has
       typed anything, which reads as being told off for not having started yet.
       :user-invalid only fires after interaction. */
    .ct-field input:user-invalid,
    .ct-field textarea:user-invalid {
        border-color: #c0392b;
    }

.ct-help {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--lg-ink-soft);
}

.ct-count {
    display: inline-block;
    margin-left: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.ct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

@media (max-width: 34rem) {
    .ct-row {
        grid-template-columns: 1fr;
    }
}

/* Honeypot. Positioned off-canvas rather than display:none — some bots skip
   fields that are explicitly hidden, and this one wants to be found. */
.ct-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ct-error {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid #c0392b;
    border-left-width: 4px;
    border-radius: 8px;
    color: var(--lg-ink);
    background: var(--lg-surface-alt);
    font-size: 0.95rem;
}

    .ct-error:focus-visible {
        outline: 2px solid var(--lg-brand);
        outline-offset: 2px;
    }

.ct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
}

.ct-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.ct-privacy {
    font-size: 0.85rem;
    color: var(--lg-ink-soft);
}

.ct-ref {
    display: inline-block;
    margin-left: 0.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--lg-ink-soft);
}

@media (forced-colors: active) {
    .ct-field input,
    .ct-field select,
    .ct-field textarea,
    .ct-error {
        border: 1px solid CanvasText;
    }
}

/* ---------- FAQ search + list (/contact) ---------- */

.ct-search {
    margin: 1.25rem 0 1.5rem;
    max-width: 34rem;
}

    .ct-search label {
        display: block;
        margin-bottom: 0.35rem;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .ct-search input {
        width: 100%;
        font: inherit;
        padding: 0.65rem 0.8rem;
        color: var(--lg-ink);
        background: var(--lg-surface);
        border: 1px solid var(--lg-rule);
        border-radius: 8px;
    }

        .ct-search input:focus-visible {
            outline: 2px solid var(--lg-brand);
            outline-offset: 2px;
            border-color: var(--lg-brand);
        }

.ct-faq-list {
    border-top: 1px solid var(--lg-rule);
    max-width: 62rem;
}

.ct-faq {
    border-bottom: 1px solid var(--lg-rule);
}

    .ct-faq > summary {
        padding: 0.9rem 0.25rem;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
    }

        /* Replace the default marker with one that rotates, so open/closed is
       obvious. ::-webkit-details-marker removal is needed for Safari. */
        .ct-faq > summary::-webkit-details-marker {
            display: none;
        }

        .ct-faq > summary::before {
            content: "";
            flex: 0 0 auto;
            width: 0.45rem;
            height: 0.45rem;
            border-right: 2px solid var(--lg-brand);
            border-bottom: 2px solid var(--lg-brand);
            transform: rotate(-45deg) translateY(-0.1rem);
            transition: transform 0.15s ease;
        }

    .ct-faq[open] > summary::before {
        transform: rotate(45deg);
    }

    .ct-faq > summary:focus-visible {
        outline: 2px solid var(--lg-brand);
        outline-offset: 2px;
        border-radius: 4px;
    }

.ct-faq-body {
    padding: 0 0 1rem 1.3rem;
}

    .ct-faq-body p {
        margin: 0 0 0.75rem;
        font-size: 0.96rem;
        color: var(--lg-ink-soft);
    }

        .ct-faq-body p:last-child {
            margin-bottom: 0;
        }

.ct-noresults {
    margin-top: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--lg-rule);
    border-left: 4px solid var(--lg-brand);
    border-radius: 8px;
    background: var(--lg-surface-alt);
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .ct-faq > summary::before {
        transition: none;
    }
}

@media (forced-colors: active) {
    .ct-search input,
    .ct-noresults {
        border: 1px solid CanvasText;
    }
}

/* ---------- FAQ categories (/contact) ----------
   Collapsed by default so the form stays near the top. The category summary is
   the heavier of the two levels; question summaries inside sit lighter, so the
   hierarchy reads at a glance when several are open at once. */

.ct-cat {
    border-bottom: 1px solid var(--lg-rule);
}

    .ct-cat > summary {
        padding: 1rem 0.25rem;
        font-size: 1.05rem;
        font-weight: 650;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

        .ct-cat > summary::-webkit-details-marker {
            display: none;
        }

        .ct-cat > summary::before {
            content: "";
            flex: 0 0 auto;
            width: 0.5rem;
            height: 0.5rem;
            border-right: 2px solid var(--lg-brand);
            border-bottom: 2px solid var(--lg-brand);
            transform: rotate(-45deg);
            transition: transform 0.15s ease;
        }

    .ct-cat[open] > summary::before {
        transform: rotate(45deg);
    }

    .ct-cat > summary:focus-visible {
        outline: 2px solid var(--lg-brand);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* Count badge, populated by script. Pushed right, quiet — it's orientation,
   not a call to action. */
.ct-cat-n {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lg-ink-soft);
    font-variant-numeric: tabular-nums;
}

    .ct-cat-n:empty {
        display: none;
    }

.ct-cat-body {
    padding: 0 0 0.75rem 1.35rem;
    border-top: 1px solid var(--lg-rule);
}

    /* Inside a category the question rows lose their own bottom rule on the last
   one, so the group reads as a block rather than colliding with the category
   divider beneath it. */
    .ct-cat-body .ct-faq:last-child {
        border-bottom: 0;
    }

    .ct-cat-body .ct-faq > summary {
        font-weight: 500;
        font-size: 0.97rem;
    }

@media (prefers-reduced-motion: reduce) {
    .ct-cat > summary::before {
        transition: none;
    }
}

/* ---------- Vanity phone number ----------
   866-EPS-GUID is the memorable form; the digits follow in parentheses because
   not everyone will decode the letters, and a screen reader may run "EPSGUID"
   together as a word. Both halves live inside the same <a>, so the whole thing
   is one tap target on mobile — splitting them would give you a dialable half
   and a dead half sitting next to each other.

   The tel: href is always all-digits. Dialers don't resolve letters reliably. */

.tel-digits {
    font-weight: 400;
    font-size: 0.9em;
    color: var(--lg-ink-soft);
    white-space: nowrap;
}

/* Marks a link that leads to subscriber-only content. Text, not colour — the
   word "Subscribers" survives greyscale, high contrast, and a screen reader,
   where a coloured dot or a lock glyph wouldn't. */
.ct-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lg-ink-soft);
    border: 1px solid var(--lg-rule);
    border-radius: 999px;
    vertical-align: 0.08em;
    white-space: nowrap;
}

@media (forced-colors: active) {
    .ct-badge {
        border: 1px solid CanvasText;
    }
}