body[data-projectname] {
  /* THE project brand pair. Every framework brand surface derives from
     --primary-blue via color-mix in base_style.css: the navbar CTA
     (--nb-cta-bg), .btn-primary / .button-primary, --navbar-gradient,
     --navbar-underline, --brand / --brand-2 / --brand-soft, the logo badge and
     the cookie-banner buttons. The framework default is #fb596e (coral), so a
     project that sets only its own --accent leaves the entire navbar coral
     while the page body is purple - which is exactly what happened here.
     base_style.css documents the recipe: override this pair in BOTH theme
     blocks and the whole bar follows. --primary-ink stays white; #8b3ff5 is
     dark enough to carry white label text. */
  --primary-blue: #8b3ff5;
  --primary-blue-hover: #6d28d9;
  --accent: #8b3ff5;
  --nb-grad: linear-gradient(135deg, #5b2ee6, #8b3ff5);
  /* Display stays Sora: it carries the brand, and it has the 800 weight the
     headings ask for. Body moves to Inter, which is narrower and quieter over
     the long use-case and industry copy this page now carries, and ships proper
     tabular figures for the event log and the tolerance readout.
     Space Grotesk was the first choice but tops out at 700, and 32 rules here
     ask for 800-900 - every one would have been synthetically bolded. */
  --nb-display: 'Sora', system-ui, sans-serif;
  --nb-text: 'Inter', system-ui, sans-serif;
  --nb-pill-fg: #6d28d9;
  --nb-pill-bg: #efe9fd;
  --nb-warn-fg: #b45309;
  --nb-hero-bg: linear-gradient(180deg, #ffffff 0%, #f1eefb 100%);
  --nb-page-bg: #eceaf3;
  --nb-ink: #14121e;
  --nb-body: #55516a;
  --nb-meta: #7d7990;
  --nb-sec-bg: #ffffff;
  --nb-sec-alt: #f5f2fc;
  --nb-card-bg: #fbfaff;
  --nb-card2-bg: #ffffff;
  --nb-card-border: #eee8f8;
  --nb-divider: #eee6fa;
  --nb-stat: #5b2ee6;
  --nb-kicker: #7c3aed;
  --nb-kicker-bg: rgba(124, 58, 237, 0.1);
  --nb-kicker-border: rgba(124, 58, 237, 0.2);
  --nb-kicker-fg: #6d28d9;
  --nb-widget-bg: #ffffff;
  --nb-widget-border: #ece7f7;
  --nb-widget-foot: #faf8ff;
  --nb-widget-foot-border: #f0ecf9;
  --nb-widget-text: #1f1b2e;
  --nb-checkbox: #c7bfe0;
  --nb-step-num: #eee7fb;
  --nb-icon-tile: linear-gradient(140deg, #efe9fd, #f7effe);
  --nb-seg-bg: #f1edfa;
  --nb-btn2-bg: #ffffff;
  --nb-btn2-border: #e2ddf0;
  --nb-feed-bg: #ffffff;
  --nb-feed-ok-bg: #f6fdf8;
  --nb-feed-ok-border: #e2f4e8;
  --nb-feed-ok-text: #166534;
  --nb-feed-bad-bg: #fdf7f7;
  --nb-feed-bad-border: #f6e4e4;
  --nb-feed-bad-text: #b91c1c;
  --nb-feed-mark-ok: #dcfce7;
  --nb-feed-mark-bad: #fee2e2;
  --nb-dot: #c9bdf0;
  --nb-check: #3f6b4f;
  --nb-footer-bg: #f5f2fc;
  --nb-footer-border: #e6dff7;
  --nb-footer-heading: #14121e;
  --nb-footer-text: #55516a;
  --nb-footer-muted: #7d7990;
}

body.theme-dark[data-projectname] {
  /* Repeated deliberately: base_style.css re-declares --primary-blue inside its
     own body.theme-dark block, so the light-mode value alone does not carry. */
  --primary-blue: #8b3ff5;
  --primary-blue-hover: #6d28d9;
  --nb-footer-bg: #0b0a14;
  --nb-footer-border: rgba(255, 255, 255, 0.08);
  --nb-footer-heading: #ffffff;
  --nb-footer-text: #d7d3e2;
  --nb-footer-muted: #b7b3c6;
  --nb-pill-fg: #c9a8ff;
  --nb-pill-bg: rgba(168, 85, 247, 0.16);
  --nb-warn-fg: #f2b45c;
  --nb-hero-bg: linear-gradient(180deg, #131022 0%, #0f0c1c 100%);
  --nb-page-bg: #0c0a16;
  --nb-ink: #f2effc;
  --nb-body: #aaa4c3;
  --nb-meta: #8d87a8;
  --nb-sec-bg: #131022;
  --nb-sec-alt: #0f0c1c;
  --nb-card-bg: #1b1533;
  --nb-card2-bg: #1b1533;
  --nb-card-border: rgba(255, 255, 255, 0.09);
  --nb-divider: rgba(255, 255, 255, 0.08);
  --nb-stat: #a78bfa;
  --nb-check: #8fd6ab;
  --nb-dot: #332a56;
  --nb-kicker: #b794f6;
  --nb-kicker-bg: rgba(168, 85, 247, 0.14);
  --nb-kicker-border: rgba(168, 85, 247, 0.35);
  --nb-kicker-fg: #c9a8ff;
  --nb-widget-bg: #221a3f;
  --nb-widget-border: rgba(255, 255, 255, 0.13);
  --nb-widget-foot: rgba(255, 255, 255, 0.04);
  --nb-widget-foot-border: rgba(255, 255, 255, 0.08);
  --nb-widget-text: #efeaff;
  --nb-checkbox: #5a5080;
  --nb-step-num: rgba(255, 255, 255, 0.08);
  --nb-icon-tile: rgba(167, 139, 250, 0.13);
  --nb-seg-bg: rgba(255, 255, 255, 0.08);
  --nb-btn2-bg: #221a3f;
  --nb-btn2-border: rgba(255, 255, 255, 0.15);
  --nb-feed-bg: rgba(0, 0, 0, 0.28);
  --nb-feed-ok-bg: rgba(34, 197, 94, 0.08);
  --nb-feed-ok-border: rgba(34, 197, 94, 0.24);
  --nb-feed-ok-text: #7ee2a8;
  --nb-feed-bad-bg: rgba(239, 68, 68, 0.08);
  --nb-feed-bad-border: rgba(239, 68, 68, 0.24);
  --nb-feed-bad-text: #f89b9b;
  --nb-feed-mark-ok: rgba(34, 197, 94, 0.16);
  --nb-feed-mark-bad: rgba(239, 68, 68, 0.16);
}

body.theme-light[data-projectname] {
  --bg-gradient: #eceaf3;
}

body.theme-dark[data-projectname] {
  --bg-gradient: #0c0a16;
}

body[data-projectname]::before {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body[data-projectname] {
  font-family: var(--nb-text);
  color: var(--nb-ink);
}

.nb-page {
  width: 100%;
  overflow-x: hidden;
}

body[data-projectname] h1,
body[data-projectname] h2,
body[data-projectname] h3 {
  font-family: var(--nb-display);
}

/* Shared with the footer wordmark (see brand.jinja2): the navbar's visible
   .nb-brand__text carries this class too when navbar_show_wordmark is on, so
   styling the bare selector covers both the footer and the navbar lockup. */
body[data-projectname] .footer-brand-name {
  font-family: var(--nb-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.4px;
  color: var(--nb-footer-heading);
}

/* Footer palette. These were hardcoded to #0b0a14 with white text in every
   theme, so the light theme got a near-black slab under a white page. They now
   read the --nb-footer-* pair defined per theme above, so the footer follows the
   toggle like every other section. */
body[data-projectname] .footer {
  --footer-bottom-bg: var(--nb-footer-bg);
  --footer-section-bg: var(--nb-footer-bg);
  --footer-nav-bg: var(--nb-footer-bg);
  --footer-border: var(--nb-footer-border);
  --heading-color: var(--nb-footer-heading);
  --heading-sub: var(--nb-footer-heading);
  --text-color: var(--nb-footer-text);
  --text-primary: var(--nb-footer-text);
  --muted-text: var(--nb-footer-muted);
  --text-secondary: var(--nb-footer-muted);
  --link: var(--nb-footer-muted);
  --link-hover: var(--nb-footer-heading);
  background: var(--nb-footer-bg) !important;
  border-top: 1px solid var(--nb-footer-border) !important;
  color: var(--nb-footer-muted);
}

body[data-projectname] .footer::before {
  display: none !important;
}

body[data-projectname] .footer-bottom,
body[data-projectname] .footer-bottom-container,
body[data-projectname] .footer-navigation {
  background: var(--nb-footer-bg) !important;
}

body[data-projectname] .button-primary {
  border: none !important;
  background: var(--nb-grad) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(91, 46, 230, 0.38) !important;
}

body[data-projectname] .button-primary:hover {
  background: var(--nb-grad) !important;
  box-shadow: 0 18px 38px rgba(91, 46, 230, 0.48) !important;
  transform: translateY(-2px);
}

.nb-page .button {
  margin: 0;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.nb-btn-lg {
  border-radius: var(--nb-radius-control, 999px) !important;
  padding: 15px 26px !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
}

.nb-btn-lg svg {
  width: 17px;
  height: 17px;
}

.nb-page .nb-btn-ghost {
  background: var(--nb-btn2-bg) !important;
  color: var(--nb-widget-text) !important;
  border: 1px solid var(--nb-btn2-border) !important;
  box-shadow: 0 4px 14px rgba(20, 18, 30, 0.05) !important;
}

.nb-page .nb-btn-ghost:hover {
  transform: translateY(-2px);
  background: var(--nb-btn2-bg) !important;
  color: var(--nb-widget-text) !important;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
}

.nb-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nb-kicker);
}

.nb-section-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
}

.nb-h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin: 14px 0 0;
  color: var(--nb-ink);
}

.nb-section-lead {
  margin: 16px auto 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--nb-body);
}

.nb-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f1eefb 100%);
}

