/*
 * syerra.co. Everything here is built on tokens.css.
 * Pieces marked "added" have no equivalent in the Arkana beta-site and extend its look.
 */

/* ---------- Base ---------- */

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

html {
    /* Keeps in-page links (#main, #arkana) from landing under the sticky header. */
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--size-text);
    font-weight: var(--weight-light);
    line-height: 1.6;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

/*
 * Global links. Text is --color-text. A link is --color-link at rest and --color-link-hover
 * on hover, press and for the current page. :where() keeps these at zero specificity, so
 * a component (button, wordmark, product title) can always set a color of its own.
 */
:where(a) {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--duration-hover) var(--ease);
}

:where(a:hover, a:active, a[aria-current='page'], a[aria-expanded='true']) {
    color: var(--color-link-hover);
}

strong {
    font-weight: var(--weight-bold);
}

/* added: scrollbar thumb in the button colors, with no track background */
/* Firefox only: in Chrome, scrollbar-color would override the rounded ::-webkit-scrollbar styles below. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: var(--color-button) transparent;
        scrollbar-width: thin;
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-button);
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-button);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-button-hover);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--color-button-active);
}

/* beta-site turns outlines off everywhere and puts this ring back on its button only. */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

/*
 * Nothing on the site is selectable, as on beta-site and in Arkana: one rule instead of a list of
 * areas to manage. A future form field needs user-select: text, or people can't select what they
 * type in it.
 */
* {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- Header (added: mirrors beta-site's footer) ---------- */

/* A floating capsule that stays at the top while the page scrolls. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: var(--space-xs) var(--gutter) 0;
}

/* The product card's surface (.panel). */
.site-header-inner {
    max-width: var(--width-column);
    min-height: 48px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    /* 9px on the right is the gap above and below a 30px segment, so the links sit evenly inset */
    padding-inline: 20px 9px;
    background-color: var(--color-surface);
    border: var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-floating);
    -webkit-backdrop-filter: blur(var(--blur-panel));
    backdrop-filter: blur(var(--blur-panel));
}

.brand {
    padding-block: var(--space-xs);
    font-family: var(--font-wordmark);
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--color-text);
}

/* ".co" after the navbar wordmark, set like body text (the product summaries) */
.brand-tld {
    margin-left: 1px;
    font-family: var(--font-sans);
    font-size: var(--size-text);
    font-weight: var(--weight-light);
    letter-spacing: normal;
    color: var(--color-text-soft);
}

/*
 * The links are Arkana's segmented control (share menu, blocker menu) without the inset
 * trough, since the capsule already holds them: a faint pill on hover, a brighter one for
 * the current page. They stay links, so the current page is marked with aria-current.
 */
.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.site-nav :is(a, button) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 6px 10px;
    border-radius: var(--radius-button);
    font-size: var(--size-text);
    line-height: 1;
    transition:
        color var(--duration-hover) var(--ease),
        background-color var(--duration-hover) var(--ease),
        box-shadow var(--duration-hover) var(--ease),
        transform var(--duration-hover) var(--ease);
}

.site-nav :is(a, button):hover {
    background-color: var(--color-segment-hover);
    box-shadow: var(--shadow-segment-hover);
}

.site-nav :is(a, button):active {
    background-color: var(--color-segment-selected);
    box-shadow: var(--shadow-segment-selected);
    transform: scale(var(--press-scale));
}

/* After :hover, so the current page keeps its selected look under the pointer. A link whose
   panel is open (the Products link) looks selected for as long as it is. */
.site-nav :is(a, button)[aria-current='page'],
.site-nav :is(a, button)[aria-expanded='true'] {
    background-color: var(--color-segment-selected);
    box-shadow: var(--shadow-segment-selected);
}

/* The usual 3px offset would reach into the 4px gap between segments. */
.site-nav :is(a, button):focus-visible {
    outline-offset: 1px;
}

/* Arkana's sidebar chevron (.vtab-list-label-chevron): the same 14px chevron-down, and it flips on
   its horizontal axis rather than rotating. There it flips when the Tabs list is collapsed; here,
   while the Products panel is open. */
.nav-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 300ms var(--ease);
}

.nav-chevron svg {
    width: 14px;
    height: 14px;
}

.site-nav :is(a, button)[aria-expanded='true'] .nav-chevron {
    transform: scaleY(-1);
}

/* A trigger with no page behind it (Resources) is a button. It is set to look like the links beside it. */
.site-nav button {
    margin: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-weight: inherit;
    color: var(--color-link);
    cursor: pointer;
}

