/*
 * Unico website (site/README.md → Design): dark only, shared by every page, the legal pages included.
 * Every value is a variable from assets/tokens.css, which design/build.ts writes from design/tokens/: the app's
 * dark theme under the app's own names, then the website's scale (site.tokens.json). Stylelint holds the
 * colors to it. Motion follows design/motion.md: hover appears at once and fades out over duration.base,
 * overlays enter over duration.fast from enter.opacity, and nothing moves because the page scrolled.
 */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("assets/fonts/inter-latin-opsz-normal.woff2") format("woff2");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--background-color-window);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Type and color live on body, so a host that styles body (the preview, an embed) can't turn the text black. */
body {
    margin: 0;
    background: var(--background-color-window);
    color: var(--text-color-secondary);
    caret-color: var(--color-focus);
    font-family: var(--font-text);
    font-size: var(--text-prose);
    font-weight: var(--text-prose--font-weight);
    letter-spacing: var(--text-prose--letter-spacing);
    line-height: var(--text-prose--line-height);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--background-color-selected);
    color: var(--text-color-primary);
}

:focus-visible {
    outline: var(--spacing-half) solid var(--color-focus);
    outline-offset: var(--spacing-half);
}

a {
    color: var(--text-color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--spacing-half);
}

h1,
h2,
h3 {
    color: var(--text-color-primary);
    font-weight: var(--font-weight-semibold);
    text-wrap: balance;
}

p,
ul,
ol,
dl {
    margin: 0 0 var(--spacing-4);
}

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

kbd {
    display: inline-flex;
    min-width: var(--height-control-xs);
    height: var(--height-control-xs);
    align-items: center;
    justify-content: center;
    padding-inline: var(--spacing-1);
    border: var(--border-width-hairline) solid var(--border-color-normal);
    border-radius: var(--radius-item);
    color: var(--text-color-tertiary);
    font-family: var(--font-text);
    font-size: var(--text-small);
    font-weight: var(--text-small--font-weight);
    line-height: var(--text-small--line-height);
    letter-spacing: var(--text-small--letter-spacing);
    vertical-align: 0.1em;
}

/* Keys inside larger text step up with it, so a chip still reads as a key. */
.lead kbd {
    min-width: var(--height-control-sm);
    height: var(--height-control-sm);
    color: var(--text-color-primary);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    vertical-align: 0.15em;
}

.skip-link {
    position: absolute;
    inset-block-start: -10rem;
    inset-inline-start: var(--spacing-4);
    z-index: 2;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-control);
    background: var(--background-color-raised);
    color: var(--text-color-primary);
    box-shadow: var(--box-shadow-popover);
}

.skip-link:focus {
    inset-block-start: var(--spacing-4);
}

.wrap {
    max-width: calc(var(--width-page) + 2 * var(--spacing-gutter));
    margin-inline: auto;
    padding-inline: var(--spacing-gutter);
}

/* Header and footer: the same on every page. */

header.site .wrap {
    display: flex;
    height: var(--spacing-16);
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.wordmark {
    color: var(--text-color-primary);
    font-family: var(--font-title);
    font-size: var(--text-title);
    font-variation-settings: var(--font-title--font-variation-settings);
    font-weight: var(--text-title--font-weight);
    letter-spacing: var(--text-title--letter-spacing);
    line-height: var(--text-title--line-height);
    text-decoration: none;
}

header.site nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.nav-link {
    color: var(--text-color-secondary);
    font-size: var(--text-reading);
    letter-spacing: var(--text-reading--letter-spacing);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-out);
}

footer.site {
    margin-block-start: var(--spacing-section);
    padding-block: var(--spacing-10) var(--spacing-16);
    border-block-start: var(--border-width-hairline) solid
        var(--border-color-faint);
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    letter-spacing: var(--text-body--letter-spacing);
}

footer.site ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-6);
    padding: 0;
    margin-block-end: var(--spacing-5);
    list-style: none;
}

footer.site a {
    color: var(--text-color-secondary);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-out);
}

footer.site p {
    max-width: var(--width-prose);
    margin: 0;
}

/* Buttons: fully round, as every control in the app (rules.md N8). The primary has no hover look, as in the app. */

.button {
    display: inline-flex;
    height: var(--height-button);
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding-inline: var(--spacing-5);
    border: var(--border-width-hairline) solid var(--border-color-normal);
    border-radius: var(--radius-full);
    background: var(--background-color-raised);
    color: var(--text-color-primary);
    font-size: var(--text-reading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--text-reading--letter-spacing);
    line-height: var(--text-reading--line-height);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-base) var(--ease-out);
}

