/*!
 * noctis-system.css — shared design system for the Noctis Group estate
 * Divisions: Noctis (parent) · Overnight · Midnight · Independent fronts
 *
 * v2 (2026-09-10): colour moved onto surfaces. v1 put the accent on links
 * and hairlines only, which read as a monochrome template. v2 gives every
 * division a three-tone palette — accent, secondary (--nx-accent-2), deep
 * (--nx-accent-deep) — and spends the deep tone on the surfaces that carry
 * a page: header rule, hero panel, table header, primary CTA, footer.
 * Every v1 class name and custom-property name still works; v2 only adds
 * tokens and changes values, so a vendored site upgrades by file swap.
 *
 * Load order in <head>:
 *   1. fonts.css (self-hosted Inter + IBM Plex Mono) — see README.md
 *   2. This file
 *
 * Division theming: set data-division="noctis|overnight|midnight|independent"
 * on <html>. That attribute switches ONLY custom properties (the accent,
 * secondary and deep families listed in §1) — every rule in this file is
 * shared, and no page should override a colour with an inline style.
 *
 * Bilingual contract (kept identical to the existing overnight.host chrome
 * so pages that already carry this markup keep working unmodified):
 *   <html data-lang="en"|"de">
 *   <span data-l="en">…</span><span data-l="de">…</span>
 *   html[data-lang="en"] [data-l="de"] { display:none }
 *   html[data-lang="de"] [data-l="en"] { display:none }
 * The toggle script (lang-toggle.js) is the only piece that writes
 * data-lang and localStorage; this file only reacts to the attribute.
 *
 * No gradients. No drop shadows. No pill buttons. One 4px radius throughout.
 * Every text pair in here is at or above 4.5:1 — see the table in README.md.
 */

/* ============================================================
   1. CUSTOM PROPERTIES
   ------------------------------------------------------------
   Per-division palette contract (v2). A division block sets all
   of these and nothing else:

     --nx-accent          the division's colour, used for text-level
                          accents: links, eyebrows, h2 rules, icons
     --nx-accent-ink      text drawn on an --nx-accent fill
     --nx-accent-soft     the same colour as a tint, for panels
     --nx-accent-line     the same colour as a hairline/border
     --nx-accent-2        the secondary, for rules and marks only
     --nx-accent-2-soft   secondary as a tint
     --nx-accent-2-line   secondary as a hairline
     --nx-accent-2-text   secondary darkened until it is AA text
     --nx-accent-deep     the deep tone, for large surfaces
     --nx-accent-deep-ink primary text on the deep tone
     --nx-accent-deep-muted  secondary text and links on the deep tone
     --nx-accent-deep-line   hairline drawn on the deep tone
     --nx-numeral         colour for figures (stats, prices)
     --nx-on-accent       text on the accent when accent-ink is a highlight
     --nx-cta-bg / --nx-cta-bg-hover / --nx-cta-ink   the primary button
     --nx-ok-on-deep      the OK status dot, on a deep surface
   ============================================================ */
