/* ==========================================================================
   ACELOOP · NEXT — hand-built site system. One file, written by hand.
   macOS porcelain/cobalt discipline: hairlines carry structure, two shadow
   tiers, translucency only where it means something, 4/8 rhythm,
   150–300ms motion with reduced-motion parity, serif display for editorial
   moments, one scenic bay echo per page.

   Namespace: every class is n-* so index.html can carry the original hero
   CSS chain beside this file with zero collisions.
   ========================================================================== */

:root {
  --n-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --n-hair: var(--border);
  --n-r: 14px;
  --n-r-lg: 18px;
  --n-shadow-1: 0 1px 2px rgba(13, 15, 20, 0.04), 0 8px 24px -12px rgba(24, 43, 86, 0.12);
  --n-shadow-2: 0 2px 6px rgba(13, 15, 20, 0.06), 0 28px 72px -28px rgba(24, 43, 86, 0.3);
  --n-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.n-body { background: var(--bg-page); color: var(--ink); font-family: var(--font-ui); }
.n-body ::selection { background: var(--selection); }

/* ------------------------------------------------------------ layout ----- */
.n-wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.n-wrap.wide { width: min(1220px, calc(100% - 48px)); }
.n-sec { padding-block: 84px; }
.n-sec.tight { padding-block: 56px; }
.n-main {
  padding-top: 92px; /* strip 29 + nav */
  /* One continuous pearl wash that begins at the very top (behind the floating
     nav) and settles into the page colour — no abrupt band under the nav. */
  background: linear-gradient(180deg, var(--sky-0), var(--bg-page) 480px) no-repeat, var(--bg-page);
}

/* ------------------------------------------------------------ type ------- */
.n-kick {
  display: inline-flex; align-items: center; gap: 10px;
  font: 660 0.68rem/1 var(--font-mono);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--cobalt-deep);
}
.n-kick::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt-bright), var(--cobalt)); }
.n-kick.soft { color: var(--ink-faint); }
.n-kick.soft::before { background: var(--border-strong); }

.n-display { font-size: var(--text-display-2); letter-spacing: -0.025em; line-height: 1.06; font-weight: 700; }
.n-display.serif { font-family: var(--font-display); font-weight: 560; letter-spacing: -0.012em; line-height: 1.1; }
.n-h2 { font-size: var(--text-h2); letter-spacing: -0.022em; font-weight: 690; }
.n-h3 { font-size: var(--text-h3); letter-spacing: -0.014em; font-weight: 670; }
.n-lede { font-size: var(--text-body-lg); line-height: 1.65; color: var(--ink-soft); max-width: 56ch; }
.n-micro { font-size: var(--text-micro); color: var(--ink-faint); }
.n-mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------ nav -------- */
.n-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px;
  font: 600 0.68rem/1.4 var(--font-mono);
  background: var(--night); color: var(--night-soft);
}
.n-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.n-strip b { color: var(--gold); letter-spacing: 0.06em; }

