/*
 * The design system's components, as CSS.
 *
 * The design project renders Button, Badge, StatTile, Logo and Icon from `_ds_bundle.js` — React
 * components that style themselves inline and fetch Lucide from a CDN at run time. None of that can
 * ship here: this site exists to be crawled, so every page is HTML a reader gets on the first
 * response, with no framework to boot and nothing fetched before the words appear.
 *
 * So the components are written out as classes, with the values taken from the bundle's own source
 * rather than guessed at — `components/core/Button.jsx`, `Badge.jsx`, `Logo.jsx` and
 * `components/data/StatTile.jsx`. The tokens under css/ds/ are the design system's own files,
 * vendored unchanged. Re-sync both when the design system moves; do not edit css/ds/.
 *
 * Everything else — the page layout — stays as the design wrote it, inline on the elements, so a
 * diff against the .dc.html source is readable.
 */

/* Buttons --------------------------------------------------------------- */

/* components/core/Button.jsx — base, then one rule per variant and per size. */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-md);
    padding: 0 16px;
    font-family: var(--font-core);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    line-height: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-standard),
                transform var(--dur-instant) var(--ease-standard);
}

/* The design's buttons sit inside anchors, which the base stylesheet underlines on hover. */
.ds-btn:hover {
    text-decoration: none;
}

.ds-btn:active {
    transform: scale(.98);
}

.ds-btn--primary {
    background: var(--purple-500);
    color: #fff;
    border: 1px solid var(--purple-500);
    box-shadow: var(--shadow-brand);
}

.ds-btn--primary:hover {
    background: var(--purple-600);
    color: #fff;
}

.ds-btn--secondary {
    background: var(--surface-card);
    color: var(--text-heading);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.ds-btn--secondary:hover {
    background: var(--ink-50);
    color: var(--text-heading);
}

.ds-btn--ghost {
    background: transparent;
    color: var(--text-body);
    border: 1px solid transparent;
}

.ds-btn--ghost:hover {
    background: var(--ink-100);
    color: var(--text-body);
}

.ds-btn--sm {
    height: var(--control-sm);
    padding: 0 12px;
    font-size: 13px;
    gap: 6px;
}

.ds-btn--lg {
    height: var(--control-lg);
    padding: 0 22px;
    font-size: 16px;
    gap: 9px;
}

/*
 * The API sample tabs are ghost buttons on the dark section, where the token's --text-body would be
 * unreadable. The bundle passes the same override inline (DARK_GHOST in Home.dc.html's script).
 */
.ds-btn--on-dark.ds-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
}

.ds-btn--on-dark.ds-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* Badge ----------------------------------------------------------------- */

/* components/core/Badge.jsx, tone="brand". */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--ink-100);
    color: var(--ink-700);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: .01em;
    white-space: nowrap;
}

.ds-badge--brand {
    background: var(--purple-100);
    color: var(--purple-700);
}

/* Stat tile ------------------------------------------------------------- */