.button.primary {
    border-color: transparent;
    background: var(--color-accent-fill);
    color: var(--text-color-on-accent);
}

header.site .button {
    height: var(--height-control-lg);
    padding-inline: var(--spacing-4);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
}

/* Hover appears at once and fades out (motion.md); only where a pointer can hover. */
@media (hover: hover) {
    .button:not(.primary):hover {
        background: var(--background-color-cursor);
        transition-duration: var(--duration-instant);
    }

    .nav-link:hover,
    footer.site a:hover {
        color: var(--text-color-primary);
        transition-duration: var(--duration-instant);
    }
}

/* The homepage. */

.hero {
    padding-block-start: var(--spacing-16);
}

.hero h1 {
    max-width: 13em;
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--text-hero);
    font-variation-settings: var(--font-title--font-variation-settings);
    letter-spacing: var(--text-hero--letter-spacing);
    line-height: var(--text-hero--line-height);
}

.lead {
    max-width: var(--width-prose);
    color: var(--text-color-secondary);
    font-size: var(--text-lead);
    letter-spacing: var(--text-lead--letter-spacing);
    line-height: var(--text-lead--line-height);
}

.hero .lead {
    margin-block: var(--spacing-6) 0;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-block-start: var(--spacing-8);
}

.nowrap {
    white-space: nowrap;
}

/* Three facts under the actions. */
.notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-6);
    padding: 0;
    margin: var(--spacing-6) 0 0;
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
    list-style: none;
}

.notes li {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* The app's icons (Icon.tsx): 16px, a 1.5px stroke (2.25 in the 24-unit box), a step dimmer than their label. */
.icon {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    flex: none;
    fill: none;
    opacity: var(--opacity-icon);
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
}

/*
 * Sections are set apart by a hairline across the content width, with room on both sides (founder, 2026-11-09:
 * "a bit smushed together"), every one alike. The closing panel has no line: it has its own border.
 */
.section {
    padding-block-start: var(--spacing-section-sm);
}

.section::before {
    display: block;
    width: calc(100% - 2 * var(--spacing-gutter));
    max-width: var(--width-page);
    border-block-start: var(--border-width-hairline) solid
        var(--border-color-normal);
    margin: 0 auto var(--spacing-section-sm);
    content: "";
}

.section.close::before {
    content: none;
}

.section.close {
    padding-block-start: var(--spacing-section);
}

.section h2 {
    max-width: 18em;
    margin: 0 0 var(--spacing-5);
    font-family: var(--font-title);
    font-size: var(--text-headline);
    font-variation-settings: var(--font-title--font-variation-settings);
    letter-spacing: var(--text-headline--letter-spacing);
    line-height: var(--text-headline--line-height);
}

.section h3 {
    margin: 0 0 var(--spacing-2);
    font-size: var(--text-title-sm);
    letter-spacing: var(--text-title-sm--letter-spacing);
    line-height: var(--text-title-sm--line-height);
}

.section .lead {
    margin-block-end: var(--spacing-12);
}

/* Heading on one side, text on the other: sections that are read rather than shown. */
.side {
    display: grid;
    align-items: start;
    gap: var(--spacing-16);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.side h2 {
    margin: 0;
}

.side p:last-child {
    margin-block-end: 0;
}

.story {
    color: var(--text-color-primary);
    font-size: var(--text-title);
    letter-spacing: var(--text-title--letter-spacing);
    line-height: var(--text-lead--line-height);
}

.story p + p {
    color: var(--text-color-secondary);
}

/*
 * The close: the page's one action in the app's inset panel, and what comes next along its foot, across the
 * panel's full width (founder, 2026-11-09: in the panel's lower right corner, "Coming soon" felt lost).
 */
.close-panel {
    --panel-padding: var(--spacing-12);

    display: grid;
    padding: var(--panel-padding);
    border-radius: var(--radius-panel);
    background: var(--background-color-content);
    box-shadow: var(--box-shadow-panel);
    gap: var(--spacing-12);
}

.close-panel .lead {
    margin-block-end: 0;
}

.soon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--spacing-5) var(--panel-padding);
    border-block-start: var(--border-width-hairline) solid
        var(--border-color-normal);
    margin: 0 calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1);
    gap: var(--spacing-3) var(--spacing-5);
}

.soon h3 {
    margin: 0;
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
}

