/* Encoded Brands design system — GENERATED FILE, DO NOT EDIT.
   Source: design-system/. Rebuild with: node scripts/build-design-system.mjs */

/* ==== tokens/fonts.css ==== */
/* Aeonik — display / headline face. Licensed binaries supplied by Encoded Brands.
   Source TTFs live in the design handoff; production ships woff2 from /ds/fonts/.
   Inter (body) and Geist Mono (labels) load from Google Fonts via a <link> in the
   page head, so they fetch in parallel with the HTML rather than serially behind
   this stylesheet. Geist Mono stands in for Ingram Mono, which is not licensed. */
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-Thin.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/ds/fonts/Aeonik-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ==== tokens/colors.css ==== */
:root{
/* ── Primitive · neutral ramp (Encoded / Primitive) ───────────────── */
--ec-neutral-0:#ffffff; /* @kind color */
--ec-neutral-50:#f7f7f7; /* @kind color */
--ec-neutral-100:#f0f0f0; /* @kind color */
--ec-neutral-150:#e7e7e7; /* @kind color */
--ec-neutral-200:#d6d6d6; /* @kind color */
--ec-neutral-300:#b8b8b8; /* @kind color */
--ec-neutral-400:#8d8d8d; /* @kind color */
--ec-neutral-500:#666666; /* @kind color */
--ec-neutral-600:#4a4a4a; /* @kind color */
--ec-neutral-700:#292828; /* @kind color */
--ec-neutral-800:#1a1a1a; /* @kind color */
--ec-neutral-900:#0d0d0d; /* @kind color */
--ec-neutral-1000:#000000; /* @kind color */

/* ── Primitive · International Orange (aerospace) ─────────────────── */
--ec-orange-50:#fff2eb; /* @kind color */
--ec-orange-100:#ffe0d1; /* @kind color */
--ec-orange-300:#ff9b6b; /* @kind color */
--ec-orange-500:#ff4f00; /* @kind color */
--ec-orange-600:#e64700; /* @kind color */
--ec-orange-700:#b83900; /* @kind color */
--ec-orange-900:#5c1d00; /* @kind color */
--ec-orange-500-12:rgba(255,79,0,.1216); /* @kind color */

/* ── Primitive · green (registry trust) ───────────────────────────── */
--ec-green-100:#ddf8e8; /* @kind color */
--ec-green-500:#22a65a; /* @kind color */
--ec-green-700:#13713b; /* @kind color */

/* ── Named brand swatches (from the brand board) ──────────────────── */
--ec-black:#000000; /* @kind color */
--ec-white:#ffffff; /* @kind color */
--ec-dawn:#fca73d; /* @kind color */
--ec-santa-monica:#c6cfcc; /* @kind color */
--ec-silver:#eeeeee; /* @kind color */
/* Legacy pigment International Orange. Superseded by --ec-orange-500. */
--ec-international-orange-legacy:#ba160c; /* @kind color */

/* ── Semantic · surface ───────────────────────────────────────────── */
--ec-bg-page:#ffffff; /* @kind color */
--ec-bg-inverse:#1a1a1a; /* @kind color */
--ec-surface:#ffffff; /* @kind color */
--ec-surface-subtle:#f7f7f7; /* @kind color */
--ec-surface-muted:#f0f0f0; /* @kind color */
--ec-surface-strong:#1a1a1a; /* @kind color */
--ec-surface-accent:#ff4f00; /* @kind color */
--ec-surface-accent-subtle:#fff2eb; /* @kind color */
--ec-surface-scrim:rgba(0,0,0,.45); /* @kind color */

/* ── Semantic · text ──────────────────────────────────────────────── */
--ec-text-primary:#1a1a1a; /* @kind color */
--ec-text-secondary:#666666; /* @kind color */
--ec-text-tertiary:#8d8d8d; /* @kind color */
--ec-text-inverse:#ffffff; /* @kind color */
--ec-text-inverse-muted:rgba(255,255,255,.8); /* @kind color */
--ec-text-accent:#ff4f00; /* @kind color */
--ec-text-on-accent:#ffffff; /* @kind color */

/* ── Semantic · line ──────────────────────────────────────────────── */
--ec-border-hairline:rgba(26,26,26,.03); /* @kind color */
--ec-border-subtle:rgba(26,26,26,.1); /* @kind color */
--ec-border-default:#e7e7e7; /* @kind color */
--ec-border-strong:#d6d6d6; /* @kind color */
--ec-border-inverse:rgba(255,255,255,.14); /* @kind color */
--ec-divider:rgba(26,26,26,.2); /* @kind color */

/* ── Semantic · action ────────────────────────────────────────────── */
--ec-action-primary:#ff4f00; /* @kind color */
--ec-action-primary-hover:#e64700; /* @kind color */
--ec-action-primary-press:#b83900; /* @kind color */
--ec-action-on-primary:#ffffff; /* @kind color */
--ec-action-secondary:#f0f0f0; /* @kind color */
--ec-action-secondary-hover:#e7e7e7; /* @kind color */
--ec-action-on-secondary:#1a1a1a; /* @kind color */
--ec-focus-ring:#ff4f00; /* @kind color */

/* ── Semantic · review states (Encode workspace) ──────────────────── */
--ec-status-pending-bg:#fff2eb; /* @kind color */
--ec-status-pending-fg:#ff4f00; /* @kind color */
--ec-status-confirmed-bg:#e7e7e7; /* @kind color */
--ec-status-confirmed-fg:#1a1a1a; /* @kind color */

/* ── Semantic · code surfaces ─────────────────────────────────────── */
--ec-code-bg:#1a1a1a; /* @kind color */
--ec-code-bg-light:#f7f7f7; /* @kind color */
--ec-code-fg:rgba(255,255,255,.88); /* @kind color */
--ec-code-fg-light:#1a1a1a; /* @kind color */
--ec-code-key:#ff9b6b; /* @kind color */
--ec-code-key-light:#b83900; /* @kind color */
--ec-code-string:#ffffff; /* @kind color */
--ec-code-string-light:#1a1a1a; /* @kind color */
--ec-code-value:#22a65a; /* @kind color */
--ec-code-value-light:#13713b; /* @kind color */
--ec-code-punct:rgba(255,255,255,.4); /* @kind color */
--ec-code-punct-light:#8d8d8d; /* @kind color */
--ec-code-comment:rgba(255,255,255,.35); /* @kind color */
--ec-code-comment-light:#8d8d8d; /* @kind color */
--ec-code-heading:#ff4f00; /* @kind color */
--ec-code-gutter:rgba(255,255,255,.22); /* @kind color */
--ec-code-gutter-light:#b8b8b8; /* @kind color */

/* ── Semantic · registry trust ladder ─────────────────────────────── */
/* Available — a free handle, not yet published. Not a trust_level. */
--ec-trust-available-bg:#f7f7f7; /* @kind color */
--ec-trust-available-fg:#8d8d8d; /* @kind color */
/* Claimed — published and integrity-signed; domain control unproven. */
--ec-trust-claimed-bg:#e7e7e7; /* @kind color */
--ec-trust-claimed-fg:#1a1a1a; /* @kind color */
/* Verified — DNS TXT proves domain control; official brand source. */
--ec-trust-verified-bg:#ddf8e8; /* @kind color */
--ec-trust-verified-fg:#13713b; /* @kind color */
--ec-trust-verified-dot:#22a65a; /* @kind color */
/* Certified — paid entitlement, orthogonal to the trust ladder. */
--ec-trust-certified-bg:#1a1a1a; /* @kind color */
--ec-trust-certified-fg:#ffffff; /* @kind color */
}

