/* Command Navy — public homepage (V3, 2026-09-10).
 * Linked by planner/landing.html (and, for the shared section and moment
 * rules, by the three public product pages). Class prefix `nxh-`.
 * The page in order: hero + discovery row, choose-your-product cards, the
 * FOUNDING strip (public_products.css), two showcases of real product
 * captures (public_media.css frames them), the trust list, the final action.
 * Logical properties throughout — the same sheet serves LTR and RTL.
 *
 * WHAT LEFT WITH V3: the hand-drawn "war table" and store shelf (`.nxh-table`,
 * `.nxh-panel*`, `.nxh-tech*`, `.nxh-shelf*`, `.nxh-prod*`), the two-worlds
 * band and the lead-card phone rules. The product is shown, not imitated.
 */

/* --- Hero ---------------------------------------------------------------- */
.nxh-hero-band {
  border-block-end: 1px solid var(--nx-border-2);
  background: linear-gradient(180deg, var(--nx-elevated) 0%, var(--nx-canvas) 100%);
}
.nxh-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-block: 56px 44px;
}
.nxh-hero-lead { flex: 1 1 520px; min-width: 0; max-width: 720px; }

.nxh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1.6 var(--nx-font-body);
  color: var(--nx-support);
  border: 1px solid var(--nx-border);
  background: var(--nx-surface);
  border-radius: var(--nx-radius-sm);
  padding: 6px 12px;
}
.nxh-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--nx-orange);
  flex: none;
}

.nxh-hero-title {
  font: 700 52px/1.12 var(--nx-font-display);
  color: var(--nx-text);
  margin: 22px 0 0;
  text-wrap: pretty;
  max-width: 13ch;
}
[dir="rtl"] .nxh-hero-title { line-height: 1.4; }
.nxh-hero-body {
  font: 400 17px/1.65 var(--nx-font-body);
  color: var(--nx-support);
  max-width: 560px;
  margin: 18px 0 0;
}
[dir="rtl"] .nxh-hero-body { line-height: 1.9; }
.nxh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}
/* The discovery row: the three public pages as quiet chips under the actions. */
.nxh-discover {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 18px;
}
.nxh-discover-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--nx-border-2);
  border-radius: 999px;
  background: var(--nx-surface);
  color: var(--nx-support);
  font: 600 13px/1 var(--nx-font-body);
  text-decoration: none;
}
.nxh-discover-link::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--nx-muted);
  margin-inline-end: 8px;
}
.nxh-discover-link.is-pro::before { background: var(--nx-olive-text); }
.nxh-discover-link.is-core::before { background: var(--nx-blue-text); }
.nxh-discover-link:hover { color: var(--nx-text); border-color: var(--nx-muted); }
.nxh-discover-link:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }

/* --- Sections ------------------------------------------------------------- */
.nxh-moments { padding-block: 56px 8px; }
.nxh-section-title { font: 700 26px/1.4 var(--nx-font-display); color: var(--nx-text); margin: 0 0 6px; }
.nxh-section-lead { font: 400 13px/1.7 var(--nx-font-body); color: var(--nx-muted); margin: 0 0 32px; }
[dir="rtl"] .nxh-section-lead { line-height: 1.9; }
.nxh-world-head { margin-block-end: 28px; }
.nxh-world-head .nxh-kicker { margin-block-end: 6px; }
.nxh-world-head .nxh-section-title { margin-block-end: 4px; }
.nxh-world-head .nxh-section-lead { margin-block-end: 0; }
.nxh-kicker {
  display: inline-flex;
  font: 600 11px var(--nx-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: 10px;
}
[lang="ar"] .nxh-kicker { font: 600 12px var(--nx-font-body); letter-spacing: 0; }
.nxh-kicker--me { color: var(--nx-olive-text); }
.nxh-kicker--alliance { color: var(--nx-blue-text); }
.nxh-sub { font: 700 16px/1.4 var(--nx-font-display); color: var(--nx-text); margin: 8px 0 12px; }

/* --- Choose your product ------------------------------------------------- */
.nxh-choose { padding-block: 48px 8px; }
.nxh-choose-lead { max-width: 76ch; font-weight: 500; color: var(--nx-support); }
.nxh-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 20px;
  margin-block-end: 8px;
}
.nxh-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 24px;
  border: 1px solid var(--nx-border-2);
  border-radius: var(--nx-radius-card);
  background: var(--nx-surface);
  min-width: 0;
}
.nxh-product--pro { border-block-start: 3px solid var(--nx-olive-text); }
.nxh-product--core { border-block-start: 3px solid var(--nx-blue-text); }
.nxh-product .nxh-kicker { margin-block-end: 0; }
.nxh-product-name { font: 700 26px/1.25 var(--nx-font-display); color: var(--nx-text); margin: 0; }
.nxh-product-what { font: 400 14.5px/1.65 var(--nx-font-body); color: var(--nx-support); margin: 0; max-width: 46ch; }
[dir="rtl"] .nxh-product-what { line-height: 1.9; }
.nxh-product-includes-h {
  margin: 10px 0 0;
  font: 600 11px var(--nx-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
[lang="ar"] .nxh-product-includes-h { font: 600 12px var(--nx-font-body); letter-spacing: 0; }
.nxh-product-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px;
}
.nxh-product-includes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13.5px/1.5 var(--nx-font-body);
  color: var(--nx-text);
  min-width: 0;
}
.nxh-product-includes .nx-art { width: 22px; height: 22px; }
.nxh-product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 16px 0 0;
  font: 400 14px/1.4 var(--nx-font-body);
  color: var(--nx-support);
}
.nxh-price .lw-numeric { font: 700 22px/1.2 var(--nx-font-mono); color: var(--nx-text); }
.nxh-price-sep { opacity: 0.5; }
.nxh-product-trial { margin: 0; font: 400 12.5px/1.6 var(--nx-font-body); color: var(--nx-muted); }
[dir="rtl"] .nxh-product-trial { line-height: 1.9; }
.nxh-product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }

/* The FOUNDING strip sits between the cards and the showcases. */
.nxh-founding { padding-block: 24px 8px; }

/* --- Product moments (a real capture beside its sentence) ------------------ */
.nxh-moment {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-block-end: 52px;
}
.nxh-moment--flip { flex-direction: row-reverse; }
.nxh-moment-txt { flex: 0 1 300px; min-width: 260px; }
.nxh-moment-txt h3 { font: 700 22px/1.4 var(--nx-font-display); color: var(--nx-text); margin: 0 0 10px; }
.nxh-moment-txt p { font: 400 14px/1.7 var(--nx-font-body); color: var(--nx-support); margin: 0; max-width: 36ch; }
[dir="rtl"] .nxh-moment-txt p { line-height: 1.9; }
.nxh-moment-viz { flex: 1 1 340px; min-width: min(340px, 100%); }
.nxh-moment-viz--media { flex-basis: 460px; }

