:root {
    color-scheme: light;
    --color-bg: #ffffff;
    --color-text: #16181d;
    --color-muted: #5d6570;
    --color-border: #e3e6e2;
    --color-accent: #1f4d3d;
    --color-accent-strong: #163a2e;
    --color-accent-soft: #e9f2ec;
    --color-accent-contrast: #ffffff;
    --color-surface: #f6f7f4;
    --color-warning-bg: #fff7e6;
    --color-warning-border: #e8b93a;
    --color-success-bg: #eaf6ee;
    --color-success-text: #1f4d3d;
    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
        Palatino, Georgia, "Times New Roman", serif;
    --radius-card: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(22, 40, 32, 0.05), 0 10px 30px rgba(22, 40, 32, 0.06);
    --max-width: 1040px;
    /* The sticky header's height, which the page's own sticky parts and
       in-page anchor jumps clear. These values are the header with the nav on
       one row and on two (the 900 rule below); the nav wraps by its content
       rather than at a breakpoint (641 to 900px holds one, two or three rows),
       so static/site-header.js keeps this at the measured height while the
       header sticks, and these only stand without scripting. At 640px and
       under the header does not stick, so it is 0. */
    --site-header-h: 66px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    /* Soft green-luminous canvas (the calm, spacious look): a faint glow at
       the top of every page fading to white. */
    background:
        radial-gradient(1100px 480px at 50% -120px,
            #e6f1ea 0%, #f4f9f5 45%, rgba(255, 255, 255, 0) 78%) no-repeat,
        var(--color-bg);
    line-height: 1.55;
}

h1, h2, h3,
.brand,
.legal-doc h1,
.legal-doc h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.005em;
}

.accent {
    color: var(--color-accent);
}

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: var(--color-accent);
}

/* One focus ring for everything the keyboard can reach. Product pages draw
   their own in their accent; this covers the shared chrome (header, nav
   menus, buttons, forms) that used to fall back to the browser default. */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Only the nav sticks; the notice strip scrolls away under it with the page.
   The header takes the body's own ground (the glow over --color-bg) and
   draws it against its own box, which starts at the top of the page at full
   width, so at rest it matches the canvas exactly and, stuck, it stays
   opaque. The pages that pin the chrome light restate the background after
   this. The hairline lies on the notice strip's top border at rest and
   separates the header from the page once it is stuck. */
.site-header {
    padding: 20px 0 14px;
    background: inherit;
    box-shadow: 0 1px 0 var(--color-border);
}

/* Sticky from tablet width up (John, 2026-09-12). On a phone the header is
   two to four rows of nav, too much of the screen to keep, so at 640px and
   under it scrolls away with the page as it always did; this query is the
   exact complement of the 640 rules, so no width is both or neither.

   base.html's header, a child of body. The captured examples carry a frozen
   copy of the chrome inside .lm-chrome, where a sticky header could only
   stick for the notice strip's height, so theirs scrolls away as before.
   z-index 50 is over every page layer (the scrollcraft copy layer is 20, the
   fixed strips and rails 40 and under) and under the example runs' status
   pill and progress line (55, 60); the nav menus open inside it.

   In-page anchor jumps land below the stuck header and its hairline, not
   under them. */
@media not all and (max-width: 640px) {
    body > .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    :root:has(> body > .site-header) {
        scroll-padding-top: calc(var(--site-header-h) + 1px);
    }
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.brand {
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--color-text);
}

.site-header nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.site-header nav a {
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.95rem;
}

.site-header nav a:hover {
    color: var(--color-accent);
}

main.wrap {
    padding-top: 40px;
    padding-bottom: 60px;
    min-height: 60vh;
}

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    margin-top: 64px;
    padding: 32px 0 40px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 18px;
}

