/* Discard portal — the design system from discard.dev: dark terminal ground,
   Space Mono throughout, one bright green accent, 4px corners, hairline dividers. */

/* The hidden attribute is only a user-agent rule ([hidden] { display: none }), so any
   author rule that sets display outranks it and the element keeps painting while the DOM
   insists it is hidden. `button` below is inline-block, which is exactly how the billing
   page ended up showing "Upgrade to Pro" to accounts that were already Pro. */
[hidden] {
    display: none !important;
}

/* Self-hosted so the strict CSP (default-src 'self') needs no exception. */
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-mono-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-mono-400-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-mono-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-mono-700-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F;
}

:root {
    --bg: #0c0d0f;
    --surface: #101215;
    --surface-hover: #15181c;
    --border: #333333;
    --border-soft: #232629;

    --text: oklch(0.92 0.01 130);
    --muted: oklch(0.6 0.01 250);

    --accent: oklch(0.82 0.18 142);
    --accent-dim: oklch(0.82 0.18 142 / 0.5);
    --accent-ghost: oklch(0.82 0.18 142 / 0.08);
    --on-accent: rgba(0, 0, 0, 0.87);

    --danger: oklch(0.7 0.19 25);

    --radius: 4px;
    --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* discard.dev sets -0.04em on running text and +0.1em on labels. */
    --tracking-body: -0.04em;
    --tracking-label: 0.1em;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: var(--tracking-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ================================================================== shell === */

header.site {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 60px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

header.site .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

/* The live dot beside the wordmark. */
header.site .brand::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

header.site nav {
    display: flex;
    gap: 4px;
    flex: 1;
}

/* Nav items read as terminal tabs: underlined when active, never decorated. */
header.site nav a {
    color: var(--muted);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--radius);
    border-bottom: 2px solid transparent;
}

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

header.site nav a.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

/* A tab for a feature this plan does not have. Dimmed and badged, never hidden: the page it
   leads to is where the feature is explained and where the upgrade is offered, so removing the
   tab would hide the pitch from exactly the accounts it is aimed at. */
header.site nav a.locked {
    color: var(--muted);
    opacity: 0.65;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

header.site nav a.locked:hover {
    opacity: 1;
}

header.site nav a.locked .pill {
    font-size: 9px;
    padding: 1px 5px;
}

header.site .who {
    color: var(--muted);
    font-size: 12px;
}

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 28px 80px;
}

main.narrow {
    max-width: 420px;
    padding-top: 64px;
}

/* ============================================================= typography === */

/* "$ SMTP / CREDENTIALS" — the shell-prompt breadcrumb above every page title. */
.crumb {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    margin-bottom: 10px;
}

.crumb::before {
    content: '$ ';
    color: var(--accent);
}

h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
}

h1 + .lede,
h2 + .lede {
    color: var(--muted);
    margin: 0 0 28px;
    font-size: 13px;
}

h2,
h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
}

.label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    font-weight: 400;
}

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

code,
.mono {
    font-family: var(--mono);
    font-size: 13px;
}

.pill {
    display: inline-block;
    border: 1px solid var(--accent-dim);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--accent);
    vertical-align: 5px;
}

.pill.free {
    border-color: var(--border);
    color: var(--muted);
}

/* Page header row: title on the left, a connection panel on the right. */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 28px;
}

.page-head > div:first-child {
    min-width: 0;
}

/* ================================================================== cards === */

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 18px;
}

.panel {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 18px 20px;
    background: var(--surface);
}

/* CONNECTION / host / port / tls */
.kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 24px;
    font-size: 13px;
    margin: 0;
}

.kv dt {
    color: var(--muted);
}

.kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* "connection details →" under the dashboard's connection panel. */
.panel-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
}

.panel-link:hover {
    color: var(--accent);
}

/* The credentials page spells the connection out: one block per port, side by side. */
.endpoints {
    margin-bottom: 28px;
}

.endpoints .note {
    color: var(--muted);
    font-size: 13px;
    max-width: 72ch;
    margin: 10px 0 18px;
}

.endpoint .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.endpoint .sub {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    margin: 14px 0 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.stat .value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 10px;
}

.stat .sub {
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
}

/* ================================================================ buttons === */

button,
.button {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 9px 18px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-body);
    cursor: pointer;
    white-space: nowrap;
}

button:hover,
.button:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