.soon ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* The app's label pill (rules.md K11), without the dot. */
.soon li {
    display: inline-flex;
    height: var(--height-control-md);
    align-items: center;
    padding-inline: var(--spacing-3);
    border: var(--border-width-hairline) solid var(--border-color-normal);
    border-radius: var(--radius-full);
    color: var(--text-color-secondary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
}

.more {
    display: flex;
    flex-wrap: wrap;
    margin-block: var(--spacing-8) 0;
    gap: var(--spacing-2) var(--spacing-6);
}

/* Text beside a picture: the copy column, then the picture. */
.split {
    display: grid;
    align-items: start;
    gap: var(--spacing-16);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.split .lead {
    margin-block-end: var(--spacing-6);
}

/* Screenshots: the real app, from apps/desktop/ui/e2e/site.spec.ts. The window sits on the page like a dialog. */

.shot {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--border-color-normal);
    border-radius: var(--radius-panel);
    background: var(--background-color-window);
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hero .shot {
    margin-block-start: var(--spacing-16);
}

/*
 * Callouts: a dot beside part of the screenshot and a hairline through empty space to its label, in a column on
 * the side the label names (data-side). assets/shots.css, written with the screenshot, sets each dot's --x and
 * --y in % of the picture. Below 1040px they are a list under it, each label naming its element; on a phone the
 * picture is a 1:1 crop.
 */
.annotated {
    position: relative;
    margin: 0;
    padding-inline: var(--callout-column);
    --callout-column: var(--width-callout);
}

.callouts {
    position: absolute;
    inset-block: 0;
    inset-inline: var(--callout-column);
    padding: 0;
    margin: 0;
    list-style: none;
    pointer-events: none;
}

.callouts li {
    position: absolute;
    inset-block-start: var(--y);
}

.callouts li::after {
    position: absolute;
    inset-block-start: -0.5px;
    inset-inline: 0;
    height: 1px;
    background: var(--border-color-strong);
    content: "";
    transition: scale var(--duration-move) var(--ease-move);
}

.callouts [data-side="end"]::after {
    transform-origin: left center;
}

.callouts [data-side="start"]::after {
    transform-origin: right center;
}

.callouts [data-side="end"] {
    inset-inline: var(--x) calc(-1 * var(--callout-column));
}

.callouts [data-side="start"] {
    inset-inline: calc(-1 * var(--callout-column)) calc(100% - var(--x));
}

.callouts li::before {
    position: absolute;
    inset-block-start: calc(-0.5 * var(--size-dot) - 0.5px);
    width: var(--size-dot);
    height: var(--size-dot);
    border-radius: var(--radius-full);
    background: var(--text-color-primary);
    content: "";
}

.callouts [data-side="end"]::before {
    inset-inline-start: calc(-0.5 * var(--size-dot));
}

.callouts [data-side="start"]::before {
    inset-inline-end: calc(-0.5 * var(--size-dot));
}

.callouts span {
    position: absolute;
    inset-block-start: 0;
    width: calc(var(--callout-column) - var(--spacing-4));
    background: var(--background-color-window);
    color: var(--text-color-secondary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
    translate: 0 -50%;
}

.callouts [data-side="end"] span {
    inset-inline-end: 0;
    padding-inline-start: var(--spacing-3);
}

.callouts [data-side="start"] span {
    inset-inline-start: 0;
    padding-inline-end: var(--spacing-3);
}

/*
 * A list of facts: an icon, the name, then what it means on a line of its own (founder, 2026-11-09: a bold name
 * run into its sentence read as one long bold line).
 */
.facts {
    display: grid;
    gap: var(--spacing-8) var(--spacing-12);
    padding: 0;
    margin-block-end: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

.facts.single {
    gap: var(--spacing-6);
    grid-template-columns: minmax(0, 1fr);
}

/* Short facts, one line each, in one row (founder, 2026-11-09: the diagram's list "on one line and way shorter"). */
.facts.brief {
    gap: var(--spacing-4) var(--spacing-8);
    grid-template-columns: repeat(4, max-content);
}

/* A little room between a picture and the facts under it. */
.annotated + .facts {
    margin-block-start: var(--spacing-12);
}

.facts > li {
    display: grid;
    align-content: start;
    column-gap: var(--spacing-3);
    grid-template-columns: var(--size-icon-md) minmax(0, 1fr);
}

/* The icon, bare, centered on the title's line (founder, 2026-11-09: the boxes made the lists busy). */
.tile {
    display: flex;
    height: 1lh;
    align-items: center;
    color: var(--text-color-secondary);
}

.facts > li > strong {
    color: var(--text-color-primary);
    font-weight: var(--font-weight-semibold);
}

.facts > li > strong + span {
    color: var(--text-color-tertiary);
    grid-column: 2;
}

/* One quiet line under a column's lead, its icon first. */
.access {
    color: var(--text-color-tertiary);
}

.access .icon {
    margin-inline-end: var(--spacing-2);
    vertical-align: -0.125em;
}

/* AI-second: the consent dialog every AI feature opens before its first call (copy.md → AI disclosure). */
.consent {
    display: grid;
    gap: var(--spacing-5);
    padding-block-start: var(--spacing-16);
}

.dialog {
    max-width: var(--max-width-dialog);
    padding: var(--spacing-6);
    border-radius: var(--radius-dialog);
    background: var(--background-color-raised);
    box-shadow: var(--box-shadow-modal);
    transition:
        opacity var(--duration-fast) var(--ease-enter),
        scale var(--duration-fast) var(--ease-enter);
}

.dialog-title {
    margin: 0 0 var(--spacing-2);
    color: var(--text-color-primary);
    font-size: var(--text-title-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--text-title-sm--letter-spacing);
    line-height: var(--text-title-sm--line-height);
}

.dialog-body {
    margin: 0 0 var(--spacing-6);
    color: var(--text-color-secondary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
}

.dialog-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-2);
}

.dialog-buttons .button {
    height: var(--height-control-lg);
    padding-inline: var(--spacing-3);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
}

.ai-off {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin: 0;
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
}

/* The app's switch, off. */
.switch {
    position: relative;
    width: var(--width-switch);
    height: var(--height-switch);
    flex: none;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-full);
    background: var(--background-color-raised);
}

.switch::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--spacing-half);
    width: var(--size-thumb);
    height: var(--size-thumb);
    border-radius: var(--radius-full);
    background: var(--text-color-tertiary);
    content: "";
    translate: 0 -50%;
}