:root[data-theme="dark"],.ec-dark{
--ec-bg-page:#111111; /* @kind color */
--ec-bg-inverse:#ffffff; /* @kind color */
--ec-surface:#1a1a1a; /* @kind color */
--ec-surface-subtle:#292828; /* @kind color */
--ec-surface-muted:#0d0d0d; /* @kind color */
--ec-surface-strong:#ffffff; /* @kind color */
--ec-text-primary:#ffffff; /* @kind color */
--ec-text-secondary:rgba(255,255,255,.6); /* @kind color */
--ec-text-tertiary:rgba(255,255,255,.4); /* @kind color */
--ec-text-inverse:#1a1a1a; /* @kind color */
--ec-text-inverse-muted:rgba(26,26,26,.8); /* @kind color */
--ec-border-hairline:rgba(255,255,255,.06); /* @kind color */
--ec-border-subtle:rgba(255,255,255,.14); /* @kind color */
--ec-border-default:rgba(255,255,255,.14); /* @kind color */
--ec-border-strong:rgba(255,255,255,.28); /* @kind color */
--ec-divider:rgba(255,255,255,.2); /* @kind color */
--ec-action-primary-hover:#ff9b6b; /* @kind color */
--ec-action-secondary:rgba(255,255,255,.1); /* @kind color */
--ec-action-secondary-hover:rgba(255,255,255,.18); /* @kind color */
--ec-action-on-secondary:#ffffff; /* @kind color */
--ec-status-confirmed-bg:rgba(255,255,255,.1); /* @kind color */
--ec-status-confirmed-fg:#ffffff; /* @kind color */
}

