/* ============================================================
   نبض (Nabz) — Landing v3
   A full marketing surface: bento capabilities, attribution
   explainer, interactive campaign report, comparison, FAQ.
   Namespace `n-` so nothing collides with the legacy stylesheet
   loaded underneath (which still supplies fonts + login modal).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand ramp — emerald, pulled a touch cooler than the legacy set */
  --n-e50: #ecfdf5;
  --n-e100: #d1fae5;
  --n-e200: #a7f3d0;
  --n-e300: #6ee7b7;
  --n-e400: #34d399;
  --n-e500: #10b981;
  --n-e600: #059669;
  --n-e700: #047857;
  --n-e800: #065f46;
  --n-e900: #064e3b;
  --n-e950: #022c22;

  /* Ink — green-shifted neutrals so type sits on the same axis as brand */
  --n-ink: #06140f;
  --n-ink-2: #14332a;
  --n-body: #3d5a50;
  --n-muted: #6c877c;
  --n-faint: #9ab0a6;

  /* Surfaces */
  --n-bg: #ffffff;
  --n-bg-soft: #f6fbf8;
  --n-bg-mint: #eef9f3;
  --n-top-bg: #eaf8f1;
  --n-line: #e4f0ea;
  --n-line-2: #cfe6db;

  /* Dark band */
  --n-dark: #04231a;
  --n-dark-2: #08301f;
  --n-dark-3: #0c4030;
  --n-dark-line: rgba(167, 243, 208, 0.16);
  --n-on-dark: #ffffff;
  --n-on-dark-2: rgba(255, 255, 255, 0.88);
  --n-on-dark-3: rgba(255, 255, 255, 0.66);

  /* Support colours — used only with an icon or label beside them */
  --n-amber: #b45309;
  --n-amber-bg: #fef6e7;
  --n-rose: #9f1239;
  --n-rose-bg: #fdf2f5;
  --n-sky: #0369a1;
  --n-sky-bg: #eef7fd;
  --n-violet: #6d28d9;
  --n-violet-bg: #f4f0fe;

  /* Radii */
  --n-r-xs: 8px;
  --n-r-sm: 12px;
  --n-r: 16px;
  --n-r-lg: 22px;
  --n-r-xl: 30px;
  --n-r-full: 999px;

  /* Elevation — emerald-tinted so shadows read as brand, not grime */
  --n-sh-xs: 0 1px 2px rgba(4, 35, 26, 0.05);
  --n-sh-sm: 0 2px 4px rgba(4, 35, 26, 0.04), 0 4px 12px rgba(4, 35, 26, 0.05);
  --n-sh: 0 4px 8px rgba(4, 35, 26, 0.04), 0 12px 28px rgba(4, 35, 26, 0.07);
  --n-sh-lg: 0 8px 16px rgba(4, 35, 26, 0.05), 0 28px 60px rgba(4, 35, 26, 0.11);
  --n-sh-xl: 0 12px 24px rgba(4, 35, 26, 0.06), 0 48px 100px rgba(4, 35, 26, 0.16);
  --n-sh-glow: 0 12px 32px rgba(5, 150, 105, 0.28);

  /* Motion */
  --n-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --n-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --n-t: 220ms;
  --n-t-slow: 520ms;

  --n-shell: 1200px;
  --n-shell-narrow: 860px;
}

/* ---------- 2. Base ---------- */
html {
  background: var(--n-bg);
}

body.n-body {
  background: var(--n-top-bg);
  color: var(--n-ink);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.n-body ::selection {
  background: var(--n-e200);
  color: var(--n-e950);
}

.n-body :focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Persian numerals are wider than latin — tabular figures keep tables
   and metric rows from jittering as values change. */
.n-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 3. Layout primitives ---------- */
.n-shell {
  width: 100%;
  max-width: var(--n-shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.n-shell--narrow {
  max-width: var(--n-shell-narrow);
}

.n-sec {
  position: relative;
  padding-block: clamp(72px, 10vw, 132px);
  background: var(--n-bg);
}

.n-sec--tight {
  padding-block: clamp(56px, 7vw, 88px);
}

.n-sec--soft {
  background: var(--n-bg-soft);
  border-block: 1px solid var(--n-line);
}

.n-sec--mint {
  background: linear-gradient(180deg, var(--n-bg-mint), var(--n-bg-soft));
  border-block: 1px solid var(--n-line);
}

.n-sec--dark {
  background: var(--n-dark);
  color: var(--n-on-dark);
  overflow: hidden;
}

/* Dot grid — anchors the eye without adding visual weight */
.n-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(5, 150, 105, 0.14) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent);
  pointer-events: none;
}

.n-sec--dark .n-dots {
  background-image: radial-gradient(
    rgba(110, 231, 183, 0.18) 1px,
    transparent 1px
  );
}

/* Blurred brand orb */
.n-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  opacity: 0.6;
}

/* ---------- 4. Type ---------- */
.n-body h1,
.n-body h2,
.n-body h3,
.n-body h4 {
  letter-spacing: 0;
  text-wrap: balance;
}

.n-display {
  margin: 0;
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--n-ink);
}

.n-h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  font-weight: 800;
  line-height: 1.38;
  color: var(--n-ink);
}

.n-h3 {
  margin: 0;
  font-size: clamp(1.125rem, 1.9vw, 1.3rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--n-ink);
}

.n-lede {
  margin: 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
  line-height: 1.85;
  color: var(--n-body);
}

.n-p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--n-body);
}

.n-small {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--n-muted);
}

.n-accent {
  color: var(--n-e700);
}

.n-sec--dark .n-h2,
.n-sec--dark .n-display {
  color: var(--n-on-dark);
}

.n-sec--dark .n-lede,
.n-sec--dark .n-p {
  color: var(--n-on-dark-2);
}

.n-sec--dark .n-accent {
  color: var(--n-e300);
}

/* Marker highlight — a brand wash behind a phrase, not a gradient fill */
.n-mark {
  padding-inline: 0.12em;
  background-image: linear-gradient(var(--n-e200), var(--n-e200));
  background-repeat: no-repeat;
  background-size: 100% 0.28em;
  background-position: 0 86%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.n-sec--dark .n-mark {
  background-image: linear-gradient(
    rgba(16, 185, 129, 0.35),
    rgba(16, 185, 129, 0.35)
  );
}

/* ---------- 5. Section heading block ---------- */
.n-head {
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: clamp(40px, 6vw, 68px);
  text-align: center;
}

.n-head--start {
  margin-inline: 0;
  text-align: start;
}

.n-head .n-lede {
  margin-block-start: 18px;
}

#attr-title {
  font-size: clamp(1.375rem, 6vw, 2.35rem);
}

#attr-title .n-title-line {
  display: block;
  white-space: nowrap;
  text-wrap: nowrap;
}

#proof-title {
  font-size: clamp(1.25rem, 6vw, 2.7rem);
  white-space: nowrap;
  text-wrap: nowrap;
}

@media (min-width: 641px) {
  .n-body .n-head h2.n-h2 {
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

@media (max-width: 720px) {
  #analyze-title,
  #campaign-title,
  #channels-title {
    font-size: clamp(0.95rem, 4.2vw, 1.5rem);
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* ---------- 6. Buttons ---------- */
.n-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: var(--n-r-sm);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--n-t) var(--n-ease),
    border-color var(--n-t) var(--n-ease),
    box-shadow var(--n-t) var(--n-ease),
    transform var(--n-t) var(--n-ease);
}

.n-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  transition: transform var(--n-t) var(--n-ease);
}