/*
 * The side cards keep their own height, centered on your computer's card so the lines still meet it, and the
 * list below gets room (founder, 2026-11-09: "too squished with the bullets").
 *
 * Where your mail goes: your computer in the middle, a line to each thing it talks to, labeled with what travels
 * on it. Mail travels only on the accent line to Gmail; Unico's server hangs below, off that line (founder,
 * 2026-11-09: four cards in a row read as mail passing through the server). Drawn in HTML so it scales and reads.
 */
.flow ul {
    --flow-gap: var(--spacing-section-sm);

    display: grid;
    align-items: center;
    padding: 0;
    margin: 0 0 var(--spacing-section-sm);
    gap: var(--spacing-16) var(--flow-gap);
    grid-template-areas:
        "mail home ai"
        ". check .";
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}

.flow li {
    position: relative;
    padding: var(--spacing-5);
    border: var(--border-width-hairline) solid var(--border-color-normal);
    border-radius: var(--radius-dialog);
    background: var(--background-color-content);
}

.flow .home {
    border-color: var(--border-color-strong);
    grid-area: home;
}

.flow [data-link="mail"] {
    --line: 1px solid var(--color-accent);

    grid-area: mail;
}

.flow [data-link="ai"] {
    --line: 1px dashed var(--border-color-strong);

    border-style: dashed;
    grid-area: ai;
}

.flow [data-link="check"] {
    --line: 1px solid var(--border-color-strong);

    grid-area: check;
}

.flow strong {
    display: flex;
    align-items: center;
    margin-block-end: var(--spacing-2);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-semibold);
    gap: var(--spacing-2);
}

.flow li > span:not(.link) {
    display: block;
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
}

/* A local model runs inside your computer: dashed like the AI provider, because it is off until you choose it. */
.flow .local {
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    border: var(--border-width-hairline) dashed var(--border-color-strong);
    margin: var(--spacing-4) 0 0;
    border-radius: var(--radius-row);
    color: var(--text-color-secondary);
    font-size: var(--text-body);
    gap: var(--spacing-2);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
}

/* Unico's servers carry a red cross where the other cards have their icon: no mail goes there. */
.flow .no {
    color: var(--text-color-danger);
    opacity: 1;
}

/* Each line runs from its card to your computer. */
.flow [data-link]::after {
    position: absolute;
    content: "";
    transition: scale var(--duration-move) var(--ease-move);
}

.flow [data-link="mail"]::after,
.flow [data-link="ai"]::after {
    inset-block-start: 50%;
    width: var(--flow-gap);
    border-block-start: var(--line);
}

.flow [data-link="mail"]::after {
    inset-inline-start: 100%;
    transform-origin: right center;
}

.flow [data-link="ai"]::after {
    inset-inline-end: 100%;
    transform-origin: left center;
}

.flow [data-link="check"]::after {
    height: var(--spacing-16);
    border-inline-start: var(--line);
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform-origin: center top;
}

/* What travels on a line, written beside it. */
.flow .link {
    position: absolute;
    color: var(--text-color-tertiary);
    font-size: var(--text-small);
    letter-spacing: var(--text-small--letter-spacing);
    line-height: var(--text-small--line-height);
}

