/*
    The public site: marketing, documentation, legal.

    A separate stylesheet from app.css on purpose. These pages exist to rank,
    so what they load is a budget rather than an afterthought -- app.css is
    1,500 lines of inbox chrome that no public page renders, and none of it
    should be on the critical path of a page whose whole job is to arrive
    quickly. Both sheets read from the same tokens.css, so the brand is stated
    once and only the component layer differs.

    Class names follow the same ADS-derived convention as app.css where a
    component already exists there (.ads-button), and are prefixed .site-
    where the component is peculiar to the public pages.

    No raw hex here either; there is a test.
*/

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

body:has(.site) {
    margin: 0;
    background: var(--ds-surface-sunken);
    -webkit-font-smoothing: antialiased;
}

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ds-surface-sunken);
}

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

/*
    Resets inside :where() so they score zero and lose every contest with a
    component. app.css learned this the hard way -- see the note there, and
    the test that keeps it true.
*/
:where(.site a) {
    color: var(--ds-link);
    text-decoration: none;
}

:where(.site a:hover) { text-decoration: underline; }

:where(.site h1, .site h2, .site h3, .site h4) {
    margin: 0;
    letter-spacing: var(--ds-font-tracking-display);
}

:where(.site p, .site ul, .site ol) { margin: 0; }

.site :focus { outline: none; }

.site :focus-visible {
    outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .site *,
    .site *::before,
    .site *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.site-main { flex: 1 1 auto; }

/* The measure for marketing content. Docs and legal set their own. */
.site-container {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding-inline: var(--ds-space-300);
}

/* Skip link: the docs pages put a sidebar of twelve links before the content,
   which is exactly the case this exists for. */
.site-skip {
    position: absolute;
    left: -9999px;
    top: var(--ds-space-100);
    background: var(--ds-surface);
    color: var(--ds-text);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-small);
    padding: var(--ds-space-100) var(--ds-space-200);
    z-index: 10;
}

.site-skip:focus { left: var(--ds-space-100); }

/* ================================================================ header */

/*
    Sticky and translucent on the marketing pages.

    The design shows this on the home page only. Applied to every marketing
    page instead: a header that sticks on one page and scrolls away on the next
    reads as a bug rather than as a treatment, and the call to action it
    carries is the reason the header exists.

    Docs and legal keep their quiet static bar -- those pages are read
    top-to-bottom and a floating bar over a set of instructions is in the way.
*/
.site-header {
    border-bottom: var(--ds-border-width) solid transparent;
}

.site-header[data-variant="marketing"] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ds-surface) 85%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--ds-border);
}

.site-header[data-variant="marketing"] .site-header-inner { padding-block: var(--ds-space-150); }

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-200);
    padding-block: var(--ds-space-250);
}

.site-header-left {
    display: flex;
    align-items: center;
    gap: var(--ds-space-400);
    min-width: 0;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    text-decoration: none;
    flex: 0 0 auto;
}

.site-brand:hover { text-decoration: none; }

.site-brand-name {
    font-size: 20px;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
    color: var(--ds-text);
    /* The wordmark is Schibsted everywhere, including on docs pages, which
       otherwise run on the system stack. */
    font-family: var(--ds-font-family-brand);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--ds-space-025);
}

.site-nav a {
    color: var(--ds-text-subtle);
    font-size: 14px;
    font-weight: var(--ds-font-weight-medium);
    padding: var(--ds-space-075) var(--ds-space-150);
    border-radius: var(--ds-radius-small);
    transition: background 100ms ease, color 100ms ease;
}

.site-nav a:hover {
    background: var(--ds-background-selected);
    color: var(--ds-text-brand);
    text-decoration: none;
}

.site-nav a[aria-current="page"] { color: var(--ds-text); }

/*
    The compact menu. Hidden above 640px, where the row itself is the
    navigation. Built on `details`, so opening and closing, the Escape key and
    the disclosure's announced state all come from the browser -- this origin
    serves one script and a nav menu is not worth a second.
*/
.site-menu { display: none; }

.site-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px, the minimum comfortable target on a phone. */
    width: 44px;
    height: 44px;
    color: var(--ds-text-subtle);
    border-radius: var(--ds-radius-small);
    cursor: pointer;
    /* Both are needed: the standard property, and Safari's own marker. */
    list-style: none;
}

.site-menu-toggle::-webkit-details-marker { display: none; }
.site-menu-toggle:hover { color: var(--ds-text); background: var(--ds-background-neutral-subtle-hovered); }
.site-menu[open] .site-menu-toggle { color: var(--ds-text); background: var(--ds-background-neutral-subtle-hovered); }

/*
    Anchored to the header, not to the button. Hanging it under the toggle put
    it straight over the call to action -- open the menu, decide against it,
    and the thing you want next is behind the panel. `details` has no
    click-outside dismissal without script, so covering a control is worse here
    than it would be in a menu that closes when you look away.

    Dropping below the whole header covers page copy instead, which nobody is
    reaching for while a menu is open.
*/
.site-menu-panel {
    position: absolute;
    top: calc(100% + var(--ds-space-100));
    /*
        Matches .site-container's padding-inline, so the panel lines up with
        the call to action above it. `right: 0` resolves to the container's
        padding box, which is the viewport edge -- flush to the glass, and
        visibly not aligned with anything else on the page.
    */
    right: var(--ds-space-300);
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: var(--ds-space-050);
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-small);
    box-shadow: var(--ds-shadow-overlay);
}

