/* =====================================================================
   NoVi — Articles hub + article template (.na-*), legal pages (.nlg-*),
   404 / error panel (.ns-*). Stream: pages-articles (round 6).
   Builds on the landing vocabulary (landing.css: .nl, .nl-hero, .nl-btn,
   .nl-toc, .nl-list, .nl-tl, .nl-caps, .nl-table, .nl-callout, .nl-faq,
   .nl-rows, .nl-cta) and the design-system tokens (--novi-*, --fs-*, --ff-*).
   Both themes via tokens; RTL via logical properties; reduced motion = final states.
   ===================================================================== */

/* ------------------------------------------------------------ reading progress (CSS only) */
.na-progress {
  position: fixed; inset-inline: 0; top: 0; z-index: 1002; height: 2px; pointer-events: none;
  background: var(--novi-grad-gold); transform: scaleX(0); transform-origin: left center; opacity: 0;
}
[dir="rtl"] .na-progress { transform-origin: right center; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .na-progress { opacity: 1; animation: na-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes na-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------ hero */
.na-hero.novi-hero { min-height: clamp(520px, 80svh, 860px); }
.nl-hero .na-hero__title { max-width: 22ch; font-size: clamp(32px, 1.9vw + 20px, 52px); line-height: 1.1; }
[dir="rtl"] .nl-hero .na-hero__title { max-width: 26ch; line-height: 1.38; }
.na-hero--hub .nl-hero__title { max-width: 26ch; }
.na-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding-block: 16px; }
.na-meta p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.74); }
.na-meta .na-meta__by { color: #fff; font-weight: 600; }
.na-meta b { color: var(--novi-gold-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.na-meta__item { display: inline-flex; gap: 6px; align-items: baseline; }
.na-meta__item::before { content: ""; align-self: center; width: 4px; height: 4px; border-radius: 50%; background: var(--novi-gold); margin-inline-end: 8px; }
.na-meta__markets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.na-meta__markets li, .na-card__markets li {
  padding: 3px 10px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 999px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.86);
}
.na-meta .nl-hero__tag { margin-inline-start: auto; }
.na-hub-topics { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: rgba(255, 255, 255, 0.74); }
.na-hub-topics b { margin-inline-end: 4px; font: 400 20px/1 var(--ff-head); background: var(--novi-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------ layout: sticky aside + reading column */
.na-main { padding-top: clamp(48px, 5vw, 84px); }
/* minmax(0,1fr): below 992px a wide table (cookie policy) otherwise sized the implicit column and pushed the copy off-screen */
.na-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.na-aside { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.na-article { min-width: 0; max-width: 780px; }
@media (min-width: 992px) {
  .na-grid { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); align-items: start; }
  .na-aside { position: sticky; top: var(--nl-sticky, 104px); max-height: calc(100vh - var(--nl-sticky, 104px) - 24px); overflow-y: auto; scrollbar-width: none; }
  .na-aside::-webkit-scrollbar { display: none; }
}
@media (max-width: 991px) {
  .na-aside__cta { display: none !important; }
}

/* table of contents: current section in gold */
.na-toc { margin-top: 0; }
.na-toc a[aria-current] { color: var(--novi-gold-hi); }
.na-toc a[aria-current] span { color: var(--novi-gold-hi); }
@media (min-width: 992px) {
  .na-toc a[aria-current] { padding-inline-start: 6px; }
}

/* share */
.na-share__label { margin: 0 0 10px; font-size: var(--fs-small); color: var(--novi-muted); }
.na-share__row { display: flex; flex-wrap: wrap; gap: 8px; }
.na-share__btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--novi-line-2); border-radius: 999px;
  background: transparent; color: var(--novi-text) !important; font: 500 13px/1 var(--ff-body); text-decoration: none !important; cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.na-share__btn:hover, .na-share__btn:focus-visible { border-color: var(--novi-gold-hi); color: var(--novi-gold-hi) !important; }
.na-share__btn[hidden] { display: none; }
.na-aside__cta { align-self: flex-start; }

/* ------------------------------------------------------------ "In short" */
.na-short {
  position: relative; margin: 0 0 clamp(36px, 4vw, 52px); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
  border: 1px solid var(--novi-line); border-top: 2px solid var(--novi-gold);
  background: linear-gradient(180deg, rgba(var(--novi-gold-rgb), 0.08), rgba(var(--novi-gold-rgb), 0.01));
}
.na .na-short__label { margin: 0 0 14px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.na-short ul { display: grid; gap: 12px; }
.na-short li { position: relative; padding-inline-start: 30px; font-size: var(--fs-body); line-height: 1.7; color: var(--novi-text-2); }
.na-short li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.42em; width: 16px; height: 9px;
  border-inline-start: 2px solid var(--novi-gold); border-bottom: 2px solid var(--novi-gold); transform: rotate(-45deg);
}
[dir="rtl"] .na-short li::before { transform: rotate(45deg) scaleX(-1); }

/* ------------------------------------------------------------ intro + sections */
.na .na-intro__first {
  margin: 0 0 1.1em; color: var(--novi-strong);
  font: 400 clamp(18px, 0.45vw + 16px, 22px)/1.65 var(--ff-head); letter-spacing: -0.003em;
}
[dir="rtl"] .na .na-intro__first { font-weight: 500; line-height: 1.9; letter-spacing: 0; }
.na-intro .nl-p, .na-prose .nl-p { max-width: none; }
.na-sec { margin-top: clamp(56px, 6vw, 92px); scroll-margin-top: calc(var(--novi-header-h, 76px) + 24px); }
#faq { scroll-margin-top: calc(var(--novi-header-h, 76px) + 8px); }
.na .na-sec__n {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: 0.14em; color: var(--novi-gold-hi); font-variant-numeric: tabular-nums;
}
.na .na-sec__n::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--novi-gold); opacity: 0.6; }
.na .na-h2 {
  margin: 0 0 24px; color: var(--novi-strong); text-wrap: balance;
  font: 400 clamp(26px, 1.1vw + 19px, 36px)/1.18 var(--ff-head); letter-spacing: -0.015em;
}
.na .na-h3 { margin: 34px 0 12px; color: var(--novi-strong); font: 500 var(--fs-h3)/1.3 var(--ff-head); letter-spacing: -0.008em; }
[dir="rtl"] .na .na-h2, [dir="rtl"] .na .na-h3 { font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.na-block + .na-block { margin-top: 26px; }
.na-block > .na-h3:first-child { margin-top: 8px; }
.na .na-pic { margin-top: 30px; aspect-ratio: 16 / 9; }
.na .na-pic[data-ratio="4:5"] { aspect-ratio: 4 / 3; }
.na .na-pic[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.na .na-pic[data-ratio="1:1"] { aspect-ratio: 4 / 3; }
.na .nl-list, .na .nl-callout, .na .nl-table { max-width: none; }
/* tables in the reading column: the row-label column never collapses into broken words */
.na .nl-table thead th:first-child, .na .nl-table tbody th { min-width: 118px; }
.na .nl-tl__stage[dir="ltr"] { text-align: start; }
[dir="rtl"] .na .nl-tl__stage[dir="ltr"] { text-align: right; }

/* cards in the reading column: one column below 600 px, two above */
.na .na-caps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .na .na-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* timeline stays single-sided in the reading column */
@media (min-width: 992px) {
  .na .na-tl .nl-tl__rail { inset-inline-start: 23px; }
  .na .na-tl .nl-tl__step,
  .na .na-tl .nl-tl__step:nth-child(even) { width: auto; margin-inline-start: 0; padding: 0 0 clamp(28px, 3vw, 40px); padding-inline-start: 76px; text-align: start; }
  .na .na-tl .nl-tl__step + .nl-tl__step { margin-top: 0; }
  .na .na-tl .nl-tl__step .nl-tl__node,
  .na .na-tl .nl-tl__step:nth-child(even) .nl-tl__node { inset-inline-start: 0; inset-inline-end: auto; }
  .na .na-tl .nl-tl__step .nl-tl__text { margin-inline-start: 0; }
  .na .na-tl .nl-tl__step:last-child { padding-bottom: 0; }
  /* RTL: landing.css `[dir="rtl"] .nl-sec:not(.nl-sec--split) .nl-tl__step` (4 classes) put the 76px pad on the
     left of odd steps while their node sits on the right, so the gold numbers covered the headings */
  [dir="rtl"] .na .na-tl .nl-tl__step.nl-tl__step,
  [dir="rtl"] .na .na-tl .nl-tl__step.nl-tl__step:nth-child(even) { padding: 0 76px clamp(28px, 3vw, 40px) 0; }
  [dir="rtl"] .na .na-tl .nl-tl__step.nl-tl__step:last-child { padding-bottom: 0; }
}
.na .na-tl .nl-tl__text { max-width: 62ch; }

/* links inside article prose */
.na :is(.na-short, .na-intro, .na-prose) a {
  color: var(--novi-gold-hi); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--novi-gold-hi-rgb), 0.4); transition: color 0.3s, text-decoration-color 0.3s;
}
.na :is(.na-short, .na-intro, .na-prose) a:hover { color: var(--novi-strong); text-decoration-color: var(--novi-gold); }

/* ------------------------------------------------------------ author / company box */
.na-author {
  display: grid; gap: 22px; margin-top: clamp(56px, 6vw, 88px); padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--novi-line); background: var(--novi-surface);
}
.na-author__logo { width: 120px; height: auto; }
.na .na-author__eyebrow { margin: 0 0 8px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.na .na-author__title { margin: 0 0 12px; color: var(--novi-strong); font: 400 var(--fs-h3)/1.3 var(--ff-head); }
[dir="rtl"] .na .na-author__title { font-weight: 700; line-height: 1.5; }
.na .na-author__body { margin: 0; font-size: 15px; line-height: 1.75; color: var(--novi-text-2); }
.na-author__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.na-author__facts li { padding: 5px 12px; border: 1px solid var(--novi-line-2); border-radius: 999px; font-size: 13px; line-height: 1.3; color: var(--novi-text); }
.na .na-author__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; }
@media (min-width: 600px) { .na-author { grid-template-columns: 120px minmax(0, 1fr); align-items: start; } }
/* theme logo pair: gold on dark, black on light */
.na-author .novi-theme-logo--light { display: none; }
:root[data-theme="light"] .na-author .novi-theme-logo { display: none; }
:root[data-theme="light"] .na-author .novi-theme-logo--light { display: block; }