button.secondary,
.button.secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
    font-weight: 400;
}

button.secondary:hover,
.button.secondary:hover {
    border-color: var(--accent-dim);
    color: var(--accent);
    filter: none;
}

button.tiny {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 400;
    background: transparent;
    color: var(--muted);
    border-color: var(--border-soft);
}

button.tiny:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    filter: none;
}

button.danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--border);
    font-weight: 400;
}

button.danger:hover {
    border-color: var(--danger);
    filter: none;
}

button.block {
    width: 100%;
}

button:disabled {
    opacity: 0.35;
    cursor: default;
    filter: none;
}

/* A control waiting on the server. Deliberately not the disabled look: 0.35 opacity says "you
   cannot have this", and what needs saying is "this is happening". So it keeps full contrast and
   the accent hairline sweeps through it instead - the same signal as the bar at the top of the
   page, at the size of one button. */
button.working:disabled {
    opacity: 1;
    cursor: progress;
    position: relative;
    overflow: hidden;
}

button.working:disabled::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 2px;
    background: var(--on-accent);
    animation: sweep 900ms linear infinite;
}

/* On anything but the filled accent button, the dark sweep would be invisible. */
button.secondary.working:disabled::after,
button.tiny.working:disabled::after,
button.danger.working:disabled::after {
    background: var(--accent);
}

/* Page-level progress: one hairline at the top, shown while any request is in flight. Fixed, so
   it is visible from anywhere down a long inbox, and 2px in its own layer so showing it never
   moves the page. */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 100;
    background: var(--accent-ghost);
    overflow: hidden;
}

.progress::after {
    content: '';
    display: block;
    width: 35%;
    height: 100%;
    background: var(--accent);
    animation: sweep 1100ms ease-in-out infinite;
}

@keyframes sweep {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(300%);
    }
}

/* Asked not to animate: the bar and the button still have to say they are busy, so they say it
   by standing still and lit rather than by moving. */
@media (prefers-reduced-motion: reduce) {
    .progress::after,
    button.working:disabled::after {
        animation: none;
        width: 100%;
        opacity: 0.6;
    }
}

/* ================================================================== forms === */

label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    margin-bottom: 8px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=search] {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: var(--tracking-body);
}

input:focus {
    outline: none;
    border-color: var(--accent-dim);
}

input::placeholder {
    color: var(--muted);
}

.field {
    margin-bottom: 18px;
}

label.inline {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: var(--tracking-body);
    font-size: 13px;
}

label.inline input {
    width: auto;
    accent-color: var(--accent);
}

/* Input with a button welded to its right: the "+ generate" row. */
.input-row {
    display: flex;
    gap: 10px;
}

.input-row input {
    flex: 1;
}

/* "OR WITH EMAIL" rule on the auth pages. */
.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

/* =============================================================== feedback === */

.error {
    color: var(--danger);
    font-size: 13px;
    margin: 12px 0;
}

.error:empty {
    margin: 0;
}

.notice {
    background: var(--accent-ghost);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 18px;
    font-size: 13px;
}

.empty {
    color: var(--muted);
    font-size: 13px;
    padding: 28px;
    text-align: center;
}

/* ============================================================ credentials === */

.credential {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 18px 20px;
    margin-bottom: 12px;
}

/* Header row for a card that owns an action, e.g. the copy button over a snippet. */
.card .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.credential .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.credential .name {
    font-weight: 700;
    font-size: 15px;
}

.credential .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.credential .row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
}

.credential .row .k {
    color: var(--muted);
}

.credential .row .v {
    overflow-wrap: anywhere;
}

.credential.disabled .name,
.credential.revoked .name {
    color: var(--muted);
    text-decoration: line-through;
}

/* ================================================================== inbox === */

.inbox {
    display: grid;
    grid-template-columns: 380px 1fr;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 620px;
}

