/* Slobal design system, runtime stylesheet (round 127 design A).
 *
 * shared/theme.css is the CANONICAL statement of the design-system tokens.
 * The [data-ds] and [data-ds="agncred"] block immediately below is a verbatim
 * runtime copy of the block at the tail of that file: this stylesheet is what
 * pages actually link, theme.css is what the gate reads. Change a value in
 * theme.css and copy it here in the same round, byte for byte.
 *
 * Served at /assets/ui.css with the font files at /assets/fonts/, so every
 * font URL below is relative. There are no external requests of any kind: the
 * content security policy is default-src 'self'.
 *
 * PRINCIPLES, in short:
 *   1. One accent colour per page. Slobal uses deep teal, AgnCred uses pine.
 *      Cyan and sky are banned on AgnCred surfaces.
 *   2. Sentence case everywhere. Uppercase only in eyebrows and table headers,
 *      11px, letter-spacing 0.08em to 0.09em.
 *   3. Big Shoulders Inline Text 900 appears once per page: the h1 and the
 *      wordmark. Every other heading is Onest 600 to 700.
 *   4. The brand gradient is a 3px rule or part of the logo. Never text fill,
 *      button fill or card background.
 *   5. All data (scores, IDs, hashes, counts, prices) renders in Geist Mono.
 *   6. Borders over shadows. 1px lines. Shadow ceiling 0 1px 2px rgba(10,14,26,.05).
 *
 * TABLE OF CONTENTS
 *   1.  Tokens                 [data-ds], [data-ds="agncred"]
 *   2.  Fonts                  @font-face, font stack custom properties
 *   3.  Page scope             .ds-page, .ds-container, .ds-section
 *   4.  Type scale             .ds-h1, .ds-h2, .ds-h3, .ds-eyebrow, .ds-body,
 *                              .ds-small, .ds-data, .ds-measure, .ds-link
 *   5.  Gradient rule          .ds-grad-rule
 *   6.  Buttons                .ds-btn, .ds-btn-secondary, .ds-btn-ghost,
 *                              .ds-btn-sm
 *   7.  Form field             .ds-field, .ds-label, .ds-input, .ds-help,
 *                              .ds-field-error
 *   8.  Badges                 .ds-badge, .ds-badge-ok, .ds-badge-warn,
 *                              .ds-badge-bad, .ds-badge-neutral,
 *                              .ds-badge-brand
 *   9.  Data table             .ds-table-wrap, .ds-table, .ds-mono, .ds-num
 *   10. Card and KPI           .ds-card, .ds-card-title, .ds-card-body,
 *                              .ds-kpi, .ds-kpi-label, .ds-kpi-value
 *   11. Stat row               .ds-stat-row
 *   12. Split section          .ds-split-stack, .ds-split, .ds-split-flip,
 *                              .ds-split-copy, .ds-split-data
 *   13. Step rail              .ds-steps, .ds-step
 *   14. Spec list              .ds-spec-list, .ds-spec-row, .ds-spec-label,
 *                              .ds-spec-value
 *   15. Section header         .ds-section-head, .ds-section-note
 *   16. Hero                   .ds-hero, .ds-hero-sub
 *   17. Nav                    .ds-nav, .ds-nav-inner, .ds-wordmark,
 *                              .ds-nav-links, .ds-nav-link
 *   18. Footer                 .ds-footer, .ds-footer-inner, .ds-footer-links,
 *                              .ds-footer-note
 *   19. Focus and motion       :focus-visible, prefers-reduced-motion
 *   20. Responsive             the single 720px breakpoint
 */

/* ---------------------------------------------------------------------------
 * 1. TOKENS
 * Byte-identical copy of the block at the tail of shared/theme.css. Do not
 * edit here alone: theme.css is the canonical statement.
 * ------------------------------------------------------------------------ */
