/* ============================================================================
   ArmorEdge — armoredge.net landing
   Tokens mirrored from the design system (perfecto/tokens/*). Dark base only.
   No gradients, no glassmorphism, no drop shadows except one overlay.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* surfaces */
  --ae-bg:            #0D0D0D;
  --ae-surface:       #141414;
  --ae-elevated:      #1C1C1C;
  --ae-border:        #2A2A2A;
  --ae-border-strong: #3D3D3D;

  /* accent — Arsenal Red */
  --ae-accent:      #C8102E;
  --ae-accent-dim:  #8B0B1F;
  --ae-accent-glow: rgba(200, 16, 46, 0.20);

  /* text */
  --ae-text:       #F0F0F0;
  --ae-text-2:     #A0A0A0;
  --ae-text-muted: #7C7C7C;

  /* semantic data */
  --ae-success: #2D8A4E;
  --ae-warning: #B8860B;
  --ae-data:    #2B7FBE;

  /* type */
  --ae-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ae-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ae-ls-tight: -0.02em;
  --ae-ls-label: 0.10em;
  --ae-ls-wide:  0.14em;

  /* shape */
  --ae-r-sm: 3px;
  --ae-r-md: 4px;
  --ae-r-lg: 6px;
  --ae-shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* motion */
  --ae-dur-fast: 120ms;
  --ae-dur:      150ms;
  --ae-dur-slow: 280ms;
  --ae-ease:        cubic-bezier(0.2, 0, 0.2, 1);
  --ae-ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* layout */
  --wrap: 1200px;
  --gutter: 40px;
}

/* ---- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--ae-bg); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ae-font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ae-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ae-accent); outline-offset: 2px; }
::selection { background: var(--ae-accent); color: var(--ae-text); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.rule { height: 1px; background: var(--ae-border); }
.num { font-family: var(--ae-font-mono); font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ae-accent); color: var(--ae-text);
  padding: 10px 16px; font-family: var(--ae-font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label);
}
.skip:focus { left: 0; }
/* The header is sticky (~73px tall, 70px on a phone), so anything scrolled to
   by its id has to clear it or the heading lands behind the nav. */
[id] { scroll-margin-top: 84px; }

/* ---- shared type --------------------------------------------------------- */
.kicker {
  font-family: var(--ae-font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ae-ls-wide);
  color: var(--ae-accent);
}
.h2 {
  font-family: var(--ae-font-mono); font-size: 32px; font-weight: 700;
  letter-spacing: var(--ae-ls-tight); line-height: 1.15;
  color: var(--ae-text); margin-top: 12px; max-width: 24ch; text-wrap: balance;
}
.lede { font-size: 16px; color: var(--ae-text-2); margin-top: 14px; max-width: 58ch; }
.section-head { margin-bottom: 40px; }
.section-head--flush { margin-bottom: 0; }
section { padding: 72px 0; }

/* ---- badge --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ae-font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label);
  padding: 4px 9px; border-radius: var(--ae-r-sm);
  border: 1px solid var(--ae-border-strong); color: var(--ae-text-2);
  background: var(--ae-surface); white-space: nowrap;
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge--accent  { color: var(--ae-accent);  border-color: var(--ae-accent-dim); }
.badge--success { color: var(--ae-success); border-color: #1F5E36; }
.badge--warning { color: var(--ae-warning); border-color: #6E520A; }
.badge--plain::before { display: none; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ae-font-mono); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 11px 18px; border-radius: var(--ae-r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--ae-dur) var(--ae-ease),
              border-color var(--ae-dur) var(--ae-ease),
              color var(--ae-dur) var(--ae-ease),
              transform var(--ae-dur-fast) var(--ae-ease);
}
.btn:active { transform: scale(0.99); }
.btn--primary { background: var(--ae-accent); color: #FFFFFF; border-color: var(--ae-accent); }
.btn--primary:hover { background: var(--ae-accent-dim); border-color: var(--ae-accent-dim); }
.btn--secondary { background: transparent; color: var(--ae-text); border-color: var(--ae-border-strong); }
.btn--secondary:hover { background: var(--ae-elevated); border-color: var(--ae-accent); }
.btn--ghost { background: transparent; color: var(--ae-text-2); }
.btn--ghost:hover { color: var(--ae-text); background: var(--ae-elevated); }
.btn--lg { padding: 14px 24px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---- anchors / wayfinding -------------------------------------------------
   The page has exactly two destinations — the form and the plans — so the end
   of every long section offers both. Quiet on purpose: a hairline rule, an
   outlined button and a text link. The red accent stays on the nav, the hero
   and the final CTA; a red button repeated six times would stop meaning
   anything.                                                                   */