.inbox .list {
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inbox .list .filter {
    padding: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.inbox .list .count {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.inbox .list .items {
    overflow-y: auto;
    flex: 1;
}

.inbox .item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    border-left: 2px solid transparent;
    cursor: pointer;
    min-width: 0;
}

.inbox .item:hover {
    background: var(--surface-hover);
}

.inbox .item.active {
    background: var(--surface);
    border-left-color: var(--accent);
}

.inbox .item .line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.inbox .item .from {
    color: var(--text);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox .item .time {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.inbox .item .subject {
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox .item .preview {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The credential a message arrived on, tagged rather than run into the preview text so it can be
   scanned down the column. Kept short: the reader pane shows the full identity. */
.inbox .item .via {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 5px;
    margin-right: 6px;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    color: var(--text);
    font-size: 11px;
}

.inbox .reader {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
}

.inbox .reader .head {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border-soft);
}

.inbox .reader .head h2 {
    font-size: 19px;
    margin-bottom: 16px;
}

.inbox .reader .body {
    padding: 20px 24px 28px;
    flex: 1;
    min-width: 0;
}

/* html | text | source */
.tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-soft);
}

.tabs button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 2px;
    color: var(--muted);
    font-weight: 400;
}

.tabs button:hover {
    color: var(--text);
    filter: none;
}

.tabs button.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.tabs .spacer {
    flex: 1;
}

.tabs .note {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

/* Captured HTML renders on white: email is authored for a light client, and the
   frame is a sandboxed document of its own. */
iframe.body-html {
    width: 100%;
    min-height: 420px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: #ffffff;
}

pre.body-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 18px;
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text);
    max-height: 620px;
    overflow-y: auto;
}

ul.attachments {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

ul.attachments li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
}

/* ============================================================== home page === */

.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    margin-bottom: 32px;
}

.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.hero h1 {
    font-size: 40px;
    margin-bottom: 20px;
}

.hero h1 .dim {
    color: var(--muted);
}

.hero p {
    color: var(--muted);
    max-width: 54ch;
    margin: 0 0 10px;
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.steps .step {
    padding: 24px;
    border-right: 1px solid var(--border-soft);
}

.steps .step:last-child {
    border-right: none;
}

.steps .step .number {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
}

.steps .step h3 {
    margin: 12px 0 8px;
}

.steps .step p {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
}

section.band {
    border-top: 1px solid var(--border-soft);
    margin-top: 52px;
    padding-top: 40px;

    /* The header is sticky and 60px tall, so a jump to #agents would otherwise land with the
       section's own label tucked underneath it - the heading arrives, its eyebrow does not.
       The extra 16px keeps the divider clear of the header's bottom border. */
    scroll-margin-top: 76px;
}

section.band > h2 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 8px;
}

/* Two columns of question and answer, split by the same hairlines the steps use. The
   row gap is zero on purpose: each cell's own bottom border is the divider, so the rule
   runs unbroken across both columns. */
.faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 0 44px;
    margin-top: 26px;
    border-top: 1px solid var(--border-soft);
}

.faq .qa {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-soft);
}

.faq .qa h3 {
    margin: 0 0 8px;
}

.faq .qa p {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
}

/* =================================================================== 404 === */

/* The SMTP reply standing in for the page that is not there: the block a raw message body is
   shown in, one line tall, in the colour every other refusal on the site uses. */
pre.reply {
    display: inline-block;
    max-width: min(100%, 68ch);
    margin: 26px 0 0;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 2px solid var(--danger);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--danger);

    /* The address is whatever was typed, so it can be longer than the measure. Wrapping it is
       the only option that does not put a horizontal scrollbar on the page. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The recipient, picked out of the reply the way a mail log does. */
pre.reply #address {
    color: var(--text);
}

/* ================================================================== footer === */

/* Sits outside main, so it spans the full width and re-centres its own row on the
   same 1180px measure every page body uses. */
footer.site {
    border-top: 1px solid var(--border-soft);
    background: var(--bg);
}

footer.site .inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 28px 34px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
}

footer.site .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}

/* The same live dot as the header wordmark, one size down. */
footer.site .brand::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

footer.site nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    flex: 1;
}

footer.site nav a {
    color: var(--muted);
    font-size: 12px;
}

footer.site nav a:hover {
    color: var(--text);
    text-decoration: none;
}

footer.site .copyright {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: var(--tracking-body);
}

/* ============================================================ legal pages === */

main.legal {
    max-width: 780px;
}

main.legal .updated {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    margin: 0 0 30px;
}

/* Numbered clauses: the number is the accent, the way step numbers are on the home page. */
main.legal section {
    margin-top: 34px;
}

main.legal section > h2 .n {
    color: var(--accent);
    margin-right: 10px;
}

main.legal p,
main.legal li {
    color: var(--muted);
    font-size: 13px;
    max-width: 76ch;
}

main.legal p {
    margin: 0 0 12px;
}