body.theme-dark .nb-hero {
  background: linear-gradient(180deg, #141021 0%, #191233 100%);
}

.nb-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: radial-gradient(var(--nb-dot) 1.6px, transparent 1.6px);
  background-size: 34px 34px;
}

.nb-hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nb-hero-blob-1 {
  top: -160px;
  right: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.24),
    transparent 62%
  );
}

.nb-hero-blob-2 {
  bottom: -200px;
  left: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(93, 52, 230, 0.15), transparent 65%);
}

.nb-hero-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 78px 28px 92px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.nb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--nb-kicker-bg);
  border: 1px solid var(--nb-kicker-border);
  color: var(--nb-kicker-fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.nb-kicker svg {
  width: 14px;
  height: 14px;
}

.nb-hero-title {
  font-weight: 900;
  /* The source design's spec. The project was still on the previous design's
     clamp(40px, 5vw, 62px), which at desktop rendered 62px inside a ~582px grid
     column and forced the headline onto four cramped lines. */
  font-size: clamp(32px, 3.7vw, 46px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin: 22px 0 0;
  color: var(--nb-ink);
}

.nb-accent {
  color: var(--accent);
}

.nb-hero-lead {
  /* px, not ch: `ch` is the width of the "0" glyph, so this cap silently
     narrowed when the body font moved from Sora to Inter and the lead wrapped
     from three lines to four. A fixed width survives a font change. */
  max-width: 400px;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--nb-body);
}

.nb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.nb-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
}

.nb-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nb-check);
}

.nb-trust svg {
  width: 16px;
  height: 16px;
  color: #16a34a;
  flex-shrink: 0;
}

.nb-hero-visual {
  position: relative;
  /* Tall enough that the outer dotted ring is not clipped by the hero's
     overflow: hidden - the SVG scales to the shorter side, so this height is the
     ring's diameter. */
  height: 470px;
  display: grid;
  place-items: center;
}

/* The product sits at the centre of the rings. */
.nb-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 210px;
  text-align: center;
  pointer-events: none;
}

.nb-orbit-core-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--nb-card-bg);
  border: 1px solid var(--nb-card-border);
  box-shadow: 0 16px 40px -18px var(--nb-shadow);
}

.nb-orbit-core-name {
  font-family: var(--nb-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--nb-ink);
}

.nb-orbit-core-note {
  margin-top: -4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nb-meta);
  max-width: 170px;
}

.nb-orbit {
  position: absolute;
  /* The rings are the hero visual now that the demo widget is gone, so they fill
     their box. width/height:auto is required because the SVG carries
     width="100%" height="100%" attributes, which otherwise pin its size and let
     the inset only move it. */
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: none;
}

.nb-orbit-a {
  transform-origin: 50% 50%;
  animation: nb-spin 40s linear infinite;
}

.nb-orbit-b {
  transform-origin: 50% 50%;
  animation: nb-spin-rev 30s linear infinite;
}

.nb-blip {
  animation: nb-blip 3s ease-in-out infinite;
}
.nb-blip-1 {
  animation-delay: 0.7s;
}
.nb-blip-2 {
  animation-delay: 1.4s;
}
.nb-blip-3 {
  animation-delay: 2.1s;
}

.nb-widget {
  position: relative;
  z-index: 3;
  width: 326px;
  max-width: 100%;
  background: var(--nb-widget-bg);
  border: 1px solid var(--nb-widget-border);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(58, 30, 120, 0.2);
  overflow: hidden;
}

.nb-widget-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
}

