/* ===========================================================================
   NuajLens — page-specific styles for nuaj.com/nuajlens
   ---------------------------------------------------------------------------
   This file OWNS NOTHING SHARED. Every token, type style, button, card, grid,
   nav and footer comes from the site's own style.css, which this page links
   ahead of this file and which nothing here redefines. What lives here is only
   what this page invents and no other page has: the scan console, the trend
   chart, severity and status chips, the age bands, and the hero sweep.
   Rules are scoped to those classes, or to a page-local modifier on a shared
   class (.steps-4, .cmp.findings), so a change here can never reach another
   product's page.

   Severity is semantic and deliberately separate from the brand accent — the
   accent says "Nuaj", never "this is on fire". All five clear 4.5:1 on black.
   =========================================================================== */

:root {
  --lens-critical: #FF453A;
  --lens-high:     #FF9F0A;
  --lens-medium:   #FFD60A;
  --lens-low:      #30D158;
  --lens-info:     #86868b;

  --lens-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.mono,
.code {
  font-family: var(--lens-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- hero sweep */

#sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(130vw, 1600px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  /* Fade the instrument into the page rather than cutting it at a box edge.
     The solid core is held wider than the type block so the sweep reads as an
     instrument the headline sits inside, not a texture behind it. */
  -webkit-mask-image: radial-gradient(closest-side, #000 46%, transparent 82%);
  mask-image: radial-gradient(closest-side, #000 46%, transparent 82%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}

/* A soft scrim so the beam can stay bright without crossing the copy at full
   strength. It sits under the text and over the canvas. */
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -8% -14%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.66) 0%, rgba(0,0,0,.44) 45%, transparent 72%);
  pointer-events: none;
}

/* Narrow viewports: the copy block is tall enough that a full-strength scrim
   would swallow the sweep entirely, and the hard break rags badly. */
@media (max-width: 560px) {
  .hero-inner::before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 50%, transparent 76%);
  }

  .hero-inner .display br { display: none; }
}

/* Page-local: the shared display size was set for a headline standing alone.
   Here it competes with the sweep behind it, so this page runs it smaller and
   tighter — the instrument carries the scale, the type carries the sentence. */
.hero-inner .display {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.022em;
}

.hero-inner .body-l {
  max-width: 620px;
  margin: 0 auto 48px;
}

/* ------------------------------------------------------------------ free tag */

.free-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border: .5px solid color-mix(in srgb, var(--lens-low) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lens-low) 12%, transparent);
  color: var(--lens-low);
  font-family: var(--lens-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* -------------------------------------------------------------- access panel */

/* The download host is gated per organisation, so the page says so once, in
   one place, immediately above the commands it changes the meaning of. */
.access {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
  padding: 26px 30px;
  border: .5px solid color-mix(in srgb, var(--accent) 34%, var(--b1));
  border-radius: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    var(--s1);
}

.access .title { margin: 8px 0 8px; }
.access .body { margin: 0; max-width: 62ch; }

.access-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--lens-mono);
  font-size: .8125rem;
  color: var(--t2);
}

.access-steps li { display: flex; align-items: center; gap: 8px; }

.access-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: .5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 50%;
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 600;
}

.access-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  white-space: nowrap;
}

.access-cta small {
  color: var(--t3);
  font-size: .75rem;
  text-align: center;
}

@media (max-width: 820px) {
  .access { grid-template-columns: 1fr; gap: 22px; }
  .access-cta { align-items: flex-start; }
}

/* --------------------------------------------------------------- code blocks */

.code {
  display: block;
  background: var(--bg);
  border: .5px solid var(--b1);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--t2);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.code .c { color: var(--t3); }

/* ------------------------------------------------------------- scan console */

.console {
  border: .5px solid var(--b1);
  border-radius: 20px;
  background: var(--s1);
  overflow: hidden;
  font-family: var(--lens-mono);
  font-size: .8125rem;
}

.console-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--s2);
  border-bottom: .5px solid var(--b1);
}

.console-title { color: var(--t2); letter-spacing: .02em; }

.console-stats {
  margin-left: auto;
  display: flex;
  gap: 24px;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}

.console-stats b { color: var(--t1); font-weight: 500; }

.meter { height: 2px; background: var(--b1); position: relative; }

.meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width .4s ease;
}