.n-btn--lg {
  min-height: 56px;
  padding-inline: 28px;
  font-size: 1.0625rem;
}

.n-btn--block {
  width: 100%;
}

.n-btn--primary {
  background: var(--n-e600);
  border-color: var(--n-e700);
  color: #fff;
  box-shadow: var(--n-sh-sm);
}

.n-btn--primary:hover {
  background: var(--n-e700);
  box-shadow: var(--n-sh-glow);
  transform: translateY(-1px);
}

.n-btn--primary:active {
  transform: translateY(0);
}

/* Arrow leads the eye toward the reading direction (leftwards in RTL) */
.n-btn--primary:hover .n-btn__arrow {
  transform: translateX(-3px);
}

.n-btn--ghost {
  background: var(--n-bg);
  border-color: var(--n-line-2);
  color: var(--n-ink-2);
  box-shadow: var(--n-sh-xs);
}

.n-btn--ghost:hover {
  border-color: var(--n-e400);
  color: var(--n-e700);
  background: var(--n-e50);
}

.n-btn--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.n-btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}

.n-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--n-e800);
  box-shadow: var(--n-sh);
}

.n-btn--white:hover {
  background: var(--n-e50);
  transform: translateY(-1px);
}

/* Quiet text action */
.n-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--n-e700);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.n-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform var(--n-t) var(--n-ease);
}

.n-link:hover {
  color: var(--n-e800);
}

.n-link:hover svg {
  transform: translateX(-3px);
}

/* ---------- 7. Surfaces ---------- */
.n-card {
  position: relative;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r);
  background: var(--n-bg);
  box-shadow: var(--n-sh-xs);
}

/* Gradient hairline — one solid border can't fade, two layers can */
.n-card--edge {
  border-color: transparent;
  background:
    linear-gradient(var(--n-bg), var(--n-bg)) padding-box,
    linear-gradient(160deg, var(--n-e200), var(--n-line) 46%, var(--n-line))
      border-box;
}

.n-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--n-r-sm);
  background: var(--n-e50);
  color: var(--n-e700);
  border: 1px solid var(--n-e100);
}

.n-ico svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.n-ico--amber { background: var(--n-amber-bg); color: var(--n-amber); border-color: #f6e3c2; }
.n-ico--rose  { background: var(--n-rose-bg);  color: var(--n-rose);  border-color: #f6dbe3; }
.n-ico--sky   { background: var(--n-sky-bg);   color: var(--n-sky);   border-color: #d3e9f8; }
.n-ico--violet{ background: var(--n-violet-bg);color: var(--n-violet);border-color: #e2daf9; }

/* ---------- 8. Scroll reveal ---------- */
.n-rise {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--n-t-slow) var(--n-ease),
    transform var(--n-t-slow) var(--n-ease);
  transition-delay: var(--n-delay, 0ms);
}

.n-rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .n-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .n-btn,
  .n-btn svg,
  .n-link svg {
    transition: none;
  }
}

.n-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   9. Navigation — floating glass bar
   ============================================================ */
.n-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 14px;
  transition: padding var(--n-t) var(--n-ease);
}

.n-nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-lg);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--n-sh-xs);
  transition:
    box-shadow var(--n-t) var(--n-ease),
    border-color var(--n-t) var(--n-ease);
}

.n-nav.is-stuck .n-nav__inner {
  border-color: var(--n-line-2);
  box-shadow: var(--n-sh);
}

.n-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 6px;
  text-decoration: none;
  color: var(--n-ink);
}

.n-brand img {
  width: 34px;
  height: 34px;
}

.n-brand__name {
  font-size: 1.25rem;
  font-weight: 800;
}

.n-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.n-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: var(--n-r-xs);
  color: var(--n-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--n-t) var(--n-ease),
    background var(--n-t) var(--n-ease);
}

.n-nav__links a:hover {
  color: var(--n-e700);
  background: var(--n-e50);
}

.n-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.n-nav__links + .n-nav__actions {
  margin-inline-start: 0;
}

.n-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-inline-start: auto;
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r-xs);
  background: var(--n-bg);
  color: var(--n-ink-2);
  cursor: pointer;
}

.n-nav__burger svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.n-drawer {
  margin-block-start: 10px;
  padding: 12px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-lg);
  background: var(--n-bg);
  box-shadow: var(--n-sh-lg);
}

.n-drawer[hidden] {
  display: none;
}

.n-drawer a {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding-inline: 12px;
  border-radius: var(--n-r-xs);
  color: var(--n-ink-2);
  font-weight: 600;
  text-decoration: none;
}

.n-drawer a:hover {
  background: var(--n-e50);
  color: var(--n-e700);
}

.n-drawer .n-btn {
  margin-block-start: 10px;
}

@media (max-width: 940px) {
  .n-nav__links,
  .n-nav__actions {
    display: none;
  }

  .n-nav__burger {
    display: inline-flex;
  }
}

/* ============================================================
   10. Hero
   ============================================================ */
.n-hero {
  position: relative;
  padding-block: clamp(44px, 6vw, 76px) clamp(60px, 8vw, 96px);
  overflow: clip;
}

.n-hero__orb-a {
  inset-block-start: -180px;
  inset-inline-end: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.34), transparent);
}

.n-hero__orb-b {
  inset-block-start: 60px;
  inset-inline-start: -160px;
  width: 460px;
  height: 460px;
  background: radial-gradient(closest-side, rgba(110, 231, 183, 0.3), transparent);
}

.n-hero__inner {
  position: relative;
  text-align: center;
}

.n-hero__copy {
  max-width: 54rem;
  margin-inline: auto;
}

.n-hero__title {
  margin-block-start: 22px;
}

.n-hero__title span {
  display: block;
}

.n-hero__lede {
  max-width: 40rem;
  margin: 24px auto 0;
}

.n-hero__lede strong {
  color: var(--n-ink);
  font-weight: 700;
}

.n-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-block-start: 36px;
}

.n-hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.n-hero__reassure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--n-muted);
}

.n-hero__reassure svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: var(--n-e600);
}

/* --- Hero product frame --- */
.n-stage {
  position: relative;
  margin-block-start: clamp(44px, 6vw, 68px);
}

.n-stage__frame {
  position: relative;
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r-lg);
  background: linear-gradient(180deg, #fff, var(--n-bg-soft));
  box-shadow: var(--n-sh-xl);
  overflow: hidden;
}

.n-stage__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--n-line);
  background: var(--n-bg-soft);
}

.n-stage__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--n-line-2);
}

.n-stage__title {
  margin-inline-start: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--n-muted);
}

.n-stage__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Annotation cards that float over the screenshot corners */
.n-pin {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-sm);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--n-sh-lg);
  animation: n-float 6s var(--n-ease) infinite;
}

.n-pin__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--n-e50);
  color: var(--n-e700);
}

.n-pin__ico svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.n-pin__lbl {
  display: block;
  font-size: 0.6875rem;
  color: var(--n-muted);
}