:root{
  /* Base ink / paper — same on every division, every property */
  --nx-ink: #111418;
  --nx-ink-soft: #3A4048;
  --nx-paper: #FAFAF8;
  --nx-paper-2: #F1F0EA;
  --nx-paper-3: #E9E7DF;
  --nx-line: #DBD8CE;
  --nx-line-strong: #C7C3B6;
  --nx-white: #FFFFFF;
  --nx-muted: #565F68;
  --nx-muted-2: #666D75;   /* v2: was #7A8189 (3.8:1 on paper — under AA) */
  --nx-danger: #8A2A2A;
  --nx-ok: #1E6B4A;
  --nx-ok-on-deep: #35C08A;  /* the OK dot, readable on --nx-accent-deep */

  /* Division palette — default = Noctis, the parent. v1 used ink as the
     Noctis accent (deliberately colourless); v2 gives the parent its own
     identity: a deep slate-navy with a muted brass secondary used sparingly
     for rules and numerals. Divisions override the whole set below. */
  --nx-accent: #1E2A3A;
  --nx-accent-ink: #FAFAF8;
  --nx-accent-soft: rgba(30,42,58,.10);
  --nx-accent-line: rgba(30,42,58,.30);
  --nx-accent-2: #B08D57;
  --nx-accent-2-soft: rgba(176,141,87,.14);
  --nx-accent-2-line: rgba(176,141,87,.42);
  --nx-accent-2-text: #6E5323;
  --nx-accent-deep: #16202C;
  --nx-accent-deep-ink: #F3F5F8;
  --nx-accent-deep-muted: #B9C2CE;
  --nx-accent-deep-line: rgba(243,245,248,.18);
  --nx-numeral: var(--nx-accent-2-text);   /* the parent counts in brass */
  --nx-on-accent: #FFFFFF;
  --nx-cta-bg: var(--nx-accent-deep);
  --nx-cta-bg-hover: var(--nx-accent);
  --nx-cta-ink: var(--nx-accent-deep-ink);

  /* Type */
  --nx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --nx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

  --nx-size-xs: 0.8125rem;   /* 13px */
  --nx-size-sm: 0.9375rem;   /* 15px */
  --nx-size-base: 1rem;      /* 16px */
  --nx-size-md: 1.125rem;    /* 18px */
  --nx-size-lg: 1.375rem;    /* 22px */
  --nx-size-xl: 1.75rem;     /* 28px */
  --nx-size-2xl: 2.25rem;    /* 36px */
  --nx-size-3xl: 3rem;       /* 48px */
  --nx-size-4xl: 3.75rem;    /* 60px — desktop hero only */

  /* Hero headline: 36px on a phone, 60px from ~1200px up. 700 is the
     heaviest weight shipped in fonts/, so the hero gets its weight from
     size and tighter tracking rather than from an 800 face. */
  --nx-hero-title: clamp(var(--nx-size-2xl), 1.35rem + 3.2vw, var(--nx-size-4xl));

  --nx-leading-tight: 1.18;
  --nx-leading-normal: 1.62;
  --nx-tracking-eyebrow: .14em;

  /* Spacing — 4px base scale */
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 24px;
  --nx-space-6: 32px;
  --nx-space-7: 48px;
  --nx-space-8: 64px;
  --nx-space-9: 96px;

  --nx-radius: 4px;
  --nx-rule-thick: 3px;   /* accent rules: hero, h2, cards, notices */
  --nx-rule-brand: 4px;   /* the two brand rules: header top, footer top */

  /* Container widths */
  --nx-container-prose: 720px;
  --nx-container-narrow: 960px;
  --nx-container-wide: 1200px;

  --nx-header-h: 68px;
  --nx-gutter: 24px;
}

