/* NATARAJA — design system.
   Tokens transcribed from §5 of the build brief. These are the shipping
   product's own values; the site and the app must feel like one thing.

   Font families name Space Grotesk / Inter / JetBrains Mono FIRST, then fall
   back to system stacks. No webfont is loaded — see README §Fonts. Drop the
   woff2 files into assets/fonts/ and uncomment the @font-face block and the
   names already at the front of every stack take over with no other change. */

:root {
  --cream:      #faf6ee;
  --surface:    #ffffff;
  --ink:        #20282c;
  --ink-2:      #4b5955;
  --muted:      #8b9190;
  --border:     #eae3d3;
  --grid:       #ede7d9;

  --teal:       #2f7d8e;
  --teal-deep:  #266878;
  --teal-ink:   #1d5361;
  --teal-wash:  #e9f2f2;
  --teal-line:  #a9cfd6;

  --night-0:    #050a16;
  --night-1:    #0a1428;
  --night-2:    #10203f;

  --good:       #0ca30c;
  --good-ink:   #006300;
  --warning:    #fab219;
  --critical:   #d03b3b;

  /* entity-stable across the whole product — never reassign */
  --sun-mean:   #2a78d6;
  --sun-app:    #eb6834;
  --sidereal:   #1baf7a;

  --r-1: 8px;  --r-2: 12px;  --r-3: 16px;
  --sh-1: 0 1px 2px rgba(48,40,24,.05);
  --sh-2: 0 1px 2px rgba(48,40,24,.05), 0 8px 24px rgba(48,40,24,.07);
  --sh-3: 0 2px 4px rgba(48,40,24,.06), 0 16px 40px rgba(48,40,24,.12);
  --focus: 0 0 0 3px rgba(47,125,142,.3);

  --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.62 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: var(--focus); border-radius: 4px; }
ul { padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }

/* every number on the site is set in mono — "measured", not "claimed" */
.num, td.num, .stat b, .readout b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-1) 0;
}
.skip:focus { left: 0; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: min(var(--wrap), 100% - 28px); } }

