/*
 * NOVIQ — site styles.
 *
 * The palette is lifted from the application's own tokens (ui/src/index.css),
 * so somebody who buys here and opens NOVIQ is looking at the same product,
 * not a different brand wearing the same name.
 *
 * No web fonts. The application deliberately fetches none — a font download is
 * a network request it does not make — and the site keeps the same system
 * stack so the two look alike, with the side effect that there is no
 * render-blocking font request to wait on.
 */

:root {
  --font-sans:
    ui-sans-serif, -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text",
    "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas,
    monospace;

  --bg: oklch(0.135 0.008 255);
  --fg: oklch(0.97 0.004 255);
  --card: oklch(0.18 0.01 255);
  --elevated: oklch(0.225 0.012 255);
  --muted: oklch(0.72 0.015 255);
  --border: oklch(0.28 0.014 255);
  --accent: oklch(0.72 0.19 145);
  --accent-dim: oklch(0.62 0.16 145);
  --warn: oklch(0.79 0.16 85);
  --danger: oklch(0.63 0.24 27);

  --r-sm: 0.5rem;
  --r: 0.75rem;
  --r-lg: 1.25rem;

  --shadow-lg: 0 32px 80px -24px oklch(0 0 0 / 0.75);
  --hairline: inset 0 1px 0 0 oklch(1 0 0 / 0.06);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: oklch(0.16 0.02 255);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--fg);
  flex-shrink: 0;
}
.brand:hover {
  text-decoration: none;
}
.brand svg {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.45rem;
}

nav.site {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  font-size: 0.9rem;
  margin-left: auto;
}
nav.site a {
  color: var(--muted);
  transition: color 0.15s ease;
}
nav.site a:hover,
nav.site a[aria-current="page"] {
  color: var(--fg);
  text-decoration: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-sm);
  padding: 0.7rem 1.35rem;
  font-size: 0.94rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn-primary {
  background: var(--accent);
  color: oklch(0.16 0.02 255);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / 0.16) inset,
    0 8px 24px -10px oklch(0.72 0.19 145 / 0.6);
}
.btn-primary:hover {
  background: oklch(0.78 0.2 145);
}
.btn-outline {
  background: color-mix(in oklch, var(--fg) 4%, transparent);
  color: var(--fg);
  border-color: var(--border);
}
.btn-outline:hover {
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.btn-lg {
  padding: 0.9rem 1.9rem;
  font-size: 1.02rem;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

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

.hero {
  position: relative;
  padding: 5.5rem 0 3rem;
  text-align: center;
  overflow: hidden;
}
/* A single soft glow behind the headline. Cheap (one gradient, no image) and
   it stops the page reading as a flat black rectangle. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 70vh;
  background: radial-gradient(
    ellipse 50% 50% at 50% 40%,
    oklch(0.72 0.19 145 / 0.13),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.pill .dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

h1 {
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 1.4rem;
  font-weight: 700;
}
h1 .grad {
  background: linear-gradient(100deg, var(--accent), oklch(0.85 0.14 165));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  max-width: 620px;
  margin: 0 auto 2.4rem;
  color: var(--muted);
  font-size: 1.14rem;
}

.cta-row {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.fine {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

/* ------------------------------------------------------- screenshot frame */

.shot {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-lg), var(--hairline);
  overflow: hidden;
  position: relative;
}
.shot .chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
}
.shot .chrome i {
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
.shot img {
  width: 100%;
  display: block;
}

.hero-shot {
  max-width: 1060px;
  margin: 3.5rem auto 0;
  position: relative;
}
/* Fades the bottom of the hero screenshot into the page instead of ending it
   with a hard edge. */
.hero-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* -------------------------------------------------------------- sections */

section {
  padding: 5rem 0;
  position: relative;
}
section.tight {
  padding: 3rem 0;
}
.band {
  background: color-mix(in oklch, var(--card) 60%, var(--bg));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.85rem;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 0.9rem;
  font-weight: 700;
}
.sub {
  text-align: center;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 3.25rem;
  font-size: 1.03rem;
}

/* --------------------------------------------------------- feature split */

.split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3.5rem;
  align-items: center;
}
.split.flip > .shot {
  order: -1;
}
.split h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -0.015em;
  margin: 0.6rem 0 0.9rem;
  line-height: 1.2;
}
.split p {
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.split ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.split ul li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.35rem 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.split ul li svg {
  flex-shrink: 0;
  margin-top: 0.35rem;
  color: var(--accent);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .split.flip > .shot {
    order: 0;
  }
}

/* ----------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
/* Six cards in an `auto-fit` grid land as four then two, which reads as a
   mistake. Pinning three columns makes it two even rows. */
@media (min-width: 1000px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.6rem;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}
.card:hover {
  border-color: color-mix(in oklch, var(--accent) 35%, var(--border));
  transform: translateY(-2px);
}
.card .ico {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.55rem;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.05rem;
}
.card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ----------------------------------------------------------------- rules */

.rules {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rule {
  border-left: 2px solid color-mix(in oklch, var(--accent) 55%, transparent);
  padding-left: 1.2rem;
}
.rule .n {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.4rem;
}
.rule h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.rule p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------- trust row */

.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  text-align: center;
}
.trust div {
  padding: 1.35rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
}
.trust strong {
  display: block;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.trust span {
  color: var(--muted);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------- pricing */

.plans {
  display: grid;
  gap: 1.5rem;
  /* `minmax(300px, …)` forces a 300px column even on a 320px phone, where
     `.wrap`'s padding leaves less room than that — the grid overflows the
     page by exactly the difference. A single explicit column below 640px
     sidesteps `auto-fit` doing this on any screen this narrow. */
  grid-template-columns: 1fr;
  max-width: 880px;
  margin: 0 auto;
  align-items: start;
}
.plan {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan.featured {
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--accent) 7%, var(--card)),
    var(--card) 45%
  );
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent);
}
.plan .tag {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: oklch(0.16 0.02 255);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.plan h3 {
  margin: 0;
  font-size: 1.05rem;
}
.price {
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0.6rem 0 0;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.price small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
/* The struck-through old price and the discount badge sit *outside* `.price`
   on purpose. They were inside it before, at the price's own 2.9rem font
   size — `.off-badge`'s own font-size rule should have overridden that, but
   nesting a small pill inside a huge flex line is exactly the kind of thing
   that renders wrong in one browser and not another. Keeping them as
   siblings at the container's normal font size removes the whole class of
   bug rather than chasing one instance of it. */
.price-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.15rem;
}
.price-meta .was {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--muted) 65%, transparent);
}
.off-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: oklch(0.16 0.02 255);
  background: var(--accent);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.launch-note {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin: 0.6rem 0 0;
}
.launch-note strong {
  color: var(--fg);
}
.plan .note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1.6rem;
}
.plan ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  flex: 1;
  font-size: 0.92rem;
}
.plan li {
  display: flex;
  gap: 0.6rem;
  padding: 0.42rem 0;
  align-items: flex-start;
}
.plan li svg {
  flex-shrink: 0;
  margin-top: 0.3rem;
  color: var(--accent);
}
.plan li.off {
  color: var(--muted);
}
.plan li.off svg {
  color: var(--muted);
}