.flow [data-link="mail"] .link,
.flow [data-link="ai"] .link {
    width: var(--flow-gap);
    padding-block-end: var(--spacing-2);
    inset-block-end: 50%;
    text-align: center;
}

.flow [data-link="mail"] .link {
    color: var(--color-accent);
    inset-inline-start: 100%;
}

.flow [data-link="ai"] .link {
    inset-inline-end: 100%;
}

.flow [data-link="check"] .link {
    display: flex;
    height: var(--spacing-16);
    align-items: center;
    padding-inline-start: var(--spacing-3);
    inset-block-end: 100%;
    inset-inline-start: 50%;
    white-space: nowrap;
}

/* What each one never gets outranks what it does get. */
.flow em {
    display: block;
    margin-block-start: var(--spacing-3);
    color: var(--text-color-primary);
    font-size: var(--text-body);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--text-body--line-height);
}

/* "AI-first", struck through in the accent, then "second" (founder, 2026-11-09). */
.struck {
    position: relative;
    color: var(--text-color-tertiary);
    transition: color var(--duration-move) var(--ease-enter);
}

.struck::after {
    position: absolute;
    height: 0.09em;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    content: "";
    inset-block-start: 52%;
    inset-inline: -0.06em;
    rotate: -6deg;
    transform-origin: left center;
    transition: scale var(--duration-move) var(--ease-move);
}

.contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-8);
    padding: 0;
    margin-block: var(--spacing-6) 0;
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    list-style: none;
}

/*
 * The keyboard demo (assets/site.js): the app's list at the app's sizes, from the same tokens. Without JavaScript
 * it is a picture of an inbox; with it, a listbox that takes the keys while it has focus.
 */
.demo {
    display: grid;
    gap: var(--spacing-4);
}

.demo-panel {
    position: relative;
    overflow: hidden;
    min-height: calc(
        var(--height-header) + 7 * var(--height-row) + var(--spacing-2)
    );
    border-radius: var(--radius-panel);
    background: var(--background-color-content);
    box-shadow: var(--box-shadow-modal);
    color: var(--text-color-secondary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
}

.demo-panel:focus-within {
    outline: var(--spacing-half) solid var(--color-focus);
    outline-offset: var(--spacing-half);
}

.demo-header {
    display: flex;
    height: var(--height-header);
    align-items: center;
    gap: var(--spacing-1);
    padding-inline: var(--padding-box-line) var(--spacing-3);
}

.demo-title {
    margin-inline-end: var(--spacing-2);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-medium);
}

.lane {
    display: inline-flex;
    height: var(--height-control-md);
    align-items: center;
    gap: var(--spacing-1);
    padding-inline: var(--spacing-3);
    border: var(--border-width-hairline) solid var(--border-color-normal);
    border-radius: var(--radius-full);
    background: var(--background-color-raised);
    color: var(--text-color-tertiary);
    font: inherit;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--text-small--letter-spacing);
    line-height: var(--text-small--line-height);
}

.lane.is-active {
    background: var(--background-color-cursor);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-semibold);
}

.demo-list {
    padding: 0 0 var(--spacing-2);
    margin: 0;
    list-style: none;
    outline: none;
}

.row {
    height: var(--height-row);
    padding-inline: var(--spacing-2);
    outline: none;
}

.row > span {
    display: flex;
    height: 100%;
    align-items: center;
    padding-inline: var(--spacing-2);
    border-radius: var(--radius-row);
}

.row.cursor > span {
    background: var(--background-color-hover);
}

/* The mark slot: the unread dot, or the cursor's box (rules.md K4); the 14px mark starts 3px into its 27px slot (L7). */
.mark {
    display: flex;
    width: var(--width-row-slot);
    flex: none;
    align-items: center;
    padding-inline-start: 3px;
}

.row.unread .mark::before,
.row.cursor .mark::before {
    width: var(--size-dot);
    height: var(--size-dot);
    margin-inline-start: 3px;
    border-radius: var(--radius-full);
    background: var(--text-color-secondary);
    content: "";
}

.row.cursor .mark::before {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    margin-inline-start: 0;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-item);
    background: var(--background-color-hover);
}