[data-ds] {
  /* Shared */
  --paper: #F5F4EF;
  --surface: #FFFFFF;
  --line: #E0DED6;
  --ink: #0A0E1A;
  --ink-soft: #374151;
  --muted: #6B7385;
  --ok: #067647;
  --ok-bg: #ECFDF3;
  --warn: #B54708;
  --warn-bg: #FFFAEB;
  --bad: #B42318;
  --bad-bg: #FEF3F2;
  --neutral-bg: #EFEEE8;
  --chrome-muted: #5F6779;
  --radius: 8px;
  --radius-sm: 6px;

  /* Slobal context (default) */
  --primary: #0E7490;
  --primary-hover: #0B5C73;
  --primary-tint: #E3F1F5;
  --heading: #0A0E1A;
  --accent-dark: #0F172A;
  --grad: linear-gradient(135deg, #0F172A 0%, #0E7490 35%, #06B6D4 65%, #38BDF8 100%);

  /* Dark surface extension (round 128 design B). Cyan and sky are legal on
   * dark surfaces only; these tokens carry the homepage's dark hero, footer
   * and console-art values so no page declares a raw hex of its own. The
   * hs- group is the hero slideshow's mock browser chrome. */
  --sky: #38BDF8;
  --bright: #ECFEFF;
  --line-warm: #DDDACF;
  --warm-bar: #C9C6BC;
  --ink-raise: #0F1424;
  --ink-card: #161F33;
  --dim: #9AA3B2;
  --ok-vivid: #16A34A;
  --wait: #F59E0B;
  --hs-bg: #0B1020;
  --hs-dot: #2A3550;
  --hs-url: #151C30;
  --hs-edge: #222C46;
  --hs-txt: #B8C0D4;
}

[data-ds="agncred"] {
  --primary: #03625A;
  --primary-hover: #024B45;
  --primary-tint: #E4EFED;
  --heading: #00135D;
  --accent-dark: #00135D;
  --grad: linear-gradient(135deg, #00135D 0%, #03625A 100%);
}

/* ---------------------------------------------------------------------------
 * 2. FONTS
 * Self-hosted, served from /assets/fonts/ beside this file. Relative URLs, so
 * the same paths resolve from shared/ui-snippets.html against shared/fonts/.
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: "Big Shoulders Inline Text";
  src: url("fonts/big-shoulders-inline-text-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Font stacks. Kept in a separate rule so the token copy above stays byte
 * identical to theme.css. The names match theme.css, so a page that links
 * both stylesheets sees the same three stacks. */
[data-ds] {
  --font-display: "Big Shoulders Inline Text", "Big Shoulders Display", sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ---------------------------------------------------------------------------
 * 3. PAGE SCOPE
 * .ds-page       body scope: paper background, body type, element defaults
 * .ds-container  centred content column, max width 1120px
 * .ds-section    vertical section rhythm, 64px desktop and 48px mobile
 * ------------------------------------------------------------------------ */
.ds-page {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.ds-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ds-section {
  padding-block: 64px;
}

/* ---------------------------------------------------------------------------
 * 4. TYPE SCALE
 * Spacing scale in use across the system: 4, 8, 12, 16, 24, 32, 48, 64, 96.
 * Each class is mirrored by a bare element default inside .ds-page, so a page
 * picks the scale up for free. The element defaults are written through
 * :where(.ds-page) so they carry element specificity only: any component
 * class, .ds-card-body or .ds-nav-link for instance, always wins over them.
 * ------------------------------------------------------------------------ */

/* .ds-h1: display heading, Big Shoulders Inline Text 900, once per page */
.ds-h1,
:where(.ds-page) h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--heading);
}

/* .ds-h2: section heading, Onest 700 */
.ds-h2,
:where(.ds-page) h2 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--heading);
}

/* .ds-h3: sub heading, Onest 600 */
.ds-h3,
:where(.ds-page) h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--heading);
}

/* .ds-eyebrow: the one uppercase label form, tracked, accent coloured */
.ds-eyebrow {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

/* .ds-body: body copy, capped at the 640px measure */
.ds-body,
:where(.ds-page) p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
}

/* .ds-small: secondary note */
.ds-small,
:where(.ds-page) small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* .ds-data: any number, score, ID, hash, count or price */
.ds-data,
:where(.ds-page) code,
:where(.ds-page) kbd,
:where(.ds-page) samp {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* .ds-measure: reapply the 640px text measure to any block */
.ds-measure {
  max-width: 640px;
}

/* .ds-link: inline link in the page accent */
.ds-link,
:where(.ds-page) a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ds-link:hover,
:where(.ds-page) a:hover {
  color: var(--primary-hover);
}

/* ---------------------------------------------------------------------------
 * 5. GRADIENT RULE
 * .ds-grad-rule: the only place the brand gradient may appear outside a logo
 * ------------------------------------------------------------------------ */
.ds-grad-rule {
  display: block;
  height: 3px;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: var(--grad);
}

/* ---------------------------------------------------------------------------
 * 6. BUTTONS
 * .ds-btn            primary, solid accent, white label. One per view.
 * .ds-btn-secondary  surface with a line border and accent label
 * .ds-btn-ghost      no border, accent label, tinted on hover
 * .ds-btn-sm         32px compact variant of any of the three
 * ------------------------------------------------------------------------ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding-inline: 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ds-btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--surface);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-btn-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--primary);
}

.ds-btn-secondary:hover {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-hover);
}

.ds-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}

.ds-btn-ghost:hover {
  background: var(--primary-tint);
  border-color: transparent;
  color: var(--primary-hover);
}

.ds-btn-sm {
  height: 32px;
  padding-inline: 12px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * 7. FORM FIELD
 * .ds-field        wrapper: label above, control, help text below
 * .ds-label        13px 600 heading colour
 * .ds-input        40px control, 6px radius, line border
 * .ds-help         13px muted help text
 * .ds-field-error  modifier on .ds-field: red border, help text says what
 *                  happened and how to fix it
 * ------------------------------------------------------------------------ */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}

