/* =============================================================================
   national-day.css — Saudi National Day 96 × Niqati, limited edition.

   TEMPORARY. Linked only while scripts/nd96.config.mjs has the flag on; the
   generator removes the <link> when it is off, so this file going stale is
   harmless. Nothing here overrides a Niqati brand token.

   Rules of the campaign, enforced throughout this sheet:
     1. Green is the CAMPAIGN colour, never the product colour. No button, link,
        focus ring or form control is ever green.
     2. --nd-duo (green -> Niqati orange) is the signature. It carries the mark,
        the "96", the numerals and every campaign hairline.
     3. Sadu appears ONCE, engraved behind the hero "96". Never as a border.
     4. Resting state == final state for every animation. style.css:1464 kills
        all animation under prefers-reduced-motion with !important, so anything
        that only becomes visible via keyframes would stay invisible forever.
   ========================================================================== */

:root {
  --nd-green: #006C35;          /* Saudi flag green */
  --nd-green-deep: #00301A;     /* offer band ground, atmospheric depth */
  --nd-green-lit: #14A85A;
  --nd-ivory: #FBF7F1;          /* announcement bar ground */
  --nd-hairline: rgba(0, 108, 53, .14);

  --nd-duo: linear-gradient(105deg, #006C35 0%, #0B7F40 32%, #FF8A47 76%, #FF6B1A 100%);

  /* Motifs live here as masks, not as markup: one definition, no per-page
     bytes across 180 pages, no SVG id collisions, and the gradient stays in
     CSS where it can be themed. */
  --nd-frond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 30V7'/%3E%3Cpath d='M16 7.4c-1.3-1.8-1.4-3.6-.3-5.4'/%3E%3Cpath d='M16 11c-2.8-2.4-6-3.3-9.4-2.8'/%3E%3Cpath d='M16 11c2.8-2.4 6-3.3 9.4-2.8'/%3E%3Cpath d='M16 16.6c-3.1-2.6-6.7-3.5-10.4-3'/%3E%3Cpath d='M16 16.6c3.1-2.6 6.7-3.5 10.4-3'/%3E%3Cpath d='M16 22.2c-2.7-2.3-5.8-3.1-9-2.7'/%3E%3Cpath d='M16 22.2c2.7-2.3 5.8-3.1 9-2.7'/%3E%3C/svg%3E");
  --nd-sadu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.9'%3E%3Cpath d='M1 11 20 2 39 11'/%3E%3Cpath d='M1 21 20 12 39 21'/%3E%3Cpath d='M1 31 20 22 39 31'/%3E%3Cpath d='M1 41 20 32 39 41'/%3E%3Cpath d='M20 5 23.5 8.5 20 12 16.5 8.5Z'/%3E%3Cpath d='M20 25 23.5 28.5 20 32 16.5 28.5Z'/%3E%3C/svg%3E");
  --nd-i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2.5'/%3E%3Cpath d='M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5'/%3E%3C/svg%3E");
  --nd-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  --nd-i-arw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E");
}

/* ── Shared atoms ─────────────────────────────────────────────────────────── */

/* The campaign mark: an abstract palm frond, the green->orange handshake in
   miniature. Replaces the flag emoji everywhere in campaign markup. */
.nd-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--nd-duo);
  -webkit-mask: var(--nd-frond) center / contain no-repeat;
  mask: var(--nd-frond) center / contain no-repeat;
}
.nd-mark-sm { width: 15px; height: 15px; }
.nd-mark-lg { width: 34px; height: 34px; }
.nd-mark-xl { width: 96px; height: 96px; }

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

/* Copy control. Neutral by default — green would make it read as a product
   control, which is exactly what rule 1 forbids. */
.nd-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--nd-hairline);
  background: rgba(0, 108, 53, .05);
  color: var(--nd-green);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.nd-copy:hover { background: rgba(0, 108, 53, .1); border-color: rgba(0, 108, 53, .28); }
.nd-copy-i {
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: var(--nd-i-copy) center / contain no-repeat;
  mask: var(--nd-i-copy) center / contain no-repeat;
}
.nd-copy.is-copied .nd-copy-i {
  -webkit-mask-image: var(--nd-i-check);
  mask-image: var(--nd-i-check);
}
.nd-copy-lg { padding: 10px 16px; font-size: 13.5px; }
.nd-copy-lg .nd-copy-i { width: 15px; height: 15px; }

/* ── 1. Announcement bar (all 180 pages) ──────────────────────────────────────
   background-color MUST stay light and MUST be a solid colour. js/main.js:70-81
   samples the computed backgroundColor just under the sticky nav on every
   scroll frame; a dark bar makes the nav flash dark then light within ~40px of
   scrolling, and a gradient-only background reads as transparent entirely. */