.site-menu-panel a {
    padding: var(--ds-space-100) var(--ds-space-150);
    color: var(--ds-text);
    text-decoration: none;
    border-radius: var(--ds-radius-small);
}

.site-menu-panel a:hover { background: var(--ds-background-neutral-subtle-hovered); text-decoration: none; }
.site-menu-panel a[aria-current="page"] { font-weight: var(--ds-font-weight-semibold); }

.site-header-right {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    flex: 0 0 auto;
}

.site-signin {
    color: var(--ds-text);
    font-size: 14px;
    font-weight: var(--ds-font-weight-semibold);
    padding: var(--ds-space-100) var(--ds-space-200);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-small);
    white-space: nowrap;
    transition: border-color 100ms ease;
}

.site-signin:hover { border-color: var(--ds-border-bold); text-decoration: none; }

/* ------------------------------------------------------------ docs header */

/*
    Smaller, quieter, and no call to action. A help page that opens with a
    pitch stops being a help page, and the pages rank because they read as
    documentation.
*/
.site-header[data-variant="docs"] {
    border-bottom-color: var(--ds-border);
    background: var(--ds-surface);
}

.site-header[data-variant="docs"] .site-header-inner { padding-block: var(--ds-space-150); }
.site-header[data-variant="docs"] .site-brand-name { font-size: 15px; }

/* ================================================================ button */

.site-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*
        The label is "Start 30-day trial — no card" and it never shortens, so
        it must never wrap either. Both properties are load-bearing during the
        font swap, when the string is briefly measured in a fallback face.
    */
    white-space: nowrap;
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    font-family: var(--ds-font-family-brand);
    font-size: 14px;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
    padding: var(--ds-space-150) var(--ds-space-200);
    border-radius: var(--ds-radius-small);
    border: 0;
    text-decoration: none;
    /* 44px minimum hit target, per the bundle's accessibility note. */
    min-height: 44px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bosun-blue) 25%, transparent);
}

.site-cta:hover {
    background: var(--ds-background-brand-bold-hovered);
    color: var(--ds-text-inverse);
    text-decoration: none;
}

.site-cta[data-size="large"] {
    font-size: 16px;
    padding: var(--ds-space-200) var(--ds-space-400);
}

/* ================================================================ docs */

.site-docs-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--ds-space-600);
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: var(--ds-space-500) var(--ds-space-300) var(--ds-space-800);
}

.site-docs-nav {
    font-size: 14px;
    align-self: start;
    position: sticky;
    top: var(--ds-space-300);
}

.site-docs-nav-group + .site-docs-nav-group { margin-top: var(--ds-space-400); }

.site-docs-nav-title {
    font: var(--ds-font-heading-xxsmall);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-subtlest);
    margin-bottom: var(--ds-space-150);
}

.site-docs-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
}

.site-docs-nav a {
    display: block;
    color: var(--ds-text-subtle);
    padding: var(--ds-space-075) 0;
    line-height: 1.45;
}

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

.site-docs-nav a[aria-current="page"] {
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-bold);
}

.site-docs-body { min-width: 0; }

/*
    The soft product line at the foot of every docs page -- one sentence,
    above a hairline, and the only place a help page mentions the product.
*/
.site-docs-outro {
    margin-top: var(--ds-space-800);
    padding-top: var(--ds-space-300);
    border-top: var(--ds-border-width) solid var(--ds-border);
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

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

.site-legal-layout {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--ds-space-600) var(--ds-space-300) var(--ds-space-800);
}

.site-legal-updated {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
    margin-top: var(--ds-space-100);
}

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

/*
    One footer on every public page -- marketing, documentation and legal all
    get the same one. It used to have a slim variant for legal pages; the
    updated design drops it.

    The columns are content, not chrome: someone who reached a help page from a
    search and found it useful should be able to see what else is here without
    going back to the navigation they never used.
*/

.site-footer {
    border-top: var(--ds-border-width) solid var(--ds-border);
    background: var(--ds-surface);
    margin-top: var(--ds-space-800);
    padding-block: var(--ds-space-600) var(--ds-space-250);
}

.site-footer-columns {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ds-space-400);
}

.site-footer-lockup {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.site-footer-lockup span {
    font-family: var(--ds-font-family-brand);
    font-size: 16px;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
    color: var(--ds-text);
}

.site-footer-blurb {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-150);
    max-width: 34ch;
}

.site-footer-email {
    display: inline-block;
    font-family: var(--ds-font-family-code);
    font-size: 12px;
    margin-top: var(--ds-space-200);
}

.site-footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
}

.site-footer-heading {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtle);
    margin-bottom: var(--ds-space-050);
}

.site-footer-column a {
    font: var(--ds-font-body-small);
    font-size: 13px;
    color: var(--ds-text);
}

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

.site-footer-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
    margin-top: var(--ds-space-500);
    padding-top: var(--ds-space-250);
    border-top: var(--ds-border-width) solid var(--ds-border);
    font: var(--ds-font-body-small);
    font-size: 12px;
    color: var(--ds-text-subtle);
}