.section-cta {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--ae-border);
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 14px 24px;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ae-font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ae-text-muted);
  transition: color var(--ae-dur) var(--ae-ease);
}
.link-arrow:hover { color: var(--ae-text); }
.link-arrow svg { color: var(--ae-accent); flex: none; }

/* ---- mobile CTA bar -------------------------------------------------------
   Sticky rather than fixed: it rides the bottom of the viewport through the
   page and then parks itself above the footer instead of covering it. JS hides
   it while the form or the final CTA is on screen; with JS blocked it just
   stays visible, which is the safe failure.                                   */
.mcta { display: none; }

/* ---- nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--ae-bg); border-bottom: 1px solid var(--ae-border);
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__word {
  font-family: var(--ae-font-mono); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; color: var(--ae-text);
}
.brand__word i { color: var(--ae-accent); font-style: normal; }
.brand--sm .brand__word { font-size: 15px; }
.nav__links { display: flex; gap: 28px; }
.nav__link {
  font-family: var(--ae-font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ae-text-2);
  transition: color var(--ae-dur) var(--ae-ease);
}
.nav__link:hover { color: var(--ae-text); }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--ae-border); border-radius: var(--ae-r-sm);
  padding: 8px 10px; cursor: pointer;
  font-family: var(--ae-font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-text-2);
  transition: border-color var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { color: var(--ae-text); border-color: var(--ae-border-strong); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 300;
  min-width: 168px; background: var(--ae-elevated);
  border: 1px solid var(--ae-border-strong); border-radius: var(--ae-r-md);
  box-shadow: var(--ae-shadow-overlay); padding: 4px; display: none;
}
.lang__menu[data-open="true"] { display: block; }
.lang__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-left: 2px solid transparent; border-radius: var(--ae-r-sm);
  font-size: 13px; color: var(--ae-text-2);
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.lang__item:hover { background: var(--ae-surface); color: var(--ae-text); }
.lang__item[aria-current="true"] { border-left-color: var(--ae-accent); color: var(--ae-text); }
.lang__code {
  font-family: var(--ae-font-mono); font-size: 11px; letter-spacing: var(--ae-ls-label);
  color: var(--ae-text-muted); margin-inline-start: auto;
}

/* ---- ticker -------------------------------------------------------------- */
.ticker {
  overflow: hidden; border-bottom: 1px solid var(--ae-border);
  background: var(--ae-surface); padding: 9px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex; gap: 48px; white-space: nowrap; width: max-content;
  font-family: var(--ae-font-mono); font-size: 12px; color: var(--ae-text-2);
  letter-spacing: 0.04em; animation: ticker 44s linear infinite;
}
.ticker__track b { color: var(--ae-accent); font-weight: 600; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- hero ---------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 80px 0 64px; }
.hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.hero__right { min-width: 0; }
.hero h1 {
  font-family: var(--ae-font-mono); font-size: 48px; font-weight: 700;
  line-height: 1.04; letter-spacing: -0.03em; color: var(--ae-text);
  /* 18ch of monospace is the measure that keeps every locale off a one-word
     line ("from a", "из", "un"). balance evens the rag where it is supported;
     where it is not, the measure alone still does the structural work. */
  max-width: 18ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--ae-accent); }
