/* =========================================================
   NovaQuant — shared site stylesheet
   Consolidated from the original NovaQuant_Intro.html /
   NovaQuant_Why.html inline styles into a single sheet
   so every page renders identically.
   ========================================================= */

:root {
  --bg:#03060d;
  --bg-2:#081121;
  --bg-3:#0b1933;
  --panel:rgba(8, 14, 27, .82);
  --panel-soft:rgba(10, 18, 34, .66);
  --text:#eef7ff;
  --muted:#9fb4d7;
  --cyan:#22d6ff;
  --blue:#2f7fff;
  --violet:#8357ff;
  --magenta:#ca5eff;
  --hero-grad:linear-gradient(135deg,#93f1ff 0%,#57c0ff 24%,#5f8fff 56%,#9565ff 80%,#ebb4ff 100%);
  --max:1240px;
  --nav-offset:64px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-offset) - 2px); }
body {
  margin:0;
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 16%, rgba(34,214,255,.23), transparent 18%),
    radial-gradient(circle at 87% 12%, rgba(202,94,255,.18), transparent 18%),
    radial-gradient(circle at 72% 76%, rgba(47,127,255,.20), transparent 22%),
    linear-gradient(180deg,#010207 0%, #040913 16%, #07111e 52%, #050914 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::before, body::after {
  content:"";
  position:fixed;
  width:34rem;
  height:34rem;
  border-radius:999px;
  filter:blur(96px);
  pointer-events:none;
  z-index:0;
}
body::before {
  right:-10rem;
  top:-12rem;
  opacity:.68;
  background:radial-gradient(circle, rgba(34,214,255,.34), transparent 64%);
}
body::after {
  left:-11rem;
  bottom:-12rem;
  opacity:.62;
  background:radial-gradient(circle, rgba(133,85,255,.32), transparent 64%);
}

.shell { position:relative; z-index:1; }
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
section { padding:14px 0 34px; scroll-margin-top: calc(var(--nav-offset) - 2px); }

/* ---------- Top navigation ---------- */
.nav-wrap {
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid rgba(112,157,255,.12);
  background:linear-gradient(180deg, rgba(3,6,12,.92), rgba(3,6,12,.78));
  backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  /* Was overflow:hidden — that clipped nav-links silently when they
     didn't fit on one row at medium widths.  No rounded corners on
     nav-wrap, so nothing visual relied on the clip; removing it lets
     nav-links wrap to a second row instead of disappearing. */
}
.nav {
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:grid;
  /* minmax(0, 1fr) lets the nav-links cell shrink below its intrinsic
     content width, which then forces flex-wrap on the nav pills.
     With plain `1fr` the cell expanded to fit content and wrap never
     triggered, so pills overflowed silently. */
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:12px 20px;
  align-items:center;
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.brand-mark {
  width:46px; height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  padding:5px;
  background:linear-gradient(180deg, rgba(12,18,32,.96), rgba(6,10,18,.96));
  border:1px solid rgba(100,192,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 30px rgba(34,214,255,.10);
  flex:0 0 auto;
}
.brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.brand-copy strong { display:block; font-size:1rem; }
.brand-copy span { display:block; color:var(--muted); font-size:.88rem; margin-top:2px; }

.nav-links {
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  row-gap:6px;
  padding-bottom:2px;
}
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:.92rem;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:.2s ease;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--text);
  border-color:rgba(104,198,255,.24);
  background:linear-gradient(180deg, rgba(15,24,44,.92), rgba(9,16,30,.88));
  box-shadow:0 0 28px rgba(34,214,255,.12), 0 0 20px rgba(133,85,255,.08);
  transform:translateY(-1px);
}

