/* Machine — the shared vocabulary for the two landing pages.
   Everything below the hero lives here and BOTH / and /nexa load it, so the seams, the mono
   micro-labels struck in the accent ink, the numbered rows and the readouts are one set of rules rather
   than two copies that drift. Each page keeps only its own hero (home-hero.css, nexa-hero.css).

   The one thing deliberately NOT shared is the instrument: the turning rings are the home
   page's signature. /nexa shows the product instead, so its ground stays flat. */

.mx { max-width: 1140px; margin: 0 auto; padding: 0 clamp(22px, 4.5vw, 56px); }

/* ---------- section chassis ---------- */
.mx-sec { position: relative; z-index: 2; padding: clamp(70px, 12vh, 130px) 0 0; }
.mx-sec:last-of-type { padding-bottom: clamp(60px, 10vh, 110px); }

.mx-label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono, var(--grotesk)); font-size: var(--fs-micro);
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-40);
}
.mx-label::before { content: ""; width: 22px; height: 1px; background: var(--accent); }

.mx-h2 {
  margin: 22px 0 0; max-width: 20ch;
  font-weight: 500; font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06; letter-spacing: -.032em;
}
.mx-h2 em {
  font-weight: 700;
  color: var(--ink); letter-spacing: -.024em;
}
.mx-note { margin: 16px 0 0; max-width: 58ch; color: var(--ink-60); font-size: var(--fs-sub); }

/* ---------- numbered rows: the page's spine ---------- */
.mx-lines { margin-top: clamp(30px, 5vh, 52px); display: grid; }
.mx-line {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px 22px;
  padding: 22px 0; border-top: 1px solid var(--hairline);
}
.mx-line:last-child { border-bottom: 1px solid var(--hairline); }
.mx-line u {
  text-decoration: none; font-family: var(--mono, monospace);
  font-size: var(--fs-micro); letter-spacing: .2em; color: var(--accent); padding-top: 5px;
}
.mx-line b { font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; letter-spacing: -.02em; }
.mx-line p { grid-column: 2; margin: 0; max-width: 56ch; color: var(--ink-60); font-size: var(--fs-sub); }

/* ---------- plates: a real screenshot with a caption under it ---------- */
.mx-plates {
  margin-top: clamp(30px, 5vh, 52px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px);
}
.mx-plate { margin: 0; display: grid; gap: 14px; min-width: 0; }
.mx-shot {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--hairline); background: #05080d;
  box-shadow: 0 24px 64px -34px var(--glass-shadow);
}
/* --zoom crops a capture that was shot with a marketing border around the window; --pos picks
   which part of a wide 1800px grab survives the 16/10 box. Both default to "show it straight". */
.mx-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--pos, center);
  transform: scale(var(--zoom, 1));
  /* the captures are brighter than this page; they settle back at rest and come up on hover */
  opacity: .82; filter: saturate(.88);
  transition: opacity .4s ease, filter .4s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.mx-plate:hover .mx-shot img {
  opacity: 1; filter: none; transform: scale(calc(var(--zoom, 1) * 1.02));
}
/* on the light theme the same dim reads as washed-out rather than restrained */
[data-theme="light"] .mx-shot img { opacity: .92; filter: saturate(.94); }
/* one accent hairline along the top edge — the same single stroke the labels use */
.mx-shot::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5;
}
/* the caption keeps the numbered-row spine: index in a gutter, title and note in the column */
.mx-plate figcaption {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 5px 12px; align-items: baseline;
}
.mx-plate u {
  grid-column: 1; text-decoration: none; font-family: var(--mono, monospace);
  font-size: var(--fs-micro); letter-spacing: .2em; color: var(--accent);
}
.mx-plate b { grid-column: 2; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.015em; }
.mx-plate span { grid-column: 2; color: var(--ink-60); font-size: var(--fs-copy); line-height: 1.5; }