/* Division palettes — each block sets the full colour contract, nothing else */
html[data-division="overnight"]{
  --nx-accent: #1B3A6B;
  --nx-accent-ink: #FAFAF8;
  --nx-accent-soft: rgba(27,58,107,.10);
  --nx-accent-line: rgba(27,58,107,.30);
  --nx-accent-2: #2D9491;                  /* the overnight.host brand teal */
  --nx-accent-2-soft: rgba(45,148,145,.14);
  --nx-accent-2-line: rgba(45,148,145,.42);
  --nx-accent-2-text: #1E6B69;
  --nx-accent-deep: #132A4E;
  --nx-accent-deep-ink: #F2F5FA;
  --nx-accent-deep-muted: #B6C4DA;
  --nx-accent-deep-line: rgba(242,245,250,.18);
  --nx-numeral: var(--nx-accent);
}
html[data-division="midnight"]{
  --nx-accent: #3B2A5E;
  --nx-accent-ink: #FAFAF8;
  --nx-accent-soft: rgba(59,42,94,.10);
  --nx-accent-line: rgba(59,42,94,.30);
  --nx-accent-2: #8B6BAF;
  --nx-accent-2-soft: rgba(139,107,175,.14);
  --nx-accent-2-line: rgba(139,107,175,.42);
  --nx-accent-2-text: #6A4A8E;
  --nx-accent-deep: #2C1F47;
  --nx-accent-deep-ink: #F5F2FA;
  --nx-accent-deep-muted: #C6BAD9;
  --nx-accent-deep-line: rgba(245,242,250,.18);
  --nx-numeral: var(--nx-accent);
}
html[data-division="noctis"]{
  --nx-accent: #1E2A3A;
  --nx-accent-ink: #FAFAF8;
  --nx-accent-soft: rgba(30,42,58,.10);
  --nx-accent-line: rgba(30,42,58,.30);
  --nx-accent-2: #B08D57;
  --nx-accent-2-soft: rgba(176,141,87,.14);
  --nx-accent-2-line: rgba(176,141,87,.42);
  --nx-accent-2-text: #6E5323;
  --nx-accent-deep: #16202C;
  --nx-accent-deep-ink: #F3F5F8;
  --nx-accent-deep-muted: #B9C2CE;
  --nx-accent-deep-line: rgba(243,245,248,.18);
  --nx-numeral: var(--nx-accent-2-text);
}
html[data-division="independent"]{
  --nx-accent: #3E4C59;
  --nx-accent-ink: #FAFAF8;
  --nx-accent-soft: rgba(62,76,89,.10);
  --nx-accent-line: rgba(62,76,89,.30);
  --nx-accent-2: #6B8299;
  --nx-accent-2-soft: rgba(107,130,153,.14);
  --nx-accent-2-line: rgba(107,130,153,.42);
  --nx-accent-2-text: #4A6076;
  --nx-accent-deep: #2E3A45;
  --nx-accent-deep-ink: #F5F6F8;
  --nx-accent-deep-muted: #BFC7CF;
  --nx-accent-deep-line: rgba(245,246,248,.18);
  --nx-numeral: var(--nx-accent);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--nx-paper);
  color: var(--nx-ink);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-size-base);
  line-height: var(--nx-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6{
  margin: 0 0 var(--nx-space-4);
  font-weight: 700;
  line-height: var(--nx-leading-tight);
  letter-spacing: -0.01em;
}
h1{ font-size: var(--nx-size-3xl); letter-spacing: -0.02em; }
h2{ font-size: var(--nx-size-2xl); letter-spacing: -0.018em; }
h3{ font-size: var(--nx-size-xl); }
h4{ font-size: var(--nx-size-md); }
p{ margin: 0 0 var(--nx-space-4); }
a{ color: inherit; }
a.nx-link{ color: var(--nx-accent); text-decoration: underline; text-underline-offset: 2px; }
a.nx-link:hover{ text-decoration: none; }
ul, ol{ margin: 0 0 var(--nx-space-4); padding-left: 1.15em; }
hr{ border: none; border-top: 1px solid var(--nx-line); margin: var(--nx-space-6) 0; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.nx-sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[hidden]{ display: none !important; }

/* Numerals: use the mono face wherever numbers/prices/specs need to line up */
.nx-mono{ font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; }

/* A short accent rule under every section heading (v2). Scoped to
   .nx-section so footer/card headings keep their own shape. */
.nx-section h2{ position: relative; padding-bottom: var(--nx-space-3); }
.nx-section h2::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: var(--nx-rule-thick); background: var(--nx-accent);
}
.nx-card h2, .nx-price-card h2, .nx-notice h2{ padding-bottom: 0; }
.nx-card h2::after, .nx-price-card h2::after,
.nx-notice h2::after, .nx-footer__heading::after{ content: none; }

/* ============================================================
   3. BILINGUAL CONTRACT (identical to overnight.host's chrome)
   ============================================================ */
html[data-lang="en"] [data-l="de"]{ display: none; }
html[data-lang="de"] [data-l="en"]{ display: none; }
/* Until lang-toggle.js runs, default to English so no-JS visitors see one
   complete language rather than both stacked. */
html:not([data-lang]) [data-l="de"]{ display: none; }
html[data-lang="de"]{ hyphens: auto; -webkit-hyphens: auto; }

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */
.nx-container{
  max-width: var(--nx-container-wide);
  margin: 0 auto;
  padding: 0 var(--nx-gutter);
}
.nx-container--narrow{ max-width: var(--nx-container-narrow); }
.nx-container--prose{ max-width: var(--nx-container-prose); }

.nx-section{ padding: var(--nx-space-8) 0; }
.nx-section--tight{ padding: var(--nx-space-6) 0; }
.nx-section + .nx-section{ border-top: 1px solid var(--nx-line); }

.nx-eyebrow{
  display: inline-flex; align-items: center; gap: var(--nx-space-2);
  font-size: var(--nx-size-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase; color: var(--nx-accent);
  margin: 0 0 var(--nx-space-3);
}
/* The secondary colour's one recurring job in body copy: a short mark
   in front of the eyebrow. Decorative — never the only cue. */
.nx-eyebrow::before{
  content: ""; flex: none; width: 18px; height: 2px;
  background: var(--nx-accent-2);
}
.nx-lede{
  font-size: var(--nx-size-md); color: var(--nx-ink-soft);
  max-width: 62ch; margin: 0 0 var(--nx-space-5);
}
.nx-kicker{
  font-size: var(--nx-size-xs); font-weight: 700;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase; color: var(--nx-accent);
  margin: 0 0 var(--nx-space-2);
}

/* ============================================================
   5. HEADER
   ============================================================ */
.nx-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--nx-paper);
  border-top: var(--nx-rule-brand) solid var(--nx-accent-deep);
  border-bottom: 1px solid var(--nx-line);
}
.nx-header__inner{
  display: flex; align-items: center; gap: var(--nx-space-5);
  min-height: var(--nx-header-h);
}
.nx-logo{
  display: inline-flex; align-items: baseline; gap: var(--nx-space-2);
  font-weight: 700; font-size: var(--nx-size-md);
  color: var(--nx-ink); text-decoration: none; white-space: nowrap;
  border-bottom: var(--nx-rule-thick) solid var(--nx-accent);
  line-height: 1.1; padding-bottom: 1px;
}
.nx-logo__mark{ letter-spacing: -0.01em; }
.nx-logo__division{ color: var(--nx-accent); }