.site-nav button:hover,
.site-nav button[aria-expanded='true'] {
    color: var(--color-link-hover);
}

/* ---------- Products panel (added: Arkana's shortcuts menu, with products for content) ---------- */

/* The caret the menu manager draws, as in Arkana. Its styles are here, not injected: the
   Content-Security-Policy blocks style tags added from script. */
.mm-caret {
    position: absolute;
    z-index: -1;
    overflow: visible;
    pointer-events: none;
}

.mm-caret path {
    fill: var(--color-surface);
    stroke: var(--color-border);
    stroke-width: 1;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    width: 360px;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    background-color: rgba(35, 35, 35, 0.92);
    border: var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-raised);
    -webkit-backdrop-filter: blur(var(--blur-panel));
    backdrop-filter: blur(var(--blur-panel));
    overflow: hidden;
}

.nav-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    /* 20px on the sides: the product rows' text starts 20px in (8px body + 12px row), so the title lines up with it. */
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 20px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--color-text);
}

.nav-menu-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    padding: 8px;
    overflow-y: auto;
}

.nav-menu-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-button);
    line-height: 1.3;
    background: transparent;
    border: none;
    box-shadow: none;
    transition:
        color var(--duration-hover) var(--ease),
        background-color var(--duration-hover) var(--ease),
        box-shadow var(--duration-hover) var(--ease),
        transform var(--duration-hover) var(--ease);
}

.nav-menu-row:hover,
.nav-menu-row:focus-visible {
    background-color: var(--color-segment-hover);
    box-shadow: var(--shadow-segment-hover);
}

/* Pressed: the hover shadow stays and the fill gets a touch stronger, as in Arkana's omnibox rows */
.nav-menu-row:active {
    background-color: var(--color-segment-selected);
    transform: scale(0.98);
}

/* The product whose page you are on */
.nav-menu-row[aria-current='page'] {
    background-color: var(--color-segment-selected);
    box-shadow: var(--shadow-segment-selected);
}

/* The icon's box, with the same background and border as the badge (Arkana's .retry-btn) */
.nav-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid rgba(225, 225, 225, 0.03);
    border-radius: 8px;
    background: rgba(225, 225, 225, 0.05);
}

.nav-menu-icon img {
    display: block;
    width: 24px;
    height: 24px;
}

.nav-menu-icon--large img {
    width: 30px;
    height: 30px;
}

.nav-menu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-menu-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--size-text);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

/* A short status label beside the name: Arkana's omnibox badge, with the background and border of
   its retry button (.retry-btn) */
.nav-menu-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--weight-light);
    line-height: normal;
    color: var(--color-link);
    background: rgba(225, 225, 225, 0.05);
    border: 1px solid rgba(225, 225, 225, 0.03);
    border-radius: 3px;
    padding: 1px 5px;
}

/* An external row's icon: at the far right, centered on the row */
.nav-menu-row > .link-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

.nav-menu-summary {
    font-size: 13px;
    color: var(--color-text-soft);
}

/* "All products", at the far right of the header: small and light beside the bold title */
.nav-menu-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: var(--weight-light);
}

/* The arrow from the "Check it Out" button, scaled to the link. Its tip stops 1.5px short of the
   viewBox's right edge, so the margin keeps the tip level with the rows' content edge. */
.nav-menu-arrow {
    width: 16px;
    height: 12px;
    margin-right: -1.5px;
    overflow: visible;
}

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

.page {
    flex: 1;
    width: 100%;
    max-width: calc(var(--width-column) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-xl) var(--gutter);
    text-align: center;
}

/* Short pages sit in the middle of the screen, like beta-site. */
.page--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section {
    margin-top: var(--space-xl);
}

/* ---------- Footer ---------- */

/*
 * beta-site's footer text (muted 12px) over its hairline. The wordmark and email sit on
 * the left, labeled groups of links on the right, all on one first baseline.
 */
.site-footer {
    border-top: var(--hairline);
    padding: var(--space-xs) var(--gutter);
    font-size: var(--size-small);
    line-height: 1;
    color: var(--color-text-muted);
}

.site-footer-inner {
    max-width: var(--width-column);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--space-l);
}

/* The wordmark with the company's line under it */
.footer-quote {
    margin-top: -4px;   /* the wordmark's own 8px bottom padding is more than enough */
    font-family: var(--font-wordmark);
    font-size: calc(var(--size-small) + 2px);
    line-height: 1.3;
    color: var(--color-text-muted);
}

.footer-groups {
    display: flex;
    gap: var(--space-l);
}

