/*
  ncCore product page.

  Dark on purpose, and the only dark page in the store: it stands alone without the shop chrome,
  and a controller board photographs against black. It carries its own sheet rather than growing
  app.css; everything here is prefixed nc- and touches nothing outside the page. The store's
  tokens are remapped inside .nc so the shared components (buttons, inputs, the newsletter and
  stock-notify forms) follow the dark palette without their own rules changing.
*/

body:has(.nc) { background: #0c1118; color: #e8eef4; color-scheme: dark; }

.nc {
  --nc-ground: #0c1118; --nc-ground-2: #0f151d; --nc-surface: #151c26; --nc-surface-2: #1b2430;
  --nc-line: rgba(255, 255, 255, 0.07); --nc-line-2: rgba(255, 255, 255, 0.14);
  --nc-ink: #e8eef4; --nc-muted: #8fa0b2; --nc-dim: #5c6b7c;
  --nc-teal: #1abc9c; --nc-teal-ink: #0b1a17;
  --nc-copper: #e3a56f; --nc-copper-tint: rgba(227, 165, 111, 0.16);

  /* The store's own tokens, remapped for everything shared that renders inside this page. */
  --fc-paper: var(--nc-ground); --fc-paper-raised: var(--nc-surface); --fc-paper-sunken: var(--nc-surface-2);
  --fc-ink: var(--nc-ink); --fc-ink-soft: #b7c3d0; --fc-ink-muted: var(--nc-muted); --fc-ink-faint: var(--nc-dim);
  --fc-rule: var(--nc-line); --fc-rule-strong: var(--nc-line-2);
  --fc-accent: var(--nc-copper); --fc-accent-hover: #f0b985; --fc-accent-tint: var(--nc-copper-tint);
  color: var(--nc-ink);
}

.nc h1, .nc h2, .nc h3 { margin: 0; color: var(--nc-ink); }
.nc p { margin: 0; color: var(--nc-muted); text-wrap: pretty; }
.nc .nc-lede { font-size: clamp(var(--fc-text-lg), 1.9vw, var(--fc-text-xl)); line-height: var(--fc-leading-snug); }
.nc .nc-eyebrow { font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nc-teal); margin: 0; }
.nc .nc-eyebrow--copper { color: var(--nc-copper); }
.nc .nc-mono { font-family: var(--fc-font-mono); }
.nc .nc-num { font-variant-numeric: tabular-nums; }
.nc .nc-stack { display: flex; flex-direction: column; }
.nc .nc-g12 { gap: var(--fc-space-3); } .nc .nc-g16 { gap: var(--fc-space-4); } .nc .nc-g20 { gap: var(--fc-space-5); }
.nc .nc-g24 { gap: var(--fc-space-6); } .nc .nc-g32 { gap: var(--fc-space-8); } .nc .nc-g48 { gap: var(--fc-space-12); }
.nc .nc-measure { max-width: 44rem; }
.nc .nc-band { padding-block: clamp(3.5rem, 8vw, 6.5rem); border-top: 1px solid var(--nc-line); }
.nc .nc-actions { display: flex; gap: var(--fc-space-3); flex-wrap: wrap; }

/* Shared controls, in this page's colours. The teal is the call to action here, as on ncsender.xyz. */
.nc .btn--primary { width: auto; margin-top: 0; background: var(--nc-teal); color: var(--nc-teal-ink); }
.nc .btn--primary:hover { background: #48d1b5; }
.nc .btn--ghost { border-color: var(--nc-line-2); color: var(--nc-ink); }
.nc .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.35); }
.nc .btn--quiet { background: var(--nc-teal); color: var(--nc-teal-ink); border-color: transparent; }
.nc .input, .nc .select { background: var(--nc-ground); color: var(--nc-ink); border-color: var(--nc-line-2); }
.nc .input:focus, .nc .select:focus { border-color: var(--nc-teal); outline: none; }
.nc .newsletter__label, .nc .stock-notify__label { color: var(--nc-ink); }
.nc .newsletter__done, .nc .stock-notify__done, .nc .stock-notify__note { color: var(--nc-muted); }
.nc a { color: var(--nc-teal); }