/* ==== tokens/typography.css ==== */
:root{
--ec-font-display:"Aeonik",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; /* @kind font */
--ec-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; /* @kind font */
/* Geist Mono is the shipped label face. It stands in for Ingram Mono, which is
   unlicensed here; the source file already uses Geist Mono in several places. */
--ec-font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* @kind font */

--ec-weight-light:300; /* @kind font */
--ec-weight-regular:400; /* @kind font */
--ec-weight-medium:500; /* @kind font */
--ec-weight-semibold:600; /* @kind font */
--ec-weight-bold:700; /* @kind font */

/* Display & headings — Aeonik */
--ec-display-xl-size:86px;   --ec-display-xl-lh:86px;    --ec-display-xl-ls:-3.44px; /* @kind font */
--ec-display-lg-size:56px;   --ec-display-lg-lh:60px;    --ec-display-lg-ls:-2.24px; /* @kind font */
--ec-h1-size:54px;           --ec-h1-lh:59.4px;          --ec-h1-ls:-2.16px; /* @kind font */
--ec-h2-size:43px;           --ec-h2-lh:43px;            --ec-h2-ls:-2px; /* @kind font */
--ec-h3-size:32px;           --ec-h3-lh:33px;            --ec-h3-ls:-1px; /* @kind font */
--ec-h4-size:24px;           --ec-h4-lh:24px;            --ec-h4-ls:-0.5px; /* @kind font */
--ec-h5-size:20px;           --ec-h5-lh:28px;            --ec-h5-ls:-0.4px; /* @kind font */
--ec-h6-size:18px;           --ec-h6-lh:18px;            --ec-h6-ls:-0.2px; /* @kind font */

/* Body — Inter */
--ec-body-lg-size:18px;      --ec-body-lg-lh:28px; /* @kind font */
--ec-body-size:16px;         --ec-body-lh:24px; /* @kind font */
--ec-body-md-size:15px;      --ec-body-md-lh:22.5px; /* @kind font */
--ec-body-sm-size:14px;      --ec-body-sm-lh:21px; /* @kind font */
--ec-body-xs-size:14px;      --ec-body-xs-lh:19.6px;     --ec-body-xs-ls:0.28px; /* @kind font */
--ec-caption-size:12px;      --ec-caption-lh:16.8px;     --ec-caption-ls:0.12px; /* @kind font */
--ec-micro-size:11px;        --ec-micro-lh:11px;         --ec-micro-ls:0.5px; /* @kind font */

/* Labels — mono */
--ec-label-size:12px;        --ec-label-lh:19.2px;       --ec-label-ls:0; /* @kind font */
--ec-label-sm-size:11px;     --ec-label-sm-lh:11px;      --ec-label-sm-ls:1px; /* @kind font */
--ec-label-xs-size:10px;     --ec-label-xs-lh:10px;      --ec-label-xs-ls:1px; /* @kind font */
}

.ec-display-xl{font-family:var(--ec-font-display);font-weight:500;font-size:var(--ec-display-xl-size);line-height:var(--ec-display-xl-lh);letter-spacing:var(--ec-display-xl-ls)}
.ec-display-lg{font-family:var(--ec-font-display);font-weight:700;font-size:var(--ec-display-lg-size);line-height:var(--ec-display-lg-lh);letter-spacing:var(--ec-display-lg-ls)}
.ec-h1{font-family:var(--ec-font-display);font-weight:500;font-size:var(--ec-h1-size);line-height:var(--ec-h1-lh);letter-spacing:var(--ec-h1-ls)}
.ec-h2{font-family:var(--ec-font-display);font-weight:500;font-size:var(--ec-h2-size);line-height:var(--ec-h2-lh);letter-spacing:var(--ec-h2-ls)}
.ec-h3{font-family:var(--ec-font-display);font-weight:500;font-size:var(--ec-h3-size);line-height:var(--ec-h3-lh);letter-spacing:var(--ec-h3-ls)}
.ec-h4{font-family:var(--ec-font-display);font-weight:500;font-size:var(--ec-h4-size);line-height:var(--ec-h4-lh);letter-spacing:var(--ec-h4-ls)}
.ec-h5{font-family:var(--ec-font-display);font-weight:500;font-size:var(--ec-h5-size);line-height:var(--ec-h5-lh);letter-spacing:var(--ec-h5-ls)}
.ec-h6{font-family:var(--ec-font-display);font-weight:700;font-size:var(--ec-h6-size);line-height:var(--ec-h6-lh);letter-spacing:var(--ec-h6-ls)}
.ec-body-lg{font-family:var(--ec-font-body);font-weight:300;font-size:var(--ec-body-lg-size);line-height:var(--ec-body-lg-lh)}
.ec-body{font-family:var(--ec-font-body);font-weight:300;font-size:var(--ec-body-size);line-height:var(--ec-body-lh)}
.ec-body-md{font-family:var(--ec-font-body);font-weight:400;font-size:var(--ec-body-md-size);line-height:var(--ec-body-md-lh)}
.ec-body-sm{font-family:var(--ec-font-body);font-weight:300;font-size:var(--ec-body-sm-size);line-height:var(--ec-body-sm-lh)}
.ec-caption{font-family:var(--ec-font-body);font-weight:300;font-size:var(--ec-caption-size);line-height:var(--ec-caption-lh);letter-spacing:var(--ec-caption-ls)}
.ec-micro{font-family:var(--ec-font-body);font-weight:500;font-size:var(--ec-micro-size);line-height:var(--ec-micro-lh);letter-spacing:var(--ec-micro-ls);text-transform:uppercase}
.ec-label{font-family:var(--ec-font-mono);font-weight:400;font-size:var(--ec-label-size);line-height:var(--ec-label-lh);text-transform:uppercase}
.ec-label-sm{font-family:var(--ec-font-mono);font-weight:400;font-size:var(--ec-label-sm-size);line-height:var(--ec-label-sm-lh);letter-spacing:var(--ec-label-sm-ls);text-transform:uppercase}