.footer-links a {
    color: var(--color-text);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.footer-disclaimer {
    max-width: 860px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.footer-copy {
    margin: 0;
    font-size: 0.8rem;
}

/* Small-caps green label used by the notice strip and footer disclaimer
   ("NOTICE ·" / "DISCLAIMER ·"). */
.notice-label {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Site-wide notice strip under the header: the always-visible not-a-law-firm /
   AI-outputs-require-review statement. */
.notice-strip {
    background: var(--color-accent-soft);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text);
    padding: 8px 0;
}

.hero {
    text-align: center;
    padding: 56px 0 24px;
}

.hero h1 {
    font-size: 2.9rem;
    line-height: 1.12;
    margin: 0 auto 16px;
    max-width: 720px;
}

.hero p {
    color: var(--color-muted);
    max-width: 620px;
    margin: 0 auto 8px;
    font-size: 1.05rem;
}

.hero-cta {
    margin-top: 22px;
}

@media (max-width: 900px) {
    :root { --site-header-h: 105px; }
}

@media (max-width: 640px) {
    :root { --site-header-h: 0px; }

    .hero h1 { font-size: 2.1rem; }

    /* On a phone the second menu's label sits mid-screen, so its menu opens
       from the label's right edge instead of running off the screen. */
    .nav-dropdown + .nav-dropdown .nav-dropdown-menu {
        left: auto;
        right: 0;
    }
}

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.plan-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px;
    background: var(--color-bg);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-card h2 {
    margin: 0;
}

.plan-tagline {
    color: var(--color-muted);
    margin: 0;
    min-height: 2.6em;
}

.plan-price {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 4px 0;
}

.plan-price-alt {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.plan-trial-note {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 8px 0 4px 0;
}

.plan-renewal-note {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin: 0 0 4px 0;
}

.plan-disabled-note {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* What a tier includes (pricing page), the Full waitlist, and the account
   page's plan facts (2026-10-10 tiers). */
.plan-includes {
    margin: 4px 0 6px 0;
    padding-left: 1.1em;
    font-size: 0.9rem;
}

.plan-includes li {
    margin: 2px 0;
}

.waitlist form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.waitlist input[type="email"] {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.account-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 12px 0 18px 0;
}

.account-facts dt {
    font-weight: 600;
}

.account-facts dd {
    margin: 0;
}

/* A dated change note under a legal draft's banner: informational, so not
   the banner's bold warning type. */
.draft-banner.change-note {
    font-weight: 400;
    text-align: left;
}

button,
.button {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 22px;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease;
}

button:hover:not(:disabled),
.button:hover {
    background: var(--color-accent-strong);
}

button:disabled {
    background: var(--color-border);
    color: var(--color-muted);
    cursor: not-allowed;
}

/* A button that reads as a link, for the state changes that must be POSTs
   (sign out, switch to annual) but belong in running text or the nav. */
.linklike {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: underline;
}

.site-header nav .linklike {
    color: var(--color-text);
    text-decoration: none;
}

.site-header nav .linklike:hover {
    color: var(--color-accent);
}

.nav-form,
.inline-form {
    display: inline;
}

.button-small {
    padding: 5px 12px;
    font-size: 0.85rem;
}

form {
    margin: 0;
}

.setup-note {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.9rem;
    margin: 12px 0;
}

.setup-note code {
    word-break: break-all;
}

.setup-shot {
    margin: 16px 0;
}

.setup-shot img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: 8px;
}

.setup-shot--narrow img {
    max-width: 560px;
}

.setup-steps {
    padding-left: 1.4em;
}

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

.setup-shot figcaption {
    font-size: 0.9rem;
    color: var(--color-muted, #555);
    margin-top: 6px;
}

.login-panel {
    max-width: 480px;
}

.provider-button {
    display: block;
    margin: 10px 0;
    width: 100%;
}

.flash {
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-bottom: 16px;
}

.flash-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-text);
}

.connect-callout {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 16px 0 28px 0;
}

.connect-callout code {
    font-weight: 700;
}

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

.plans-table th,
.plans-table td {
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    font-size: 0.92rem;
}

.plans-table code {
    font-size: 0.82rem;
}

/* The connector tables are read to be typed from: larger code, no wrapping inside a URL. */
.connector-table code {
    font-size: 1rem;
    white-space: nowrap;
}

.connector-table td {
    font-size: 1rem;
}

/* A USPTO tier below the one the account holds: greyed, "Covered by". */
.plans-table .plan-row--covered td {
    color: var(--color-muted);
    background: var(--color-surface);
}

.plans-table .plan-row--covered a {
    color: var(--color-muted);
}

code {
    background: var(--color-surface);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
}

.draft-banner {
    background: var(--color-warning-bg);
    border: 2px solid var(--color-warning-border);
    color: #6b4a00;
    font-weight: 700;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 28px;
}

.legal-doc h1 {
    margin-bottom: 4px;
}

.legal-doc h2 {
    margin-top: 32px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
}

.legal-doc .counsel-note {
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    padding: 10px 14px;
    color: var(--color-muted);
}

.subprocessor-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.9rem;
}

.subprocessor-table th,
.subprocessor-table td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    text-align: left;
}

.addon-form {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 28px 0;
}

.addon-form input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.addon-delivery {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
}