.nb-widget-toggle {
  display: flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: 0 !important;
  padding: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.nb-box {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: none;
  place-items: center;
}

.nb-box-idle {
  display: block;
  border-radius: 7px;
  border: 2px solid var(--nb-checkbox);
  background: var(--nb-widget-bg);
}

.nb-box-verifying {
  border-radius: 50%;
  border: 2.5px solid #e4ddf5;
  border-top-color: #7c3aed;
}

.nb-box-verified {
  border-radius: 7px;
  background: #16a34a;
}

.nb-box-verified svg {
  width: 15px;
  height: 15px;
}

.nb-widget.is-verifying .nb-box-idle,
.nb-widget.is-verified .nb-box-idle {
  display: none;
}

.nb-widget.is-verifying .nb-box-verifying {
  display: grid;
  animation: nb-spin 0.7s linear infinite;
}

.nb-widget.is-verified .nb-box-verified {
  display: grid;
}

.nb-widget-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--nb-widget-text);
}

.nb-widget-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.nb-widget-brand svg {
  width: 26px;
  height: 26px;
}

.nb-widget-brand img {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #ece7f7;
  border-radius: 9px;
  background: linear-gradient(150deg, #ffffff 0%, #f2ecfe 100%);
  box-shadow: 0 3px 9px -4px rgba(91, 46, 230, 0.4);
}

body.theme-dark[data-projectname] .nb-widget-brand img {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 3px 10px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nb-widget-brand span {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8b5cf6;
}

.nb-widget-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 20px;
  background: var(--nb-widget-foot);
  border-top: 1px solid var(--nb-widget-foot-border);
  font-size: 10.5px;
  color: var(--nb-meta);
}

.nb-widget-foot-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
}

.nb-widget-foot-ok svg {
  width: 11px;
  height: 11px;
}

.nb-float-bot {
  position: absolute;
  bottom: 24px;
  right: 34px;
  z-index: 4;
  animation: nb-float 4.5s ease-in-out infinite;
}

.nb-float-bot svg {
  width: 46px;
  height: 46px;
}

.nb-marquee {
  background: #0b0a14;
  padding: 18px 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nb-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: nb-marquee 30s linear infinite;
}

.nb-threat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #b9b5c9;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.nb-threat svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.nb-how {
  background: var(--nb-sec-alt);
  padding: 96px 28px;
}

.nb-how-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.nb-privacy {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  /* A themed card, as in the source design - not a dark slab. It was a
     hardcoded indigo gradient with white text, which ignored the theme and read
     as a black band on the light page. */
  background: var(--nb-card2-bg);
  border: 1px solid var(--nb-card-border);
  border-radius: 22px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Watermark, not an icon: oversized, clipped by the card's overflow:hidden and
   sitting behind the copy (which carries position:relative to stay above it). */
.nb-privacy-mark {
  position: absolute;
  inset-inline-end: -14px;
  top: 50%;
  width: 172px;
  height: 172px;
  transform: translateY(-50%) rotate(-12deg);
  color: var(--brand);
  opacity: 0.12;
  pointer-events: none;
}

.nb-privacy-text {
  flex: 1;
  min-width: 260px;
  position: relative;
}

.nb-privacy-title {
  font-family: var(--nb-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--nb-ink);
}

.nb-privacy-text p {
  margin: 10px 0 0;
  max-width: 860px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--nb-body);
  text-wrap: pretty;
}

.nb-privacy-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  margin-top: 18px;
}

.nb-privacy-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--nb-seg-bg);
  border: 1px solid var(--nb-kicker-border);
  color: var(--nb-pill-fg);
  font-size: 12px;
  font-weight: 700;
}

.nb-privacy-tag i {
  font-size: 11px;
}

/* The "never stored" half of the row. --danger is the framework's own red, so it
   tracks the theme instead of hardcoding a second palette. */
.nb-privacy-tag.is-never {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}

.nb-features {
  background: var(--nb-sec-bg);
  padding: 96px 28px;
}

.nb-features-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.nb-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.nb-code {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.nb-code-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.nb-code-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.nb-code-dots span:nth-child(1) {
  background: #ff5f57;
}
.nb-code-dots span:nth-child(2) {
  background: #febc2e;
}
.nb-code-dots span:nth-child(3) {
  background: #28c840;
}

.nb-code-comment {
  color: #6f6a8c;
}

.nb-c-tag {
  color: #8b8caf;
}
.nb-c-attr {
  color: #9ee7c8;
}
.nb-c-str {
  color: #e6c07b;
}

.nb-globe {
  display: grid;
  place-items: center;
  margin-top: 14px;
  flex: 1;
}

.nb-globe svg {
  width: 128px;
  height: 128px;
}

.nb-globe-ring {
  transform-origin: 60px 60px;
  animation: nb-spin 26s linear infinite;
}

.nb-globe .nb-blip {
  animation: nb-blip 2.6s ease-in-out infinite;
}
.nb-globe .nb-blip-1 {
  animation-delay: 0.9s;
}
.nb-globe .nb-blip-2 {
  animation-delay: 1.7s;
}

.nb-cta {
  background: var(--nb-sec-bg);
  padding: 20px 28px 96px;
}

.nb-cta-card {
  position: relative;
  overflow: hidden;
  max-width: 1140px;
  margin: 0 auto;
  border-radius: 30px;
  /* The deep indigo panel, matching .nb-flow-card / .nb-who-panel /
     .uc-guarantees. It was a flat brand-purple fill from the previous design,
     which made this the only dark section on the page that was not dark. */
  background: linear-gradient(160deg, #171029 0%, #2a1a4e 100%);
  padding: 62px 48px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(23, 16, 41, 0.45);
}

.nb-cta-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image: radial-gradient(#fff 1.4px, transparent 1.4px);
  background-size: 30px 30px;
}

.nb-cta-blob {
  position: absolute;
  top: -150px;
  left: 50%;
  width: 520px;
  height: 320px;
  margin-left: -260px;
  background: radial-gradient(
    ellipse,
    rgba(168, 85, 247, 0.35),
    transparent 65%
  );
  pointer-events: none;
}

.nb-cta-body {
  position: relative;
}

.nb-cta-title {
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -1px;
  color: #fff;
  margin: 0;
}

.nb-cta-lead {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: #c9c1e6;
}

.nb-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

@keyframes nb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes nb-spin-rev {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes nb-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
@keyframes nb-float2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}
@keyframes nb-blip {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}
@keyframes nb-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Under RTL the track overflows to the left, so it has to travel right instead. */
[dir='rtl'] .nb-marquee-track {
  animation-name: nb-marquee-rtl;
}

@keyframes nb-marquee-rtl {
  to {
    transform: translateX(50%);
  }
}

@media (max-width: 980px) {
  .nb-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .nb-hero-visual {
    height: 440px;
  }
  .nb-bento {
    grid-template-columns: 1fr;
  }
  .nb-bento-wide {
    grid-column: auto;
  }
  .nb-sy {
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
  }
  .nb-sy-list {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .nb-sy-body {
    max-width: none;
  }
  .nb-sy-stage {
    flex: 0 0 auto;
    min-height: 0;
    padding-bottom: 150px;
  }

  .nb-sy-svg {
    max-width: 520px;
    margin-inline: auto;
  }

  .nb-sy-challenge {
    left: 26px;
    right: 26px;
    bottom: 26px;
    width: auto;
  }

  .nb-sy-challenge-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }

  .nb-sy-challenge-grid span {
    aspect-ratio: auto;
    height: 34px;
  }
  .nb-code-grid,
  .nb-chart-grid {
    grid-template-columns: 1fr;
  }
  .nb-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .nb-stat:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 560px) {
  .nb-hero-inner {
    padding: 54px 20px 68px;
  }
  .nb-how,
  .nb-features {
    padding: 68px 20px;
  }
  .nb-hero-actions {
    flex-direction: column;
  }
  .nb-hero-actions .button {
    width: 100%;
    justify-content: center;
  }
  .nb-stats-row {
    grid-template-columns: 1fr;
  }
  .nb-stat + .nb-stat {
    border-left: none;
  }
  .nb-privacy,
  .nb-cta-card {
    padding: 32px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .nb-orbit-a,
  .nb-orbit-b,
  .nb-blip,
  .nb-live-dot,
  .nb-float-bot,
  .nb-marquee-track,
  .nb-globe-ring {
    animation: none !important;
  }
  .nb-sy-svg animateMotion {
    display: none;
  }
}

.ck-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 72px 24px 44px;
}

.ck-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: radial-gradient(var(--nb-dot) 1.6px, transparent 1.6px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(
    ellipse 72% 60% at center,
    #000 38%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 72% 60% at center,
    #000 38%,
    transparent 100%
  );
}

.ck-hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ck-hero-blob-1 {
  top: -180px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.22),
    transparent 62%
  );
}