.hero__sub { font-size: 18px; color: var(--ae-text-2); max-width: 46ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* one quiet meta block under the CTAs, ruled off like a console footer */
.hero__meta {
  align-self: stretch; display: grid; gap: 7px;
  padding-top: 16px; border-top: 1px solid var(--ae-border);
}
.hero__note {
  font-family: var(--ae-font-mono); font-size: 12px; color: var(--ae-text-2);
  letter-spacing: 0.03em;
}
.hero__sports {
  font-family: var(--ae-font-mono); font-size: 11px; color: var(--ae-text-muted);
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); line-height: 1.5;
}

/* console mockup */
.console {
  max-width: 100%;
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg);
  background: var(--ae-surface); overflow: hidden; box-shadow: var(--ae-shadow-overlay);
}
.console__bar {
  display: flex; align-items: center; gap: 9px; padding: 11px 16px;
  border-bottom: 1px solid var(--ae-border);
}
.console__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ae-accent); flex: none; }
.console__title {
  font-family: var(--ae-font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--ae-ls-label); color: var(--ae-text-2);
}
.console__sample {
  font-family: var(--ae-font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
  padding-inline-start: 9px; border-inline-start: 1px solid var(--ae-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.console__live {
  margin-inline-start: auto; font-family: var(--ae-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-success);
}
.console__kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--ae-border); border-bottom: 1px solid var(--ae-border);
}
.kpi { background: var(--ae-surface); padding: 14px 16px; border-left: 2px solid transparent; }
.kpi--active { border-left-color: var(--ae-accent); background: var(--ae-elevated); }
.kpi__label {
  font-family: var(--ae-font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
}
.kpi__val {
  font-family: var(--ae-font-mono); font-size: 24px; font-weight: 700;
  color: var(--ae-text); margin-top: 6px; letter-spacing: -0.02em;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: start; font-family: var(--ae-font-mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
  padding: 10px 16px; border-bottom: 1px solid var(--ae-border);
}
.tbl td {
  padding: 12px 16px; border-bottom: 1px solid var(--ae-border); color: var(--ae-text-2);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--ae-text); }
.tbl tr { border-left: 2px solid transparent; }
.tbl tr.is-active { border-left-color: var(--ae-accent); background: var(--ae-elevated); }
.tbl .cell-num { font-family: var(--ae-font-mono); }

/* ---- facts strip ---------------------------------------------------------
   The hero console's KPI row, scaled up: six bordered tiles, big mono value
   over an uppercase label. The value type steps down by string length (set in
   build.mjs) so RU/FR never reflow the row.                                   */
.facts { padding: 0 0 72px; }
.facts__kicker { display: block; margin-bottom: 14px; }
.facts__strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--ae-border);
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg); overflow: hidden;
}
.fact {
  background: var(--ae-surface); padding: 18px 16px;
  display: flex; flex-direction: column; min-width: 0;
}
.fact__v {
  font-family: var(--ae-font-mono); font-size: 26px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ae-text);
  font-variant-numeric: tabular-nums; text-wrap: balance;
}
.fact__v--md { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.fact__v--sm { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
.fact__l {
  margin-top: auto; padding-top: 12px;
  font-family: var(--ae-font-mono); font-size: 10px; line-height: 1.45;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
}

/* ---- bordered grid (problem / features) ---------------------------------- */
.grid {
  max-width: 100%;
  display: grid; gap: 1px; background: var(--ae-border);
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg); overflow: hidden;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.cell { background: var(--ae-surface); padding: 28px 24px; }
.cell__icon {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--ae-border-strong); border-radius: var(--ae-r-sm);
  color: var(--ae-accent); margin-bottom: 18px;
}
.cell__title {
  font-family: var(--ae-font-mono); font-size: 16px; font-weight: 600;
  color: var(--ae-text); margin-bottom: 10px; letter-spacing: -0.01em;
}
.cell__desc { font-size: 14px; color: var(--ae-text-2); }

/* ---- steps --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { border-top: 2px solid var(--ae-border); padding-top: 20px; }
.step:first-child { border-top-color: var(--ae-accent); }
.step__n {
  font-family: var(--ae-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
}
.step__title {
  font-family: var(--ae-font-mono); font-size: 20px; font-weight: 700;
  color: var(--ae-text); margin: 12px 0 10px; letter-spacing: var(--ae-ls-tight);
}
.step__desc { font-size: 14px; color: var(--ae-text-2); }

/* ---- platforms split ------------------------------------------------------
   Three releases as a spec list: mono name + who badges on the left rail, one
   line of what it is on the right. The red bar marks the first row and then
   follows the pointer, so only ever one row carries it.                       */
.split { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center; }
.split > * { min-width: 0; }
.plats { margin-top: 28px; border-bottom: 1px solid var(--ae-border); }
.plat {
  display: grid; grid-template-columns: 184px 1fr; gap: 20px;
  align-items: start; padding: 18px 16px 18px 18px;
  border-top: 1px solid var(--ae-border); border-left: 2px solid transparent;
  transition: background var(--ae-dur) var(--ae-ease), border-color var(--ae-dur) var(--ae-ease);
}
.plat--on { border-left-color: var(--ae-accent); background: var(--ae-surface); }
.plats:hover .plat--on, .plats:focus-within .plat--on {
  border-left-color: transparent; background: transparent;
}
.plat:hover, .plat:focus-within { border-left-color: var(--ae-accent); background: var(--ae-surface); }
.plat:focus { outline: none; }
.plat__name {
  font-family: var(--ae-font-mono); font-size: 18px; font-weight: 700;
  letter-spacing: var(--ae-ls-tight); color: var(--ae-text);
}
.plat__who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.plat__tag {
  font-family: var(--ae-font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
  background: var(--ae-bg); border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-sm); padding: 3px 6px; white-space: nowrap;
}
.plat__desc { font-size: 14px; color: var(--ae-text-2); padding-top: 2px; }
.plats__free {
  margin-top: 18px; font-family: var(--ae-font-mono); font-size: 12px;
  letter-spacing: 0.03em; color: var(--ae-text-2);
}
.checklist { margin-top: 24px; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ae-text-2); }
.checklist svg { color: var(--ae-success); flex: none; margin-top: 3px; }