.nx-burger{
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); cursor: pointer;
  width: 40px; height: 40px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nx-burger span{ width: 18px; height: 2px; background: var(--nx-ink); display: block; }

.nx-nav{
  display: flex; align-items: center; gap: var(--nx-space-5);
  margin-left: auto; flex-wrap: wrap;
}
.nx-nav__links{ display: flex; align-items: center; gap: var(--nx-space-4); flex-wrap: wrap; }
.nx-nav a{
  color: var(--nx-ink-soft); text-decoration: none;
  font-size: var(--nx-size-sm); font-weight: 500;
}
.nx-nav a:hover{ color: var(--nx-accent); }

/* Grouped nav dropdowns — native <details>/<summary>, zero JS required,
   works identically with JavaScript disabled. */
.nx-nav-group{ position: relative; }
.nx-nav-group__trigger{
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none;
  color: var(--nx-ink-soft); font-size: var(--nx-size-sm); font-weight: 500;
  padding: var(--nx-space-2) 0;
}
.nx-nav-group__trigger::-webkit-details-marker{ display: none; }
.nx-nav-group__trigger:hover{ color: var(--nx-accent); }
.nx-nav-group__cv{ width: 10px; height: 10px; transition: transform .15s; }
.nx-nav-group[open] .nx-nav-group__cv{ transform: rotate(180deg); }
.nx-nav-group__menu{
  display: flex; flex-direction: column; gap: 1px;
  background: var(--nx-white); border: 1px solid var(--nx-line);
  border-top: var(--nx-rule-thick) solid var(--nx-accent);
  border-radius: var(--nx-radius); padding: var(--nx-space-2);
  min-width: 200px;
}
.nx-nav-group__menu a{
  display: block; padding: var(--nx-space-2) var(--nx-space-3);
  border-radius: var(--nx-radius); font-size: var(--nx-size-sm);
}
.nx-nav-group__menu a:hover{ background: var(--nx-accent-soft); }

@media (min-width: 881px){
  .nx-nav-group__menu{
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    box-shadow: none; /* no shadows — separation comes from the border */
  }
}

.nx-lang{
  display: inline-flex; border: 1px solid var(--nx-accent-line);
  border-radius: var(--nx-radius); overflow: hidden;
}
.nx-lang button{
  background: transparent; border: 0; cursor: pointer;
  color: var(--nx-muted); font: 700 .75rem/1 var(--nx-font-sans);
  padding: var(--nx-space-2) var(--nx-space-3); letter-spacing: .04em;
}
.nx-lang button[aria-pressed="true"]{ background: var(--nx-accent); color: var(--nx-accent-ink); }

/* One CTA style, used everywhere a primary action appears. v2: the deep
   tone, not the accent — it is the heaviest object on the page. */
.nx-cta{
  display: inline-flex; align-items: center; gap: var(--nx-space-2);
  background: var(--nx-cta-bg); color: var(--nx-cta-ink) !important;
  border: 1px solid var(--nx-cta-bg);
  border-radius: var(--nx-radius);
  padding: var(--nx-space-3) var(--nx-space-4);
  font-size: var(--nx-size-sm); font-weight: 600; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
/* Hover moves to the accent, which is lighter than the deep tone but still
   dark enough that --nx-cta-ink stays above 4.5:1 in every division. */
.nx-cta:hover{ background: var(--nx-cta-bg-hover); border-color: var(--nx-cta-bg-hover); }
.nx-cta--ghost{
  background: transparent; color: var(--nx-ink) !important;
  border-color: var(--nx-accent-line);
}
.nx-cta--ghost:hover{ border-color: var(--nx-accent); background: var(--nx-accent-soft); }

/* ============================================================
   6. FOOTER  (v2: a deep-tone surface, light text)
   ============================================================ */
.nx-footer{
  background: var(--nx-accent-deep);
  border-top: var(--nx-rule-brand) solid var(--nx-accent-2);
  padding: var(--nx-space-8) 0 var(--nx-space-5);
  color: var(--nx-accent-deep-muted);
}
.nx-footer__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--nx-space-6);
}
/* footer.html's column hooks (--tree/--legal/--status) stay unstyled on
   purpose; the base class only stops a long address from blowing the grid. */
