/* ============================================================
   ANDOMIR — marketing site layer
   Page-level composition only. Every colour, size, spacing and
   duration comes from brand/tokens.css via brand/brand.css —
   if you find yourself typing a hex value in this file, it
   belongs in the token layer instead.
   ============================================================ */

/* ── Nav ──────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--an-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--an-border);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--an-space-5);
  padding-block: var(--an-space-4);
}
/* 360px. The handoff's 160px floor is a legibility minimum, not a target —
   and with a 50-character tagline the lockup needs real width before the
   second line resolves at a glance. The nav row grows to match. */
.site-nav__brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.site-nav__logo { display: block; width: 360px; flex: 0 0 auto; max-width: none; }
/* The compact mark+wordmark takes over below 640px, where the full lockup's
   50-character tagline is unreadable and the bar has no room for it. */
.site-nav__compact { display: none; align-items: center; gap: var(--an-space-3); }
.site-nav__compact img { width: 40px; height: 40px; flex: 0 0 auto; }
.site-nav__word { font-family: var(--an-font-display); font-weight: 600; font-size: 19px; letter-spacing: 3px; color: var(--an-wool); }
.site-nav__links { display: flex; align-items: center; gap: var(--an-space-6); list-style: none; margin: 0; padding: 0; }
.site-nav__links > li { white-space: nowrap; } /* a wrapped nav item reads as a layout bug */
.site-nav__cta { flex: 0 0 auto; }

/* Language toggle — two hairline buttons sharing one border, so it reads as
   one control rather than two loose links. */
.lang { display: flex; flex: 0 0 auto; border: var(--an-border); }
.site-nav__langli, .site-nav__ctali { display: none; } /* mobile-only duplicates, shown at <=640 */
.lang__btn {
  padding: 12px 14px;
  min-height: 44px; /* brand minimum — was 36px */
  background: none;
  border: 0;
  color: var(--an-wool-dim);
  font-family: var(--an-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color var(--an-dur-fast) var(--an-ease), background var(--an-dur-fast) var(--an-ease);
}
.lang__btn + .lang__btn { border-left: var(--an-border); }
.lang__btn:hover { color: var(--an-wool); }
.lang__btn.is-active { background: var(--an-ochre); color: var(--an-ink); }
.site-nav__burger {
  display: none;
  background: none;
  border: var(--an-border);
  color: var(--an-wool);
  padding: 10px;
  cursor: pointer;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: var(--an-space-9); border-bottom: var(--an-border); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--an-space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__text { display: flex; flex-direction: column; gap: var(--an-space-5); align-items: flex-start; }
.hero__h1 { max-width: 16ch; }
.hero__lede { font-size: 19px; line-height: 1.6; color: var(--an-wool-dim); max-width: 54ch; }
/* The positioning line: the page's answer to "another automation tool?" */
.hero__stance {
  font-family: var(--an-font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--an-wool);
  border-left: 2px solid var(--an-ochre);
  padding-left: var(--an-space-4);
  max-width: 48ch;
}
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--an-space-2) var(--an-space-5); list-style: none; margin: 0; padding: 0; }
.hero__badge { display: flex; align-items: center; gap: var(--an-space-2); font-size: var(--an-text-small); color: var(--an-wool-dim); }
.hero__badge::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--an-ochre);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--an-space-4); }
.hero__micro { font-size: var(--an-text-small); color: var(--an-wool-dim); max-width: 52ch; }