.from {
    overflow: hidden;
    width: var(--width-sender);
    flex: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject,
.snippet {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject {
    flex: none;
    max-width: 60%;
    margin-inline-start: var(--spacing-3);
}

.snippet {
    flex: 1;
    margin-inline-start: var(--spacing-2);
    color: var(--text-color-tertiary);
}

.row.unread .from,
.row.unread .subject {
    color: var(--text-color-primary);
    font-weight: var(--font-weight-semibold);
}

.date {
    width: var(--width-date);
    flex: none;
    color: var(--text-color-tertiary);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.row.unread .date {
    color: var(--text-color-primary);
}

.demo-empty,
.demo-thread {
    padding: var(--spacing-12) var(--spacing-6);
}

.demo-empty {
    color: var(--text-color-tertiary);
    text-align: center;
}

.demo-empty strong {
    display: block;
    margin-block-end: var(--spacing-1);
    color: var(--text-color-secondary);
    font-size: var(--text-reading);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-reading--line-height);
}

.demo-thread {
    padding-block-start: var(--spacing-6);
    outline: none;
}

.demo-thread h3 {
    margin: 0 0 var(--spacing-4);
    font-size: var(--text-title);
    letter-spacing: var(--text-title--letter-spacing);
    line-height: var(--text-title--line-height);
}

.demo-thread p {
    max-width: 56ch;
    color: var(--text-color-secondary);
    font-size: var(--text-reading);
    line-height: var(--text-reading--line-height);
}

.demo-thread .meta {
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
}

/* Toast and overlays: the app's enter (motion.md M3) and nothing on exit. */
.demo-toast {
    position: absolute;
    inset-block-end: var(--spacing-3);
    inset-inline-start: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-control);
    background: var(--background-color-raised);
    box-shadow: var(--box-shadow-popover);
    color: var(--text-color-primary);
    transition:
        opacity var(--duration-base) var(--ease-enter),
        translate var(--duration-base) var(--ease-enter);
}

.demo-toast:empty {
    display: none;
}

.demo-toast[data-enter] {
    opacity: var(--enter-opacity);
    translate: 0 var(--spacing-2);
}

.demo-menu {
    position: absolute;
    inset-block-start: var(--spacing-8);
    inset-inline: var(--spacing-6);
    overflow: hidden;
    border-radius: var(--radius-dialog);
    background: var(--background-color-raised);
    box-shadow: var(--box-shadow-modal);
    transition:
        opacity var(--duration-fast) var(--ease-enter),
        scale var(--duration-fast) var(--ease-enter);
}

.demo-menu[data-enter] {
    opacity: var(--enter-opacity);
    scale: var(--enter-scale);
}

.demo-menu input {
    width: 100%;
    height: var(--height-control-xl);
    padding-inline: var(--spacing-4);
    border: 0;
    border-block-end: var(--border-width-hairline) solid
        var(--border-color-normal);
    background: transparent;
    color: var(--text-color-primary);
    font: inherit;
    font-size: var(--text-reading);
    outline: none;
}

.demo-menu ul {
    max-height: calc(5 * var(--height-palette-row) + var(--spacing-2));
    overflow-y: auto;
    padding: var(--spacing-1);
    margin: 0;
    list-style: none;
}

.demo-menu li {
    display: flex;
    height: var(--height-palette-row);
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing-3);
    border-radius: var(--radius-row);
    color: var(--text-color-primary);
}

.demo-menu li[aria-selected="true"] {
    background: var(--background-color-cursor);
}

.demo-keys {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.demo-keys button {
    display: inline-flex;
    height: var(--height-control-lg);
    align-items: center;
    gap: var(--spacing-2);
    padding-inline: var(--spacing-1) var(--spacing-3);
    border: var(--border-width-hairline) solid var(--border-color-normal);
    border-radius: var(--radius-full);
    background: var(--background-color-raised);
    color: var(--text-color-secondary);
    font: inherit;
    font-size: var(--text-body);
    transition: background-color var(--duration-base) var(--ease-out);
}

.demo-keys kbd {
    border-radius: var(--radius-full);
    color: var(--text-color-primary);
}

.demo-keys button[data-pressed] {
    background: var(--background-color-cursor);
    transition-duration: var(--duration-instant);
}

.demo-keys button[data-pressed] kbd {
    border-color: var(--border-color-strong);
}

@media (hover: hover) {
    .demo-keys button:hover {
        background: var(--background-color-cursor);
        transition-duration: var(--duration-instant);
    }
}

/* Text pages: the legal set, support, Google data, How it works. One readable column on the window. */

main.doc {
    max-width: var(--max-width-column);
    padding-block: var(--spacing-12) 0;
}

main.doc h1 {
    margin: 0 0 var(--spacing-4);
    font-family: var(--font-title);
    font-size: var(--text-headline);
    font-variation-settings: var(--font-title--font-variation-settings);
    letter-spacing: var(--text-headline--letter-spacing);
    line-height: var(--text-headline--line-height);
}

main.doc h2 {
    margin: var(--spacing-12) 0 var(--spacing-3);
    font-size: var(--text-title);
    letter-spacing: var(--text-title--letter-spacing);
    line-height: var(--text-title--line-height);
}

main.doc h3 {
    margin: var(--spacing-8) 0 var(--spacing-2);
    font-size: var(--text-title-sm);
    letter-spacing: var(--text-title-sm--letter-spacing);
    line-height: var(--text-title-sm--line-height);
}

main.doc li + li {
    margin-block-start: var(--spacing-2);
}

.meta {
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
}

.draft {
    margin: 0 0 var(--spacing-8);
    padding: var(--spacing-3) var(--spacing-4);
    border: var(--border-width-hairline) solid var(--border-color-strong);
    border-radius: var(--radius-control);
    background: var(--background-color-content);
    color: var(--text-color-primary);
}

.draft p {
    margin: 0;
}

/* Open items for the founder or counsel, left visible on purpose in the drafts. */
.todo {
    background: none;
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
}

/* The legal pages' section breaks (--- in compliance/legal/). */
hr {
    margin: var(--spacing-8) 0;
    border: 0;
    border-block-start: var(--border-width-hairline) solid
        var(--border-color-normal);
}

blockquote {
    margin: 0 0 var(--spacing-4);
    padding-inline-start: var(--spacing-4);
    border-inline-start: 1px solid var(--border-color-strong);
    color: var(--text-color-primary);
}

.table-scroll {
    overflow-x: auto;
    margin: 0 0 var(--spacing-4);
}

main.doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
}