.nd-bar {
  position: relative;
  background-color: var(--nd-ivory);
  border-bottom: 1px solid rgba(0, 108, 53, .09);
}
.nd-bar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--nd-duo);
}
.nd-bar-in {
  max-width: var(--container);
  margin-inline: auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13.5px;
  line-height: 1.4;
}
.nd-bar-brand {
  font-weight: 800;
  color: var(--nd-green);
  letter-spacing: -.01em;
}
.nd-bar-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(0, 108, 53, .35);
}
.nd-bar-offer { color: var(--ink-2); }
.nd-bar-offer b { color: var(--orange); font-weight: 800; }

.nd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--nd-hairline);
}
.nd-chip-code {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink);
  unicode-bidi: isolate;
}
.nd-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.nd-bar-link:hover { color: var(--orange); }
.nd-bar-arw {
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--nd-i-arw) center / contain no-repeat;
  mask: var(--nd-i-arw) center / contain no-repeat;
  transition: transform .2s ease;
}
.nd-bar-link:hover .nd-bar-arw { transform: translateX(2px); }

@media (max-width: 720px) {
  .nd-bar-in { padding: 8px 16px; gap: 5px 10px; font-size: 12.5px; }
  .nd-bar-dot, .nd-bar-link { display: none; }
}

/* ── 2. Hero — the campaign's masterpiece ────────────────────────────────────
   .hero::before and ::after are both already used (premium.css:15-33), so every
   decorative layer here is a real element. */
.nd-hero-fx {
  position: absolute;
  inset: -1px 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* Layered green atmosphere, sitting OVER Niqati's own orange/violet wash rather
   than replacing it — both identities read at once. This is the 50/50 layer. */
.nd-atmos {
  position: absolute;
  inset: -12% -12% auto -12%;
  height: 880px;
  background:
    radial-gradient(720px 500px at 6% 16%, rgba(0, 108, 53, .28), transparent 64%),
    radial-gradient(620px 430px at 74% 4%, rgba(20, 168, 90, .2), transparent 62%),
    radial-gradient(900px 560px at 44% 78%, rgba(0, 48, 26, .1), transparent 70%);
  animation: ndDrift 26s ease-in-out infinite alternate;
}
@keyframes ndDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.6%, 0) scale(1.06); }
}

/* The ghost "96" — architecture, not content. Bleeds off the inline-end edge;
   .hero already has overflow:hidden so the crop is clean. */
.nd-96 {
  position: absolute;
  top: clamp(14px, 3vw, 46px);
  inset-inline-end: 5.5%;
  font-family: var(--font-en);
  font-size: clamp(160px, 23vw, 372px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.05em;
  background-image: linear-gradient(166deg, rgba(0, 108, 53, .26) 0%, rgba(0, 108, 53, .1) 52%, rgba(255, 107, 26, .1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

/* Abstract palm geometry, angled from the lower corners. */
.nd-geo {
  position: absolute;
  background: var(--nd-duo);
  -webkit-mask: var(--nd-frond) center / contain no-repeat;
  mask: var(--nd-frond) center / contain no-repeat;
}
.nd-geo-a {
  width: 340px; height: 340px;
  inset-inline-start: -70px;
  bottom: -110px;
  opacity: .07;
  transform: rotate(24deg);
}
.nd-geo-b {
  width: 250px; height: 250px;
  inset-inline-end: 22%;
  bottom: -96px;
  opacity: .05;
  transform: rotate(-16deg);
}

/* Sadu — its single appearance on the entire site. */
.nd-sadu {
  position: absolute;
  top: -18px;
  inset-inline-end: 1.5%;
  width: 34px;
  height: 208px;
  opacity: .075;
  background: var(--nd-green);
  -webkit-mask: var(--nd-sadu) top center / 40px 40px repeat-y;
  mask: var(--nd-sadu) top center / 40px 40px repeat-y;
}

/* The visible limited-edition lockup. In normal flow at every breakpoint: the
   hero's top corner has only ~60px of clearance above the rotating card fan
   (style.css:439-510), so absolute placement would be fragile in both
   directions. */
.nd-lockup {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto 26px;
  padding-inline: 24px;
}
.nd-lockup-in {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
}
.nd-lockup-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nd-lockup-txt small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--nd-green);
}
.nd-lockup-txt strong {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.nd-lockup-96 {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  background-image: var(--nd-duo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  unicode-bidi: isolate;
}
/* Wipes in once. Resting state is the finished state, so reduced-motion users
   see the rule at full width instead of a permanent scaleX(0). */
.nd-lockup-rule {
  flex: 1;
  min-width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--nd-duo);
  transform-origin: left center;
  animation: ndWipe .45s cubic-bezier(.16, 1, .3, 1) both;
}
html[dir="rtl"] .nd-lockup-rule { transform-origin: right center; }
@keyframes ndWipe { from { transform: scaleX(0); opacity: 0; } }

@media (max-width: 980px) {
  .nd-sadu { inset-inline-end: 4%; opacity: .045; }
  .nd-96 { font-size: clamp(120px, 24vw, 220px); top: clamp(10px, 2.4vw, 28px); inset-inline-end: 3%; }
}
@media (max-width: 720px) {
  .nd-lockup { margin-bottom: 18px; padding-inline: 24px; }
  .nd-lockup-in { gap: 10px; }
  .nd-lockup-txt strong { font-size: 15px; gap: 7px; }
  .nd-lockup-96 { font-size: 26px; }
  .nd-mark-lg { width: 26px; height: 26px; }
  .nd-geo-b, .nd-sadu { display: none; }
}

/* ── 3. Offer — the second highlight ────────────────────────────────────────
   Solid background-color so main.js's nav probe reads the band correctly. A
   dark band is safe (unlike the bar): it is tall enough that the nav's dark
   state is the intended behaviour, exactly as #card-types already behaves. */
.nd-offer {
  --nd-fg: #fff;
  --nd-fg-mut: rgba(255, 255, 255, .62);
  --nd-cap-bg: rgba(255, 255, 255, .07);
  --nd-cap-fg: #fff;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--nd-fg);
}
.nd-offer--band {
  background-color: var(--nd-green-deep);
  padding: 76px 0;
}
.nd-offer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 400px at 8% 6%, rgba(20, 168, 90, .26), transparent 62%),
    radial-gradient(560px 340px at 92% 92%, rgba(255, 107, 26, .17), transparent 62%),
    radial-gradient(900px 520px at 55% 120%, rgba(0, 108, 53, .34), transparent 70%);
  animation: ndDrift 18s ease-in-out infinite alternate;
}
.nd-offer-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 44px;
  align-items: center;
}
.nd-offer h2, .nd-offer p { color: inherit; }

