@layer reset, tokens, base, layout, components, states, print;
/* Generated by scripts/build-tokens.mjs from src/design/tokens.json. Do not edit. */
@layer tokens {
  :root {
    --hx-color-aluminium: #E4E7EA;
    --hx-color-bench-white: #F6F7F8;
    --hx-color-graphite: #15181B;
    --hx-color-signal: #FF5A1F;
    --hx-color-signal-dark: #B83A0A;
    --hx-color-steel: #56606A;
    --hx-color-rule: #B9C0C7;
    --hx-color-ink-2: #2E353B;
    --hx-color-on-dark-muted: #C9D0D6;
    --hx-color-white: #FFFFFF;
    --hx-color-black: rgb(0 0 0);
    --hx-color-success: #1E6B45;
    --hx-surface-page: var(--hx-color-aluminium);
    --hx-surface-panel: var(--hx-color-bench-white);
    --hx-surface-raised: var(--hx-color-white);
    --hx-surface-inverse: var(--hx-color-graphite);
    --hx-text: var(--hx-color-graphite);
    --hx-text-muted: var(--hx-color-steel);
    --hx-text-inverse: var(--hx-color-bench-white);
    --hx-text-inverse-muted: var(--hx-color-on-dark-muted);
    --hx-text-accent: var(--hx-color-signal-dark);
    --hx-text-danger: var(--hx-color-signal-dark);
    --hx-text-success: var(--hx-color-success);
    --hx-cta-bg: var(--hx-color-signal);
    --hx-cta-text: var(--hx-color-graphite);
    --hx-border-decorative: var(--hx-color-rule);
    --hx-border-control: var(--hx-color-steel);
    --hx-focus: var(--hx-color-graphite);
    --hx-focus-inverse: var(--hx-color-bench-white);
    --hx-qr-dark: var(--hx-color-graphite);
    --hx-qr-light: var(--hx-color-white);
    --hx-space-0: 0;
    --hx-space-1: 4px;
    --hx-space-2: 8px;
    --hx-space-3: 12px;
    --hx-space-4: 16px;
    --hx-space-5: 24px;
    --hx-space-6: 32px;
    --hx-space-7: 48px;
    --hx-space-8: 64px;
    --hx-space-9: 96px;
    --hx-radius-base: 2px;
    --hx-layout-content-max: 1200px;
    --hx-layout-gutter-mobile: 16px;
    --hx-layout-gutter-desktop: 32px;
    --hx-layout-columns: 12;
    --hx-font-display: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', Arial, sans-serif;
    --hx-font-body: 'Barlow', 'Barlow Fallback', Arial, Roboto, sans-serif;
    --hx-font-data: 'IBM Plex Mono', 'IBM Plex Mono Fallback', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --hx-type-display-1-size: 3.5rem;
    --hx-type-display-1-mobile: 2.5rem;
    --hx-type-display-1-line: 1.05;
    --hx-type-display-1-weight: 700;
    --hx-type-display-2-size: 2.75rem;
    --hx-type-display-2-mobile: 2.125rem;
    --hx-type-display-2-line: 1.05;
    --hx-type-display-2-weight: 700;
    --hx-type-display-3-size: 2.125rem;
    --hx-type-display-3-line: 1.1;
    --hx-type-display-3-weight: 700;
    --hx-type-display-4-size: 1.625rem;
    --hx-type-display-4-line: 1.1;
    --hx-type-display-4-weight: 600;
    --hx-type-body-lg-size: 1.125rem;
    --hx-type-body-lg-line: 1.5;
    --hx-type-body-size: 1rem;
    --hx-type-body-line: 1.5;
    --hx-type-body-sm-size: 0.875rem;
    --hx-type-body-sm-line: 1.45;
    --hx-type-mono-size: 0.9375rem;
    --hx-type-mono-line: 1.5;
    --hx-type-mono-sm-size: 0.8125rem;
    --hx-type-mono-sm-line: 1.45;
    --hx-type-caption-size: 0.75rem;
    --hx-type-caption-line: 1.4;
    --hx-type-caption-tracking: 0.06em;
    --hx-type-caption-case: uppercase;
    --hx-admin-body: 0.875rem;
    --hx-admin-table-mono: 0.8125rem;
  }
}
/* Base elements (doc 04 3.3 and 3.4; DS-05, DS-21, DS-51). Light theme only; semantic tokens only.
   Words in Barlow, data in IBM Plex Mono, display in Barlow Condensed with upper case through
   text-transform only. Focus: a 2 px solid outline with a 2 px offset on :focus-visible. */