/* ---------- Hero ---------- */
.hero {
  padding:52px 0 18px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:34px;
  align-items:stretch;
  grid-auto-rows:1fr;
}
.hero > div { min-width:0; min-height:100%; display:flex; }

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(109,198,255,.24);
  background:linear-gradient(180deg, rgba(10,17,31,.88), rgba(8,14,26,.82));
  color:#dcecff;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.84rem;
  box-shadow:0 0 24px rgba(34,214,255,.10);
}
.eyebrow::before {
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan), var(--magenta));
  box-shadow:0 0 16px rgba(34,214,255,.34);
}
h1 {
  margin:20px 0 18px;
  font-size:clamp(3rem, 6vw, 5rem);
  line-height:.95;
  letter-spacing:-.058em;
  max-width:12ch;
}
.gradient-text {
  background:linear-gradient(90deg,#eefaff 0%, #abecff 24%, #78baff 48%, #ac7bff 78%, #efc6ff 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
.lead {
  margin:0;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.76;
  max-width:46rem;
}

/* ---------- Buttons ---------- */
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
  margin-bottom:8px;
  width:100%;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:0 22px;
  border-radius:18px;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:.2s ease;
  font-family:inherit;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn:focus { outline:none; }
.btn:focus-visible {
  outline:3px solid rgba(34,214,255,.55);
  outline-offset:3px;
}
.btn-primary {
  color:#07111d;
  background:var(--hero-grad);
  box-shadow:0 22px 56px rgba(107,136,255,.24), 0 0 42px rgba(34,214,255,.14), 0 0 24px rgba(202,94,255,.08);
}
.btn-secondary {
  color:var(--text);
  border-color:rgba(109,198,255,.18);
  background:linear-gradient(180deg, rgba(11,17,31,.95), rgba(7,12,22,.94));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 24px rgba(34,214,255,.06);
}

/* Stripe + PayPal payment buttons — visually equal, no
   dimming, same prominence.  Both use the full hero gradient
   and the same shadow palette as .btn-primary.  The class
   exists alongside .btn-primary so the markup can read as
   "Stripe primary, PayPal alt" in the source while looking
   identical in the rendered UI — neither feels like a
   second-class option. */
.btn-payment-alt {
  color:#07111d;
  background:var(--hero-grad);
  box-shadow:
    0 22px 56px rgba(107,136,255,.24),
    0 0 42px rgba(34,214,255,.14),
    0 0 24px rgba(202,94,255,.08);
}
.btn-payment-alt:hover {
  box-shadow:
    0 26px 62px rgba(107,136,255,.30),
    0 0 50px rgba(34,214,255,.18),
    0 0 28px rgba(202,94,255,.10);
}

/* ---------- Grid layouts ---------- */
.hero-points, .grid-3, .grid-2, .footer-grid, .workflow-grid {
  display:grid;
  gap:18px;
  align-items:stretch;
}
.hero-points, .grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2, .footer-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.workflow-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }

.hero-points > *, .grid-3 > *, .grid-2 > *, .footer-grid > *, .workflow-grid > * {
  min-width:0;
  min-height:100%;
  display:flex;
  align-self:stretch;
}

/* ---------- Cards / panels ---------- */
.panel, .card, .footer-card, .workflow-step {
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(10,16,29,.88), rgba(6,11,20,.94));
  border:1px solid rgba(110,188,255,.14);
  box-shadow:0 18px 46px rgba(0,0,0,.35), 0 0 24px rgba(34,214,255,.04), 0 0 0 1px rgba(255,255,255,.03) inset;
  border-radius:24px;
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel, .card, .workflow-step { padding:22px; }
.card::before, .panel::before, .workflow-step::after {
  content:"";
  position:absolute;
  inset:auto -20% -25% auto;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,214,255,.16), rgba(133,85,255,.08) 44%, transparent 68%);
}
.card h3, .panel h3, .card strong, .workflow-step h3 {
  display:block;
  font-size:1.12rem;
  letter-spacing:-.03em;
  margin:0 0 8px;
}
.card p, .panel p, .card span, .section-head p, .workflow-step p {
  color:var(--muted);
  line-height:1.72;
  margin:0;
}

.workflow-step::before {
  content:attr(data-step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  margin-bottom:12px;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  box-shadow:0 12px 26px rgba(107,136,255,.18);
  position:relative;
  z-index:1;
}

/* ---------- Logo stage (hero right column) ---------- */
.logo-stage {
  min-height:100%;
  display:grid;
  place-items:center;
  padding:30px 24px;
  border-radius:28px;
  background:
    radial-gradient(circle at center, rgba(34,214,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(8,13,24,.94), rgba(6,10,18,.96));
  border:1px solid rgba(109,198,255,.18);
  box-shadow:0 34px 90px rgba(0,0,0,.52), 0 0 42px rgba(34,214,255,.09), 0 0 60px rgba(133,85,255,.06), 0 0 0 1px rgba(255,255,255,.03) inset;
  position:relative;
  overflow:hidden;
  width:100%;
}
.logo-stage img {
  position:relative;
  z-index:1;
  width:min(100%, 340px);
  height:auto;
  filter:drop-shadow(0 0 40px rgba(34,214,255,.18)) drop-shadow(0 0 20px rgba(133,85,255,.12));
}

.hero-divider {
  height:1px;
  margin:4px 0 2px;
  background:linear-gradient(90deg, transparent, rgba(94,194,255,.40), rgba(164,105,255,.34), rgba(202,94,255,.24), transparent);
  opacity:.95;
}

/* ---------- Section headings + lists ---------- */
.section-head {
  max-width:880px;
  margin-bottom:18px;
}
.label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(109,198,255,.20);
  color:#d7ecff;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  background:linear-gradient(180deg, rgba(10,17,31,.86), rgba(8,14,26,.80));
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 0 24px rgba(34,214,255,.10);
}
.label::before {
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan), var(--magenta));
}
h2 {
  margin:0 0 12px;
  font-size:clamp(2rem, 3.6vw, 3.25rem);
  line-height:1.04;
  letter-spacing:-.04em;
}

.list {
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:12px;
}
.list li {
  position:relative;
  padding-left:18px;
  color:var(--muted);
  line-height:1.68;
}
.list li::before {
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  box-shadow:0 0 18px rgba(34,214,255,.20), 0 0 12px rgba(202,94,255,.10);
}