.nx-footer__col{ min-width: 0; }
.nx-footer__brand{
  font-weight: 700; color: var(--nx-accent-deep-ink); font-size: var(--nx-size-md);
  margin: 0 0 var(--nx-space-2);
}
.nx-footer__desc{ font-size: var(--nx-size-sm); max-width: 40ch; margin: 0 0 var(--nx-space-4); }
.nx-footer__tree{ display: flex; flex-direction: column; gap: var(--nx-space-2); }
.nx-footer__tree a{ color: var(--nx-accent-deep-muted); text-decoration: none; font-size: var(--nx-size-sm); }
.nx-footer__tree a:hover{ color: var(--nx-accent-deep-ink); }
.nx-footer__tree .nx-footer__tree-sibling{
  padding-left: var(--nx-space-4);
  border-left: 1px solid var(--nx-accent-deep-line);
}

.nx-footer__heading{
  font-size: var(--nx-size-xs); text-transform: uppercase;
  letter-spacing: var(--nx-tracking-eyebrow);
  color: var(--nx-accent-deep-ink); font-weight: 700; margin: 0 0 var(--nx-space-3);
}
.nx-footer__legal{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-2); }
.nx-footer__legal a{ color: var(--nx-accent-deep-muted); text-decoration: none; font-size: var(--nx-size-sm); }
.nx-footer__legal a:hover{ color: var(--nx-accent-deep-ink); }

.nx-footer__status{
  display: inline-flex; align-items: center; gap: var(--nx-space-2);
  color: var(--nx-accent-deep-muted); text-decoration: none; font-size: var(--nx-size-sm);
  border: 1px solid var(--nx-accent-deep-line); border-radius: var(--nx-radius);
  padding: var(--nx-space-2) var(--nx-space-3); width: fit-content;
  margin-bottom: var(--nx-space-3);
}
.nx-footer__status:hover{ border-color: var(--nx-accent-2); color: var(--nx-accent-deep-ink); }
.nx-status-dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--nx-muted); display: inline-block;
}
.nx-status-dot--ok{ background: var(--nx-ok); } /* only when a real status source says OK (coordinator 2026-09-10) */
/* On the deep footer the dot has to be read against the deep tone, not paper. */
.nx-footer .nx-status-dot{ background: currentColor; }
.nx-footer .nx-status-dot--ok{ background: var(--nx-ok-on-deep); }
.nx-footer__mail{ color: var(--nx-accent-deep-muted); text-decoration: none; font-size: var(--nx-size-sm); display: block; }
.nx-footer__mail:hover{ color: var(--nx-accent-deep-ink); }

.nx-footer__bottom{
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--nx-space-3);
  margin-top: var(--nx-space-7); padding-top: var(--nx-space-4);
  border-top: 1px solid var(--nx-accent-deep-line);
  font-size: var(--nx-size-xs); color: var(--nx-accent-deep-muted);
}
.nx-footer__bottom p{ margin: 0; }

/* ============================================================
   7. HERO  (v2: a tinted panel with an accent left rule)
   ============================================================ */
.nx-hero{
  padding: var(--nx-space-8) 0 var(--nx-space-7);
  background: var(--nx-accent-soft);
  border-bottom: 1px solid var(--nx-accent-line);
}
.nx-hero > .nx-container{ border-left: var(--nx-rule-thick) solid var(--nx-accent-deep); }
.nx-hero + .nx-section{ border-top: 0; }  /* the hero draws its own edge */
.nx-hero h1{
  max-width: 20ch;
  font-size: var(--nx-hero-title);
  letter-spacing: -0.024em;
}
.nx-hero__actions{ display: flex; align-items: center; gap: var(--nx-space-4); flex-wrap: wrap; margin-top: var(--nx-space-5); }
.nx-hero__stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nx-space-4);
  margin-top: var(--nx-space-7); padding-top: var(--nx-space-6);
  border-top: 1px solid var(--nx-accent-line);
}
.nx-stat{ display: flex; flex-direction: column; gap: var(--nx-space-1); }
.nx-stat__value{
  font-family: var(--nx-font-mono); font-size: var(--nx-size-xl);
  font-weight: 600; color: var(--nx-numeral);
  font-variant-numeric: tabular-nums;
}
.nx-stat__label{ font-size: var(--nx-size-xs); color: var(--nx-muted); }

/* ============================================================
   8. CARDS / GRID  (no shadows — a hairline border does the work)
   ============================================================ */