/* WhatsApp demo — the one piece of the old site worth keeping. */
.phone {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  background: var(--an-ink-raised);
  border: var(--an-border);
  padding: var(--an-space-3);
}
.phone__top { display: flex; align-items: center; gap: var(--an-space-3); padding-bottom: var(--an-space-3); border-bottom: var(--an-border); }
.phone__avatar { width: 36px; height: 36px; display: grid; place-items: center; background: var(--an-clay); color: var(--an-wool); flex: 0 0 auto; }
.phone__avatar svg { width: 20px; height: 20px; }
.phone__name { font-family: var(--an-font-display); font-weight: 600; font-size: 15px; }
.phone__status { font-family: var(--an-font-mono); font-size: 11px; color: var(--an-clay-300); letter-spacing: 0.5px; }
.phone__body { display: flex; flex-direction: column; gap: var(--an-space-2); padding-top: var(--an-space-3); min-height: 340px; }
.bubble {
  max-width: 84%;
  padding: 10px 14px;
  font-size: var(--an-text-small);
  line-height: 1.45;
  animation: bubble-in var(--an-dur) var(--an-ease) both;
}
.bubble--in  { align-self: flex-start; background: var(--an-ink); border: var(--an-border); color: var(--an-wool); }
.bubble--out { align-self: flex-end; background: var(--an-ochre); color: var(--an-ink); }
.bubble b { font-weight: 600; }
.bubble--typing { display: flex; gap: 4px; align-self: flex-start; background: var(--an-ink); border: var(--an-border); padding: 12px 14px; }
.bubble--typing span { width: 5px; height: 5px; background: var(--an-wool-dim); animation: typing 1s var(--an-ease) infinite; }
.bubble--typing span:nth-child(2) { animation-delay: .15s; }
.bubble--typing span:nth-child(3) { animation-delay: .3s; }
.quick { display: flex; flex-wrap: wrap; gap: var(--an-space-2); align-self: flex-end; }
.quick span {
  font-family: var(--an-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border: 1px solid var(--an-ochre);
  color: var(--an-ochre);
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ── Modules ──────────────────────────────────────────────── */
/* Alternating rows: copy on one side, a live demo window on the other.
   Row 2, 4 flip so the eye zig-zags down the section instead of running
   in a single column. */
.modules { display: flex; flex-direction: column; }
.module-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--an-space-8);
  align-items: center;
  padding-block: var(--an-space-8);
  border-bottom: var(--an-border);
}
.module-row:first-child { border-top: var(--an-border); }
.module-row:nth-child(even) .module__body { order: 2; }
.module__body { display: flex; flex-direction: column; gap: var(--an-space-4); align-items: flex-start; }
.module__head { display: flex; align-items: center; gap: var(--an-space-3); }
.module__num { font-family: var(--an-font-mono); font-size: var(--an-text-label); letter-spacing: 2px; color: var(--an-ochre); }
.module__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--an-space-3); }
.module__list li { position: relative; padding-left: var(--an-space-5); font-size: var(--an-text-small); line-height: 1.55; color: var(--an-wool-dim); }
.module__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border: 1px solid var(--an-clay);
  transform: rotate(45deg);
}
.module__list li b { color: var(--an-wool); font-weight: 500; }
.module__note { font-size: var(--an-text-small); color: var(--an-wool-dim); border-top: var(--an-border); padding-top: var(--an-space-4); }

/* Homepage summary cards — the full alternating rows with demos live on
   platforma.html; here each module is a card that links through. */
.module-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--an-space-5); align-items: start; }
.module-card .an-btn--ghost { margin-top: auto; align-self: flex-start; }

/* ── Demo windows ─────────────────────────────────────────── */
/* Scripted, looping mockups of the real product. Fake data, no backend.
   The brand has one background colour, so a demo reads as a "window" by
   being raised (--an-ink-raised) inside a hairline frame, not by inverting. */
.demo { display: flex; flex-direction: column; gap: var(--an-space-2); }
.demo-win { border: var(--an-border); background: var(--an-ink-raised); overflow: hidden; }
.demo-bar {
  display: flex;
  align-items: center;
  gap: var(--an-space-2);
  padding: 10px var(--an-space-4);
  border-bottom: var(--an-border);
  background: color-mix(in srgb, var(--an-ink) 55%, var(--an-ink-raised));
}
/* Window dots are diamonds — the brand allows a circle only for avatars
   and true status indicators, and these are neither. */
.demo-bar i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--an-line); flex: 0 0 auto; }
.demo-bar i:first-child { background: var(--an-clay); }
.demo-title { font-family: var(--an-font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--an-wool-dim); margin-left: var(--an-space-2); }
.demo-body { padding: var(--an-space-4); min-height: 268px; }
.demo-note { font-family: var(--an-font-mono); font-size: 11px; color: var(--an-wool-dim); align-self: flex-end; }