/* Arkana's menu section labels (.ctx-menu-section-header in the tab sort menu): 11px Inter Light,
   uppercase, 0.08em tracking, dim white, with the same 6px above and 2px below. */
.footer-heading {
    padding: 6px 0 2px;
    font-size: var(--size-label);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-label);
}

/* Vertical padding keeps each stacked link at least 24px tall to tap. A trailing icon sits 4px after the text. */
.site-footer a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 6px;
}

/* added: the external-link icon (Lucide, as in Arkana) after a link's text; it takes the link's color */
.link-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* ---------- Type ---------- */

.wordmark {
    margin-bottom: var(--space-s);
    font-family: var(--font-wordmark);
    font-size: var(--size-wordmark);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    /* Balances the tracking after the last letter, so the word sits truly centered. */
    text-indent: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-text);
}

/* The Syerra wordmark: sentence case, tracked at 0.08em. Product and page titles stay uppercase. */
.wordmark--sentence {
    text-transform: none;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
}

/* added: the same wordmark, smaller, for page titles */
.wordmark--title {
    font-size: var(--size-title);
}

.tagline {
    max-width: 46ch;
    margin-inline: auto;
    font-size: var(--size-text);
    line-height: 1.5;
    color: var(--color-text-soft);
    text-wrap: balance;
}

.footnote {
    font-size: var(--size-small);
    color: var(--color-text-muted);
}

/* The line above the home page on a missing address, for visitors without script */
.not-found-notice {
    margin-bottom: var(--space-xl);
}

/* beta-site's own line spacing, for the Arkana page, which copies its hero as it is */
.tagline--beta {
    line-height: normal;
}

/* added: section headings, set like the footer's group labels (Arkana's menu section labels) */
.label {
    margin-bottom: var(--space-m);
    font-size: var(--size-label);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-label);
    text-indent: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-label);
}

/* added: beta-site has no links in running text, and color alone isn't enough to mark them */
.link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-underline);
    text-underline-offset: 3px;
    transition: color var(--duration-hover) var(--ease), text-decoration-color var(--duration-hover) var(--ease);
}

.link:hover {
    text-decoration-color: currentColor;
}

.more {
    margin-top: var(--space-m);
    font-size: var(--size-small);
}

/* ---------- Panel and button ---------- */

/* beta-site's .download-container surface */
.panel {
    background-color: var(--color-surface);
    border: var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-raised);
    -webkit-backdrop-filter: blur(var(--blur-panel));
    backdrop-filter: blur(var(--blur-panel));
}

/* The tray around download buttons, as on beta-site */
.download-tray {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs);
}

/* Two rem under the tagline, as on beta-site */
.download {
    margin-top: var(--space-l);
}

.download .footnote {
    margin-top: var(--space-m);
}

.button {
    width: 200px;
    max-width: 100%;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--color-button);
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-raised);
    color: var(--color-button-text);
    font-family: var(--font-sans);
    font-size: var(--size-button);
    font-weight: var(--weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: all var(--duration-hover) var(--ease);
}

.button:hover {
    background-color: var(--color-button-hover);
    border-color: var(--color-button-border-hover);
}

.button:active {
    background-color: var(--color-button-active);
    box-shadow: var(--shadow-pressed);
    transform: scale(var(--press-scale));
}

.button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

/* added: the arrow from Arkana's BEGIN button. It is a line drawing, so no fill, and its round
   end cap pokes 1px past the left of the viewBox. */
.button .button-arrow {
    width: 22px;
    height: 16px;
    fill: none;
    overflow: visible;
}

/* ---------- Products (added: product cards on the panel surface) ---------- */

/* Side by side, one per row on phones. Grid rows stretch, so cards in a row match heights. */
.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-s);
}

.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-l) var(--space-s);
}

.product-name {
    margin-bottom: var(--space-s);
    font-family: var(--font-wordmark);
    font-size: var(--size-name);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-indent: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-text);
}

.product-downloads {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-m);
}

.product .footnote {
    margin-top: var(--space-s);
}

/* ---------- Prose (added: longer text, used by About) ---------- */

.prose {
    max-width: 52ch;
    margin-inline: auto;
    text-align: left;
}

.prose h2 {
    margin: var(--space-l) 0 var(--space-xs);
    font-size: var(--size-text);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p + p {
    margin-top: var(--space-s);
}

.prose a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-underline);
    text-underline-offset: 3px;
}

.prose a:hover {
    text-decoration-color: currentColor;
}

/* ---------- Utilities ---------- */

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