.stream {
  padding: 16px 20px 20px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.stream-line {
  display: grid;
  grid-template-columns: 4.6rem 5.6rem 1fr;
  gap: 14px;
  align-items: baseline;
  color: var(--t2);
}

.stream-line .ts { color: var(--t3); font-variant-numeric: tabular-nums; }
.stream-line .what { color: var(--t1); overflow-wrap: anywhere; }
.stream-line .where { color: var(--t3); }
.stream-line.enter { animation: lens-rise .26s ease-out both; }

@keyframes lens-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------- severity & status chips */

.sev,
.state {
  display: inline-block;
  font-family: var(--lens-mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.4;
}

.sev-critical { color: var(--lens-critical); }
.sev-high     { color: var(--lens-high); }
.sev-medium   { color: var(--lens-medium); }
.sev-low      { color: var(--lens-low); }
.sev-info     { color: var(--lens-info); }

/* A stream note is not a severity — no box, no shout. */
.sev-note { color: var(--t3); border-color: transparent; padding-left: 0; }

.state          { color: var(--t3); }
.state-open     { color: var(--t2); }
.state-resolved { color: var(--lens-low); }
.state-accepted { color: var(--accent); }
.state-fp       { color: var(--t3); }

/* ----------------------------------------------------------------- stat row */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--b1);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 40px;
}

.stat {
  background: var(--s1);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat b {
  font-family: var(--lens-mono);
  font-size: 2.125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}

.stat b.alert { color: var(--lens-critical); }

.stat p {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--t3);
}

/* ------------------------------------------------------------------- charts */

.chart-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1px;
  background: var(--b1);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 1px;
}

.chart-card {
  background: var(--s1);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.chart-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.chart-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -.01em;
}

.chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: var(--t3);
  letter-spacing: .02em;
}

.chart-legend i {
  width: 10px;
  height: 2px;
  background: var(--lens-critical);
  display: inline-block;
}

.chart-legend.muted { color: var(--t3); }

.values-toggle {
  margin-left: auto;
  font-family: var(--lens-mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t3);
  background: transparent;
  border: .5px solid var(--b2);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}

.values-toggle:hover { color: var(--t1); border-color: rgba(255, 255, 255, .3); }

.plot { position: relative; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }

.tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--s3);
  border: .5px solid var(--b2);
  border-radius: 8px;
  padding: 8px 11px;
  font-family: var(--lens-mono);
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--t1);
  white-space: nowrap;
  transition: opacity .12s ease;
  z-index: 3;
}

.tip b { color: var(--lens-critical); font-weight: 500; }

.values-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
  max-height: 200px;
}

.values-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  font-weight: 600;
  border-bottom: .5px solid var(--b1);
}

.values-table td {
  padding: 6px 8px;
  font-family: var(--lens-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t2);
  border-bottom: .5px solid rgba(255, 255, 255, .03);
}

/* Age bands: one series, one colour. Bar length already carries magnitude, so
   hue stays free — a darker-where-bigger ramp would encode it twice. */
.bands {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.band {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 12px;
  align-items: center;
}

.band-label {
  font-family: var(--lens-mono);
  font-size: .75rem;
  color: var(--t3);
  text-align: right;
}

.band-track {
  height: 14px;
  background: var(--b1);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.band-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--lens-critical);
  border-radius: 0 3px 3px 0;
  transition: width .7s cubic-bezier(.16, 1, .3, 1);
}

.band-value {
  font-family: var(--lens-mono);
  font-size: .8125rem;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}

.band-value span { color: var(--t3); }

/* ------------------------------------------- page-local modifiers on shared
   components. Scoped with an extra class so the shared rule is untouched. */

/* The site's .steps-grid is three across; this page has four steps. */
.steps-grid.steps-4 { grid-template-columns: repeat(4, 1fr); }

/* .cmp centres its cells for feature comparison; these two tables are read as
   lists, so they stay left-aligned. */
.cmp.findings th,
.cmp.findings td,
.cmp.profiles th,
.cmp.profiles td {
  text-align: left;
}

.cmp.findings { min-width: 720px; }
.cmp.profiles { min-width: 620px; }

.cmp.findings .mono { font-size: .8125rem; color: var(--t2); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .steps-grid.steps-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .steps-grid.steps-4 { grid-template-columns: 1fr; }
  .stream-line { grid-template-columns: 4rem 5rem 1fr; gap: 10px; }
  .console-stats { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stream-line.enter { animation: none; }
  .meter i,
  .band-track i { transition: none; }
}