.addon-delivery legend {
    padding: 0 6px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.addon-delivery label {
    display: block;
    font-size: 0.9rem;
    margin: 4px 0;
}

.product-detail .plan-price {
    font-size: 1.6rem;
}

.addon-tiers {
    padding-left: 20px;
}

.addon-tiers li {
    margin: 6px 0;
}

.content-placeholder {
    color: var(--color-muted);
    font-style: italic;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.screenshot {
    margin: 0;
}

.screenshot img {
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.screenshot figcaption {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 4px;
}

.video-list {
    padding-left: 20px;
}

.product-about h2,
.product-instructions h2 {
    margin-top: 32px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.badge-paid,
.badge-fulfilled {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-text);
}

.badge-refunded,
.badge-cancelled,
.badge-declined {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.badge-approved {
    border-color: var(--color-success-text);
}

.addon-review p {
    margin: 0 0 6px;
}

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

.addon-review form + form {
    margin-top: 10px;
}

.badge-rush {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    font-weight: 700;
    margin-left: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-bg: #14161a;
        --color-text: #e7e9ee;
        --color-muted: #9aa2ad;
        --color-border: #2b2f37;
        --color-accent: #7fd4a0;
        /* Brighter than --color-accent, not darker: this is the button hover
           ground, and in dark mode "stronger" has to mean more luminous or the
           near-black button label goes with it. The light-mode value (#163a2e)
           left hover at 1.5:1. */
        --color-accent-strong: #8fdcae;
        --color-accent-contrast: #0d1210;
        /* The notice strip's ground. Without this the strip kept its light
           green (#e9f2ec) under light-flipped text: 1.06:1, illegible. Sits a
           shade off the body wash the same way the light pair does, and the
           strip's own borders separate the two. */
        --color-accent-soft: #17241e;
        --color-surface: #1c1f25;
        --color-warning-bg: #2a2410;
        --color-warning-border: #c99b1f;
        --color-success-bg: #0f2a1a;
        --color-success-text: #7be0a2;
    }

    /* The light canvas has a green-tinted glow at the top of every page. That
       gradient was declared on `body` outside this block, so dark mode painted
       the same near-white wash under the flipped text and the header, brand and
       notice strip all landed around 1.05:1. This is the same gesture in the
       dark grounds the EDGAR page uses (edgar.css --ed-dark-surface), fading to
       --color-bg instead of to white. */
    body {
        background:
            radial-gradient(1100px 480px at 50% -120px,
                #14201b 0%, #111a16 45%, rgba(20, 22, 26, 0) 78%) no-repeat,
            var(--color-bg);
    }

    .draft-banner {
        color: #f0c95a;
    }
}

/* --- Nav "Products" dropdown (native <details>/<summary>, no JS) --- */
.nav-dropdown {
    position: relative;
}
.nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text);
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after {
    content: " \25BE";
    font-size: 0.75em;
    color: var(--color-muted);
}
.nav-dropdown[open] > summary,
.nav-dropdown > summary:hover { color: var(--color-accent); }
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-width: 210px;
    padding: 6px 0;
    z-index: 20;
}
.nav-dropdown-menu a {
    padding: 8px 16px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.92rem;
}
.nav-dropdown-menu a:hover {
    background: var(--color-surface);
    color: var(--color-accent);
}

/* --- Home overview cards --- */
.hero-cta { margin-top: 20px; }
.product-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 28px 0 44px;
}
.overview-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 22px;
    background: var(--color-surface);
}
.overview-card h2 { margin-top: 0; }
.overview-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.plan-details-link { margin-top: 12px; font-size: 0.9rem; }

/* --- Coverage page: filter + sortable columns --- */
.coverage-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 4px;
}
.coverage-filter { margin: 0; }
.coverage-filter input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.95rem;
    min-width: 260px;
}
.coverage-count { color: var(--color-muted); font-size: 0.9rem; margin: 0; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.coverage-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.coverage-table th.sortable::after {
    content: " \2195";
    color: var(--color-muted);
    font-size: 0.8em;
    opacity: 0.45;
}
.coverage-table th.sortable[aria-sort="ascending"]::after {
    content: " \2191";
    opacity: 1;
    color: var(--color-accent);
}
.coverage-table th.sortable[aria-sort="descending"]::after {
    content: " \2193";
    opacity: 1;
    color: var(--color-accent);
}
.coverage-table th.sortable:hover { color: var(--color-accent); }

/* Coverage table zebra striping for readability */
.coverage-table tbody tr:nth-child(even) {
    background: var(--color-surface);
}
.coverage-table tbody tr:hover {
    background: var(--color-success-bg);
}

/* Divider between Products dropdown items so they don't run together */
/* The brand mark in front of the product entries in the nav menus: a <use>
   of the header's own path (#lm-mark), so the drawing is on the page once. */
.nav-mark {
    display: inline-block; /* beats scrollcraft.css's `svg { display: block }` reset */
    width: 0.74em; /* 154:249, the mark's own proportions */
    height: 1.2em;
    margin-right: 0.5em;
    vertical-align: -0.25em;
    color: var(--color-accent);
}

.nav-dropdown-menu a + a {
    border-top: 1px solid var(--color-border);
}

/* Filing cells: monospace + preserved padding so form type and date align */
.coverage-table td.filing-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    white-space: pre;
    font-size: 0.85rem;
}