.n-pin__val {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--n-ink);
  line-height: 1.4;
}

.n-pin--a {
  inset-block-start: -24px;
  inset-inline-end: 8%;
  animation-delay: -1.4s;
}

.n-pin--b {
  inset-block-end: 12%;
  inset-inline-end: -20px;
  animation-delay: -3.6s;
}

.n-stage__frame::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
}

@keyframes n-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .n-pin { animation: none; }
}

@media (max-width: 800px) {
  .n-pin { display: none; }
}

/* ============================================================
   11. Platform strip
   ============================================================ */
.n-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 40px;
  padding-block: 30px;
}

.n-strip__lbl {
  font-size: 0.875rem;
  color: var(--n-muted);
}

.n-strip__lbl-mobile {
  display: none;
}

.n-plat {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  inline-size: 220px;
  block-size: 64px;
  box-sizing: border-box;
  padding: 8px 16px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-full);
  background: var(--n-bg);
  box-shadow: var(--n-sh-xs);
}

.n-plat img {
  inline-size: 92px;
  block-size: auto;
}

.n-plat__badge {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--n-r-full);
  background: var(--n-e50);
  color: var(--n-e700);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .n-strip {
    flex-wrap: nowrap;
    gap: 4px;
    padding-block: 20px;
    white-space: nowrap;
  }

  .n-strip__lbl {
    flex: none;
    font-size: clamp(0.5625rem, 2.7vw, 0.6875rem);
  }

  .n-strip__lbl-full {
    display: none;
  }

  .n-strip__lbl-mobile {
    display: inline;
  }

  .n-plat {
    flex: none;
    inline-size: clamp(106px, 32vw, 160px);
    block-size: clamp(42px, 10vw, 60px);
    gap: 3px;
    padding: clamp(3px, 1.2vw, 8px);
  }

  .n-plat img {
    inline-size: clamp(47px, 14vw, 82px);
  }

  .n-plat__badge {
    padding: 1px 3px;
    font-size: clamp(0.46875rem, 2.2vw, 0.625rem);
  }
}

/* ============================================================
   12. Problem — the leak, stated as numbers
   ============================================================ */
.n-leak {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .n-leak {
    grid-template-columns: 1fr 1.05fr;
  }
}

.n-leak__list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.n-leak__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--n-body);
}

.n-leak__list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-block-start: 6px;
  fill: var(--n-rose);
}

/* Cohort bars: first purchase vs. second purchase */
.n-cohort {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--n-r-lg);
}

.n-cohort__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: 26px;
}

.n-cohort__legend {
  display: flex;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--n-muted);
}

.n-cohort__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.n-cohort__legend i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.n-cohort__legend i.is-back { background: var(--n-e500); }
.n-cohort__legend i.is-gone { background: var(--n-line-2); }

.n-cohort__bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(6px, 1.4vw, 14px);
  align-items: end;
  height: 200px;
}

.n-cohort__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  height: 100%;
}

.n-cohort__gone,
.n-cohort__back {
  border-radius: 5px;
  transition: height var(--n-t-slow) var(--n-ease);
}

.n-cohort__gone {
  background: var(--n-line-2);
}

.n-cohort__back {
  background: linear-gradient(180deg, var(--n-e400), var(--n-e600));
}

.n-cohort__x {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(6px, 1.4vw, 14px);
  margin-block-start: 12px;
  font-size: 0.6875rem;
  color: var(--n-faint);
  text-align: center;
}

.n-cohort__note {
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--n-line);
}

/* ============================================================
   13. Bento capabilities grid
   ============================================================ */
.n-bento {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(6, 1fr);
}

.n-bento > * {
  grid-column: span 6;
}

@media (min-width: 720px) {
  .n-bento > * {
    grid-column: span 3;
  }
  .n-bento__wide {
    grid-column: span 6;
  }
}

@media (min-width: 1020px) {
  .n-bento > * {
    grid-column: span 2;
  }
  .n-bento__wide {
    grid-column: span 4;
  }
  .n-bento__half {
    grid-column: span 3;
  }
}

.n-tile {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--n-r-lg);
  overflow: hidden;
  transition:
    transform var(--n-t) var(--n-ease),
    box-shadow var(--n-t) var(--n-ease),
    border-color var(--n-t) var(--n-ease);
}

.n-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--n-sh);
}

.n-tile h3 {
  margin-block-start: 18px;
}

.n-tile p {
  margin-block-start: 10px;
}

.n-tile__viz {
  margin-block-start: auto;
  padding-block-start: 22px;
  border-block-start: 1px dashed var(--n-line-2);
}

.n-tile--feature {
  background: linear-gradient(165deg, var(--n-e900), var(--n-dark));
  border-color: transparent;
  color: var(--n-on-dark);
}

.n-tile--feature h3 {
  color: #fff;
}

.n-tile--feature p {
  color: var(--n-on-dark-2);
}

.n-tile--feature .n-ico {
  background: rgba(16, 185, 129, 0.16);
  border-color: var(--n-dark-line);
  color: var(--n-e300);
}

.n-tile--feature .n-tile__viz {
  border-block-start-color: var(--n-dark-line);
}

/* Segment chips inside the RFM tile */
.n-segs {
  display: grid;
  gap: 8px;
}

.n-seg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-xs);
  background: var(--n-bg-soft);
  font-size: 0.8125rem;
}

.n-seg i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
}

.n-seg__name {
  font-weight: 600;
  color: var(--n-ink-2);
}

.n-seg__n {
  margin-inline-start: auto;
  color: var(--n-muted);
  font-size: 0.75rem;
}

.n-seg__bar {
  width: 62px;
  height: 5px;
  border-radius: 3px;
  background: var(--n-line);
  overflow: hidden;
}

.n-seg__bar i {
  display: block;
  width: var(--n-w, 50%);
  height: 100%;
  border-radius: 3px;
}

/* SMS bubble preview */
.n-sms {
  padding: 14px 16px;
  border-radius: 14px 14px 14px 4px;
  background: var(--n-e50);
  border: 1px solid var(--n-e100);
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--n-ink-2);
}

.n-sms code {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--n-e600);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8125rem;
}

.n-sms__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 12px;
  font-size: 0.75rem;
  color: var(--n-muted);
}

.n-sms__meta svg {
  width: 14px;
  height: 14px;
  fill: var(--n-e600);
}

/* Big metric with sparkline */
.n-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.n-metric__val {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  font-weight: 800;
  line-height: 1.25;
}

.n-metric__unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--n-on-dark-3);
}

.n-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 8px;
  padding: 3px 10px;
  border-radius: var(--n-r-full);
  background: rgba(16, 185, 129, 0.16);
  color: var(--n-e300);
  font-size: 0.75rem;
  font-weight: 700;
}

.n-spark {
  display: block;
  width: 100%;
  height: 72px;
  margin-block-start: 18px;
  overflow: visible;
}

.n-spark__line {
  fill: none;
  stroke: var(--n-e300);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.n-spark__area {
  fill: url(#nSparkFill);
  stroke: none;
}

/* Small stat pair inside tiles */
.n-pair {
  display: flex;
  gap: 22px;
}

.n-pair div {
  flex: 1;
}

.n-pair b {
  display: block;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--n-ink);
}

.n-pair span {
  font-size: 0.75rem;
  color: var(--n-muted);
}

/* ============================================================
   14. Attribution explainer — light card, ordered steps
   ============================================================ */
.n-attr {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 940px) {
  .n-attr {
    grid-template-columns: 0.92fr 1.08fr;
  }
}

.n-flow {
  display: grid;
  gap: 8px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--n-r-lg);
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
}

