/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
/* The code is drawn one PNG pixel per six of its own, and the light squares are part of what a
   camera reads: it keeps its own white ground in either theme, and a narrow screen shrinks it
   without the smoothing that turns the squares into a blur no phone can resolve. */
.authenticator-qr[b-216ra5ad0v] {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    margin: 0.75rem 0 1.25rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: var(--radius-sm, 8px);
}
/* /Components/Account/Pages/Manage/Integrator.razor.rz.scp.css */
.integrator-id-card[b-3lmseyb6id] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
}

.integrator-id[b-3lmseyb6id] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    margin: 0.15rem 0 0.5rem;
}

/* The read-only summary reuses the shared account-facts grid; the description row earns it
   a little more measure than the account card. */
.integrator-summary[b-3lmseyb6id] {
    max-width: 40rem;
}

/* The advertised-area chips, drawn as the public directory card draws them (that page's
   copy is scoped to it). */
.integrator-areas[b-3lmseyb6id] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.integrator-areas li[b-3lmseyb6id] {
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    white-space: nowrap;
}

.form-legend[b-3lmseyb6id] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.area-grid[b-3lmseyb6id] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.4rem 1rem;
}

.area-check[b-3lmseyb6id] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.consent-check[b-3lmseyb6id] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pin-field[b-3lmseyb6id] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    padding: 0.85rem;
}

.pin-actions[b-3lmseyb6id] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.pin-map[b-3lmseyb6id] {
    height: 320px;
    width: 100%;
    border-radius: 6px;
}

.pin-credit[b-3lmseyb6id] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
}

.image-upload[b-3lmseyb6id] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.image-upload .form-control[b-3lmseyb6id] {
    width: auto;
    flex: 1 1 220px;
}

.image-gallery[b-3lmseyb6id] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.image-tile[b-3lmseyb6id] {
    margin: 0;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.image-tile img[b-3lmseyb6id] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.image-placeholder[b-3lmseyb6id] {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    font-size: 0.9rem;
}

.image-tile figcaption[b-3lmseyb6id] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.6rem 0.7rem;
}

.image-caption[b-3lmseyb6id] {
    font-size: 0.9rem;
}

.image-note[b-3lmseyb6id] {
    font-size: 0.8rem;
}

/* The remove verb sits at the foot of its own tile, so a row of tiles whose captions run to
   different lengths still lines the buttons up. */
.image-delete[b-3lmseyb6id] {
    margin: auto 0 0;
}

/* Moderation-state badges layered onto the global .status-badge base. */
.status-badge.status-approved[b-3lmseyb6id] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.status-badge.status-pending[b-3lmseyb6id] {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}

.status-badge.status-rejected[b-3lmseyb6id] {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
/* /Components/Pages/Compare/ComparisonHub.razor.rz.scp.css */
/* The hub is a chooser, not a price row: same surface, border and radius the landing already
   uses, under names that say what the cards are. Three columns, then two, then one, like the
   pricing row, without borrowing that row's class. */

.cmp-hub-cards[b-1ecnypa12m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
}

.cmp-hub-card[b-1ecnypa12m] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
}

.cmp-hub-card h2[b-1ecnypa12m] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.cmp-hub-card p[b-1ecnypa12m] {
    flex: 1;
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: 0.95rem;
    text-wrap: pretty;
}

.cmp-hub-card a[b-1ecnypa12m] {
    font-weight: 600;
    margin-top: auto;
}