/* Sample AI prompt block on the privacy page (BYO endpoints section) */
.sample-prompt {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

/* Walkthrough prompts wrap (the base .sample-prompt is `white-space: pre`,
   which is right for a fixed command but truncates a long natural-language
   prompt the reader is meant to copy). */
.sample-prompt.wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

/* "What you should get" line under each walkthrough prompt. */
.prompt-expect {
    margin-top: 0.5rem;
    font-size: 0.92rem;
}

/* The walkthrough's prompts sit in the case study's composer (session.css),
   restated in the site's own tokens so the box follows the page's light and
   dark grounds instead of staying white. */
.cs-composer.wt-prompt {
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
    margin-top: 0.75rem;
}
.cs-composer.wt-prompt .cs-composer__label { color: var(--color-muted); }

/* A short passage quoted from a run's answer. */
.wt-quote {
    margin: 0.5rem 0 1rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.92rem;
}
.wt-quote p { margin: 0; }

/* Quoted filing text on the case-study page. */
.case-quote {
    margin: 1rem 0;
    padding: 0.9rem 1.2rem;
    border-left: 3px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.95rem;
}

.article-list {
    line-height: 1.9;
}

/* "Watch the explainer" on the plainer pages. Authored as a link to the video
   file so it works with scripting off; static/explainer.js upgrades it into a
   toggle that opens the player in place. Set below the article title and in the
   muted colour, because the article is the offer and the video is the second
   way in. Nothing loads until it is clicked. */

.explainer-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    /* Padding rather than margin: it is the tap target on a phone, where the
       label alone is only about 20px tall. */
    margin: 0 0 0.25rem;
    padding: 5px 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.explainer-link::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.5px 0 4.5px 7px;
    border-color: transparent transparent transparent var(--color-accent);
}

.explainer-link:hover,
.explainer-link:focus-visible {
    color: var(--color-text);
    text-decoration: none;
}

/* Open: the triangle turns down, so the row that opened a player is still
   identifiable after scrolling past it. */
.explainer-link[aria-expanded="true"]::before { transform: rotate(90deg); }

.explainer-frame {
    max-width: 46rem;
    margin: 0.6rem 0 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #000;
}

.explainer-player {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* The shared EDGAR paths-on block (templates/_edgar_paths_articles.html) on the
   plainer pages: /products/edgar/coverage and /products/edgar/walkthrough.
   /products/edgar renders the same markup under its own `ed-*` class names out
   of edgar.css, so nothing here is scoped to reach it and neither stylesheet
   has to know about the other. Deliberately small: these two pages keep the
   site's own light ground, so the block only needs a rule to sit under, a
   two-column grid, and list rows that read as a list. The explainer expander
   reuses .explainer-link above, which is the same affordance the case study
   page carries. */

.edgar-paths {
    margin: 2.75rem 0 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}

.edgar-paths__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem 2.5rem;
}

.edgar-paths__head {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

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

.edgar-paths__list li {
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.95rem;
    line-height: 1.45;
}

.edgar-paths__link { color: var(--color-accent); }

/* An article that is written but not yet published. It has to read as a state
   and not as a second link, so it never carries the accent colour. */
.edgar-paths__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- Brand mark (header) ---- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand__mark {
    color: var(--color-accent);
    flex: none;
}

.brand__word {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.005em;
}

/* Holding page for Terms / Privacy while the site is in private beta */
.legal-doc--soon .legal-soon {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0.5rem 0 1rem;
}

/* USPTO Full Bundle seat banner (_full_seats_banner.html). currentColor
   throughout, so it reads on every page palette without new tokens. */
.seats-banner {
    border: 2px solid currentColor;
    border-radius: var(--radius-card, 16px);
    padding: 14px 18px;
    margin: 12px 0 18px;
}

.seats-banner__lead {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.seats-banner__num {
    font-size: 2.4rem;
    line-height: 1;
    vertical-align: -0.08em;
}

.seats-banner__note {
    margin: 8px 0 0;
    font-size: 0.92rem;
    opacity: 0.82;
}

.seats-banner__note a {
    color: inherit;
    text-decoration: underline;
}