.nx-grid{ display: grid; gap: var(--nx-space-5); }
.nx-grid--2{ grid-template-columns: repeat(2, 1fr); }
.nx-grid--3{ grid-template-columns: repeat(3, 1fr); }
.nx-grid--4{ grid-template-columns: repeat(4, 1fr); }

.nx-card{
  position: relative;
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  padding: var(--nx-space-5); background: var(--nx-white);
  transition: border-color .15s;
}
/* The accent top border: drawn as a pseudo-element so hovering a card
   does not move its content by 2px. */
.nx-card::before{
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
  height: var(--nx-rule-thick); background: var(--nx-accent);
  border-radius: var(--nx-radius) var(--nx-radius) 0 0;
  opacity: 0; transition: opacity .15s;
}
.nx-card:hover{ border-color: var(--nx-accent-line); }
.nx-card:hover::before{ opacity: 1; }
.nx-card__icon{
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--nx-accent-line); border-radius: var(--nx-radius);
  margin-bottom: var(--nx-space-4); color: var(--nx-accent);
  background: var(--nx-accent-soft);
}
.nx-card__icon .nx-icon{ width: 22px; height: 22px; }
.nx-card h3{ font-size: var(--nx-size-md); margin-bottom: var(--nx-space-2); }
.nx-card p{ font-size: var(--nx-size-sm); color: var(--nx-muted); margin-bottom: 0; }
/* --accent is the same treatment, pinned on rather than hover-only */
.nx-card--accent{ border-color: var(--nx-accent-line); }
.nx-card--accent::before{ opacity: 1; }

/* ============================================================
   9. TABLE  (v2: a deep header row, light text)
   ============================================================ */
.nx-table{ width: 100%; border-collapse: collapse; font-size: var(--nx-size-sm); }
.nx-table th, .nx-table td{
  text-align: left; padding: var(--nx-space-3) var(--nx-space-4);
  border-bottom: 1px solid var(--nx-line);
}
.nx-table th{
  font-size: var(--nx-size-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--nx-muted); font-weight: 700;
}
.nx-table thead th{
  background: var(--nx-accent-deep); color: var(--nx-accent-deep-ink);
  letter-spacing: var(--nx-tracking-eyebrow);
  border-bottom: 2px solid var(--nx-accent-2);
}
.nx-table td{ font-variant-numeric: tabular-nums; }
.nx-table tbody tr:hover{ background: var(--nx-accent-soft); }
.nx-table td.nx-mono{ font-size: var(--nx-size-sm); }
.nx-table-wrap{ overflow-x: auto; border: 1px solid var(--nx-line); border-radius: var(--nx-radius); }
.nx-table-wrap .nx-table{ border: 0; }
.nx-table-wrap .nx-table th:first-child, .nx-table-wrap .nx-table td:first-child{ padding-left: var(--nx-space-4); }

/* ============================================================
   10. PRICE BLOCKS
   ============================================================ */
.nx-price-card{
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  padding: var(--nx-space-5); background: var(--nx-white);
  display: flex; flex-direction: column; gap: var(--nx-space-3);
  transition: border-color .15s;
}
.nx-price-card:hover{ border-color: var(--nx-accent-line); }
.nx-price-card__tier{ font-weight: 700; font-size: var(--nx-size-md); }
.nx-price-card__amount{
  font-family: var(--nx-font-mono); font-size: var(--nx-size-2xl);
  font-weight: 600; line-height: 1; color: var(--nx-numeral);
  font-variant-numeric: tabular-nums;
}
.nx-price-card__period{ font-size: var(--nx-size-xs); color: var(--nx-muted); font-weight: 400; }
.nx-price-card__desc{ font-size: var(--nx-size-sm); color: var(--nx-muted); margin: 0; }
.nx-price-card__specs{ list-style: none; margin: 0; padding: 0; font-size: var(--nx-size-sm); }
.nx-price-card__specs li{
  padding: var(--nx-space-2) 0; border-top: 1px solid var(--nx-line);
  font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums;
}
.nx-price-card__specs li:first-child{ border-top: 0; }

/* ============================================================
   11. NOTICE / LEGAL BOX  (v2: the secondary colour's left rule)
   ============================================================ */
.nx-notice{
  border: 1px solid var(--nx-line-strong);
  border-left: var(--nx-rule-thick) solid var(--nx-accent-2);
  border-radius: var(--nx-radius); background: var(--nx-paper-2);
  padding: var(--nx-space-4) var(--nx-space-5); font-size: var(--nx-size-sm); color: var(--nx-ink-soft);
}
.nx-notice p:last-child{ margin-bottom: 0; }
.nx-notice--legal{ font-family: var(--nx-font-mono); font-size: var(--nx-size-xs); line-height: var(--nx-leading-normal); }