@layer base {
  :root { color-scheme: light; }
  body {
    background: var(--hx-surface-page);
    color: var(--hx-text);
    font-family: var(--hx-font-body);
    font-size: var(--hx-type-body-size);
    line-height: var(--hx-type-body-line);
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4 { font-family: var(--hx-font-display); text-transform: uppercase; }
  h1 { font-size: var(--hx-type-display-1-mobile); line-height: var(--hx-type-display-1-line); font-weight: var(--hx-type-display-1-weight); }
  h2 { font-size: var(--hx-type-display-2-mobile); line-height: var(--hx-type-display-2-line); font-weight: var(--hx-type-display-2-weight); }
  h3 { font-size: var(--hx-type-display-3-size); line-height: var(--hx-type-display-3-line); font-weight: var(--hx-type-display-3-weight); }
  h4 { font-size: var(--hx-type-display-4-size); line-height: var(--hx-type-display-4-line); font-weight: var(--hx-type-display-4-weight); }
  code, kbd, samp, pre, data {
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    line-height: var(--hx-type-mono-line);
  }
  a { color: var(--hx-text); }
  :focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }
  hr { border: 0; border-top: 1px solid var(--hx-border-decorative); }
  input, select, textarea {
    background: var(--hx-surface-raised);
    color: var(--hx-text);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
  }
  th, td { text-align: start; }
}
/* Address (doc 04 3.9.1, DS-24, 3.1 principle 4): the value in the data face, in inline-block groups of 4 characters
   with a right margin (no flex or grid, no inserted character), so lines break between groups and copied text has no
   space; the container wraps anywhere, so a full address never scrolls the page sideways. The first and last 6
   characters in weight 500. Label, value and checksum state each on their own line. The value is user-select: all
   (with the -webkit- form that WebKit reads): a click, a triple-click or a drag selects the whole value and nothing
   else. Without it, a triple-click in Chromium and WebKit also takes the line break before the next block, so the
   copied text ends in a newline (W1-02j test 2, Codex round 1). */
@layer components {
  .c-address { display: block; }
  .c-address__label { display: block; font-weight: 500; }
  .c-address__value {
    display: block;
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    line-height: var(--hx-type-mono-line);
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
  }
  .c-address__group { display: inline-block; margin-inline-end: var(--hx-space-1); }
  .c-address__group:last-child { margin-inline-end: 0; }
  .c-address__edge { font-weight: 500; }
  .c-address__checksum {
    display: block;
    color: var(--hx-text-muted);
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
  }
}
/* AdminShell (doc 04 3.9.5; plan row W1-05c, P-46): the admin density on the AdminShell elements, as PageShell has no
   host hook (body 14 px, table mono 13 px); the environment badge fills ("PRODUCTION": signal fill, graphite text;
   "LOCAL: TESTNETS": graphite fill, bench-white text; DS-54); the identity rows on one line each, so they fit the fixed
   header below 640 px too; the nav with its "not built" marks; the home tiles with
   their counts and ages in the data face. The footer statements keep their own rules (ComplianceStatements.css). */
@layer components {
  .c-admin,
  .c-admin__header,
  .c-admin__nav { font-size: var(--hx-admin-body); line-height: var(--hx-type-body-sm-line); }
  .c-admin { display: grid; gap: var(--hx-space-5); }
  .c-admin__header { display: flex; align-items: center; gap: var(--hx-space-4); min-width: 0; }
  .c-admin__header .c-kv__value--mono { font-size: var(--hx-admin-table-mono); }
  /* The Access identity and role fit the fixed 64 px PageShell header at every width: each row keeps its label and
     value on one line (KeyValue stacks them below 640 px), and a long value ends in an ellipsis instead of wrapping. */
  .c-admin__header .c-kv { gap: var(--hx-space-1); min-width: 0; }
  .c-admin__header .c-kv__row { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--hx-space-2); align-items: baseline; }
  .c-admin__header .c-kv__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-admin__env {
    flex: none;
    padding: var(--hx-space-1) var(--hx-space-2);
    border-radius: var(--hx-radius-base);
    font-family: var(--hx-font-data);
    font-size: var(--hx-admin-table-mono);
    font-weight: 500;
    letter-spacing: var(--hx-type-caption-tracking);
  }
  .c-admin__env--production { background: var(--hx-color-signal); color: var(--hx-color-graphite); }
  .c-admin__env--local { background: var(--hx-color-graphite); color: var(--hx-color-bench-white); }
  .c-admin__nav {
    display: flex;
    gap: var(--hx-space-3);
    max-width: 60vw;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    white-space: nowrap;
  }
  .c-admin__nav-item { display: inline-flex; align-items: baseline; gap: var(--hx-space-1); }
  .c-admin__not-built { color: var(--hx-text-muted); font-size: var(--hx-type-caption-size); }
  .c-admin__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--hx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .c-admin__tile {
    display: grid;
    gap: var(--hx-space-1);
    padding: var(--hx-space-3) var(--hx-space-4);
    border: 1px solid var(--hx-border-decorative);
    background: var(--hx-surface-raised);
  }
  .c-admin__tile-count,
  .c-admin__tile-age { font-family: var(--hx-font-data); font-size: var(--hx-admin-table-mono); font-variant-numeric: tabular-nums; }
  .c-admin__tile-age { color: var(--hx-text-muted); }
}
/* ApprovalPanel (doc 04 3.9.5, 3.1 principle 4, 3.3): a raised panel with a control border; the facts in the KeyValue
   data face; the typed phrase in mono with its words kept whole on a narrow screen; the reason of a disabled or
   support view in steel. The submit uses the Button variants (never the signal primary). */