.site-footer-base-links {
    display: flex;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
}

.site-footer-base a { color: var(--ds-text-subtle); }
.site-footer-base a:hover { color: var(--ds-text); }

/* ================================================================ mobile */

/*
    390px is the target, and the case is specific: an administrator reading a
    fix on a phone while standing at somebody else's desk.
*/
@media (max-width: 900px) {
    .site-docs-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ds-space-400);
        padding-top: var(--ds-space-300);
    }

    .site-docs-nav { position: static; }
}

@media (max-width: 640px) {
    .site-header-inner {
        flex-wrap: wrap;
        gap: var(--ds-space-150);
    }

    .site-header-left {
        width: 100%;
        justify-content: space-between;
        gap: var(--ds-space-200);
    }

    /*
        Marketing collapses to two rows: brand and the menu button on the
        first, the call to action on the second, full width.

        One row was tried and does not fit. The label is "Start 30-day trial --
        no card", the design bundle says never to shorten it, and `white-space:
        nowrap` above enforces that -- roughly 230px of button, which will not
        share 390px with a brand lockup and a 44px target. Forcing it produced
        a header wider than the viewport, and because the document then scrolls
        horizontally, every centred heading on the page below was cut off too.

        Scoped to the marketing variant: docs and legal carry a crumb and a
        sign-in link, which fit as they are.
    */
    .site-header[data-variant="marketing"] .site-nav,
    .site-header[data-variant="marketing"] .site-signin { display: none; }

    .site-header[data-variant="marketing"] .site-header-inner { position: relative; }
    .site-header[data-variant="marketing"] .site-header-right { width: 100%; }
    .site-header[data-variant="marketing"] .site-header-right .site-cta { width: 100%; }

    .site-menu { display: block; }

    .site-footer-columns { gap: var(--ds-space-300); }
    .site-footer-base { flex-direction: column; align-items: flex-start; }
}

/* ============================================================ legal body */

/*
    The rendered markdown from docs/terms. Styled by element rather than by
    class, because the markup comes from CommonMark and cannot carry classes.
    Scoped so it reaches nothing else.
*/

.site-legal-body h2 {
    font: var(--ds-font-heading-medium);
    margin: var(--ds-space-500) 0 var(--ds-space-150);
    padding-top: var(--ds-space-250);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.site-legal-body h3 {
    font: var(--ds-font-heading-small);
    margin: var(--ds-space-400) 0 var(--ds-space-100);
}

.site-legal-body p,
.site-legal-body li { color: var(--ds-text); }

.site-legal-body p { margin: var(--ds-space-150) 0; }

.site-legal-body ul,
.site-legal-body ol {
    margin: var(--ds-space-150) 0;
    padding-left: var(--ds-space-300);
}

.site-legal-body li { margin: var(--ds-space-075) 0; }

.site-legal-body code {
    font-family: var(--ds-font-family-code);
    font-size: 0.875em;
    background: var(--ds-surface-sunken);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-xsmall);
    padding: 1px var(--ds-space-050);
}

.site-legal-body table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--ds-space-250) 0;
    font: var(--ds-font-body-small);
}

.site-legal-body th,
.site-legal-body td {
    text-align: left;
    padding: var(--ds-space-100) var(--ds-space-150);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    vertical-align: top;
}

.site-legal-body th {
    font-weight: var(--ds-font-weight-bold);
    background: var(--ds-surface-sunken);
}

/* Several of these tables are two-column definitions with no header row,
   which CommonMark still emits a thead for. */
.site-legal-body thead:has(th:empty) { display: none; }

.site-legal-body hr {
    border: 0;
    border-top: var(--ds-border-width) solid var(--ds-border);
    margin: var(--ds-space-500) 0;
}

.site-legal-body blockquote {
    margin: var(--ds-space-250) 0;
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface-sunken);
    border-left: 3px solid var(--ds-border);
}

.site-legal-body blockquote p { margin: 0; color: var(--ds-text-subtle); }

/*
    The draft banner. Never seen in production -- an unpublishable document
    404s there -- but red, because the one thing worse than not having a
    privacy policy is mistaking a draft for one.
*/
.site-legal-draft {
    background: var(--ds-background-danger);
    border: var(--ds-border-width) solid var(--ds-text-danger);
    color: var(--ds-text-danger);
    border-radius: var(--ds-radius-small);
    padding: var(--ds-space-150) var(--ds-space-200);
    font-weight: var(--ds-font-weight-bold);
    margin: var(--ds-space-300) 0 0;
}

/* ============================================================== marketing */

/*
    Vertical rhythm. The prototypes space sections with ad-hoc margins between
    52 and 64px; this is one step off the ADS scale, applied once.
*/
.site-section { padding-top: var(--ds-space-800); }
.site-section:first-child { padding-top: var(--ds-space-1000); }

.site-measure {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-inline: var(--ds-space-300);
}

.site-narrow { max-width: 860px; }

.site-centred { text-align: center; }

.site-header-landing ~ .site-main .site-eyebrow { color: var(--ds-text-subtle); }