.n-flow__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--n-r-sm);
  background: var(--n-bg);
  border: 1px solid var(--n-line);
  box-shadow: var(--n-sh-xs);
}

.n-flow__row--result {
  background: linear-gradient(150deg, var(--n-e600), var(--n-e800));
  border-color: var(--n-e700);
  box-shadow: var(--n-sh-glow);
}

.n-flow__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--n-e50);
  color: var(--n-e700);
  border: 1px solid var(--n-e100);
  font-size: 0.8125rem;
  font-weight: 800;
}

.n-flow__row--result .n-flow__n {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.n-flow__txt {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--n-body);
}

.n-flow__txt b {
  color: var(--n-ink);
}

.n-flow__row--result .n-flow__txt,
.n-flow__row--result .n-flow__txt b {
  color: #fff;
}

.n-flow__tag {
  padding: 4px 11px;
  border-radius: var(--n-r-full);
  background: var(--n-bg-mint);
  color: var(--n-e700);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.n-flow__row--result .n-flow__tag {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}

.n-flow__connector {
  display: flex;
  justify-content: center;
  color: var(--n-line-2);
}

.n-flow__connector svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  rotate: -90deg;
}

/* One concise view from campaign recommendation to measured revenue */
.n-campaign-brief {
  display: grid;
  width: min(100%, 940px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r-lg);
  background: var(--n-bg);
  box-shadow: var(--n-sh);
}

@media (min-width: 780px) {
  .n-campaign-brief {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.n-campaign-brief__proposal,
.n-campaign-brief__result {
  padding: clamp(24px, 4vw, 38px);
}

.n-campaign-brief__proposal h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 16px;
  font-size: clamp(1.3rem, 2.7vw, 1.75rem);
  color: var(--n-ink);
}

.n-campaign-brief__proposal h3 > svg,
.n-campaign-brief__cycle > svg,
.n-campaign-brief__facts svg {
  width: 21px;
  height: 21px;
  flex: none;
  fill: currentColor;
  color: var(--n-e600);
}

.n-campaign-brief__proposal h3 strong {
  color: var(--n-e700);
}

@media (max-width: 1020px) {
  .n-campaign-brief__proposal h3 {
    font-size: clamp(0.95rem, 2.4vw, 1.125rem);
    line-height: 1.55;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

.n-campaign-brief__proposal > p,
.n-campaign-brief__result > p {
  margin-block-start: 12px;
  line-height: 1.9;
}

.n-campaign-brief__proposal > p {
  color: var(--n-body);
}

.n-campaign-brief__cycle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.n-campaign-brief__cycle > svg {
  margin-block-start: 5px;
}

.n-campaign-brief__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--n-r-full);
  background: var(--n-bg-mint);
  color: var(--n-e700);
  font-size: 0.75rem;
  font-weight: 700;
}

.n-campaign-brief__label svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}

.n-campaign-brief__facts,
.n-campaign-brief__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 20px;
}

.n-campaign-brief__facts > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-sm);
  background: var(--n-bg-soft);
  color: var(--n-body);
  font-size: 0.8125rem;
}

.n-campaign-brief__facts b {
  color: var(--n-ink);
}

.n-campaign-brief__result {
  background: var(--n-e800);
  color: #fff;
}

.n-campaign-brief__result .n-campaign-brief__label {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.n-campaign-brief__result > p {
  color: rgba(255, 255, 255, 0.78);
}

.n-campaign-brief__return {
  display: flex;
  align-items: center;
  gap: 10px;
}

.n-campaign-brief__return svg,
.n-campaign-brief__metrics svg,
.n-campaign-brief__roi svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.n-campaign-brief__return svg {
  color: var(--n-e300);
}

.n-campaign-brief__return b {
  color: #fff;
}

.n-campaign-brief__metrics {
  flex-direction: column;
}

.n-campaign-brief__metrics span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8125rem;
}

.n-campaign-brief__metrics svg {
  color: var(--n-e300);
}

.n-campaign-brief__metrics b {
  color: #fff;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
}

.n-campaign-brief__roi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 22px;
  padding: 7px 12px;
  border-radius: var(--n-r-full);
  background: var(--n-e600);
  color: #fff;
  font-size: 0.8125rem;
}

.n-campaign-brief__note {
  margin: 12px auto 0;
  text-align: center;
}

.n-mobile-copy {
  display: none;
}

/* Keep the login card neutral; the primary action already carries the brand color. */
.login-modal__dialog {
  border: 0;
}

.login-modal__dialog::before {
  display: none;
}

@media (max-width: 779px) {
  .n-desktop-copy {
    display: none;
  }

  .n-mobile-copy {
    display: inline;
  }

  .n-campaign-brief__proposal,
  .n-campaign-brief__result {
    padding: 22px 18px;
  }

  .n-campaign-brief__proposal h3 {
    margin-block-start: 12px;
  }

  .n-campaign-brief__proposal > p,
  .n-campaign-brief__result > p {
    margin-block-start: 9px;
  }

  .n-campaign-brief__facts,
  .n-campaign-brief__metrics {
    margin-block-start: 14px;
  }

  .n-campaign-brief__roi {
    margin-block-start: 16px;
  }

  .n-campaign-brief__result {
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* ============================================================
   15. Campaign report with tabs
   ============================================================ */
.n-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-block-end: 28px;
}

.n-tab {
  min-height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--n-line-2);
  border-radius: var(--n-r-full);
  background: var(--n-bg);
  color: var(--n-body);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--n-t) var(--n-ease),
    color var(--n-t) var(--n-ease),
    border-color var(--n-t) var(--n-ease);
}

.n-tab:hover {
  border-color: var(--n-e400);
  color: var(--n-e700);
}

.n-tab[aria-selected="true"] {
  background: var(--n-e600);
  border-color: var(--n-e700);
  color: #fff;
}

.n-report {
  max-width: 940px;
  margin-inline: auto;
  border-radius: var(--n-r-lg);
  overflow: hidden;
}

.n-report__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(18px, 3vw, 28px);
  border-block-end: 1px solid var(--n-line);
  background: var(--n-bg-soft);
}

.n-report__name {
  font-weight: 700;
  color: var(--n-ink);
}

.n-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--n-r-full);
  background: var(--n-e50);
  color: var(--n-e700);
  font-size: 0.75rem;
  font-weight: 700;
}

.n-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.n-funnel {
  display: grid;
  gap: 4px;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .n-funnel {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1.25fr;
    align-items: center;
    gap: clamp(8px, 1.6vw, 20px);
  }
}

.n-funnel__step {
  padding: 14px 8px;
  text-align: center;
}

.n-funnel__n {
  display: block;
  font-size: clamp(1.6rem, 3.4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--n-ink);
}

.n-funnel__n em {
  font-style: normal;
  font-size: 0.46em;
  font-weight: 600;
  margin-inline-start: 6px;
  color: var(--n-muted);
}