/* ---------- Pricing ---------- */
.price-tile {
  position:relative;
  overflow:hidden;
  padding:34px 32px;
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34,214,255,.16), transparent 38%),
    radial-gradient(circle at 90% 110%, rgba(202,94,255,.12), transparent 50%),
    linear-gradient(180deg, rgba(10,16,29,.92), rgba(6,11,20,.96));
  border:1px solid rgba(109,198,255,.22);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 60px rgba(34,214,255,.10),
    0 0 60px rgba(133,85,255,.08),
    0 0 0 1px rgba(255,255,255,.03) inset;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:30px;
  align-items:stretch;
  width:100%;
}
.price-tile > * { min-width:0; }
.price-tile .price-head {
  display:flex; flex-direction:column; gap:14px;
}
.price-badge {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  box-shadow:0 8px 22px rgba(107,136,255,.24);
}
.price-amount {
  display:flex;
  align-items:baseline;
  gap:10px;
  line-height:1;
  letter-spacing:-.04em;
}
.price-amount .num {
  font-size:clamp(3rem, 6vw, 4.6rem);
  font-weight:800;
  background:linear-gradient(90deg,#eefaff 0%, #abecff 28%, #78baff 56%, #ac7bff 84%, #efc6ff 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
.price-amount .per {
  color:var(--muted);
  font-size:1.05rem;
}
.price-amount .currency {
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.price-microcopy {
  color:var(--muted);
  line-height:1.72;
  margin:0;
  font-size:.98rem;
}
.price-features {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.price-features li {
  position:relative;
  padding-left:26px;
  color:var(--muted);
  line-height:1.65;
}
.price-features li::before {
  content:"";
  position:absolute;
  left:0; top:.34em;
  width:14px; height:14px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan), var(--magenta));
  box-shadow:0 0 18px rgba(34,214,255,.24), 0 0 12px rgba(202,94,255,.14);
}
.price-features li::after {
  content:"";
  position:absolute;
  left:4px; top:.66em;
  width:6px; height:3px;
  border-left:2px solid #07111d;
  border-bottom:2px solid #07111d;
  transform:rotate(-45deg);
}
/* Calm caption above the two payment buttons in the pricing tile.
   Frames the choice as a preference, not a sales push. */
.price-cta-intro {
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: .005em;
}

.price-cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:18px;
}
.price-cta-row .btn { flex:1 1 auto; min-width:200px; }
.price-foot {
  margin-top:12px;
  font-size:.86rem;
  color:var(--muted);
  letter-spacing:.02em;
}
.price-foot strong { color:var(--text); }

@media (max-width: 880px) {
  .price-tile {
    grid-template-columns:1fr;
    padding:28px 24px;
    gap:20px;
  }
}

/* CTAs whose URL is empty / placeholder in config.js get the
   .cta-pending class from site.js. We hide them outright rather
   than leaving a dead "(coming soon)" stub that confuses real
   customers. */
.btn.cta-pending {
  display:none !important;
}

/* Inline support callout used at the bottom of pages. */
.support-callout {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin-top:18px;
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(10,16,29,.62), rgba(8,13,24,.58));
  border:1px solid rgba(109,198,255,.14);
  color:var(--muted);
  font-size:.96rem;
  line-height:1.6;
}
.support-callout a {
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(109,198,255,.36);
  padding-bottom:1px;
}
.support-callout a:hover { border-bottom-color:var(--cyan); }

/* ---------- Skip-to-content (accessibility) ----------
   Visually hidden until keyboard-focused, then floats above
   the sticky nav so screen-reader / keyboard users can jump
   straight past navigation to the main content. */
.skip-link {
  position:absolute;
  top:-40px;
  left:12px;
  z-index:100;
  padding:10px 16px;
  border-radius:12px;
  background:var(--hero-grad);
  color:#07111d;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(107,136,255,.32);
  transition:top .2s ease;
}
.skip-link:focus {
  top:12px;
  outline:3px solid var(--cyan);
  outline-offset:2px;
}

/* ---------- Footer legal-links row ----------
   Sits below the existing two-card footer grid on every
   page.  Renders as a tidy row of pill-style links —
   Terms, Privacy, Refunds, Disclaimer, FAQ, Contact. */
.footer-legal {
  margin-top:18px;
  padding:18px 22px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,13,24,.62), rgba(6,10,18,.66));
  border:1px solid rgba(109,198,255,.12);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-legal-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px 6px;
  align-items:center;
}
.footer-legal-row a {
  color:var(--muted);
  text-decoration:none;
  padding:2px 4px;
  font-size:.86rem;
  border:0;
  background:transparent;
  transition:color .2s ease;
}
.footer-legal-row a:hover {
  color:var(--text);
}
.footer-legal-row .sep {
  color:var(--muted);
  opacity:.4;
  user-select:none;
}
.footer-legal-fineprint {
  color:var(--muted);
  font-size:.82rem;
  line-height:1.6;
  letter-spacing:.01em;
  opacity:.85;
}
.footer-legal-fineprint a {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(109,198,255,.32);
  text-underline-offset:3px;
}

/* ---------- Legal/long-form page typography ----------
   Used by terms.html, privacy.html, refunds.html,
   disclaimer.html, faq.html.  Optimised for reading
   density: narrower text column, generous line-height,
   clear h2/h3 hierarchy, and softer card backgrounds. */
.legal-shell {
  max-width: 880px;
  margin: 0 auto;
}
.legal-shell h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 30px 0 12px;
  letter-spacing: -.04em;
  line-height: 1.05;
  max-width: none;
}
.legal-shell h2 {
  margin-top: 40px;
  font-size: 1.5rem;
  letter-spacing: -.02em;
}
.legal-shell h3 {
  margin-top: 26px;
  margin-bottom: 4px;
  font-size: 1.08rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.legal-shell p,
.legal-shell li {
  color: var(--muted);
  line-height: 1.78;
  font-size: 1.02rem;
}
.legal-shell strong { color: var(--text); }
.legal-shell ul, .legal-shell ol {
  padding-left: 22px;
  margin: 10px 0 14px;
}
.legal-shell li { margin-bottom: 8px; }
.legal-shell a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(109,198,255,.36);
  padding-bottom: 1px;
}
.legal-shell a:hover { border-bottom-color: var(--cyan); }
.legal-shell code {
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(34,214,255,.10);
  border: 1px solid rgba(109,198,255,.22);
  color: var(--text);
  font-size: .92em;
}
.legal-shell .meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}
.legal-shell .legal-card {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  border: 1px solid rgba(110,188,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.legal-shell .legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 6px;
  padding: 0;
  list-style: none;
}
.legal-shell .legal-toc li { margin: 0; }
.legal-shell .legal-toc a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .88rem;
  background: linear-gradient(180deg, rgba(10,17,31,.86), rgba(8,14,26,.82));
  border: 1px solid rgba(109,198,255,.20);
  color: var(--muted);
}
.legal-shell .legal-toc a:hover {
  color: var(--text);
  border-color: rgba(109,198,255,.36);
}