.site-eyebrow {
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-brand);
    margin-bottom: var(--ds-space-150);
}

/* ------------------------------------------------------------------ hero */

/*
    A wash behind the first screen, fading out before the content below it.
    Painted on a wrapper rather than the section so it spans the full width
    while the content keeps its measure.
*/
.site-hero-wash {
    background: radial-gradient(
        ellipse 70% 60% at 50% -10%,
        var(--ds-background-selected) 0%,
        transparent 100%
    );
}

.site-hero h1 {
    font-size: clamp(34px, 5.2vw, 52px);
    font-weight: var(--ds-font-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 22ch;
}

/*
    The scarcity pill above the headline. Live data like every other statement
    of the count -- and it disappears with the offer rather than lingering.
*/
.site-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    color: var(--ds-text-subtle);
    font-size: 12.5px;
    font-weight: var(--ds-font-weight-bold);
    padding: var(--ds-space-075) var(--ds-space-150);
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
}

.site-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-background-urgent-bold);
    flex: 0 0 auto;
}

.site-hero .site-pill + h1 { margin-top: var(--ds-space-250); }

.site-hero.site-centred h1 { margin-inline: auto; }

.site-hero-sub {
    font: var(--ds-font-body-large);
    font-size: 17px;
    color: var(--ds-text-subtle);
    max-width: 54ch;
    margin-top: var(--ds-space-250);
}

.site-hero.site-centred .site-hero-sub { margin-inline: auto; }

.site-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
    margin-top: var(--ds-space-400);
}

.site-centred .site-hero-actions { justify-content: center; }

.site-hero-note {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-150);
}

/* ------------------------------------------------------------ price band */

/*
    The one dark surface on the site. Ink rather than blue: the accent is
    spent on things you can click, and a full-width blue panel would make the
    buttons on the same page compete with it.
*/
.site-band {
    position: relative;
    overflow: hidden;
    background: var(--ds-text);
    color: var(--ds-text-inverse);
    border-radius: 14px;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 40px);
}

/* A blue bloom from the lower right, so the one dark panel on the site is not
   a flat rectangle. Behind the content and inert to the pointer. */
.site-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 90% at 85% 110%,
        color-mix(in srgb, var(--bosun-blue) 35%, transparent) 0%,
        transparent 100%
    );
    pointer-events: none;
}

.site-band-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 44px);
    flex-wrap: wrap;
}

.site-band-price { flex: 0 0 auto; }

.site-band-figure {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-100);
}

.site-band-figure > span:first-child {
    font-size: clamp(44px, 6vw, 60px);
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: -0.03em;
    line-height: 1;
}

.site-band-figure > span:last-child {
    font-size: 15px;
    color: color-mix(in srgb, var(--ds-text-inverse) 65%, transparent);
    white-space: nowrap;
}

.site-band-note {
    font: var(--ds-font-body-small);
    color: color-mix(in srgb, var(--ds-text-inverse) 55%, transparent);
    margin-top: var(--ds-space-075);
}

.site-band-rule {
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, var(--ds-text-inverse) 16%, transparent);
}

.site-band-body {
    flex: 1 1 260px;
    min-width: 0;
}

.site-band-body p {
    font-size: 15px;
    line-height: 1.65;
    color: color-mix(in srgb, var(--ds-text-inverse) 82%, transparent);
    max-width: 44ch;
}

.site-band-body s { color: color-mix(in srgb, var(--ds-text-inverse) 45%, transparent); }

.site-band-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-250);
    flex-wrap: wrap;
    margin-top: var(--ds-space-250);
}

.site-band-actions a:not(.site-cta) {
    color: var(--ds-text-inverse);
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
}

/* ----------------------------------------------- browser chrome on the still */

/*
    A window frame around the inbox still, so it reads as a screen rather than
    as a component that escaped onto the page.
*/
.site-preview-chrome {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-100) var(--ds-space-200);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

.site-preview-dots { display: flex; gap: 5px; flex: 0 0 auto; }

.site-preview-dots span {
    width: 9px;
    height: 9px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-border);
}

.site-preview-address {
    flex: 1 1 auto;
    text-align: center;
    font: var(--ds-font-body-small);
    font-size: 12px;
    color: var(--ds-text-subtlest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Balances the dots so the address sits centred. */
.site-preview-chrome::after {
    content: "";
    width: 37px;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------- cards */

.site-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ds-space-200);
}

.site-card {
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-300);
}

.site-card-title {
    font: var(--ds-font-heading-small);
    font-weight: var(--ds-font-weight-bold);
}

.site-card-body {
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-075);
}

/*
    A card that is a link: the whole tile, not just the heading.

    The colour is reset because the link reset upstream paints every anchor
    blue, and a grid of cards whose every word is blue reads as a list of
    links rather than as cards. The accent arrives on hover, where it means
    something.
*/
a.site-card {
    display: block;
    color: var(--ds-text);
}
a.site-card:hover {
    border-color: var(--ds-border-focused);
    text-decoration: none;
}
a.site-card:hover .site-card-title { color: var(--ds-text-brand); }

/* -------------------------------------------------------------- callouts */

.site-callout {
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-left: 3px solid var(--ds-border-bold);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-250) var(--ds-space-300);
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
}