main.legal ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

main.legal li {
    margin-bottom: 7px;
}

main.legal li::marker {
    color: var(--accent-dim);
}

main.legal strong {
    color: var(--text);
}

/* Contents strip under the lede — one hop to any clause on a long page. */
main.legal .toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 0;
    margin-bottom: 8px;
}

main.legal .toc a {
    color: var(--muted);
    font-size: 12px;
}

main.legal .toc a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Subprocessors, and anything else that is genuinely tabular. */
main.legal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0 0 12px;
}

main.legal th {
    text-align: left;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    padding: 0 16px 8px 0;
    border-bottom: 1px solid var(--border-soft);
}

main.legal td {
    color: var(--muted);
    padding: 10px 16px 10px 0;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

main.legal td:first-child {
    color: var(--text);
    white-space: nowrap;
}

/* =========================================================== pricing page === */

/* The page is as wide as two plan cards need, which is wider than running text wants to be
   read at, so the prose keeps roughly the measure the front page hero uses. */
main.pricing > .lede,
main.pricing .band > .lede {
    max-width: 68ch;
}

/* Two plans, side by side, on the same hairline grid the steps and the FAQ use. They stay
   equal height so the two calls to action line up at the bottom of the column rather than
   floating at whatever height the feature list happens to end. */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.plan {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 26px;
}

/* The paid plan is the recommendation, so it gets the accent border - the only thing on the
   page drawn in the colour the live dot uses. */
.plan.featured {
    border-color: var(--accent-dim);
}

.plan .name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

/* The number is the thing being read, so it is the only large type in the card and the
   interval beside it is deliberately small and muted. */
.plan .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 4px;
}

.plan .price .amount {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.plan .price .interval {
    color: var(--muted);
    font-size: 13px;
}

.plan .summary {
    color: var(--muted);
    font-size: 13px;
    margin: 10px 0 0;
}

/* margin-top:auto on the action pins it to the bottom, which is what keeps the two buttons
   level across cards of unequal content. */
.plan .actions {
    margin-top: auto;
    padding-top: 22px;
}

/* .button is inline-block, so centring its label is text-align and not justify-content -
   the flex container only decides where the box goes, not where the text sits inside it. */
.plan .actions .button {
    width: 100%;
    text-align: center;
}

.plan .fineprint {
    color: var(--muted);
    font-size: 12px;
    margin: 12px 0 0;
}

ul.features {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

ul.features li {
    position: relative;
    padding: 7px 0 7px 22px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--muted);
}

/* A mark rather than a bullet, so "included" and "not included" read differently at a
   glance without relying on colour alone. */
ul.features li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

ul.features li.no::before {
    content: '\2014';
    color: var(--border);
    font-weight: 400;
}

ul.features li strong {
    color: var(--text);
    font-weight: 400;
}

/* The same tabular treatment the legal pages use for subprocessors, available outside
   main.legal so the comparison can live on the pricing page. */
table.compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 26px 0 0;
}

table.compare th {
    text-align: left;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    padding: 0 16px 8px 0;
    border-bottom: 1px solid var(--border-soft);
}

table.compare td {
    color: var(--text);
    padding: 11px 16px 11px 0;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

/* The row label is the question; the two answers are the point. */
table.compare td:first-child {
    color: var(--muted);
    width: 40%;
}

table.compare .off {
    color: var(--muted);
}

/* ============================================================= responsive === */

@media (max-width: 900px) {
    .inbox {
        grid-template-columns: 1fr;
    }

    .inbox .list {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
    }

    .page-head {
        flex-direction: column;
        gap: 18px;
    }
}

@media (max-width: 720px) {
    header.site {
        padding: 0 16px;
        gap: 14px;
        height: auto;
        flex-wrap: wrap;
        padding-bottom: 10px;
    }

    main {
        padding: 24px 16px 56px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .credential .row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    footer.site .inner {
        padding: 22px 16px 28px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    footer.site nav {
        flex: none;
    }

    /* Two narrow columns beat one column of wrapped cells on a phone. */
    main.legal td:first-child {
        white-space: normal;
    }

    /* Three columns in the width of a phone: the label column stops claiming 40% so the
       two answers - which are the short half - keep a readable measure. */
    table.compare td:first-child {
        width: auto;
    }

    table.compare th,
    table.compare td {
        padding-right: 10px;
    }
}