@layer components {
  .c-approval {
    display: grid;
    gap: var(--hx-space-4);
    padding: var(--hx-space-4);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
  }
  .c-approval__title { margin: 0; font-size: var(--hx-type-body-lg-size); line-height: var(--hx-type-body-lg-line); overflow-wrap: anywhere; }
  .c-approval__consequence { margin: 0; font-weight: 500; }
  .c-approval__subject { margin: 0; overflow-wrap: anywhere; }
  .c-approval__form { display: grid; gap: var(--hx-space-2); justify-items: start; }
  .c-approval__form > .c-field { justify-self: stretch; }
  .c-approval__phrase {
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    overflow-wrap: anywhere;
  }
  .c-approval__reason { margin: 0; color: var(--hx-text-muted); }
}
/* Button (doc 04 3.9.1, 3.3): every target at least 24 x 24 px and the primary 44 px high (WCAG 2.5.8); signal fill
   with graphite text only on the primary; the focus ring comes from base.css (:focus-visible). */
@layer components {
  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hx-space-2);
    box-sizing: border-box;
    min-width: 24px;
    min-height: 24px;
    padding: var(--hx-space-2) var(--hx-space-4);
    border: 1px solid transparent;
    border-radius: var(--hx-radius-base);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
  .c-button--primary { min-height: 44px; background: var(--hx-cta-bg); color: var(--hx-cta-text); }
  .c-button--secondary { background: var(--hx-surface-inverse); color: var(--hx-text-inverse); }
  .c-button--secondary.c-button--outline { background: transparent; color: var(--hx-text); border-color: var(--hx-text); }
  .c-button--tertiary { padding-inline: 0; background: transparent; color: var(--hx-text); text-decoration: underline; }
  .c-button--destructive { background: transparent; color: var(--hx-text-danger); border-color: var(--hx-text-danger); }
  .c-button:disabled {
    background: var(--hx-surface-panel);
    color: var(--hx-text-muted);
    border-color: var(--hx-border-control);
    cursor: not-allowed;
  }
  .c-button-reason {
    display: block;
    margin-block-start: var(--hx-space-1);
    color: var(--hx-text-muted);
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
  }
}
/* CapabilityForm (doc 04 3.9.1): the code field in the Field mono variant, the one primary button, the live region and
   the notice in one column. */
@layer components {
  .c-capability { display: grid; gap: var(--hx-space-3); justify-items: start; max-width: 28rem; }
  .c-capability > .c-field { justify-self: stretch; margin-block-end: 0; }
  .c-capability__status { margin: 0; }
}
/* Checkbox (doc 04 3.9.1; WCAG 2.5.8): a 24 px native box, its label beside it, hint and error under the label. */
@layer components {
  .c-checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--hx-space-1) var(--hx-space-2);
    align-items: start;
    margin-block-end: var(--hx-space-4);
  }
  .c-checkbox__input { width: 24px; height: 24px; margin: 0; accent-color: var(--hx-text); }
  .c-checkbox__label { padding-block-start: 1px; }
  .c-checkbox > .c-field__hint,
  .c-checkbox > .c-field__error { grid-column: 2; }
}
/* ComplianceStatements (doc 04 3.8, 3.4, 3.3): both statements in Barlow 500, sentence case exactly as written (no
   text-transform), graphite on the page or on bench-white. The band is a bench-white panel with a 4 px signal left bar,
   not sticky and not dismissible; inline, footer and print use body-sm (14 px). Nothing here hides, shrinks below 14 px
   or moves a statement, and every property here is on the allowlist of the compliance-CSS guard; the print layer
   prints them black (print.css). */
@layer components {
  .c-compliance { color: var(--hx-text); }
  .c-compliance__statement { margin: 0; font-weight: 500; }
  .c-compliance--band {
    padding: var(--hx-space-3) var(--hx-layout-gutter-mobile);
    border-inline-start: 4px solid var(--hx-color-signal);
    background: var(--hx-surface-panel);
  }
  .c-compliance--inline {
    padding: var(--hx-space-3) var(--hx-space-4);
    background: var(--hx-surface-panel);
  }
  .c-compliance--inline,
  .c-compliance--footer,
  .c-compliance--print {
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
  }
  @media (min-width: 960px) {
    .c-compliance--band { padding-inline: var(--hx-layout-gutter-desktop); }
  }
}
/* CryptoAmount (doc 04 3.9.1, DS-23, 3.1 principle 4): the amount in the data face with tabular figures, wrapping
   anywhere so a long amount never scrolls the page sideways; the asset name in words stays in the body face. */