/* added: off screen until a keyboard user tabs to it */
.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 10;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Facts we don't have yet. Find them all with: grep -rn data-placeholder site */
[data-placeholder] {
    outline: 1px dashed var(--color-focus);
    outline-offset: 2px;
}

/* ---------- Dialogs (added: Arkana's dialog.css, in this site's tokens) ---------- */

.dm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50000;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(var(--blur-panel));
    backdrop-filter: blur(var(--blur-panel));
    opacity: 0;
    transition: opacity 300ms var(--ease);
    pointer-events: none;
}

.dm-backdrop.dm-open {
    opacity: 1;
    pointer-events: auto;
}

.dm-backdrop.dm-closing {
    opacity: 0;
    pointer-events: none;
}

.dm-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 50001;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    filter: blur(5px);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease), filter 300ms var(--ease);
}

/* Focus sits on the dialog itself when it opens. It is a container, not a control, so no ring. */
.dm-panel:focus-visible {
    outline: none;
}

.dm-panel.dm-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: none;
}

.dm-panel.dm-closing {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    filter: blur(5px);
}

/* A dialog opened with `instant`, and every dialog for visitors who prefer reduced motion */
.dm-backdrop.dm-instant,
.dm-panel.dm-instant {
    transition: none;
}

.dm-box {
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    background-color: rgb(35, 35, 35);
    border: var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-raised);
    overflow: hidden;
}

.dm-header {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dm-title {
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.dm-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 0;
}

.dm-message {
    font-size: var(--size-text);
    color: var(--color-text-soft);
}

.dm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
    padding: 16px;
}

.dm-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 110px;
    height: 30px;
    padding: 6px 14px;
    background: rgba(225, 225, 225, 0.05);
    border: 1px solid rgba(225, 225, 225, 0.03);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-raised);
    font-size: var(--size-text);
    line-height: 1;
    color: var(--color-text-soft);
    cursor: pointer;
    /* Not `all`: that would fade the focus ring in too, on a dialog whose button is focused at once. */
    transition:
        background-color var(--duration-hover) var(--ease),
        border-color var(--duration-hover) var(--ease),
        box-shadow var(--duration-hover) var(--ease),
        color var(--duration-hover) var(--ease),
        transform var(--duration-hover) var(--ease);
}

.dm-btn:hover {
    background: rgba(225, 225, 225, 0.10);
    border-color: rgba(225, 225, 225, 0.04);
    color: var(--color-text);
}

.dm-btn:active {
    background: rgba(225, 225, 225, 0.14);
    box-shadow: var(--shadow-pressed);
    color: var(--color-text);
    transform: scale(var(--press-scale));
}

/* Arkana's primary button is blue. This site has no blue, so it takes the site's light button. */
.dm-btn-primary {
    background: var(--color-button);
    border-color: var(--color-button-border);
    font-weight: var(--weight-bold);
    color: var(--color-button-text);
}

.dm-btn-primary:hover {
    background: var(--color-button-hover);
    border-color: var(--color-button-border-hover);
    color: var(--color-button-text);
}

.dm-btn-primary:active {
    background: var(--color-button-active);
    color: var(--color-button-text);
}

/* ---------- Small screens ---------- */

@media (max-width: 520px) {
    .site-header-inner {
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding-block: var(--space-xs);
        padding-inline: 9px;
    }

    /* Four segments don't fit one row here, and the wordmark just above is already the home link. */
    .nav-home {
        display: none;
    }
}

/* Below 360px four 14px segments don't fit in one row, so they take the share menu's 6px side padding. */
@media (max-width: 359px) {
    .site-nav :is(a, button) {
        padding-inline: 6px;
    }
}

/* Side by side doesn't fit: the wordmark takes a centered row, the groups spread across the next. */
@media (max-width: 540px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        row-gap: var(--space-xs);
    }

    .footer-brand {
        justify-self: center;
        text-align: center;
    }

    .footer-groups {
        justify-content: space-between;
        gap: var(--space-m);
    }
}

/* Four groups don't fit one row on a narrow phone: two rows of two. */
@media (max-width: 420px) {
    .footer-groups {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        justify-items: start;
        gap: var(--space-s) var(--space-l);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .button {
        transition: none;
    }

    .button:active {
        transform: none;
    }

    .site-nav :is(a, button) {
        transition: none;
    }

    .site-nav :is(a, button):active {
        transform: none;
    }

    .nav-chevron {
        transition: none;
    }

    .dm-btn {
        transition: none;
    }

    .dm-btn:active {
        transform: none;
    }
}