/* 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;
  }
}