/* ---------- FAQ: the numbered-row spine, without the numbers ---------- */
/* faq.css drew the list for the old two-column home page, where it sat in a 560px card in the
   left half. Here it is a section of its own, so it takes the same full-width hairline rows
   as .mx-line and drops the card's leftover padding. */
.mx-sec .faq { width: 100%; margin-top: clamp(30px, 5vh, 52px); padding-bottom: 0; }
.mx-sec .faq-item summary {
  padding: 21px 2px; color: var(--ink);
  font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; letter-spacing: -.02em;
}
.mx-sec .faq-item:last-of-type { border-bottom: 1px solid var(--hairline); }
.mx-sec .faq-item p { max-width: 72ch; color: var(--ink-60); font-size: var(--fs-sub); }

/* ---------- readouts on a seam ---------- */
.mx-hud {
  position: relative; z-index: 2; margin-top: clamp(34px, 6vh, 62px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; padding-top: 20px; border-top: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.mx-hud > div { display: grid; gap: 4px; }
.mx-hud > div:nth-child(2) { justify-items: center; text-align: center; }
.mx-hud > div:last-child { justify-items: end; text-align: right; }
.mx-hud u {
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-40);
}
.mx-hud b { font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.mx-hud i {
  font-style: normal; font-size: var(--fs-micro); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-40);
}

/* number + unit tag: the count is machines, so the unit rides beside the digits instead of
   leaving "downloads" to be read as button presses */
.mx-count { display: flex; align-items: baseline; gap: 8px; }
.mx-hud > div:last-child .mx-count { justify-content: flex-end; }
.mx-tag {
  font-style: normal; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-60); line-height: 1; white-space: nowrap;
  padding: 4px 8px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
}

/* the live pip, used by both pages' readouts */
.mx-pip {
  text-decoration: none; width: 6px; height: 6px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: mx-live 2.4s ease-out infinite;
}

/* ---------- closing block ---------- */
.mx-cta {
  position: relative; z-index: 2; margin-top: clamp(70px, 12vh, 130px);
  padding: clamp(38px, 6vh, 62px) 0; border-top: 1px solid var(--hairline);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px); flex-wrap: wrap;
}
.mx-cta h2 {
  margin: 0; max-width: 16ch;
  font-weight: 500; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -.032em;
}
.mx-cta h2 em {
  font-weight: 700; letter-spacing: -.024em;
}
.mx-door {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 26px; border-radius: var(--r-pill);
  background: var(--pill-bg); color: var(--pill-ink);
  font-size: var(--fs-sub); font-weight: 600;
  box-shadow: 0 18px 46px var(--glass-shadow);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.mx-door:hover { transform: translateY(-3px); box-shadow: 0 26px 66px var(--glass-shadow); }
.mx-door svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.mx-door:hover svg { transform: translateX(4px); }
.mx-cta-note { display: block; margin-top: 12px; font-size: var(--fs-lead); color: var(--ink-40); letter-spacing: .03em; }
.mx-cta-note b { color: var(--ink-60); font-weight: 500; }

/* ---------- footer ---------- */
.mx-foot {
  position: relative; z-index: 2; padding: 22px 0 clamp(60px, 9vh, 96px);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: var(--fs-body); color: var(--ink-40);
}
.mx-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.mx-foot a { color: var(--ink-40); transition: color .2s ease; }
.mx-foot a:hover { color: var(--ink); }

/* everything arrives once, quietly */
[data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-rise].is-in { opacity: 1; transform: none; }

@keyframes mx-live {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}

@media (max-width: 900px) {
  .mx-plates { grid-template-columns: 1fr; }
  .mx-hud { grid-template-columns: 1fr 1fr; gap: 22px; }
  .mx-hud > div:nth-child(2) { justify-items: end; text-align: right; }
  .mx-hud > div:last-child { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .mx-cta { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-pip { animation: none; }
  .mx-shot img, .mx-door, .mx-door svg { transition: none; }
}