/* --------------------------------------------------------------- header */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250,246,238,.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.4) blur(8px);
}
.bar { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-mark {
  /* The real mark (build 37): an N whose right stroke is a mast with its
     masthead light, crossed by the waterline. This used to be a CSS-drawn
     dashed ring standing in for a logo that did not exist yet. */
  width: 28px; height: 28px; flex-shrink: 0; display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-family: var(--display); font-size: 16px; letter-spacing: .06em; }
.brand-text i { font-style: normal; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }

header nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-links, .nav-cta { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 11px; border-radius: var(--r-1);
  font-size: 14.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { background: var(--teal-wash); color: var(--teal-ink); }
.nav-links a[aria-current="page"] { color: var(--teal-ink); font-weight: 600; }
.nav-cta { gap: 8px; margin-left: 6px; }

.btn {
  display: inline-block; padding: 10px 17px; border-radius: var(--r-1);
  font: 600 14.5px/1.25 var(--body); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
}
.btn.solid { background: var(--teal); color: #fff; }
.btn.solid:hover { background: var(--teal-deep); color: #fff; }
.btn.ghost { border-color: var(--teal-line); color: var(--teal-ink); background: transparent; }
.btn.ghost:hover { background: var(--teal-wash); }
.btn.big { padding: 14px 24px; font-size: 16px; }
.btn.on-night { background: #fff; color: var(--night-1); }
.btn.on-night.ghost { background: transparent; color: #dbe6f2; border-color: rgba(255,255,255,.35); }

.menu-btn {
  display: none; margin-left: auto; padding: 8px 13px;
  font: 600 14px var(--body); color: var(--teal-ink);
  background: transparent; border: 1px solid var(--teal-line); border-radius: var(--r-1);
}
@media (max-width: 980px) {
  .menu-btn { display: block; }
  header nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 20px 22px;
    background: var(--cream); border-bottom: 1px solid var(--border); box-shadow: var(--sh-2);
  }
  header nav.open { display: flex; }
  .nav-links, .nav-cta { flex-direction: column; align-items: stretch; }
  .nav-links a { padding: 11px 12px; font-size: 16px; }
  .nav-cta .btn { text-align: center; }
}

/* --------------------------------------------------------------- layout */
.band { padding: 68px 0; }
.band.tight { padding: 46px 0; }
.band.wash { background: var(--teal-wash); }
.band.paper { background: var(--surface); }
.band.night { background: var(--night-1); color: #c7d4e4; }
.band.night h1, .band.night h2, .band.night h3 { color: #fff; }
.band.night a { color: #9fd3de; }
@media (max-width: 700px) { .band { padding: 46px 0; } }

.eyebrow {
  display: block; font: 600 11.5px/1 var(--body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 14px;
}
.band.night .eyebrow { color: #7fc4d2; }

h1 { font-size: clamp(31px, 5.2vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: 19px; }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 62ch; }
.band.night .lede { color: #a9bad0; }
.measure { max-width: 68ch; }

.cols { display: grid; gap: 26px; }
.cols.two { grid-template-columns: repeat(2, 1fr); }
.cols.three { grid-template-columns: repeat(3, 1fr); }
.cols.four { grid-template-columns: repeat(4, 1fr); }
.cols.split { grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .cols.three, .cols.four, .cols.split { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols.two, .cols.three, .cols.four, .cols.split { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 24px; box-shadow: var(--sh-1);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 0; }
.card.link { text-decoration: none; color: inherit; display: block; }
.card.link:hover { box-shadow: var(--sh-2); border-color: var(--teal-line); }
.band.night .card { background: var(--night-2); border-color: rgba(255,255,255,.09); }
.band.night .card p { color: #a9bad0; }

.stat b { display: block; font-family: var(--mono); font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; line-height: 1.05; }
.stat span { display: block; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
.band.night .stat span { color: #7f90a6; }

/* ----------------------------------------------------------- data table */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font: 600 11.5px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
td code, .id {
  font-family: var(--mono); font-size: 13px; color: var(--teal-ink);
  background: var(--teal-wash); padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
tbody tr:hover { background: rgba(233,242,242,.45); }

/* ---------------------------------------------------------------- notes */
.note {
  border-left: 3px solid var(--teal-line); background: var(--teal-wash);
  padding: 18px 22px; border-radius: 0 var(--r-1) var(--r-1) 0; font-size: 15.5px;
}
.note.warn { border-left-color: var(--warning); background: #fdf6e6; }
.note b { color: var(--teal-ink); }
.note.warn b { color: #7a5600; }
.note p:last-child { margin-bottom: 0; }

.bench { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: .08em;
  text-transform: uppercase; color: #7a5600; background: #fdf1d6;
  padding: 4px 9px; border-radius: 999px; }

/* ---------------------------------------------------------------- demos */
.demo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); overflow: hidden; box-shadow: var(--sh-2);
}
.demo-head { padding: 20px 24px 0; }
.demo-head h3 { font-size: 20px; }
.demo-head p { color: var(--ink-2); font-size: 15px; margin: 6px 0 0; }
.demo-body { display: grid; grid-template-columns: 1fr 300px; gap: 0; align-items: stretch; }
@media (max-width: 820px) { .demo-body { grid-template-columns: 1fr; } }
.demo-stage { padding: 20px 24px; min-width: 0; }
.demo-stage svg { width: 100%; height: auto; }
.demo-controls {
  padding: 20px 24px; background: #fbf9f4; border-left: 1px solid var(--border);
}
@media (max-width: 820px) { .demo-controls { border-left: 0; border-top: 1px solid var(--border); } }
.demo-foot {
  padding: 16px 24px; border-top: 1px solid var(--border); background: var(--teal-wash);
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.demo-foot p { margin: 0; font-size: 14.5px; color: var(--teal-ink); max-width: 62ch; }

.field { margin-bottom: 18px; }
.field label { display: block; font: 600 12px/1.3 var(--body); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px; }
.field input[type="range"] { width: 100%; accent-color: var(--teal); }
.field .val { font-family: var(--mono); font-size: 14px; color: var(--teal-ink); float: right; text-transform: none; letter-spacing: 0; }
.seg { display: flex; gap: 0; border: 1px solid var(--teal-line); border-radius: var(--r-1); overflow: hidden; }
.seg button {
  flex: 1; padding: 9px 6px; font: 600 13px var(--body); background: transparent;
  color: var(--teal-ink); border: 0; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.switch input { width: 18px; height: 18px; accent-color: var(--teal); }

.readout { border-top: 1px dashed var(--border); margin-top: 18px; padding-top: 16px; }
.readout div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.readout span { color: var(--ink-2); }
.readout b { font-weight: 600; color: var(--ink); }
.readout .derive { font-family: var(--mono); font-size: 12.2px; color: var(--muted); display: block; text-align: left; padding-top: 6px; line-height: 1.5; }
.verdict { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-1); font-size: 14.5px; }
.verdict.danger { background: #fbe9e9; color: #8d1f1f; }
.verdict.safe { background: #e9f5ec; color: var(--good-ink); }
.verdict.none { background: #fdf6e6; color: #7a5600; }

/* ----------------------------------------------------------------- form */
form.enquiry { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { form.enquiry { grid-template-columns: 1fr; } }
form.enquiry .full { grid-column: 1 / -1; }
form.enquiry label { display: block; font: 600 13px/1.3 var(--body); margin-bottom: 7px; }
form.enquiry .req { color: var(--critical); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: 11px 13px; font: 400 15.5px var(--body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); }
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
.checks label { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 15px; margin: 0; }
.checks input { margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.consent input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--teal); flex-shrink: 0; }
.err { color: var(--critical); font-size: 13.5px; margin-top: 6px; display: none; }
.err.show { display: block; }
[aria-invalid="true"] { border-color: var(--critical); }

/* ---------------------------------------------------------------- footer */
footer.site { background: var(--night-1); color: #93a4bb; padding: 54px 0 34px; margin-top: 0; }
footer.site .motto { font-family: var(--display); font-size: 19px; color: #dbe6f2; font-style: italic; margin-bottom: 34px; }
.foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 620px) { .foot-grid { grid-template-columns: 1fr; gap: 24px; } }
.foot-grid h2 {
  font: 600 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: #8b9cb2; margin-bottom: 12px;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 8px; }
.foot-grid a { color: #c3d1e2; text-decoration: none; font-size: 14.5px; }
.foot-grid a:hover { color: #fff; text-decoration: underline; }
.foot-end { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); font-size: 14px; }
.foot-end a { color: #9fd3de; }
.foot-end .fine { font-family: var(--mono); font-size: 12px; color: #6d7d92; margin: 6px 0 0; }

/* ----------------------------------------------------------------- misc */
.hero { background: var(--night-1); color: #c7d4e4; padding: 88px 0 76px; position: relative; overflow: hidden; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .lede { color: #a9bad0; margin-top: 20px; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.starfield { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
@media (max-width: 700px) { .hero { padding: 60px 0 54px; } }

.crumbs { font-size: 13.5px; color: var(--muted); padding: 16px 0 0; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.cta-strip { background: var(--teal); color: #fff; padding: 46px 0; }
.cta-strip h2 { color: #fff; }
.cta-strip p { color: #d9edf1; }
.cta-strip .btn.solid { background: #fff; color: var(--teal-deep); }
.cta-strip .btn.ghost { border-color: rgba(255,255,255,.5); color: #fff; }

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- print */
@media print {
  header.site, footer.site, .cta-strip, .demo-controls, .menu-btn, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding: 12pt 0; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .band.night, .hero { background: #fff !important; color: #000 !important; }
  .band.night h1, .band.night h2, .band.night h3, .hero h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  table { break-inside: avoid; }
}

/* ---------------------------------------------------------------- the hero
   The animated scene sits BEHIND the words, masked to a disc so it has no
   edge, with the text protected by a scrim. Same arrangement as the product's
   own front door — a visitor who signs up should recognise where they landed.

   The scene is SQUARE. Sized as a percentage of width it was taller than the
   hero and the section's overflow:hidden ate its caption, so the hero is given
   a height first and the art is sized from that height. */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 33rem; }
.hero-art {
  position: absolute; top: 50%; right: 1%; transform: translateY(-50%);
  height: 108%; aspect-ratio: 1; width: auto; max-width: 56%;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 88%);
          mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 88%);
}
.hero-art canvas { display: block; width: 100%; height: 100%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(5,10,22,.96) 0%, rgba(5,10,22,.92) 32%, rgba(5,10,22,.5) 56%,
    rgba(5,10,22,.05) 74%, rgba(5,10,22,0) 100%);
}
.hero > .wrap { position: relative; z-index: 2; width: 100%; }
@media (max-width: 980px) {
  .hero-art { max-width: 74%; right: -8%; }
}
@media (max-width: 760px) {
  /* On a phone the words fill the width and the art sits behind them, so the
     scene drops to geometry with no type (see hero() in demos.js) and the
     scrim goes vertical and much heavier. */
  .hero { min-height: 0; }
  .hero-art { right: -30%; top: auto; bottom: -12%; transform: none;
              height: auto; width: 24rem; max-width: none; opacity: .5; }
  .hero::after {
    background: linear-gradient(180deg, rgba(5,10,22,.95) 0%, rgba(5,10,22,.9) 55%, rgba(5,10,22,.72) 100%);
  }
}

/* The roadmap's shipped/next chip. A card that says SHIPPING NOW is saying it
   because sync-facts found live laboratories with that identifier in the
   product — not because anybody remembered to edit this page. */
.ship-chip {
  display: inline-block; margin-bottom: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  background: var(--teal-ink, #1d5361); color: #f4efe3;
}
.ship-chip.is-next {
  background: transparent; color: var(--ink-2); border: 1px solid var(--border, #e2dccd);
  min-width: 22px; text-align: center; letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Header fit, 981-1060px.

   The mobile menu ends at 980px, so the full desktop nav appears at 981px —
   but the bar is a few pixels wider than the viewport until about 1040px, and
   the header scrolls sideways. Present in build 46 before this change;
   broadening "For cadets" to "For officers" adds roughly 5px more.

   No nav label was ever being clipped (measured: nav scrollWidth == clientWidth
   throughout). It is the bar overflowing, so the fix is spacing, not sizing.
   Recovers about 60px against a worst measured overflow of 36px.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1060px) {
  .bar { gap: 10px; }
  header nav { gap: 10px; }
  .nav-links a { padding-left: 7px; padding-right: 7px; }
  .nav-cta { margin-left: 2px; gap: 6px; }
  header .btn { padding-left: 12px; padding-right: 12px; }
}