.phone {
  border: 1px solid var(--ae-border-strong); border-radius: 18px; background: var(--ae-bg);
  padding: 10px; box-shadow: var(--ae-shadow-overlay); max-width: 320px; margin-inline: auto;
}
.phone__screen {
  border: 1px solid var(--ae-border); border-radius: 10px; background: var(--ae-surface); overflow: hidden;
}
.phone__bar {
  display: flex; justify-content: space-between; padding: 9px 14px;
  border-bottom: 1px solid var(--ae-border);
  font-family: var(--ae-font-mono); font-size: 9px; letter-spacing: var(--ae-ls-label);
  text-transform: uppercase; color: var(--ae-text-muted);
}
.phone__head { padding: 16px 14px; border-bottom: 1px solid var(--ae-border); }
.phone__ex {
  font-family: var(--ae-font-mono); font-size: 15px; font-weight: 700; color: var(--ae-text);
}
.phone__scheme {
  font-family: var(--ae-font-mono); font-size: 11px; letter-spacing: var(--ae-ls-label);
  color: var(--ae-text-muted); margin-top: 6px; text-transform: uppercase;
}
.set {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--ae-border);
  border-left: 2px solid transparent;
  font-family: var(--ae-font-mono); font-size: 13px; color: var(--ae-text-2);
}
.set--done { color: var(--ae-text-muted); }
.set--done .set__i { color: var(--ae-success); }
.set--active { border-left-color: var(--ae-accent); background: var(--ae-elevated); color: var(--ae-text); }
.set__i { font-size: 10px; letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted); }
.set__load { color: var(--ae-text); font-weight: 600; }
.set__tag { font-size: 10px; letter-spacing: var(--ae-ls-label); text-transform: uppercase; }
.phone__cta {
  margin: 14px; padding: 13px; text-align: center; border-radius: var(--ae-r-sm);
  background: var(--ae-accent); color: #FFF;
  font-family: var(--ae-font-mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---- access (pricing, no numbers) ---------------------------------------- */
/* spec sheet: head and footnote on the left rail, the two cards fill the wrap */
.access-grid {
  display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr;
  gap: 0 56px; align-items: start;
}
.access-head { grid-column: 1; grid-row: 1; }
.access-grid > .plans { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
.access-grid > .plans__foot {
  grid-column: 1; grid-row: 2; align-self: end; max-width: none;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ae-border);
}
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 840px; }
.plan {
  position: relative; overflow: hidden;
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg);
  background: var(--ae-surface); padding: 28px; display: flex; flex-direction: column;
}
.plan--featured { border-color: var(--ae-border-strong); }
.plan--featured::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ae-accent);
}
.plan__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 26px; margin-bottom: 16px;
}
.plan__name {
  font-family: var(--ae-font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ae-text-2);
}
.plan__price {
  font-family: var(--ae-font-mono); font-size: 34px; font-weight: 700;
  color: var(--ae-text); letter-spacing: var(--ae-ls-tight); line-height: 1.1;
  display: flex; align-items: flex-end; min-height: 38px;
}
/* a price that is a phrase, not a number, is set as a label so it holds one
   line in every locale — and keeps the baseline of the numeric card */