.site-callout strong { color: var(--ds-text); }

.site-note {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
    margin-top: var(--ds-space-150);
}

/* ------------------------------------------------------------------- FAQ */

.site-faq { display: grid; gap: var(--ds-space-200); }

.site-faq-question {
    font: var(--ds-font-body);
    font-weight: var(--ds-font-weight-bold);
}

.site-faq-answer {
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-075);
}

/* -------------------------------------------------------------- headings */

.site-h2 {
    font-size: 24px;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
}

.site-h3 {
    font-size: 19px;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
}

.site-lede {
    font: var(--ds-font-body-large);
    color: var(--ds-text-subtle);
    max-width: 60ch;
    margin-top: var(--ds-space-150);
}

.site-centred .site-lede { margin-inline: auto; }

/* ----------------------------------------------------------------- lists */

.site-list {
    list-style: none;
    margin: var(--ds-space-200) 0 0;
    padding: 0;
    display: grid;
    gap: var(--ds-space-100);
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
}

.site-list li {
    position: relative;
    padding-left: var(--ds-space-250);
}

/* A rule, not a bullet: one accent, and a tick in blue on every line would
   spend it fifty times over. */
.site-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 1px;
    background: var(--ds-border-bold);
}

/* -------------------------------------------------------------- founding */

.site-founding {
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-xlarge);
    padding: var(--ds-space-400);
}

.site-founding-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
}

.site-founding-title {
    font: var(--ds-font-heading-medium);
    font-weight: var(--ds-font-weight-bold);
}

.site-founding-remaining {
    font: var(--ds-font-body);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtle);
}

/* Red only once the number means something. On launch day "50 of 50 left" in
   alarm red is a claim the page cannot support, and the counter's whole
   argument is that it is honest. */
.site-founding-remaining[data-urgent="true"] { color: var(--ds-text-urgent); }

.site-founding-stats {
    display: flex;
    align-items: center;
    gap: var(--ds-space-500);
    flex-wrap: wrap;
}

.site-founding-rule {
    width: 1px;
    align-self: stretch;
    min-height: 44px;
    background: var(--ds-border);
}

.site-founding-stat-label {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
}

.site-founding-stat {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-050);
}

.site-founding-stat-figure {
    font-size: 40px;
    line-height: 1;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
}

.site-founding-stat-unit {
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
}

.site-founding-stat-unit s { color: var(--ds-text-subtlest); }

/*
    Fifty segments. Flex rather than a grid of fixed columns so the bar fits
    whatever width it is given without the last segment falling off.
*/
.site-founding-bar {
    display: flex;
    gap: 3px;
    margin-top: var(--ds-space-250);
}

.site-founding-bar span {
    flex: 1 1 0;
    height: 8px;
    /* 2px, from the design. The radius scale starts at 4, which on an 8px
       segment is a circle rather than a tick. */
    border-radius: 2px;
    background: var(--ds-background-urgent-empty);
}

.site-founding-bar span[data-taken="true"] { background: var(--ds-background-urgent-bold); }

/* Nothing left to be urgent about: the exhausted bar is neutral throughout. */
.site-founding[data-state="exhausted"] .site-founding-bar span { background: var(--ds-border); }

.site-founding-legend {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-space-200);
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-100);
}

.site-founding-note {
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
    max-width: 62ch;
    margin-top: var(--ds-space-250);
}

.site-founding-note strong { color: var(--ds-text); }

.site-founding-link {
    display: inline-block;
    font: var(--ds-font-body);
    font-weight: var(--ds-font-weight-bold);
    margin-top: var(--ds-space-150);
}

.site-code {
    font-family: var(--ds-font-family-code);
    font-weight: var(--ds-font-weight-bold);
    background: var(--ds-background-selected);
    color: var(--ds-text-brand);
    border-radius: var(--ds-radius-xsmall);
    padding: 1px var(--ds-space-075);
}

/* --------------------------------------------------------------- compare */

/*
    "Where they win" is a card of equal weight to ours, and it comes first.
    That is the strategy rather than a courtesy -- the pages are believed
    because of it -- so the two are the same size, the same border and the same
    background, and nothing marks ours as the answer.
*/
.site-versus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ds-space-200);
}

.site-versus .site-card-title { margin-bottom: var(--ds-space-100); }

.site-compare {
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
    overflow: hidden;
    font: var(--ds-font-body);
}

/* Scrolls rather than crushing three columns onto a phone. */
.site-compare-scroll { overflow-x: auto; }

.site-compare table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.site-compare th,
.site-compare td {
    text-align: left;
    vertical-align: top;
    padding: var(--ds-space-150) var(--ds-space-250);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.site-compare tbody tr:last-child th,
.site-compare tbody tr:last-child td { border-bottom: 0; }

.site-compare thead th {
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtle);
    background: var(--ds-surface-sunken);
}

.site-compare tbody th {
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    width: 30%;
}

/* Ours is the bolder column. Weight, not colour -- see tokens.css. */
.site-compare td[data-ours="true"] { font-weight: var(--ds-font-weight-bold); }
.site-compare td[data-ours="false"] { color: var(--ds-text-subtle); }

.site-bottom-line {
    background: var(--ds-background-selected);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-300);
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
}