.n-nav {
  position: fixed; top: 29px; left: 0; right: 0; z-index: 100;
  pointer-events: none;
}
.n-nav .shell {
  pointer-events: auto;
  width: min(1010px, calc(100vw - 32px));
  margin: 10px auto 0;
  display: flex; align-items: center; gap: 6px;
  min-height: 52px; padding: 0 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 50px -30px rgba(24, 43, 86, 0.45);
}
.n-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-strong); letter-spacing: -0.01em; }
.n-brand img { width: 26px; height: 26px; }
.n-nav .links { display: flex; gap: 2px; margin-inline: auto; }
.n-nav .links a {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 12px;
  border-radius: 10px;
  color: var(--ink-soft); font-weight: 570; font-size: var(--text-small);
  transition: background 0.15s var(--n-ease), color 0.15s var(--n-ease);
}
.n-nav .links a:hover { background: var(--bg-hover); color: var(--ink-strong); }
.n-nav .links a[aria-current="page"] { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.n-nav .acts { display: flex; align-items: center; gap: 6px; }
.n-nav .plain {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 11px; border-radius: 10px;
  color: var(--ink-soft); font-weight: 620; font-size: var(--text-small);
}
.n-nav .plain:hover { background: var(--bg-hover); color: var(--ink-strong); }
/* Nav CTA matches the homepage scene nav: compact + jet-black (not navy). */
.n-nav .n-btn { min-height: 38px; padding: 0 15px; border-radius: 10px; }
.n-nav .n-btn.night {
  background: linear-gradient(180deg, #27272A, #050505);
  box-shadow: 0 10px 24px -10px rgba(9, 12, 20, 0.55);
}
.n-nav .n-btn.night:hover { background: linear-gradient(180deg, #313136, #010101); box-shadow: 0 14px 28px -10px rgba(9, 12, 20, 0.6); }

/* ------------------------------------------------------------ buttons ---- */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border-radius: 11px; border: 1px solid transparent;
  font-weight: 650; font-size: var(--text-small);
  cursor: pointer; white-space: nowrap;
  transition: transform 0.15s var(--n-ease), box-shadow 0.15s var(--n-ease),
              background 0.15s var(--n-ease), border-color 0.15s var(--n-ease), color 0.15s var(--n-ease);
}
.n-btn:active { transform: scale(0.985); }
.n-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.n-btn.pri {
  color: #fff;
  background: linear-gradient(180deg, var(--cobalt-bright), var(--cobalt));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(40, 88, 214, 0.55);
}
.n-btn.pri:hover { background: linear-gradient(180deg, #3E6FEC, var(--cobalt-bright)); }
.n-btn.sec {
  color: var(--ink); background: var(--bg-raise);
  border-color: var(--border-strong);
  box-shadow: var(--n-sheen), 0 1px 2px rgba(13, 15, 20, 0.05);
}
.n-btn.sec:hover { border-color: var(--ink-faint); }
.n-btn.night {
  color: #fff;
  background: linear-gradient(180deg, #16325F, var(--night));
  box-shadow: inset 0 1px 0 rgba(202, 218, 248, 0.18), 0 8px 20px -12px rgba(11, 26, 58, 0.6);
}
.n-btn.night:hover { background: linear-gradient(180deg, #1B3A6D, #10234B); }
.n-btn.discord {
  color: #fff;
  background: linear-gradient(180deg, #5B67F0, #4650E0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px -12px rgba(70, 80, 224, 0.65);
}
.n-btn.discord:hover { background: linear-gradient(180deg, #6771F2, #3E48D8); }
.n-btn.ghost-w { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.n-btn.ghost-w:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.n-btn.lg { min-height: 50px; padding: 0 26px; font-size: var(--text-body); }
.n-btn.sm { min-height: 36px; padding: 0 14px; font-size: var(--text-micro); }
.n-btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ chips ------ */
.n-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-raise); border: 1px solid var(--n-hair);
  box-shadow: var(--n-sheen);
  font-size: var(--text-micro); font-weight: 620; color: var(--ink-soft);
}
.n-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
a.n-chip.is-link { color: var(--cobalt-deep); text-decoration: none; transition: background 0.15s var(--n-ease), border-color 0.15s var(--n-ease); }
a.n-chip.is-link:hover { background: var(--cobalt-wash); border-color: var(--cobalt-bright); }

/* Link rows: name plus one line, as a hairline list rather than a card grid.
   For short entries where the card chrome outweighs the content. */
.n-linkrows { list-style: none; margin: 26px 0 0; padding: 0; }
.n-linkrows li + li { border-top: 1px solid var(--n-hair); }
.n-linkrows a {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 20px; align-items: baseline;
  padding: 16px 12px 16px 0;
  border-radius: 10px;
  transition: background 0.15s var(--n-ease);
}
.n-linkrows a:hover { background: var(--bg-hover); }
.n-linkrows .k { font-weight: 660; font-size: var(--text-small); color: var(--ink); }
.n-linkrows .v { font-size: var(--text-small); color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 640px) {
  .n-linkrows a { grid-template-columns: 1fr; gap: 5px; padding-left: 0; }
}

/* Demo stack: full-width captures, one per row, with a single header line
   above each so the video keeps all the width. */
.n-demos { list-style: none; margin: 0; padding: 0; display: grid; gap: 68px; }
.n-demo-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--n-hair);
}
.n-demo-head p { margin: 0; color: var(--ink-soft); font-size: var(--text-small); }
.n-demo-head .n-micro { justify-self: end; font-variant-numeric: tabular-nums; }
.n-demos .n-window video { display: block; width: 100%; height: auto; }
/* One capture is portrait (1080x1172). Cap its width so it lands at roughly
   the same height as the 16:9 pair instead of running past the viewport. */
.n-demos li.is-tall .n-window { max-width: 640px; margin-inline: auto; }
@media (max-width: 720px) {
  .n-demos { gap: 44px; }
  .n-demo-head { grid-template-columns: auto 1fr; row-gap: 8px; }
  .n-demo-head p { grid-column: 1 / -1; }
  .n-demo-head .n-micro { grid-column: 2; justify-self: end; }
}

/* Capability key list: hotkey, name, one line. Hairlines instead of card
   chrome, because six equal cards carried no hierarchy to justify it. */
.n-caps {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 52px;
}
.n-caps > div { padding: 15px 0 17px; border-top: 1px solid var(--n-hair); }
.n-caps dt {
  display: flex; align-items: center; gap: 10px;
  font-weight: 660; font-size: var(--text-small); color: var(--ink);
}
.n-caps dd {
  margin: 7px 0 0;
  font-size: var(--text-small); line-height: 1.6;
  color: var(--ink-soft); max-width: 48ch;
}
@media (max-width: 720px) { .n-caps { grid-template-columns: 1fr; column-gap: 0; } }

/* Assurance strip: the fine print that used to sit in the hero. Sits tight
   under the scene so it still reads as part of the offer, not as a section. */
.n-assure { padding-block: 26px 0; }
.n-assure-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.n-assure-note {
  margin: 12px auto 0; max-width: 62ch;
  text-align: center;
  font-size: var(--text-micro); color: var(--ink-faint);
}
.n-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font: 640 0.78rem/1 var(--font-mono);
  color: var(--ink-strong);
  background: linear-gradient(180deg, #fff, #f1f4fb);
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 8px; padding: 7px 10px; min-width: 40px;
}

/* ------------------------------------------------------------ cards ------ */
.n-card {
  background: var(--bg-raise);
  border: 1px solid var(--n-hair);
  border-radius: var(--n-r);
  box-shadow: var(--n-sheen), var(--n-shadow-1);
}
.n-card.raise { box-shadow: var(--n-sheen), var(--n-shadow-2); border-radius: var(--n-r-lg); }
.n-card.hover { transition: transform 0.16s var(--n-ease), box-shadow 0.16s var(--n-ease), border-color 0.16s var(--n-ease); }
.n-card.hover:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--n-sheen), var(--n-shadow-2); }
.n-card.inset { background: var(--bg-inset); box-shadow: inset 0 1px 2px rgba(13, 23, 44, 0.05); border-color: transparent; }

.n-tile {
  width: 40px; height: 40px; flex: none;
  display: grid; place-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #F2F6FF, #E4EDFD);
  border: 1px solid rgba(53, 103, 232, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--cobalt-deep);
}
.n-tile svg { width: 20px; height: 20px; }
.n-tile.gold { background: linear-gradient(180deg, #FFF6E4, #FBEACB); border-color: rgba(208, 148, 47, 0.25); color: var(--gold-deep); }
.n-tile.ok { background: linear-gradient(180deg, #EAF7F0, #DBF0E5); border-color: rgba(22, 128, 91, 0.2); color: var(--ok); }

/* ------------------------------------------------------------ grids ------ */
.n-grid { display: grid; gap: 16px; }
.n-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Span utility: lets a grid hold N items in exactly N cells instead of
   leaving a ragged hole when the count does not divide by the column count. */
.n-grid > .span2 { grid-column: span 2; }
@media (max-width: 860px) { .n-grid > .span2 { grid-column: auto; } }

.n-feature { padding: 26px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; overflow-wrap: break-word; }
.n-feature .cat { font: 660 0.64rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt-deep); }
.n-feature h3 { font-size: var(--text-h3); letter-spacing: -0.014em; line-height: 1.3; }
.n-feature h3 a { color: inherit; }
.n-feature h3 a:hover { color: var(--cobalt-deep); }
.n-feature p { font-size: var(--text-small); color: var(--ink-soft); flex: 1; line-height: 1.62; }
.n-feature .meta { font-size: var(--text-micro); color: var(--ink-faint); display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ pagehead --- */
.n-head { position: relative; padding: 84px 0 60px; }
/* The pearl atmosphere now lives on .n-main and flows behind the nav, so the
   page heads stay transparent — one background, no seam. A faint sun-glow is
   kept as an accent on the marketing heads. */
.n-head.sky {
  background:
    radial-gradient(48% 70% at 84% -12%, rgba(53, 103, 232, 0.07) 0%, rgba(53, 103, 232, 0) 60%),
    radial-gradient(34% 52% at 12% -8%, rgba(236, 193, 118, 0.07) 0%, rgba(236, 193, 118, 0) 55%);
  padding: 84px 0 64px;
}
.n-head.paper { background: none; }
.n-head h1 { margin-top: 20px; max-width: 21ch; }
.n-head .n-lede { margin-top: 16px; }
.n-head .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.n-head .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 22px; }

.n-shead { max-width: 680px; }
.n-shead h2 { margin-top: 12px; }
.n-shead p { margin-top: 12px; color: var(--ink-soft); max-width: 58ch; }
.n-shead.center { margin-inline: auto; text-align: center; }
.n-shead.center .n-kick { justify-content: center; }
/* The subheader has a max-width (58ch) narrower than the header block, so in a
   centered head it must center as a block too — otherwise it left-anchors and
   its centered text sits offset from the centered h2 above it. */
.n-shead.center p { margin-inline: auto; }

/* ------------------------------------------------------------ scene band - */
.n-band {
  position: relative; overflow: hidden;
  border-radius: var(--n-r-lg);
  min-height: 340px;
  display: grid; place-content: center; text-align: center;
  padding: 72px 32px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(9, 21, 47, 0.88) 0%, rgba(11, 26, 58, 0.72) 52%, rgba(16, 37, 78, 0.6) 100%),
    url("/assets/hero/la-concha-panorama-1920.webp") center 82% / cover no-repeat,
    var(--night);
  box-shadow: var(--n-shadow-2);
}
/* the legacy hero chain (loaded on index) sets element heading colors —
   out-specify it so band text is always scene-white */
.n-body .n-band h2 { color: #fff; }
.n-body .n-band p { color: rgba(255, 255, 255, 0.9); }
.n-body .n-band .micro { color: rgba(255, 255, 255, 0.72); }
.n-band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, rgba(236, 193, 118, 0) 0%, rgba(236, 193, 118, 0.75) 50%, rgba(236, 193, 118, 0) 100%);
}
.n-band h2 {
  font-family: var(--font-display); font-weight: 560;
  font-size: var(--text-display-2); letter-spacing: -0.014em; line-height: 1.1;
  max-width: 22ch; margin-inline: auto;
  text-shadow: 0 2px 24px rgba(11, 26, 58, 0.6);
}
.n-band p { margin-top: 14px; color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin-inline: auto; font-size: var(--text-body-lg); }
.n-band .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.n-band .micro { margin-top: 22px; font-size: var(--text-micro); color: rgba(255, 255, 255, 0.72); }

/* hero proof-row link (owner call): scene ivory, never raw link-blue */
.n-body .hero-proof-row a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 3px;
}
.n-body .hero-proof-row a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ tables ----- */
.n-tablewrap { border: 1px solid var(--n-hair); border-radius: var(--n-r); background: var(--bg-raise); box-shadow: var(--n-sheen), var(--n-shadow-1); overflow: hidden; }
.n-tablewrap .scroll { overflow-x: auto; }
.n-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.n-table th {
  text-align: left; padding: 13px 18px;
  font: 640 0.64rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  /* On --bg-inset, --ink-faint is 4.30:1. Column headers use soft to clear AA. */
  color: var(--ink-soft); background: var(--bg-inset);
  border-bottom: 1px solid var(--n-hair);
}
/* Row headers carry the table's real content, so they must not inherit the
   column-header treatment above. As faint uppercase mono at ~10px the feature
   names measured 2.54:1 on white, under the 4.5:1 floor, which is why the
   comparison read as a grey wall: the least legible column was the one the
   reader is meant to scan. Column headers keep the mono caps. */
.n-table tbody th[scope="row"] {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 640;
  text-align: left;
  padding: 15px 18px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid var(--n-hair);
}
/* Group label: a quiet inset band, the macOS grouped-list idiom. Keeps the
   mono caps from .n-table th, which is what a label should look like here. */
.n-table .n-tgroup th {
  padding: 12px 18px 10px;
  background: var(--bg-inset);
  border-top: 1px solid var(--n-hair);
  color: var(--ink-soft);
}
.n-table tbody:first-of-type .n-tgroup th { border-top: 0; }
.n-table tbody:last-of-type tr:last-child :is(td, th) { border-bottom: 0; }
.n-partial { color: var(--warn); font-weight: 640; }
.n-table td { padding: 15px 18px; border-bottom: 1px solid var(--n-hair); vertical-align: top; overflow-wrap: anywhere; }
.n-table tr:last-child td { border-bottom: 0; }
.n-table tbody tr { transition: background 0.14s var(--n-ease); }
.n-table tbody tr:hover { background: var(--bg-inset); }
.n-table .num { font-variant-numeric: tabular-nums; }
.n-yes { color: var(--ok); font-weight: 650; }
.n-no { color: var(--ink-faint); }

/* status rows (compat matrix) */
.n-rows { border: 1px solid var(--n-hair); border-radius: var(--n-r); background: var(--bg-raise); box-shadow: var(--n-sheen), var(--n-shadow-1); overflow: hidden; }
.n-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 15px 22px; min-height: 56px; }
.n-row + .n-row { border-top: 1px solid var(--n-hair); }
.n-row .sid { font: 640 0.7rem/1 var(--font-mono); color: var(--ink-faint); background: var(--bg-inset); border-radius: 6px; padding: 6px 8px; justify-self: start; }
.n-row .name { font-weight: 640; font-size: var(--text-small); }
.n-row .note { font-size: var(--text-micro); color: var(--ink-faint); text-align: right; }
.n-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; font-size: var(--text-micro); font-weight: 650; }
.n-pill.ok { background: var(--ok-wash); color: var(--ok); }
.n-pill.ok .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ------------------------------------------------------------ prose ------ */
.n-prose { max-width: 640px; font-size: var(--text-body-lg); line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
.n-prose > * + * { margin-top: 18px; }
.n-prose h2 { font-size: var(--text-h2); letter-spacing: -0.02em; margin-top: 52px; }
.n-prose h3 { font-size: var(--text-h3); margin-top: 36px; }
.n-prose ul, .n-prose ol { padding-left: 22px; display: grid; gap: 10px; }
.n-prose li::marker { color: var(--cobalt); }
.n-prose a { color: var(--link); text-underline-offset: 3px; }
.n-prose blockquote { border: 0; padding: 4px 0 4px 24px; position: relative; font-family: var(--font-display); font-size: 1.16rem; line-height: 1.55; color: var(--ink-strong); }
.n-prose blockquote::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--cobalt-bright), var(--cobalt)); }
.n-prose code { font: 500 0.86em/1.4 var(--font-mono); background: var(--bg-inset); border: 1px solid var(--n-hair); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.n-prose pre { background: var(--night); color: var(--night-ink); border-radius: var(--n-r); padding: 22px 26px; overflow-x: auto; font: 480 0.8rem/1.65 var(--font-mono); box-shadow: inset 0 1px 0 rgba(202, 218, 248, 0.12), var(--n-shadow-1); }
.n-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.n-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-small); display: block; overflow-x: auto; }
.n-prose th, .n-prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--n-hair); }
.n-prose th { font: 640 0.66rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }

/* checklist */
.n-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: var(--text-small); }
.n-checks li { display: flex; gap: 10px; align-items: flex-start; }
.n-checks svg { width: 15px; height: 15px; flex: none; color: var(--ok); margin-top: 3px; }
.n-checks b { font-weight: 650; }
.n-checks span { min-width: 0; overflow-wrap: anywhere; }

/* kv rows */
.n-kv { font-size: var(--text-small); }
.n-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--n-hair); }
.n-kv > div:last-child { border-bottom: 0; }
.n-kv .k { color: var(--ink-soft); }
.n-kv .v { font-weight: 650; text-align: right; }

/* ------------------------------------------------------------ plans ------ */
.n-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.n-plan { position: relative; padding: 34px 26px 26px; display: flex; flex-direction: column; }
/* z-index:2 lifts the hot card (and its overhanging badge) above BOTH neighbor
   cards; without it the later-in-DOM Yearly card paints over the badge's right tail. */
.n-plan.hot { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt), var(--n-sheen), var(--n-shadow-2); z-index: 2; }
.n-plan .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--cobalt-bright), var(--cobalt)); color: #fff;
  font: 660 0.66rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 7px 14px; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(40, 88, 214, 0.6);
}
.n-plan .pname { font-weight: 690; font-size: var(--text-h4); }
.n-plan .pmeta { font-size: var(--text-micro); color: var(--ink-faint); margin-top: 4px; min-height: 2em; }
.n-plan .price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.n-plan .amt { font-size: 2.15rem; font-weight: 740; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.n-plan .per { font-size: var(--text-micro); color: var(--ink-faint); }
.n-plan .blurb { font-size: var(--text-micro); color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.n-plan .n-checks { margin: 18px 0 24px; flex: 1; gap: 9px; font-size: var(--text-micro); }
.n-plan .n-btn { width: 100%; }
.n-plan .foot { font-size: var(--text-micro); color: var(--ink-faint); text-align: center; margin-top: 12px; min-height: 1em; }

/* ------------------------------------------------------------ faq -------- */
.n-faq { padding: 8px 32px; }
.n-faq details { border-bottom: 1px solid var(--n-hair); }
.n-faq details:last-child { border-bottom: 0; }
.n-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 16px 0;
  font-weight: 630; font-size: var(--text-small);
}
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg); margin-right: 4px;
  transition: transform 0.2s var(--n-ease);
}
.n-faq details[open] summary::after { transform: rotate(225deg); }
.n-faq .a { padding: 0 24px 18px 0; font-size: var(--text-small); color: var(--ink-soft); line-height: 1.65; }
.n-faq .a p + p { margin-top: 10px; }
.n-faq2 { column-count: 2; column-gap: 48px; }
.n-faq2 details { break-inside: avoid; }