/* — CRM kanban — */
.kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--an-space-3); }
.kb__col { display: flex; flex-direction: column; gap: var(--an-space-2); min-width: 0; }
.kb__head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--an-wool); }
.kb__head i { width: 6px; height: 6px; transform: rotate(45deg); flex: 0 0 auto; }
.kb__count { margin-left: auto; font-family: var(--an-font-mono); font-size: 11px; color: var(--an-wool-dim); }
.kb__total { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-ochre); }
.kb__cards { display: flex; flex-direction: column; gap: var(--an-space-2); }
.kb__card {
  border: var(--an-border);
  background: var(--an-ink);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: transform var(--an-dur-slow) var(--an-ease), opacity var(--an-dur) var(--an-ease);
}
.kb__card.is-moving { opacity: 0; transform: translateX(24px); }
.kb__card.is-landing { animation: kb-land var(--an-dur-slow) var(--an-ease) both; }
.kb__title { font-size: 12px; color: var(--an-wool); font-weight: 500; line-height: 1.3; }
.kb__contact { font-size: 11px; color: var(--an-wool-dim); }
.kb__val { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-ochre); }
@keyframes kb-land { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* — ERP invoices — */
.inv { display: flex; flex-direction: column; }
.inv__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto auto; gap: var(--an-space-3); align-items: center; padding-block: 11px; border-bottom: var(--an-border); font-size: 12px; }
.inv__row:last-child { border-bottom: 0; }
.inv__row--head { color: var(--an-wool-dim); font-family: var(--an-font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.inv__row.is-new { animation: inv-in var(--an-dur-slow) var(--an-ease) both; }
.inv__nr { font-family: var(--an-font-mono); color: var(--an-wool); }
.inv__client { color: var(--an-wool-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv__sum { font-family: var(--an-font-mono); color: var(--an-wool); }
.inv__badge { font-family: var(--an-font-mono); font-size: 10px; letter-spacing: 1px; padding: 3px 7px; border: 1px solid var(--an-line); color: var(--an-wool-dim); }
.inv__state { display: flex; align-items: center; gap: 6px; font-size: 11px; justify-self: end; min-width: 74px; }
.inv__state i { width: 6px; height: 6px; border-radius: var(--an-radius-full); flex: 0 0 auto; } /* a true status dot — round is allowed */
.inv__state--open { color: var(--an-clay-300); }
.inv__state--open i { background: var(--an-clay-300); }
.inv__state--paid { color: var(--an-success); }
.inv__state--paid i { background: var(--an-success); }
.inv__state.is-flipping { animation: flip-state var(--an-dur-slow) var(--an-ease) both; }
@keyframes inv-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes flip-state { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* — Site editor — */
.ed { display: grid; grid-template-columns: 132px 1fr; gap: var(--an-space-3); }
.ed__list { display: flex; flex-direction: column; gap: 6px; }
.ed__label { font-family: var(--an-font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--an-wool-dim); margin-bottom: 2px; }
.ed__item { display: flex; align-items: center; gap: 7px; border: var(--an-border); background: var(--an-ink); padding: 7px 9px; font-size: 11px; color: var(--an-wool); }
.ed__item i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--an-wool-dim); flex: 0 0 auto; }
.ed__item.is-new { animation: kb-land var(--an-dur-slow) var(--an-ease) both; }
.ed__add { border: 1px dashed var(--an-line); color: var(--an-ochre); background: none; padding: 7px 9px; font-family: var(--an-font-mono); font-size: 11px; text-align: left; transition: border-color var(--an-dur-fast) var(--an-ease); }
.ed__add.is-active { border-color: var(--an-ochre); }
.ed__preview { border: var(--an-border); background: var(--an-ink); padding: var(--an-space-3); display: flex; flex-direction: column; gap: 7px; }
.ed__block { height: 26px; background: color-mix(in srgb, var(--an-wool) 8%, transparent); border-left: 2px solid var(--an-line); display: flex; align-items: center; padding-left: 8px; font-size: 10px; color: var(--an-wool-dim); }
.ed__block--hero { height: 46px; border-left-color: var(--an-ochre); }
.ed__block.is-new { animation: kb-land var(--an-dur-slow) var(--an-ease) both; border-left-color: var(--an-ochre); }

/* — Automation flow — */
.flow { display: flex; flex-direction: column; align-items: center; gap: 0; padding-block: var(--an-space-3); }
.flow__node {
  width: 100%;
  max-width: 260px;
  border: var(--an-border);
  background: var(--an-ink);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: var(--an-space-3);
  font-size: 12px;
  color: var(--an-wool-dim);
  transition: border-color var(--an-dur) var(--an-ease), color var(--an-dur) var(--an-ease);
}
.flow__node svg { width: 18px; height: 18px; flex: 0 0 auto; }
.flow__node.is-active { border-color: var(--an-ochre); color: var(--an-wool); }
.flow__link { width: 1px; height: 26px; background: var(--an-line); position: relative; overflow: hidden; }
.flow__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 10px;
  background: var(--an-ochre);
  transform: translateY(-14px);
  opacity: 0;
}
.flow__link.is-pulsing::after { animation: pulse-down var(--an-dur-slow) var(--an-ease) both; }
@keyframes pulse-down { 0% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(28px); } }
.flow__toast {
  margin-top: var(--an-space-4);
  background: var(--an-ochre);
  color: var(--an-ink);
  font-weight: 600;
  font-size: 12px;
  padding: 7px 14px;
  opacity: 0;
  transition: opacity var(--an-dur) var(--an-ease);
}
.flow__toast.is-visible { opacity: 1; }

/* — Social composer — */
.soc { display: flex; flex-direction: column; gap: var(--an-space-3); }
.soc__box { border: var(--an-border); background: var(--an-ink); padding: var(--an-space-3); font-size: 12px; color: var(--an-wool); line-height: 1.5; min-height: 74px; }
.soc__caret { display: inline-block; width: 7px; height: 13px; background: var(--an-ochre); vertical-align: -2px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.soc__targets { display: flex; gap: var(--an-space-2); }
.soc__chip { display: flex; align-items: center; gap: 7px; border: var(--an-border); padding: 7px 11px; font-size: 11px; color: var(--an-wool-dim); transition: border-color var(--an-dur) var(--an-ease), color var(--an-dur) var(--an-ease); }
.soc__chip i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--an-line); transition: background var(--an-dur) var(--an-ease); }
.soc__chip.is-on { border-color: var(--an-ochre); color: var(--an-wool); }
.soc__chip.is-on i { background: var(--an-ochre); }
.soc__when { display: flex; align-items: center; justify-content: space-between; gap: var(--an-space-3); border-top: var(--an-border); padding-top: var(--an-space-3); font-family: var(--an-font-mono); font-size: 11px; color: var(--an-wool-dim); }
.soc__go { background: var(--an-ochre); color: var(--an-ink); font-weight: 600; padding: 7px 13px; font-size: 11px; opacity: .45; transition: opacity var(--an-dur) var(--an-ease); }
.soc__go.is-on { opacity: 1; }