.ck-hero-blob-2 {
  bottom: -220px;
  left: -140px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(93, 52, 230, 0.16), transparent 65%);
}

.ck-hero-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

.ck-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--nb-kicker-bg);
  border: 1px solid var(--nb-kicker-border);
  color: var(--nb-kicker-fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.ck-kicker svg {
  width: 14px;
  height: 14px;
}

.ck-hero-title {
  font-family: var(--nb-display);
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 20px 0 0;
  color: var(--nb-ink);
}

.ck-hero-sub {
  max-width: 56ch;
  margin: 16px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--nb-body);
}

.ck-hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.ck-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--nb-card-bg);
  border: 1px solid var(--nb-card-border);
  color: var(--nb-body);
  font-size: 13.5px;
  font-weight: 600;
}

.ck-pill svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.ck-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.ck-stat {
  min-width: 150px;
  padding: 16px 22px;
  border-radius: 16px;
  background: var(--nb-card-bg);
  border: 1px solid var(--nb-card-border);
}

.ck-stat-v {
  display: block;
  font-family: var(--nb-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--accent);
}

.ck-stat-l {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--nb-meta);
}

@media (max-width: 640px) {
  .ck-hero {
    padding: 52px 20px 30px;
  }
  .ck-stat {
    min-width: 0;
    flex: 1 1 40%;
  }
}

body[data-projectname] .up-panel,
body[data-projectname] .base-sidebar {
  --up-accent: #8b5cf6;
  --up-surface: #161b26;
  --up-accent-line: color-mix(in srgb, #8b5cf6 40%, transparent);
  --base-sidebar-accent: #8b5cf6;
  --base-sidebar-item-active: color-mix(in srgb, #8b5cf6 16%, transparent);
  --base-sidebar-item-hover: rgba(255, 255, 255, 0.06);
}

body.theme-light[data-projectname] .up-panel,
body.theme-light[data-projectname] .base-sidebar {
  --up-accent: #7c3aed;
  --up-surface: #ffffff;
  --up-accent-line: color-mix(in srgb, #7c3aed 35%, transparent);
  --base-sidebar-accent: #7c3aed;
  --base-sidebar-item-active: color-mix(in srgb, #7c3aed 12%, transparent);
  --base-sidebar-item-hover: rgba(124, 58, 237, 0.07);
}

body[data-projectname]
  .base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active::before,
body[data-projectname]
  .base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active::before,
body[data-projectname] .base-sidebar__item-link.active::before,
body[data-projectname] .base-sidebar__item-toggle.active::before {
  display: none !important;
  content: none !important;
}

body[data-projectname] .base-sidebar__item-link.active,
body[data-projectname] .base-sidebar__item-toggle.active {
  box-shadow: none !important;
}

body[data-projectname] .dropdown-content a::before {
  display: none !important;
  content: none !important;
}

body[data-projectname] .command-palette__item {
  border-left: 0 !important;
}

body[data-projectname] .up-mfa-add-expand {
  border-left: 0 !important;
}

.nb-err {
  min-height: calc(100dvh - var(--navbar-offset, 60px));
  display: flex;
  align-items: center;
}

.nb-err-inner {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

.nb-err-code {
  font-family: var(--nb-display);
  font-weight: 900;
  font-size: clamp(88px, 15vw, 168px);
  line-height: 0.9;
  letter-spacing: -5px;
  margin: 20px 0 0;
  background: var(--nb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 20px 44px rgba(91, 46, 230, 0.3));
}

.nb-err-head {
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 10px 0 0;
  color: var(--nb-ink);
}

.nb-err-lead {
  max-width: 42ch;
}

.nb-err-trust {
  margin-top: 30px;
}

.nb-err-visual {
  height: 460px;
}

.nb-err-toggle {
  cursor: default;
}

.nb-box-error {
  display: grid;
  border-radius: 7px;
  background: #ef4444;
}

.nb-box-error svg {
  width: 15px;
  height: 15px;
}

.nb-widget-foot-bad {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc2626;
}

body.theme-dark[data-projectname] .nb-widget-foot-bad {
  color: #f89b9b;
}

.nb-widget-foot-bad svg {
  width: 11px;
  height: 11px;
}

.nb-err-chip {
  top: auto;
  bottom: 58px;
  inset-inline-start: 6px;
}

@media (max-width: 980px) {
  .nb-err {
    min-height: 0;
  }
  .nb-err-visual {
    height: 420px;
  }
}

@media (max-width: 560px) {
  .nb-err-code {
    letter-spacing: -3px;
  }
}

@media (max-width: 750px) {
  body[data-projectname] .nb-brand .sr-only::before,
  body[data-projectname] .nb-brand .footer-brand-name {
    font-size: 16.5px;
  }
}

/* ============================================================================
   Reworked landing (2026). Ported from the Claude Design source; the design's
   inline styles live here as classes so templates stay markup-only.
   Everything below is scoped to .nb-page / .uc-page, so admin is untouched.
   ========================================================================== */

.nb-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.nb-page .nb-h3 {
  font-family: var(--nb-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.4px;
  margin: 0;
  color: var(--nb-ink);
}

.nb-page .nb-btn,
.uc-page .nb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  /* Match the framework control shape (--nb-radius-control: 999px), so these
     read as the same component family as the navbar CTA and .btn-primary-action
     rather than a second, squarer button style. */
  border-radius: var(--nb-radius-control, 999px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.nb-page .nb-btn:hover,
.uc-page .nb-btn:hover {
  transform: translateY(-1px);
}

/* The framework's own CTA ramp, not a local gradient: --cta-gradient-* are
   derived from --primary-blue in base_style.css, so this button, the navbar CTA
   and every .btn-primary stay one colour system. Rebranding is still the single
   --primary-blue override. */
.nb-page .nb-btn-primary,
.uc-page .nb-btn-primary {
  color: var(--nb-cta-ink, #ffffff);
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-mid) 55%,
    var(--cta-gradient-end) 100%
  );
  box-shadow: 0 12px 30px -8px
    color-mix(in oklch, var(--primary-blue) 55%, transparent);
}

.nb-page .nb-btn-primary:hover,
.uc-page .nb-btn-primary:hover {
  filter: brightness(1.06);
}

.nb-page .nb-btn-ghost,
.uc-page .nb-btn-ghost {
  background: var(--nb-btn2-bg);
  color: var(--nb-widget-text);
  border: 1px solid var(--nb-btn2-border);
  box-shadow: 0 4px 14px rgba(20, 18, 30, 0.05);
}

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

.nb-hero-dots {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: radial-gradient(var(--nb-dot) 1.6px, transparent 1.6px);
  background-size: 34px 34px;
}

.nb-hero-copy .nb-hero-title {
  max-width: 21ch;
}

/* ---- how: decision diagram ---------------------------------------------- */

.nb-flow-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  margin-top: 44px;
  background: linear-gradient(150deg, #171029, #2a1a4e);
  box-shadow: 0 30px 70px rgba(43, 26, 82, 0.4);
  padding: 26px 30px 30px;
}

.nb-flow-blob {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.28),
    transparent 65%
  );
  pointer-events: none;
}

.nb-flow-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.nb-flow-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a8ff;
}

.nb-flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18);
}

.nb-flow-title {
  font-size: 13px;
  font-weight: 700;
  color: #e7deff;
}

.nb-flow-svg {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  display: block;
}

.nb-flow-glow {
  filter: blur(26px);
  opacity: 0.45;
}

.nb-flow-svg .nb-dash {
  animation: nb-flow 1s linear infinite;
}

.nb-flow-t1,
.nb-flow-t2 {
  font-family: var(--nb-text);
}

.nb-flow-t3 {
  font-family: var(--nb-display);
}

.nb-phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nb-phase {
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.45s ease;
}

.nb-phase.is-on {
  opacity: 1;
}

.nb-phase-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a8ff;
}