@media (max-width: 900px) {
    .cmp-hub-cards[b-1ecnypa12m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .cmp-hub-cards[b-1ecnypa12m] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Compare/ComparisonPage.razor.rz.scp.css */
/* Comparison pages: long prose in the site's one column. Everything structural is borrowed from
   the marketing pages (.page-head, .feat-points, .land-cta-row) so these cannot drift into a look
   of their own; what lives here is only the reading measures a long piece of prose needs and a
   sales page does not, and the rows that set one product's block beside the other's. */

/* The age of the information, right under the title where it is read before the claims. */
.cmp-reviewed[b-enb5jevbrt] {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* The paragraph that answers the question, one step up in size from the lists under it. */
.cmp-lead[b-enb5jevbrt] {
    font-size: 1.15rem;
    margin: 0 0 3rem;
    max-width: 46rem;
}

.cmp-block[b-enb5jevbrt] {
    max-width: 46rem;
    margin: 0 0 3rem;
}

/* Two blocks read across, one product beside the other: the row takes the whole column, and each
   half lands near the reading measure on its own. The row owns the gap and the bottom margin, so
   the blocks inside it carry neither. */
.cmp-pair[b-enb5jevbrt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 4rem;
    margin: 0 0 3rem;
}

.cmp-pair > .cmp-block[b-enb5jevbrt] {
    max-width: none;
    margin: 0;
}

@media (max-width: 900px) {
    .cmp-pair[b-enb5jevbrt] { grid-template-columns: minmax(0, 1fr); }
}

.cmp-block h2[b-enb5jevbrt] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
}

.cmp-note[b-enb5jevbrt] {
    margin: -0.4rem 0 1.2rem;
}

/* The facts about the other product are set apart from our own claims: quieter, and marked as
   quotation rather than as features of ours. */
.cmp-facts[b-enb5jevbrt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.cmp-facts li[b-enb5jevbrt] {
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    color: var(--muted);
}

/* The rules above the closing blocks run the width of the rows above them; the sentences under a
   rule keep the reading measure. */
.cmp-cta[b-enb5jevbrt] {
    max-width: none;
    padding-top: 2.6rem;
    border-top: 1px solid var(--border);
}

/* The two notices the page owes the reader: how the information was gathered, and whose marks
   these are. Small, at the end, and never hidden. */
.cmp-meta[b-enb5jevbrt] {
    margin: 2.8rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.88rem;
}

.cmp-meta p[b-enb5jevbrt] {
    max-width: 46rem;
    margin: 0 0 0.6rem;
}

.cmp-others[b-enb5jevbrt] {
    margin-top: 2.4rem;
}

.cmp-others h2[b-enb5jevbrt] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    font-weight: 650;
    margin-bottom: 0.7rem;
}

.cmp-others ul[b-enb5jevbrt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
}

.cmp-others a[b-enb5jevbrt] {
    font-weight: 600;
}
/* /Components/Pages/Integrators/Directory.razor.rz.scp.css */
/* Entry state: the program pitch, then the country gate. The blocks themselves are the site's
   shared landing language (kicker/head, pillar cards, call-out band) — only the vertical rhythm
   between them is this page's business, and on a canvas with no bands the air is what separates
   one block from the next. */
.directory-program[b-7r6ahnw54g] { margin: 0 0 4.5rem; }

/* The shared call-out band, sized for this narrower column: the landing's own padding would leave
   the copy almost no measure here. */
.directory-signup[b-7r6ahnw54g] {
    padding: 2.2rem;
}

/* Four pillars read as a 2x2 block: the shared auto-fit track lands on a ragged 3 + 1 at this
   page's column width. It halves to a single file on a phone, like the audience row does. */
.directory-program .pillar-grid[b-7r6ahnw54g] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 2rem;
}

@media (max-width: 560px) {
    .directory-program .pillar-grid[b-7r6ahnw54g] { grid-template-columns: minmax(0, 1fr); }
}

/* One step under the page title: the landing's H2 scale is tuned for its full-bleed sections and
   would tie with the H1 in this narrower column. */
.directory-program .land-h2[b-7r6ahnw54g],
.directory-find .land-h2[b-7r6ahnw54g] { font-size: clamp(1.65rem, 3vw, 2.2rem); }

/* The head sits tight on the filter row, which carries its own top margin. */
.directory-find .land-section-head[b-7r6ahnw54g] { margin-bottom: 0.75rem; }

.directory-filters[b-7r6ahnw54g] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin: 1.5rem 0;
}

.directory-filters label[b-7r6ahnw54g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Padding/border/background/etc. come from the site-wide base select rule (app.css);
   only the width is specific to this filter row. */
.directory-filters select[b-7r6ahnw54g] {
    min-width: 12rem;
}

/* Empty region: an invitation, not a dead end — the same card, sized to hold the CTA. */
.directory-empty[b-7r6ahnw54g] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 10px;
    padding: 2.25rem 1.5rem;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    text-align: center;
}

.directory-empty h2[b-7r6ahnw54g] {
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    margin-bottom: 0.5rem;
}