.plan__price--text { font-size: 20px; letter-spacing: 0; line-height: 1.2; }
.plan__desc { font-size: 13px; color: var(--ae-text-2); margin: 12px 0 20px; }
.plan__feats { display: grid; gap: 11px; margin-bottom: 24px; flex: 1; }
.plan__feats li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ae-text); }
.plan__feats svg { color: var(--ae-success); flex: none; margin-top: 3px; }
.plans__foot {
  font-family: var(--ae-font-mono); font-size: 12px; color: var(--ae-text-muted);
  letter-spacing: 0.03em; margin-top: 24px; max-width: 840px;
}
/* the two ways out of the plans column: the answers, or the form */
.plans__links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }

/* ---- waitlist ------------------------------------------------------------
   Two cells of one bordered module: the pitch on the surface, the controls on
   the elevated side. The panel swaps to a console status block on success.    */
.waitlist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ae-border);
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg); overflow: hidden;
}
.waitlist__head {
  background: var(--ae-surface); padding: 40px;
  display: flex; flex-direction: column; min-width: 0;
}
.waitlist__note {
  margin-top: auto; padding-top: 32px;
  font-family: var(--ae-font-mono); font-size: 11px; line-height: 1.7;
  letter-spacing: 0.03em; color: var(--ae-text-muted);
}
.waitlist__panel { background: var(--ae-elevated); padding: 40px; min-width: 0; }

.form { display: grid; gap: 22px; }
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.field { display: grid; gap: 8px; min-width: 0; }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label {
  font-family: var(--ae-font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--ae-ls-label); color: var(--ae-text-2);
}
.field__label--legend { display: block; float: none; padding: 0; margin-bottom: 8px; }

/* role — segmented radio group, red bar on the selected option */
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--ae-border-strong);
  border: 1px solid var(--ae-border-strong); border-radius: var(--ae-r-md); overflow: hidden;
}
.seg__opt { position: relative; display: flex; min-width: 0; }
.seg__in {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none;
}
.seg__label {
  flex: 1; display: flex; align-items: center; min-height: 48px;
  padding: 10px 12px; cursor: pointer;
  background: var(--ae-bg); color: var(--ae-text-2);
  border-left: 2px solid transparent;
  font-family: var(--ae-font-mono); font-size: 11px; font-weight: 500; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 0.07em;
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease),
              border-color var(--ae-dur) var(--ae-ease);
}
.seg__opt:hover .seg__label { background: var(--ae-elevated); color: var(--ae-text); }
.seg__in:checked + .seg__label {
  background: var(--ae-elevated); color: var(--ae-text); border-left-color: var(--ae-accent);
}
.seg__in:focus-visible + .seg__label { outline: 2px solid var(--ae-accent); outline-offset: -2px; }