.nb-phase-body {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #c9c1e6;
  text-wrap: pretty;
}

/* ---- features: alternating rows ----------------------------------------- */

/* Renamed from .nb-row: the framework navbar (base_navbar) owns .nb-row for its
   menu items, and an unscoped .nb-row here restyled every navbar link. */
.nb-frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--nb-divider);
}

.nb-frow:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

.nb-frow-body {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--nb-body);
  text-wrap: pretty;
}

.nb-card {
  background: var(--nb-card-bg);
  border: 1px solid var(--nb-card-border);
  border-radius: 22px;
  padding: 22px 24px;
}

.nb-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #171029, #2a1a4e);
  color: #ffffff;
}

.nb-dark-blob {
  position: absolute;
  bottom: -80px;
  right: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 65%);
  pointer-events: none;
}

.nb-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.nb-log-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nb-meta);
}

.nb-log-badge {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--nb-seg-bg);
  border: 1px solid var(--nb-kicker-border);
  color: var(--nb-pill-fg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.nb-log-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}

.nb-log-ok {
  background: var(--nb-feed-ok-bg);
  border: 1px solid var(--nb-feed-ok-border);
}

.nb-log-bad {
  background: var(--nb-feed-bad-bg);
  border: 1px solid var(--nb-feed-bad-border);
}

.nb-log-idle {
  background: var(--nb-widget-foot);
  border: 1px solid var(--nb-card-border);
}

.nb-log-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
}

.nb-log-ok .nb-log-mark {
  background: var(--nb-feed-mark-ok);
}

.nb-log-ok .nb-log-mark svg {
  stroke: var(--nb-feed-ok-text);
}

.nb-log-bad .nb-log-mark {
  background: var(--nb-feed-mark-bad);
}

.nb-log-bad .nb-log-mark svg {
  stroke: var(--nb-feed-bad-text);
}

.nb-log-idle .nb-log-mark {
  background: var(--nb-pill-bg);
}

.nb-log-idle .nb-log-mark svg {
  stroke: var(--nb-pill-fg);
}

.nb-log-state {
  font-size: 12.5px;
  font-weight: 700;
}

.nb-log-ok .nb-log-state {
  color: var(--nb-feed-ok-text);
}

.nb-log-bad .nb-log-state {
  color: var(--nb-feed-bad-text);
}

.nb-log-idle .nb-log-state {
  color: var(--nb-pill-fg);
}

.nb-log-meta {
  font-size: 11.5px;
  color: var(--nb-meta);
}

.nb-log-tail {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--nb-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* difficulty selector */

.nb-codecard {
  position: relative;
  overflow: hidden;
  background: #0f0c1c;
  padding: 26px;
}

.nb-code-blob {
  position: absolute;
  top: -90px;
  left: 30%;
  width: 320px;
  height: 220px;
  background: radial-gradient(
    ellipse,
    rgba(124, 58, 237, 0.28),
    transparent 65%
  );
  pointer-events: none;
}

.nb-c-comment {
  color: #6f6a8c;
}

.nb-c-spaced {
  margin-top: 14px;
}

.nb-tag {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--nb-seg-bg);
  border: 1px solid var(--nb-kicker-border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--nb-pill-fg);
}

.nb-tag-ok {
  background: var(--nb-feed-ok-bg);
  border-color: var(--nb-feed-ok-border);
  color: var(--nb-feed-ok-text);
}

.nb-tags-kicker {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nb-meta);
}

.nb-a11y {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--nb-card2-bg);
  border: 1px solid var(--nb-card-border);
  margin-bottom: 12px;
  color: var(--nb-pill-fg);
}

.nb-a11y svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.nb-a11y-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--nb-ink);
}

.nb-a11y-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--nb-meta);
}

.nb-pow {
  padding: 26px;
}

.nb-pow-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-pow-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
}

.nb-pow-ok {
  color: #bbf7d0;
}

.nb-pow-bad {
  color: #fecaca;
}