/* ---------- FAQ accordion (no JS — uses <details>) ---------- */
.faq-list {
  display:grid;
  gap:12px;
  margin-top:18px;
}
.faq-item {
  border-radius:16px;
  border:1px solid rgba(110,188,255,.14);
  background:linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.faq-item > summary {
  cursor:pointer;
  list-style:none;
  padding:18px 22px;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:1.02rem;
  letter-spacing:-.01em;
}
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary::after {
  content:"+";
  font-size:1.2rem;
  font-weight:700;
  color:var(--muted);
  transition:transform .2s ease, color .2s ease;
}
.faq-item[open] > summary::after {
  transform:rotate(45deg);
  color:var(--cyan);
}
.faq-item > .faq-body {
  padding:0 22px 18px;
  color:var(--muted);
  line-height:1.74;
}
.faq-item > .faq-body :first-child { margin-top:0; }
.faq-item > .faq-body :last-child  { margin-bottom:0; }

/* ---------- Quick-start specific ---------- */
.steps {
  display:grid;
  gap:14px;
  list-style:none;
  padding:0;
  margin:18px 0 0;
  counter-reset:step;
}
.steps > li {
  position:relative;
  padding:18px 22px 18px 70px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  border:1px solid rgba(110,188,255,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.02) inset;
  color:var(--muted);
  line-height:1.72;
}
.steps > li::before {
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:18px; top:18px;
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#07111d;
  background:var(--hero-grad);
  font-weight:800;
  font-size:.85rem;
  box-shadow:0 12px 26px rgba(107,136,255,.18);
}
.steps > li strong {
  display:block;
  color:var(--text);
  margin-bottom:4px;
  font-size:1.04rem;
}

.note {
  margin-top:18px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(34,214,255,.06), rgba(133,85,255,.04));
  border:1px solid rgba(109,198,255,.20);
  color:var(--muted);
  line-height:1.72;
}
.note strong { color:var(--text); display:block; margin-bottom:4px; }
.note.warn {
  background:linear-gradient(180deg, rgba(255,180,80,.07), rgba(255,80,140,.05));
  border-color:rgba(255,170,80,.22);
}

.kv {
  display:grid;
  grid-template-columns:minmax(0, 0.36fr) minmax(0, 0.64fr);
  gap:12px 20px;
  margin:0;
  padding:0;
}
.kv dt {
  color:var(--text);
  font-weight:600;
}
.kv dd {
  color:var(--muted);
  margin:0;
  line-height:1.68;
}

/* ---------- Footer ---------- */
.footer { padding:4px 0 40px; }
.footer-card { padding:24px; }
.footer-brand {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.footer-brand img {
  width:56px; height:56px; object-fit:contain;
  border-radius:16px;
  background:rgba(9,15,27,.92);
  padding:6px;
  border:1px solid rgba(109,188,255,.16);
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.footer-links a {
  color:var(--muted);
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(104,180,255,.16);
  background:linear-gradient(180deg, rgba(10,16,29,.72), rgba(8,13,24,.66));
  transition:.2s ease;
}
.footer-links a:hover {
  color:var(--text);
  border-color:rgba(104,198,255,.32);
  transform:translateY(-1px);
}
.fine-print {
  margin-top:14px;
  color:var(--muted);
  line-height:1.72;
  font-size:.95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero, .hero-points, .grid-3, .grid-2, .footer-grid, .workflow-grid { grid-template-columns:1fr; }
  .hero { grid-auto-rows:auto; }
  .hero > div, .hero-points > *, .grid-3 > *, .grid-2 > *, .footer-grid > *, .workflow-grid > * { display:block; }
}
@media (max-width: 720px) {
  .container, .nav { padding-left:16px; padding-right:16px; }
  h1 { font-size:clamp(2.5rem, 10vw, 4rem); }
  /* Mobile nav: keep the brand on the top row, drop the nav-links
     onto a second full-width row so they wrap cleanly on small screens. */
  .nav {
    grid-template-columns:1fr;
    align-items:center;
    row-gap:10px;
  }
  .brand        { grid-column:1; grid-row:1; }
  .nav-links    { grid-column:1; grid-row:2; justify-content:flex-start; }
  .logo-stage img { width:min(100%, 280px); }
  .hero { gap:28px; }
  .hero-actions { width:100%; gap:12px; margin-top:26px; margin-bottom:12px; }
  .hero-actions .btn { flex:1 1 240px; min-width:0; }
  .hero-points { margin-top:22px; }
  .hero-points .card, .hero-points .panel { padding-top:24px; }
  .kv { grid-template-columns:1fr; gap:6px 0; }
  .kv dt { margin-top:10px; }
  .steps > li { padding:16px 18px 16px 64px; }
  .nav-links {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 4px;
    margin-top:2px;
    background:linear-gradient(180deg, rgba(3,6,12,.98), rgba(3,6,12,.94));
    border-top:1px solid rgba(255,255,255,.02);
  }
}



/* =========================================================
   Thank-you / next-steps page + reusable step list
   --------------------------------------------------------- */
.thanks-shell { max-width: 720px; }
.thanks-lead {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.72;
  margin: 6px 0 26px;
  max-width: 60ch;
}
.thanks-steps {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  counter-reset: thstep;
}
.thanks-steps > li {
  position: relative;
  padding: 20px 22px 20px 78px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,16,29,.82), rgba(6,11,20,.92));
  border: 1px solid rgba(110,188,255,.16);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.02) inset;
  color: var(--muted);
  line-height: 1.72;
}
.thanks-steps > li::before {
  counter-increment: thstep;
  content: counter(thstep, decimal-leading-zero);
  position: absolute;
  left: 18px; top: 18px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #07111d;
  background: var(--hero-grad);
  font-weight: 800;
  font-size: .95rem;
  box-shadow: 0 14px 30px rgba(107,136,255,.22);
}
.thanks-steps > li strong {
  display: block;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 1.06rem;
  letter-spacing: -.01em;
}
.thanks-steps > li code {
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(34,214,255,.10);
  border: 1px solid rgba(109,198,255,.22);
  color: var(--text);
  font-size: .92em;
}
.thanks-actions { margin-top: 26px; }
.thanks-foot {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.65;
}

