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

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