.input, .select {
  width: 100%; background: var(--ae-bg); color: var(--ae-text);
  border: 1px solid var(--ae-border-strong); border-radius: var(--ae-r-md);
  padding: 0 13px; height: 48px; font-size: 14px;
  transition: border-color var(--ae-dur) var(--ae-ease), box-shadow var(--ae-dur) var(--ae-ease);
}
.input::placeholder { color: var(--ae-text-muted); }
.input:focus, .select:focus {
  outline: none; border-color: var(--ae-accent); box-shadow: 0 0 0 3px var(--ae-accent-glow);
}
.form__submit { height: 48px; padding-block: 0; padding-inline: 22px; font-size: 13px; }

/* honeypot — was an inline style, which the CSP blocks */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.form__msg {
  display: none; align-items: center; gap: 9px; padding: 12px 14px;
  border-radius: var(--ae-r-md); font-size: 13px; border: 1px solid transparent;
}
.form__msg[data-show="true"] { display: flex; }
.form__msg--err { color: var(--ae-warning); border-color: #6E520A; background: rgba(184,134,11,0.08); }

/* success state — replaces the form in place */
.done {
  border: 1px solid var(--ae-border-strong); border-left: 2px solid var(--ae-accent);
  border-radius: var(--ae-r-md); background: var(--ae-bg); padding: 22px 24px;
}
.done[hidden] { display: none; }
.done:focus { outline: none; }
.done__label {
  display: block; font-family: var(--ae-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
}
.done__value {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding-bottom: 16px; border-bottom: 1px solid var(--ae-border);
  font-family: var(--ae-font-mono); font-size: 18px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ae-success);
}
.done__value::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.done__text { margin-top: 16px; font-size: 14px; color: var(--ae-text-2); }

/* ---- faq -----------------------------------------------------------------
   Spec sheet: head parked on the left, numbered list on the right. The open
   item is an elevated row whose red bar spans question and answer together.   */
.faq-grid { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; gap: 0 56px; align-items: start; }
.faq-head { grid-column: 1; grid-row: 1; }
.faq-grid > .faq { grid-column: 2; grid-row: 1 / span 2; }
.faq__more {
  grid-column: 1; grid-row: 2; align-self: end;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ae-border);
}
.faq__more-l {
  display: block; font-family: var(--ae-font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--ae-ls-label); color: var(--ae-text-muted);
}
.faq__mail {
  display: inline-block; margin-top: 8px; font-family: var(--ae-font-mono);
  font-size: 13px; color: var(--ae-accent);
  transition: color var(--ae-dur) var(--ae-ease);
}
.faq__mail:hover { color: var(--ae-text); }
.faq {
  border: 1px solid var(--ae-border); border-radius: var(--ae-r-lg); overflow: hidden;
  min-width: 0;
}
.faq__item {
  background: var(--ae-surface); border-left: 2px solid transparent;
  border-bottom: 1px solid var(--ae-border);
  transition: background var(--ae-dur) var(--ae-ease), border-color var(--ae-dur) var(--ae-ease);
}
.faq__item:last-child { border-bottom: 0; }
.faq__item:hover { background: var(--ae-elevated); }
.faq__item[data-open="true"] { background: var(--ae-elevated); border-left-color: var(--ae-accent); }
.faq__h { margin: 0; }
.faq__q {
  width: 100%; display: grid; grid-template-columns: 40px 1fr 16px; gap: 14px;
  align-items: start; padding: 18px 22px;
  background: transparent; border: 0; cursor: pointer; text-align: start;
  font-family: var(--ae-font-mono); font-size: 15px; font-weight: 600; line-height: 1.4;
  letter-spacing: var(--ae-ls-tight); color: var(--ae-text-2);
  transition: color var(--ae-dur) var(--ae-ease);
}
.faq__item:hover .faq__q { color: var(--ae-text); }
.faq__item[data-open="true"] .faq__q { color: var(--ae-text); }
.faq__n {
  font-size: 12px; font-weight: 600; letter-spacing: var(--ae-ls-label);
  color: var(--ae-text-muted); padding-top: 3px;
  transition: color var(--ae-dur) var(--ae-ease);
}
.faq__item[data-open="true"] .faq__n { color: var(--ae-accent); }
.faq__t { min-width: 0; }
.faq__q svg {
  justify-self: end; margin-top: 4px; flex: none; color: var(--ae-text-muted);
  transition: transform var(--ae-dur) var(--ae-ease);
}
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--ae-accent); }
.faq__a {
  padding: 0 22px 20px 76px; font-size: 14px; line-height: 1.65;
  color: var(--ae-text-2); max-width: 74ch;
}
.faq__a[hidden] { display: none; }