.nb-pow-bar {
  margin-top: 7px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.nb-pow-fill {
  height: 100%;
  border-radius: 999px;
}

.nb-pow-fill-ok {
  width: 12%;
  background: linear-gradient(90deg, #34d399, #a7f3d0);
}

.nb-pow-fill-bad {
  background: linear-gradient(90deg, #f87171, #fca5a5);
  animation: nb-pow 2.6s ease-in-out infinite alternate;
}

.nb-zero {
  padding: 28px;
}

/* Two short columns: what is kept, and what is never touched. */
.nb-ledger {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.nb-ledger-head {
  margin-bottom: 12px;
  font-family: var(--nb-display);
  font-size: 13px;
  font-weight: 700;
  color: #e7deff;
}

.nb-ledger-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: #bfb6dd;
  text-wrap: pretty;
}

.nb-ledger-mark {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.nb-ledger-mark.is-kept {
  color: #6ee7b7;
}

.nb-ledger-mark.is-never {
  color: #fca5a5;
}

.nb-globe-card .nb-globe {
  display: grid;
  place-items: center;
  padding: 8px 0;
}

.nb-bars-note {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nb-meta);
}

.nb-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 158px;
  padding: 0 6px;
  border-bottom: 2px solid var(--nb-card-border);
}

.nb-bars span {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
}

.nb-bars .nb-bar-hi {
  background: linear-gradient(180deg, #b794f6, #7c3aed);
}

.nb-bars .nb-bar-hi2 {
  background: linear-gradient(180deg, #a78bfa, #5b2ee6);
}

.nb-bar-h38 {
  height: 38%;
}
.nb-bar-h44 {
  height: 44%;
}
.nb-bar-h52 {
  height: 52%;
}
.nb-bar-h58 {
  height: 58%;
}
.nb-bar-h64 {
  height: 64%;
}
.nb-bar-h70 {
  height: 70%;
}
.nb-bar-h76 {
  height: 76%;
}
.nb-bar-h88 {
  height: 88%;
}
.nb-bar-h96 {
  height: 96%;
}

/* ---- use-case grid ------------------------------------------------------- */

.nb-usecases {
  background: var(--nb-sec-alt);
  padding: 92px 28px;
}

.nb-uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.nb-uc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--nb-card2-bg);
  border: 1px solid var(--nb-card-border);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.nb-uc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  background: var(--brand-softer);
  box-shadow: 0 10px 26px -18px var(--nb-shadow);
}

.nb-uc-card:hover .nb-uc-label {
  color: var(--brand);
}

.nb-uc-card:hover .nb-uc-icon {
  background: var(--brand-soft);
  color: var(--brand);
}

.nb-uc-label,
.nb-uc-icon {
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.nb-uc-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--nb-seg-bg);
  color: var(--nb-pill-fg);
}

.nb-uc-icon svg {
  stroke: currentColor;
}

.nb-uc-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nb-ink);
}

/* ---- who uses it --------------------------------------------------------- */

.nb-who {
  background: var(--nb-sec-bg);
  padding: 40px 28px 80px;
}

.nb-who-lead {
  margin: 16px 0 0;
  max-width: 68ch;
  text-align: start;
}

.nb-who-panel {
  position: relative;
  overflow: hidden;
  max-width: 1140px;
  margin: 32px auto 0;
  border-radius: 26px;
  background: linear-gradient(160deg, #171029, #2a1a4e);
  box-shadow: 0 30px 70px rgba(43, 26, 82, 0.4);
  padding: 34px 40px 4px;
}

.nb-who-blob {
  position: absolute;
  top: -110px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.28),
    transparent 65%
  );
  pointer-events: none;
}

.nb-who-grid {
  position: relative;
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 36px;
  padding-bottom: 40px;
  align-items: start;
}

.nb-who-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-end: 28px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.nb-who-tab {
  position: relative;
  width: 100%;
  margin: 0;
  height: auto;
  line-height: 1.3;
  text-align: start;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: inherit;
  /* A base button rule uppercases and letter-spaces every <button>; these are
     sentence-case industry names ("e-Commerce"), so opt out of both. */
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: #b3a9d6;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.nb-who-tab::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: #c9a8ff;
  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.nb-who-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.nb-who-tab.is-on {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-weight: 700;
}

.nb-who-tab.is-on::before {
  height: 60%;
}

.nb-who-panes {
  position: relative;
}

.nb-who-pane {
  display: none;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 32px;
  align-items: start;
}

.nb-who-pane.is-on {
  display: grid;
}

.nb-who-head {
  font-family: var(--nb-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0;
  color: #ffffff;
  max-width: 34ch;
}

.nb-who-body {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #c9c1e6;
  max-width: 58ch;
  text-wrap: pretty;
}

.nb-who-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nb-who-links-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8f86b8;
}

/* .nb-who-link, not `.nb-who-links a`: base_style.css applies
   `border-bottom-style: none !important` to any <a> that lacks an nb-* class,
   which stripped the bottom edge of these pills on hover. Carrying the class on
   the anchor itself is the framework's own opt-out. */
.nb-who-link {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12.5px;
  font-weight: 700;
  color: #d9cdff;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.nb-who-link:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(201, 168, 255, 0.5);
  color: #ffffff;
}

.nb-who-side {
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.nb-who-side-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a8ff;
}

.nb-who-routes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.nb-who-routes li {
  position: relative;
  padding-block: 6px;
  padding-inline: 18px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #e2dcf5;
}

.nb-who-routes li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee7c4;
}

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

.nb-compare {
  background: var(--nb-sec-bg);
  padding: 20px 28px 80px;
}

.nb-compare-lead {
  margin: 16px 0 0;
  max-width: 78ch;
  text-align: start;
}

.nb-compare-scroll {
  margin-top: 34px;
  overflow-x: auto;
  border: 1px solid var(--nb-card-border);
  border-radius: 22px;
  background: var(--nb-card2-bg);
}

.nb-compare-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
}

.nb-compare-table th,
.nb-compare-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--nb-divider);
  color: var(--nb-body);
}

.nb-compare-table thead th {
  padding: 22px 18px 18px;
  vertical-align: bottom;
}

.nb-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.nb-compare-table td:first-child,
.nb-compare-table th:first-child {
  text-align: start;
  font-weight: 600;
  color: var(--nb-ink);
  min-width: 260px;
}

.nb-cmp-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nb-meta) !important;
}

.nb-cmp-us {
  background: var(--nb-seg-bg);
}

.nb-compare-table tbody td:nth-child(2) {
  background: var(--nb-seg-bg);
}

.nb-cmp-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(150deg, #ffffff 0%, #ece4fd 100%);
  border: 1px solid var(--nb-kicker-border);
  color: var(--nb-pill-fg);
}

.nb-cmp-mark img {
  display: block;
  width: 20px;
  height: 20px;
}

.nb-cmp-logo {
  display: block;
  margin: 0 auto;
  max-width: 112px;
  height: 28px;
  object-fit: contain;
}

.nb-cmp-name {
  display: block;
  margin-top: 8px;
  font-family: var(--nb-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--nb-ink);
}

.nb-cmp-yes,
.nb-cmp-no {
  display: inline-grid;
  place-items: center;
}

.nb-cmp-yes {
  color: #16a34a;
}

