/* ==========================================================================
   novix-iq.com — the authored marketing pages.
   The generated legal pages carry their own chrome from build.py's chrome_css()
   and deliberately do NOT link this file. See DESIGN.md.
   ========================================================================== */

:root {
  --blue: #1d328d;
  --blue-deep: #152566;
  --blue-night: #0d1740;
  --mint: #cefbf4;
  --mint-ink: #0b4f4a;

  --ink: #101828;
  --ink-soft: #344054;
  --muted: #667085;
  --line: #dbe0f0;
  --paper: #ffffff;
  --paper-warm: #f7f8fc;

  --on-blue: rgba(255, 255, 255, 0.78);
  --line-dark: rgba(206, 251, 244, 0.16);

  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --shell: 68rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  /* Plex Sans runs a smaller x-height than DM Sans did. 17px restores the
     optical size and matches the generated legal pages, which already set 17px. */
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); text-underline-offset: 0.18em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark input:focus-visible,
.on-dark textarea:focus-visible { outline-color: var(--mint); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Plex Sans is already tightly spaced; -0.025em (tuned for Sora) crowds it. */
  letter-spacing: -0.02em;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
}

/* Novix runs a bigger, tighter display scale than cbstrategicadvisors.com on purpose.
   CBSA is a reading site; this one is a product surface, and the headline should carry
   more of the page. Tracking closes as the size opens, which is the normal optical
   correction and also the thing that separates the two most at a glance. */
.t-hero   { font-size: clamp(2.6rem, 7vw, 4.75rem); font-weight: 700; letter-spacing: -0.035em; }
.t-band   { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -0.028em; }
.t-sub    { font-size: clamp(1.12rem, 1.8vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; }

.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 44rem; }
.on-dark .lede { color: var(--on-blue); }

p { max-width: 68ch; }

/* The one kicker system. Labels a band, never every heading.
   Set in Plex Mono at natural case. The uppercase letterspaced eyebrow this replaced
   is the CB Strategic Advisors device, and sharing it was most of why the two sites
   read as one brand. A mono band label is the field-name of an instrument readout,
   which is the world this site is built in. See DESIGN.md for the monospace rule. */
.kicker {
  font-family: var(--font-data);
  /* Body size, not smaller. Carlos 2026-08-06: at .78rem the label beside the rule
     read as fine print against 17px body copy. `rem` is root-relative (16px), so
     1.0625rem is exactly the 17px the body is set to. */
  font-size: 1.0625rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--mint-ink);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.kicker::before {
  content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .55;
}
.on-dark .kicker { color: var(--mint); }