/* Secondary capability row */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--an-space-5); margin-top: var(--an-space-7); padding-top: var(--an-space-7); border-top: var(--an-border); }
.extra { display: flex; flex-direction: column; gap: var(--an-space-2); }
.extra__name { display: flex; align-items: center; gap: var(--an-space-2); font-family: var(--an-font-display); font-weight: 600; font-size: 17px; }
.extra__name svg { width: 20px; height: 20px; color: var(--an-ochre); }

/* ── Replaces table ───────────────────────────────────────── */
.replaces { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 var(--an-space-5); align-items: stretch; }
.replaces__head { font-family: var(--an-font-mono); font-size: var(--an-text-label); letter-spacing: 2px; text-transform: uppercase; padding-bottom: var(--an-space-3); border-bottom: var(--an-border); }
.replaces__head--before { color: var(--an-wool-dim); }
.replaces__head--after { color: var(--an-ochre); }
.replaces__row { display: contents; }
.replaces__before, .replaces__after { padding-block: var(--an-space-4); border-bottom: var(--an-border); font-size: var(--an-text-small); line-height: 1.5; }
/* The left column reads cluttered, the right calm — the visual does half the argument. */
.replaces__before { color: var(--an-wool-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--an-clay) 70%, transparent); text-decoration-thickness: 1px; }
.replaces__after { color: var(--an-wool); }
.replaces__arrow { display: grid; place-items: center; border-bottom: var(--an-border); color: var(--an-ochre); font-size: 14px; }
.replaces__close { margin-top: var(--an-space-7); max-width: 68ch; font-size: 19px; line-height: 1.6; color: var(--an-wool); border-left: 2px solid var(--an-ochre); padding-left: var(--an-space-5); }