/* "Payment received" badge revealed by query-string detection on
   /thank-you. Purely visual reassurance for customers arriving from
   the Stripe / PayPal post-payment redirect. */
.thanks-paid-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 18px 0 6px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(94, 255, 162, .12), rgba(34, 214, 255, .10));
  border: 1px solid rgba(94, 255, 162, .42);
  color: var(--text);
  font-size: .96rem;
  line-height: 1.55;
  box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 28px rgba(94,255,162,.10);
}
.thanks-paid-banner strong {
  color: #5effa2;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(94,255,162,.10);
  border: 1px solid rgba(94,255,162,.32);
}
.thanks-paid-banner span { color: var(--muted); }

/* =========================================================
   Post-purchase support — inline chip + thank-you card
   --------------------------------------------------------- */

/* "Already subscribed?  [Send your setup details →]"
   Secondary helper sitting directly under the Subscribe buttons.
   Muted contextual label + a real .btn .btn-secondary action.
   The split (text question + button action) is what makes the
   element read as a finished, intentional component rather than
   a text-heavy button.

   Scaling:
   - Primary Subscribe buttons are 54px tall, 1rem text, weight 700.
   - This secondary helper is intentionally smaller at 48px tall,
     .94rem text, weight 600. The 6px height gap + lighter weight
     reads as "clearly secondary" rather than "almost the same."
   - Padding scales proportionally (22px horizontal vs 22px on
     primary, but with the shorter height the proportions still
     read as a smaller button).
   - Label sits on the same baseline as the button via
     align-items:center on the flex container. */
.purchase-help {
  margin-top: 22px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}
.purchase-help-label {
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
}
.purchase-help-btn {
  min-height: 48px;
  padding: 0 22px;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.005em;
  gap: 8px;
  white-space: nowrap;
}
.purchase-help-btn-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--cyan);
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease;
}
.purchase-help-btn:hover .purchase-help-btn-arrow {
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .purchase-help {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  .purchase-help-label {
    white-space: normal;
  }
  .purchase-help-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* Premium "Send your purchase details" card on /thank-you.
   Reuses the visual language of .price-tile (radial glass,
   gradient glow) so the post-purchase experience reads as
   first-class, not as an afterthought. */
.post-purchase-card {
  margin: 28px 0 8px;
  padding: 28px 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(34,214,255,.10), transparent 36%),
    linear-gradient(180deg, rgba(10,16,29,.92), rgba(6,11,20,.94));
  border: 1px solid rgba(110,188,255,.22);
  box-shadow:
    0 28px 60px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 36px rgba(34,214,255,.08);
}
.post-purchase-card-head { margin-bottom: 18px; }
.post-purchase-card-head .eyebrow { margin: 0 0 12px; }
.post-purchase-card-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  letter-spacing: -.025em;
  line-height: 1.22;
  color: var(--text);
}
.post-purchase-card-email {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: .92em;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(34,214,255,.10);
  border: 1px solid rgba(109,198,255,.28);
  color: var(--text);
  letter-spacing: 0;
  user-select: all;
  word-break: break-all;
}

/* Visible "What to include" checklist — replaces the previous
   card-lead paragraph + invisible template fields. Each row shows
   one piece of information the customer should put in their email.
   Bordered container so it reads as a distinct content block; small
   gradient dot per row keeps the cyan/magenta accent rhythm. */
.post-purchase-fields {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(110,188,255,.14);
  border-radius: 14px;
  background: rgba(7,12,22,.55);
  overflow: hidden;
}
.post-purchase-fields li {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: .95rem;
  letter-spacing: -.005em;
  border-bottom: 1px solid rgba(110,188,255,.08);
}
.post-purchase-fields li:last-child { border-bottom: 0; }
.post-purchase-fields li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 8px rgba(34,214,255,.35);
  flex: 0 0 auto;
}
.post-purchase-fields li em {
  font-style: normal;
  color: var(--muted);
  font-size: .88rem;
  margin-left: 2px;
}