/* Real data gets the serial-number face. Never used as decoration. */
.data { font-family: var(--font-data); font-size: .86em; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- surfaces */

.on-dark { background: var(--blue); color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark p { color: var(--on-blue); }
.on-dark a { color: var(--mint); }

.band { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.band-tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.band-warm { background: var(--paper-warm); }
.band-rule { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------- nav */

.nav {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 40;
}
.nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: .85rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* The Looka lockup is mark + wordmark + slogan, so it is sized by HEIGHT and the
   width follows the intrinsic ratio. Below about 38px the slogan turns to mush. */
.logo img { height: 46px; width: auto; display: block; }

.nav-links {
  display: flex; align-items: center; gap: 1.6rem;
  margin-left: auto; list-style: none; padding: 0;
}
.nav-links a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  padding: .35rem 0; border-bottom: 1px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav-links a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.nav-links a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
/* The nav's button is a button first. `.nav-links a` is one specificity step above
   `.btn-primary`, so without these it renders ink-on-blue and reads as disabled. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary[aria-current="page"] { color: #fff; border-bottom-color: transparent; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: .4rem;
  padding: .45rem .7rem; font: inherit; font-size: .9rem; color: var(--ink-soft);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 52rem) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem 1.5rem 1rem;
  }
  .nav[data-open="true"] .nav-links { display: flex; }
  .nav-links li + li { border-top: 1px solid var(--line); }
  .nav-links a { display: block; padding: .85rem 0; border-bottom: none; }
  .nav-links .btn { margin-top: .8rem; text-align: center; }
}
@media (max-width: 34rem) { .logo img { height: 38px; } }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  padding: .72rem 1.35rem; border-radius: .45rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background-color .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(13, 23, 64, .18); }
.btn-primary:hover { background: #17287a; box-shadow: 0 6px 18px rgba(29, 50, 141, .22); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

.on-dark .btn-primary { background: var(--mint); color: var(--blue-night); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.on-dark .btn-primary:hover { background: #e4fdf9; box-shadow: 0 6px 20px rgba(206, 251, 244, .22); }
.on-dark .btn-ghost { border-color: var(--line-dark); color: #fff; background: transparent; }
.on-dark .btn-ghost:hover { border-color: var(--mint); color: var(--mint); background: rgba(206,251,244,.06); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.actions-tight { margin-top: 1.4rem; }
/* Stacked buttons of different label lengths read as ragged. On a narrow screen they
   become one column of equal width instead. `.go` is a text link, not a button. */
@media (max-width: 34rem) {
  .actions .btn { width: 100%; justify-content: center; }
}

/* Text link that carries a direction. */
.go {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .45rem;
}
.go::after { content: "→"; transition: transform .15s var(--ease); }
.go:hover::after { transform: translateX(3px); }

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

.hero {
  background:
    radial-gradient(120% 90% at 80% 0%, #24409f 0%, rgba(36,64,159,0) 62%),
    linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 62%, var(--blue-night) 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5.5rem) 0 0;
  overflow: hidden;
  position: relative;
}
/* Hairline field. The grid is the instrument, not an ornament laid on top. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 10%, #000 0%, transparent 78%);
  mask-image: radial-gradient(100% 70% at 50% 10%, #000 0%, transparent 78%);
  opacity: .5; pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 58rem) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
}

.hero p.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

/* Interior pages open on the same field without the ledger beside it, so the
   bottom padding comes from a class rather than from the hero grid. */
.hero-short   { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.hero-compact { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin: 2.2rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line-dark);
  list-style: none; font-size: .86rem; color: var(--on-blue);
}
.hero-meta li { display: flex; align-items: center; gap: .5rem; }
.hero-meta li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint); flex: none;
}

/* -------------------------------------------------------- the gate ledger */

.ledger {
  border: 1px solid var(--line-dark);
  border-radius: .6rem;
  background: rgba(9, 16, 46, 0.55);
  box-shadow: 0 22px 50px rgba(5, 10, 32, .45);
  overflow: hidden;
}
.ledger-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mint);
}
.ledger-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none;
  box-shadow: 0 0 0 0 rgba(206, 251, 244, .7);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(206, 251, 244, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(206, 251, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(206, 251, 244, 0); }
}
.ledger-rows { margin: 0; padding: 0; list-style: none; }
.ledger-row {
  display: grid; grid-template-columns: 4.4rem 1fr auto;
  gap: .4rem .9rem; align-items: baseline;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(206, 251, 244, 0.09);
  font-size: .88rem; color: #fff;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row .at { color: var(--mint); }
.ledger-row .what { color: rgba(255,255,255,.92); }
.ledger-row .what small { display: block; color: rgba(255,255,255,.58); font-size: .82em; }
.ledger-row .flag {
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: .25rem;
  border: 1px solid var(--line-dark); color: var(--on-blue); white-space: nowrap;
}
.ledger-row .flag.ok   { color: var(--mint); border-color: rgba(206,251,244,.42); }
.ledger-row .flag.hold { color: #ffd7a8; border-color: rgba(255, 215, 168, .42); }
.ledger-note {
  padding: .65rem 1rem; font-size: .76rem; color: rgba(255,255,255,.55);
  border-top: 1px solid var(--line-dark); background: rgba(0,0,0,.16);
}

/* The authored moment: rows arrive, newest last, then the page is still. */
@media (prefers-reduced-motion: no-preference) {
  .js .ledger-row { opacity: 0; transform: translateY(6px); }
  .js .ledger-row.in {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
}

/* ------------------------------------------------------------------ ruled */
/* Peer groups are hairline-ruled columns. Cards are not the page structure. */

.ruled {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border-top: 1px solid var(--line);
  margin-top: 2.6rem;
}
.ruled > * {
  padding: 1.8rem 1.6rem 1.8rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 52rem) {
  .ruled > * + * { border-left: 1px solid var(--line); padding-left: 1.6rem; }
}
.on-dark .ruled, .on-dark .ruled > * { border-color: var(--line-dark); }

.ruled h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: .55rem; color: var(--blue); }
.on-dark .ruled h3 { color: #fff; }
.ruled p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.on-dark .ruled p { color: var(--on-blue); }
.ruled .idx {
  font-family: var(--font-data); font-size: .74rem; color: var(--muted);
  display: block; margin-bottom: .9rem;
}
.on-dark .ruled .idx { color: rgba(255,255,255,.5); }

/* Service line: a longer ruled entry with its own list. */
.line { padding: 2.4rem 0; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: none; padding-top: .5rem; }
.line-head {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .8rem clamp(1.5rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 46rem) { .line-head { grid-template-columns: 1fr; } }
.line h2 { font-size: 1.45rem; font-weight: 600; }
.line .tag {
  font-family: var(--font-data); font-size: .76rem; color: var(--mint-ink);
  display: block; margin-top: .5rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: .84rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 2rem; padding: .3rem .8rem;
  background: var(--paper);
}

/* -------------------------------------------------------------- statements */

.pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 52rem) { .pair { grid-template-columns: 1fr; } }

.facts { margin: 2.4rem 0 0; padding: 0; list-style: none; }
.facts li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding: .95rem 0; border-top: 1px solid var(--line-dark);
  font-size: .96rem; color: var(--on-blue);
}
.facts li:last-child { border-bottom: 1px solid var(--line-dark); }
.facts .key {
  font-family: var(--font-data); font-size: .78rem; color: var(--mint);
  padding-top: .22rem; white-space: nowrap;
}
.facts strong { color: #fff; font-weight: 600; }

.note {
  border: 1px solid var(--line); border-left-width: 1px;
  background: var(--paper-warm); border-radius: .5rem;
  padding: 1.25rem 1.4rem; margin-top: 2rem;
}
.note h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.note p { font-size: .94rem; color: var(--ink-soft); margin: 0 0 .55rem; }
.note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- forms */

.form { margin-top: 2.2rem; max-width: 38rem; }
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-family: var(--font-display); font-size: .88rem;
  font-weight: 600; margin-bottom: .4rem; color: var(--ink);
}
.field .hint { font-weight: 400; color: var(--muted); font-size: .84rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: .45rem;
  padding: .7rem .85rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b9c2e4; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 50, 141, .12); outline: none;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: #b42318; }
.field .err { display: none; color: #b42318; font-size: .86rem; margin-top: .35rem; }
.field[data-invalid="true"] .err { display: block; }

.form-status { margin-top: 1.2rem; font-size: .95rem; display: none; border-radius: .45rem; padding: .9rem 1.1rem; }
.form-status[data-state="ok"]   { display: block; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.form-status[data-state="err"]  { display: block; background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }
.form-status[data-state="busy"] { display: block; background: var(--paper-warm); border: 1px solid var(--line); color: var(--ink-soft); }

/* ------------------------------------------------------------------ footer */

.footer { background: var(--blue-night); color: rgba(255,255,255,.74); padding: 3rem 0 2.2rem; font-size: .9rem; }
.footer a { color: var(--mint); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 52rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mint); margin-bottom: .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .5rem; }
.footer .logo img { height: 52px; }
.footer p { max-width: 26rem; color: rgba(255,255,255,.62); font-size: .88rem; }
.footer-base {
  padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  justify-content: space-between; font-size: .84rem; color: rgba(255,255,255,.58);
}
.footer-base p { margin: 0; }
.footer-solo { border-top: none; padding-top: 0; }