/* ── Why us ───────────────────────────────────────────────── */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--an-space-5); }
.why__num { font-family: var(--an-font-mono); font-size: var(--an-text-label); letter-spacing: 2px; color: var(--an-clay-300); }

/* ── Domains (class names stay .sector — internal only) ───── */
.sectors { display: flex; flex-direction: column; }
.sector { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--an-space-6); padding-block: var(--an-space-6); border-bottom: var(--an-border); }
.sector:first-child { border-top: var(--an-border); }
.sector__title { display: flex; flex-direction: column; gap: var(--an-space-2); }
.sector__pain { font-size: var(--an-text-small); color: var(--an-wool-dim); }
/* Deep-links into the matching pricing tab (pricing.html?sector=…). The
   fifth sector, Ateliere, has no subscription tier of its own, so it
   deliberately has no link here. */
.sector__link { align-self: flex-start; font-size: var(--an-text-small); margin-top: var(--an-space-1); }

/* ── Process ──────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; border-top: var(--an-border); }
.step { display: grid; grid-template-columns: 140px 1fr; gap: var(--an-space-5); padding-block: var(--an-space-5); border-bottom: var(--an-border); align-items: baseline; }
.step__when { font-family: var(--an-font-mono); font-size: var(--an-text-label); letter-spacing: 2px; text-transform: uppercase; color: var(--an-ochre); }
.step__what { font-size: var(--an-text-body); color: var(--an-wool); }
.guarantee { display: flex; gap: var(--an-space-4); align-items: flex-start; margin-top: var(--an-space-7); padding: var(--an-space-5); border: var(--an-border-strong); }
.guarantee svg { width: 28px; height: 28px; color: var(--an-ochre); flex: 0 0 auto; }

/* ── Pricing ──────────────────────────────────────────────── */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--an-space-5); }

.hero--short { padding-block: var(--an-space-8) var(--an-space-7); }

/* Sector tabs */
.ptabs { display: flex; flex-wrap: wrap; gap: var(--an-space-2); margin-bottom: var(--an-space-6); }
.ptab {
  padding: 10px 18px;
  background: none;
  border: var(--an-border);
  border-radius: var(--an-radius-0);
  color: var(--an-wool-dim);
  font-family: var(--an-font-body);
  font-size: var(--an-text-small);
  cursor: pointer;
  transition: border-color var(--an-dur-fast) var(--an-ease), color var(--an-dur-fast) var(--an-ease);
}
.ptab:hover { color: var(--an-wool); border-color: var(--an-wool-dim); }
.ptab.is-active { border-color: var(--an-ochre); color: var(--an-ochre); }

/* Tier cards */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--an-space-5); align-items: start; }
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--an-space-3);
  padding: var(--an-space-6) var(--an-space-5) var(--an-space-5);
  background: var(--an-ink-raised);
  border: var(--an-border);
  transition: border-color var(--an-dur) var(--an-ease);
}
.tier:hover { border-color: color-mix(in srgb, var(--an-ochre) 60%, transparent); }
/* The recommended tier is marked with a border, not a lift or a shadow —
   the brand is flat and one background colour deep. */