.n-funnel__lbl {
  display: block;
  margin-block-start: 6px;
  font-size: 0.8125rem;
  color: var(--n-muted);
}

.n-funnel__rate {
  display: inline-block;
  margin-block-start: 8px;
  padding: 2px 9px;
  border-radius: var(--n-r-full);
  background: var(--n-bg-mint);
  color: var(--n-e700);
  font-size: 0.6875rem;
  font-weight: 700;
}

.n-funnel__step--result {
  border-radius: var(--n-r);
  background: linear-gradient(150deg, var(--n-e600), var(--n-e800));
  color: #fff;
  box-shadow: var(--n-sh-glow);
}

.n-funnel__step--result .n-funnel__n,
.n-funnel__step--result .n-funnel__n em {
  color: #fff;
}

.n-funnel__step--result .n-funnel__lbl {
  color: rgba(255, 255, 255, 0.82);
}

.n-funnel__arrow {
  justify-self: center;
  width: 20px;
  height: 20px;
  fill: var(--n-line-2);
  rotate: -90deg;
}

@media (min-width: 780px) {
  .n-funnel__arrow {
    rotate: none;
  }
}

.n-report__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(18px, 3vw, 28px);
  border-block-start: 1px solid var(--n-line);
  background: var(--n-bg-soft);
}

/* ============================================================
   16. Before / after comparison
   ============================================================ */
.n-vs {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .n-vs {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.n-vs__col {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--n-r-lg);
}

.n-vs__col--before {
  border: 1px solid var(--n-line);
  background: var(--n-bg-soft);
}

.n-vs__col--after {
  border: 1px solid var(--n-e200);
  background: linear-gradient(170deg, var(--n-e50), var(--n-bg));
  box-shadow: var(--n-sh);
}

.n-vs__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: var(--n-r-full);
  font-size: 0.8125rem;
  font-weight: 700;
}

.n-vs__col--before .n-vs__tag {
  background: var(--n-bg);
  border: 1px solid var(--n-line-2);
  color: var(--n-muted);
}

.n-vs__col--after .n-vs__tag {
  background: var(--n-e600);
  color: #fff;
}

.n-vs__list {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.n-vs__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.n-vs__list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-block-start: 5px;
}

.n-vs__col--before li {
  color: var(--n-muted);
}

.n-vs__col--before svg {
  fill: var(--n-faint);
}

.n-vs__col--after li {
  color: var(--n-ink-2);
}

.n-vs__col--after svg {
  fill: var(--n-e600);
}

/* ============================================================
   18. Pricing
   ============================================================ */
.n-price {
  display: grid;
  gap: 22px;
  align-items: stretch;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .n-price {
    grid-template-columns: 1.25fr 0.9fr;
  }
}

.n-price__main {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--n-r-xl);
  border: 1px solid var(--n-e200);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--n-e50), transparent 62%),
    var(--n-bg);
  box-shadow: var(--n-sh-lg);
}

.n-price__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--n-r-full);
  background: var(--n-e600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.n-price__ribbon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.n-price__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-block-start: 24px;
}

.n-price__old {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--n-faint);
  text-decoration-thickness: 2px;
}

.n-price__new {
  font-size: clamp(2.75rem, 6.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--n-ink);
}

.n-price__unit {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--n-body);
}

.n-price__save {
  padding: 5px 12px;
  border-radius: var(--n-r-full);
  background: var(--n-e100);
  color: var(--n-e800);
  font-size: 0.8125rem;
  font-weight: 800;
}

.n-price__per {
  margin-block-start: 10px;
}

.n-price__list {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-block-start: 1px solid var(--n-line);
  list-style: none;
}

.n-price__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--n-ink-2);
  white-space: nowrap;
  text-wrap: nowrap;
}

.n-price__list svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--n-e600);
}

@media (max-width: 480px) {
  .n-price__list li {
    gap: 8px;
    font-size: clamp(0.7rem, 3.4vw, 0.875rem);
  }
}

.n-price__cta {
  margin-block-start: 28px;
}

.n-price__note {
  margin-block-start: 16px;
}

/* Gift / credit aside */
.n-gift {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--n-r-xl);
  background: linear-gradient(165deg, var(--n-e800), var(--n-dark));
  color: var(--n-on-dark);
  overflow: hidden;
  position: relative;
}

.n-gift__orb {
  inset-block-start: -80px;
  inset-inline-start: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.5), transparent);
  opacity: 0.5;
}

.n-gift__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--n-r-sm);
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid var(--n-dark-line);
  color: var(--n-e300);
}

.n-gift__ico svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.n-gift h3 {
  position: relative;
  margin-block-start: 20px;
  color: #fff;
}

.n-gift p {
  position: relative;
  margin-block-start: 12px;
  color: var(--n-on-dark-2);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.n-gift__rows {
  position: relative;
  display: grid;
  gap: 10px;
  margin-block-start: auto;
  padding-block-start: 24px;
}

.n-gift__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--n-r-xs);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--n-dark-line);
  font-size: 0.8125rem;
  color: var(--n-on-dark-3);
}

.n-gift__row b {
  color: #fff;
  font-size: 0.9375rem;
}

.n-capacity {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--n-dark-line);
  border-radius: var(--n-r-xs);
  background: rgba(0, 0, 0, 0.2);
}

.n-capacity__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.n-capacity__head > div {
  display: grid;
  gap: 3px;
}

.n-capacity__head span {
  color: var(--n-on-dark-3);
  font-size: 0.75rem;
}

.n-capacity__head strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

.n-capacity__chart {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  direction: rtl;
}

.n-capacity__chart i {
  display: block;
  height: 34px;
  border: 1px solid rgba(167, 243, 208, 0.24);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.n-capacity__chart i.is-filled {
  border-color: var(--n-e300);
  background: linear-gradient(180deg, var(--n-e300), var(--n-e500));
  transform: translateY(-2px);
}

.n-capacity small {
  color: var(--n-on-dark-3);
  font-size: 0.6875rem;
  line-height: 1.6;
}

/* ============================================================
   19. FAQ accordion
   ============================================================ */
#faq {
  background: var(--n-bg-soft);
}

.n-faq {
  max-width: 780px;
  margin-inline: auto;
  border-radius: var(--n-r-lg);
  overflow: hidden;
  border: 1px solid var(--n-line-2);
  background: var(--n-bg);
  box-shadow: var(--n-sh-sm);
}

.n-faq__item + .n-faq__item {
  border-block-start: 1px solid var(--n-line-2);
}

.n-faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 18px clamp(18px, 3vw, 26px);
  border: 0 !important;
  background: transparent;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--n-ink);
  text-align: start;
  cursor: pointer;
  transition: background var(--n-t) var(--n-ease);
}

.n-faq__q:hover {
  background: var(--n-bg-soft);
}

.n-faq__q span {
  flex: 1;
}

.n-faq__q svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--n-e600);
  transition: transform var(--n-t) var(--n-ease);
}

.n-faq__q[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.n-faq__a {
  padding: 0 clamp(18px, 3vw, 26px) 24px;
}

.n-faq__a[hidden] {
  display: none;
}

/* ============================================================
   21. Footer
   ============================================================ */
.n-foot {
  padding-block: clamp(48px, 6vw, 72px) 32px;
  background: var(--n-bg-soft);
  border-block-start: 1px solid var(--n-line);
}

.n-foot__grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}