.post-purchase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.post-purchase-actions .btn {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 20px;
  font-size: .95rem;
}
.post-purchase-actions .btn.is-copied {
  color: #5effa2;
  border-color: rgba(94,255,162,.42);
  background: linear-gradient(180deg, rgba(8,18,15,.95), rgba(5,12,9,.95));
  box-shadow:
    0 0 0 1px rgba(94,255,162,.10) inset,
    0 12px 28px rgba(0,0,0,.28),
    0 0 28px rgba(94,255,162,.16);
}

/* "About the machine code" note — quiet info callout that sits between
   the copy buttons and the template preview. Subtle cyan tint signals
   it's helpful context, not a required action. */
.post-purchase-note {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(34,214,255,.05);
  border: 1px solid rgba(109,198,255,.20);
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}
.post-purchase-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post-purchase-note p { margin: 0; }

/* Collapsible template preview — quiet by default, expands to show
   the exact subject + body the Copy / Email-with-template buttons
   use. Keeps the card compact for customers who don't need to read
   the template, while remaining honest about what gets sent. */
.post-purchase-template {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(7,12,22,.55);
  border: 1px solid rgba(110,188,255,.14);
}
.post-purchase-template > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 4px 0;
}
.post-purchase-template > summary::-webkit-details-marker { display: none; }
.post-purchase-template > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--cyan);
  transition: transform .18s ease;
}
.post-purchase-template[open] > summary::before { transform: rotate(90deg); }
.post-purchase-template > summary:hover { color: var(--text); }
.post-purchase-template-body { margin-top: 14px; }
.post-purchase-template-field {
  margin: 14px 0 6px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-purchase-template-field:first-child { margin-top: 0; }
.post-purchase-template-field strong { color: var(--text); font-weight: 700; }
.post-purchase-template pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(3,6,12,.62);
  border: 1px solid rgba(110,188,255,.10);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.thanks-flow-heading {
  margin: 34px 0 10px;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  color: var(--text);
}

@media (max-width: 560px) {
  .post-purchase-card { padding: 22px 20px; }
}

/* =========================================================
   Early-release note
   ---------------------------------------------------------
   A subtle, on-brand card used to communicate that NovaQuant
   is an active early release and to invite bug reports.
   Designed to feel secondary — never as loud as a warning
   banner — and to sit comfortably below primary content on
   the thank-you and support pages.
   ========================================================= */
.early-access-note {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10,16,29,.66), rgba(8,13,24,.58));
  border: 1px solid rgba(110,188,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.02) inset;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.early-access-note .early-access-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34,214,255,.08);
  border: 1px solid rgba(34,214,255,.22);
  color: var(--text);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.early-access-note .early-access-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(34,214,255,.65);
}
.early-access-note p {
  margin: 0;
  flex: 1 1 320px;
}
.early-access-note a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(109,198,255,.36);
  padding-bottom: 1px;
}
.early-access-note a:hover { border-bottom-color: var(--cyan); }

/* Footer variant of the early-release note — sits with the
   risk-disclaimer line in .footer-legal and inherits the same
   muted size; we just lighten it a touch so it reads as a
   secondary, ambient note rather than fresh content. */
.footer-legal .footer-legal-fineprint + .footer-legal-fineprint {
  margin-top: 6px;
  opacity: .72;
}

/* =========================================================
   Manual delivery flow — Pay → Send → Verify → Deliver
   ---------------------------------------------------------
   Lives on the homepage under #delivery and again on the
   /thank-you page as the lead post-purchase explanation.
   Reuses the .thanks-steps visual rhythm but lays out as a
   4-column flow on desktop so the four steps read as a
   single horizontal process rather than a stack.  Drops
   back to a single column on tablet / mobile.
   ========================================================= */
.delivery-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  counter-reset: delivery;
}
.delivery-flow > li {
  position: relative;
  padding: 22px 22px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,16,29,.86), rgba(6,11,20,.94));
  border: 1px solid rgba(110,188,255,.16);
  box-shadow:
    0 16px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 28px rgba(34,214,255,.05);
  color: var(--muted);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}
.delivery-flow > li::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #07111d;
  background: var(--hero-grad);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;
  box-shadow: 0 14px 28px rgba(107,136,255,.20);
}
.delivery-flow > li strong {
  display: block;
  color: var(--text);
  font-size: 1.04rem;
  letter-spacing: -.01em;
}
.delivery-flow > li span {
  display: block;
  color: var(--muted);
  line-height: 1.68;
  font-size: .96rem;
}
.delivery-flow > li code {
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(34,214,255,.10);
  border: 1px solid rgba(109,198,255,.22);
  color: var(--text);
  font-size: .9em;
}
.delivery-flow > li a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(109,198,255,.36);
  padding-bottom: 1px;
}
.delivery-flow > li a:hover { border-bottom-color: var(--cyan); }

@media (max-width: 1080px) {
  .delivery-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .delivery-flow { grid-template-columns: 1fr; }
}

