/* © 2026 Nuboc Inc. All rights reserved. */
/* =============================================================================
   Nuboc — site stylesheet.
   Ported from `Nuboc Enterprise Site.dc.html` + the NubocAxis design system.

   Section markup keeps the design file's inline styles verbatim; this file
   carries only what an inline style cannot express — tokens, hovers, media
   queries, focus rings — plus the shared chrome and legal-page layer.
   ============================================================================= */

/* ── NubocAxis tokens (css/tokens.css) ──────────────────────────────────── */
:root {
  --nax-ink:           #0c0e11;
  --nax-ink-70:        rgba(12, 14, 17, .70);
  --nax-ink-45:        rgba(12, 14, 17, .45);
  --nax-ink-20:        rgba(12, 14, 17, .13);
  --nax-ink-10:        rgba(12, 14, 17, .07);
  --nax-ink-05:        rgba(12, 14, 17, .04);

  --nax-canvas:        #f3f2ef;
  --nax-surface:       #ffffff;

  --nax-accent:        #1547d4;
  --nax-accent-rgb:    21, 71, 212;
  --nax-accent-dark:   #1240bb;
  --nax-accent-darker: #0e35a0;

  --nax-green:         #0d9f5e;
  --nax-red:           #d63b30;
  --nax-amber:         #c97b0a;

  --nax-font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;
  --nax-font-mono:     'DM Mono', 'Fira Mono', 'Menlo', monospace;
  --nax-font-serif:    'Instrument Serif', 'Georgia', serif;

  --nax-r:             5px;
  --nax-r-sm:          3px;
  --nax-t:             .13s ease;
}

/* ── Site base (design file <helmet> style block) ───────────────────────── */
:root { --nax-canvas-site: #f1f3f5; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nax-canvas-site);
  color: #0c0e11;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: #1547d4; text-decoration: none; }
a:hover { color: var(--nax-accent-dark); text-decoration: none; }

img, svg { display: block; max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #1547d4; outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ── Hover states (design file `style-hover`) ───────────────────────────── */
.hv-1:hover { color: #ffffff; }
.hv-2:hover { background: var(--nax-accent-darker); }
.hv-3:hover { background: rgba(12,14,17,0.04); }
.hv-4:hover { background: #24282e; }
.hv-5:hover { border-color: rgba(255,255,255,0.4); color: #ffffff; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */

/* The chrome is injected into a mount div. Without `display: contents` that
   div becomes the sticky header's containing block -- and since it is only as
   tall as the bar itself, the header unsticks and scrolls away almost
   immediately. Removing the box makes the page wrapper the containing block,
   so `position: sticky` holds for the whole scroll. */
[data-site-header] { display: contents; }

[data-menu] { user-select: none; }
[data-panel] { animation: nax-menu-in .13s ease; }

@keyframes nax-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

[data-drawer] a:hover { color: var(--nax-accent); }

/* ── Responsive (design file media queries) ─────────────────────────────── */
@media (max-width: 1180px) {
  [data-grid="cols4"], [data-grid="cols5"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="cols3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="split"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-grid="footer"] { grid-template-columns: repeat(3, 1fr) !important; gap: 32px !important; }
  [data-utility] { display: none !important; }
  [data-nav] { display: none !important; }
  [data-rail] { border-left: none !important; padding-left: 0 !important; padding-top: 0 !important; }
  [data-hero-col] { padding-right: 0 !important; padding-bottom: 48px !important; }

  /* The condensed nav the port map flagged as missing. */
  [data-menu-toggle] { display: inline-flex !important; }
  [data-cta] { margin-left: 16px; }
  [data-cta] > a:first-child { display: none; }
}

@media (max-width: 860px) {
  [data-grid="cols4"], [data-grid="cols5"], [data-grid="cols3"],
  [data-grid="cols2"], [data-grid="footer"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
  [data-section] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  [data-wrap] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-h1] { font-size: 34px !important; }
  [data-h2] { font-size: 28px !important; }
  [data-strip] > div { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; border-top: 1px solid rgba(12,14,17,0.1); }
  [data-topbar] { height: auto !important; padding-top: 14px !important; padding-bottom: 14px !important; flex-wrap: wrap; }
  [data-figcap] { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@media (max-width: 520px) {
  [data-cta] { display: none !important; }
  [data-menu-toggle] { margin-left: auto; }
}

/* =============================================================================
   Legal pages (privacy, terms) — same language, long-form measure.
   ============================================================================= */
.legal-header {
  max-width: 1240px;
  margin: 0 auto;
  padding: 88px 32px 40px;
}

.legal-eyebrow {
  font-family: var(--nax-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(12,14,17,0.45);
  margin-bottom: 18px;
}

.legal-title {
  font-family: var(--nax-font-sans);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #0c0e11;
  margin: 0 0 18px;
}

.legal-meta {
  font-family: var(--nax-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(12,14,17,0.45);
}

.legal-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(12,14,17,0.7);
}

.legal-intro {
  font-size: 17px;
  line-height: 1.7;
  color: #0c0e11;
  margin: 0 0 22px;
}

.legal-body p { margin: 0 0 18px; }

.legal-body h2 {
  font-family: var(--nax-font-sans);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0c0e11;
  margin: 52px 0 18px;
}

.legal-body h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0c0e11;
  margin: 32px 0 10px;
}

.legal-num {
  display: block;
  font-family: var(--nax-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nax-accent);
  margin-bottom: 10px;
}

.legal-rule {
  height: 1px;
  background: rgba(12,14,17,0.13);
  margin: 44px 0;
}

.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }

.legal-body a { color: var(--nax-accent); }
.legal-body a:hover { text-decoration: underline; }

.legal-body strong { color: #0c0e11; font-weight: 600; }

.legal-caps {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(12,14,17,0.13);
  border-radius: var(--nax-r);
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(12,14,17,0.7);
  margin: 0 0 18px;
}

.legal-address {
  font-family: var(--nax-font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(12,14,17,0.7);
  background: #ffffff;
  border: 1px solid rgba(12,14,17,0.13);
  border-radius: var(--nax-r);
  padding: 20px 22px;
  margin: 0 0 18px;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 0 0 18px;
  background: #ffffff;
  border: 1px solid rgba(12,14,17,0.13);
  border-radius: var(--nax-r);
  overflow: hidden;
}

.legal-body th {
  font-family: var(--nax-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(12,14,17,0.45);
  text-align: left;
  padding: 12px 14px;
  background: var(--nax-canvas);
  border-bottom: 1px solid rgba(12,14,17,0.13);
}

.legal-body td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(12,14,17,0.07);
  vertical-align: top;
}

.legal-body tr:last-child td { border-bottom: none; }

@media (max-width: 620px) {
  .legal-header { padding: 56px 20px 32px; }
  .legal-title { font-size: 38px; }
  .legal-body { padding: 40px 20px 64px; }
  .legal-body h2 { font-size: 26px; margin-top: 40px; }
}