/* ------------------------------------------------------------ quotes ----- */
.n-quote { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.n-quote blockquote { font-family: var(--font-display); font-size: 1.04rem; line-height: 1.55; color: var(--ink); flex: 1; }
.n-quote figcaption { display: flex; align-items: center; gap: 10px; font-size: var(--text-micro); color: var(--ink-faint); }
.n-quote .init { width: 28px; height: 28px; flex: none; display: grid; place-content: center; border-radius: 8px; background: var(--bg-inset); color: var(--ink-soft); font: 700 0.72rem/1 var(--font-mono); }

/* ------------------------------------------------------------ auth ------- */
.n-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 29px); }
.n-auth-aside {
  position: relative; overflow: hidden; display: flex;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(11, 26, 58, 0.62) 0%, rgba(14, 31, 66, 0.5) 55%, rgba(11, 26, 58, 0.76) 100%),
    url("/assets/hero/la-concha-panorama-1920.webp") 30% 62% / cover no-repeat,
    var(--night);
}
.n-auth-aside .inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; width: 100%; max-width: 560px; margin-inline: auto; }
.n-auth-aside .n-brand { color: #fff; }
.n-auth-aside .promo { margin-top: auto; padding-bottom: 16px; }
.n-auth-aside .ey { display: inline-flex; align-items: center; gap: 10px; font: 660 0.66rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #CFE0FB; }
.n-auth-aside .ey::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--gold); }
.n-auth-aside h2 { font-family: var(--font-display); font-weight: 560; font-size: var(--text-display-2); letter-spacing: -0.012em; color: #fff; margin-top: 18px; max-width: 15ch; text-shadow: 0 2px 20px rgba(11, 26, 58, 0.55); }
.n-auth-aside .promo p { margin-top: 14px; color: rgba(230, 239, 252, 0.88); font-size: var(--text-body-lg); max-width: 42ch; }
.n-auth-aside .n-checks { margin-top: 22px; }
.n-auth-aside .n-checks li { color: #EAF0FC; }
.n-auth-aside .n-checks svg { color: #7ED9AC; }
.n-auth-panel { display: grid; place-content: center; padding: 24px; }
.n-authcard { width: min(420px, calc(100vw - 48px)); padding: 28px 32px; }
.n-authcard h1 { font-size: var(--text-h3); letter-spacing: -0.02em; margin-top: 14px; }
.n-authcard .sub { color: var(--ink-soft); font-size: var(--text-small); margin-top: 4px; }
.n-authcard form { margin-top: 16px; display: grid; gap: 10px; }
.n-authcard .n-btn { width: 100%; min-height: 42px; }
.n-authcard .alt { text-align: center; font-size: var(--text-small); color: var(--ink-soft); margin-top: 10px; }
.n-authcard .split { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: var(--text-micro); }
.n-authcard .split::before, .n-authcard .split::after { content: ""; height: 1px; background: var(--n-hair); flex: 1; }

.n-field label { display: block; font-size: var(--text-micro); font-weight: 650; margin-bottom: 5px; color: var(--ink); }
.n-input {
  width: 100%; min-height: 42px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: #fff; padding: 0 14px;
  font-size: var(--text-small); font-family: inherit; color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(13, 23, 44, 0.04);
  transition: border-color 0.15s var(--n-ease), box-shadow 0.15s var(--n-ease);
}
.n-input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--selection); }
.n-field .hint { font-size: var(--text-micro); color: var(--ink-faint); margin-top: 5px; }
.n-field .hint a { color: var(--link); }

/* ------------------------------------------------------------ app shell -- */
.n-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 29px); }
.n-rail {
  border-right: 1px solid var(--n-hair);
  background: rgba(247, 248, 252, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: 20px 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 29px; height: calc(100vh - 29px);
}
.n-rail .n-brand { padding: 4px 10px 16px; }
.n-rail .grp { font: 660 0.6rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 10px 6px; }
.n-ritem {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent;
  font-size: var(--text-small); font-weight: 610; color: var(--ink-soft);
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.14s var(--n-ease), color 0.14s var(--n-ease);
}
.n-ritem svg { width: 16px; height: 16px; flex: none; }
.n-ritem:hover { background: var(--bg-hover); color: var(--ink-strong); }
.n-ritem.on { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 660; }
.n-rail .foot { margin-top: auto; }
.n-apphead {
  position: sticky; top: 29px; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 0 28px;
  border-bottom: 1px solid var(--n-hair);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.n-apphead h1 { font-size: var(--text-h3); letter-spacing: -0.014em; }
.n-appmain { padding: 28px; max-width: 1040px; }
.n-stat { padding: 18px 20px; min-width: 0; }
.n-stat .v { font-size: 1.55rem; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.n-stat .l { font-size: var(--text-micro); color: var(--ink-faint); margin-top: 2px; }

/* rail badges + section groups */
.n-rail .n-badge { margin-left: auto; font: 640 0.58rem/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; }
.n-rail .n-badge.plus { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.n-rail .n-badge.new { background: var(--gold-deep); color: #fff; }
.n-ritem.gold { color: var(--gold-deep); font-weight: 660; }
.n-ritem.gold:hover { background: var(--warn-wash); }
.n-rail .profile { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 8px; border-top: 1px solid var(--n-hair); }
.n-rail .profile .av { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(150deg, var(--gold), var(--gold-deep)); color: #fff; display: grid; place-content: center; font: 700 0.72rem/1 var(--font-ui); }
.n-rail .profile .nm { font-size: var(--text-small); font-weight: 640; line-height: 1.2; min-width: 0; }
.n-rail .profile .em { font-size: var(--text-micro); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dashboard section head + notice + changelog */
.n-dsec { margin-bottom: 24px; }
.n-dsec h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
.n-dsec p { color: var(--ink-soft); margin-top: 8px; max-width: 64ch; }
.n-notice { display: flex; gap: 14px; padding: 18px 20px; border-radius: 12px; background: var(--warn-wash); border: 1px solid rgba(163, 95, 0, 0.18); }
.n-notice .ic { width: 20px; height: 20px; flex: none; color: var(--warn); }
.n-notice h3 { font-size: var(--text-h4); }
.n-notice p { font-size: var(--text-small); color: var(--ink-soft); margin-top: 4px; }
.n-log { display: grid; gap: 10px; }
.n-logrow { display: grid; grid-template-columns: 116px 1fr; gap: 20px; padding: 18px 20px; }
.n-logrow .ver { display: flex; flex-direction: column; gap: 6px; }
.n-logrow .vtag { font: 700 0.82rem/1 var(--font-mono); color: var(--ink-strong); }
.n-logrow .vdate { font-size: var(--text-micro); color: var(--ink-faint); }
.n-logrow .tags { display: flex; gap: 5px; }
.n-logrow .t { font: 640 0.56rem/1 var(--font-mono); letter-spacing: 0.05em; padding: 3px 6px; border-radius: 5px; }
.n-logrow .t.plus { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.n-logrow .t.free { background: var(--bg-inset); color: var(--ink-soft); }
.n-logrow .note { font-size: var(--text-small); color: var(--ink-soft); line-height: 1.6; align-self: center; }
.n-copybtn.is-ok { color: var(--ok); border-color: var(--ok); }
@media (max-width: 640px) { .n-logrow { grid-template-columns: 1fr; gap: 10px; } }

/* ── social-proof logo wall ──────────────────────────────────────────── */
.n-logowall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 32px; }
.n-logowall img { height: 26px; width: auto; max-width: 118px; object-fit: contain; opacity: 0.92; }

/* ── diagram figure ──────────────────────────────────────────────────── */
.n-figure { background: var(--bg-raise); border: 1px solid var(--n-hair); border-radius: var(--n-r-lg); box-shadow: var(--n-sheen), var(--n-shadow-1); padding: 22px; }
.n-figure img { width: 100%; height: auto; display: block; }
.n-figure figcaption { font-size: var(--text-micro); color: var(--ink-faint); margin-top: 12px; text-align: center; }

/* ── platform compatibility grid ─────────────────────────────────────── */
.n-platgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.n-platcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; position: relative; overflow: hidden; }
.n-platcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand, var(--cobalt)); opacity: 0.9; }
.n-platcard .top { display: flex; align-items: center; gap: 12px; }
/* white tile so the official full-color marks read cleanly; color comes
   from the logo itself + the brand accent bar on the card */
.n-plat { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-content: center; background: #fff; border: 1px solid var(--n-hair); box-shadow: var(--n-sheen), 0 2px 8px -4px rgba(13, 23, 44, 0.14); overflow: hidden; }
.n-plat img, .n-plat svg { width: 26px; height: 26px; display: block; object-fit: contain; }
.n-plat .mono { font: 800 0.82rem/1 var(--font-ui); letter-spacing: -0.02em; color: var(--brand, var(--cobalt)); }
.n-platcard .name { font-weight: 660; font-size: var(--text-small); }
.n-platcard .rec { font-size: var(--text-micro); color: var(--ink-faint); }
.n-platcard .n-pill { align-self: flex-start; }
@media (max-width: 1080px) { .n-platgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .n-platgrid { grid-template-columns: 1fr; } }

/* ── glossary directory ──────────────────────────────────────────────── */
.n-letters { display: flex; flex-wrap: wrap; gap: 4px; }
.n-letters a { width: 36px; min-height: 36px; display: grid; place-content: center; border-radius: 9px; font: 660 0.76rem/1 var(--font-mono); color: var(--ink-soft); border: 1px solid transparent; transition: background 0.14s var(--n-ease), border-color 0.14s var(--n-ease), color 0.14s var(--n-ease); }
.n-letters a:hover { background: var(--bg-raise); border-color: var(--n-hair); color: var(--cobalt-deep); }
.n-gletter { font: 700 1.1rem/1 var(--font-mono); color: var(--cobalt-deep); padding: 8px 0; margin-top: 32px; border-bottom: 1px solid var(--n-hair); }
.n-term { padding: 22px 0; border-top: 1px solid var(--n-hair); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
.n-term:first-of-type { border-top: 0; }
.n-term dt { font-weight: 680; font-size: var(--text-h4); letter-spacing: -0.01em; }
.n-term dd { font-size: var(--text-body); color: var(--ink-soft); line-height: var(--leading-body); }
@media (max-width: 720px) { .n-term { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } }

/* ── proctor scanner ─────────────────────────────────────────────────── */
.n-scanbar { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: var(--text-micro); color: var(--ink-soft); flex-wrap: wrap; }
.n-scanbar .live { display: inline-flex; align-items: center; gap: 7px; font-weight: 640; color: var(--ink); }
.n-scanbar .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.n-statstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.n-statstrip .s { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--n-hair); background: var(--bg-raise); box-shadow: var(--n-sheen); }
.n-statstrip .s .l { font: 640 0.6rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ink-faint); }
.n-statstrip .s .v { font-size: 1.7rem; font-weight: 740; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.n-statstrip .s.trig .v { color: var(--bad); }
.n-statstrip .s.live .v { color: var(--cobalt-deep); }
.n-vgroup { margin-top: 32px; }
.n-vgroup .gh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--n-hair); }
.n-vgroup .gh h3 { font: 660 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt-deep); }
.n-vgroup .gh p { font-size: var(--text-micro); color: var(--ink-faint); }
.n-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.n-vcard { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.n-vcard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.n-vcard .name { font-weight: 640; font-size: var(--text-small); }
.n-vcard .desc { font-size: var(--text-micro); color: var(--ink-soft); line-height: 1.55; }
.n-vcard .val { font: 560 0.72rem/1.4 var(--font-mono); color: var(--ink); background: var(--bg-inset); border-radius: 7px; padding: 7px 9px; overflow-wrap: anywhere; }
.n-vcard .hint { font-size: var(--text-micro); color: var(--ink-faint); font-style: italic; }
.n-vstat { font: 640 0.56rem/1 var(--font-mono); letter-spacing: 0.06em; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.n-vstat.live { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.n-vstat.wait { background: var(--bg-inset); color: var(--ink-faint); }
.n-vstat.trig { background: var(--bad-wash); color: var(--bad); }
.n-vstat.clean { background: var(--ok-wash); color: var(--ok); }
.n-vcard.is-trig { border-color: rgba(200, 62, 82, 0.35); }
.n-events { font: 500 0.72rem/1.5 var(--font-mono); }
.n-events .ev { display: grid; grid-template-columns: 96px 92px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--n-hair); }
.n-events .ev:last-child { border-bottom: 0; }
.n-events .ts { color: var(--ink-faint); }
.n-events .mod { color: var(--cobalt-deep); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.06em; align-self: center; }
.n-events .msg { color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .n-statstrip { grid-template-columns: repeat(2, 1fr); }
  .n-events .ev { grid-template-columns: 1fr; gap: 2px; }
}

/* window frame (product video) */
.n-window { border-radius: var(--n-r-lg); overflow: hidden; background: var(--bg-raise); border: 1px solid var(--n-hair); box-shadow: var(--n-shadow-2); }
.n-window .bar { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--n-hair); background: linear-gradient(180deg, #FDFDFE, #F4F6FB); }
.n-window .dots { display: flex; gap: 6px; }
.n-window .dots i { width: 11px; height: 11px; border-radius: 50%; background: #E3E7F0; border: 1px solid rgba(13, 23, 44, 0.08); }
.n-window .dots i:nth-child(1) { background: #F6BEBE; } .n-window .dots i:nth-child(2) { background: #F4DCA9; } .n-window .dots i:nth-child(3) { background: #BFE6C3; }
.n-window .title { font: 600 0.72rem/1 var(--font-mono); color: var(--ink-soft); margin-inline: auto; }
.n-window video, .n-window img { display: block; width: 100%; height: auto; }
/* Demo grid: force a uniform 16:10 media box so the three cards align regardless
   of each poster's native aspect ratio. */
.n-demogrid .n-window video { aspect-ratio: 16 / 10; height: auto; object-fit: cover; }

/* ------------------------------------------------------------ footer ----- */
.n-foot { margin-top: 40px; border-top: 1px solid var(--n-hair); background: linear-gradient(180deg, var(--bg-page), var(--sky-0)); position: relative; }
.n-foot::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sky-3), var(--bay), var(--gold), var(--sky-3)); opacity: 0.5; }
.n-foot .grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 56px 0 40px; }
.n-foot strong { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-family: var(--font-mono); font-weight: 660; }
.n-foot ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.n-foot ul a { display: inline-flex; min-height: 32px; align-items: center; color: var(--ink-soft); font-size: var(--text-small); }
.n-foot ul a:hover { color: var(--ink-strong); }
.n-foot .legal { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 18px 0 28px; border-top: 1px solid var(--n-hair); font-size: var(--text-micro); color: var(--ink-faint); }
.n-foot .legal a { color: var(--ink-soft); }
.n-foot .legal a:hover { color: var(--ink-strong); }

/* ------------------------------------------------------------ reveals ---- */
.js .n-rv { opacity: 0; transform: translateY(14px); transition: opacity 0.46s var(--n-ease), transform 0.46s var(--n-ease); transition-delay: var(--d, 0ms); }
.js .n-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .n-rv { opacity: 1; transform: none; transition: none; }
  .n-btn, .n-card.hover, .n-ritem, .n-faq summary::after { transition: none; }
  .n-card.hover:hover { transform: none; }
  .n-btn:active { transform: none; }
}

/* ------------------------------------------------------------ responsive - */
@media (max-width: 1080px) {
  .n-grid.c3, .n-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .n-plan.hot { order: -1; }
  .n-faq2 { column-count: 1; }
  .n-auth { grid-template-columns: 1fr; }
  .n-auth-aside { display: none; }
  .n-app { grid-template-columns: 1fr; }
  .n-rail { position: static; height: auto; flex-direction: row; overflow-x: auto; align-items: center; }
  .n-rail .n-brand { padding: 4px 10px; }
  .n-rail .grp, .n-rail .foot { display: none; }
}
@media (max-width: 880px) {
  .n-nav .links { display: none; }
  .n-foot .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* Collapse every inline 2-column grid (text+card splits, side-by-sides,
     flex+sidebar) to a single column so wide children can't overflow. Matches
     only values that START with minmax( — the 3-col "Npx minmax auto" rows are
     left intact. */
  [style*="grid-template-columns:minmax(0,"] { grid-template-columns: minmax(0, 1fr) !important; }
  .n-sec { padding-block: 56px; }
  .n-head { padding: 64px 0 40px; }
  .n-head.sky { padding: 72px 0 48px; }
  .n-grid.c2, .n-grid.c3, .n-grid.c4 { grid-template-columns: 1fr; }
  .n-band { min-height: 280px; padding: 56px 20px; }
  .n-row { grid-template-columns: minmax(0, 1fr) auto; }
  .n-row .sid, .n-row .note { display: none; }
  .n-wrap { width: calc(100% - 32px); }
}

/* ==========================================================================
   Live product-chat panel (the ACTUAL assistant surface, lifted verbatim from
   the Claude design handoff). The panel markup carries its own inline styles;
   this block only supplies the base rules those inline styles depend on
   (hover states, scrollbar, keyframes) + the interactive-message styling.
   All scoped under .n-chat so nothing bleeds into the porcelain site.
   ========================================================================== */
.n-chat { display: flex; justify-content: center; }
.n-chat * { box-sizing: border-box; }
.n-chat .scp0:hover { background: rgba(214, 98, 90, 0.2); }
.n-chat .scp1:hover { border-color: rgba(225, 178, 92, 0.55); background: rgba(225, 178, 92, 0.1); color: rgb(225, 178, 92); }
.n-chat .scp3:hover { background: rgb(239, 198, 120); }
.n-chat .scp5:hover { border-color: rgba(225, 178, 92, 0.5); color: rgb(225, 178, 92); }
.n-chat .scp6:hover { background: rgba(225, 178, 92, 0.26); }
.n-chat [data-scroll] { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.n-chat [data-scroll]::-webkit-scrollbar { width: 8px; }
.n-chat [data-scroll]::-webkit-scrollbar-thumb { background: padding-box rgba(255,255,255,.15); border-radius: 99px; border: 2px solid transparent; }
.n-chat [data-scroll]::-webkit-scrollbar-track { background: transparent; }
.n-chat input::placeholder { color: rgb(110, 102, 92); }
.n-chat input:focus { outline: none; }
@keyframes acl-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes acl-think { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes acl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.n-chat .acl-msg { animation: acl-in .28s cubic-bezier(.2,.7,.2,1) both; }
.n-chat .send-hot { background: #E1B25C !important; color: #15130D !important; }
.n-chat .send-hot:hover { background: #EFC678 !important; }
@media (prefers-reduced-motion: reduce) {
  .n-chat *, .n-chat .acl-msg { animation-duration: .001s !important; animation: none !important; }
}

/* Home hero: dock the live chat (left) beside the CodeSignal window (right).
   Widens the moored stage and lays the pair out as a bottom-aligned row. */
.hero-stage.hero-duo {
  width: min(1180px, calc(100% - 40px));
  /* chat + gap + window render as ONE centered unit (owner 2026-07-22):
     override the scenic stage's single-window right-mooring. */
  margin-left: auto; margin-right: auto;
  display: flex; align-items: stretch; gap: clamp(16px, 2.2vw, 32px);
}
.hero-duo .hero-window { flex: 1 1 0%; min-width: 0; align-self: flex-end; }
/* The window drives the row height. The chat panel is positioned absolutely so
   its (fixed, tallish) content never inflates the row — instead it fills the
   window's height and its feed scrolls if needed. Result: chat + window stay
   exactly the same height at every desktop width, both resizing together. */
.hero-duo .hero-chat { flex: 0 0 clamp(300px, 32%, 404px); position: relative; }
.hero-duo .hero-chat > [data-screen-label] { position: absolute !important; inset: 0; width: auto !important; height: auto !important; }
@media (max-width: 1180px) {
  /* below the stage's max width, keep the pair side-by-side but let the stage
     use the full width so the chat + window both shrink together. */
  .hero-stage.hero-duo { gap: clamp(12px, 1.8vw, 24px); }
}
@media (max-width: 859px) {
  /* true mobile only: the scenic hero is too tight for a usable pair — fall
     back to the single window. Desktop keeps chat-left / window-right. */
  .hero-stage.hero-duo { width: min(680px, calc(100% - 40px)); }
  .hero-duo .hero-chat { display: none; }
}

/* ==========================================================================
   Reactive additions — macOS/visionOS-grade micro-interactions (Kimi set).
   Tokens-matched to the porcelain/cobalt system, all reduced-motion-safe.
   ========================================================================== */

/* 1 · Specular tilt — pointer-tracked light + subtle 3D on feature cards.
   No overflow:hidden (some feature cards bleed a .n-window past their edge);
   the glare is a radius-inherited overlay that fades out before the corners. */
.n-card.n-feature { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .n-card.n-feature { transform: perspective(1100px); }
  .n-card.n-feature > .n-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
    opacity: 0; transition: opacity .35s var(--n-ease);
    /* warm sun-glint: bright warm-cream core + brand-gold halo — reads on white porcelain
       (a plain white soft-light glare is invisible on a white card). */
    background:
      radial-gradient(140px 140px at var(--gx, 50%) var(--gy, 0%), rgba(255,250,235,.78), rgba(255,245,220,.28) 42%, rgba(255,240,200,0) 70%),
      radial-gradient(320px 320px at var(--gx, 50%) var(--gy, 0%), rgba(236,193,118,.30), rgba(236,193,118,.12) 45%, rgba(236,193,118,0) 72%);
  }
  .n-card.n-feature.is-tilt { box-shadow: var(--n-sheen), 0 24px 50px -22px rgba(236,193,118,.38), 0 6px 16px rgba(16,22,40,.10); border-color: var(--border-strong); }
  .n-card.n-feature.is-tilt > .n-glare { opacity: 1; }
}

/* 2 · Living glass nav — deepen the frost when the existing v5/n nav
   condenses, plus a cobalt scroll-progress hairline at the very top. */
.site-nav.is-scrolled .nav-shell,
.n-nav.is-scrolled .shell {
  backdrop-filter: blur(22px) saturate(1.55); -webkit-backdrop-filter: blur(22px) saturate(1.55);
  box-shadow: 0 1px 0 var(--n-hair), 0 14px 34px -20px rgba(16,22,40,.5);
}
.n-navprog {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; z-index: 300; pointer-events: none;
  background: linear-gradient(90deg, var(--cobalt), var(--cobalt-bright));
  box-shadow: 0 0 10px rgba(40,88,214,.5);
}
@media (prefers-reduced-motion: reduce) { .n-navprog { display: none; } }

/* 3 · Magnetic primary CTAs — lean toward the pointer + ambient cobalt glow.
   Spring curve; the transform itself is set inline by the runtime. */
@media (prefers-reduced-motion: no-preference) {
  .btn-scene-primary, .n-btn.pri, .nav-cta { transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s var(--n-ease); will-change: transform; }
  .is-magnetic { box-shadow: 0 12px 30px -10px rgba(40,88,214,.55) !important; }
}

/* 4 · Scroll-depth stats — count-up numerals (tabular so width won't jump). */
.n-stat .v { font-variant-numeric: tabular-nums; }
/* ==========================================================================
   Founder WhatsApp FAB — porcelain-glass pill, bottom-right. Hidden through
   the hero; runtime.js toggles .on once the user scrolls past it. Mobile
   collapses to the circular FAB (same pattern as the old site).
   ========================================================================== */
.n-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 99px;
  background: rgba(37, 36, 36, 0.97); border: 1px solid rgb(62, 58, 52);
  color: rgb(236, 232, 225); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  text-decoration: none; cursor: pointer;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1), border-color .15s, color .15s;
}
.n-fab.on { opacity: 1; transform: none; pointer-events: auto; }
.n-fab:hover { border-color: rgba(225, 178, 92, 0.55); color: #E1B25C; }
.n-fab:focus-visible { outline: 2px solid rgba(225, 178, 92, 0.7); outline-offset: 2px; }
.n-fab svg { flex: 0 0 auto; }
@media (max-width: 639px) { .n-fab { padding: 12px; min-width: 44px; min-height: 44px; justify-content: center; } .n-fab span { display: none; } }
@media (prefers-reduced-motion: reduce) { .n-fab { transition: none; transform: none; } }
/* Discord brand mark injected by runtime.js on the Community nav links. */
nav a.has-discord-ic { display: inline-flex; align-items: center; gap: 5px; }
nav a.has-discord-ic .nav-discord-ic { flex: 0 0 auto; }


/* Production: the candidate strip is removed. */
.n-nav{top:0}

/* The server-owned launch message can be longer than the review fixture.
   Keep its approved pill treatment while containing it inside mobile cards. */
@media (max-width:520px){
  .n-plan .flag{
    box-sizing:border-box;
    width:max-content;
    max-width:calc(100% - 24px);
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
    line-height:1.25;
  }
}