.nb-cmp-no {
  color: #c2b8d8;
}

.nb-cmp-yes svg,
.nb-cmp-no svg {
  stroke: currentColor;
}

/* On "Loads from a Google domain" a tick is the bad answer, so the colours flip. */
.nb-cmp-inverse .nb-cmp-yes {
  color: #dc2626;
}

.nb-cmp-inverse .nb-cmp-no {
  color: #16a34a;
}

.nb-cmp-strong {
  font-weight: 700;
  color: var(--nb-ink) !important;
}

.nb-compare-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--nb-card-bg);
  border: 1px solid var(--nb-card-border);
  color: var(--nb-pill-fg);
}

.nb-compare-note svg {
  flex-shrink: 0;
  stroke: currentColor;
  margin-top: 2px;
}

.nb-compare-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--nb-body);
  text-wrap: pretty;
}

.nb-compare-source {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--nb-meta);
}

.nb-cta-dots {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: radial-gradient(#c9a8ff 1.4px, transparent 1.4px);
  background-size: 30px 30px;
}

/* ---- keyframes ----------------------------------------------------------- */

@keyframes nb-handle {
  0%,
  12% {
    transform: translateX(0);
  }
  45%,
  78% {
    transform: translateX(170px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes nb-rot {
  0%,
  10% {
    transform: rotate(-132deg);
  }
  55%,
  85% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-132deg);
  }
}

@keyframes nb-hit {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.86);
  }
  55%,
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.86);
  }
}

@keyframes nb-cursor {
  0% {
    transform: translate(40px, 150px);
  }
  45%,
  88% {
    transform: translate(232px, 60px);
  }
  100% {
    transform: translate(40px, 150px);
  }
}

@keyframes nb-pow {
  from {
    width: 34%;
  }
  to {
    width: 100%;
  }
}

/* ---- reworked landing: responsive + reduced motion ----------------------- */

@media (max-width: 980px) {
  .nb-frow,
  .nb-frow.is-flip {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* On one column the illustration must not lead; copy first, always. */
  .nb-frow > .nb-card,
  .nb-frow > .nb-codecard {
    order: 2;
  }

  .nb-frow > .nb-frow-copy {
    order: 1;
  }

  .nb-phases {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .nb-who-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .nb-who-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding-inline-end: 0;
    padding-bottom: 18px;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nb-who-tab {
    width: auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
  }

  .nb-who-tab::before {
    display: none;
  }

  .nb-who-panel {
    padding: 30px 26px 4px;
  }

  .nb-usecases,
  .nb-compare {
    padding: 64px 22px;
  }

  .nb-flow-card {
    padding: 22px 20px 24px;
  }
}

@media (max-width: 560px) {
  .nb-uc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .nb-uc-card {
    padding: 14px;
    gap: 10px;
  }

  .nb-uc-label {
    font-size: 13.5px;
  }

  .nb-compare-note {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-pow-fill-bad,
  .nb-flow-svg .nb-dash {
    animation: none !important;
  }

  /* Without the animation the rotate puzzle must still read as solved, and the
     pick highlight must still be visible, or both panels look broken. */

  .nb-pow-fill-bad {
    width: 100%;
  }

  .nb-phase {
    opacity: 1;
  }

  .nb-uc-card {
    transition: none;
  }

  .nb-uc-card:hover {
    transform: none;
  }
}

@media (max-width: 980px) {
  .nb-who-pane.is-on {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Static difficulty ladder. Replaced the interactive 1-5 selector when the
   customer-facing floor setting was dropped: the levels are still real and worth
   showing, but the visitor is being informed, not asked to choose. */

/* Difficulty-scale preview. A segmented 1-5 control that swaps one line of
   tolerance text - informational only, there is no difficulty setting to change. */

@media (prefers-reduced-motion: reduce) {
  .nb-seg-thumb {
    transition: none;
  }
}

/* Difficulty-scale preview: a compact segmented 1-5 control over a three-value
   spec strip. Informational - there is no difficulty setting to change. The
   earlier version was a full-width bar over a floating sentence, which left the
   card mostly empty. */
.nb-levels {
  padding: 16px 18px 14px;
}

.nb-seg {
  position: relative;
  display: flex;
  padding: 4px;
  background: var(--nb-seg-bg);
  border-radius: 11px;
  gap: 2px;
}

.nb-seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  /* Placeholder geometry only - script.js measures the active button and writes
     px values, so the pill lines up with the digit at every level. */
  left: 4px;
  width: 20%;
  border-radius: 8px;
  background: var(--nb-grad);
  box-shadow: 0 4px 12px -4px rgba(91, 46, 230, 0.7);
  transition:
    left 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.nb-seg-btn {
  position: relative;
  flex: 1;
  /* explicit height: a base button rule adds padding/line-height that pushed the
     row to 56px, which is what made this card look oversized.
     Centred with grid rather than line-height: line-height centres the line box,
     not the glyph, and Sora's tall ascender then leaves the digit sitting high. */
  display: grid;
  place-items: center;
  height: 34px;
  /* A global `.button, button { margin-bottom: 1rem }` adds 10px under every
     button. Here it made .nb-seg 52px while the buttons stayed 34px, so the
     absolutely-positioned thumb was 10px taller than the button and the digit
     sat 5px above the pill's centre. */
  margin: 0;
  padding: 0;
  line-height: 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: var(--nb-display);
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  color: var(--nb-meta);
  transition: color 0.2s ease;
}

.nb-seg-btn:hover {
  color: var(--brand);
}

.nb-seg-btn.is-on,
.nb-seg-btn.is-on:hover {
  color: #ffffff;
}

.nb-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  border-radius: 11px;
  background: var(--nb-card2-bg);
  border: 1px solid var(--nb-card-border);
  overflow: hidden;
}

.nb-spec-cell {
  padding: 10px 8px;
  text-align: center;
  border-inline-start: 1px solid var(--nb-card-border);
}

.nb-spec-cell:first-child {
  border-inline-start: 0;
}

.nb-spec-val {
  display: block;
  font-family: var(--nb-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
}

.nb-spec-lbl {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--nb-meta);
}

.nb-levels-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nb-meta);
}

@media (prefers-reduced-motion: reduce) {
  .nb-seg-thumb {
    transition: none;
  }
}

/* Industry selector: read as buttons, and show selection with a filled pill.
   The previous treatment was a 2px accent bar on the left edge only, which is
   easy to miss and does not make the inactive items look clickable at all. */
.nb-who-tab {
  background: rgba(255, 255, 255, 0.04);
  /* Transparent, not absent: seven outlined boxes made the column busy, but the
     border still has to occupy space so the active rim does not shift layout. */
  border: 1px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.nb-who-tab::before {
  display: none;
}

.nb-who-tab:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateX(2px);
}

[dir='rtl'] .nb-who-tab:hover {
  transform: translateX(-2px);
}

/* Glass, not a solid fill: a translucent brand-tinted surface that blurs the
   panel gradient behind it, with a top inner highlight for the lit edge. Same
   idiom the framework navbar uses when scrolled, so it reads as part of the
   system rather than a one-off. */
.nb-who-tab.is-on,
.nb-who-tab.is-on:hover {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.28) 0%,
    rgba(255, 255, 255, 0.12) 100%
  );
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px -14px rgba(0, 0, 0, 0.75);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nb-who-tab {
    transition: none;
  }

  .nb-who-tab:hover {
    transform: none;
  }
}