@media (max-width: 719px) {
  .n-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 16px;
  }

  .n-foot__about,
  .n-foot__col--contact {
    grid-column: 1 / -1;
  }

  .n-foot__col--product,
  .n-foot__col--resources {
    min-width: 0;
  }

  .n-foot__col--product a,
  .n-foot__col--resources a {
    gap: 6px;
    font-size: clamp(0.75rem, 3.4vw, 0.875rem);
  }
}

@media (min-width: 720px) {
  .n-foot__grid {
    grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

.n-foot__about p {
  width: 100%;
  margin-block-start: 14px;
  max-width: 48ch;
  text-align: justify;
}

.n-foot__seal {
  display: inline-block;
  margin-block-start: 22px;
  line-height: 0;
}

.n-foot__seal img {
  width: 92px;
  height: auto;
  border-radius: var(--n-r-xs);
  background: #fff;
}

.n-foot__col h4 {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--n-ink);
  letter-spacing: 0.02em;
}

.n-foot__col a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--n-body);
  font-size: 0.9375rem;
  text-decoration: none;
}

.n-foot__col a svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  color: var(--n-e600);
}

.n-foot__col a:hover {
  color: var(--n-e700);
}

.n-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 40px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--n-line);
  font-size: 0.8125rem;
  color: var(--n-muted);
}

/* Keep the hero controls compact and side by side across mobile widths. */
@media (max-width: 720px) {
  .n-hero__cta {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    inline-size: 100%;
    gap: 8px;
  }

  .n-hero__cta .n-btn {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 46px;
    padding-inline: clamp(10px, 3vw, 14px);
    gap: 6px;
    justify-content: center;
    font-size: clamp(0.75rem, 3.6vw, 0.875rem);
  }

  .n-hero__cta .n-btn--ghost {
    flex: 1 1 0;
  }

  .n-hero__cta .n-btn--primary {
    flex: 1 1 0;
  }

  .n-hero__cta .n-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ---------- Small-screen refinements ---------- */
@media (max-width: 560px) {
  .n-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-block-end: 6px;
    scrollbar-width: none;
  }

  .n-tabs::-webkit-scrollbar {
    display: none;
  }

  .n-tab {
    flex: none;
  }
}

/* Proof-section screenshot frame */
.n-shot {
  width: min(100%, 940px);
  margin: clamp(32px, 4vw, 48px) auto 0;
}

.n-shot figcaption {
  margin-block-start: 14px;
  text-align: center;
}

/* ============================================================
   23. Hero decision card — the engine's output, nothing else
   One campaign recommendation with its evidence and the channels
   it can go out on. Sample data, marked as such; aria-hidden with
   an equivalent sentence beside it for screen readers.
   ============================================================ */
.n-decision {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(28px, 3.6vw, 42px) clamp(24px, 3.4vw, 40px);
  border-radius: var(--n-r-xl);
  background: var(--n-bg);
  border: 1px solid var(--n-line-2);
  box-shadow: var(--n-sh-xl);
  text-align: center;
}

/* Quiet marker: these are illustrative numbers, not the visitor's store */
.n-decision__sample {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 16px;
  padding: 3px 10px;
  border-radius: var(--n-r-full);
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
  color: var(--n-faint);
  font-size: 0.625rem;
  font-weight: 600;
}

.n-decision__obj {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--n-r-full);
  background: var(--n-e600);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.n-decision__obj svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.n-decision__lead {
  margin: 22px 0 0;
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--n-ink);
  text-wrap: balance;
}

.n-decision__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block-start: 22px;
}

.n-decision__fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--n-r-full);
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
  font-size: 0.8125rem;
  color: var(--n-body);
}

.n-decision__fact b {
  color: var(--n-e800);
  font-weight: 700;
}

@media (max-width: 720px) {
  .n-decision {
    padding-inline: clamp(12px, 4vw, 24px);
  }

  .n-decision__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }

  .n-decision__fact {
    display: flex;
    min-width: 0;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    padding: 6px 3px;
    border-radius: var(--n-r-sm);
    font-size: clamp(0.5625rem, 2.5vw, 0.6875rem);
    line-height: 1.5;
    white-space: nowrap;
  }

  .n-decision__fact b {
    display: block;
    font-size: clamp(0.625rem, 2.8vw, 0.75rem);
  }
}

.n-decision__send {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  margin-block-start: 26px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--n-line);
}

.n-decision__sendlbl {
  font-size: 0.8125rem;
  color: var(--n-muted);
}

.n-decision__marks {
  display: flex;
  gap: 9px;
}

.n-decision__marks svg {
  width: 24px;
  height: 24px;
}

.n-decision__marks .n-decision__sms {
  width: 26px;
  height: 26px;
  color: #000;
}

@media (max-width: 480px) {
  .n-decision__send {
    flex-direction: row;
    gap: 8px;
  }

  .n-decision__sendlbl {
    flex: none;
    white-space: nowrap;
  }

  .n-decision__marks {
    gap: clamp(5px, 2vw, 8px);
  }

  .n-decision__marks svg {
    width: 20px;
    height: 20px;
  }

  .n-decision__marks .n-decision__sms {
    width: 22px;
    height: 22px;
  }
}

/* ============================================================
   24. Pillar layout — copy beside a working panel
   ============================================================ */
.n-pillar {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 980px) {
  .n-pillar {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .n-pillar--flip > :first-child {
    order: 2;
  }
}

.n-pillar__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.n-pillar__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.n-pillar__list svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-block-start: 4px;
  fill: var(--n-e600);
}

.n-sec--dark .n-pillar__list svg {
  fill: var(--n-e300);
}

.n-pillar__list b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--n-ink);
}

.n-sec--dark .n-pillar__list b {
  color: #fff;
}

.n-pillar__list span {
  display: block;
  margin-block-start: 3px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--n-body);
}

.n-sec--dark .n-pillar__list span {
  color: var(--n-on-dark-2);
}

@media (max-width: 720px) {
  .n-pillar__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-block-start: 22px;
  }

  .n-pillar__list li {
    min-width: 0;
    min-height: 96px;
    flex-direction: column;
    gap: 6px;
    padding: 12px 10px;
    border: 1px solid var(--n-line);
    border-radius: var(--n-r-sm);
    background: var(--n-bg-soft);
  }

  .n-pillar__list svg {
    width: 19px;
    height: 19px;
    margin-block-start: 0;
  }

  .n-pillar__list li > span {
    margin-block-start: 0;
  }

  .n-pillar__list b {
    font-size: clamp(0.75rem, 3.4vw, 0.875rem);
    line-height: 1.5;
  }

  .n-pillar__list li > span > span {
    margin-block-start: 3px;
    font-size: clamp(0.625rem, 2.8vw, 0.75rem);
    line-height: 1.55;
  }
}

/* ---------- Analytics panel ---------- */
.n-panel {
  padding: clamp(20px, 2.8vw, 30px);
  border-radius: var(--n-r-lg);
}

.n-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block-end: 16px;
  margin-block-end: 18px;
  border-block-end: 1px solid var(--n-line);
}

.n-panel__head h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--n-ink);
}