/* ==== tokens/spacing.css ==== */
:root{
--ec-space-0:0px; /* @kind spacing */
--ec-space-1:4px; /* @kind spacing */
--ec-space-2:8px; /* @kind spacing */
--ec-space-2-5:10px; /* @kind spacing */
--ec-space-3:12px; /* @kind spacing */
--ec-space-4:16px; /* @kind spacing */
--ec-space-5:20px; /* @kind spacing */
--ec-space-6:24px; /* @kind spacing */
--ec-space-8:32px; /* @kind spacing */
--ec-space-10:40px; /* @kind spacing */
--ec-space-12:48px; /* @kind spacing */
--ec-space-16:64px; /* @kind spacing */
--ec-space-20:80px; /* @kind spacing */
--ec-space-30:120px; /* @kind spacing */
/* Editorial rhythm — distance between marketing sections. */
--ec-section-gap:180px; /* @kind spacing */
--ec-page-gutter:64px; /* @kind spacing */
--ec-shell-inset:12px; /* @kind spacing */
}

/* ==== tokens/shape.css ==== */
:root{
--ec-radius-none:0px; /* @kind radius */
--ec-radius-xs:5px; /* @kind radius */   /* buttons, chips-on-dark */
--ec-radius-sm:6px; /* @kind radius */
--ec-radius-status:4px; /* @kind radius */ /* status chips */
--ec-radius-md:10px; /* @kind radius */  /* cards, nav bar, media — the house radius */
--ec-radius-lg:14px; /* @kind radius */  /* inner control wells, specimen wells */
--ec-radius-xl:20px; /* @kind radius */  /* full-width shell panels */
--ec-radius-2xl:30px; /* @kind radius */
--ec-radius-round:60px; /* @kind radius */
--ec-radius-full:1000px; /* @kind radius */

--ec-control-sm:34px; /* @kind spacing */
--ec-control-md:44px; /* @kind spacing */
--ec-control-lg:51px; /* @kind spacing */ /* the site's primary button height */

--ec-icon-sm:16px; /* @kind spacing */
--ec-icon-md:20px; /* @kind spacing */
--ec-icon-lg:24px; /* @kind spacing */

--ec-border-width:1px; /* @kind spacing */
--ec-focus-width:2px; /* @kind spacing */

/* This system draws edges with inset rings, not drop shadows. */
--ec-ring-subtle:inset 0 0 0 1px rgba(26,26,26,.1); /* @kind shadow */
--ec-ring-default:inset 0 0 0 1px #e7e7e7; /* @kind shadow */
--ec-ring-strong:inset 0 0 0 1px #d6d6d6; /* @kind shadow */
--ec-ring-inverse:inset 0 0 0 1px rgba(255,255,255,.14); /* @kind shadow */
--ec-shadow-none:none; /* @kind shadow */
}

/* ==== tokens/motion.css ==== */
:root{
--ec-duration-fast:120ms; /* @kind other */
--ec-duration-base:180ms; /* @kind other */
--ec-duration-slow:320ms; /* @kind other */
--ec-ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ec-ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ec-transition-color:color var(--ec-duration-fast) var(--ec-ease-standard),background-color var(--ec-duration-fast) var(--ec-ease-standard),border-color var(--ec-duration-fast) var(--ec-ease-standard); /* @kind other */
}

/* ==== base.css ==== */
/* =============================================================================
   Encoded Brands — foundation layer
   Translated from the design handoff's component specs
   (the handoff's component .jsx files carry the exact inline values; prop names are kept
   as modifier classes). Every value here is a token reference, not a literal,
   except where the handoff itself specifies a one-off.

   Reset, type utilities, the logomark and page scaffolding. Safe for pages
   that bring their own chrome (the homepage, How it works, Docs).

   This system draws edges with inset rings. There are no drop shadows.
   ========================================================================== */

/* ---------------------------------------------------------------- reset --- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ec-bg-page);
  color: var(--ec-text-primary);
  font-family: var(--ec-font-body);
  font-weight: var(--ec-weight-light);
  font-size: var(--ec-body-size);
  line-height: var(--ec-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

::selection { background: var(--ec-orange-500); color: #fff; }

:focus-visible {
  outline: var(--ec-focus-width) solid var(--ec-focus-ring);
  outline-offset: 2px;
}

.ec-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- legacy token bridge --- */
/* Pages carried over from the pre-rebrand site still reference the old custom
   properties, including from inline SVG attributes such as stroke="var(--r)".
   Remapping them onto design-system tokens rebrands those surfaces without
   editing a hundred inline attributes. New work uses --ec-* directly. */
:root {
  --r:       var(--ec-orange-500);
  --r-dark:  var(--ec-orange-600);
  --r-light: var(--ec-orange-50);
  --k:       var(--ec-neutral-800);
  --w:       var(--ec-neutral-0);

  --g50:  var(--ec-neutral-50);
  --g100: var(--ec-neutral-100);
  --g200: var(--ec-neutral-200);
  --g400: var(--ec-neutral-400);
  --g600: var(--ec-neutral-500);
  --g800: var(--ec-neutral-700);

  --fg-1: var(--ec-text-primary);
  --fg-2: var(--ec-neutral-700);
  --fg-3: var(--ec-text-secondary);
  --fg-4: var(--ec-text-tertiary);

  --sans:  var(--ec-font-body);
  --serif: var(--ec-font-display);
  --mono:  var(--ec-font-mono);

  --rule: var(--ec-border-default);
  --dur:  var(--ec-duration-base);
  --ease: var(--ec-ease-standard);

  --wrap-max: 1240px;
}

/* ------------------------------------------------------------ typography --- */