/* ---- final cta ----------------------------------------------------------- */
.final { padding: 96px 0; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.final h2 {
  font-family: var(--ae-font-mono); font-size: 40px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--ae-text);
  max-width: 24ch; text-wrap: balance;
}
/* the second way out, under the red button, without competing with it */
.final .link-arrow { margin-top: -10px; }

/* ---- footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--ae-border); background: var(--ae-surface); padding: 56px 0 32px; }
.footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer__tag { font-size: 13px; color: var(--ae-text-muted); margin-top: 12px; max-width: 24ch; }
.footer__head {
  font-family: var(--ae-font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--ae-ls-label); color: var(--ae-text-2); margin-bottom: 16px;
}
.footer__list { display: grid; gap: 10px; }
.footer__link { font-size: 13px; color: var(--ae-text-muted); transition: color var(--ae-dur) var(--ae-ease); }
.footer__link:hover { color: var(--ae-text); }
.footer__bottom {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--ae-border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--ae-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ae-text-muted);
}
.footer__langs { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__langs a[aria-current="true"] { color: var(--ae-text); }
.footer__bottom--bare { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- privacy / terms document -------------------------------------------- */
.wrap--doc { max-width: 820px; }
.h2--doc { max-width: none; }
.doc__h {
  font-family: var(--ae-font-mono); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ae-text); margin-top: 32px; margin-bottom: 10px;
}
.doc__h--first { margin-top: 40px; }
.doc__p { font-size: 14px; color: var(--ae-text-2); }
.doc__link { color: var(--ae-accent); }
.doc__link:hover { text-decoration: underline; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 0; }
  .hero h1 { font-size: 44px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .nav__links { display: none; }
  .waitlist { grid-template-columns: 1fr; }
  .waitlist__note { margin-top: 28px; padding-top: 0; }
  .faq-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .faq-head { grid-column: auto; grid-row: auto; margin-bottom: 32px; }
  .faq-grid > .faq { grid-column: auto; grid-row: auto; }
  .faq__more { grid-column: auto; grid-row: auto; align-self: start; margin-top: 24px; }
  .facts__strip { grid-template-columns: repeat(3, 1fr); }
  .access-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .access-head { grid-column: auto; grid-row: auto; margin-bottom: 32px; }
  .access-grid > .plans { grid-column: auto; grid-row: auto; }
  .access-grid > .plans__foot {
    grid-column: auto; grid-row: auto; align-self: start;
    margin-top: 24px; padding-top: 0; border-top: 0;
  }
  .plat { grid-template-columns: 150px 1fr; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  section { padding: 56px 0; }
  .hero h1 { font-size: 34px; }
  .hero__sub { font-size: 16px; }
  .h2 { font-size: 26px; max-width: none; }
  .final h2 { font-size: 30px; }
  .grid--3, .grid--2, .steps, .plans { grid-template-columns: 1fr; }
  .steps { gap: 0; }
  .step { border-top-width: 1px; padding: 20px 0; }
  .step:first-child { border-top-width: 2px; }
  .waitlist__head, .waitlist__panel { padding: 24px; }
  .form__row { grid-template-columns: 1fr; }
  .form__submit { width: 100%; }
  .faq__q { grid-template-columns: 30px 1fr 16px; gap: 10px; padding: 16px 16px; font-size: 14px; }
  .faq__a { padding: 0 16px 18px 56px; }
  .console__kpis { grid-template-columns: 1fr; }
  .kpi { display: flex; align-items: baseline; justify-content: space-between; }
  .kpi__val { margin-top: 0; font-size: 18px; }
  .footer__bottom { flex-direction: column; }
  .btn { width: 100%; }
  /* the hero is a flex column with content-sized children: without this the
     two nowrap buttons set a max-content width wider than the viewport */
  .hero__left > * { max-width: 100%; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; }
  .nav__actions .btn { width: auto; }
  .nav__actions { gap: 8px; }
  .nav__actions .btn--ghost { display: none; }
  .brand__word { font-size: 15px; }
  .nav__actions .btn--primary { font-size: 12px; padding: 10px 12px; }
  .lang__btn { padding: 8px; }
  .tbl th, .tbl td { padding-inline: 12px; }
  .console__bar { padding-inline: 12px; }
  .kpi { padding-inline: 12px; }
  .facts { padding-bottom: 56px; }
  .hero { padding-bottom: 48px; }
  .plat { grid-template-columns: 1fr; gap: 10px; padding-inline: 14px; }
  .plat__who { margin-top: 8px; }
  /* the button goes full width here, so the row becomes a stack */
  .section-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .section-cta .link-arrow { justify-content: center; }
  .mcta {
    display: block; position: sticky; bottom: 0; z-index: 150;
    background: var(--ae-surface); border-top: 1px solid var(--ae-border);
    transition: transform var(--ae-dur-slow) var(--ae-ease),
                opacity var(--ae-dur) var(--ae-ease);
  }
  .mcta__inner { height: 55px; display: flex; align-items: center; padding: 0 var(--gutter); }
  .mcta .btn { height: 44px; padding-block: 0; }
  .mcta[data-hidden="true"] { transform: translateY(100%); opacity: 0; pointer-events: none; }
}

@media (max-width: 640px) {
  .facts__strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  /* one column: the tile turns into a value/label row, like the mobile KPI */
  .facts__strip { grid-template-columns: 1fr; }
  .fact { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
  .fact__l { margin-top: 0; padding-top: 0; text-align: end; }
  .fact__v, .fact__v--md, .fact__v--sm { font-size: 18px; line-height: 1.3; }
}

@media (max-width: 560px) {
  .seg { grid-template-columns: 1fr; }
  .done { padding: 18px 16px; }
  .done__value { font-size: 16px; }
}

@media (max-width: 420px) {
  /* the mark alone carries the brand here; the wordmark would push the
     localized CTA out of a 320px viewport (the footer keeps the full mark) */
  .brand__word { display: none; }
  .nav__inner { gap: 12px; }
  .console__title { font-size: 9px; }
  .tbl th, .tbl td { padding-inline: 10px; }
  .tbl td, .tbl th { font-size: 11px; }
  .waitlist__head, .waitlist__panel { padding: 20px 16px; }
  .faq__q { grid-template-columns: 26px 1fr 16px; padding: 14px 12px; }
  .faq__a { padding: 0 12px 16px 48px; }
}

/* ---- motion preference --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  /* the bar appears and disappears, it does not slide */
  .mcta { transition: none; }
  .mcta[data-hidden="true"] { transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}