.site-bottom-line strong { color: var(--ds-text); }

.site-cta-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-250);
    flex-wrap: wrap;
}

.site-cta-meta {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

@media (max-width: 640px) {
    .site-section { padding-top: var(--ds-space-600); }
    .site-section:first-child { padding-top: var(--ds-space-500); }
    .site-band { padding: var(--ds-space-300); }
    .site-founding { padding: var(--ds-space-250); }
    .site-founding-stats { gap: var(--ds-space-300); }
    .site-founding-rule { display: none; }
    .site-founding-stat-figure { font-size: 32px; }
}

/* --------------------------------------------------- inbox preview (home) */

/*
    A still of the product, hand-built rather than a screenshot: it stays
    legible at any width, weighs nothing, and cannot go stale against a
    redesign the way a PNG does.

    The prototype colours the states by hue -- purple avatar, red "typing",
    teal "waiting". That is not what the product does and not what the brand
    allows: one accent, and status carried by weight instead. Blue for what
    wants attention, slate for what does not. This is the same treatment
    app.css gives the real lozenges, so the still matches the thing it is
    advertising.
*/
.site-preview {
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
    overflow: hidden;
    box-shadow: var(--ds-shadow-overlay);
}

.site-preview-tabs {
    display: flex;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150) var(--ds-space-200);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    overflow-x: auto;
}

.site-preview-tabs span {
    padding: var(--ds-space-050) var(--ds-space-150);
    border-radius: var(--ds-radius-xsmall);
    white-space: nowrap;
}

.site-preview-tabs span[data-active="true"] {
    background: var(--ds-background-selected);
    color: var(--ds-text-selected);
    font-weight: var(--ds-font-weight-bold);
}

.site-preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-050) var(--ds-space-200);
    padding: var(--ds-space-200);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.site-preview-row:last-child { border-bottom: 0; }

.site-preview-subject,
.site-preview-snippet {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-preview-subject { font: var(--ds-font-body); }
.site-preview-row[data-unread="true"] .site-preview-subject { font-weight: var(--ds-font-weight-bold); }
.site-preview-row[data-muted="true"] .site-preview-subject { color: var(--ds-text-subtle); }

.site-preview-snippet {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

.site-preview-lozenge {
    font: var(--ds-font-body-small);
    font-size: 11px;
    font-weight: var(--ds-font-weight-bold);
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-radius-xsmall);
    white-space: nowrap;
    background: var(--ds-background-neutral);
    color: var(--ds-text-subtle);
}

.site-preview-lozenge[data-attention="true"] {
    background: var(--ds-background-selected);
    color: var(--ds-text-selected);
}

.site-preview-avatars { display: flex; }

.site-preview-avatars span {
    width: 22px;
    height: 22px;
    border-radius: var(--ds-radius-full);
    color: var(--ds-text-inverse);
    font-size: 9px;
    font-weight: var(--ds-font-weight-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ds-surface);
}

.site-preview-avatars span + span { margin-left: -4px; }
.site-preview-avatars span[data-fill="1"] { background: var(--ds-background-brand-bold); }
.site-preview-avatars span[data-fill="2"] { background: var(--bosun-avatar-2); }
.site-preview-avatars span[data-fill="3"] { background: var(--bosun-avatar-3); }

.site-preview-caption {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    text-align: center;
    margin-top: var(--ds-space-150);
}

/* ----------------------------------------------------------------- plan */

.site-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-300);
    flex-wrap: wrap;
}

.site-plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-100);
}

.site-plan-figure {
    font-size: 44px;
    line-height: 1;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
}

.site-plan-unit {
    font: var(--ds-font-body-large);
    color: var(--ds-text-subtle);
}

.site-plan-terms {
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-100);
    /* Narrow enough that the price and the button stay on one line at the
       measure this card is given. */
    max-width: 34ch;
}

.site-plan-rule {
    height: 1px;
    background: var(--ds-border);
    margin: var(--ds-space-300) 0;
}

.site-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================ docs pages */

/*
    Documentation, and the restraint is the mechanism rather than a taste.
    These pages rank because they read as documentation, so there is no hero,
    no call to action above the fold and one soft product line at the foot.

    Type comes from the .site-docs token scope in tokens.css: system stack,
    white ground, blue on links only.
*/

.site-docs-eyebrow {
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtlest);
    margin-bottom: var(--ds-space-100);
}

.site-docs-body h1 {
    font: var(--ds-font-display);
    letter-spacing: var(--ds-font-tracking-display);
    max-width: 24ch;
}

.site-docs-body h2 {
    font: var(--ds-font-heading-medium);
    margin: var(--ds-space-600) 0 var(--ds-space-200);
}

.site-docs-body h3 {
    font: var(--ds-font-heading-small);
    margin: var(--ds-space-400) 0 var(--ds-space-100);
}

.site-docs-body p {
    margin: var(--ds-space-200) 0;
    max-width: 70ch;
}

.site-docs-lede {
    font: var(--ds-font-body-large);
    color: var(--ds-text-subtle);
}