.ec-display-xl { font-family: var(--ec-font-display); font-weight: 500; font-size: var(--ec-display-xl-size); line-height: var(--ec-display-xl-lh); letter-spacing: var(--ec-display-xl-ls); margin: 0; }
.ec-h1 { font-family: var(--ec-font-display); font-weight: 500; font-size: var(--ec-h1-size); line-height: var(--ec-h1-lh); letter-spacing: var(--ec-h1-ls); margin: 0; }
.ec-h2 { font-family: var(--ec-font-display); font-weight: 500; font-size: var(--ec-h2-size); line-height: var(--ec-h2-lh); letter-spacing: var(--ec-h2-ls); margin: 0; }
.ec-h3 { font-family: var(--ec-font-display); font-weight: 500; font-size: var(--ec-h3-size); line-height: var(--ec-h3-lh); letter-spacing: var(--ec-h3-ls); margin: 0; }
.ec-h4 { font-family: var(--ec-font-display); font-weight: 500; font-size: var(--ec-h4-size); line-height: var(--ec-h4-lh); letter-spacing: var(--ec-h4-ls); margin: 0; }
.ec-h5 { font-family: var(--ec-font-display); font-weight: 500; font-size: var(--ec-h5-size); line-height: var(--ec-h5-lh); letter-spacing: var(--ec-h5-ls); margin: 0; }

.ec-lede { font-family: var(--ec-font-body); font-weight: 300; font-size: var(--ec-body-size); line-height: var(--ec-body-lh); margin: 0; }
.ec-body-sm { font-family: var(--ec-font-body); font-weight: 300; font-size: var(--ec-body-sm-size); line-height: var(--ec-body-sm-lh); margin: 0; }

/* Mono labels: 11px, 1px tracking, uppercase. */
.ec-mono {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-sm-size);
  letter-spacing: var(--ec-label-sm-ls);
  text-transform: uppercase;
}
.ec-mono-xs {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-xs-size);
  letter-spacing: var(--ec-label-xs-ls);
  text-transform: uppercase;
}

.ec-accent { color: var(--ec-text-accent); }

/* ------------------------------------------------------------- logomark --- */

.ec-logomark {
  display: block;
  flex-shrink: 0;
  width: auto;
  color: currentColor;
}

/* ---------------------------------------------------------------- shell --- */

/* 12px white gutter around the whole page; sections stack with the same gap. */
.ec-page {
  display: flex;
  flex-direction: column;
  gap: var(--ec-shell-inset);
  padding: var(--ec-shell-inset);
  background: var(--ec-neutral-0);
}

/* The grey shell panel that holds the body sections. */
.ec-shell {
  border-radius: var(--ec-radius-xl);
  background: var(--ec-surface-muted);
  padding: 64px var(--ec-shell-inset);
  display: flex;
  flex-direction: column;
  gap: 64px;
}

@media (max-width: 640px) {
  .ec-shell { padding: 40px var(--ec-shell-inset); gap: 40px; }
}

/* Horizontal inset used by every section inside the shell. */
.ec-section { padding: 0 28px; display: flex; flex-direction: column; gap: 50px; }

/* ---------------------------------------------------------------- motion --- */

@keyframes ec-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -52; } }
@keyframes ec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ec-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== chrome.css ==== */
/* =============================================================================
   Encoded Brands — site chrome
   The header bar, the buttons and the footer panel. Every page on
   encodedbrands.ai wears these, including the pages that keep their own
   layout CSS, so this file is loaded last on those pages and first in the
   full bundle.
   ========================================================================== */

/* ------------------------------------------------------------- site nav --- */

/* A full-width white bar, 64px tall, at the house radius with an inset ring.
   It sits 59px from the top and 53px from each side on every page: inside the
   hero image on the homepage, on white everywhere else. */
.ec-nav-holder { padding: 47px 41px 0; }

.nav {
  height: 64px;
  padding: 0 14px 0 24px;
  border-radius: var(--ec-radius-md);
  background: var(--ec-surface);
  box-shadow: var(--ec-ring-subtle);
  position: relative;
  z-index: 60;
  /* Reset the retired identity's full-bleed sticky bar: it carried an accent
     underline and a blur that the floating bar does not want. */
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav::before, .nav::after { content: none; }
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ec-space-6);
}
.nav-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.nav-brand img { height: 30px; width: auto; display: block; }
/* The lockup carries the wordmark; the typed one retires with the rebrand. */
.nav-mark { display: none; }

.nav-links { display: flex; align-items: center; }
.nav-link {
  padding: 7px 16px;
  display: inline-flex;
  align-items: center;
  opacity: .65;
  font-family: var(--ec-font-body);
  font-weight: 400;
  font-size: var(--ec-body-xs-size);
  line-height: var(--ec-body-xs-lh);
  letter-spacing: var(--ec-body-xs-ls);
  color: var(--ec-text-primary);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity var(--ec-duration-fast) var(--ec-ease-standard);
}
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"] { opacity: 1; color: var(--ec-text-primary); }

.nav .btn { min-width: 0; height: 44px; padding: 0 18px; margin-left: var(--ec-space-2); }
.nav .btn .arrow { display: none; }

