:root {
    color-scheme: light dark;
    --ink: #17151f;
    --muted: #686473;
    --paper: #faf9f7;
    --panel: #ffffff;
    --line: #e7e3e9;
    --brand: #7048cf;
    --brand-deep: #5630ad;
    --brand-soft: #eee8fc;
    --on-brand: #ffffff;
    --success: #157153;
    /* The two tracking knobs are multipliers, not lengths, so every rule below
       keeps the exact value it was designed with and a script that cannot take
       tracking switches all of them off at once. --track-label is the positive
       tracking on eyebrows and uppercase labels; --track-display is the
       negative tracking on headline type. Both are re-declared, together with
       the font stack, in the :lang() block at the foot of this file - the only
       place any of the three ever changes. */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --track-label: 1;
    --track-display: 1;
    font-family: var(--font-sans);
    font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; background: var(--paper); }

body {
    display: flow-root;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% -10%, rgba(133, 96, 224, .13), transparent 33rem),
        var(--paper);
    color: var(--ink);
    line-height: 1.55;
}

a { color: var(--brand-deep); }

body > main:not(.landing) {
    width: min(100% - 2rem, 42rem);
    margin: 4rem auto;
    padding: clamp(1.35rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 24px 70px rgba(35, 25, 56, .08);
}

/* Body line height leaves a heading looking like two unrelated lines once it
   wraps, which on a phone is most of them. Every card page reads its title
   through this rule; the operator console has its own, below. */
body > main:not(.landing) h1 { margin-top: 0; letter-spacing: calc(-.035em * var(--track-display)); line-height: 1.12; }
body > main:not(.landing) form { display: grid; gap: .72rem; margin-block: 1.5rem; }
label { font-size: .9rem; font-weight: 700; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    width: 100%;
    min-height: 2.85rem;
    padding: .68rem .8rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
}
input[type="checkbox"], input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--brand);
}
/* An expanded choice: the option rows sit on one line, and each option label
   reads as an option rather than as another field label. */
