/* /nee/ page. External file so the strict CSP permits it. */

/* Release gate: until launch.js switches Née on, the trial link and the Buy button
   are present but dead. A link without an href is not focusable; the button carries the
   disabled attribute. */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Class rules such as .btn set display, which would otherwise beat the hidden attribute. */
[data-nee-live-only][hidden],
[data-nee-pre-only][hidden] { display: none !important; }
.product-status-soon { color: var(--muted); }

/* The hero is the app icon beside the copy, like the other app pages (.app-hero is two columns, and one on a phone).
   A picture goes in a <figure class="app-hero-window nee-hero-window"> after .app-hero-copy and takes a row of its own
   (see docs/products/nee.md). */
.nee-hero:has(.nee-hero-window) .nee-hero-window { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  /* Wide enough for the icon, the copy and the picture side by side. */
  .nee-hero:has(.nee-hero-window) { grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr); }
  .nee-hero:has(.nee-hero-window) .nee-hero-window { grid-column: auto; }
}
.nee-hero-window { margin: 0; }
.nee-hero-window .frame-soft { max-width: 760px; margin-inline: auto; }
.nee-hero-window figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }

/* Screenshots, when there are some: <section class="screenshots-section"> with a .nee-shots grid of
   <figure class="nee-shot"> holding an <img> with width, height and alt text, and a <figcaption>. */
.nee-shots { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.nee-shot { margin: 0; display: grid; gap: 10px; align-content: start; }
.nee-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.nee-shot figcaption { color: var(--muted); font-size: 0.9rem; max-width: 56ch; }

/* Measured results and download sizes: plain tables, numbers aligned. */
.nee-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nee-note { max-width: 64ch; color: var(--muted); font-size: 0.9rem; }
.nee-list { margin: 10px 0 0; padding-left: 1.2em; color: var(--muted); max-width: 64ch; }
.nee-list li + li { margin-top: 6px; }

/* Comparison table on the product page: even columns inside a scroll container. */
.compare-table.u-table-wide tbody th { min-width: 7.5rem; }
.compare-table.u-table-wide td { min-width: 10rem; }

/* Screenshots are captures at their own pixel size, so they are capped there rather than stretched. */
.nee-shots { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.nee-shot { max-width: 640px; }
.nee-hero-window .frame-soft { max-width: 420px; }
.nee-note { max-width: 64ch; color: var(--muted); margin-top: 20px; }
.nee-video { max-width: 960px; }
.nee-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 12px; background: #000; }