.nb-none-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(10, 7, 22, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 84%;
}

.nb-none-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--nb-grad);
  box-shadow: 0 6px 16px -8px rgba(91, 46, 230, 0.9);
  animation: nb-none-tick 4.6s ease-in-out infinite;
}

.nb-none-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nb-none-label {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.nb-none-sub {
  font-size: 11.5px;
  line-height: 1.4;
  color: #cfc4f2;
}

@keyframes nb-none-tick {
  0%,
  18% {
    transform: scale(0.86);
    opacity: 0.45;
  }
  32%,
  88% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.86);
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-none-check {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* FAQ accordion. The collapse component ships its own base styling; these rules
   only fit it to the marketing pages (width, rhythm, themed surface). */
/* Self-contained: this block renders on the landing (.nb-page) and on the
   use-case pages (.uc-page), and use_cases.css only loads for the latter, so
   the section owns its own background and rhythm rather than borrowing
   .uc-section. Generous bottom padding so the surface does not stop dead on the
   last accordion row. */
.nb-faq {
  background: var(--nb-sec-bg);
  padding: 84px 28px 96px;
}

.nb-faq-head {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.nb-faq-lead {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--nb-body);
  text-wrap: pretty;
}

.nb-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}

.nb-page .nb-faq-item,
.uc-page .nb-faq-item {
  /* The component builds its open state as
     `radial-gradient(--collapse-accent 5%), var(--card-bg)`. --collapse-accent
     already resolves to our purple via --primary-blue, but --card-bg is the
     framework's warm off-white, which is where the beige open row came from.
     Point that token at our themed surface and the open state composes
     correctly instead of being overridden. */
  --card-bg: var(--nb-card2-bg);
  border-radius: 16px;
  background: var(--nb-card-bg);
  border: 1px solid var(--nb-card-border);
  overflow: hidden;
}

.nb-page .nb-faq-item .collapse-header,
.uc-page .nb-faq-item .collapse-header {
  width: 100%;
  margin: 0;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.nb-page .nb-faq-item .collapse-header-title,
.uc-page .nb-faq-item .collapse-header-title {
  font-family: var(--nb-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-ink);
}

.nb-page .nb-faq-item .collapse-chevron,
.uc-page .nb-faq-item .collapse-chevron {
  color: var(--nb-pill-fg);
}

.nb-page .nb-faq-item .collapse-content-inner,
.uc-page .nb-faq-item .collapse-content-inner {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--nb-body);
  max-width: 74ch;
  text-wrap: pretty;
}

/* "Deploy in minutes" migration band. Centred, quiet surface, with the three
   migration guides as equal paths rather than one CTA - the honest shape, since
   reCAPTCHA and hCaptcha are two-line swaps and Turnstile is not. */
.nb-switch {
  background: var(--nb-sec-alt);
  padding: 84px 28px 88px;
}

.nb-switch-inner {
  text-align: center;
}

.nb-switch-title {
  font-family: var(--nb-display);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin: 10px auto 0;
  max-width: 24ch;
  color: var(--nb-ink);
}

/* Emphasis, not a link: the three cards below are the real destinations. */
.nb-switch-em {
  color: var(--nb-pill-fg);
}

.nb-switch-lead {
  max-width: 68ch;
  margin: 18px auto 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--nb-body);
  text-wrap: pretty;
}

.nb-switch-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 920px;
  margin: 32px auto 0;
  text-align: start;
}

.nb-switch-path {
  display: block;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--nb-card2-bg);
  border: 1px solid var(--nb-card-border);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.nb-switch-path:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.nb-switch-path-name {
  display: block;
  font-family: var(--nb-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--nb-ink);
}

.nb-switch-path-note {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nb-meta);
}

.nb-switch-foot {
  margin: 22px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nb-meta);
}

@media (max-width: 980px) {
  .nb-switch-paths {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-switch-path {
    transition: none;
  }

  .nb-switch-path:hover {
    transform: none;
  }
}

/* Official brand colours for the FontAwesome brand glyphs in the docs menu.
   FA ships them monochrome, so the colour is ours. Kept as literals on purpose:
   these are the vendors' own brand values, not theme tokens, and they must not
   shift when the palette does. */
.nb-ico-python {
  color: #3776ab;
}
.nb-ico-node {
  color: #5fa04e;
}
.nb-ico-php {
  color: #777bb4;
}
.nb-ico-go {
  color: #00add8;
}
.nb-ico-google {
  color: #4285f4;
}
.nb-ico-cloudflare {
  color: #f38020;
}

/* Pills and footnotes that are now links. The nb- prefix on the class is not
   cosmetic: base_style strips the bottom border of any <a> lacking one. */
.nb-page a.nb-tag,
.uc-page a.uc-tag {
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.nb-page a.nb-tag:hover,
.uc-page a.uc-tag:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.nb-switch-foot-link {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.nb-switch-foot-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Brand icons need to read as the brand, which two inherited rules were fighting:
   a base `a .fas, a .fab, a .far { opacity: .8 }` dimmed them, and the mega-menu
   tile (.nb-rich__tile) sits on a purple wash that pulls every hue toward violet.
   Full strength on a neutral tile fixes both. Scoped to rows that opt in with an
   nb-ico-* class, so non-brand icons keep the house styling. */
.nb-root a .fab[class*='nb-ico-'],
.nb-root a .fas[class*='nb-ico-'] {
  opacity: 1;
}

/* Light theme only: every menu tile is the white chip with a hairline ring, not
   just the brand ones - a purple-on-purple tile beside a white brand tile read as
   two systems. Dark theme is deliberately NOT overridden; it inherits the
   framework's own --brand-soft tile, which now sits on a brand-tinted panel
   (base_style.css --nb-panel), so a white chip there would be a bright rectangle. */
body.theme-light .nb-root .nb-rich__tile {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 30, 0.08);
}

/* Menu icons read as ink, not as brand. Purple glyphs on a purple-tinted tile
   inside a purple-tinted panel was three coats of the same hue, and it fought the
   six real brand icons (Python blue, Go cyan, Cloudflare orange) that DO need
   their own colour to be recognisable - those carry .nb-ico-* and win on top.
   --text-primary rather than a literal: base_navbar.css redefines it to white
   inside body.theme-dark .nb-root, so this one declaration is black on the light
   chip and white on the dark tile. */
.nb-root .nb-rich__tile i:not([class*='nb-ico-']) {
  color: var(--text-primary);
}