@layer components {
  .c-crypto-amount__value {
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
}
/* DataTable (doc 04 3.9.5, 3.1 principle 4, 3.11; DS-36): admin density (body 14 px, table mono 13 px); a sticky header
   row; identifier and number cells in the data face, numbers right-aligned with tabular figures; the reference link
   stretched over its row, so the whole row opens the detail view; cells wrap rather than cut a value. */
@layer components {
  .c-data-table { display: grid; gap: var(--hx-space-4); }
  .c-data-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hx-admin-body);
  }
  .c-data-table__caption { padding-block-end: var(--hx-space-2); caption-side: top; text-align: start; font-weight: 500; }
  .c-data-table__head,
  .c-data-table__cell,
  .c-data-table__empty {
    padding: var(--hx-space-2) var(--hx-space-3);
    border-bottom: 1px solid var(--hx-border-decorative);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  .c-data-table__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--hx-surface-panel);
    font-weight: 500;
  }
  .c-data-table__cell { font-weight: 400; }
  .c-data-table__cell--mono { font-family: var(--hx-font-data); font-size: var(--hx-admin-table-mono); }
  .c-data-table__cell--number { text-align: end; font-variant-numeric: tabular-nums; }
  .c-data-table__sort { display: inline-flex; align-items: center; gap: var(--hx-space-1); min-height: 24px; color: inherit; }
  .c-data-table__row--link { position: relative; }
  .c-data-table__row--link:hover { background: var(--hx-surface-panel); }
  .c-data-table__row-link::after { content: ""; position: absolute; inset: 0; }
  .c-data-table__empty { color: var(--hx-text-muted); }
  .c-data-table__error { margin: 0; }
}
/* Details (doc 04 3.7, 3.9.1): a native disclosure on a white panel with a decorative hairline; the summary is a target
   of at least 24 px (WCAG 2.5.8) with the focus ring of base.css. */
@layer components {
  .c-details {
    border: 1px solid var(--hx-border-decorative);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
  }
  .c-details__summary {
    min-height: 24px;
    padding: var(--hx-space-3) var(--hx-space-4);
    font-weight: 500;
    cursor: pointer;
  }
  .c-details__body { padding: 0 var(--hx-space-4) var(--hx-space-4); }
}
/* ErrorSummary (doc 04 3.9.1, 3.3): a raised box with a signal-dark border; the heading and its alert icon in
   signal-dark, the field links underlined graphite. The focus ring comes from base.css (:focus-visible). */
@layer components {
  .c-error-summary {
    margin-block-end: var(--hx-space-5);
    padding: var(--hx-space-4);
    border: 2px solid var(--hx-text-danger);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
  }
  .c-error-summary__title {
    display: flex;
    align-items: center;
    gap: var(--hx-space-2);
    margin: 0 0 var(--hx-space-2);
    color: var(--hx-text-danger);
    font-size: var(--hx-type-body-lg-size);
    line-height: var(--hx-type-body-lg-line);
  }
  .c-error-summary__list { margin: 0; padding-inline-start: var(--hx-space-5); }
  .c-error-summary__list a { color: var(--hx-text); text-decoration: underline; }
}
/* Field (doc 04 3.9.1, 3.3): visible label; steel 1 px border, 2 px on focus beside the focus ring of base.css; hint in
   steel, error in signal-dark with the alert icon. Select and Checkbox use the label, hint and error rules. */
@layer components {
  .c-field { display: grid; gap: var(--hx-space-1); margin-block-end: var(--hx-space-4); }
  .c-field__label { font-weight: 500; }
  .c-field__hint {
    margin: 0;
    color: var(--hx-text-muted);
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
  }
  .c-field__error { margin: 0; color: var(--hx-text-danger); font-weight: 500; }
  .c-field__control {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: var(--hx-space-2) var(--hx-space-3);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
    font: inherit;
  }
  .c-field__control:focus-visible {
    border-width: 2px;
    padding: calc(var(--hx-space-2) - 1px) calc(var(--hx-space-3) - 1px);
  }
  .c-field__control--mono { font-family: var(--hx-font-data); font-size: var(--hx-type-mono-size); }
}
/* FileInput (doc 04 3.9.1, 3.3; WCAG 2.5.8): the native file control at least 44 px high, its button with the steel
   1 px border, 2 px on focus beside the focus ring of base.css. */