.locale-control { display: inline-flex; align-items: center; margin-left: var(--ec-space-2); }
.locale-select {
  height: 34px;
  border: 0;
  box-shadow: var(--ec-ring-default);
  border-radius: var(--ec-radius-xs);
  background: var(--ec-surface);
  color: var(--ec-text-secondary);
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-xs-size);
  letter-spacing: var(--ec-label-xs-ls);
  padding: 0 24px 0 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.locale-select:hover, .locale-select:focus { color: var(--ec-text-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.nav-menu-toggle { display: none; }

/* ----------------------------------------------- display type adaptation --- */

/* Pages carried over from the pre-rebrand site set their headings in the body
   face, because the retired identity used one sans for both display and body.
   Display type is Aeonik now, so the face is reset here, in the layer that
   loads last on those pages.

   font-family and font-style carry !important because those pages scope their
   heading rules by ancestor (`.docs-body h1`), which outspecifies a bare
   element selector; adapting that CSS is exactly this layer's job. Weight and
   size are left to the page, so a reskin does not re-typeset it. */
h1, h2, h3, h4, h5,
.section-title, .hero-headline, .pricing-heading {
  font-family: var(--ec-font-display) !important;
  font-style: normal !important;
  font-weight: 500;
}
/* Emphasis is set in the display face, upright, in International Orange. */
h1 em, h2 em, h3 em, h4 em, h5 em,
h1 .em, h2 .em, h3 .em, .section-title .em, .hero-headline .em {
  font-family: var(--ec-font-display) !important;
  font-style: normal !important;
}

/* --------------------------------------------------------------- buttons --- */

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ec-space-2);
  min-width: 200px;
  height: var(--ec-control-lg);
  padding: 3px 24px;
  border-radius: var(--ec-radius-xs);
  font-family: var(--ec-font-mono);
  font-weight: 400;
  font-size: var(--ec-label-size);
  line-height: var(--ec-label-lh);
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--ec-transition-color);
}
.btn .arrow { transition: transform var(--ec-duration-fast) var(--ec-ease-standard); }
.btn:hover .arrow { transform: translateX(3px); }