.tier--featured { border: var(--an-border-strong); }
.tier__flag {
  position: absolute;
  top: 0; left: var(--an-space-5);
  transform: translateY(-50%);
  background: var(--an-ochre);
  color: var(--an-ink);
  font-family: var(--an-font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
}
.tier__sub { font-size: var(--an-text-small); color: var(--an-wool-dim); }
.tier__price { font-family: var(--an-font-display); font-size: 34px; font-weight: 600; letter-spacing: -1px; color: var(--an-wool); line-height: 1.1; }
.tier__price span { font-family: var(--an-font-body); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--an-wool-dim); }
.tier__price--quote { font-size: 24px; color: var(--an-ochre); letter-spacing: -0.5px; }
.tier__setup { font-family: var(--an-font-mono); font-size: 11px; color: var(--an-wool-dim); }
.tier__best { font-size: var(--an-text-small); color: var(--an-wool); border-top: var(--an-border); padding-top: var(--an-space-3); }
.tier .an-btn { margin-top: auto; align-self: stretch; }

/* ── About ────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--an-space-8); }
.about__copy { display: flex; flex-direction: column; gap: var(--an-space-4); }
.founders { display: flex; flex-direction: column; gap: var(--an-space-5); }
.founder { display: grid; grid-template-columns: 96px 1fr; gap: var(--an-space-5); }
.founder img { width: 96px; height: 96px; object-fit: cover; border: var(--an-border); }
.founder__role { font-family: var(--an-font-mono); font-size: var(--an-text-label); letter-spacing: 2px; text-transform: uppercase; color: var(--an-clay-300); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { border-top: var(--an-border); }
.faq__item { border-bottom: var(--an-border); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--an-space-5);
  padding: var(--an-space-5) 0;
  background: none;
  border: 0;
  color: var(--an-wool);
  font-family: var(--an-font-display);
  font-size: var(--an-text-h3);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--an-dur-fast) var(--an-ease);
}
.faq__q:hover { color: var(--an-ochre); }
.faq__sign { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid var(--an-ochre); transform: rotate(45deg); transition: background var(--an-dur) var(--an-ease); }
.faq__q[aria-expanded='true'] .faq__sign { background: var(--an-ochre); }
.faq__a { display: none; padding-bottom: var(--an-space-5); max-width: 76ch; color: var(--an-wool-dim); }
.faq__q[aria-expanded='true'] + .faq__a { display: block; }

/* ── Final CTA ────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--an-space-8); align-items: start; position: relative; z-index: 1; }
.cta__form { display: flex; flex-direction: column; gap: var(--an-space-4); }
.cta__ok { display: none; flex-direction: column; gap: var(--an-space-3); padding: var(--an-space-5); border: var(--an-border-strong); }
.cta__ok.is-visible { display: flex; }

/* ── Legal pages ──────────────────────────────────────────── */
/* Long-form reading: a single measured column, generous rhythm between
   clauses, and numbered headings that stay scannable. */
.legal { display: block; padding-block: var(--an-space-8) var(--an-space-9); }
.legal .an-container { max-width: 80ch; }
.legal__head { display: flex; flex-direction: column; gap: var(--an-space-3); align-items: flex-start; margin-bottom: var(--an-space-8); }
.legal__note { font-size: var(--an-text-small); line-height: 1.6; color: var(--an-wool-dim); border-left: 2px solid var(--an-clay); padding: var(--an-space-3) 0 var(--an-space-3) var(--an-space-4); margin-top: var(--an-space-3); }
.legal__note strong { color: var(--an-clay-300); }
.legal .an-h2 { margin-top: var(--an-space-7); margin-bottom: var(--an-space-4); padding-top: var(--an-space-5); border-top: var(--an-border); }
.legal .an-h1 + .an-h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal .an-body { margin-bottom: var(--an-space-4); color: var(--an-wool-dim); }
.legal ul, .legal ol { margin: 0 0 var(--an-space-4); padding-left: var(--an-space-5); color: var(--an-wool-dim); }
.legal li { margin-bottom: var(--an-space-2); line-height: 1.6; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal strong, .legal b { color: var(--an-wool); font-weight: 500; }

/* ── Footer ───────────────────────────────────────────────── */
.footer { border-top: var(--an-border); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--an-space-6); padding-block: var(--an-space-7); }
/* Footer links stack vertically, so the pseudo-element trick used in the nav
   would make neighbouring targets overlap. Real padding instead: the gap moves
   into the links themselves, so each is 44px tall and the visual rhythm holds. */