@layer components {
  .c-file__control { min-height: 44px; font: inherit; color: var(--hx-text); }
  .c-file__control::file-selector-button {
    min-height: 44px;
    margin-inline-end: var(--hx-space-3);
    padding: var(--hx-space-2) var(--hx-space-4);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
    font: inherit;
    cursor: pointer;
  }
  .c-file__control:focus-visible::file-selector-button { border-width: 2px; }
}
/* FilterBar (doc 04 3.9.5, 3.3): the filter fields in one wrapping row on the panel surface, each at least 12rem wide,
   with the submit at the end of the row; the Field and Select rules give the labels and controls. */
@layer components {
  .c-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--hx-space-3);
    padding: var(--hx-space-3);
    border: 1px solid var(--hx-border-decorative);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-panel);
  }
  .c-filter-bar > .c-field { flex: 1 1 12rem; margin-block-end: 0; }
  .c-filter-bar__actions { flex: 0 0 auto; }
}
/* Hash (doc 04 3.9.1, DS-24, 3.1 principle 4): the rules of Address. The value in the data face, in inline-block groups
   of 4 characters with a right margin (no flex or grid), the container wrapping anywhere, the first and last 6
   characters in weight 500. Label, value and explorer link each on their own line, and the value is user-select: all
   as in Address, so a triple-click or a drag copies the value with no trailing newline; the link is at least 24 px
   high (WCAG 2.5.8). */
@layer components {
  .c-hash { display: block; }
  .c-hash__label { display: block; font-weight: 500; }
  .c-hash__value {
    display: block;
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    line-height: var(--hx-type-mono-line);
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
  }
  .c-hash__group { display: inline-block; margin-inline-end: var(--hx-space-1); }
  .c-hash__group:last-child { margin-inline-end: 0; }
  .c-hash__edge { font-weight: 500; }
  .c-hash__link { display: inline-block; min-height: 24px; margin-block-start: var(--hx-space-1); }
}
/* Icon (doc 04 3.6): 24 px through the spacing token, so the 2 px stroke stays 2 px; drawn in the text colour through
   currentColor. */
@layer components {
  .c-icon {
    display: inline-block;
    flex: none;
    width: var(--hx-space-5);
    height: var(--hx-space-5);
    vertical-align: -0.25em;
  }
}
/* KeyValue (doc 04 3.9.1, 3.4): keys as captions (mono, upper case, 0.06 em tracking, steel); values wrap anywhere, so
   a long code or hash never scrolls the page sideways; two columns from 640 px. */
@layer components {
  .c-kv { display: grid; gap: var(--hx-space-3); margin: 0; }
  .c-kv__row { display: grid; gap: var(--hx-space-1); }
  .c-kv__key {
    color: var(--hx-text-muted);
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-caption-size);
    line-height: var(--hx-type-caption-line);
    letter-spacing: var(--hx-type-caption-tracking);
    text-transform: var(--hx-type-caption-case);
  }
  .c-kv__value { margin: 0; overflow-wrap: anywhere; }
  .c-kv__value--mono { font-family: var(--hx-font-data); font-size: var(--hx-type-mono-size); font-variant-numeric: tabular-nums; }
  @media (min-width: 640px) {
    .c-kv__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--hx-space-4); }
  }
}
/* Logo (doc 04 3.5, DS-08): drawn at the width and height of its attributes, never shrunk by the reset's max-width or
   by a flex parent, so it never falls below its minimum size or loses its aspect ratio. The link keeps the base focus
   ring around the whole logo. */
@layer components {
  .c-logo { display: block; flex: none; max-width: none; }
  .c-logo-link { display: inline-block; }
}
/* MagicLinkForm (doc 04 3.9.1): the email field, the security check slot, the one primary button and the notice in one
   column; the result screen holds the result text and the code page link. */