/* ------------------------------------------------------------ explore / pills */
.na-explore__work { margin-top: 30px; }
.na .na-explore__label { margin: 0 0 12px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.na-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.na-pills a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--novi-line-2); border-radius: 999px;
  color: var(--novi-text); font-size: 14px; text-decoration: none; transition: border-color 0.3s, color 0.3s;
}
.na-pills a:hover { border-color: var(--novi-gold-hi); color: var(--novi-gold-hi); }

/* ------------------------------------------------------------ cards (hub + more guides) */
.na-cards { display: grid; gap: 18px; }
@media (min-width: 768px) { .na-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .na-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.na-cards > li { display: flex; }
.na-cards > li[hidden] { display: none; }
.na-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--nl-card, rgba(255, 255, 255, 0.025)); border: 1px solid var(--novi-line); transition: border-color 0.4s;
}
:root[data-theme="light"] .na-card { background: var(--novi-surface); }
.na-card:hover { border-color: rgba(var(--novi-gold-rgb), 0.5); }
.na-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #151412; }
.na-card__media picture, .na-card__media img { display: block; width: 100%; height: 100%; }
.na-card__media img { object-fit: cover; transition: transform 1.4s var(--novi-ease); }
.na-card:hover .na-card__media img { transform: scale(1.05); }
.na-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px); }
.na .na-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 13px; color: var(--novi-muted); }
.na-card__topic { font: 600 var(--fs-eyebrow)/1.5 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.na .na-card__title { margin: 0; font: 400 clamp(19px, 0.45vw + 16px, 23px)/1.3 var(--ff-head); letter-spacing: -0.008em; }
[dir="rtl"] .na .na-card__title { font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.na-card__link { color: var(--novi-strong) !important; text-decoration: none !important; transition: color 0.3s; }
.na-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.na-card__link:focus-visible { outline: none; }
.na-card:has(.na-card__link:focus-visible) { outline: 2px solid var(--novi-gold-hi); outline-offset: 3px; }
.na-card:hover .na-card__link { color: var(--novi-gold-hi) !important; }
.na .na-card__summary { margin: 0; font-size: 15px; line-height: 1.7; color: var(--novi-muted); }
.na-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.na-card__markets { display: flex; flex-wrap: wrap; gap: 6px; }
.na-card__markets li { border-color: var(--novi-line-2); color: var(--novi-text); }
.na-card__more { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--ff-body); color: var(--novi-gold-hi); }
.na-card:hover .na-card__more .nl-arrow { transform: translateX(4px); }
[dir="rtl"] .na-card:hover .na-card__more .nl-arrow { transform: scaleX(-1) translateX(4px); }
@media (min-width: 992px) {
  .na-card--featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .na-card--featured .na-card__media { aspect-ratio: auto; min-height: 420px; }
  .na-card--featured .na-card__body { justify-content: center; padding: clamp(32px, 3.6vw, 56px); }
  .na .na-card--featured .na-card__title { font-size: clamp(26px, 1.1vw + 19px, 36px); line-height: 1.18; }
  .na .na-card--featured .na-card__summary { font-size: var(--fs-lead); }
}

/* topic chips */
.na-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.na-filter[hidden] { display: none; }
.na-filter__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--novi-line-2); border-radius: 999px; background: transparent; color: var(--novi-text);
  font: 500 14px/1 var(--ff-body); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.na-filter__chip span { font-size: 12px; color: var(--novi-muted); font-variant-numeric: tabular-nums; }