/* ---- Slim bar and footer: the page skips the store chrome ---- */
.nc-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--fc-space-4); min-height: 60px;
  margin-inline: calc(-1 * var(--fc-space-6)); padding-inline: var(--fc-space-6); border-bottom: 1px solid var(--fc-rule);
  background: rgba(12, 17, 24, 0.85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: blur(12px); }
.nc-top__brand { display: flex; align-items: center; gap: 8px; color: var(--fc-ink); text-decoration: none; font-size: var(--fc-text-base); letter-spacing: var(--fc-tracking-snug); }
.nc-top__brand strong { font-weight: 700; }
.nc-top__sep { color: var(--fc-ink-faint); }
.nc-top__links { display: flex; gap: var(--fc-space-5); font-size: var(--fc-text-sm); }
.nc-top__links a { color: var(--fc-ink-muted); text-decoration: none; }
.nc-top__links a:hover { color: var(--fc-ink); }
.nc-foot { display: flex; justify-content: space-between; gap: var(--fc-space-4); flex-wrap: wrap; padding-block: var(--fc-space-10) var(--fc-space-6); border-top: 1px solid var(--fc-rule); font-size: var(--fc-text-xs); color: var(--fc-ink-muted); }
.nc-foot nav { display: flex; gap: var(--fc-space-5); }
.nc-foot a { color: var(--fc-ink-soft); text-decoration: none; }
.nc-foot a:hover { color: var(--fc-ink); }

/* ---- Hero ---- */
.nc-hero { padding-block: clamp(2rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.nc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--fc-space-12); align-items: center; }
.nc-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.0; letter-spacing: -0.03em; font-weight: 700; }
.nc-hero__art { position: relative; }
.nc-hero__glow { position: absolute; inset: -14% -8%; pointer-events: none;
  background: radial-gradient(60% 55% at 60% 45%, rgba(26, 188, 156, 0.16), transparent 70%), radial-gradient(45% 40% at 30% 70%, rgba(227, 165, 111, 0.12), transparent 70%); }
.nc-hero__pic { display: block; position: relative; }
.nc-hero__img { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.nc-chips { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.nc-chip { font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-ink-muted); }
.nc-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--nc-teal); margin-right: 8px; vertical-align: 1px; }

/* ---- Image placeholders, until the photography lands ---- */
.nc-ph { position: relative; width: 100%; max-width: 100%; border: 1px dashed color-mix(in srgb, var(--nc-copper) 55%, transparent); border-radius: var(--fc-radius-lg);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px), var(--nc-surface);
  display: grid; place-items: center; overflow: hidden; }
.nc-ph > span { font-family: var(--fc-font-mono); font-size: var(--fc-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nc-copper); text-align: center; padding: var(--fc-space-4); }
.nc-ph--43 { aspect-ratio: 4 / 3; } .nc-ph--169 { aspect-ratio: 16 / 9; } .nc-ph--11 { aspect-ratio: 1 / 1; } .nc-ph--32 { aspect-ratio: 3 / 2; }
.nc-ph i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--nc-copper); opacity: .7; }
.nc-ph .c1 { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.nc-ph .c2 { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.nc-ph .c3 { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.nc-ph .c4 { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---- Works-with strip ---- */
.nc-marquee { overflow: hidden; border-block: 1px solid var(--fc-rule); background: var(--fc-paper-raised); }
.nc-marquee__track { display: flex; width: max-content; animation: nc-slide 38s linear infinite; }
.nc-marquee__track:hover { animation-play-state: paused; }
.nc-marquee__item { font-family: var(--fc-font-mono); font-size: var(--fc-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-ink-muted); padding: 14px 26px; white-space: nowrap; }
.nc-marquee__item b { color: var(--fc-ink); font-weight: 600; }
.nc-marquee__item::before { content: "\25C6"; color: var(--nc-copper); margin-right: 26px; font-size: 8px; vertical-align: 2px; }
@keyframes nc-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Stats ---- */
.nc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fc-space-4); }
.nc-stat { padding: 22px 22px 20px; border: 1px solid var(--fc-rule); border-radius: var(--fc-radius-lg); background: var(--fc-paper); display: flex; flex-direction: column; gap: 6px; }
.nc-stat__v { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--fc-ink); }
.nc-stat__v small { font-size: 0.48em; color: var(--nc-copper); margin-left: 4px; letter-spacing: 0; font-weight: 600; }
.nc-stat__l { font-size: var(--fc-text-sm); color: var(--fc-ink-muted); }

/* ---- Reveal: visible at rest, settles into place ---- */
.nc-reveal { transform: translateY(20px); opacity: .6; transition: transform .7s var(--fc-ease), opacity .7s ease; }
.nc-reveal.is-in { transform: none; opacity: 1; }
.nc-reveal.d1 { transition-delay: .08s; } .nc-reveal.d2 { transition-delay: .16s; } .nc-reveal.d3 { transition-delay: .24s; }

/* ---- Adapters: pinned list, scrolling cards ---- */
.nc-story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--fc-space-16); align-items: start; }
.nc-story__pin { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--fc-space-5); }
.nc-machines { display: flex; flex-direction: column; margin-top: var(--fc-space-2); }
.nc-machine { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fc-space-4); padding: 12px 0; border-top: 1px solid var(--fc-rule);
  font-weight: 600; font-size: var(--fc-text-xl); letter-spacing: var(--fc-tracking-snug); color: var(--fc-ink-faint); transition: color .3s ease; cursor: pointer; }