.n-panel__tag {
  margin-inline-start: auto;
  padding: 3px 10px;
  border-radius: var(--n-r-full);
  background: var(--n-bg-mint);
  color: var(--n-e700);
  font-size: 0.6875rem;
  font-weight: 700;
}

.n-panel__split {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .n-panel__split {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

/* Donut of RFM segments — a ring, with the total in the middle */
.n-donut {
  position: relative;
  width: 156px;
  height: 156px;
  margin-inline: auto;
}

.n-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.n-donut circle {
  fill: none;
  stroke-width: 15;
  stroke-linecap: butt;
  transition: stroke-dasharray 900ms var(--n-ease);
  transition-delay: var(--n-delay, 0ms);
}

.n-donut__mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.n-donut__mid b {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--n-ink);
  line-height: 1.2;
}

.n-donut__mid span {
  font-size: 0.6875rem;
  color: var(--n-muted);
}

.n-legend {
  display: grid;
  gap: 9px;
}

.n-legend__row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  color: var(--n-body);
}

.n-legend__row i {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
}

.n-legend__row b {
  margin-inline-start: auto;
  color: var(--n-ink);
  font-weight: 700;
}

.n-legend__row em {
  font-style: normal;
  min-width: 42px;
  text-align: end;
  color: var(--n-muted);
  font-size: 0.75rem;
}

/* Month bars + signal card stacked under the donut */
.n-panel__rows {
  display: grid;
  gap: 14px;
  margin-block-start: 22px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--n-line);
}

.n-months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  height: 76px;
}

.n-months i {
  display: block;
  height: 0;
  border-radius: 4px 4px 2px 2px;
  background: var(--n-e500);
  transition: height 900ms var(--n-ease);
  transition-delay: var(--n-delay, 0ms);
}

.n-months i.is-peak {
  background: var(--n-e500);
  box-shadow: 0 0 0 2px var(--n-e100);
}

.n-monthx {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  font-size: clamp(0.5rem, 2.5vw, 0.65625rem);
  color: var(--n-faint);
  text-align: center;
}

.n-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 0;
  background: transparent;
  border: 0;
}

.n-signal svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--n-amber);
}

.n-signal__txt {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.65;
  color: #6b4a12;
}

.n-signal__txt b {
  color: var(--n-amber);
}

.n-signal__src {
  font-size: 0.625rem;
  color: #8a6d3f;
  white-space: nowrap;
}

/* ---------- Objectives ---------- */
.n-objs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  margin-block-end: clamp(36px, 5vw, 56px);
}

.n-objs__track {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
}

.n-obj {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--n-r-full);
  border: 1px solid var(--n-line-2);
  background: var(--n-bg);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--n-ink-2);
  box-shadow: var(--n-sh-xs);
  white-space: nowrap;
}

.n-obj svg {
  width: 17px;
  height: 17px;
  fill: var(--n-e600);
}

/* ---------- Safety rails ---------- */
.n-rails {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-block-start: clamp(32px, 4vw, 48px);
}

.n-rail {
  padding: 20px;
  border-radius: var(--n-r);
  border: 1px solid var(--n-line);
  background: var(--n-bg);
}

.n-rail .n-rail__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-block-start: 0;
  border-radius: 11px;
  background: var(--n-e50);
  color: var(--n-e700);
  border: 1px solid var(--n-e100);
}

.n-rail__ico svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.n-rail b {
  display: block;
  margin-block-start: 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--n-ink);
}

.n-rail span {
  display: block;
  margin-block-start: 6px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--n-body);
}

/* ---------- Messenger grid ---------- */
.n-msgrs {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.n-msgr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--n-r);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(167, 243, 208, 0.14);
  transition:
    background var(--n-t) var(--n-ease),
    transform var(--n-t) var(--n-ease);
}

.n-msgr:hover {
  background: rgba(255, 255, 255, 0.11);
  transform: translateY(-2px);
}

.n-msgr__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #fff;
}

.n-msgr__mark svg {
  width: 24px;
  height: 24px;
}

.n-msgr__body b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
}

.n-msgr__body span {
  display: block;
  margin-block-start: 2px;
  font-size: 0.6875rem;
  color: var(--n-on-dark-3);
}

.n-msgr__mark--plain {
  background: #fff;
  color: #000;
}

.n-msgr__mark--plain svg {
  width: 32px;
  height: 32px;
}

.n-msgr__mark--logo {
  background: #fff;
}

.n-msgr__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (max-width: 720px) {
  .n-msgrs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .n-msgr {
    min-width: 0;
    gap: 8px;
    padding: 10px 8px;
  }

  .n-msgr__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .n-msgr__mark svg {
    width: 21px;
    height: 21px;
  }

  .n-msgr__mark--plain svg,
  .n-msgr__logo {
    width: 27px;
    height: 27px;
  }

  .n-msgr__body {
    min-width: 0;
  }

  .n-msgr__body b {
    font-size: clamp(0.625rem, 3vw, 0.8125rem);
    line-height: 1.45;
  }
}

/* The "from your own account" note that makes the channel row matter */
.n-fromyou {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 18px 20px;
  border-radius: var(--n-r);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(110, 231, 183, 0.3);
}

.n-fromyou svg {
  width: 24px;
  height: 24px;
  flex: none;
  margin-block-start: 3px;
  fill: var(--n-e300);
}

.n-fromyou p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--n-on-dark-2);
}

.n-fromyou b {
  color: #fff;
}

/* Evidence list inside the recommendation card. Unlike the pricing list this
   one carries inline <b> runs, so the row is icon + one text node — never let
   the emphasis become its own flex item. */
.n-evid {
  display: grid;
  gap: 13px;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-block-start: 1px solid var(--n-line);
  list-style: none;
}

.n-evid li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.n-evid svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-block-start: 5px;
  fill: var(--n-e600);
}

.n-evid li > span {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--n-ink-2);
}

.n-evid b {
  font-weight: 700;
  color: var(--n-e800);
}

/* One row on wide screens; below that it gently travels end-to-end. */
@media (max-width: 1199px) {
  .n-objs {
    --n-objs-gutter: clamp(40px, 8vw, 80px);
    justify-content: flex-start;
  }

  .n-objs__track {
    animation: n-objs-travel 14s ease-in-out 700ms infinite alternate;
    will-change: transform;
  }

  .n-objs:hover .n-objs__track {
    animation-play-state: paused;
  }
}

@keyframes n-objs-travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100% - 100vw + var(--n-objs-gutter)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .n-objs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .n-objs::-webkit-scrollbar {
    display: none;
  }

  .n-objs__track {
    animation: none;
  }
}

/* Eight channels: a clean 4 x 2 rather than 6 + 2 */
@media (min-width: 900px) {
  .n-msgrs {
    grid-template-columns: repeat(4, 1fr);
  }
}

.n-msgr__wordmark {
  filter: brightness(0);
  opacity: 0.86;
}

/* ============================================================
   25. Hero — copy on top, engine below, both inside the first screen
   Vertical rhythm is deliberately tight and clamps against viewport
   height so the engine's bottom edge stays above the fold on the
   short laptop screens people actually use.
   ============================================================ */
.n-hero {
  padding-block: clamp(28px, 4.5vh, 56px) clamp(36px, 6vh, 72px);
}