.footer__links { display: flex; flex-direction: column; gap: 0; }
.footer__links a { color: var(--an-wool-dim); font-size: var(--an-text-small); padding-block: 10px; }
.footer__links a:hover { color: var(--an-ochre); }
.footer h3 { font-family: var(--an-font-mono); font-size: var(--an-text-label); letter-spacing: 2px; text-transform: uppercase; color: var(--an-wool); margin: 0 0 var(--an-space-3); font-weight: 500; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--an-space-4); justify-content: space-between; padding-block: var(--an-space-4); border-top: var(--an-border); font-size: var(--an-text-small); color: var(--an-wool-dim); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1400px) {
  /* The lockup wins the space fight before the links do. */
  .site-nav__links { gap: var(--an-space-4); font-size: 14px; }
  .site-nav__logo { width: 300px; }
}

@media (max-width: 900px) {
  .hero__grid, .about, .cta__grid { grid-template-columns: 1fr; }
  /* Demos drop below their copy, and the alternating flip is switched off —
     zig-zag only reads as rhythm when the columns are side by side. */
  .module-row { grid-template-columns: 1fr; gap: var(--an-space-6); padding-block: var(--an-space-7); }
  .module-row:nth-child(even) .module__body { order: 0; }
  .kb { grid-template-columns: repeat(3, 1fr); gap: var(--an-space-2); }
  .demo-body { min-height: 0; }
  .hero { padding-block: var(--an-space-8); }
  .sector { grid-template-columns: 1fr; gap: var(--an-space-4); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .site-nav__links { display: none; }
  .site-nav__burger { display: block; }
  .site-nav__links.is-open {
    display: flex;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--an-space-4);
    padding: var(--an-space-5);
    background: var(--an-ink);
    border-bottom: var(--an-border);
  }
}

@media (max-width: 640px) {
  /* Blocker fix: on a 375px screen the hero runs 1,580px and the CTA landed at
     864px — below the fold. Reorder so the ask sits directly under the headline;
     the lede, stance line and badges follow it. DOM order is unchanged, so the
     reading order for assistive tech still matches the desktop argument. */
  .hero__text > .an-eyebrow { order: 1; }
  .hero__h1                 { order: 2; }
  .hero__cta                { order: 3; }
  .hero__micro              { order: 4; }
  .hero__lede               { order: 5; }
  .hero__stance             { order: 6; }
  .hero__badges             { order: 7; }
  .hero__cta { width: 100%; }
  .hero__cta .an-btn--primary, .hero__cta .an-btn--secondary { flex: 1 1 100%; }

  /* At 375px the full-size CTA crowds the logo out of the bar, so it drops
     to a compact label. The brand's 44px minimum hit target still holds. */
  .site-nav__cta { padding: 12px 16px; font-size: var(--an-text-small); }
  .site-nav__logo { display: none; }
  .site-nav__compact { display: flex; }
  /* The bar can hold the brand, the menu button and nothing else at 375px.
     The CTA moves into the opened menu — losing nothing, because the hero
     CTA is now above the fold on mobile. */
  .site-nav__cta { display: none; }
  .site-nav__links.is-open .site-nav__cta { display: inline-flex; width: 100%; }
  /* The bar keeps brand + CTA + menu button; the language toggle moves into
     the opened menu, where there is room for it. */
  .site-nav__inner > .lang { display: none; }
  .site-nav__langli, .site-nav__ctali { display: block; }
  .site-nav__ctali .an-btn { width: 100%; }
  .site-nav__inner { gap: var(--an-space-3); }

  .replaces { grid-template-columns: 1fr; gap: 0; }
  .replaces__head, .replaces__arrow { display: none; }
  .replaces__before { border-bottom: 0; padding-bottom: var(--an-space-1); }
  .replaces__after { padding-top: var(--an-space-1); }
  .replaces__after::before { content: '↳ '; color: var(--an-ochre); }
  .step { grid-template-columns: 1fr; gap: var(--an-space-2); }
  .founder { grid-template-columns: 72px 1fr; gap: var(--an-space-4); }
  .founder img { width: 72px; height: 72px; }
  .footer__grid { grid-template-columns: 1fr; }
}