/* NatGas Central · ngc-vx2-page.css: the VERTEX 2 sales page /vertex-2/ (page-vertex-2.php, built by inc/vx2-waitlist.php
   vx2_sales_page(); launch build 26 Oct 2026). The Night Desk components (n-panel, n-btn, n-kv, n-field, n-input, n-notice,
   n-chip) do the heavy lifting; this file only lays out the page's own sections. Tokens only, so the dark site and the light
   print tokens apply as on every other page. Mobile first: phone < 700 · tablet 700–1099 · desktop ≥ 1100. */

.vx { display: block; }
.vx-sec { margin-top: 56px; scroll-margin-top: calc(var(--pin-h, 0px) + 16px); }
.vx-sec .n-shead { margin-bottom: 20px; }

/* ================= hero + "At a glance" ================= */
.vx-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.vx-hero__copy { min-width: 0; }
.vx-hero__h1 { margin-top: 12px; }
.vx-hero__lede { margin-top: 16px; }
.vx-hero__chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.vx-hero__ctas { margin-top: 24px; }
.vx-hero__price { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--t2); font-variant-numeric: tabular-nums; }
.vx-hero__price strong { color: var(--t1); font-weight: 600; }
.vx-hero__facts { min-width: 0; }
.vx-facts__kv { margin-top: 12px; }

/* ================= what it is ================= */
.vx-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vx-card { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.vx-card > svg { color: var(--accent); }
.vx-card .n-h3 { margin-top: 12px; }
.vx-card .n-body { margin-top: 8px; }

/* ================= how it works ================= */
.vx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vx-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.vx-step__n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent-quiet); color: var(--accent); font-family: var(--mono); font-size: 14px; font-weight: 500; }
.vx-step .n-body { margin-top: 6px; }
.vx-more { margin-top: 16px; }

/* ================= what you need ================= */
.vx-need { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.vx-need__i { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.vx-need__i > svg { margin-top: 3px; color: var(--ok); }
.vx-need__i .n-body { margin-top: 6px; max-width: 88ch; }
.vx-local { display: block; margin-top: 8px; color: var(--t1); }
.vx-local[hidden] { display: none; }

/* the recommended-maximum risk table in "What you need" */
.vx-need__i .n-tablewrap { margin-top: 12px; max-width: 560px; }

/* ================= price and plan + Discord + places ================= */
/* .vx-duo--two: no Discord panel (option vx2_discord_url unset), so the two panels share a row */
.vx-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vx-duo .n-btnrow { margin-top: 16px; }
.vx-duo .vx-plan__price { margin-top: 0; margin-bottom: 8px; }

/* ================= the waitlist (or the trial) ================= */
.vx-join { max-width: 760px; }
.vx-join .n-panel__body { display: flex; flex-direction: column; gap: 16px; }
.vx-join .vx-hero__price { margin-top: 0; }
/* mode open: the waitlist under the trial, for when checkout says every place is taken */
.vx-join__wait { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hair); }
.vx-form { position: relative; display: flex; flex-direction: column; gap: 16px; }
/* the honeypot: off screen for people, still in the form for bots (not display:none, which some bots skip) */
.vx-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vx-form__privacy { max-width: 88ch; }
.vx-form__privacy a { color: var(--accent); }

/* ================= questions + risk line ================= */
.vx-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.vx-risk { margin-top: 40px; }

@media (min-width: 700px) {
  .vx-sec { margin-top: 72px; }
  .vx-cards, .vx-steps, .vx-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-cards > .vx-card:last-child, .vx-duo > .n-panel:last-child { grid-column: 1 / -1; }
  .vx-duo--two > .n-panel:last-child { grid-column: auto; }
}
@media (min-width: 1100px) {
  .vx-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .vx-hero__copy { padding-top: 6px; }
  .vx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx-cards > .vx-card:last-child, .vx-duo > .n-panel:last-child { grid-column: auto; }
  .vx-duo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx-duo.vx-duo--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* one column, badge row over text row: pack both rows at the top, so a shorter card (stretched to the row's tallest) keeps
     its heading right under the badge instead of sharing the spare height between the two rows */
  .vx-step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; }
}
@media print {
  /* no buttons on paper: the hero's, the waitlist form, the open-mode waitlist, Discord, and the #waitlist panel's own
     ("Start your free trial" in mode open, "Go to your account" for a signed-in owner) */
  .vx-hero__ctas, .vx-form, .vx-join__wait, .vx-duo .n-btnrow, .vx-join .n-btnrow { display: none; }
}