/*
    Inline literals: hostnames, addresses, error codes, commands. Monospace
    because they are things to be typed or matched exactly, and a proportional
    face invites reading them as prose.
*/
.site-docs-body code,
.site-mono {
    font-family: var(--ds-font-family-code);
    font-size: 0.9em;
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-xsmall);
    padding: 1px var(--ds-space-075);
    /* An SMTP response wraps where it wants to, not where the measure ends. */
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ error block */

/*
    The literal error string, set as something copied out of a log rather than
    as body copy. The first line is the one someone is matching against what
    their own server said, so it carries the colour and the weight.

    No copy button. The design asks for one and it would need JavaScript,
    which script-src 'none' forbids on this origin -- see
    PublicSecurityHeaders. The strings are short and selectable, and widening
    the policy for a convenience is the wrong trade on the pages that carry
    the SEO strategy.
*/
.site-error {
    background: var(--ds-surface-terminal);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-250) var(--ds-space-300);
    font-family: var(--ds-font-family-code);
    font-size: 14px;
    line-height: 1.6;
    margin: var(--ds-space-300) 0;
    /* Scrolls rather than breaking mid-token: an admin reading this at 390px
       is matching it character by character against a bounce message. */
    overflow-x: auto;
}

.site-error-code {
    color: var(--ds-text-terminal-error);
    font-weight: var(--ds-font-weight-bold);
    white-space: pre;
}

.site-error-detail {
    color: var(--ds-text-terminal);
    margin-top: var(--ds-space-100);
    white-space: pre-wrap;
}

/* A command to run, rather than an error received: same block, no red. */
.site-error[data-kind="command"] .site-error-code { color: var(--ds-text-terminal); }

/* ------------------------------------------------------------------ steps */

/*
    Numbered by CSS counter rather than by hand. A hand-numbered list survives
    exactly until someone inserts a step in the middle, and a guide that goes
    1, 2, 2, 3 is one the reader stops trusting.
*/
.site-steps {
    counter-reset: step;
    list-style: none;
    margin: var(--ds-space-300) 0;
    padding: 0;
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.site-steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--ds-space-200);
    align-items: start;
    padding: var(--ds-space-250) 0;
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    max-width: 70ch;
}

.site-steps > li::before {
    content: counter(step);
    width: 24px;
    height: 24px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-text);
    color: var(--ds-text-inverse);
    font-size: 13px;
    font-weight: var(--ds-font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optical: the digit sits high against a 26px line beside it. */
    margin-top: 1px;
}

.site-steps p { margin: 0; max-width: none; }
.site-steps p + p { margin-top: var(--ds-space-100); }

/* ---------------------------------------------------------------- figure */

.site-figure { margin: var(--ds-space-300) 0; max-width: 70ch; }

.site-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
}

/*
    The placeholder that stands in until a real screenshot exists. Hatched so
    it cannot be mistaken for a rendering of the admin screen it describes,
    and labelled with what the screenshot should show, so whoever takes it
    knows what they are taking.
*/
.site-figure-placeholder {
    border: var(--ds-border-width) dashed var(--ds-border-bold);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-600) var(--ds-space-300);
    text-align: center;
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    background: repeating-linear-gradient(
        45deg,
        var(--ds-surface-sunken),
        var(--ds-surface-sunken) 8px,
        var(--ds-background-neutral) 8px,
        var(--ds-background-neutral) 16px
    );
}

.site-figure figcaption {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
    margin-top: var(--ds-space-100);
}

/* -------------------------------------------------------------- callouts */

.site-docs-callout {
    border: var(--ds-border-width) solid var(--ds-border);
    border-left: 3px solid var(--ds-border-bold);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-250) var(--ds-space-300);
    margin: var(--ds-space-300) 0;
    max-width: 70ch;
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
}

.site-docs-callout p { margin: 0; max-width: none; }
.site-docs-callout strong { color: var(--ds-text); }

/* "Check it worked" is the good news at the end of a fix, so it takes the
   accent. "Careful" stays neutral -- a page of coloured boxes teaches the
   reader to skip all of them. */
.site-docs-callout[data-kind="check"] {
    border-left-color: var(--ds-border-focused);
    background: var(--ds-background-selected);
}

/* ------------------------------------------------------------- docs index */

.site-docs-index {
    display: grid;
    gap: var(--ds-space-150);
    margin: var(--ds-space-400) 0;
    max-width: 70ch;
}

.site-docs-index a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-250);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-250) var(--ds-space-300);
    color: var(--ds-text);
}

.site-docs-index a:hover {
    border-color: var(--ds-border-focused);
    text-decoration: none;
}

/* Block, because the markup is spans inside the anchor -- a heading element
   here would put an h3 inside a link, and inline spans run the title and the
   note together on one line. */
.site-docs-index-title {
    display: block;
    font-weight: var(--ds-font-weight-bold);
}

.site-docs-index-note {
    display: block;
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-050);
}

.site-docs-index-arrow {
    color: var(--ds-text-subtlest);
    flex: 0 0 auto;
}

.site-docs-index a:hover .site-docs-index-arrow { color: var(--ds-text-brand); }

@media (max-width: 640px) {
    .site-docs-body h1 { font-size: 26px; line-height: 1.2; }
    .site-steps > li { gap: var(--ds-space-150); }
    .site-figure-placeholder { padding: var(--ds-space-500) var(--ds-space-200); }
}