/* ----------------------------------------------------------------- table */

/* The `body { overflow-x: hidden }` reset means an overflow-x:auto scroll
   box just gets silently clipped instead of showing a scrollbar — worse than
   the problem it solves, since two of the three columns disappear with no
   affordance to reach them. So the table shrinks instead: the label column
   wraps its text (some of these labels are long), and the two answer
   columns are pinned narrow so there is always room for it, at any width
   this site supports down to a 320px phone. */
.compare-scroll {
  max-width: 720px;
  margin: 0 auto;
}
.compare {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.compare th,
.compare td {
  padding: 0.85rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  overflow-wrap: break-word;
}
.compare thead th {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.compare td:not(:first-child),
.compare th:not(:first-child) {
  text-align: center;
  width: 5.5rem;
}
.compare td:first-child {
  color: var(--fg);
}
@media (min-width: 560px) {
  .compare th,
  .compare td {
    padding: 0.85rem 1rem;
  }
  .compare td:not(:first-child),
  .compare th:not(:first-child) {
    width: 22%;
  }
}
@media (min-width: 640px) {
  .plans {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
.compare .yes {
  color: var(--accent);
  font-weight: 600;
}
.compare .no {
  color: var(--muted);
}

/* ------------------------------------------------------------------- faq */

.faq {
  max-width: 720px;
  margin: 0 auto;
}
details {
  border-bottom: 1px solid var(--border);
}
details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: 0.98rem;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
details[open] summary::after {
  transform: rotate(-135deg);
}
details p {
  color: var(--muted);
  margin: 0 0 1.15rem;
  font-size: 0.93rem;
}

/* ------------------------------------------------------------------ note */

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  background: color-mix(in oklch, var(--warn) 6%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 1.15rem 1.35rem;
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto;
}
.callout strong {
  color: var(--fg);
}

/* ------------------------------------------------------------------ cta */

.cta-band {
  text-align: center;
  padding: 5.5rem 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 100% at 50% 100%,
    oklch(0.72 0.19 145 / 0.13),
    transparent 70%
  );
  pointer-events: none;
}
.cta-band > * {
  position: relative;
}

/* ----------------------------------------------------------------- prose */

.prose {
  padding: 3.5rem 0 5rem;
}
.prose h1 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  text-align: left;
  margin-bottom: 0.3rem;
}
.prose .updated {
  color: var(--muted);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 2.5rem;
}
.prose h2 {
  font-size: 1.22rem;
  text-align: left;
  margin: 2.5rem 0 0.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.prose h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 2rem;
}
.prose h3 {
  font-size: 1.02rem;
  margin: 1.75rem 0 0.5rem;
}
.prose p,
.prose li {
  color: var(--muted);
  font-size: 0.97rem;
}
.prose strong {
  color: var(--fg);
  font-weight: 600;
}
.prose ul {
  padding-left: 1.2rem;
}
.prose li {
  margin-bottom: 0.45rem;
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
}
.prose th {
  background: var(--card);
  color: var(--fg);
}
.prose td {
  color: var(--muted);
}

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

footer.site {
  border-top: 1px solid var(--border);
  padding: 3.25rem 0 2.5rem;
  color: var(--muted);
  font-size: 0.87rem;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.75rem;
}
footer.site h4 {
  color: var(--fg);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
footer.site ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.site li {
  margin-bottom: 0.5rem;
}
footer.site a {
  color: var(--muted);
}
footer.site a:hover {
  color: var(--fg);
}
footer.site .about p {
  margin: 0.9rem 0 0;
  max-width: 34ch;
  font-size: 0.85rem;
}
footer.site .base {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

@media (max-width: 800px) {
  footer.site .cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 720px) {
  nav.site {
    display: none;
  }
  /* The headline sets its own break on wide screens; on a phone the natural
     wrap is better than a forced one landing mid-phrase. */
  h1 br {
    display: none;
  }
  header.site .btn {
    padding: 0.55rem 0.95rem;
    font-size: 0.86rem;
  }
  h1 {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
  }
  .lede {
    font-size: 1.03rem;
  }
  .cta-row .btn {
    width: 100%;
  }
  .hero {
    padding: 3.5rem 0 2rem;
  }
  section {
    padding: 3.5rem 0;
  }
  .hero-shot {
    margin-top: 2.5rem;
  }
}