.na-filter__chip:hover { border-color: var(--novi-gold-hi); color: var(--novi-gold-hi); }
.na-filter__chip[aria-pressed="true"] { background: var(--novi-gold); border-color: var(--novi-gold); color: var(--novi-on-gold); }
.na-filter__chip[aria-pressed="true"] span { color: inherit; opacity: 0.75; }

/* =====================================================================
   Legal pages (.nlg-*) — plain editorial hero + sticky contents + reading column
   ===================================================================== */
.nlg-hero.novi-hero { min-height: clamp(420px, 56svh, 600px); }
.nlg-hero .nl-hero__title { max-width: 20ch; }
.nlg-hero__art { position: absolute; inset: 0; z-index: 0; opacity: 0.32; }
.nlg-hero__art picture, .nlg-hero__art img { width: 100%; height: 100%; }
.nlg-hero__art img { object-fit: cover; }
.nlg-body { max-width: 780px; min-width: 0; }
/* cookie names: Bootstrap's pink <code> failed AA on the light theme; use the brand accent token */
.nlg-body code { color: var(--novi-gold-hi); font-size: 0.92em; overflow-wrap: anywhere; }
.nlg-body .nlg-updated { display: inline-flex; margin: 0 0 22px; padding: 5px 12px; border: 1px solid var(--novi-line-2); border-radius: 999px; font-size: 13px; color: var(--novi-muted); }
.nlg-body .nlg-intro { margin: 0 0 8px; color: var(--novi-strong); font: 400 clamp(17px, 0.35vw + 15.5px, 20px)/1.7 var(--ff-head); }
[dir="rtl"] .nlg-body .nlg-intro { font-weight: 500; line-height: 1.95; }
.nlg-block { margin-top: clamp(40px, 4vw, 60px); scroll-margin-top: calc(var(--novi-header-h, 76px) + 24px); }
.nlg-block .na-h2 { margin-bottom: 16px; font-size: clamp(22px, 0.7vw + 17px, 28px); }
.nlg-block p, .nlg-block li { font-size: var(--fs-body); line-height: 1.8; color: var(--novi-text-2); }
[dir="rtl"] .nlg-block p, [dir="rtl"] .nlg-block li { line-height: 1.95; }
.nlg-block p { margin: 0 0 1em; }
.nlg-block a { color: var(--novi-gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.nlg-docs { margin-top: 8px; }
.nlg-contact { margin-top: clamp(48px, 5vw, 72px); }

/* =====================================================================
   404 / error panel (.ns-*) — works inside the locale layout and from the
   root boundaries (no site CSS there: every value has a fallback)
   ===================================================================== */
.ns {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--novi-bg, #0a0a0a); color: var(--novi-text, #edeae4);
  font-family: var(--ff-body, "Source Sans 3", Arial, sans-serif);
}
.ns[dir="rtl"] { font-family: var(--ff-body, Tajawal, Arial, sans-serif); }
.ns__glow {
  position: absolute; z-index: -1; left: 50%; top: 30%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(190, 149, 101, 0.16), rgba(190, 149, 101, 0) 100%);
}
.ns__lines { position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none; }
.ns__lines svg { width: 100%; height: 100%; }
.ns__lines path { fill: none; stroke: rgba(190, 149, 101, 0.22); stroke-width: 1; }
:root[data-theme="light"] .ns__lines path { stroke: rgba(110, 81, 48, 0.2); }
.ns__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(16px, 4vw, 48px); }
.ns__bar img { display: block; width: 150px; height: auto; }
.ns__logo--light { display: none !important; }
:root[data-theme="light"] .ns__logo--dark { display: none !important; }
:root[data-theme="light"] .ns__logo--light { display: block !important; }
.ns__bar-links { display: flex; align-items: center; gap: 10px; }
.ns__pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(190, 149, 101, 0.55);
  color: var(--novi-text, #edeae4); font-size: 14px; font-weight: 600; text-decoration: none;
}
.ns__pill--gold { background: var(--novi-gold, #be9565); border-color: var(--novi-gold, #be9565); color: var(--novi-on-gold, #0e0e0e); }
.ns__main { flex: 1; display: grid; align-content: center; padding: clamp(32px, 6vh, 72px) clamp(16px, 4vw, 48px) clamp(56px, 8vh, 96px); }
.ns__inner { width: 100%; max-width: 1120px; margin: 0 auto; }
.ns__code {
  margin: 0; font: 400 clamp(96px, 16vw, 220px)/0.9 var(--ff-head, Montserrat, sans-serif); letter-spacing: -0.04em;
  background: var(--novi-grad-gold, linear-gradient(135deg, #e2c192, #be9565 55%, #7a5a36)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ns[dir="rtl"] .ns__code { letter-spacing: 0; }
.ns__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 18px 0 0; font: 600 12px/1.4 var(--ff-head, Montserrat, sans-serif); letter-spacing: 0.18em; text-transform: uppercase; color: var(--novi-gold-hi, #e2c192); }
.ns[dir="rtl"] .ns__eyebrow { font-size: 14px; letter-spacing: 0; text-transform: none; }
.ns__eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.ns__title { margin: 16px 0 0; max-width: 20ch; text-wrap: balance; font: 400 clamp(30px, 2vw + 20px, 50px)/1.1 var(--ff-head, Montserrat, sans-serif); letter-spacing: -0.02em; color: var(--novi-strong, #fff); }
.ns[dir="rtl"] .ns__title { font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.ns__text { margin: 18px 0 0; max-width: 56ch; font-size: clamp(16px, 0.3vw + 15px, 19px); line-height: 1.7; color: var(--novi-muted, rgba(237, 234, 228, 0.66)); }
.ns__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ns__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--novi-gold, #be9565); background: var(--novi-gold, #be9565); color: var(--novi-on-gold, #0e0e0e);
  font: 600 15px/1.2 var(--ff-body, "Source Sans 3", Arial, sans-serif); text-decoration: none; cursor: pointer;
}
.ns__btn--ghost { background: transparent; color: var(--novi-strong, #fff); border-color: var(--novi-line-2, rgba(255, 255, 255, 0.22)); }
.ns__btn:hover { filter: brightness(1.08); }
.ns__links { display: grid; gap: 12px; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ns__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ns__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ns__link {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border: 1px solid var(--novi-line, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.02); color: inherit; text-decoration: none; transition: border-color 0.35s, transform 0.35s;
}
:root[data-theme="light"] .ns__link { background: var(--novi-surface, #fff); }
.ns__link:hover, .ns__link:focus-visible { border-color: var(--novi-gold, #be9565); transform: translateY(-2px); }
.ns__link b { font: 500 17px/1.35 var(--ff-head, Montserrat, sans-serif); color: var(--novi-strong, #fff); }
.ns[dir="rtl"] .ns__link b { font-weight: 700; }
.ns__link span { font-size: 14px; line-height: 1.55; color: var(--novi-muted, rgba(237, 234, 228, 0.66)); }
.ns__link i { font-style: normal; color: var(--novi-gold-hi, #e2c192); }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .na *, .ns *, .na-progress { transition-duration: 0s !important; animation: none !important; }
}