@layer components {
  .c-magic-link { display: grid; gap: var(--hx-space-3); justify-items: start; max-width: 28rem; }
  .c-magic-link > .c-field { justify-self: stretch; margin-block-end: 0; }
  .c-magic-link__check { justify-self: stretch; }
  .c-magic-link__code-page { color: var(--hx-text); text-decoration: underline; }
}
/* Money (doc 04 3.9.1, DS-23, 3.1 principle 4): a USD figure in the data face with tabular figures, kept on one line. */
@layer components {
  .c-money {
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}
/* Notice (doc 04 3.9.1, 3.1 principle 5, 3.3): a panel with a tone bar; signal marks a warning, signal-dark a critical
   notice and its icon and title; the text stays graphite on bench-white. */
@layer components {
  .c-notice {
    display: flex;
    gap: var(--hx-space-3);
    padding: var(--hx-space-3) var(--hx-space-4);
    border-inline-start: 4px solid var(--hx-border-control);
    background: var(--hx-surface-panel);
    color: var(--hx-text);
  }
  .c-notice--warning { border-inline-start-color: var(--hx-color-signal); }
  .c-notice--critical { border-inline-start-color: var(--hx-text-danger); }
  .c-notice--critical > .c-icon,
  .c-notice--critical .c-notice__title { color: var(--hx-text-danger); }
  .c-notice__body { min-width: 0; }
  .c-notice__title { margin: 0 0 var(--hx-space-1); font-weight: 500; }
}
/* OfficialDomainNotice (doc 04 3.9.1, 3.3): one line in the body-sm size, the whole line an underlined graphite link. */
@layer components {
  .c-official-domain {
    margin: 0;
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
  }
  .c-official-domain__link { color: var(--hx-text); text-decoration: underline; }
}
/* PageShell (doc 04 3.9.1, 3.3, 3.11): a sticky header of a fixed 64 px height, and scroll-padding-top of the same
   height, so a focused or linked element never hides under it (WCAG 2.4.11); the skip link sits above the viewport
   until it has focus; graphite on white, bench-white or the aluminium page. The band and footer statements keep their
   own rules (ComplianceStatements.css); nothing here hides, shrinks or moves an ancestor of them. */
@layer components {
  html { scroll-padding-top: var(--hx-space-8); }
  .c-shell__skip {
    position: absolute;
    top: var(--hx-space-2);
    inset-inline-start: var(--hx-space-4);
    z-index: 2;
    padding: var(--hx-space-2) var(--hx-space-4);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
    transform: translateY(-200%);
  }
  .c-shell__skip:focus { transform: none; }
  .c-shell__header {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--hx-space-8);
    border-bottom: 1px solid var(--hx-border-decorative);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
  }
  .c-shell__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hx-space-4);
    height: 100%;
  }
  .c-shell__main { padding-block: var(--hx-space-6); }
  .c-shell__heading { margin-block-end: var(--hx-space-5); }
  .c-shell__footer {
    padding-block: var(--hx-space-6);
    border-top: 1px solid var(--hx-border-decorative);
    background: var(--hx-surface-panel);
    color: var(--hx-text);
  }
  .c-shell__end { display: grid; gap: var(--hx-space-4); }
}
/* Pager (doc 04 3.9.5, 3.11): "Previous" and "Next" links with targets 44 px high (WCAG 2.5.8); "Next" keeps the end
   side, also when it stands alone. */
@layer components {
  .c-pager { display: flex; flex-wrap: wrap; gap: var(--hx-space-4); }
  .c-pager__link {
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    min-height: 44px;
    padding-inline: var(--hx-space-2);
    color: var(--hx-text);
    font-weight: 500;
  }
  .c-pager__link--next { margin-inline-start: auto; }
}
/* QrFrame (doc 04 3.9.3, DS-26): graphite modules on a white field (the qr-dark and qr-light tokens), crisp module
   edges, drawn at 240 px and never shrunk by the reset's max-width, so it stays at or above 200 px; the caption below. */
@layer components {
  .c-qr { display: grid; justify-items: start; gap: var(--hx-space-2); margin: 0; }
  .c-qr__code {
    flex: none;
    width: 240px;
    height: 240px;
    max-width: none;
    shape-rendering: crispEdges;
  }
  .c-qr__light { fill: var(--hx-qr-light); }
  .c-qr__dark { fill: var(--hx-qr-dark); }
  .c-qr__caption { font-size: var(--hx-type-body-sm-size); line-height: var(--hx-type-body-sm-line); }
}
/* QuantityStepper (doc 04 3.9.1; DS-05): the Field control in the data face, narrow enough for a quantity, with the
   browser's own number control as the stepper. */
@layer components {
  .c-quantity__control { max-width: 8rem; font-variant-numeric: tabular-nums; }
}
/* RadioCard (doc 04 3.9.1, 3.3; WCAG 2.5.8): a fieldset of cards; each card is the label of a 24 px native radio, with
   a steel 1 px border that is 2 px on the chosen card and on focus beside the focus ring of base.css. */
@layer components {
  .c-radio-card { display: grid; gap: var(--hx-space-2); margin: 0 0 var(--hx-space-4); padding: 0; border: 0; min-width: 0; }
  .c-radio-card > legend { padding: 0; margin-block-end: var(--hx-space-1); }
  .c-radio-card__option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--hx-space-1) var(--hx-space-3);
    align-items: start;
    padding: var(--hx-space-3) var(--hx-space-4);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    cursor: pointer;
  }
  .c-radio-card__option:has(.c-radio-card__input:checked),
  .c-radio-card__option:has(.c-radio-card__input:focus-visible) {
    border-width: 2px;
    padding: calc(var(--hx-space-3) - 1px) calc(var(--hx-space-4) - 1px);
  }
  .c-radio-card__input { width: 24px; height: 24px; margin: 0; accent-color: var(--hx-text); }
  .c-radio-card__label { font-weight: 500; padding-block-start: 1px; }
  .c-radio-card__description {
    grid-column: 2;
    color: var(--hx-text-muted);
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
  }
}
/* ReadOnlyCopy (doc 04 3.9.1, 3.3, 3.1 principle 4): the visible label, the read-only input in the data face with the
   steel border of Field, and the copy button beside it (the Button classes give its size and outline). The button stays
   hidden until copy.js removes the hidden attribute, because .c-button sets a display value. */