.nd-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--nd-fg);
}
.nd-offer--band .nd-kicker .nd-mark { background: #fff; }

.nd-offer-h {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 16px;
  margin: 0;
  font-size: inherit;
}
.nd-offer-lead {
  flex-basis: 100%;
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 600;
  color: var(--nd-fg);
  opacity: .78;
}
.nd-amt {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  unicode-bidi: isolate;
}
.nd-amt-n {
  font-family: var(--font-en);
  font-size: clamp(66px, 11vw, 132px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.045em;
  background-image: linear-gradient(100deg, #5FE0A0 0%, #BDF0D4 28%, #FFB273 72%, #FF7A2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nd-amt-c {
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 800;
  color: var(--orange);
}
/* The discount is deliberately Niqati orange, not green: the saving reads as
   Niqati's gift rather than as a second campaign badge. */
.nd-save {
  align-self: center;
  margin-bottom: 12px;
  padding: 6px 13px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: rotate(-3deg);
  box-shadow: 0 6px 18px rgba(255, 107, 26, .3);
}

.nd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 16px 0 26px;
  font-size: 15px;
  color: var(--nd-fg-mut);
}
.nd-strike {
  position: relative;
  color: var(--nd-fg);
  opacity: .72;
  unicode-bidi: isolate;
}
.nd-strike::after {
  content: "";
  position: absolute;
  inset-inline: -5px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-7deg);
}

.nd-capsule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 9px 9px 18px;
  border-radius: 999px;
  background: var(--nd-cap-bg);
  overflow: hidden;
}
/* Gradient hairline border via mask-composite — keeps --nd-duo on the edge
   without a wrapper element. */
.nd-capsule::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--nd-duo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.nd-capsule.is-lit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .26) 50%, transparent 66%);
  animation: ndSheen .6s ease-out;
}
@keyframes ndSheen {
  from { transform: translateX(-70%); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translateX(70%); opacity: 0; }
}
.nd-capsule-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--nd-fg-mut);
}
.nd-capsule-c {
  font-family: var(--font-en);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--nd-cap-fg);
  unicode-bidi: isolate;
}
.nd-offer--band .nd-copy {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.nd-offer--band .nd-copy:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }

.nd-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
/* .btn-primary stays untouched Niqati orange — only the ghost needs to survive
   on a dark ground. */
.nd-offer--band .nd-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: transparent;
}
.nd-offer--band .nd-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
}

.nd-note {
  position: relative;
  max-width: 46ch;
  margin: 22px 0 0;
  padding-inline-start: 24px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--nd-fg-mut);
}
.nd-note::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .75;
  background:
    linear-gradient(currentColor, currentColor) center 5.5px / 1.6px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center 9px / 1.6px 4.5px no-repeat;
}