/* =========================================================
   "What to expect" trust strip
   ---------------------------------------------------------
   Compact 4-up row of honest trust facts (billing, local-first
   data, cancellation, real-human support).  Reuses the panel
   visual language but shorter and quieter than .card so the
   strip reads as a "fine print at a glance" element rather
   than a marketing claim.
   ========================================================= */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.trust-strip > .trust-item {
  position: relative;
  padding: 18px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  border: 1px solid rgba(110,188,255,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust-strip > .trust-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 12px rgba(34,214,255,.30);
  margin-bottom: 4px;
}
.trust-strip > .trust-item strong {
  display: block;
  color: var(--text);
  font-size: .98rem;
  letter-spacing: -.01em;
}
.trust-strip > .trust-item span {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
@media (max-width: 1080px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* =========================================================
   Pricing right-column "Included with subscription" heading
   ---------------------------------------------------------
   Tiny uppercase heading sitting above .price-features.
   Keeps the value list visually distinct from the price/CTA
   column so customers immediately see the right column is the
   "what you get" answer.
   ========================================================= */
.price-features-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
.price-included-head {
  margin: 0 0 4px;
  padding: 0 0 10px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid rgba(110,188,255,.18);
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-included-head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 12px rgba(34,214,255,.35);
}

/* =========================================================
   "How NovaQuant fits into your workflow" — guided product tour
   ---------------------------------------------------------
   Replaces the "we should add screenshots" idea with a clean
   5-step card flow.  No real screenshots — just numbered cards
   describing each step of the routine the customer will follow
   inside the app.  Auto-fits the available width:
     wide  → 5 columns
     mid   → 3 columns (3 + 2 wrap)
     narrow → 2 columns
     mobile → 1 column
   No new hex codes — every colour resolves through the
   existing accent / panel / border tokens.
   ========================================================= */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  align-items: stretch;
}
.tour-grid > .tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,16,29,.86), rgba(6,11,20,.94));
  border: 1px solid rgba(110,188,255,.16);
  box-shadow: 0 16px 38px rgba(0,0,0,.34),
              0 0 0 1px rgba(255,255,255,.02) inset,
              0 0 28px rgba(34,214,255,.05);
  min-height: 100%;
}
.tour-grid > .tour-card::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--hero-grad);
  color: #07111d;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(107,136,255,.18);
  margin-bottom: 4px;
}
.tour-grid > .tour-card strong {
  display: block;
  color: var(--text);
  font-size: 1.04rem;
  letter-spacing: -.01em;
  line-height: 1.32;
}
.tour-grid > .tour-card p {
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.66;
}

@media (max-width: 1180px) {
  .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .tour-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   "Why this matters" — three-card grounded value section
   ---------------------------------------------------------
   Visual variant of the existing .grid-3 + .card pair with
   a slightly lifted accent badge per card so the reader's eye
   lands on the value name first.
   ========================================================= */
.value-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
  align-items: stretch;
}
.value-cards > .value-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,16,29,.88), rgba(6,11,20,.94));
  border: 1px solid rgba(110,188,255,.16);
  box-shadow: 0 18px 46px rgba(0,0,0,.35),
              0 0 24px rgba(34,214,255,.04),
              0 0 0 1px rgba(255,255,255,.03) inset;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.value-cards > .value-card .value-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d7ecff;
  background: linear-gradient(180deg, rgba(10,17,31,.86), rgba(8,14,26,.80));
  border: 1px solid rgba(109,198,255,.24);
  box-shadow: 0 0 18px rgba(34,214,255,.12);
}
.value-cards > .value-card .value-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
}
.value-cards > .value-card h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.18rem;
  letter-spacing: -.02em;
}
.value-cards > .value-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.74;
  font-size: .98rem;
}

@media (max-width: 980px) {
  .value-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   "What you receive after subscribing" — receive panel pair
   ---------------------------------------------------------
   Two-column receive grid that reuses the .panel / .list
   visual rhythm so the section feels of-a-piece with the
   Features and Built-for blocks above it.  No new chrome —
   the receive-grid alias just gives the section a stable
   selector so verifiers / future edits target it directly.
   ========================================================= */
.receive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: 22px;
}
.receive-grid > .panel { width: 100%; min-height: 100%; }
@media (max-width: 880px) {
  .receive-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   "Current product focus" — quiet active-improvement strip
   ---------------------------------------------------------
   Single small card with a "Active development" label tag
   and a list of in-flight focus areas.  Designed to read
   as confident maintenance notes — not as "this is broken".
   ========================================================= */
.focus-card {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,16,29,.78), rgba(6,11,20,.86));
  border: 1px solid rgba(110,188,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.28),
              0 0 0 1px rgba(255,255,255,.02) inset;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.focus-card .focus-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(34,214,255,.08);
  border: 1px solid rgba(34,214,255,.22);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.focus-card .focus-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(34,214,255,.65);
}
.focus-card .focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.focus-card .focus-list li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.66;
  font-size: .96rem;
}
.focus-card .focus-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 14px rgba(34,214,255,.18);
}
.focus-card .focus-foot {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .focus-card .focus-list { grid-template-columns: 1fr; }
}

/* ==========================================================
   NovaQuant Lite — added 2026-05-16
   Lite is intentionally visually quieter than Premium.  Lite
   uses the calmer ``.btn-secondary`` chrome; Premium keeps the
   accent-gradient ``.btn-primary`` chrome.  Plan comparison
   cards live on the same panel surface but Lite has a subdued
   border + Premium has the accent-tinted border + glow.
   ========================================================== */

/* Tertiary button — for the third hero CTA ("View features"). */
.btn-tertiary {
  color: var(--muted);
  background: transparent;
  border-color: rgba(109,198,255,.12);
  box-shadow: none;
}
.btn-tertiary:hover {
  color: var(--text);
  border-color: rgba(109,198,255,.28);
  background: rgba(11,17,31,.55);
}

/* Hero hint strip under the action buttons — tells users
   what the secondary Lite button actually downloads. */