.btn.primary, .btn.accent {
  background: var(--ec-action-primary);
  color: var(--ec-action-on-primary);
}
.btn.primary:hover, .btn.accent:hover { background: var(--ec-action-primary-hover); color: #fff; }
.btn.primary:active, .btn.accent:active { background: var(--ec-action-primary-press); }

/* --ec-action-secondary is #F0F0F0, which is also the shell surface, so a
   plain secondary button would disappear against it. The system draws edges
   with inset rings, so secondary actions carry one. */
.btn.ghost, .btn.secondary, .spark-copy-button {
  background: var(--ec-neutral-0);
  box-shadow: var(--ec-ring-subtle);
  color: var(--ec-action-on-secondary);
  min-width: 0;
  padding: 0 18px;
}
.btn.ghost:hover, .btn.secondary:hover, .spark-copy-button:hover { background: var(--ec-action-secondary); color: var(--ec-text-primary); }

.btn[disabled], .btn.is-disabled {
  background: var(--ec-neutral-200);
  color: var(--ec-neutral-400);
  cursor: not-allowed;
}
.btn.full { width: 100%; min-width: 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- footer --- */

.foot {
  background: var(--ec-neutral-800);
  color: #fff;
  border-radius: var(--ec-radius-xl);
  padding: 80px 64px 48px;
  /* Pages without the design system's page gutter still read the footer as a
     panel rather than a full-bleed band. */
  margin: var(--ec-shell-inset);
}
.ec-page .foot { margin: 0; }
.foot::before { content: none; }
.foot > .wrap { display: flex; flex-direction: column; gap: 80px; max-width: var(--wrap-max); padding: 0; }
.foot-grid { display: flex; gap: 80px; flex-wrap: wrap; padding: 0; border: 0; }
.foot-grid > :first-child { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: var(--ec-space-6); }

.foot-brand { display: flex; align-items: center; gap: 12px; margin: 0; }
.foot-brand img { height: 44px; width: auto; }
/* The logomark replaces the typed wordmark with the rebrand. */
.foot-brand-text { display: none; }

.foot-sub {
  margin: 0;
  max-width: 420px;
  font-family: var(--ec-font-display);
  font-weight: 500; font-size: 32px; line-height: 33px; letter-spacing: -1px;
  color: #fff;
  text-transform: none;
}

.foot-col { display: flex; flex-direction: column; gap: 14px; min-width: 160px; }
.foot-col h4 {
  margin: 0;
  font-family: var(--ec-font-mono);
  font-weight: 400; font-size: var(--ec-label-size); line-height: var(--ec-label-lh);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.foot-col li { padding: 0; }
.foot-col a {
  font-family: var(--ec-font-body);
  font-weight: 300; font-size: var(--ec-body-sm-size); line-height: var(--ec-body-sm-lh);
  color: #fff;
  text-decoration: none;
  opacity: .85;
  overflow-wrap: anywhere;
  transition: opacity var(--ec-duration-fast) var(--ec-ease-standard);
}
.foot-col a:hover { opacity: 1; color: #fff; }

.foot-agent-note {
  margin: 0;
  padding-top: var(--ec-space-8);
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--ec-font-mono);
  font-size: 13px; line-height: 22px;
  color: rgba(255,255,255,.6);
}
.foot-agent-note a { color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.foot-agent-note a:hover { color: var(--ec-orange-300); }

.foot-bottom {
  margin-top: var(--ec-space-8);
  padding: 0;
  border: 0;
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  gap: var(--ec-space-4); flex-wrap: wrap;
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-size);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.foot-bottom .star { color: var(--ec-orange-500); }

/* ------------------------------------------------------------ responsive --- */

/* The nav collapses into a disclosure menu at 960px, matching the live
   mobile navigation contract. */

@media (max-width: 1280px) {
  .ec-nav-holder { padding: 32px 24px 0; }
  .foot { padding: 64px 40px 40px; }
  .foot-grid { gap: 48px; }
}

@media (max-width: 960px) {
  .nav { height: 58px; padding: 0 8px 0 16px; }
  .nav-brand img { height: 26px; }

  .nav-menu-toggle {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;
    border: 0; background: transparent; color: var(--ec-text-primary); cursor: pointer;
    border-radius: var(--ec-radius-xs);
  }
  .nav-menu-toggle span {
    display: block; width: 21px; height: 1.5px; background: currentColor;
    transform-origin: center;
    transition: transform var(--ec-duration-base) var(--ec-ease-standard), opacity var(--ec-duration-base) var(--ec-ease-standard);
  }
  .nav-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav-links,
  .nav .nav-links {
    position: absolute; inset: calc(100% + 8px) 0 auto;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px;
    background: var(--ec-surface);
    border-radius: var(--ec-radius-md);
    box-shadow: var(--ec-ring-subtle);
  }
  .nav-links[hidden] { display: none; }
  .nav .nav-links[hidden] { display: none; }
  .nav-link {
    display: flex; align-items: center; min-height: 48px;
    opacity: 1; padding: 0 12px;
    border-bottom: 1px solid var(--ec-border-default);
  }
  .nav-link:last-of-type { border-bottom: 0; }
  .locale-control { margin: 8px 0 0; width: 100%; }
  .locale-select { width: 100%; height: 44px; }
  .nav .btn.nav-cta-full { display: inline-flex; width: 100%; margin: 8px 0 0; height: 48px; }

  .foot { padding: 48px 24px 32px; border-radius: var(--ec-radius-md); }
  .foot > .wrap { gap: 48px; }
  .foot-grid { flex-direction: column; gap: 40px; }
  .foot-grid > :first-child { min-width: 0; }
  .foot-sub { font-size: 26px; line-height: 28px; }
}

@media (max-width: 640px) {
  .btn { width: 100%; min-width: 0; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==== components.css ==== */
/* =============================================================================
   Encoded Brands — shared components
   Measure, section labels, code cards, trust chips and the FAQ accordion.
   Loaded by pages that take their layout from the design system. Pages that
   keep their own layout load only the foundation and the chrome.
   ========================================================================== */

/* -------------------------------------------------------------- measure --- */

.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; }
.wrap-narrow { width: 100%; max-width: 900px; margin: 0 auto; }

.section { padding: 0 28px; }
.section > .wrap { display: flex; flex-direction: column; gap: 50px; }
.section-head { display: flex; flex-direction: column; gap: 24px; }

.section-title {
  margin: 0;
  font-family: var(--ec-font-display);
  font-weight: 500;
  font-size: var(--ec-h1-size);
  line-height: var(--ec-h1-lh);
  letter-spacing: var(--ec-h1-ls);
  color: var(--ec-text-primary);
  max-width: 900px;
}

.section-lede {
  margin: 0;
  max-width: 620px;
  font-family: var(--ec-font-body);
  font-weight: 300;
  font-size: var(--ec-body-size);
  line-height: var(--ec-body-lh);
  color: var(--ec-text-primary);
}

/* The rebrand drops the serif italic accent. Emphasis is a line break in the
   display face, not a change of voice. */
.em, .em-color { display: block; font-style: normal; font-family: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------- section label --- */

/* Logomark, hairline rule, then the mono label. The label is the element's
   own text node so the locale script can rewrite it, which means it cannot
   carry a flex `order`. Drawing the rule as ::before and the glyph as ::after
   with order:-1 puts all three in the right visual sequence. */
.t-eyebrow,
.section-eyebrow,
.pricing-eyebrow,
.kicker {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0 0 var(--ec-space-10);
  font-family: var(--ec-font-mono);
  font-weight: 400;
  font-size: var(--ec-label-size);
  line-height: var(--ec-label-lh);
  text-transform: uppercase;
  color: var(--ec-text-primary);
}
.t-eyebrow::before,
.section-eyebrow::before,
.pricing-eyebrow::before,
.kicker::before {
  content: "";
  flex: 1; height: 1px;
  background: var(--ec-divider);
}
.t-eyebrow::after,
.section-eyebrow::after,
.pricing-eyebrow::after,
.kicker::after {
  content: "";
  order: -1;
  width: 22.5px; height: 26px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("/ds/logo/logomark.svg") no-repeat center / contain;
  mask: url("/ds/logo/logomark.svg") no-repeat center / contain;
}

.live-dot {
  width: 7px; height: 7px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--ec-orange-500);
  animation: ec-pulse 2.4s ease-in-out infinite;
}

/* ------------------------------------------------------------- code card --- */

/* Syntax-coloured plain mono text. Never rendered markdown; blank lines kept. */
.bd-file {
  background: var(--ec-neutral-0);
  border-radius: var(--ec-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--ec-ring-subtle);
}
.bd-file-head {
  background: var(--ec-neutral-800);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.bd-file-head-l { display: flex; align-items: center; gap: 10px; }
.bd-file-name { font-family: var(--ec-font-mono); font-size: 16px; color: #fff; }
.bd-file-pulse { width: 7px; height: 7px; background: var(--ec-orange-500); animation: ec-pulse 2.4s ease-in-out infinite; }
.bd-file-body {
  flex: 1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  background: var(--ec-neutral-0);
  min-height: 0;
}
.bd-file-path { font-family: var(--ec-font-mono); font-size: 11px; color: var(--ec-text-secondary); }
.bd-file-rule { height: 1px; background: var(--ec-border-default); margin: 14px 0; }
.bd-file-label {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-xs-size);
  letter-spacing: var(--ec-label-xs-ls);
  text-transform: uppercase;
  color: var(--ec-text-tertiary);
}
.bd-file-list { display: flex; flex-direction: column; gap: var(--ec-space-2); margin-top: 12px; }
.bd-file-item { display: flex; align-items: center; gap: 9px; font-family: var(--ec-font-mono); font-size: 13px; color: var(--ec-text-primary); }
.bd-dot { width: 4px; height: 4px; background: var(--ec-orange-500); flex-shrink: 0; }
.bd-file-spacer { flex: 1; }
.bd-file-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--ec-border-default);
  font-family: var(--ec-font-mono);
  font-size: 11px;
}
.bd-file-signed { display: inline-flex; align-items: center; gap: 6px; color: var(--ec-text-primary); }
.bd-file-version { color: var(--ec-text-tertiary); }

.bd-file-pre {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  font-family: var(--ec-font-mono);
  font-size: 12px;
  line-height: 19.2px;
  white-space: pre-wrap;
  color: var(--ec-code-fg-light);
}
.bd-file-pre .key       { color: var(--ec-code-key-light); }
.bd-file-pre .val       { color: var(--ec-code-string-light); }
.bd-file-pre .yaml-delim,
.bd-file-pre .bullet    { color: var(--ec-code-punct-light); }
.bd-file-pre .com       { color: var(--ec-code-comment-light); }
.bd-file-pre .h1,
.bd-file-pre .h2        { color: var(--ec-code-heading); font-weight: 600; }

/* ------------------------------------------------------------ status chip --- */

.ec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ec-radius-status);
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  text-transform: uppercase;
  white-space: nowrap;
}
.ec-chip .ec-dot { width: 6px; height: 6px; border-radius: 6px; background: currentColor; flex-shrink: 0; }

/* Registry trust ladder. Green appears ONLY on a Verified record, never on a
   success toast or a positive delta. */
.ec-chip.is-available { background: var(--ec-trust-available-bg); color: var(--ec-trust-available-fg); font-family: var(--ec-font-mono); font-weight: 400; }
.ec-chip.is-claimed   { background: var(--ec-trust-claimed-bg);   color: var(--ec-trust-claimed-fg); }
.ec-chip.is-verified  { background: var(--ec-trust-verified-bg);  color: var(--ec-trust-verified-fg); }
.ec-chip.is-verified .ec-dot { background: var(--ec-trust-verified-dot); }
/* Registry Certified is a paid entitlement, not a rung on the ladder. */
.ec-chip.is-certified { background: var(--ec-trust-certified-bg); color: var(--ec-trust-certified-fg); }

/* ------------------------------------------------------------------ faq --- */

.faq { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  width: 100%;
  padding: 20px;
  border-radius: var(--ec-radius-md);
  background: var(--ec-surface-strong);
  color: var(--ec-text-inverse);
  overflow: hidden;
}
.faq-item summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { display: none; }
.faq-q {
  flex-grow: 1;
  opacity: .9;
  font-family: var(--ec-font-display);
  font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.4px;
}
/* The close glyph rotates 45deg into a plus when the item is shut. */
.faq-toggle {
  width: 16px; height: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--ec-font-body);
  font-size: 18px; font-weight: 300; line-height: 1;
  transform: rotate(45deg);
  transition: transform var(--ec-duration-base) var(--ec-ease-standard);
}
.faq-item[open] .faq-toggle { transform: rotate(0deg); }

.faq-a { padding-top: var(--ec-space-4); }
.faq-a p {
  margin: 0;
  font-family: var(--ec-font-body);
  font-weight: 300; font-size: var(--ec-body-size); line-height: var(--ec-body-lh);
  color: var(--ec-text-inverse-muted);
}
.faq-a p + p { margin-top: 12px; }
.faq-a a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.faq-a a:hover { color: var(--ec-orange-300); }
.faq-a code {
  font-family: var(--ec-font-mono);
  font-size: 13px;
  background: rgba(255,255,255,.1);
  padding: 1px 5px;
  border-radius: var(--ec-radius-status);
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1100px) {
  .section-title { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
}

@media (max-width: 640px) {
  .section { padding: 0 12px; }
  .section > .wrap { gap: 32px; }
  .section-title { font-size: 32px; line-height: 35px; letter-spacing: -1.2px; }
  .faq-q { font-size: 17px; line-height: 24px; }
}