.nd-offer-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.nd-art-96 {
  font-family: var(--font-en);
  font-size: clamp(180px, 17vw, 250px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
  user-select: none;
}
.nd-offer-art .nd-mark-xl {
  position: absolute;
  inset-inline-start: 1%;
  top: -14%;
  width: 78px;
  height: 78px;
  opacity: .45;
}

/* Compact variant — download.html, directly above the store buttons so the
   availability notice lands where the store choice is made. */
.nd-offer--compact {
  --nd-fg: var(--ink);
  --nd-fg-mut: var(--muted);
  --nd-cap-bg: rgba(0, 108, 53, .05);
  --nd-cap-fg: var(--ink);

  margin: 6px 0 30px;
  padding: 26px 0;
  border-radius: var(--radius);
  border: 1px solid var(--nd-hairline);
  background-color: var(--nd-ivory);
  text-align: start;
}
.nd-offer--compact .container { max-width: none; padding-inline: 26px; }
.nd-offer--compact .nd-offer-grid { grid-template-columns: 1fr; gap: 0; }
.nd-offer--compact .nd-offer-art { display: none; }
.nd-offer--compact .nd-offer-bg { opacity: .35; }
.nd-offer--compact .nd-kicker { color: var(--nd-green); }
.nd-offer--compact .nd-amt-n {
  background-image: var(--nd-duo);
  -webkit-background-clip: text;
  background-clip: text;
}
.nd-offer--compact .nd-amt-n { font-size: clamp(48px, 9vw, 76px); }
.nd-offer--compact .nd-capsule-c { font-size: 17px; }

@media (max-width: 900px) {
  .nd-offer-grid { grid-template-columns: 1fr; gap: 30px; }
  .nd-offer-art { display: none; }
  .nd-offer--band { padding: 56px 0; }
}
@media (max-width: 600px) {
  .nd-offer--band { padding: 46px 0; }
  .nd-capsule { width: 100%; justify-content: space-between; padding-inline-start: 14px; }
  .nd-capsule-l { display: none; }
  .nd-cta .btn { flex: 1 1 100%; }
  .nd-save { margin-bottom: 8px; }
}

/* ── 4. Pro plan line (pricing pages) ───────────────────────────────────────── */
.nd-pro-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--nd-hairline);
  background: rgba(0, 108, 53, .045);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--nd-green);
  text-align: start;
}
.nd-pro-line .nd-mark { margin-top: 2px; }

/* ── 5. Ambient layer (the other ~174 pages) ─────────────────────────────────
   Guarded by :has(.nd-bar) so these turn off with the bar region even if this
   stylesheet were somehow still linked — a second kill switch. Nothing here
   touches a button, link, or focus ring. */
body:has(.nd-bar) .page-hero {
  position: relative;
  background-image: radial-gradient(560px 320px at 100% 0%, rgba(0, 108, 53, .055), transparent 62%);
  border-bottom-color: transparent;
}
body:has(.nd-bar) .page-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--nd-duo);
  opacity: .45;
}
body:has(.nd-bar) .footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--nd-duo);
}
/* Restates the two existing orange radials (style.css:1102-1104) and adds one
   green for depth. background-image does not merge, so all three are listed. */
body:has(.nd-bar) .cta-band {
  background-image:
    radial-gradient(500px 220px at 20% 0%, rgba(255, 107, 26, .45), transparent 60%),
    radial-gradient(500px 220px at 80% 100%, rgba(255, 107, 26, .35), transparent 60%),
    radial-gradient(620px 300px at 50% 118%, rgba(0, 108, 53, .38), transparent 66%);
}

/* ── RTL ─────────────────────────────────────────────────────────────────── */
html[dir="rtl"] .nd-mark,
html[dir="rtl"] .nd-geo { transform: scaleX(-1); }
html[dir="rtl"] .nd-geo-a { transform: scaleX(-1) rotate(24deg); }
html[dir="rtl"] .nd-geo-b { transform: scaleX(-1) rotate(-16deg); }
html[dir="rtl"] .nd-strike::after { transform: rotate(7deg); }
html[dir="rtl"] .nd-save { transform: rotate(3deg); }
html[dir="rtl"] .nd-bar-link:hover .nd-bar-arw { transform: translateX(-2px) scaleX(-1); }
html[dir="rtl"] .nd-bar-arw { transform: scaleX(-1); }
html[dir="rtl"] .nd-capsule-l,
html[dir="rtl"] .nd-kicker,
html[dir="rtl"] .nd-lockup-txt small { letter-spacing: normal; }