/* ============================================================
   12. ICONS
   ============================================================ */
.nx-icon{ width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nx-icon-sprite{ display: none; }

/* ============================================================
   13. SPACING UTILITIES (avoid inline styles in page markup)
   ============================================================ */
.nx-mt-5{ margin-top: var(--nx-space-5); }
.nx-mt-6{ margin-top: var(--nx-space-6); }
.nx-mb-0{ margin-bottom: 0; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 880px){
  .nx-burger{ display: flex; }
  .nx-nav{
    display: none;
    position: fixed; inset: var(--nx-header-h) 0 0 0; z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nx-paper); overflow-y: auto;
    padding: var(--nx-space-4) var(--nx-gutter) var(--nx-space-6);
  }
  .nx-header.is-open .nx-nav{ display: flex; }
  .nx-nav__links{ flex-direction: column; align-items: stretch; gap: 0; }
  .nx-nav a{ padding: var(--nx-space-3) 0; border-bottom: 1px solid var(--nx-line); }
  .nx-nav-group__menu{ border: 0; border-left: var(--nx-rule-thick) solid var(--nx-accent-line); padding: 0 0 var(--nx-space-2) var(--nx-space-3); }
  .nx-lang{ margin-top: var(--nx-space-4); width: fit-content; }
  .nx-cta{ margin-top: var(--nx-space-4); justify-content: center; }

  .nx-hero__stats{ grid-template-columns: repeat(2, 1fr); }
  .nx-grid--2, .nx-grid--3, .nx-grid--4{ grid-template-columns: 1fr; }
  .nx-footer__grid{ grid-template-columns: 1fr; }
}

