/* Public product pages: Nexus Pro, Alliance Core, Pricing.
   Layout only; typography, colour and spacing come from the navy tokens and the
   homepage sheet these pages share. Literal values below are the two things the
   homepage sheet does not define: the offer panel and the comparison table. */

.nxp-hero { padding-block: 2.5rem 1.5rem; }
.nxp-title { font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.15; margin: 0.4rem 0 0.8rem; }
.nxp-answer { font-size: 1.1rem; line-height: 1.6; max-width: 62ch; margin: 0 0 1rem; }
.nxp-price-line { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: baseline; margin: 0 0 0.5rem; font-size: 1.15rem; }
.nxp-price { white-space: nowrap; }
.nxp-price-sep { opacity: 0.5; }
.nxp-trial, .nxp-note { max-width: 70ch; line-height: 1.55; opacity: 0.85; margin: 0.4rem 0 0.9rem; }
.nxp-independent { max-width: 70ch; line-height: 1.55; margin: 1rem 0 0; font-weight: 600; }

.nxp-section { padding-block: 1.75rem; }
.nxp-tools { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.nxp-tool { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; padding: 1rem 1.1rem; background: rgba(255, 255, 255, 0.03); }
.nxp-tool-art { display: block; width: 40px; height: 40px; margin-bottom: 0.5rem; }
.nxp-tool-name { font-size: 1.05rem; margin: 0 0 0.35rem; }
.nxp-tool-body { margin: 0; line-height: 1.5; opacity: 0.9; }

.nxp-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.2rem; }
.nxp-plan { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.75rem; padding: 1.1rem 1.2rem; }
.nxp-plan-name { margin: 0 0 0.3rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.85rem; opacity: 0.8; }
.nxp-plan-price { margin: 0 0 0.5rem; font-size: 1.8rem; font-weight: 700; }
.nxp-plan-unit { font-size: 0.95rem; font-weight: 400; opacity: 0.8; }
.nxp-plan-note { margin: 0; line-height: 1.5; opacity: 0.9; }

/* The FOUNDING offer has its own component sheet, navy/founding_offer.css:
   the same partial renders on the public pages AND inside the product, and
   these rules did not reach the authenticated surfaces from here. */

/* The comparison table scrolls inside its own box on narrow screens. */
.nxp-compare-wrap { overflow-x: auto; margin-top: 1.2rem; }
.nxp-compare { width: 100%; border-collapse: collapse; min-width: 40rem; }
.nxp-compare th, .nxp-compare td { padding: 0.8rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); vertical-align: top; text-align: start; line-height: 1.5; }
.nxp-compare thead th { font-size: 1.05rem; }
.nxp-compare thead th a { text-decoration: underline; }
.nxp-compare-sub { display: block; font-size: 0.85rem; font-weight: 400; opacity: 0.8; margin-top: 0.15rem; }
.nxp-compare tbody th { font-weight: 600; width: 11rem; opacity: 0.9; }
.nxp-compare-label { width: 11rem; }
.nxp-choose { margin: 1rem 0 0; padding-inline-start: 1.2rem; line-height: 1.6; }
.nxp-choose li + li { margin-top: 0.5rem; }

@media (max-width: 640px) {
  .nxp-hero { padding-block: 1.75rem 1rem; }
}

/* The hero with a real product capture beside the answer (2026-09-09). Two
   columns from 900px, the text first; below that the capture follows the
   answer, never precedes it -- the answer is still the first thing in <main>. */
.nxp-hero--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: center; }
.nxp-hero-text { min-width: 0; }
.nxp-hero-media { min-width: 0; }
@media (max-width: 900px) { .nxp-hero--media { grid-template-columns: 1fr; gap: 1.5rem; } }

/* "See it in action": the recording, then the capability captures. */
.nxp-showcase { padding-block: 1.25rem 2rem; }
.nxp-showcase-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: 1.75rem; }
/* A lone card must not stretch to the full column (the Stores slot is omitted
   until it is recaptured, 2026-09-10): the card's `sizes` asks the browser for
   a ~590px derivative, and a full-width card would draw it upscaled and soft.
   40rem keeps one card inside the 768w (1x) and 1280w (2x) derivatives; a
   two-up track is narrower than that, so the rule is inert once both cards show. */
.nxp-showcase-item { min-width: 0; max-width: 40rem; }
.nxp-showcase-item h3 { margin: 0.9rem 0 0.3rem; font-size: 1.1rem; }
.nxp-showcase-item p { margin: 0; line-height: 1.55; opacity: 0.9; max-width: 48ch; }