/* components/data/StatTile.jsx — the two tones the page uses. */
.ds-stat {
    display: grid;
    gap: 6px;
    /*
     * A grid item will not shrink below its own content by default, so a tile holding a large
     * tabular figure pushed the row wider than the card, the card wider than the page, and put a
     * horizontal scrollbar under the whole site at 320px. This is what lets it give way instead.
     */
    min-width: 0;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.ds-stat--brand {
    background: var(--purple-500);
    border-color: var(--purple-500);
    box-shadow: var(--shadow-brand);
}

.ds-stat--deep {
    background: var(--ink-900);
    border-color: var(--ink-800);
}

.ds-stat__label {
    color: var(--text-muted);
}

.ds-stat--brand .ds-stat__label,
.ds-stat--deep .ds-stat__label {
    color: rgba(255, 255, 255, .72);
}

.ds-stat__value {
    font-size: var(--text-numeric-lg);
    font-weight: var(--weight-extra);
    letter-spacing: var(--tracking-heading);
    line-height: 1.05;
    color: var(--text-heading);
}

.ds-stat--brand .ds-stat__value,
.ds-stat--deep .ds-stat__value {
    color: #fff;
}

/* Logo ------------------------------------------------------------------ */

/* components/core/Logo.jsx. The gap and the wordmark size are proportions of the mark. */
.ds-logo {
    display: inline-flex;
    align-items: center;
    gap: 10.88px; /* size 32 × 0.34 */
}

.ds-logo__text {
    font-family: var(--font-core);
    font-weight: var(--weight-extra);
    font-size: 16.64px; /* size 32 × 0.52 */
    letter-spacing: var(--tracking-heading);
    color: var(--text-heading);
    line-height: 1;
}

.ds-logo--inverse .ds-logo__text {
    color: #fff;
}

/* Icons ----------------------------------------------------------------- */

/*
 * Lucide glyphs, inlined. The design system's Icon component loads Lucide from unpkg and swaps the
 * element once the script arrives — a render-blocking request to a third party on a page whose
 * whole job is to be read immediately. These are the same paths, drawn from the markup.
 */
.ds-icon {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

/* Page chrome ----------------------------------------------------------- */

/*
 * The handful of rules the inline styles cannot state: a pseudo-class, a media query, and the skip
 * link that has to leave the page until it is focused.
 */
.site-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    padding: 10px 14px;
    background: #fff;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
}

.site-skip:focus {
    left: 8px;
    top: 8px;
}

.site-nav__link:hover {
    color: var(--purple-600);
}

.site-foot__link:hover {
    color: #fff;
}

/*
 * The header carries five links, a mail link and the portal button. Below this width they no longer
 * sit on one line beside the logo, so the row becomes two and the section links wrap among
 * themselves rather than pushing the button off the edge.
 */
/*
 * The header follows the reader down the page, as the design has it.
 *
 * "Talk to us" and the portal button sit against the right edge, away from the section links. Both
 * are classes here rather than the design's inline styles, because a media query cannot override an
 * inline style and both have to stop being true on a narrow screen.
 */
.site-head {
    position: sticky;
    top: 0;
}

/*
 * The bar itself. Inline on the element in the design, and a class here for the reason the rest of
 * this header is: a media query cannot override an inline style, and every part of this row has to
 * change on a narrow screen.
 */
.site-head__inner {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 72px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.site-head__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-head__actions {
    margin-left: auto;
}

/*
 * The links and the actions are wrapped in one box so there is one thing to collapse — and on a wide
 * screen that box is not laid out at all. `display: contents` hands its children straight to the
 * bar's flex row, so the desktop header is the same layout it was before there was a menu, rather
 * than a second one written to look like it.
 */
.site-head__panel {
    display: contents;
}

/*
 * The links, in a row on the bar. A class rather than the design's inline style, because the panel
 * lays them out as rows instead and a media query cannot override an inline one — the same reason
 * the hero's type and the actions' margin are here.
 */
.site-head nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

/* Drawn only where the links do not fit beside the logo, by the media query that collapses them. */
.site-head__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-heading);
    cursor: pointer;
}

.site-head__menu:hover {
    background: var(--ink-50);
}

/*
 * The header carries five links, a mail link and the portal button. Below this width they no longer
 * sit on one line beside the logo, so the row becomes three and the actions start the line they land
 * on rather than being pushed to the far edge of one of their own.
 *
 * So the bar keeps the logo and a button, and everything else moves into a panel under it. The panel
 * is in the flow rather than over the page: it pushes the content down while it is open and takes
 * its room back when it is shut, which needs no scrim, no scroll lock, and has no way to be left
 * covering what somebody was reading.
 *
 * The header also stops being sticky here. One line of it would be worth the room; three rows of
 * loose links were not, and a panel that opens is not something to hold on screen either.
 */
@media (max-width: 860px) {
    .site-head {
        position: static;
    }

    /*
     * The bar's own line keeps its height whether or not the panel is under it.
     *
     * `min-height` governs the container, not a line inside it: shut, its one line stretched to the
     * full 72px and the logo sat in the middle of that; open, the height was spent on two lines and
     * the first collapsed to the logo's own 32px, so pressing the button moved the logo and closed
     * up the space around it. Giving the brand and the button the same explicit height makes the
     * first line the same size either way, and `align-content: flex-start` stops the leftover height
     * being shared out between the lines behind the reader's back.
     */
    .site-head__inner {
        min-height: 0;
        align-content: flex-start;
        row-gap: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .site-head__brand,
    .site-head__menu {
        height: 48px;
    }

    .site-head__menu {
        display: inline-flex;
    }

    /*
     * Shut, and laid out as a box of its own rather than handed to the bar's flex row.
     *
     * `display: none` rather than a height of nought, so the links are not reachable by tab while
     * they cannot be seen — the difference between a menu that is closed and one that is invisible.
     */
    .site-head__panel {
        display: none;
        flex: 1 0 100%;
        margin-top: 12px;
        padding-top: 4px;
        border-top: 1px solid var(--border-subtle);
    }

    .site-head__panel[data-open] {
        display: grid;
        gap: 2px;
    }

    /* Each link a row of its own, at a size a thumb can hit. */
    .site-head__panel nav {
        display: grid;
        gap: 2px;
    }

    .site-head__panel .site-nav__link {
        padding: 12px 4px;
        border-radius: var(--radius-sm);
    }

    .site-head__panel .site-nav__link:hover {
        background: var(--ink-50);
    }

    /*
     * The actions take the line under the links and fill it: "Talk to us" at one end and the portal
     * button at the other, which is the relationship they have on the bar.
     */
    .site-head__actions {
        margin-left: 0;
        justify-content: space-between;
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--border-subtle);
    }
}