.nc-machine small { font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-ink-faint); font-weight: 400; transition: color .3s ease; }
.nc-machine.is-active { color: var(--fc-ink); }
.nc-machine.is-active small { color: var(--nc-copper); }
.nc-adapters { display: flex; flex-direction: column; gap: var(--fc-space-6); }
.nc-adapter { padding: 26px; border: 1px solid var(--fc-rule); border-radius: var(--fc-radius-lg); background: var(--fc-paper); display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--fc-space-6); align-items: center;
  transition: border-color .3s ease, transform .3s var(--fc-ease), box-shadow .3s ease; }
.nc-adapter.is-active { border-color: rgba(227, 165, 111, 0.55); transform: translateX(6px); }
.nc-adapter .nc-ph { border-radius: var(--fc-radius-md); }
.nc-adapter--wide { grid-template-columns: minmax(0, 1fr); }
.nc-adapter__pinout { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.nc-adapter__pinout img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: var(--fc-radius-md); }
.nc-adapter__pinout span { font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nc-teal); }
.nc-adapter__pinout:hover span { color: #48d1b5; }
.nc-adapter__pic { display: block; }
.nc-adapter__pic img { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5)); }
.nc-adapter ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--fc-text-sm); color: var(--fc-ink-soft); }
.nc-adapter ul li::before { content: "\2014"; color: var(--nc-copper); margin-right: 10px; }

/* ---- Feature cards ---- */
.nc-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fc-space-5); }
.nc-feature { padding: 26px; border: 1px solid var(--fc-rule); border-radius: var(--fc-radius-lg); background: var(--fc-paper); display: flex; flex-direction: column; gap: var(--fc-space-3); }
.nc-feature__ic { width: 40px; height: 40px; border-radius: var(--fc-radius-md); background: var(--nc-copper-tint); display: grid; place-items: center; color: var(--nc-copper); }
.nc-feature p { font-size: var(--fc-text-sm); }
.nc-feature__tag { font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-ink-faint); }

/* ---- I/O map ---- */
.nc-map { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--fc-space-10); align-items: start; }
.nc-map__pic { display: block; }
.nc-map__pic img { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
.nc-iolist { display: flex; flex-direction: column; border-top: 1px solid var(--fc-rule); }
.nc-io { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--fc-space-4); padding: 14px 0; border-bottom: 1px solid var(--fc-rule); align-items: baseline; transition: background .2s ease; }
.nc-io:hover { background: rgba(255, 255, 255, 0.02); }
.nc-io__n { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--nc-copper); line-height: 1; }
.nc-io__n small { font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.08em; color: var(--fc-ink-faint); font-weight: 400; margin-left: 4px; }
.nc-io__t { font-weight: 600; font-size: var(--fc-text-base); color: var(--fc-ink); }
.nc-io__d { font-size: var(--fc-text-sm); color: var(--fc-ink-muted); margin-top: 3px; }