@layer components {
  .c-copy { display: grid; gap: var(--hx-space-1); margin-block-end: var(--hx-space-4); }
  .c-copy__label { font-weight: 500; }
  .c-copy__row { display: flex; gap: var(--hx-space-2); align-items: center; }
  .c-copy__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: var(--hx-space-2) var(--hx-space-3);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-size);
    font-variant-numeric: tabular-nums;
  }
  .c-copy__button { flex: 0 0 auto; min-height: 44px; }
  .c-copy__button[hidden] { display: none; }
}
/* Select (doc 04 3.9.1): the Field control rules on a native select, with room for the native arrow. */
@layer components {
  .c-select__control { padding-inline-end: var(--hx-space-6); cursor: pointer; }
}
/* StatusChip (doc 04 3.10, 3.3; D-56): the tone looks of the doc 04 3.10 tone table, each with its own icon and the
   text label; a 1 px border on every tone, so a filled and an outlined chip have one size. The label may wrap. */
@layer components {
  .c-status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hx-space-1);
    max-width: 100%;
    padding: 0 var(--hx-space-2) 0 var(--hx-space-1);
    border: 1px solid currentColor;
    border-radius: var(--hx-radius-base);
    font-size: var(--hx-type-body-sm-size);
    line-height: var(--hx-type-body-sm-line);
    font-weight: 500;
    vertical-align: middle;
  }
  .c-status-chip__label { min-width: 0; overflow-wrap: anywhere; }
  .c-status-chip--waiting { color: var(--hx-text-muted); background: var(--hx-surface-panel); }
  .c-status-chip--progress { color: var(--hx-text); }
  .c-status-chip--attention { color: var(--hx-color-graphite); background: var(--hx-color-signal); border-color: var(--hx-color-signal); }
  .c-status-chip--done { color: var(--hx-text-success); }
  .c-status-chip--milestone { color: var(--hx-color-bench-white); background: var(--hx-color-graphite); border-color: var(--hx-color-graphite); }
  .c-status-chip--critical { color: var(--hx-color-white); background: var(--hx-color-signal-dark); border-color: var(--hx-color-signal-dark); }
  .c-status-chip--inactive { color: var(--hx-text-muted); border-style: dashed; }
}
/* StepUpPrompt (doc 04 3.9.5, 3.3): the step-up view as a raised panel with a control border, like the approval
   panel; the challenge facts in the KeyValue data face; the code field in the Field mono variant; the state notices
   from Notice. The submit uses the Button variants (never the signal primary). */
@layer components {
  .c-stepup {
    display: grid;
    gap: var(--hx-space-4);
    padding: var(--hx-space-4);
    border: 1px solid var(--hx-border-control);
    border-radius: var(--hx-radius-base);
    background: var(--hx-surface-raised);
    color: var(--hx-text);
  }
  .c-stepup__title { margin: 0; font-size: var(--hx-type-body-lg-size); line-height: var(--hx-type-body-lg-line); }
  .c-stepup__intro { margin: 0; }
  .c-stepup__form { display: grid; gap: var(--hx-space-2); justify-items: start; }
  .c-stepup__form > .c-field { justify-self: stretch; max-width: 20rem; }
  .c-stepup__restart { color: var(--hx-text); text-decoration: underline; }
}
/* Timeline (doc 04 3.9.1, 3.1 principle 4, 3.3): a vertical hairline with one marker per event; the current event has
   a filled graphite marker as well as aria-current; times in the data face, steel, tabular figures. */