/* The closing panel ----------------------------------------------------- */

/*
 * "Tell us what you need to value", and the card of contact details inside it.
 *
 * Both paddings are classes rather than the design's inline styles, because on a phone they are
 * what has to give: 48px on the card and 24px on the panel inside it is 144px of padding, and on a
 * 373px screen that leaves 181px for an email address 209px long. It overflowed the panel it sits
 * in — the address and the email ran out over the rounded edge.
 */
.site-cta {
    padding: 48px;
}

.site-cta__panel {
    padding: 24px;
}

@media (max-width: 640px) {
    .site-cta {
        padding: 24px;
    }

    .site-cta__panel {
        padding: 18px;
    }

    /*
     * And an address is allowed to break rather than to overhang. It has no spaces to wrap at, so
     * on a narrower screen than this the padding alone stops being enough — and the point of a
     * contact panel is the address in it.
     */
    .site-cta__panel a,
    .site-cta__panel address {
        overflow-wrap: anywhere;
    }
}

/* Legal pages ----------------------------------------------------------- */

/*
 * The three legal pages each carried the same block of styles in their own <style> element, because
 * in the design project a page is a document on its own. Here they are one rule set: three copies of
 * a table border is three places to change it, and the pages are identical in everything but words.
 */
.legal h2 {
    font-size: var(--text-h2);
    line-height: var(--text-h2-lh);
    margin: 48px 0 12px;
}

.legal h3 {
    font-size: var(--text-h4);
    line-height: var(--text-h4-lh);
    margin: 28px 0 8px;
}

.legal p,
.legal li {
    color: var(--text-body);
    line-height: 1.75;
}

.legal p {
    margin: 0 0 14px;
    max-width: 74ch;
}

.legal ul,
.legal ol {
    margin: 0 0 16px;
    padding-left: 20px;
    max-width: 74ch;
}

.legal li {
    margin-bottom: 8px;
}

.legal table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    font-size: var(--text-body-sm);
}

/*
 * The tables scroll sideways rather than push the page wider.
 *
 * The cookie table is four columns of data and does not fit a phone at any font size worth reading:
 * measured at 390px it was 29px past the edge, which scrolls the whole page horizontally — every
 * paragraph on it as well, for the sake of one table. A region that scrolls on its own keeps that to
 * the table. `tabindex` is what makes it reachable by keyboard, which a scrolling box otherwise is
 * not; the min-width on the table is what stops the columns collapsing into unreadable slivers
 * instead of scrolling.
 */
.legal-scroll {
    overflow-x: auto;
    margin: 0 0 18px;
}

.legal-scroll table {
    min-width: 420px;
}

.legal th,
.legal td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.legal th {
    color: var(--text-heading);
    font-weight: var(--weight-bold);
}

/*
 * The contents list is sticky beside the prose on a desktop. Below the width where the two columns
 * stop fitting side by side it stops being a sidebar, and a sticky one would follow the reader down
 * a page it is no longer beside.
 *
 * Both halves are here rather than the first being inline, because a media query cannot override an
 * inline style — the rule below would have been written and had no effect.
 */
.legal-toc {
    position: sticky;
    top: 96px;
}

@media (max-width: 900px) {
    .legal-toc {
        position: static;
    }
}

/*
 * The hero's display type, and the one place on the site where it is not the design's inline style:
 * a media query cannot override one, and this is the line that has to change on a phone.
 *
 * The line break stays. Hiding it ran the words either side together — "with" and "people" have no
 * whitespace between them in the markup, because the break was the whitespace.
 */
.site-hero__title {
    font-size: var(--text-display);
    line-height: var(--text-display-lh);
    letter-spacing: var(--tracking-display);
}

@media (max-width: 640px) {
    .site-hero__title {
        font-size: 38px;
    }
}