.ds-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading);
}

.ds-input {
  height: 40px;
  width: 100%;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}

.ds-input::placeholder {
  color: var(--muted);
}

textarea.ds-input {
  height: auto;
  min-height: 96px;
  padding-block: 10px;
  resize: vertical;
}

.ds-help {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.ds-field-error .ds-input {
  border-color: var(--bad);
}

.ds-field-error .ds-help {
  color: var(--bad);
}

/* ---------------------------------------------------------------------------
 * 8. BADGES
 * .ds-badge          pill, 24px, dot indicator, tinted background
 * .ds-badge-ok       green on green tint
 * .ds-badge-warn     amber on amber tint
 * .ds-badge-bad      red on red tint
 * .ds-badge-neutral  soft ink on neutral tint (the default)
 * .ds-badge-brand    accent on accent tint
 * ------------------------------------------------------------------------ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: 10px;
  border-radius: 12px;
  background: var(--neutral-bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ds-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ds-badge-ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.ds-badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.ds-badge-bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.ds-badge-neutral {
  background: var(--neutral-bg);
  color: var(--ink-soft);
}

.ds-badge-brand {
  background: var(--primary-tint);
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
 * 9. DATA TABLE
 * .ds-table-wrap  horizontal scroll container for narrow viewports
 * .ds-table       uppercase tracked 11px headers, 1px row borders, row tint
 * .ds-mono        identifiers, hashes and keys in Geist Mono
 * .ds-num         numbers: mono, tabular, right aligned
 * ------------------------------------------------------------------------ */
.ds-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
}

.ds-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  white-space: nowrap;
}

.ds-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: middle;
}

.ds-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-table tbody tr:hover td {
  background: var(--paper);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

.ds-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

.ds-table th.ds-num {
  text-align: right;
  font-family: var(--font-body);
}

/* ---------------------------------------------------------------------------
 * 10. CARD AND KPI
 * .ds-card       surface, line border, 8px radius, 24px padding
 * .ds-card-title Onest 600 18px card heading
 * .ds-card-body  two sentences at most
 * .ds-kpi        card variant: uppercase label above a mono 28px number
 * ------------------------------------------------------------------------ */
.ds-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(10, 14, 26, .05);
}

.ds-card-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading);
}

.ds-card-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ds-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-kpi-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.ds-kpi-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

/* ---------------------------------------------------------------------------
 * 11. STAT ROW
 * .ds-stat-row: 3 to 4 equal width KPI cards, sits directly under a hero or a
 * section header. Stacks on mobile.
 * ------------------------------------------------------------------------ */
.ds-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* ---------------------------------------------------------------------------
 * 12. SPLIT SECTION
 * .ds-split       two columns: one holds data, the other holds eyebrow,
 *                 heading, two sentences at most and one link
 * .ds-split-copy  the words side
 * .ds-split-data  the evidence side: table, stat cards, code or screenshot
 * .ds-split-flip  modifier: data on the left, copy on the right
 * .ds-split-stack wrapper: alternates its .ds-split children automatically
 * ------------------------------------------------------------------------ */
.ds-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ds-split-copy > :last-child {
  margin-bottom: 0;
}

.ds-split-flip .ds-split-data {
  order: -1;
}

.ds-split-stack {
  display: grid;
  gap: 64px;
}

.ds-split-stack > .ds-split:nth-child(even) > .ds-split-data {
  order: -1;
}

/* ---------------------------------------------------------------------------
 * 13. STEP RAIL
 * .ds-steps  ordered list of 3 to 5 steps, numbered markers joined by a line
 * .ds-step   one line of copy per step
 * ------------------------------------------------------------------------ */
.ds-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ds-step;
}

.ds-step {
  position: relative;
  padding-top: 40px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  counter-increment: ds-step;
}

.ds-step::before {
  content: counter(ds-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  z-index: 1;
}

.ds-step::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 28px;
  right: -16px;
  height: 1px;
  background: var(--line);
}