@layer components {
  .c-timeline { margin: 0; padding: 0; list-style: none; }
  .c-timeline__item {
    position: relative;
    margin-inline-start: var(--hx-space-2);
    padding: 0 0 var(--hx-space-4) var(--hx-space-5);
    border-inline-start: 2px solid var(--hx-border-decorative);
  }
  .c-timeline__item:last-child { border-inline-start-color: transparent; }
  .c-timeline__item::before {
    content: "";
    position: absolute;
    top: var(--hx-space-1);
    inset-inline-start: -7px;
    width: var(--hx-space-3);
    height: var(--hx-space-3);
    border: 2px solid var(--hx-border-control);
    border-radius: 50%;
    background: var(--hx-surface-raised);
  }
  .c-timeline__item.is-current::before { border-color: var(--hx-text); background: var(--hx-text); }
  .c-timeline__label { margin: 0; font-weight: 500; }
  .c-timeline__time {
    color: var(--hx-text-muted);
    font-family: var(--hx-font-data);
    font-size: var(--hx-type-mono-sm-size);
    font-variant-numeric: tabular-nums;
  }
  .c-timeline__detail { margin: var(--hx-space-1) 0 0; }
}
/* Self-hosted fonts (doc 04 3.4; DS-06, DS-07; plan row W1-02f). One @font-face per WOFF2 file under
   static-dist/static/fonts/, with the unicode-range of src/design/fonts/SOURCES.md, and one metric-adjusted
   fallback face per family with the overrides of src/design/fonts/fallback.json. font-display: swap on every
   face; no @import and no font URL outside /static/fonts/. scripts/fonts-verify.mjs checks this file. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/barlow-400-latin.b0a8ad37.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/barlow-400-latin-ext.122b24bc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/barlow-500-latin.cd759df8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/barlow-500-latin-ext.3facdf66.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlow-condensed-600-latin.215a93c6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlow-condensed-600-latin-ext.aef7edf5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlow-condensed-700-latin.3787a5a4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlow-condensed-700-latin-ext.9d351bd9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-latin1.e8993d94.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-latin2.8c5e48e4.woff2) format('woff2');
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-latin1.41201b65.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-latin2.86208dbe.woff2) format('woff2');
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}
@font-face {
  font-family: 'Barlow Fallback';
  font-display: swap;
  src: local('Arial'), local('Liberation Sans'), local('Roboto');
  size-adjust: 96.67%;
  ascent-override: 103.45%;
  descent-override: 20.69%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Barlow Condensed Fallback';
  font-display: swap;
  src: local('Arial Narrow'), local('Roboto Condensed'), local('Arial');
  size-adjust: 80.42%;
  ascent-override: 124.35%;
  descent-override: 24.87%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  font-display: swap;
  src: local('Menlo'), local('Consolas'), local('DejaVu Sans Mono'), local('Roboto Mono');
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.50%;
  line-gap-override: 0.00%;
}
/* Layout (doc 04 DS-04, 3.2): the breakpoints of tokens.json as media queries (custom properties
   cannot feed media queries), a 1200 px content maximum, a 16 px side gutter on mobile and a 12-column
   grid at 960 px and up. Nothing here sets a width that can scroll the page sideways at 320 CSS px. */
@layer layout {
  .l-container {
    box-sizing: content-box;
    max-width: var(--hx-layout-content-max);
    margin-inline: auto;
    padding-inline: var(--hx-layout-gutter-mobile);
  }
  @media (min-width: 640px) {
    h1 { font-size: var(--hx-type-display-1-size); }
    h2 { font-size: var(--hx-type-display-2-size); }
  }
  @media (min-width: 960px) {
    .l-container { padding-inline: var(--hx-layout-gutter-desktop); }
    .l-grid {
      display: grid;
      grid-template-columns: repeat(var(--hx-layout-columns), minmax(0, 1fr));
      column-gap: var(--hx-layout-gutter-desktop);
    }
  }
}
/* Print (doc 04 3.8 print variant, DS-12): black text on white. Nothing in this layer hides,
   shrinks or transforms an element; the statements print black at the body size. */
@layer print {
  @media print {
    body { background: var(--hx-color-white); color: var(--hx-color-black); }
    a, [data-compliance] { color: var(--hx-color-black); }
    h1, h2, h3, h4 { break-after: avoid; }
    table, figure, img, svg { break-inside: avoid; }
  }
}
/* Reset (doc 04 3.1.2; layer order in the build's layer statement). Box model, margins, media and
   form fonts. Reduced motion lives here: an !important in the first layer wins over every later layer
   (doc 04 3.3 Motion: every transition stops under prefers-reduced-motion: reduce). */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }
  }
}
/* The storefront header, footer and catalogue layout (plan row W2-02; doc 04 3.9.2). Tokens only. Nothing here hides,
   shrinks or moves a statement or an ancestor of one. */
@layer components {
  .c-site-links { display: none; align-items: center; gap: var(--hx-space-4); list-style: none; margin: 0; padding: 0; }
  .c-site-links--all { display: flex; }
  .c-site-links ul { list-style: none; margin: 0; padding: 0; }
  .c-site-menu { position: relative; }
  .c-site-menu__panel { position: absolute; inset-inline-end: 0; z-index: 3; padding: var(--hx-space-4); background: var(--hx-surface-raised); }
  .c-site-menu__panel ul { list-style: none; margin: 0; padding: 0; }
  .c-site-footer { display: grid; gap: var(--hx-space-5); }
  .c-site-footer ul { list-style: none; margin: 0; padding: 0; }
  .c-catalogue-grid { display: grid; gap: var(--hx-space-5); list-style: none; margin: 0; padding: 0; }
  .c-site-lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hx-space-4); margin-block-end: var(--hx-space-5); }
  @media (min-width: 960px) {
    .c-site-links { display: flex; }
    .c-site-menu { display: none; }
    .c-site-footer { grid-template-columns: repeat(3, 1fr); }
    .c-catalogue-grid { grid-template-columns: repeat(3, 1fr); }
  }
}