/* Nexa pricing — the left card: what the licence contains. Split out of pricing.css because one
   card was doing two jobs. This is the reading surface, so it is allowed to be tall and to use
   full-width lines; the payment card beside it stays narrow. Same hairline + caps-label grammar
   as the payment card, so the pair reads as one object. Uses site.css tokens. */

.px-incl {
  display: flex; flex-direction: column;
  padding: 24px 26px; border-radius: var(--r-xl);
  border: 1px solid var(--hairline); background: var(--field-depth);
}
.px-incl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.px-incl-h {
  font-size: var(--fs-small); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-40);
}
.px-forever {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-60);
}

/* Shared glyphs. The tick is a stroke, and so is the badge — a filled shape falls back to solid
   black the moment a colour rule does not land, which is exactly how the seal it replaced broke. */
.px-tick { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.px-badge { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* The three ways an agent takes control get their own frame. In a two-column tick list they were
   one clipped line each and read as trivia — Browser Use in particular vanished between
   "Built-in browser" and "Computer Use". Here each one is named and explained. */
.px-ctrl {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--field-sheen);
}
.px-ctrl-label {
  display: block; margin-bottom: 11px;
  font-size: var(--fs-small); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-40);
}
/* Commander leads on size; the other two are the same shape one step quieter, so the block reads
   as one family rather than a headline with two footnotes. */
.px-ctrl-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.px-ctrl-h {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); font-weight: 650; letter-spacing: -0.015em; color: var(--ink);
}
.px-ctrl-lead .px-ctrl-h { font-size: var(--fs-copy); letter-spacing: -0.02em; }
.px-ctrl p { margin-top: 6px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-60); max-width: 60ch; }

/* Two columns, and each line wraps instead of truncating. This list is the left card's slack
   line: it takes the leftover height when the payment card is the taller of the two. The slack
   is spread across the rows rather than banked into one gap above them — a single 90px hole in
   the middle of a card reads as a mistake; five roomier rows read as the card breathing. */
.px-feat {
  list-style: none; margin: 16px 0 0; padding: 0; flex: 1 1 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px;
  align-content: space-between;
}
.px-feat li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.px-feat .px-tick { margin-top: 4px; }
.px-feat li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-feat b { font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.px-feat i { font-style: normal; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-40); }

@media (max-width: 620px) {
  .px-incl { padding: 20px 18px; }
  .px-feat { grid-template-columns: 1fr; gap: 10px; }
}