main.doc th,
main.doc td {
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0;
    border-block-end: var(--border-width-hairline) solid
        var(--border-color-normal);
    text-align: start;
    vertical-align: top;
}

main.doc th {
    color: var(--text-color-primary);
    font-weight: var(--font-weight-semibold);
}

/* A table says what it holds, above it, in the column's left edge (rules.md L8). */
main.doc caption {
    margin-block-end: var(--spacing-2);
    color: var(--text-color-tertiary);
    font-size: var(--text-body);
    letter-spacing: var(--text-body--letter-spacing);
    line-height: var(--text-body--line-height);
    text-align: start;
}

/* Narrower windows: smaller headlines, stacked splits, callouts as a list under the picture. */

@media (width < 1040px) {
    .hero h1 {
        font-size: var(--text-hero-sm);
        letter-spacing: var(--text-hero-sm--letter-spacing);
        line-height: var(--text-hero-sm--line-height);
    }

    footer.site {
        padding-block-start: var(--spacing-section-sm);
    }

    .section {
        padding-block-start: var(--spacing-16);
    }

    .section::before {
        margin-block-end: var(--spacing-16);
    }

    .section.close {
        padding-block-start: var(--spacing-section-sm);
    }

    footer.site {
        margin-block-start: var(--spacing-section-sm);
    }

    .section h2,
    main.doc h1 {
        font-size: var(--text-headline-sm);
        letter-spacing: var(--text-headline-sm--letter-spacing);
        line-height: var(--text-headline-sm--line-height);
    }

    .split {
        gap: var(--spacing-10);
        grid-template-columns: minmax(0, 1fr);
    }

    .facts.brief {
        grid-template-columns: repeat(2, max-content);
    }

    /* The diagram becomes a tree: your computer on top, a trunk down its left, a branch to each card. */
    .flow ul {
        gap: var(--spacing-4);
        grid-template-areas: "home" "mail" "ai" "check";
        grid-template-columns: minmax(0, 1fr);
    }

    .flow [data-link] {
        margin-inline-start: var(--spacing-8);
    }

    .flow [data-link]::before {
        position: absolute;
        border-inline-start: 1px solid var(--border-color-strong);
        content: "";
        inset-block: calc(var(--spacing-4) * -1) 0;
        inset-inline-start: calc(var(--spacing-4) * -1);
    }

    .flow [data-link]:last-child::before {
        inset-block-end: 50%;
    }

    .flow [data-link="mail"]::after,
    .flow [data-link="ai"]::after,
    .flow [data-link="check"]::after {
        width: var(--spacing-4);
        height: auto;
        border-inline-start: 0;
        border-block-start: var(--line);
        inset: 50% auto auto calc(var(--spacing-4) * -1);
        transform-origin: left center;
    }

    /* The line's label becomes the card's first line. */
    .flow [data-link] .link {
        position: static;
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        margin-block-end: var(--spacing-2);
        text-align: start;
    }

    .annotated {
        padding-inline: 0;
    }

    .callouts {
        position: static;
        margin-block-start: var(--spacing-5);
    }

    .callouts li,
    .callouts [data-side] {
        position: relative;
        inset: auto;
        padding-inline-start: var(--spacing-5);
        border: 0;
    }

    .callouts li + li {
        margin-block-start: var(--spacing-2);
    }

    .callouts li::after {
        display: none;
    }

    .side,
    .close-panel {
        gap: var(--spacing-8);
        grid-template-columns: minmax(0, 1fr);
    }

    .consent {
        padding-block-start: 0;
    }

    .callouts li::before,
    .callouts [data-side]::before {
        inset-block-start: calc(
            (var(--text-body--line-height) - var(--size-dot)) / 2
        );
        inset-inline: 0 auto;
    }

    .callouts span,
    .callouts [data-side] span {
        position: static;
        width: auto;
        padding: 0;
        translate: none;
    }
}