@media (min-width: 881px) and (max-width: 1080px){
  .nx-grid--4{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .nx-hero__stats{ grid-template-columns: repeat(2, 1fr); gap: var(--nx-space-3); }
  h1{ font-size: var(--nx-size-2xl); }
}

/* ============================================================
   15. OVERNIGHT DARK OVERRIDE  (appended 2026-09-10, extended for v2)
   ------------------------------------------------------------
   overnight.host is the estate's money front and stays on its
   existing dark palette ("Set A" in
   BRAIN/99-SYSTEM/OVERNIGHT-HOST-CHROME-SCOUT-2026-09-10.md §2):
   138 live pages hardcode that palette inside their own <style>
   blocks, so the chrome has to meet the bodies, not the other
   way round. This block re-points the kit's tokens at those
   exact hex values; every rule above it is unchanged.

   Opt in per page with:
     <html data-division="overnight" data-theme="dark" …>

   Set A source values, verbatim:
     bg #08080d · surface #0f0f18 · card #0d0d16 · border #1a1a2e
     accent #2d9491 · accent2 #72cccd · text #e2e8f0 · muted #64748b
     green #22c55e

   v2 note: on a near-black page the "deep tone" cannot be darker
   than the page, so --nx-accent-deep becomes a teal-tinted raised
   panel (#0D1B24) — the footer, table head and hero rule read as
   deliberate surfaces rather than disappearing into the bg.
   ============================================================ */
html[data-division="overnight"][data-theme="dark"]{
  /* Ink / paper — inverted onto Set A */
  --nx-ink: #e2e8f0;          /* Set A --text   */
  --nx-ink-soft: #94a3b8;     /* live nav/footer link colour */
  --nx-paper: #08080d;        /* Set A --bg      */
  --nx-paper-2: #0f0f18;      /* Set A --surface */
  --nx-paper-3: #0d0d16;      /* Set A --card    */
  --nx-line: #1a1a2e;         /* Set A --border  */
  --nx-line-strong: #25364a;  /* live .oh-lang border */
  --nx-white: #0c0c14;        /* "raised surface" role: live dropdown panel */
  --nx-muted: #64748b;        /* Set A --muted   */
  --nx-muted-2: #64748b;
  --nx-danger: #f87171;       /* light red: #8A2A2A is unreadable on #08080d */
  --nx-ok: #22c55e;           /* Set A --green   */
  --nx-ok-on-deep: #22c55e;   /* 7.7:1 on #0D1B24 — no lighter tone needed */

  /* Accent */
  --nx-accent: #2d9491;       /* Set A --accent  */
  --nx-accent-ink: #72cccd;   /* Set A --accent2 */
  --nx-accent-soft: rgba(45,148,145,.16);
  --nx-accent-line: rgba(45,148,145,.30);

  /* Secondary — Set A's accent2, which is AA text on this bg (10.7:1) */
  --nx-accent-2: #72cccd;
  --nx-accent-2-soft: rgba(114,204,205,.16);
  --nx-accent-2-line: rgba(114,204,205,.34);
  --nx-accent-2-text: #72cccd;

  /* Deep surfaces */
  --nx-accent-deep: #0D1B24;
  --nx-accent-deep-ink: #e2e8f0;
  --nx-accent-deep-muted: #94a3b8;
  --nx-accent-deep-line: rgba(226,232,240,.16);

  --nx-numeral: var(--nx-accent);

  /* Text drawn ON the accent fill. --nx-accent-ink is #72cccd here, which
     is only 2.1:1 against #2d9491 — fine as an accent *highlight* colour,
     not as button text. This is the on-accent ink instead. */
  --nx-on-accent: #ffffff;

  /* The primary button keeps the live teal identity but at a depth where
     white text clears AA: #2d9491 tops out at 3.7:1 with white, #17575A
     reaches 8.2:1 and #1F6E6B (hover) 6.0:1. */
  --nx-cta-bg: #17575A;
  --nx-cta-bg-hover: #1F6E6B;
  --nx-cta-ink: #ffffff;
}

/* Contrast repairs required by the palette swap. Each one names the pair
   it fixes; nothing else about these rules changes. */

/* #72cccd on #2d9491 = 2.1:1 -> white = 3.7:1 (the live CTA's own colour). */
html[data-division="overnight"][data-theme="dark"] .nx-cta{
  color: var(--nx-on-accent) !important;
}
/* white on #2d9491 is 3.7:1 at 12px/700 — the pressed language chip moves
   to the CTA's deep teal (8.2:1) rather than staying on the flat accent. */
html[data-division="overnight"][data-theme="dark"] .nx-lang button[aria-pressed="true"]{
  background: var(--nx-cta-bg);
  color: var(--nx-on-accent);
}
html[data-division="overnight"][data-theme="dark"] .nx-cta--ghost{
  color: var(--nx-ink) !important;
}

/* #64748b on #08080d = 4.2:1 and on #0f0f18 = 4.0:1, both under AA for the
   small text these rules carry. #94a3b8 lifts them to 7.2-7.6:1. */
html[data-division="overnight"][data-theme="dark"] .nx-footer{ color: var(--nx-ink-soft); }
html[data-division="overnight"][data-theme="dark"] .nx-footer__tree a,
html[data-division="overnight"][data-theme="dark"] .nx-footer__legal a,
html[data-division="overnight"][data-theme="dark"] .nx-footer__status,
html[data-division="overnight"][data-theme="dark"] .nx-footer__mail,
html[data-division="overnight"][data-theme="dark"] .nx-footer__bottom,
html[data-division="overnight"][data-theme="dark"] .nx-lang button{
  color: var(--nx-ink-soft);
}
/* Same pair, the v2 surfaces that also carry Set A's muted grey (4.1:1 on
   the card, 4.2:1 on the page) — repaired to #94a3b8 = 6.7-7.6:1. */
html[data-division="overnight"][data-theme="dark"] .nx-card p,
html[data-division="overnight"][data-theme="dark"] .nx-price-card__desc,
html[data-division="overnight"][data-theme="dark"] .nx-price-card__period,
html[data-division="overnight"][data-theme="dark"] .nx-stat__label,
html[data-division="overnight"][data-theme="dark"] .nx-table th{
  color: var(--nx-ink-soft);
}
/* thead keeps its own light-on-deep pair (14.2:1) — the rule above must not
   pull it back down to a grey. */
html[data-division="overnight"][data-theme="dark"] .nx-table thead th{
  color: var(--nx-accent-deep-ink);
}

/* The two brand rules are drawn against #08080d, where #0D1B24 is invisible.
   On dark they use the accent instead — the live teal hairline. */
html[data-division="overnight"][data-theme="dark"] .nx-header{
  border-top-color: var(--nx-accent);
}
html[data-division="overnight"][data-theme="dark"] .nx-hero > .nx-container{
  border-left-color: var(--nx-accent);
}

/* The status dot is a 7px shape, so it gets the live glow back rather than
   relying on colour alone at that size. */
html[data-division="overnight"][data-theme="dark"] .nx-status-dot{
  box-shadow: 0 0 6px var(--nx-ok);
}

/* current page in the primary nav (coordinator 2026-09-10) */
.nx-nav a[aria-current="page"]{ color: var(--nx-ink); border-bottom: 2px solid var(--nx-accent); }