.hero-lite-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 560px;
}
.lite-pill,
.plan-tag-lite,
.plan-tag-premium,
.plan-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lite-pill,
.plan-tag-lite {
  color: rgba(202,224,255,.92);
  background: rgba(34,214,255,.08);
  border: 1px solid rgba(109,198,255,.22);
}
.plan-tag-premium {
  color: #07111d;
  background: var(--hero-grad);
  border: 1px solid transparent;
  box-shadow: 0 8px 22px rgba(107,136,255,.20);
}

/* Plan compare row — Lite (left) + Premium (right) above the
   existing detailed Premium ``.price-tile``.  Premium card is
   visually dominant; Lite is calmer. */
.plan-compare {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
  margin-bottom: 26px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 24px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11,17,31,.92), rgba(7,12,22,.94));
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 18px 44px rgba(2,5,11,.32);
}
.plan-card-lite {
  border-color: rgba(109,198,255,.16);
}
.plan-card-premium {
  border-color: rgba(107,136,255,.32);
  background:
    radial-gradient(120% 100% at 90% 0%, rgba(34,214,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(13,20,38,.96), rgba(7,12,22,.96));
  box-shadow:
    0 0 0 1px rgba(34,214,255,.06) inset,
    0 26px 56px rgba(2,5,11,.40),
    0 0 32px rgba(107,136,255,.10);
}
.plan-card-head h3 {
  margin: 8px 0 4px;
  font-size: 1.18rem;
  color: var(--text);
}
.plan-tagline {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.plan-price-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.plan-card-premium .plan-price-num {
  background: var(--hero-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-price-per {
  color: var(--muted);
  font-size: .92rem;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-features li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.55;
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(109,198,255,.55);
}
.plan-card-premium .plan-features li::before {
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 10px rgba(34,214,255,.20);
}
/* Lite "this feature is NOT included" bullets — quieter dot
   plus a muted strike-through-feel via lower opacity.  Keeps
   the visual hierarchy: included features are bright dots,
   excluded features are clearly de-emphasised. */
.plan-card-lite .plan-features li.plan-feature-no {
  color: rgba(180,190,210,.62);
}
.plan-card-lite .plan-features li.plan-feature-no::before {
  background: rgba(120,130,150,.40);
  box-shadow: none;
}
.plan-cta {
  align-self: stretch;
  text-align: center;
  margin-top: auto;
}
.plan-foot {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
  opacity: .9;
}

@media (max-width: 720px) {
  .plan-compare { grid-template-columns: 1fr; }
}

/* Access-flow split — Lite (free, instant) on the left,
   Premium (manual verification) on the right.  Premium keeps
   the existing ``.delivery-flow`` ordered-list inside, so the
   four-step manual flow is unchanged. */
.access-flow-wrap {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1.4fr;
  margin-top: 20px;
}
.access-flow-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11,17,31,.92), rgba(7,12,22,.94));
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 14px 36px rgba(2,5,11,.28);
}
.access-flow-lite {
  border-color: rgba(109,198,255,.16);
}
.access-flow-premium {
  border-color: rgba(107,136,255,.28);
  background:
    radial-gradient(120% 100% at 90% 0%, rgba(34,214,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(13,20,38,.96), rgba(7,12,22,.96));
}
.access-flow-head h3 {
  margin: 8px 0 0;
  font-size: 1.08rem;
  color: var(--text);
}
.access-flow-steps {
  margin: 6px 0 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  counter-reset: lite-step;
}
.access-flow-steps > li {
  position: relative;
  padding-left: 14px;
  color: var(--muted);
  line-height: 1.55;
  font-size: .94rem;
}
.access-flow-steps > li::before {
  counter-increment: lite-step;
  content: counter(lite-step, decimal-leading-zero) ".";
  position: absolute;
  left: -1.05em;
  top: 0;
  color: rgba(34,214,255,.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
}
.access-flow-steps > li strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}
.access-flow-steps > li span { display: block; }
.access-flow-foot {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
  opacity: .9;
}

@media (max-width: 860px) {
  .access-flow-wrap { grid-template-columns: 1fr; }
}

/* ==========================================================
   "Try NovaQuant Lite First" section — added 2026-05-16.
   Dedicated section that elevates Lite to a top-level
   homepage surface (sits directly above #pricing).  Visual
   weight stays calmer than the Premium pricing tile below —
   Lite is a visible secondary path, Premium remains the
   dominant paid product.
   ========================================================== */
.try-lite-card {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  padding: 26px 28px;
  margin-top: 12px;
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 5% 0%, rgba(109,198,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(11,17,31,.92), rgba(7,12,22,.94));
  border: 1px solid rgba(109,198,255,.18);
  box-shadow: 0 18px 44px rgba(2,5,11,.30);
}
.try-lite-copy {
  min-width: 0;
}
.try-lite-lead {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 600;
}
.try-lite-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.try-lite-bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}
.try-lite-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(109,198,255,.55);
}
.try-lite-bullets li strong {
  color: var(--text);
}
.try-lite-foot {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.try-lite-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 220px;
}
.try-lite-actions .btn {
  text-align: center;
  width: 100%;
}
.try-lite-learn {
  margin-top: 4px;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px dashed rgba(109,198,255,.0);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.try-lite-learn:hover {
  color: var(--text);
  border-bottom-color: rgba(109,198,255,.35);
}

@media (max-width: 860px) {
  .try-lite-card {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
  .try-lite-actions { min-width: 0; }
}