@media (width < 640px) {
    .wrap {
        padding-inline: var(--spacing-4);
    }

    .section::before {
        width: calc(100% - 2 * var(--spacing-4));
    }

    .close-panel {
        --panel-padding: var(--spacing-6);
    }

    header.site .nav-link {
        display: none;
    }

    /* "one lightning-fast Inbox" no longer fits a line: break after "one" instead of leaving "Inbox" alone. */
    .hero h1 br {
        display: none;
    }

    .facts,
    .facts.brief {
        grid-template-columns: minmax(0, 1fr);
    }

    .from {
        width: calc(var(--width-sender) / 2);
    }

    .snippet {
        display: none;
    }

    .subject {
        flex: 1;
        max-width: none;
    }
}

/*
 * Motion, on the app's curves and durations (design/motion.md; founder, 2026-11-09: "some motion to jazz it up"):
 * the hero rises once on load, from a visible start; below the fold, assets/site.js arms a [data-reveal] element
 * when it has script and motion is wanted, and marks it [data-shown] when it comes into view, once. Unarmed, every
 * element is at rest, so the page is complete without script, under reduced motion and in a screenshot.
 */
@media (prefers-reduced-motion: no-preference) {
    .hero h1,
    .hero .lead,
    .hero .actions,
    .hero .notes {
        animation: rise var(--duration-move) var(--ease-move) backwards;
    }

    .hero .lead {
        animation-delay: calc(var(--duration-fast) * 0.6);
    }

    .hero .actions {
        animation-delay: calc(var(--duration-fast) * 1.2);
    }

    .hero .notes {
        animation-delay: calc(var(--duration-fast) * 1.8);
    }

    .hero .shot {
        animation: rise-far calc(var(--duration-move) * 2) var(--ease-move)
            calc(var(--duration-fast) * 2.4) backwards;
    }
}

@keyframes rise {
    from {
        opacity: var(--enter-opacity);
        translate: 0 var(--spacing-3);
    }
}

@keyframes rise-far {
    from {
        opacity: var(--enter-opacity);
        translate: 0 var(--spacing-8);
    }
}

/* The callouts draw from their dots, one after another. */
[data-armed]:not([data-shown]) .callouts li::after {
    scale: 0 1;
}

.callouts li:nth-child(2)::after {
    transition-delay: var(--duration-fast);
}

.callouts li:nth-child(3)::after {
    transition-delay: calc(var(--duration-fast) * 2);
}

.callouts li:nth-child(4)::after {
    transition-delay: calc(var(--duration-fast) * 3);
}

/* The consent dialog arrives as the app's overlays do (motion.md M3). */
[data-armed]:not([data-shown]) .dialog {
    opacity: var(--enter-opacity);
    scale: var(--enter-scale);
}

/* "first" reads plainly for a beat, then the strike draws across it and it dims. */
[data-armed]:not([data-shown]) .struck {
    color: var(--text-color-primary);
}

[data-armed]:not([data-shown]) .struck::after {
    scale: 0 1;
}

.struck,
.struck::after {
    transition-delay: calc(var(--duration-fast) * 4);
}

/* The diagram's lines draw out from your computer, mail first. */
[data-armed]:not([data-shown]) .flow [data-link]::after {
    scale: 0 1;
}

[data-armed]:not([data-shown]) .flow [data-link="check"]::after {
    scale: 1 0;
}

.flow [data-link="ai"]::after {
    transition-delay: var(--duration-fast);
}

.flow [data-link="check"]::after {
    transition-delay: calc(var(--duration-fast) * 2);
}

@media (width < 1040px) {
    [data-armed]:not([data-shown]) .flow [data-link="check"]::after {
        scale: 0 1;
    }
}

/* Reduced motion keeps the fades and drops the movement (motion.md M9). */
@media (prefers-reduced-motion: reduce) {
    .demo-toast,
    .demo-menu {
        transition-property: opacity;
    }

    .demo-toast[data-enter],
    .demo-menu[data-enter] {
        translate: none;
        scale: none;
    }
}