.site-docs-crumb {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

/* ------------------------------------------------------- legal headings */

/*
    Every section heading is a link to itself, so a clause can be cited by
    URL. Styled as ink text rather than as a link -- it is a heading first,
    and a document whose every heading is blue reads as a table of contents.
    The anchor announces itself on hover.
*/
.site-legal-body h2 a,
.site-legal-body h3 a {
    color: var(--ds-text);
    text-decoration: none;
}

.site-legal-body h2 a:hover,
.site-legal-body h3 a:hover {
    color: var(--ds-text-brand);
    text-decoration: none;
}

.site-legal-body h2 a:hover::after,
.site-legal-body h3 a:hover::after {
    content: "#";
    color: var(--ds-text-subtlest);
    margin-left: var(--ds-space-100);
    font-weight: var(--ds-font-weight-regular);
}

/* Landing on a deep link should not put the heading under the top of the
   window. */
.site-legal-body h2,
.site-legal-body h3 { scroll-margin-top: var(--ds-space-300); }


/* The draft documents separate their preamble with a rule, and the first
   heading after it draws its own -- two hairlines and a gap between them. */
.site-legal-body hr + h2 {
    border-top: 0;
    padding-top: 0;
    margin-top: var(--ds-space-400);
}

/*
    Tables scroll on a phone rather than crushing four columns to one word
    each. Only on a phone: `display: block` makes a table shrink to its
    content, so applying it everywhere narrows the first column on a wide
    screen for no reason.
*/
@media (max-width: 640px) {
    .site-legal-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .site-legal-body td,
    .site-legal-body th { white-space: normal; min-width: 12ch; }
}

/* ========================================================== cookie banner */

/*
    The static site restated the ADS SectionMessage and Button rules by hand,
    with a comment naming the cost: that page was a different vhost and could
    not reach app.css, so the brand values lived under a second set of variable
    names and had to be kept in step by hand.

    That cost is gone. This is the same origin and the same tokens.css, so the
    component is written once more -- app.css's copy is the product's -- but
    from the tokens rather than from copied values. Class names stay ADS's so
    the mapping to app.css stays legible.
*/

.cookie-bar {
    position: fixed;
    z-index: 60;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    padding: var(--ds-space-200);
    background: var(--ds-surface);
    border-top: var(--ds-border-width) solid var(--ds-border);
    box-shadow: var(--ds-shadow-overlay);
}

.cookie-bar[data-open="true"] { display: block; }

.cookie-bar-inner {
    display: flex;
    align-items: center;
    gap: var(--ds-space-250);
    max-width: 1080px;
    margin: 0 auto;
}

.ads-section-message {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-100);
    flex: 1 1 auto;
    padding: var(--ds-space-150);
    font: var(--ds-font-body);
    color: var(--ds-text);
    background: var(--ds-background-selected);
    border-radius: var(--ds-radius-medium);
}

.ads-section-message-icon {
    flex: none;
    color: var(--ds-text-brand);
    margin-top: 1px;
}

.ads-section-message-content { flex: 1 1 auto; min-width: 0; }

.ads-section-message-title {
    margin: 0 0 var(--ds-space-025);
    font: var(--ds-font-heading-xsmall);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text);
}

.ads-section-message-content p { margin: 0; color: var(--ds-text-subtle); }
.ads-section-message-content a { color: var(--ds-link); }

.cookie-bar-actions {
    display: flex;
    flex: none;
    gap: var(--ds-space-100);
}

.cookie-bar .ads-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px, like every other target on the site. The static site used 32,
       which is an application control size on a page read on a phone. */
    min-height: 44px;
    padding: 0 var(--ds-space-200);
    font: var(--ds-font-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    background: var(--ds-background-neutral);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-small);
    white-space: nowrap;
    cursor: pointer;
}

.cookie-bar .ads-button:hover { background: var(--ds-background-neutral-hovered); }

.cookie-bar .ads-button[data-appearance="primary"] {
    color: var(--ds-text-inverse);
    background: var(--ds-background-brand-bold);
    border-color: var(--ds-background-brand-bold);
}

.cookie-bar .ads-button[data-appearance="primary"]:hover {
    background: var(--ds-background-brand-bold-hovered);
    border-color: var(--ds-background-brand-bold-hovered);
}

@media (max-width: 640px) {
    .cookie-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ds-space-200);
    }

    .cookie-bar-actions .ads-button { flex: 1 1 0; }
}

.site-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--ds-background-selected);
    color: var(--ds-text-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ds-space-200);
}

/* ============================================================== landing */

/* One call to action and no navigation: an advert landed here, and every
   other link is a way to leave without deciding. */
.site-header-landing { position: static; background: var(--ds-surface); }
.site-header-landing .site-brand { cursor: default; }

.site-landing-meta {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

.site-landing-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-300);
    flex-wrap: wrap;
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
    padding: var(--ds-space-300) var(--ds-space-400);
}

.site-landing-band-figure {
    font-size: 19px;
    font-weight: var(--ds-font-weight-bold);
    letter-spacing: var(--ds-font-tracking-display);
}

.site-landing-band-note {
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-050);
}