/* ---- Safety chain ---- */
.nc-chain { padding: var(--fc-space-8); border: 1px solid var(--fc-rule); border-radius: var(--fc-radius-lg); background: linear-gradient(180deg, var(--nc-surface), var(--nc-ground-2)); }
.nc-chain svg { width: 100%; height: auto; display: block; }
.nc-chain .flow { stroke-dasharray: 8 6; }
.nc-chain.is-in .flow { animation: nc-dash 1.6s linear infinite; }
@keyframes nc-dash { to { stroke-dashoffset: -28; } }
.nc-callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fc-space-4); }
.nc-callout { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-left: 2px solid var(--nc-copper); background: rgba(255, 255, 255, 0.02); border-radius: 0 var(--fc-radius-md) var(--fc-radius-md) 0; }
.nc-callout b { color: var(--fc-ink); font-size: var(--fc-text-base); }
.nc-callout span { font-size: var(--fc-text-sm); color: var(--fc-ink-soft); line-height: 1.5; }

/* ---- Mounting ---- */
.nc-mount__pic { display: block; align-self: center; }
.nc-mount__pic img { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55)); }

/* ---- Ecosystem ---- */
.nc-eco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fc-space-5); }
.nc-eco--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-eco__pic { display: block; border-bottom: 1px solid var(--fc-rule); }
.nc-eco__pic img { display: block; width: 100%; height: auto; max-width: 100%; }
/* both stack cards share one image height: the tall ncSender screenshot is cropped to its top, the board is fitted inside */
.nc-eco__pic--fit { aspect-ratio: 1 / 1; overflow: hidden; }
.nc-eco__pic--fit img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.nc-eco__pic--board img { object-fit: contain; object-position: center; }
.nc-eco__pic--board { padding: 18px 22px 8px; background: radial-gradient(70% 70% at 50% 55%, rgba(26, 188, 156, 0.10), transparent 70%); }
.nc-eco__pic--board img { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5)); }
.nc-eco__card { border: 1px solid var(--fc-rule); border-radius: var(--fc-radius-lg); background: var(--fc-paper); overflow: hidden; display: flex; flex-direction: column; }
.nc-eco__card .nc-ph { border-radius: 0; border-width: 0 0 1px 0; border-style: solid; }
.nc-eco__body { padding: 22px; display: flex; flex-direction: column; gap: var(--fc-space-2); }
.nc-eco__body p { font-size: var(--fc-text-sm); }

/* ---- Spec sheet ---- */
.nc-specs-wrap { overflow-x: auto; }
.nc-specs { width: 100%; border-collapse: collapse; font-size: var(--fc-text-sm); }
.nc-specs th, .nc-specs td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--fc-rule); vertical-align: top; }
.nc-specs th { width: 34%; font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-ink-muted); font-weight: 500; padding-top: 16px; }
.nc-specs td { color: var(--fc-ink); }
.nc-specs td .m { color: var(--fc-ink-muted); }
.nc-specs .group td { padding-top: 30px; border-top: 0; font-family: var(--fc-font-mono); font-size: var(--fc-text-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--nc-copper); }

/* ---- Notify ---- */
.nc-cta { border: 1px solid rgba(26, 188, 156, 0.35); border-radius: var(--fc-radius-lg); background: radial-gradient(80% 120% at 10% 0%, rgba(26, 188, 156, 0.14), transparent 60%), var(--nc-surface);
  padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--fc-space-10); align-items: center; }
.nc-cta .newsletter { margin-top: 0; max-width: none; }

@media (max-width: 900px) {
  .nc-hero__grid, .nc-story, .nc-map, .nc-cta { grid-template-columns: minmax(0, 1fr); }
  .nc-story__pin { position: static; }
  .nc-features, .nc-eco, .nc-callouts, .nc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .nc-top__links { display: none; }
  .nc-features, .nc-eco, .nc-eco--2, .nc-callouts, .nc-adapter, .nc-stats { grid-template-columns: minmax(0, 1fr); }
  .nc-adapter.is-active { transform: none; }
  .nc-machine { font-size: var(--fc-text-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .nc-reveal { transform: none; opacity: 1; transition: none; }
  .nc-marquee__track { animation: none; }
  .nc-chain.is-in .flow { animation: none; }
  .nc-adapter { transition: none; }
}