/* --- Supporting tiles ------------------------------------------------------ */
.nxh-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-block: 8px 56px;
}
.nxh-trio--four { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
/* A TILE IS A LINK. It leads to the product's public page, never to a login
   wall: a visitor who came for the drone reaches the drone's description and
   the plan that includes it. `display: flex` is declared so the anchor keeps
   the tile layout; colour and underline are reset because an anchor brings
   both. */
.nxh-tile {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-2);
  border-radius: var(--nx-radius-card);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.nxh-tile:hover { border-color: var(--nx-muted); }
.nxh-tile:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nxh-tile > img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.nxh-tile-portrait { border-radius: 8px; object-fit: cover; }
.nxh-tile > div { min-width: 0; }
.nxh-tile b { display: block; font: 700 14px/1.5 var(--nx-font-display); color: var(--nx-text); }
.nxh-tile span { font: 400 12px/1.6 var(--nx-font-body); color: var(--nx-muted); }
[dir="rtl"] .nxh-tile span { line-height: 1.8; }

/* Analyzer emblem — decorative bar geometry (no game art by design). */
.nxh-bars {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  background: var(--nx-inset);
  border: 1px solid var(--nx-border-2);
  border-radius: 9px;
  padding-block-end: 8px;
  box-sizing: border-box;
  flex: none;
}
.nxh-bars i { width: 6px; border-radius: 1px; background: var(--nx-blue-text); }
.nxh-bars i:nth-child(1) { height: 9px; }
.nxh-bars i:nth-child(2) { height: 15px; }
.nxh-bars i:nth-child(3) { height: 12px; background: var(--nx-outline); }
/* Compare: two facing stacks — the shape of "these against those". */
.nxh-bars--versus { gap: 2.5px; }
.nxh-bars--versus i { width: 5px; }
.nxh-bars--versus i:nth-child(1) { height: 14px; }
.nxh-bars--versus i:nth-child(2) { height: 9px; }
.nxh-bars--versus i:nth-child(4) { height: 11px; background: var(--nx-outline); }
.nxh-bars--versus i:nth-child(5) { height: 16px; background: var(--nx-outline); }
.nxh-bars--versus b { width: 1px; height: 20px; background: var(--nx-border); margin-inline: 2px; }
/* The same emblem at list size inside a product card. */
.nxh-bars--mini { width: 22px; height: 22px; gap: 2px; padding-block-end: 4px; border-radius: 5px; }
.nxh-bars--mini i { width: 3px; }
.nxh-bars--mini i:nth-child(1) { height: 5px; }
.nxh-bars--mini i:nth-child(2) { height: 9px; }
.nxh-bars--mini i:nth-child(3) { height: 7px; }
.nxh-bars--mini.nxh-bars--versus i { width: 2.5px; }
.nxh-bars--mini.nxh-bars--versus i:nth-child(4) { height: 6px; }
.nxh-bars--mini.nxh-bars--versus i:nth-child(5) { height: 10px; }
.nxh-bars--mini.nxh-bars--versus b { height: 11px; margin-inline: 1px; }

/* --- Why LW Nexus ------------------------------------------------------------ */
.nxh-trust { padding-block: 8px 40px; }
.nxh-trust .nxh-section-title { margin-block-end: 16px; }
.nxh-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px 28px;
}
.nxh-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14px/1.7 var(--nx-font-body);
  color: var(--nx-support);
}
[dir="rtl"] .nxh-trust-list li { line-height: 1.9; }
.nxh-trust-list .nx-prov,
.nxh-trust-mark { flex: none; margin-block-start: 7px; }
.nxh-trust-mark {
  width: 10px;
  height: 10px;
  border-radius: 2.5px;
  background: var(--nx-gold);
}

/* --- Final CTA --------------------------------------------------------------- */
.nxh-final-band {
  border-block-start: 1px solid var(--nx-border-2);
  background: linear-gradient(180deg, var(--nx-canvas), var(--nx-deep));
}
.nxh-final { text-align: center; padding-block: 52px 60px; }
.nxh-final-title { font: 700 30px/1.4 var(--nx-font-display); color: var(--nx-text); margin: 0 0 20px; }
.nxh-final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .nxh-hero { padding-block: 40px 32px; gap: 28px; }
  .nxh-hero-title { font-size: 32px; }
  .nxh-hero-body { font-size: 15.5px; }
  .nxh-moment { gap: 18px; margin-block-end: 40px; }
  .nxh-moment--flip { flex-direction: row-reverse; }
  .nxh-moments { padding-block-start: 36px; }
  .nxh-choose { padding-block-start: 36px; }
  .nxh-product { padding: 20px 18px 20px; }
  .nxh-product-name { font-size: 22px; }
  .nxh-final-title { font-size: 23px; }
}
@media (max-width: 560px) {
  /* No label under 12px on a phone: the eyebrows step up where a thumb reads them. */
  .nxh-kicker, .nxh-product-includes-h { font-size: 12px; }
  .nxh-hero-actions { flex-direction: column; align-items: stretch; }
  .nxh-final-actions { flex-direction: column; align-items: stretch; }
  /* The shared mobile rule sets .nx-btn to width:100% without border-box, so
     a stretched full-width button overflows by exactly its padding + border
     (the known width-cap-plus-padding trap). Scoped here: these action
     columns are the only navy surfaces that stretch .nx-btn full width. */
  .nxh-hero-actions .nx-btn,
  .nxh-final-actions .nx-btn,
  .nxh-product-actions .nx-btn { box-sizing: border-box; }
  .nxh-product-actions { flex-direction: column; align-items: stretch; }
  .nxh-product-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxh-price .lw-numeric { font-size: 20px; }
}
/* On a phone the capture comes first in every moment, so the reader sees the
   product before its sentence -- the sentence then explains what they saw. */
@media (max-width: 760px) {
  .nxh-moment { flex-wrap: wrap; }
  .nxh-moment .nxh-moment-viz { order: -1; }
}