.ds-step:last-child::after {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 14. SPEC LIST
 * .ds-spec-list   label and value pairs separated by 1px lines
 * .ds-spec-row    one pair
 * .ds-spec-label  11px uppercase muted
 * .ds-spec-value  mono for data, body for words
 * ------------------------------------------------------------------------ */
.ds-spec-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.ds-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.ds-spec-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.ds-spec-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.ds-spec-value.ds-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
 * 15. SECTION HEADER
 * .ds-section-head: eyebrow, then h2, then a one-line note
 * ------------------------------------------------------------------------ */
.ds-section-head {
  max-width: 640px;
  margin-bottom: 32px;
}

.ds-section-head > :last-child {
  margin-bottom: 0;
}

.ds-section-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * 16. HERO
 * .ds-hero      the h1 block at the top of a page
 * .ds-hero-sub  subcopy, two sentences at most
 * ------------------------------------------------------------------------ */
.ds-hero {
  padding-block: 64px 32px;
}

.ds-hero-sub {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
 * 17. NAV
 * .ds-nav        surface bar with a 1px bottom border
 * .ds-nav-inner  container row: wordmark left, links and one button right
 * .ds-wordmark   Big Shoulders Inline Text 900, the second display use
 * .ds-nav-link   sentence case link
 * ------------------------------------------------------------------------ */
.ds-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.ds-nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ds-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--heading);
  text-decoration: none;
}

.ds-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-inline-start: auto;
  list-style: none;
  margin-block: 0;
  padding: 0;
}

.ds-nav-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.ds-nav-link:hover {
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
 * 18. FOOTER
 * .ds-footer: dark accent ground, white wordmark, muted light text mixed from
 * --surface so no raw colour value is needed.
 * ------------------------------------------------------------------------ */
.ds-footer {
  background: var(--accent-dark);
  color: color-mix(in srgb, var(--surface) 70%, transparent);
  padding-block: 48px;
}

.ds-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ds-footer .ds-wordmark {
  color: var(--surface);
}

.ds-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-inline-start: auto;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.ds-footer-links a,
.ds-footer a {
  color: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 15px;
  text-decoration: none;
}

.ds-footer-links a:hover,
.ds-footer a:hover {
  color: var(--surface);
}

.ds-footer-note {
  width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* ---------------------------------------------------------------------------
 * 19. FOCUS AND MOTION
 * Every control keeps a visible keyboard focus ring. Motion is optional.
 * ------------------------------------------------------------------------ */
.ds-page :focus-visible,
[data-ds] :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.ds-footer :focus-visible {
  outline-color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .ds-page *,
  .ds-page *::before,
  .ds-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * 20. RESPONSIVE
 * One breakpoint. Display type drops to 34px, sections to 48px, and every
 * multi column arrangement stacks.
 * ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .ds-h1,
  :where(.ds-page) h1 {
    font-size: 34px;
  }

  .ds-section {
    padding-block: 48px;
  }

  .ds-hero {
    padding-block: 48px 24px;
  }

  .ds-stat-row {
    grid-template-columns: 1fr;
  }

  .ds-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ds-split-flip .ds-split-data,
  .ds-split-stack > .ds-split:nth-child(even) > .ds-split-data {
    order: 0;
  }

  .ds-split-stack {
    gap: 48px;
  }

  .ds-steps {
    grid-auto-flow: row;
    gap: 24px;
  }

  .ds-step {
    padding-top: 0;
    padding-left: 44px;
    min-height: 28px;
  }

  .ds-step::after {
    top: 28px;
    left: 13px;
    right: auto;
    bottom: -24px;
    width: 1px;
    height: auto;
  }

  .ds-spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ds-nav-inner {
    flex-wrap: wrap;
    gap: 16px;
    padding-block: 12px;
  }

  .ds-nav-links {
    gap: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * 21. BRAND TOGGLE HELPER (styleguide)
 * The Home pages run no JavaScript (CSP script-src 'none'), so the styleguide
 * switches brand context with a checkbox: a checked #ds-brand-toggle anywhere
 * on the page flips every [data-ds] scope after it in the body to the AgnCred
 * context. The declarations repeat the [data-ds="agncred"] block above; the
 * values are the same five context tokens and the gradient, nothing else.
 * ------------------------------------------------------------------------ */
body:has(#ds-brand-toggle:checked) [data-ds] {
  --primary: #03625A;
  --primary-hover: #024B45;
  --primary-tint: #E4EFED;
  --heading: #00135D;
  --accent-dark: #00135D;
  --grad: linear-gradient(135deg, #00135D 0%, #03625A 100%);
}