.choice-radios { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.choice-radios label { font-weight: 500; }
.checkbox-row, .radio-row {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .65rem;
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: #b42318; box-shadow: 0 0 0 3px color-mix(in srgb, #b42318 14%, transparent); }
button, .button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: .68rem 1.05rem;
    border: 0;
    border-radius: .72rem;
    background: var(--brand);
    color: var(--on-brand);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
button:hover, .button:hover { transform: translateY(-1px); background: var(--brand-deep); box-shadow: 0 8px 22px rgba(86, 48, 173, .2); }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .58; }
button:disabled:hover, .button[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.flash {
    position: relative;
    margin-block: 1rem;
    padding-block: .85rem;
    padding-inline: 2.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
    border-radius: .72rem;
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--panel));
    color: var(--ink);
    font-weight: 650;
}
.flash::before { position: absolute; inset-inline-start: 1rem; font-weight: 900; content: "i"; }
.flash--success { border-color: color-mix(in srgb, var(--success) 42%, var(--line)); background: color-mix(in srgb, var(--success) 10%, var(--panel)); }
.flash--success::before { color: var(--success); content: "✓"; }
.flash--error { border-color: color-mix(in srgb, #b42318 45%, var(--line)); background: color-mix(in srgb, #b42318 9%, var(--panel)); }
.flash--error::before { color: #b42318; content: "!"; }
.flash:focus { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.form-error-message { color: #b42318; font-weight: 700; }
.form-error-list {
    margin: .45rem 0 .75rem;
    padding-block: .65rem;
    padding-inline: 2rem .8rem;
    border-inline-start: 3px solid #b42318;
    border-radius: .35rem;
    background: color-mix(in srgb, #b42318 8%, var(--panel));
    color: #8f1c13;
    font-weight: 700;
}
.form-error-list:focus { outline: 3px solid color-mix(in srgb, #b42318 35%, transparent); outline-offset: 2px; }

.landing { width: min(100% - 2rem, 74rem); margin-inline: auto; }
.landing-nav { display: flex; min-height: 5.75rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-size: 1.18rem; font-weight: 800; letter-spacing: -.025em; text-decoration: none; }
.brand img { border-radius: .7rem; box-shadow: 0 8px 20px rgba(86, 48, 173, .18); }
.brand--small { font-size: 1rem; }
.landing-nav__actions, .hero__actions { display: flex; align-items: center; gap: .7rem; }
.landing-nav__link { padding: .55rem .25rem; color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; }
.landing-nav__link:hover { color: var(--brand-deep); }
/* A quiet button is still a button: beside a filled one it needs an edge of
   its own, or the pair reads as a selected and an unselected tab. */
.button--quiet { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.button--quiet:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }
.button--outline { border: 1px solid color-mix(in srgb, var(--brand) 72%, var(--line)); background: var(--panel); color: var(--brand-deep); }
.button--outline:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.button--large { min-height: 3.15rem; padding-inline: 1.3rem; }
.button--light { background: #fff; color: var(--brand-deep); }
.button--light:hover { background: #f5f1ff; }

/* Sized so the headline, the lead and the button that follows them all land
   above the fold of an ordinary laptop; before this the only call to action on
   the page started below it. */
.hero { display: grid; min-height: 34rem; grid-template-columns: minmax(0, 1.06fr) minmax(20rem, .94fr); align-items: center; gap: clamp(2rem, 7vw, 6.5rem); padding-block: 3.5rem 5.5rem; }
.eyebrow { margin: 0 0 1.2rem; color: var(--brand-deep); font-size: .76rem; font-weight: 800; letter-spacing: calc(.12em * var(--track-label)); text-transform: uppercase; }
.eyebrow span { display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .45rem; border-radius: 50%; background: #35b681; box-shadow: 0 0 0 .28rem rgba(53, 182, 129, .13); }
.eyebrow--gated span { background: #8b8394; box-shadow: 0 0 0 .28rem color-mix(in srgb, #8b8394 14%, transparent); }
.hero h1 { max-width: 14ch; margin: 0; font-size: clamp(3.25rem, 6.1vw, 4.75rem); font-weight: 800; letter-spacing: calc(-.045em * var(--track-display)); line-height: .94; }
.hero h1 em { color: var(--brand); font-style: normal; }
.hero__lead { max-width: 39rem; margin: 1.65rem 0 1.8rem; color: var(--muted); font-size: clamp(1.04rem, 2vw, 1.2rem); }
.text-link { font-weight: 700; text-decoration: none; }
.hero__domains { margin: 1.4rem 0 0; color: var(--muted); font-size: .86rem; }

.inbox-demo { position: relative; overflow: hidden; padding-bottom: 1.2rem; border: 1px solid rgba(112, 72, 207, .2); border-radius: 1.35rem; background: var(--panel); box-shadow: 0 40px 85px rgba(42, 24, 83, .18), 0 5px 18px rgba(42, 24, 83, .08); transform: rotate(1.3deg); }
.inbox-demo__chrome { display: flex; align-items: center; gap: .38rem; padding: .82rem 1rem; border-bottom: 1px solid var(--line); background: #f8f6fb; }
.inbox-demo__chrome i { width: .55rem; height: .55rem; border-radius: 50%; background: #d4ceda; }
.inbox-demo__chrome span { min-width: 0; margin-inline-start: .35rem; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.inbox-demo__waiting { display: flex; align-items: center; gap: .55rem; padding: .8rem 1.1rem; background: #effaf5; color: var(--success); font-size: .74rem; font-weight: 700; }
.inbox-demo__waiting span { width: .52rem; height: .52rem; border-radius: 50%; background: #35b681; }
.inbox-demo__message { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .8rem; padding: 1.25rem 1.1rem; border-bottom: 1px solid var(--line); }
.sender-mark { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .75rem; background: #15131a; color: #fff; font-weight: 800; }
.inbox-demo__message strong { font-size: .9rem; }
.inbox-demo__message p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.inbox-demo__message time { color: var(--muted); font-size: .68rem; }
.otp-demo { display: flex; align-items: center; justify-content: space-between; margin: 1rem 1.1rem .7rem; padding: 1rem; border: 1px solid #dcd1f6; border-radius: .85rem; background: var(--brand-soft); }
.otp-demo div { display: grid; }
.otp-demo small { color: var(--brand-deep); font-size: .68rem; font-weight: 700; }
.otp-demo strong { color: #302050; font-size: 1.45rem; letter-spacing: .12em; }
.otp-demo span { padding: .42rem .7rem; border-radius: .52rem; background: var(--brand); color: var(--on-brand); font-size: .72rem; font-weight: 800; }
.inbox-demo__privacy { padding: .2rem 1.15rem 0; color: var(--muted); font-size: .68rem; }
.inbox-demo__privacy span { color: var(--success); }

.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.promise-grid article { min-height: 18rem; padding: 3.4rem clamp(1.4rem, 3.2vw, 2.8rem); border-inline-end: 1px solid var(--line); }
.promise-grid article:first-child { padding-inline-start: 0; }
.promise-grid article:last-child { padding-inline-end: 0; border-inline-end: 0; }
.promise-grid__number { color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: calc(.12em * var(--track-label)); }
.promise-grid h2 { margin: 2.1rem 0 .7rem; font-size: 1.35rem; letter-spacing: calc(-.03em * var(--track-display)); }
.promise-grid p { margin: 0; color: var(--muted); font-size: .92rem; }

.pricing { padding-block: 6rem; scroll-margin-top: 1rem; }
.pricing__intro { max-width: 48rem; }
.pricing__intro h2 { max-width: 15ch; margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: calc(-.055em * var(--track-display)); line-height: 1.02; }
.pricing__intro > p:last-child { max-width: 44rem; margin: 1.25rem 0 0; color: var(--muted); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; margin-top: 2.5rem; }
.price-card { display: flex; min-width: 0; flex-direction: column; padding: clamp(1.3rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: 1.15rem; background: var(--panel); box-shadow: 0 18px 50px rgba(35, 25, 56, .06); }
.price-card--paid { position: relative; border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--brand-soft) 42%, var(--panel)), var(--panel) 50%); }
.price-card__badge { display: inline-flex; min-height: 1.75rem; align-items: center; align-self: flex-start; margin: 0 0 1.2rem; padding: .35rem .58rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: .68rem; font-weight: 800; letter-spacing: calc(.06em * var(--track-label)); text-transform: uppercase; }
.price-card__name { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: calc(.08em * var(--track-label)); text-transform: uppercase; }
.price-card__price { display: flex; min-height: 4.5rem; align-items: baseline; gap: .55rem; margin: .25rem 0 1rem; }
.price-card__price strong { font-size: clamp(2.3rem, 5vw, 3.5rem); letter-spacing: calc(-.06em * var(--track-display)); }
.price-card__price span { color: var(--muted); font-size: .78rem; }
.price-card ul { display: grid; gap: .65rem; margin: 0 0 1.5rem; padding: 0; color: var(--muted); font-size: .86rem; list-style: none; }
.price-card li { position: relative; padding-inline-start: 1.35rem; }
.price-card li::before { position: absolute; inset-inline-start: 0; color: var(--success); content: "✓"; font-weight: 900; }
.price-card .button, .price-card__availability { width: 100%; margin-top: auto; }
/* Not a control: a button-shaped box in the slot every other card fills with a
   button invites a tap that nothing answers. Say it as a note instead. */
.price-card__availability { display: flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .85rem .4rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; font-weight: 600; text-align: center; }
.price-card__docs { margin: 0 0 1.1rem; font-size: .84rem; font-weight: 700; }
.price-card__docs a { color: var(--brand-deep); }
.pricing__note { max-width: 44rem; margin: 1.5rem 0 0; color: var(--muted); font-size: .86rem; }

.section-intro { max-width: 48rem; }
.section-intro h2 { max-width: 20ch; margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: calc(-.055em * var(--track-display)); line-height: 1.02; }
.section-intro > p:last-child { max-width: 44rem; margin: 1.25rem 0 0; color: var(--muted); }
.how-it-works, .faq { padding-block: 6rem 0; scroll-margin-top: 1rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.4rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.steps li { padding-top: 1.1rem; border-top: 2px solid var(--brand-soft); }
/* This label used to be `content: "STEP 0" counter(step)` on .steps li::before.
   Generated content is an English string no extractor can see and no translator
   can reach, so the word now comes from the catalogue and the element is real
   markup; the CSS counter it used went with it. Same declarations, same look. */
.steps__label { display: block; margin-bottom: .8rem; color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: calc(.12em * var(--track-label)); }
.steps h3 { margin: 0 0 .5rem; font-size: 1.05rem; letter-spacing: calc(-.02em * var(--track-display)); }
.steps p { margin: 0; color: var(--muted); font-size: .9rem; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin-top: 2.5rem; }
.faq-list h3 { margin: 0 0 .6rem; font-size: 1.1rem; letter-spacing: calc(-.025em * var(--track-display)); }
.faq-list p { max-width: 60ch; margin: 0; color: var(--muted); font-size: .92rem; }
.faq-list .faq__more { margin: .6rem 0 0; font-weight: 700; }

.closing-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-block: 6rem 3.5rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 1.5rem; background: #211638; color: #fff; }
.closing-cta .eyebrow { margin-bottom: .55rem; color: #bba6ef; }
.closing-cta h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: calc(-.05em * var(--track-display)); }
.closing-cta__note { max-width: 44ch; margin: .9rem 0 0; color: #cfc3ee; font-size: .92rem; }
.landing-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: 1.5rem 2.5rem; color: var(--muted); font-size: .78rem; }
.landing-footer p { margin: 0; }
.landing-footer p:last-child { text-align: end; }
.landing-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.landing-footer__legal a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--muted); }

.legal-page { width: min(100% - 2rem, 54rem) !important; }
.legal-page h2 { margin-top: 2.2rem; letter-spacing: calc(-.025em * var(--track-display)); line-height: 1.2; scroll-margin-top: 1rem; }
.legal-page h3 { margin-top: 1.5rem; line-height: 1.25; }
/* Four page names do not fit one phone line, so they wrap. As chips the wrap
   reads as a deliberate group, and the page you are on is legible at a glance
   instead of being one underline thicker than its neighbours. */
.legal-page nav { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.legal-page nav a { display: inline-flex; min-height: 2.75rem; align-items: center; border-radius: .45rem; font-weight: 700; }
.legal-page nav.legal-page__nav { gap: .4rem; }
.legal-page__nav a { padding: .4rem .7rem; border-radius: .55rem; color: var(--muted); font-size: .88rem; text-decoration: none; }
.legal-page__nav a:hover, .legal-page__nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); }
/* A privacy notice runs to fifteen phone screens. Without this the only way to
   reach "Your controls" is to scroll past everything before it. */
.legal-page__toc { margin: 1.75rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--brand-soft) 34%, var(--panel)); }
.legal-page__toc h2 { margin: 0 0 .5rem; font-size: .76rem; font-weight: 800; letter-spacing: calc(.12em * var(--track-label)); text-transform: uppercase; color: var(--brand-deep); }
.legal-page__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.4rem; margin: 0; padding: 0; list-style: none; counter-reset: legal-section; }
.legal-page__toc li { display: flex; margin: 0; counter-increment: legal-section; }
.legal-page__toc li + li { margin-top: 0; }
.legal-page__toc a { display: flex; flex: 1; min-height: 2.5rem; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 650; text-decoration: none; }
.legal-page__toc a:hover { text-decoration: underline; }
.legal-page__toc a::before { color: var(--muted); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; content: counter(legal-section, decimal-leading-zero); }
.legal-page__product { margin: 2rem 0 0 !important; }
.legal-page li + li { margin-top: .45rem; }
.legal-page > p:not(.eyebrow):not(.legal-updated), .legal-page > ul, .legal-page > ol { max-width: 68ch; }
.legal-updated { color: var(--muted); font-size: .88rem; }
.legal-project-disclosure { margin-top: 2.75rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.legal-project-disclosure dl { display: grid; grid-template-columns: minmax(11rem, .45fr) minmax(0, 1fr); gap: .7rem 1.2rem; }
.legal-project-disclosure dt { font-weight: 750; }
.legal-project-disclosure dd { margin: 0; overflow-wrap: anywhere; }
/* The governing-language notice, which legal/_contents prints under the table
   of contents and only when the page is not in the language the documents were
   written in. It is telling the reader that the chrome around the text was
   translated and the text was not, so it takes the accent-bar shape every other
   notice in this application uses (.billing-notice, .integration-notice) rather
   than inventing one, and sits at the reading measure of the prose it precedes. */
.legal-translation-notice {
    max-width: 68ch;
    margin: 1.5rem 0 0;
    padding: .85rem 1rem;
    border-inline-start: .25rem solid var(--brand);
    border-radius: .4rem;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: .92rem;
}
.legal-translation-notice p { margin: 0; }
.legal-translation-notice p + p { margin-top: .5rem; }
.legal-translation-notice a { color: inherit; font-weight: 800; }
.auth-page { width: min(100% - 2rem, 30rem) !important; }
.auth-page > .brand { margin-bottom: 2rem; }
/* A field group inside the form is not a peer of the page title. At the shared
   h2 size "Coupon" outranked "Create your Junkmail account". */
.auth-page form section > h2, .auth-page > section > h2 { margin: 1rem 0 .7rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: calc(.1em * var(--track-label)); text-transform: uppercase; }
.auth-page form section > h2 + p { margin-top: 0; color: var(--muted); font-size: .88rem; }
.auth-page__links a, .auth-page > p > a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.auth-page form button { width: 100%; }
/* Two ways onward from a dead end, ranked: the one that resumes what the
   person came to do, then the one that leaves. */
.auth-page__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.auth-page__actions > form { margin: 0 !important; }
.auth-page__actions .button, .auth-page__actions form button { width: auto; }
.error-page { width: min(100% - 2rem, 36rem) !important; }
.error-page__code { margin: 1.4rem 0 .4rem; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: calc(.12em * var(--track-label)); text-transform: uppercase; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.error-page__links { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; font-size: .86rem; }
.danger-zone { margin-top: 2.5rem; padding: 1rem; border: 1px solid color-mix(in srgb, #b42318 35%, var(--line)); border-radius: .8rem; }
.danger-zone > :first-child { margin-top: 0; }

.totp-qr { width: fit-content; margin: 1.5rem auto; padding: .7rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.totp-qr img { display: block; max-width: 100%; height: auto; }
.totp-secret { display: block; overflow-wrap: anywhere; padding: .75rem; border-radius: .55rem; background: var(--brand-soft); color: var(--brand-deep); font-size: 1rem; letter-spacing: .08em; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 0; list-style: none; }
.recovery-code-list code { display: block; padding: .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; letter-spacing: .05em; text-align: center; }
.token-once { margin-block: 1.5rem; padding: 1rem; border: 2px solid var(--brand); border-radius: .8rem; background: var(--brand-soft); }
.token-once code { display: block; overflow-wrap: anywhere; user-select: all; }
.token-scope { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .65rem; margin-block: .7rem; font-weight: 400; }
.token-scope input { width: auto; min-height: auto; margin-top: .3rem; }
.token-scope strong { display: block; }
.token-list { display: grid; gap: .8rem; padding: 0; list-style: none; }
.token-list > li { padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; }
.token-list form { margin-block: .7rem 0 !important; }

.billing-page { width: min(100% - 2rem, 64rem) !important; }
.account-page-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.account-page-nav a { display: inline-flex; min-height: 2.5rem; align-items: center; padding: .4rem .65rem; border-radius: .55rem; color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.account-page-nav a:hover, .account-page-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); }
.billing-summary { display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.28fr); gap: 1rem; margin-block: 1.4rem; align-items: start; }
.billing-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* Current plan and the coupon card share the first row; the two paid offers take the whole second row. */
.billing-summary > .billing-offer-grid { grid-column: 1 / -1; }
.billing-card { min-width: 0; padding: clamp(1.15rem, 3vw, 1.7rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.billing-card > :first-child { margin-top: 0; }
.billing-card > :last-child { margin-bottom: 0; }
.billing-card--paid { border-color: color-mix(in srgb, var(--brand) 48%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-soft) 36%, var(--panel)), var(--panel)); }
.billing-card__price { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0 1rem; }
.billing-card__price strong { font-size: clamp(2.2rem, 7vw, 3.3rem); letter-spacing: calc(-.055em * var(--track-display)); }
.billing-card__price span { color: var(--muted); font-size: .82rem; }
.billing-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin-block: 1.2rem; padding: 0; color: var(--muted); font-size: .86rem; list-style: none; }
.billing-feature-list li { padding-inline-start: 1.25rem; position: relative; }
.billing-feature-list li::before { position: absolute; inset-inline-start: 0; color: var(--success); content: "✓"; font-weight: 900; }
.billing-status { display: inline-flex; min-height: 1.75rem; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: .72rem; font-weight: 800; text-transform: capitalize; }
.billing-status--success { background: color-mix(in srgb, var(--success) 13%, var(--panel)); color: var(--success); }
.billing-status--warning { background: color-mix(in srgb, #b56a00 14%, var(--panel)); color: #875000; }
.billing-status--danger { background: color-mix(in srgb, #b42318 13%, var(--panel)); color: #b42318; }
.billing-notice { padding: .85rem 1rem; border-inline-start: .25rem solid var(--brand); border-radius: .4rem; background: var(--brand-soft); color: var(--brand-deep); }
.billing-notice--error { border-color: #b42318; background: color-mix(in srgb, #b42318 10%, var(--panel)); color: #8f1c13; }
.billing-notice--success { border-color: var(--success); background: color-mix(in srgb, var(--success) 11%, var(--panel)); color: var(--success); }
.billing-actions form { margin-block: .75rem 0 !important; }
.billing-actions button { width: 100%; }
.billing-actions button[disabled] { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }
.billing-upgrade-warning { padding: .7rem .8rem; border-inline-start: .2rem solid #b56a00; background: color-mix(in srgb, #b56a00 9%, transparent); color: var(--ink); font-size: .82rem; }
.billing-invoice-id { display: inline-block; max-width: 18rem; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.billing-fine-print { color: var(--muted); font-size: .78rem; }

.admin-shell { display: grid; min-height: 100vh; grid-template-columns: 16rem minmax(0, 1fr); background: var(--paper); }
.admin-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; gap: 1.1rem; padding: 1.5rem 1.1rem; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); }
.admin-sidebar__label { margin: .15rem .6rem 0; color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.admin-nav { display: grid; gap: .25rem; }
.admin-nav a { padding: .62rem .7rem; border-radius: .62rem; color: var(--muted); font-size: .88rem; font-weight: 700; text-decoration: none; }
.admin-nav a:hover, .admin-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); }
/* The sidebar keeps the section list open; the disclosure only exists on a
   phone. Browsers without ::details-content keep a working summary instead. */
.admin-nav-disclosure__summary { display: flex; min-height: 2.75rem; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .72rem; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.admin-nav-disclosure__summary::-webkit-details-marker { display: none; }
/* The ::after caret is two adjacent borders on a rotated square, not an
   accent bar: `border-inline-end` would move them to the other corner and the
   same 45deg would then point the arrow sideways. A disclosure caret is a
   vertical affordance and does not mirror, so those two stay physical. The
   `margin-left` beside them is directional, but the console is out of i18n
   scope (plan decision 2), so it is left physical with the rest of the admin
   rules. Twin rule: .integration-disclosure__summary::after in account.css,
   which IS reached from user pages and whose margin is logical. */
.admin-nav-disclosure__summary::after { width: .5rem; height: .5rem; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .16s ease; content: ""; }
.admin-nav-disclosure[open] > .admin-nav-disclosure__summary::after { transform: translateY(.15rem) rotate(-135deg); }
.admin-nav-disclosure__summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.admin-nav-disclosure__hint { color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.admin-nav-disclosure__current { color: var(--brand-deep); }
.admin-nav-disclosure[open] > .admin-nav { margin-top: .5rem; }
@media (min-width: 801px) {
    @supports selector(::details-content) {
        .admin-nav-disclosure__summary { display: none; }
        .admin-nav-disclosure::details-content { display: block; content-visibility: visible; }
        .admin-nav-disclosure[open] > .admin-nav { margin-top: 0; }
    }
}
.admin-sidebar__account { display: grid; gap: .55rem; margin-top: auto; padding: .8rem .65rem 0; border-top: 1px solid var(--line); font-size: .78rem; overflow-wrap: anywhere; }
.admin-sidebar__account form { margin: 0; }
.admin-sidebar__account .button { width: 100%; }
.admin-main { min-width: 0; width: min(100%, 92rem); padding: clamp(1.4rem, 4vw, 3rem); }
.admin-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.admin-page-header .eyebrow { margin-bottom: .5rem; }
/* The console's title sits inside the shell, not under `body > main`, so it
   needs the same line height said again. A banned account's address runs to
   five lines here. */
.admin-page-header h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.045em; line-height: 1.12; }
.admin-page-header__subtitle { color: var(--muted); }
.admin-page-header__subtitle > :last-child { margin-bottom: 0; }
.admin-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.admin-page-header__actions .button { white-space: nowrap; }
/* A link to a sibling section is wayfinding, not an action. As text it leaves
   the page's one real action alone in looking like a button. */
.admin-page-header__actions .text-link { padding-block: .5rem; white-space: nowrap; }
.admin-page-header__actions > * + .text-link { margin-left: .4rem; }
.admin-nowrap { white-space: nowrap; }
.admin-panel__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.admin-panel__heading > h2 { margin: 0; }
.admin-code-copy { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.admin-code-copy code { font-size: .95em; letter-spacing: .02em; }
/* The copy buttons only exist once the controller can serve them. */
[data-controller~="copy"]:not([data-copy-ready]) [data-action*="copy#"] { display: none; }
.admin-panel, .admin-card { min-width: 0; margin-bottom: 1rem; padding: clamp(1rem, 2.2vw, 1.5rem); border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); box-shadow: 0 12px 35px rgba(35, 25, 56, .045); }
.admin-panel > :first-child, .admin-card > :first-child { margin-top: 0; }
.admin-panel > :last-child, .admin-card > :last-child { margin-bottom: 0; }
.admin-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.admin-card-grid .admin-card { display: grid; gap: .25rem; margin: 0; }
.admin-card-grid .admin-card strong { font-size: 1.35rem; }
.admin-card-grid .admin-card span { color: var(--muted); font-size: .8rem; }
.admin-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-filter, .admin-filter-grid { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.admin-filter-grid label { flex: 1 1 11rem; }
.admin-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: .75rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
/* `.admin-table` is not admin-only: templates/account/data.html.twig and
   templates/account/billing.html.twig both render `class="admin-table
   account-table"`, so this rule aligns two user-facing tables. `start`
   computes to `left` in English and follows the reader in Arabic. */
.admin-table th, .admin-table td { padding: .72rem .8rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table th { background: color-mix(in srgb, var(--brand-soft) 48%, var(--panel)); color: var(--muted); font-size: .68rem; letter-spacing: calc(.06em * var(--track-label)); text-transform: uppercase; white-space: nowrap; }
.admin-table small { display: block; max-width: 18rem; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.admin-json { display: block; max-width: 28rem; overflow-wrap: anywhere; white-space: normal; }
.admin-audit-table { min-width: 58rem; }
.admin-coupon-table { min-width: 72rem; }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1rem; }
.admin-empty { color: var(--muted); }
.admin-flash { padding: .8rem 1rem; border-radius: .7rem; }
.admin-flash--success { background: color-mix(in srgb, var(--success) 12%, var(--panel)); color: var(--success); }
.admin-flash--error { background: color-mix(in srgb, #b42318 12%, var(--panel)); color: #b42318; }
.admin-note, .admin-privacy-note { padding: .8rem 1rem; border-left: .25rem solid var(--brand); border-radius: .35rem; background: var(--brand-soft); color: var(--brand-deep); }
.admin-detail-list { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr); gap: .55rem 1rem; margin: 0; }
.admin-detail-list dt { color: var(--muted); font-size: .78rem; font-weight: 700; }
.admin-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.admin-jump-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.admin-jump-nav a { display: inline-flex; min-height: 2.35rem; align-items: center; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 700; text-decoration: none; }
.admin-jump-nav a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.admin-boolean-override { display: grid; gap: .45rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .7rem; }
.admin-toggle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.admin-toggle-grid > .admin-boolean-override { margin: 0; }
.admin-boolean-override legend { padding-inline: .35rem; font-size: .88rem; font-weight: 800; }
.admin-boolean-override small { color: var(--muted); }
.admin-report-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-definition-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin: 0; }
.admin-definition-list > div { min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .65rem; background: color-mix(in srgb, var(--brand-soft) 28%, var(--panel)); }
.admin-definition-list dt { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.admin-definition-list dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.admin-status { display: inline-flex; min-height: 1.65rem; align-items: center; padding: .2rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: .72rem; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.admin-status--healthy { background: color-mix(in srgb, var(--success) 13%, var(--panel)); color: var(--success); }
.admin-status--danger { background: color-mix(in srgb, #b42318 13%, var(--panel)); color: #b42318; }
.admin-status--neutral { background: color-mix(in srgb, var(--muted) 12%, var(--panel)); color: var(--muted); }
.admin-card .admin-status { font-size: .72rem; }
.admin-card .admin-status--healthy { color: var(--success); }
.admin-card .admin-status--danger { color: #b42318; }
.admin-card .admin-status--neutral { color: var(--muted); }
.admin-limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.admin-limit-grid label { display: grid; align-content: start; gap: .35rem; }
.admin-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.admin-action-grid form { padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; }
.admin-action-grid form > :first-child + * { margin-top: 0; }
.admin-action-grid form > :last-child { margin-bottom: 0; }
.admin-danger-zone { border-color: color-mix(in srgb, #b42318 35%, var(--line)); }
/* A counter card ends in its call to action. Laid out as a column, the action
   sits on the floor of every card in the row instead of drifting with the
   length of the sentence above it. */
.admin-card-grid .admin-card { display: flex; align-items: flex-start; flex-direction: column; }
.admin-card-grid .admin-card > a, .admin-card-grid .admin-card > form { margin-top: auto; padding-top: .35rem; }
.admin-card-grid .admin-card > form { margin-bottom: 0; }
/* A state standing in for a card's number is still a state: at headline size
   the pill stops reading as a pill and starts reading as a button. */
.admin-card-grid .admin-card > strong.admin-status { padding: .28rem .7rem; font-size: 1rem; }
.admin-status--warning { background: color-mix(in srgb, #b56a00 13%, var(--panel)); color: #b56a00; }
.admin-card .admin-status--warning { color: #b56a00; }
/* A row of state filters is a control. Borrowing the jump-nav pill says so,
   and gives the chosen one somewhere to show itself. */
nav.admin-filter { flex-flow: row wrap; align-items: center; gap: .4rem; }
nav.admin-filter a { display: inline-flex; min-height: 2.35rem; align-items: center; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 700; text-decoration: none; }
nav.admin-filter a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
nav.admin-filter a[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
/* The header's actions keep their line; it is the prose that gives way. */
.admin-page-header__actions { flex-shrink: 0; }
/* A form of single fields does not get more readable at a thousand pixels
   wide, and its submit belongs beside its way out. */
.admin-form-narrow { max-width: 34rem; }
.admin-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1rem; }
.admin-form-actions > form, .admin-form-actions > div { margin: 0; }
/* Short numeric settings read as a grid, not as a column of full-width bars. */
.admin-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .3rem .8rem; }
.admin-field-grid > * { min-width: 0; }
/* Symfony wraps a compound form's rows in one container; letting it dissolve
   puts the rows themselves into the grid. */
.admin-field-grid > div:not([class]), .admin-field-grid > div[id] { display: contents; }
.admin-field-grid label { display: block; }
.admin-field-grid > button, .admin-field-grid > .admin-field-grid__full { grid-column: 1 / -1; justify-self: start; }
/* A chart scrolls rather than shrinking its own axis labels out of legibility,
   the same bargain the wide tables already make. */
.admin-chart { max-width: 100%; overflow-x: auto; }
.admin-chart > svg { min-width: 40rem; }
/* A control that belongs to one row stays on that row's line. */
.admin-row-form { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.admin-row-form input { flex: 0 0 5.5rem; width: 5.5rem; }
.admin-row-form button { white-space: nowrap; }
.admin-row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.admin-row-actions form { margin: 0; }
/* Ten filled red buttons down a column shout over the row they belong to and
   over the page's own actions. Outlined, the burn still reads as the dangerous
   one and fills in on hover, where the confirmation is a keystroke away. */
.admin-row-actions .button--danger { border: 1px solid color-mix(in srgb, #b42318 45%, var(--line)); background: transparent; color: #b42318; white-space: nowrap; }
.admin-row-actions .button--danger:hover { background: #b42318; color: #fff; }
/* The per-record check results are about the table above them, not part of it. */
.admin-dns-checks { margin-top: 1.1rem; }
/* Nine targets that each say one clear line do not need nine full-width panels. */
.admin-target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; }
.admin-target-grid > .admin-panel { margin: 0; }
.admin-target-grid > .admin-panel--listed { grid-column: 1 / -1; }
/* A ranking is read down the values, so the values line up. */
.admin-rank-list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.admin-rank-list li { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); counter-increment: rank; }
.admin-rank-list li:last-child { border-bottom: 0; }
.admin-rank-list li::before { min-width: 1.4rem; color: var(--muted); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; content: counter(rank) "."; }
.admin-rank-list span { min-width: 0; overflow-wrap: anywhere; }
.admin-rank-list strong { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Each sent message is its own record; without a boundary the log reads as one
   long letter. */
.admin-mail-log { display: grid; gap: .8rem; }
.admin-mail-log > article { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .7rem; }
.admin-mail-log h3 { margin: 0 0 .45rem; font-size: 1rem; }
.admin-mail-log__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; margin: 0 0 .6rem; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.admin-mail-log__meta > span:not(:last-child)::after { margin-left: .55rem; content: "\00b7"; }
.admin-mail-log__meta > span.admin-status::after { margin-left: 0; content: none; }
.admin-mail-log pre { margin: 0; padding: .7rem .8rem; border-radius: .55rem; background: color-mix(in srgb, var(--brand-soft) 34%, var(--panel)); font-size: .82rem; }
/* The metadata column is what an audit entry is read for; with no floor it
   collapses to a ribbon that breaks its own JSON mid-word. */
.admin-audit-table .admin-json { min-width: 15rem; }
.admin-audit-table time { display: block; }
/* An invoice is identified by its numbers, not by the full width of its
   external identifiers; capping them keeps the health signal on screen. */
.admin-invoice-table small, .admin-invoice-table .billing-invoice-id { max-width: 11rem; }
.admin-invoice-table td:last-child { min-width: 8.5rem; }
/* A coupon's label is prose. Left to the leftovers it shreds into one word
   per line. */
.admin-coupon-table td:nth-child(3) { min-width: 9rem; }
/* The fill is the same red in both schemes, so the label on it has to be too.
   Left to `--on-brand` it turned near-black in dark and read at 2.79:1 on the
   burn, the revoke and the delete: 6.57:1 stated here, 8.96:1 on hover. */
.button--danger { background: #b42318; color: #fff; }
.button--danger:hover { background: #8f1c13; }
.confirm-dialog { width: min(calc(100% - 2rem), 31rem); padding: 0; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); color: var(--ink); box-shadow: 0 28px 90px rgba(20, 12, 38, .3); }
.confirm-dialog::backdrop { background: rgba(17, 16, 22, .66); backdrop-filter: blur(2px); }
.confirm-dialog__panel { padding: clamp(1.25rem, 4vw, 1.8rem); }
.confirm-dialog__panel h2 { margin: 0; font-size: 1.35rem; }
.confirm-dialog__panel p { margin: .75rem 0 1.4rem; color: var(--muted); }
.confirm-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.confirm-dialog__challenge { display: grid; gap: .4rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.confirm-dialog button[disabled] { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }

/* The mailbox without its application: the reader an abuse report links to and
   the page the noscript list falls back on, plus the interstitial that stands
   between a person and a file that can run code. Scoped to these two templates;
   they share `body > main`, and nothing else here uses these names. */
.mailbox-fallback { width: min(100% - 2rem, 48rem) !important; }
.mailbox-fallback__back { margin-top: 0; font-size: .88rem; }
.mailbox-fallback h1 { font-size: clamp(1.5rem, 3.6vw, 2rem); overflow-wrap: anywhere; }
.mailbox-fallback h2 { margin: 2rem 0 .6rem; font-size: 1.1rem; }
/* The label column is measured for `From`, `To` and `Received`. max-content
   never exceeds 5.5rem for those three, so a minmax with that ceiling resolves
   to the same 5.5rem in English and gives `Empfangen` or `Получено` the room
   they need instead of breaking them mid-word. */
.mailbox-fallback__envelope { display: grid; grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); gap: .3rem .9rem; margin: 1.2rem 0 0; color: var(--muted); font-size: .9rem; }
.mailbox-fallback__envelope dt { font-weight: 700; }
.mailbox-fallback__envelope dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.mailbox-fallback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.4rem 0 0; }
.mailbox-fallback__actions form { display: contents; }
.mailbox-fallback__actions .button, .mailbox-fallback__actions button { min-height: 2.5rem; }
/* Sandboxed, the frame cannot report the height of what it holds, so it takes
   a readable share of the window rather than the 300x150 a bare iframe is. */
.mailbox-fallback__body { display: block; width: 100%; height: min(70vh, 40rem); margin-top: 1.5rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; }
.mailbox-fallback__text { margin-top: 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: color-mix(in srgb, var(--brand-soft) 26%, var(--panel)); font-family: inherit; font-size: .92rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.mailbox-fallback__pending { margin-top: 1.5rem; color: var(--muted); }
.mailbox-fallback__raw { margin-top: 2rem; font-size: .88rem; }

/* One box per code. Printed end to end, two extracted codes read as one code
   that was never sent. */
.mailbox-extracted { margin-top: 1.6rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: .9rem; background: var(--brand-soft); }
.mailbox-extracted h2 { margin: 0; font-size: 1rem; }
.mailbox-extracted__label { margin: .9rem 0 .4rem; color: var(--brand-deep); font-size: .68rem; font-weight: 800; letter-spacing: calc(.1em * var(--track-label)); text-transform: uppercase; }
.mailbox-extracted__codes, .mailbox-extracted__links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mailbox-extracted__links { display: grid; gap: .35rem; }
.mailbox-extracted__codes code { display: inline-block; padding: .35rem .7rem; border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line)); border-radius: .55rem; background: var(--panel); color: var(--ink); font-size: 1.15rem; font-weight: 700; letter-spacing: .12em; user-select: all; }
.mailbox-extracted__links a { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.mailbox-extracted__caption { margin: .6rem 0 0; color: var(--brand-deep); font-size: .76rem; }

.mailbox-attachments { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mailbox-attachments li { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .7rem; }
.mailbox-attachments a { font-weight: 700; overflow-wrap: anywhere; }
.mailbox-attachments__meta { display: block; color: var(--muted); font-size: .8rem; }
.mailbox-attachments__preview { font-size: .82rem; font-weight: 600; }
.mailbox-attachments__warning { display: block; margin-top: .4rem; color: #8f1c13; font-size: .84rem; }
.mailbox-attachments__item--unsafe { border-color: color-mix(in srgb, #b56a00 45%, var(--line)); background: color-mix(in srgb, #b56a00 8%, transparent); }

/* An interstitial that reads like body copy interrupts nobody. */
.mailbox-warning { width: min(100% - 2rem, 34rem) !important; text-align: center; }
.mailbox-warning__mark { display: grid; width: 3.2rem; height: 3.2rem; margin: 0 auto 1.2rem; place-items: center; border-radius: 1rem; background: color-mix(in srgb, #b56a00 16%, var(--panel)); color: #8f1c13; font-size: 1.6rem; font-weight: 900; }
.mailbox-warning__lead { margin: .8rem 0 0; overflow-wrap: anywhere; }
.mailbox-warning__type { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }
/* The way out first, the download second: the destructive one is not the one
   a hurried thumb lands on. */
.mailbox-warning__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.8rem; }

/* The language picker, in the two shapes templates/_locale_picker.html.twig can
   take. The shell prints it as the last thing in the document, under whichever
   main it followed - a 74rem landing page, a 54rem legal page or a 30rem auth
   card - so at that level it centres itself rather than adopting one of those
   three measures and looking wrong under the other two. The settings page
   includes the same partial inside its own card instead, where it is one more
   field in a column of fields and keeps the shell's form grid. */
body > .locale-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .55rem;
    width: min(100% - 2rem, 74rem);
    margin: 2rem auto 3rem;
    color: var(--muted);
    font-size: .82rem;
}
/* The links form: the same chip the legal nav and the account nav use, so the
   language you are reading in is legible at a glance rather than being one
   underline different from its neighbours. */
.locale-picker a {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding: .35rem .65rem;
    border-radius: .55rem;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}
.locale-picker a:hover, .locale-picker a[aria-current] { background: var(--brand-soft); color: var(--brand-deep); }
/* Each language name is written in its own language and its element says so
   with `lang`, so the stack :root resolved for the page is the wrong one for
   it. Asked for here rather than on :lang() itself, which would also outrank
   every monospace rule in the file on a page in one of those languages. */
.locale-picker a, .locale-picker option { font-family: var(--font-sans); }
/* The form: `justify-items` keeps the submit the width of its own label inside
   the shell's form grid, where a bare button - unlike every other form on the
   account, whose buttons sit inside a div - would otherwise stretch across the
   card. The select carries its own width for the same reason. */
.locale-picker { justify-items: start; }
.locale-picker select { width: auto; min-width: 12rem; }
.locale-picker > p { margin: 0; color: var(--muted); font-size: .82rem; }
body > .locale-picker > p { flex-basis: 100%; }
/* Changing language is not what the page is for; it is the quiet button's job,
   said here in declarations rather than by putting .button--quiet in the markup,
   which is not this package's to change. */
.locale-picker button { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.locale-picker button:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }

@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; min-height: 0; padding-block: 2.5rem 4rem; }
    .hero h1 { max-width: 13ch; }
    .inbox-demo { width: min(100%, 31rem); justify-self: center; transform: none; }
    .promise-grid { grid-template-columns: 1fr; }
    .promise-grid article, .promise-grid article:first-child, .promise-grid article:last-child { min-height: 0; padding: 2rem 0; border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .promise-grid article:last-child { border-bottom: 0; }
    .promise-grid h2 { margin-top: .8rem; }
    .pricing { grid-template-columns: 1fr; padding-block: 4rem; }
    .steps { grid-template-columns: 1fr; }
    .faq-list { grid-template-columns: 1fr; gap: 1.8rem; }
    .pricing__intro h2 { max-width: 18ch; }
    .closing-cta { align-items: flex-start; flex-direction: column; }
    .landing-footer { grid-template-columns: 1fr; }
    .landing-footer p:last-child { text-align: start; }
    .landing-footer__legal { justify-content: flex-start; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; width: 100%; height: auto; gap: .75rem; padding: .9rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .admin-sidebar__label { display: none; }
    .admin-nav { display: grid; gap: .15rem; overflow-x: visible; }
    .admin-nav a { display: flex; min-height: 2.75rem; align-items: center; }
    .admin-sidebar__account { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-top: 0; }
    /* One line of account chrome, so the console's first screen is the console. */
    .admin-sidebar__account > span { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-sidebar__account form { margin-left: auto; }
    .admin-sidebar__account .button { padding-block: .45rem; }
    .admin-main { max-width: 100%; padding: 1.25rem 1rem 2rem; overflow-x: hidden; }
    .admin-main > * { min-width: 0; max-width: 100%; }
    .admin-page-header { width: 100%; align-items: stretch; flex-direction: column; }
    .admin-page-header__actions { width: 100%; }
    .admin-limit-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
    .admin-two-column { grid-template-columns: 1fr; }
    .admin-detail-list { grid-template-columns: 1fr; }
    .admin-detail-list dd { margin-bottom: .35rem; }
    .billing-summary { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    /* Keep the header on one row; when the actions must wrap they stay a right-aligned group. */
    .landing-nav { min-height: 4.4rem; flex-wrap: wrap; gap: .5rem .75rem; padding-block: .7rem .8rem; }
    .landing-nav .brand { font-size: 1.05rem; gap: .5rem; }
    .landing-nav .brand img { width: 34px; height: 34px; }
    .landing-nav__actions { flex: 0 1 auto; margin-inline-start: auto; justify-content: flex-end; gap: .25rem; }
    .landing-nav__link { display: inline-flex; min-height: 2.4rem; align-items: center; padding-inline: .4rem; font-size: .84rem; }
    .landing-nav__signup, .landing-nav__signin { display: inline-flex; min-height: 2.4rem; padding-inline: .7rem; font-size: .8rem; white-space: nowrap; }
    .hero__actions { align-items: flex-start; flex-direction: column; }
    .hero h1 { font-size: clamp(3rem, 15vw, 4.25rem); }
    .inbox-demo__message { grid-template-columns: auto 1fr; }
    .inbox-demo__message time { display: none; }
    .recovery-code-list { grid-template-columns: 1fr; }
    .admin-filter, .admin-filter-grid { align-items: stretch; flex-direction: column; }
    .admin-filter-grid label { width: 100%; flex-basis: auto; }
    .pricing-grid, .billing-offer-grid, .billing-feature-list { grid-template-columns: 1fr; }
    .legal-page__toc ol { grid-template-columns: 1fr; }
    .legal-project-disclosure dl { grid-template-columns: 1fr; gap: .3rem; }
    .legal-project-disclosure dd { margin-bottom: .6rem; }
    /* A small table becomes a stack of labelled rows instead of a five-line
       wrapped code or a sideways scroll. */
    .admin-table--stacked thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
    .admin-table--stacked tr { display: grid; gap: .45rem; padding: .8rem; border-bottom: 1px solid var(--line); }
    .admin-table--stacked tr:last-child { border-bottom: 0; }
    .admin-table--stacked td { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: .6rem; min-width: 0; padding: 0; border: 0; }
    .admin-table--stacked td::before { content: attr(data-label); color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .admin-table--stacked td:first-child { grid-template-columns: minmax(0, 1fr); }
    .admin-table--stacked .admin-code-copy { display: grid; gap: .45rem; white-space: normal; }
    .admin-table--stacked .admin-code-copy code { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; overflow-wrap: anywhere; user-select: all; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (prefers-color-scheme: dark) {
    :root { --ink: #f1edf7; --muted: #b8b1c2; --paper: #111016; --panel: #19171f; --line: #3a3542; --brand: #b399f1; --brand-deep: #c8b6f6; --brand-soft: #2b2140; --on-brand: #18121f; --success: #62d9aa; }
    body { background: radial-gradient(circle at 15% -10%, rgba(133, 96, 224, .18), transparent 32rem), var(--paper); }
    .inbox-demo__chrome { background: #211e28; }
    .inbox-demo__waiting { background: #13271f; }
    .sender-mark { background: var(--brand); color: var(--on-brand); }
    .otp-demo strong { color: #eee7ff; }
    .button--light { background: #eee8fc; color: #5630ad; }
    .button--light:hover { background: #ffffff; color: #5630ad; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { border-color: #4b4456; }
    .billing-status--warning { background: color-mix(in srgb, #ffd28a 15%, var(--panel)); color: #ffd28a; }
    .billing-status--danger { background: color-mix(in srgb, #ffaaa3 14%, var(--panel)); color: #ffaaa3; }
    .billing-notice--error { border-color: #ffaaa3; background: color-mix(in srgb, #ffaaa3 12%, var(--panel)); color: #ffc1bc; }
    .admin-flash--error { background: color-mix(in srgb, #ffaaa3 14%, var(--panel)); color: #ffaaa3; }
    .admin-status--danger, .admin-card .admin-status--danger { background: color-mix(in srgb, #ffaaa3 14%, var(--panel)); color: #ffaaa3; }
    .admin-status--warning, .admin-card .admin-status--warning { background: color-mix(in srgb, #ffd28a 15%, var(--panel)); color: #ffd28a; }
    .admin-row-actions .button--danger { border-color: color-mix(in srgb, #ffaaa3 45%, var(--line)); color: #ffaaa3; }
    .admin-row-actions .button--danger:hover { background: #b42318; color: #fff; }
    input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: #ffaaa3; box-shadow: 0 0 0 3px color-mix(in srgb, #ffaaa3 18%, transparent); }
    .form-error-message, .form-error-list { color: #ffc1bc; }
    .form-error-list { border-inline-start-color: #ffaaa3; background: color-mix(in srgb, #ffaaa3 12%, var(--panel)); }
    .form-error-list:focus { outline-color: color-mix(in srgb, #ffaaa3 62%, transparent); }
    .mailbox-attachments__warning { color: #ffc1bc; }
    .mailbox-attachments__item--unsafe { border-color: color-mix(in srgb, #ffd28a 40%, var(--line)); background: color-mix(in srgb, #ffd28a 8%, transparent); }
    .mailbox-warning__mark { background: color-mix(in srgb, #ffd28a 16%, var(--panel)); color: #ffd28a; }
    .mailbox-extracted__codes code { background: color-mix(in srgb, var(--panel) 80%, #000); }
}

/* ---------------------------------------------------------------------------
   Scripts other than Latin.

   Everything above is written for one script and one direction. Direction is
   already handled - the logical properties above follow the `dir` that
   base.html.twig writes from the request locale - so what is left is type.

   Each knob is declared at its English value on :root and only ever re-declared
   here, and every rule is selected by :lang(), so an English page is untouched -
   with one deliberate exception, the language picker, whose links and options
   are tagged with a `lang` of their own inside whatever page they sit in. A
   Japanese language name gets Japanese treatment on an English page, which is
   the point of writing it in Japanese.
   Adding a language is an entry here, not a sweep of the file.
   --------------------------------------------------------------------------- */

/* Arabic, and the other cursive scripts the catalogue is ready to enable.
   Letter-spacing is inserted between every pair of typographic units, joined or
   not, so any tracking at all cuts the line that carries an Arabic word - the
   positive tracking on the labels is the worst of it, and the negative tracking
   on the headings pushes the letterforms into each other instead. Both off. */
:lang(ar), :lang(fa), :lang(he), :lang(ur) {
    --track-label: 0;
    --track-display: 0;
}
/* No family in the stack on :root covers Arabic or Hebrew, so today those pages
   render through last-resort per-character fallback, which is tofu on a machine
   with no such font installed. The interface families stay at the head of the
   list: a browser picks the first family that has the character it needs, so
   Latin on an Arabic page keeps the face the rest of the product uses and only
   the Arabic runs fall through to a family chosen for them. */
:lang(ar), :lang(fa), :lang(ur) {
    --font-sans: ui-sans-serif, system-ui, "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Tahoma, sans-serif;
}
:lang(he) {
    --font-sans: ui-sans-serif, system-ui, "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
}

/* CJK. Positive tracking is ordinary in these scripts, so the label knob stays
   as it is; the negative tracking is not. A full-width glyph has no side
   bearing to give back, so -.055em runs one character into the next. */
:lang(ja), :lang(zh), :lang(ko) { --track-display: 0; }
:lang(ja) { --font-sans: ui-sans-serif, system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
:lang(zh) { --font-sans: ui-sans-serif, system-ui, "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
:lang(ko) { --font-sans: ui-sans-serif, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }

/* `font-synthesis: none` on :root is a decision about Latin system fonts, which
   all ship the 800 and 900 this design asks for forty times over. A CJK or
   Arabic fallback may ship one weight, and with synthesis off every one of
   those headings then renders at 400 and the whole hierarchy quietly flattens.
   A synthesised bold is worse than a drawn one and much better than none. */
:lang(ar), :lang(fa), :lang(he), :lang(ur),
:lang(ja), :lang(zh), :lang(ko) { font-synthesis: weight; }

/* The three display line heights below 1.05 are set for Latin capitals, which
   leave the top of the em box empty. CJK glyphs fill it, and the CJK families
   declare well over 1 em of ascent plus descent, so at 76px the lines do not
   tighten, they overlap. */
.hero h1:is(:lang(ja), :lang(zh), :lang(ko)) { line-height: 1.2; }
.pricing__intro h2:is(:lang(ja), :lang(zh), :lang(ko)),
.section-intro h2:is(:lang(ja), :lang(zh), :lang(ko)) { line-height: 1.25; }

/* The display headings are measured in `ch` - 14, 15 and 20 characters - which
   is a sentence in English and can be a single compound noun in German. A
   `max-width` does not clip, it lets the word hang out of the column and, on a
   phone, out of the page. Hyphenation is the right answer where the browser has
   the patterns for the language; breaking anywhere is the fallback for where it
   does not. Both are scoped off English, which fits its own measure today. */
.hero h1:not(:lang(en)),
.pricing__intro h2:not(:lang(en)),
.section-intro h2:not(:lang(en)),
.closing-cta h2:not(:lang(en)) { hyphens: auto; overflow-wrap: break-word; }