.n-hero__copy {
  max-width: 62rem;
}

.n-body h1.n-hero__title {
  margin-block-start: 16px;
  font-size: clamp(0.8rem, 4.2vw, 2.95rem);
  line-height: 1.35;
  white-space: nowrap;
  text-wrap: nowrap;
}

.n-hero__title span {
  display: inline;
}

.n-hero__lede {
  max-width: 52rem;
  margin-block-start: 16px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.8;
}

.n-hero__cta {
  margin-block-start: clamp(20px, 3vh, 30px);
}

.n-stage {
  margin-block-start: clamp(26px, 4vh, 44px);
}

/* The gap is the point of the sentence — let it carry the emphasis */
.n-decision__hl {
  color: var(--n-e700);
}

.n-decision__cl {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .n-decision__lead {
    font-size: clamp(0.875rem, 4vw, 1.0625rem);
    line-height: 1.75;
  }
}

/* ============================================================
   26. Hero atmosphere — a quiet pulse field behind the message
   ============================================================ */
.n-nav {
  background: transparent;
}

.n-nav.is-stuck {
  background: rgba(234, 248, 241, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.n-nav__inner {
  border-color: rgba(5, 150, 105, 0.18);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 32px rgba(4, 78, 58, 0.07);
}

.n-hero {
  isolation: isolate;
  background: transparent;
  border-block-end: 1px solid rgba(5, 150, 105, 0.14);
}

.n-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(118deg, transparent 16%, rgba(255, 255, 255, 0.58) 37%, rgba(255, 255, 255, 0.12) 54%, transparent 72%),
    linear-gradient(rgba(5, 150, 105, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 150, 105, 0.052) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.88) 13%, #000 58%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.88) 13%, #000 58%, transparent 96%);
  pointer-events: none;
}

.n-hero::after {
  display: none;
}

.n-hero > .n-dots {
  z-index: 0;
}

.n-hero > .n-dots,
.n-hero > .n-orb {
  display: none;
}

.n-hero__inner {
  z-index: 2;
}

@media (max-width: 600px) {
  .n-hero {
    background: transparent;
  }

  .n-hero::before {
    background-size: 100% 100%, 34px 34px, 34px 34px;
    opacity: 0.9;
  }
}

/* ---------- 24. Intro video — modal + custom player ---------- */
/* A chrome-free player behind the hero's «معرفی نبض» button, modelled on the
   chorazinvest player and repainted onto the emerald ramp. The <video> carries
   no source until the modal opens, so the landing page costs nothing extra to
   load; from there it streams an HLS ladder (see v3.js).

   There is deliberately no centre play/pause overlay: the frame stays clear of
   the speaker at every moment, hover included. Play/pause lives in the bottom
   bar, and clicking the frame itself still toggles it. Only the loading
   spinner is ever allowed over the picture. */

.n-vmodal {
  position: fixed;
  inset: 0;
  z-index: 1500; /* above the login (1300) and plan (1400) modals */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.n-vmodal[hidden] {
  display: none;
}

.n-vmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 35, 26, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Floating close (×) — pinned inside the player frame so the modal padding
   never clips it. Physical `right`/`top` keeps it on the right in RTL. */
.n-vmodal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(167, 243, 208, 0.32);
  border-radius: var(--n-r-full);
  background: rgba(4, 35, 26, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--n-e200);
  cursor: pointer;
  transition: transform var(--n-t) var(--n-ease), background var(--n-t) var(--n-ease);
}

.n-vmodal__close:hover {
  transform: scale(1.08);
  background: rgba(4, 35, 26, 0.94);
  color: #fff;
}

.n-vmodal__close svg {
  width: 20px;
  height: 20px;
}

.n-player {
  position: relative;
  z-index: 1;
  width: min(92vw, 960px);
  aspect-ratio: 16 / 9;
  max-height: 84vh;
  background: #000 center / cover no-repeat;
  border: 1px solid rgba(167, 243, 208, 0.22);
  border-radius: var(--n-r-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.n-player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  cursor: pointer;
}

/* Spinner shown while the first segments are still arriving. */
.n-player__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--n-e300);
  border-radius: var(--n-r-full);
  animation: n-player-spin 800ms linear infinite;
}

.n-player:not(.is-busy) .n-player__spin {
  display: none;
}

@keyframes n-player-spin {
  to { transform: rotate(360deg); }
}

/* ── Bottom control bar ── */
.n-player__controls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  /* Fixed left→right control order (play · time · progress · mute · volume),
     independent of the page's RTL direction. */
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 24px 16px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    transparent 100%
  );
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--n-t-slow) var(--n-ease), transform var(--n-t-slow) var(--n-ease);
}

.n-player.is-playing.is-idle .n-player__controls {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* Small icon buttons (play/pause, mute, fullscreen). */
.n-player__ctrl {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--n-r-full);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--n-t) var(--n-ease), color var(--n-t) var(--n-ease);
}

.n-player__ctrl:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--n-e300);
}

.n-player__ctrl svg {
  width: 20px;
  height: 20px;
}

/* Progress / scrub bar — media time is universally LTR. */
.n-player__progress {
  flex: 1 1 auto;
  direction: ltr;
  position: relative;
  height: 6px;
  border-radius: var(--n-r-full);
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}

.n-player__progress::before {
  /* Fatter hit area without changing the visual height. */
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  inset-inline: 0;
}

/* How far the player has buffered ahead, behind the played fill. */
.n-player__progress-buf {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  border-radius: var(--n-r-full);
  background: rgba(255, 255, 255, 0.28);
}

.n-player__progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  border-radius: var(--n-r-full);
  background: var(--n-e400);
}

.n-player__progress-fill::after {
  content: "";
  position: absolute;
  inset-inline-end: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: var(--n-r-full);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.n-player__time {
  flex-shrink: 0;
  direction: ltr;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
  min-width: 82px;
  text-align: center;
}

/* Volume slider — themed range input, emerald accent. */
.n-player__volume {
  flex-shrink: 0;
  /* Force a left→right fill (louder to the right); RTL would fill from the right. */
  direction: ltr;
  width: 84px;
  height: 6px;
  accent-color: var(--n-e400);
  cursor: pointer;
}

@media (max-width: 767px) {
  .n-vmodal__close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }

  .n-player__controls {
    gap: 8px;
    padding: 24px 14px 10px;
  }

  .n-player__time {
    display: none;
  }

  .n-player__volume {
    width: 56px;
  }
}

@media (max-width: 420px) {
  .n-player__volume {
    display: none;
  }
}

/* The hero trigger keeps the ghost-button shape; only the icon is new. */
.n-btn__play {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .n-vmodal__close,
  .n-player__ctrl,
  .n-player__controls {
    transition: none;
  }

  .n-player__spin {
    animation-duration: 2s;
  }
}

/* Paired icons: one of each pair is shown, driven by player state classes so
   the swap costs no JavaScript per frame. */
.n-player__ic--pause,
.n-player__ic--unmute {
  display: none;
}

.n-player.is-playing .n-player__ic--play,
.n-player.is-muted .n-player__ic--mute {
  display: none;
}

.n-player.is-playing .n-player__ic--pause,
.n-player.is-muted .n-player__ic--unmute {
  display: block;
}