.directory-empty p[b-7r6ahnw54g] {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

.directory-count[b-7r6ahnw54g] {
    margin: 0.5rem 0 1rem;
}

.directory-list[b-7r6ahnw54g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.integrator-card[b-7r6ahnw54g] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.integrator-head[b-7r6ahnw54g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.integrator-card h3[b-7r6ahnw54g] {
    margin: 0;
}

.integrator-loc[b-7r6ahnw54g] {
    margin: 0;
    font-size: 0.9rem;
}

.integrator-desc[b-7r6ahnw54g] {
    margin: 0.25rem 0;
}

/* The approved showcase, as thumbnails: fixed-height row, each image cropped to a small tile so
   the card stays a card whatever the source dimensions are. The bytes are the moderated JPEGs
   (1600px / 1 MB ceilings), lazy-loaded, so the row costs a few thumbnails, never a page of
   full-size screenshots. */
.integrator-gallery[b-7r6ahnw54g] {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.integrator-gallery img[b-7r6ahnw54g] {
    display: block;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, #d0d0d0);
}

.integrator-areas[b-7r6ahnw54g] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* The site's own pill tone: the palette carries two surfaces, and the second one is what a chip
   is drawn in everywhere else. */
.integrator-areas li[b-7r6ahnw54g] {
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    white-space: nowrap;
}

.integrator-contacts[b-7r6ahnw54g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

.pager[b-7r6ahnw54g] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* The invitation that closes a region with partners in it: one line and the way in, quieter than
   the entry pitch because the reader came here for the list. */
.directory-join[b-7r6ahnw54g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 10px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
}

.directory-join p[b-7r6ahnw54g] {
    margin: 0;
    max-width: 44rem;
}
/* /Components/Pages/Integrators/IntegratorLevelBadge.razor.rz.scp.css */
/* Recognition tiers, on the shared .status-badge pill. One metallic hue per tier, mixed against the
   theme tokens (--surface/--text/--border) so the soft badge stays legible in light and dark alike.
   The base rule sets the default --tier first; each tier rule overrides it after (equal specificity,
   later wins). */
.level-badge[b-ecihpm0ef9] {
    --tier: var(--muted);
    background: color-mix(in srgb, var(--tier) 16%, var(--surface));
    color: color-mix(in srgb, var(--tier) 68%, var(--text));
    border-color: color-mix(in srgb, var(--tier) 45%, var(--border));
}

.level-bronze[b-ecihpm0ef9] {
    --tier: #b06a2c;
}

.level-silver[b-ecihpm0ef9] {
    --tier: #7f8792;
}

.level-gold[b-ecihpm0ef9] {
    --tier: #c08a1e;
}

.level-platinum[b-ecihpm0ef9] {
    --tier: #3f9fb0;
}
/* /Components/Pages/Integrators/IntegratorRankingNote.razor.rz.scp.css */
.directory-criterion[b-prljn0i5qm] {
    margin: -0.25rem 0 1rem;
    font-size: 0.9rem;
}
/* /Components/Pages/Marketing/CampaignEdit.razor.rz.scp.css */
/* Campaign draft editor: the form first, the message as it will arrive below it. */

/* The two blocks stack: beside the area's rail there is no width for two readable columns, and a
   squeezed preview is worse than none. The form keeps a comfortable writing measure; the preview
   below gets the full column, so the message is judged at the width it will actually arrive in. */
.campaign-form[b-msb2pco9m8],
.campaign-review[b-msb2pco9m8] {
    flex: 1 1 100%;
}

.campaign-form[b-msb2pco9m8] {
    max-width: 46rem;
}

/* What a section says about itself reads at a text measure. */
p.muted[b-msb2pco9m8] {
    max-width: 68ch;
}

/* The only look at the email before a mass send, so it gets real page height instead of the
   iframe default box (300x150). The message itself is a light-background HTML email: pinning
   the frame's color scheme keeps a dark-theme browser from repainting its own canvas behind it. */
.email-preview[b-msb2pco9m8] {
    display: block;
    width: 100%;
    /* An email arrives in a 600px card; a frame wider than an inbox pane only adds margin
       around it, so the preview stops growing at about that width. */
    max-width: 48rem;
    height: min(70vh, 720px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
    color-scheme: light;
}
/* /Components/Pages/Marketing/Campaigns.razor.rz.scp.css */
/* Campaign list: the draft form on the left of the row, the whole list under it. */

/* The draft form keeps a writing measure, the same one the campaign editor gives its form: a
   lone column would otherwise take the whole pane on a wide screen. */
.row > .col-xl-6[b-1dbgn86vjn] {
    max-width: 46rem;
}

/* What the page says about itself reads at a text measure, not across the whole column. */
p.muted[b-1dbgn86vjn] {
    max-width: 68ch;
}

/* The trailing cell of a row: what opens the campaign, then what ends it, on one line and sized
   to the row rather than to a form. */
.campaign-actions[b-1dbgn86vjn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.campaign-actions .btn[b-1dbgn86vjn] {
    min-height: 2rem;
    padding: 0 0.7rem;
    font-size: 0.8125rem;
}
/* /Components/Pages/Marketing/Chat.razor.rz.scp.css */
/* The site's chat: the month in three cards (state, spend against the ceiling, questions), then the
   newest questions with their answers. The same boxed panel the rest of the area is written in. */

.chat-panel[b-7jq48yznpg] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1.1rem 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
}

.chat-panel > h3:first-child[b-7jq48yznpg] {
    margin-top: 0;
}

/* What the page says about itself reads at a text measure, not across the whole column. */
p.muted[b-7jq48yznpg] {
    max-width: 68ch;
}

/* ---- This month ---- */

.chat-cards[b-7jq48yznpg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 760px) {
    .chat-cards[b-7jq48yznpg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.chat-card[b-7jq48yznpg] {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    padding: 0.8rem 0.95rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.card-label[b-7jq48yznpg] {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.card-note[b-7jq48yznpg] {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.82rem;
}

/* The number is the answer the card exists for. Tabular figures so a cent lines up with a cent. */
.count[b-7jq48yznpg] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* The state in words: on reads in the success ink, off in the warning ink, never an alarm, since an
   off chat is a setting or a ceiling doing its job. */
.chat-state[b-7jq48yznpg] {
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.35;
}

.chat-state.is-on[b-7jq48yznpg] {
    color: var(--success);
    font-size: 2rem;
    line-height: 1.1;
}

.chat-state.is-off[b-7jq48yznpg] {
    color: var(--warning);
}

/* ---- Newest questions ---- */

/* The column beside the area rail is not elastic, so the overflow belongs to the table. */
.chat-table-scroll[b-7jq48yznpg] {
    overflow-x: auto;
}

.chat-table td[b-7jq48yznpg] {
    vertical-align: top;
    font-size: 0.88rem;
}

.chat-nowrap[b-7jq48yznpg] {
    white-space: nowrap;
}

/* When and where: the date on its line, the language and the page under it in the quiet ink. */
.chat-asked > span[b-7jq48yznpg] {
    display: block;
}

.chat-asked > span + span[b-7jq48yznpg] {
    margin-top: 0.15rem;
}

.chat-where[b-7jq48yznpg] {
    color: var(--muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* The words a visitor wrote and the answer they got, with their own line breaks; a long answer
   scrolls inside its cell instead of stretching the whole table. */
.chat-text[b-7jq48yznpg] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-question[b-7jq48yznpg] {
    min-width: 12rem;
    max-width: 20rem;
}

.chat-answer[b-7jq48yznpg] {
    min-width: 16rem;
    max-height: 12rem;
    overflow-y: auto;
}

.chat-source[b-7jq48yznpg] {
    display: block;
    white-space: nowrap;
}

.table .num[b-7jq48yznpg] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Marketing/IntegratorImages.razor.rz.scp.css */
/* What the page says about itself reads at a text measure, not across the whole column. */
p.muted[b-2bpw8xnfv9] {
    max-width: 68ch;
}

.moderation-grid[b-2bpw8xnfv9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.moderation-card[b-2bpw8xnfv9] {
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.moderation-thumb[b-2bpw8xnfv9] {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    border-radius: 6px;
}

.moderation-meta[b-2bpw8xnfv9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.moderation-caption[b-2bpw8xnfv9] {
    margin: 0.25rem 0 0;
    font-style: italic;
}

.moderation-actions[b-2bpw8xnfv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: auto;
}

.moderation-reject[b-2bpw8xnfv9] {
    display: flex;
    gap: 0.4rem;
    flex: 1;
}

.moderation-reject .form-control[b-2bpw8xnfv9] {
    min-width: 0;
}
/* /Components/Pages/Marketing/MarketingAbout.razor.rz.scp.css */
/* A panel's explanation, folded: the closed line reads as a quiet affordance in the muted ink, at
   the size of the notes around it, never as another heading competing with the panel's title. */

.marketing-about[b-bodox02t0e] {
    margin: 0 0 1rem;
}

.marketing-about > summary[b-bodox02t0e] {
    width: fit-content;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
}

.marketing-about > summary:hover[b-bodox02t0e],
.marketing-about[open] > summary[b-bodox02t0e] {
    color: var(--text);
}

/* The paragraphs come from the page that owns them, so they are reached through ::deep; they read
   at a text measure, the same one the area's other notes keep. */
.marketing-about-body[b-bodox02t0e] {
    margin-top: 0.5rem;
    max-width: var(--read-max);
}

.marketing-about-body[b-bodox02t0e]  p {
    margin: 0 0 0.6rem;
}

.marketing-about-body[b-bodox02t0e]  p:last-child {
    margin-bottom: 0;
}
/* /Components/Pages/Marketing/MarketingLayout.razor.rz.scp.css */
/* Marketing area frame: a fixed rail and the page's own column, on the account area's grid so the
   two internal areas read as one family. */

.marketing-grid[b-c621wxq6yx] {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 760px) {
    .marketing-grid[b-c621wxq6yx] { grid-template-columns: 1fr; }
}

.marketing-rail[b-c621wxq6yx] {
    display: grid;
    gap: 1.1rem;
    /* The first entry's label lines up with the page title beside it instead of with the box. */
    margin-top: 0.35rem;
}

/* The area's standing notes, folded under the menu: the fold itself is the one every panel of the
   area draws, set in a little from the rail's edge. */
.marketing-rail-note[b-c621wxq6yx] {
    padding: 0 0.35rem;
}

/* A table is the widest thing a page here draws, so the column is allowed to shrink under it
   instead of pushing the rail off the frame. */
.marketing-pane[b-c621wxq6yx] { min-width: 0; }
/* /Components/Pages/Marketing/MarketingNav.razor.rz.scp.css */
/* The Marketing area's own rail, on the same plate the account menu uses: a boxed column of quiet
   entries with the open one on the soft accent. Deliberately not the topbar's nav, whose active
   underline is drawn for a horizontal bar and lands on whatever follows it. */

.marketing-nav[b-7n4adghmai] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.marketing-nav a[b-7n4adghmai] {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 500;
}

.marketing-nav a:hover[b-7n4adghmai] {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

/* Where you are: the soft accent plate the account menu and the docs rail already mark with, so the
   blue names the entry instead of becoming the loudest surface on the page. */
.marketing-nav a.is-current[b-7n4adghmai] {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="dark"] .marketing-nav a.is-current[b-7n4adghmai] {
    background: var(--surface-2);
}
/* /Components/Pages/Marketing/Traffic.razor.rz.scp.css */
/* Site visits, campaign arrivals, installer downloads, Store clicks and update checks: what the
   counts are, one press away; the period that sets the page and its four cards; the days as lines;
   the splits as small tables; and the arrivals table that orders, filters and groups. The same
   boxed panel the rest of the area is written in, and every block takes the width of the column. */

.marketing-panel[b-so0y0s3g7d] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1.1rem 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
}

.marketing-panel > h3:first-child[b-so0y0s3g7d] {
    margin-top: 0;
}

/* The days as numbers, folded under the bars they back. */
.day-numbers > summary[b-so0y0s3g7d] {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---- Period ---- */

/* The shortcuts and the two dates on one row, wrapping under each other on a narrow column. */
.period-controls[b-so0y0s3g7d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 2rem;
}

.period-shortcuts[b-so0y0s3g7d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.period-shortcuts a[b-so0y0s3g7d] {
    display: inline-flex;
    align-items: center;
    min-height: 2.3rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 0.9rem;
    text-decoration: none;
}

.period-shortcuts a:hover[b-so0y0s3g7d] {
    background: var(--surface-2);
}

/* The shortcut the period is: the soft accent plate the site marks a current entry with. */
.period-shortcuts a.is-current[b-so0y0s3g7d] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* One row of fields ending in the button that applies them when there is no script. */
.period-form[b-so0y0s3g7d],
.table-filters[b-so0y0s3g7d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.period-form label[b-so0y0s3g7d],
.table-filters label[b-so0y0s3g7d] {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.period-form input[type="date"][b-so0y0s3g7d] {
    width: 11rem;
}

/* The period and the one it is compared with, said once for the four cards under it. */
.period-span[b-so0y0s3g7d] {
    margin: 1.25rem 0 0.6rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ---- The four counts ---- */

/* Each series wears one colour everywhere it is drawn: its card, its legend entry, its line and its
   dots. Visits the accent, downloads and Store clicks a hue each so the two ways to the product
   read apart, update checks the quiet ink, since they count programs asking rather than visitors. */
.series-visits[b-so0y0s3g7d] { --series: var(--accent); }
.series-downloads[b-so0y0s3g7d] { --series: var(--success); }
.series-store[b-so0y0s3g7d] { --series: var(--warning); }
.series-updates[b-so0y0s3g7d] { --series: var(--muted); }

/* Four cards on one row; two by two where the column beside the area rail is too narrow for four,
   and again on a phone once the rail has stacked above. */
.traffic-cards[b-so0y0s3g7d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 761px) and (max-width: 900px), (max-width: 560px) {
    .traffic-cards[b-so0y0s3g7d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The series colour runs along the top edge, which is what ties the card to its line below. */
.traffic-card[b-so0y0s3g7d] {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    padding: 0.8rem 0.95rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 3px 0 var(--series);
}

.card-label[b-so0y0s3g7d] {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.card-change[b-so0y0s3g7d],
.card-note[b-so0y0s3g7d] {
    color: var(--muted);
    font-size: 0.82rem;
}

.card-note[b-so0y0s3g7d] {
    margin-top: 0.35rem;
}

/* The number is the answer the card exists for: it carries the weight, the lines around it stay
   quiet. Tabular figures so the four line up digit for digit. */
.count[b-so0y0s3g7d] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ---- By day ---- */

.day-legend[b-so0y0s3g7d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.85rem;
}

/* A legend entry and the second chart's title each lead with a stroke of their line's colour. */
.day-legend > li[b-so0y0s3g7d]::before,
.day-sub[b-so0y0s3g7d]::before {
    content: "";
    display: inline-block;
    width: 0.95rem;
    height: 3px;
    margin-right: 0.45rem;
    border-radius: 2px;
    background: var(--series);
    vertical-align: middle;
}

.day-sub[b-so0y0s3g7d] {
    margin: 1.5rem 0 0.6rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* The axis numbers in a gutter of a fixed width, so the columns of the two charts and the dates
   under them stand on the same x. */
.day-chart[b-so0y0s3g7d] {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.6rem;
}

.chart-ticks[b-so0y0s3g7d],
.chart-plot[b-so0y0s3g7d] {
    position: relative;
    height: 12rem;
}

.day-chart-small .chart-ticks[b-so0y0s3g7d],
.day-chart-small .chart-plot[b-so0y0s3g7d] {
    height: 5rem;
}

.chart-ticks > span[b-so0y0s3g7d] {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* The lines are stretched to the plot, one unit per day across and a hundred up, and keep their
   stroke width whatever the stretch. */
.chart-lines[b-so0y0s3g7d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid[b-so0y0s3g7d] {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-lines polyline[b-so0y0s3g7d] {
    fill: none;
    stroke: var(--series);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* One column per day over the lines, the whole column being the day's link: it lights under the
   pointer and carries the day's numbers in its title. */
.chart-days[b-so0y0s3g7d] {
    position: absolute;
    inset: 0;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chart-days > li[b-so0y0s3g7d] {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.chart-days a[b-so0y0s3g7d] {
    position: relative;
    flex: 1 1 auto;
    border-radius: 3px;
}

.chart-days a:hover[b-so0y0s3g7d],
.chart-days a:focus-visible[b-so0y0s3g7d] {
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

.chart-days a:focus-visible[b-so0y0s3g7d] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* A dot on each line at each day; past a month only the day under the pointer shows its dots. */
.chart-dot[b-so0y0s3g7d] {
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--surface);
    border-radius: 50%;
    background: var(--series);
    transform: translate(-50%, 50%);
}

.chart-days.is-dense .chart-dot[b-so0y0s3g7d] {
    display: none;
}

.chart-days.is-dense a:hover .chart-dot[b-so0y0s3g7d],
.chart-days.is-dense a:focus-visible .chart-dot[b-so0y0s3g7d] {
    display: block;
}

.day-axis[b-so0y0s3g7d] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    padding-left: 3.35rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.day-numbers[b-so0y0s3g7d] {
    margin-top: 1rem;
}

.day-numbers > .table-scroll[b-so0y0s3g7d] {
    margin-top: 0.6rem;
}

/* ---- Breakdown ---- */

/* The splits side by side as small tables, as many to a row as the column holds. */
.split-grid[b-so0y0s3g7d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.25rem 1.5rem;
}

.split > h4[b-so0y0s3g7d] {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
}

.split .table th[b-so0y0s3g7d],
.split .table td[b-so0y0s3g7d] {
    padding: 0.4rem 0.5rem;
}

/* ---- By campaign address ---- */

.table-filters[b-so0y0s3g7d] {
    margin: 0.25rem 0 1rem;
}

/* The search takes the room the selects leave, and gives it back on a narrow column. */
.table-filters .landing-search[b-so0y0s3g7d] {
    flex: 1 1 14rem;
}

/* A landing page can be long and the column beside the area rail is not elastic, so the overflow
   belongs to the table rather than to the page. */
.table-scroll[b-so0y0s3g7d] {
    overflow-x: auto;
    white-space: nowrap;
}

/* A header is the link that orders by it: it reads as the header, not as a link in the text. */
.sort-link[b-so0y0s3g7d] {
    color: inherit;
    text-decoration: none;
}

.sort-link:hover[b-so0y0s3g7d] {
    text-decoration: underline;
}

.sort-mark[b-so0y0s3g7d] {
    color: var(--accent);
}

/* Counts and shares are read against each other, column by column. */
.table .num[b-so0y0s3g7d] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Marketing/Users.razor.rz.scp.css */
/* Marketing admin, audience explorer + account list. Two boxed panels: the filter row that
   recomputes the segment, the two numbers it answers with, and the searchable table under it. */

.marketing-panel[b-508m83reyk] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1.1rem 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
}

.marketing-panel > h3:first-child[b-508m83reyk] {
    margin-top: 0;
}

/* What a panel says about itself reads at a text measure, not across the whole panel. */
.marketing-panel p.muted[b-508m83reyk] {
    max-width: 68ch;
}

/* One row of controls that ends in the button applying them, so the button reads as the
   row's verb instead of floating under it. */
.audience-filters[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.audience-filters label[b-508m83reyk] {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.audience-filters label.checkbox[b-508m83reyk] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.3rem;
    color: var(--text);
    font-size: 0.9rem;
}

.audience-counts[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin: 1.25rem 0 0.35rem;
}

.audience-counts > div[b-508m83reyk] {
    display: grid;
    gap: 0.1rem;
}

/* The number is the answer the screen exists for: it carries the weight, the caption under
   it stays quiet. Tabular figures so the two counts line up digit for digit. */
.count[b-508m83reyk] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* The account table is the widest block on the page and the column beside the area rail is not
   elastic, so the overflow belongs to the table rather than to the page. */
.table-scroll[b-508m83reyk] {
    overflow-x: auto;
    /* A cell that would have to break "Not granted" over two lines widens the table instead, and
       the container scrolls. */
    white-space: nowrap;
}

/* The row whose panel is open: a quiet tint, so the eye can walk back from the panel to the
   account it is about without the row shouting. */
.courtesy-open > td[b-508m83reyk] {
    background: var(--surface-2);
}

/* The panel the row opens. It reads at a form's measure rather than the table's, and it is boxed
   against the panel it sits in so its edge says where the account's own decisions start. */
.courtesy-panel[b-508m83reyk] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 1rem 1.15rem 1.15rem;
    margin-top: 1.25rem;
    max-width: 46rem;
    /* The table above sets nowrap for its own cells; sentences here wrap like sentences. */
    white-space: normal;
}

.courtesy-panel > h4:first-child[b-508m83reyk] {
    margin-top: 0;
}

.courtesy-panel p.muted[b-508m83reyk] {
    max-width: 68ch;
}

/* The terms in force, as label/value pairs that line up down the left. */
.courtesy-facts[b-508m83reyk] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1.25rem;
    margin: 1rem 0;
}

.courtesy-facts dt[b-508m83reyk] {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.courtesy-facts dd[b-508m83reyk] {
    margin: 0;
}

/* One row of fields ending in the verb that applies them, the same shape as the filter row. */
.courtesy-form[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.courtesy-form label[b-508m83reyk] {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.courtesy-form input[b-508m83reyk] {
    max-width: 12rem;
}

.search-form[b-508m83reyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-form input[type="text"][b-508m83reyk] {
    flex: 1 1 260px;
    min-width: 0;
}

.pager[b-508m83reyk] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}