/**
 * nintex-brand.css — Nintex Partner Portal brand + structure layer
 * Version: 1.39.0  |  Brand: Nintex Brand Guidelines, Nov 2024
 * 1.1.0 — hero width matched to body container; resource grid uses auto-fit
 * 1.2.0 — global chrome: branded top bar (deep purple) + main nav + dropdowns
 * 1.3.0 — background: 3rd wave line enabled + all three waves brand-coloured
 * 1.3.1 — fixes: 3rd wave 2px; tight-grid title size; nav dropdown hover gap; top-bar flyout text
 * 1.3.2 — title font-sizes set !important to beat legacy .content-page-container h1/h2/h3 rules
 * 1.3.3 — fix: stop whitening top-bar widget icons (bell/profile were white-on-white)
 * 1.3.4 — waves: opacity raised + matched 2.5px so all three are clearly visible
 * 1.4.0 — self-sufficient: folded in the font @import + full background animation
 *         + top-bar dropdown glue, so a migrated page only needs Font Awesome + this file
 * 1.4.1 — explicit font-family on .nbx text elements (platform sets it on h1/h2/h3)
 * 1.5.0 — responsive container width restored (1280 / 1400 / 1600 on larger screens)
 * 1.5.1 — widen the Impartner Bootstrap-3 page wrapper (1170px) so the content fills wide screens
 * 1.6.0 — new components: .nbx-note (info/warn), .nbx-btnrow, .nbx-stack (Download page)
 * 1.7.0 — journey family: .nbx-pillar, .nbx-product, .nbx-journey/.nbx-step, badges, .nbx-cta (Enablement Journeys)
 * 1.8.0 — sidebar: .nbx-linklist/.nbx-linkrow + .nbx-aside (Upgrade Center)
 * 1.9.0 — PX components: .nbx-video, .nbx-checklist, .nbx-feature, .nbx-vcard (Crossbeam)
 * 1.10.0 — prose: .nbx-prose + .nbx-panel--accent/--accent-purple (Performance Rebates)
 * 1.11.0 — prose dividers (hr), heading-icon colour, in-prose buttons (Internal FAQ)
 * 1.11.1 — fix: buttons inside .nbx-prose keep button styling (purple buttons were purple-on-purple)
 * 1.12.0 — prose headings keep authored case (no forced uppercase); .nbx-subcard for grouped items (Sales Plays)
 * 1.13.0 — STANDARDISATION PASS: one canonical icon system (.nbx-icon), de-duped icon tiles
 * 1.13.1 — fix: links inside .nbx-note inherit the note colour (were defaulting to blue)
 * 1.14.0 — platform components: branded KPI info-boxes (.info-box-section) + the
 *          Salesforce data grid (.sforcegrid: pill tabs, filters, table, export).
 *          These two sections are intentionally UNGATED (see note below).
 * 1.15.0 — platform forms (Section 21): branded labels/fields/choices on the
 *          deal-reg + CMS forms, scoped to .form-group so grid filters are
 *          untouched; orange submit CTA. Also UNGATED.
 * 1.15.1 — fix: content.css already styles the deal-reg form via an id-scoped
 *          block (off-brand blue); add matching id-specificity overrides so the
 *          purple labels/focus/icons/chevron actually win.
 * 1.15.2 — deal-reg form: collapse the empty <p>&nbsp;</p> field spacers + set a
 *          controlled field gap and tighter checkbox rows (form was too tall).
 * 1.15.3 — deal-reg form: info ⓘ icon inline with its label (was on its own
 *          line); Yes/No radio + label back on one line.
 * 1.16.0 — Section 21 rewritten as a GENERIC, self-sufficient platform-form
 *          component (full design ported out of content.css, rebranded, no
 *          legacy vars). Form pages can now drop partnerportal.css + content.css
 *          and run on Font Awesome + this file only.
 * 1.16.1 — fix: checkbox was overlapping its label (Bootstrap-3 sets the input
 *          position:absolute); force static + clear the label padding.
 * 1.16.2 — fix: the generic .form-group/.form-control rules were leaking into
 *          the master nav/top-bar (shared Bootstrap classes), shifting the
 *          logo + nav. Contained every form rule to [id^="GlobalBodyContent"]
 *          (page-content placeholders only) — chrome is never inside those.
 * 1.16.3 — widen the platform .aspx page wrapper too (deal-reg form was stuck at
 *          the 1170px Bootstrap default): trigger the container-widen on the
 *          body-content placeholder as well as .page-content-row.
 * 1.16.4 — nav: widen the header row (.navbar .navbar-full) to 1600 on CMS
 *          pages too, so the logo + menu sit on one row (was wrapping under the
 *          logo at Bootstrap's 1170). Verified live before deploy.
 * 1.17.0 — Section 22: homepage component branding (batch 1) — banner purple
 *          gradient + branded waves, section headings, Windows cards + video
 *          modal (ported out of the page's inline <style>), resource-card grid
 *          (rainbow → brand). Add nintex-brand last in the homepage loader.
 * 1.17.1 — Section 22 batch 2: PAM card, carousel tags/titles, featured event,
 *          LMS card → brand. Banner buttons are ID-pinned by the page bundle, so
 *          they're swapped to .nbx-btn in the WYSIWYG instead.
 * 1.18.0 — Section 23: homepage layout components (.nbx-headrow, .nbx-pamcard,
 *          .nbx-speakers, .nbx-statgrid/.nbx-stat, .nbx-lmshead, .nbx-vcard--media)
 *          so the rebuilt home cards carry ZERO inline style — all layout now
 *          lives here and is reusable on other pages.
 * 1.19.0 — folded the Font Awesome @import into this file (was a per-page
 *          WYSIWYG <link>). Migrated pages now need ONLY this stylesheet for
 *          both fonts and icons. Platform still serves FA5 Pro in the head;
 *          this import (FA5 Free) is the self-sufficient fallback.
 * 1.20.0 — home banner fixes: (1) lift .nbx-hero up under the nav to kill the
 *          ~111px empty purple band (the fixed-nav clearance was rendering as
 *          gradient); (2) raise banner wave layer above the opaque purple
 *          gradient so the white waves show again. Both scoped to the home
 *          banner (.main-banner-with-carousel) — no other page affected.
 * 1.20.1 — gap fix: -88px lifted the hero UNDER the nav (clipped the title +
 *          buttons). Reduced to -40px (28/16 at tablet/mobile) — trims the
 *          excess purple while keeping the card fully clear of the fixed nav.
 * 1.20.2 — gap fix, proper: negative margin fought the banner's overflow and
 *          still clipped. Replaced it by collapsing the legacy banner wrapper's
 *          reserved min-height/padding (.main-banner-with-carousel) so it fits
 *          the shorter .nbx-hero card — no negative margin, nothing clipped.
 * 1.20.3 — home banner: restore a small 20px top gap (was 0). PAM card: avatar
 *          + name on one row (floated 48px avatar) to cut height; card flexes to
 *          full column height so it caps at the carousel height beside it.
 * 1.20.4 — PAM avatar+name row fix: the name was display:flex (a BFC) which
 *          refuses to wrap a float and dropped below the avatar. Made it a plain
 *          block that flows around the floated avatar, vertically centred.
 * 1.21.0 — Section 24: Release Notes / "Latest Updates" slide-out panel folded
 *          in from the standalone release-notes-panel.css bundle. It hardcoded
 *          the dead #0066CC blue + #FF6B00 orange (pre-refresh) so it never
 *          caught the brand. Rebranded to tokens (purple-deep header, orange
 *          accent). UNGATED (JS injects onto document.body, outside .nbx) so it
 *          targets the panel classes directly, like Sections 19-20. Remove the
 *          panel CSS <link> from the homepage loader; JS keeps its behaviour.
 * 1.22.0 — release notes footer: branded "View all release notes" CTA button
 *          (.rnp-allnotes-btn) above the disclaimer, linking to the full
 *          help.nintex.com release notes index. Also rolls up the 1.20.x home
 *          banner gap + PAM card fixes under one version header.
 * 1.23.0 — release notes items branded: per-item product tile (purple-tinted)
 *          + colour-coded category chip (.release-chip[data-category]) for
 *          feature/improvement/fix/security/announcement, all brand-palette.
 * 1.23.1 — release item titles: smaller (13.5px) + sentence-case (drop platform
 *          uppercasing) so long titles read better in the narrow panel.
 * 1.24.0 — release notes expanded content branded: orange custom bullets,
 *          purple-deep highlight titles, and the "Read full release notes" link
 *          styled as a clear orange action (.rnp-readmore-link).
 * 1.25.0 — PAM card: avatar + name now sit on one row (via new
 *          .nbx-pamcard__person flex-row wrapper in the markup — floats failed
 *          because the card is a flex column). PAM column made equal-height to
 *          the carousel so the box bottoms align. NEEDS homepage-section1 re-paste.
 * 1.26.0 — PAM card decoupled from the carousel height (the equal-height rule
 *          made both boxes resize as the carousel rotated between slides of
 *          different height). PAM now sizes to its own content.
 *
 * WHAT THIS IS
 *   A reusable design-system layer for the partner portal. It carries the
 *   2024 purple-led brand and a small set of structural components (hero,
 *   sections, cards, region groups, feed, callout, buttons) that any page
 *   can adopt.
 *
 * HOW TO USE
 *   1. Link this file LAST, after partnerportal.css / content.css, so it wins.
 *   2. Opt a page in by wrapping its content in  <div class="nbx"> … </div>.
 *      Until a page opts in, this file is INERT — every rule is gated under
 *      .nbx, so merely linking it never disturbs pages not yet migrated.
 *
 * SAFE ROLLOUT
 *   Because everything is namespaced (.nbx + .nbx-* classes), there is no
 *   collision with the legacy class names. Migrate page-by-page with zero
 *   regression risk to pages still on the old markup.
 *
 * PLATFORM COMPONENTS (Sections 19–20) — the one exception
 *   The KPI info-boxes and the Salesforce data grid are rendered by the
 *   platform (Knockout templates we can't edit), so they can't be wrapped
 *   in .nbx. Those two sections therefore target the platform's own classes
 *   (.info-box-section, .sforcegrid) directly and apply wherever this file
 *   is LINKED — not just inside a .nbx wrapper. Scoping is tight (both sit
 *   under their own component root) so nothing else is touched, and the
 *   blast radius is only pages that already link this file.
 */

/* Brand typeface — folded in from partnerportal.css so this file is self-sufficient. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* Icon font — folded in so a migrated page needs ONLY this stylesheet (no
 * per-page Font Awesome <link> in the WYSIWYG). The portal platform already
 * serves Font Awesome 5 Pro in the head; this import is the self-sufficient
 * fallback (FA5 Free) so .nbx pages still render fas/far icons even if the
 * platform bundle is absent. Pro-only glyphs still require the platform bundle.
 * @import must precede all rule sets, so it sits with the font import above. */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* ============================================================
   1. TOKENS  — the single source of truth for colour & rhythm
   ============================================================ */
.nbx {
  /* Brand palette (straight from the guidelines) */
  --nbx-purple:        #8439A6;   /* Primary brand */
  --nbx-purple-deep:   #3D0456;   /* Deep purple — headings, hero base */
  --nbx-orange:        #FF6D00;   /* Nintex Orange — CTAs, accents */
  --nbx-orange-deep:   #E55F00;   /* Orange hover/active */
  --nbx-pink:          #ED2891;   /* Pink — sparing accent */
  --nbx-navy:          #030A47;
  --nbx-blue:          #2A348A;   /* Nintex Blue (NOT the old #0066CC) */
  --nbx-ivory:         #FFF9F4;
  --nbx-pale-purple:   #F1D3FF;
  --nbx-pale-blue:     #D4D7FC;

  /* Semantic roles */
  --nbx-heading:   var(--nbx-purple-deep);
  --nbx-link:      var(--nbx-purple);
  --nbx-link-hover:var(--nbx-orange);
  --nbx-cta:       var(--nbx-orange);
  --nbx-cta-hover: var(--nbx-orange-deep);
  --nbx-ink:       #2b2b33;        /* Body text */
  --nbx-muted:     #6b7280;        /* Secondary text */
  --nbx-surface:   rgba(255,255,255,.86); /* Glass card over orbs */
  --nbx-border:    rgba(61,4,86,.12);

  /* Correct the LEGACY variables within this scope too, so any old
     component that sneaks onto an .nbx page still renders on-brand. */
  --primary-color:   #FF6D00;
  --primary-hover:   #E55F00;
  --secondary-color: #8439A6;
  --secondary-hover: #6E2F8C;

  /* Rhythm & surfaces */
  --nbx-radius:    14px;
  --nbx-radius-sm: 10px;
  --nbx-gap:       24px;
  --nbx-shadow:    0 6px 20px rgba(61,4,86,.08);
  --nbx-shadow-lg: 0 14px 36px rgba(61,4,86,.16);
  --nbx-blur:      10px;

  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--nbx-ink);
}

/* Force the brand typeface onto text elements. The Impartner platform sets
   font-family directly on h1/h2/h3 etc., which beats .nbx inheritance, so we
   set it explicitly. <i> is excluded so Font Awesome icons keep their glyphs. */
.nbx h1, .nbx h2, .nbx h3, .nbx h4, .nbx h5, .nbx h6,
.nbx p, .nbx a, .nbx span, .nbx li, .nbx button, .nbx input, .nbx label {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
}

/* ============================================================
   2. LAYOUT  — centred container + section rhythm
   ============================================================ */
.nbx-container {
  width:95%;
  max-width:1280px;
  margin:0 auto;
  padding:0 10px;
  box-sizing:border-box;
  position:relative;
  z-index:4; /* sit above the animated orb background */
}

.nbx-section { margin-bottom:32px; }

/* Section header: deep-purple title with an orange accent rule */
.nbx-section__head { margin:0 0 18px; }
.nbx-section__title {
  font-size:22px !important;
  font-weight:700;
  line-height:1.2;
  color:var(--nbx-heading);
  margin:0;
  padding-bottom:10px;
  display:inline-block;
  border-bottom:3px solid var(--nbx-orange);
}
.nbx-section__sub {
  margin:8px 0 0;
  color:var(--nbx-muted);
  font-size:15px;
}

/* ============================================================
   3. HERO  — full-bleed banner, purple-led with orange accent
   ============================================================ */
.nbx-hero {
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,var(--nbx-purple-deep) 0%,var(--nbx-purple) 70%,#9b46c0 100%);
  border-bottom:4px solid var(--nbx-orange);
  color:#fff;
  border-radius:var(--nbx-radius);
  width:95%;                 /* match .nbx-container so the hero card and the body share one width */
  max-width:1280px;
  padding:38px 32px 34px;
  margin:8px auto 14px;      /* tighter gap to the content row below (was 28px) */
}
.nbx-hero__inner {
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  position:relative;
  z-index:4;
}
.nbx-hero__copy { flex:1 1 420px; }
.nbx-hero__eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:600;
  color:var(--nbx-pale-purple);
  margin:0 0 8px;
}
.nbx-hero__title {
  font-size:clamp(28px,3.4vw,40px) !important;
  font-weight:700;
  line-height:1.1;
  margin:0 0 10px;
  color:#fff;
}
.nbx-hero__lead {
  font-size:17px;
  line-height:1.5;
  margin:0;
  color:rgba(255,255,255,.92);
  max-width:46ch;
}
.nbx-hero__actions {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
}
.nbx-hero__buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.nbx-hero__links { display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.nbx-hero__link {
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.nbx-hero__link i { color:var(--nbx-orange); }
.nbx-hero__link:hover { color:#fff; text-decoration:none; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.nbx-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1;
  padding:11px 20px;
  border-radius:var(--nbx-radius-sm);
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nbx-btn:hover { transform:translateY(-2px); text-decoration:none; }

/* Primary = Nintex Orange (the CTA colour) */
.nbx-btn--primary { background:var(--nbx-cta); color:#fff; border-color:var(--nbx-cta); }
.nbx-btn--primary:hover { background:var(--nbx-cta-hover); border-color:var(--nbx-cta-hover); color:#fff; }

/* Secondary = solid purple */
.nbx-btn--secondary { background:var(--nbx-purple); color:#fff; border-color:var(--nbx-purple); }
.nbx-btn--secondary:hover { background:var(--nbx-secondary-hover,#6E2F8C); color:#fff; }

/* Ghost = for use on the dark hero (white outline → fills white) */
.nbx-btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.85); }
.nbx-btn--ghost:hover { background:#fff; color:var(--nbx-purple-deep); border-color:#fff; }

/* Outline = purple outline on light surfaces */
.nbx-btn--outline { background:transparent; color:var(--nbx-purple); border-color:var(--nbx-purple); }
.nbx-btn--outline:hover { background:var(--nbx-purple); color:#fff; }

.nbx-btn--sm { font-size:13px; padding:8px 14px; }

/* ============================================================
   5. PANEL  — glass surface that lets the orb background show through
   ============================================================ */
.nbx-panel {
  background:var(--nbx-surface);
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--nbx-radius);
  box-shadow:var(--nbx-shadow);
  backdrop-filter:blur(var(--nbx-blur));
  -webkit-backdrop-filter:blur(var(--nbx-blur));
  padding:22px;
  position:relative;
  z-index:5;
}

/* ============================================================
   6. CARD GRID  — equal-height, responsive, consistent cards
   ============================================================ */
.nbx-grid {
  display:grid;
  /* auto-fit lets a small number of cards stretch to fill the row (no squashed,
     left-clumped cards). Region tiles use --tight (auto-fill) to keep a fixed size. */
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--nbx-gap);
}
.nbx-card {
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--nbx-surface);
  border:1px solid var(--nbx-border);
  border-radius:var(--nbx-radius);
  box-shadow:var(--nbx-shadow);
  backdrop-filter:blur(var(--nbx-blur));
  -webkit-backdrop-filter:blur(var(--nbx-blur));
  padding:18px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nbx-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--nbx-shadow-lg);
  border-color:rgba(132,57,166,.25);
}
/* Icon tile — defined once in the canonical "ICON SYSTEM" section below
   (.nbx-card__icon is the square-tile application; colours via --orange / --pink). */
.nbx-card__body { flex:1; min-width:0; }
.nbx-card__title { font-size:15px !important; font-weight:700; margin:0 0 4px; line-height:1.25; }
.nbx-card__title a { color:var(--nbx-link); text-decoration:none; }
.nbx-card__title a:hover { color:var(--nbx-link-hover); text-decoration:underline; }
.nbx-card:hover .nbx-card__title a { color:var(--nbx-link-hover); }
.nbx-card__desc { font-size:13px; color:var(--nbx-muted); margin:0; line-height:1.4; }

/* ============================================================
   7. REGION GROUPS  — labelled clusters of price-book tiles
   ============================================================ */
.nbx-group { margin-bottom:22px; }
.nbx-group:last-child { margin-bottom:0; }
.nbx-group__label {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--nbx-purple);
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.nbx-group__label::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(to right,rgba(132,57,166,.35),transparent);
}
.nbx-grid--tight { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.nbx-grid--tight .nbx-card { padding:14px; align-items:center; }
.nbx-grid--tight .nbx-card__icon { width:40px; height:40px; font-size:16px; }
.nbx-grid--tight .nbx-card__title { font-size:13px !important; line-height:1.25; }  /* step down when 3-across */

/* ============================================================
   8. PRICING FEED  — dated, scannable updates with a timeline rail
   ============================================================ */
.nbx-feed__date {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--nbx-purple);
  background:var(--nbx-pale-purple);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:18px;
}
.nbx-feed { position:relative; padding-left:22px; }
.nbx-feed::before {
  content:"";
  position:absolute;
  left:6px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(to bottom,var(--nbx-orange),var(--nbx-purple));
  opacity:.5;
}
.nbx-feed__item { position:relative; margin-bottom:18px; }
.nbx-feed__item:last-child { margin-bottom:0; }
.nbx-feed__item::before {
  content:"";
  position:absolute;
  left:-22px; top:5px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--nbx-orange);
  box-shadow:0 0 0 3px rgba(255,109,0,.18);
}
.nbx-feed__title {
  font-size:15px !important;
  font-weight:700;
  color:var(--nbx-heading);
  margin:0 0 6px;
  line-height:1.25;
}
.nbx-feed__item ul { margin:0; padding-left:18px; }
.nbx-feed__item li { font-size:14px; line-height:1.5; color:var(--nbx-ink); margin-bottom:4px; }

/* ============================================================
   9. CALLOUT  — "remember"-style note, orange left accent
   ============================================================ */
.nbx-callout {
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--nbx-ivory);
  border:1px solid var(--nbx-border);
  border-left:4px solid var(--nbx-orange);
  border-radius:var(--nbx-radius-sm);
  padding:18px 22px;
  box-shadow:var(--nbx-shadow);
}
.nbx-callout__icon { font-size:22px; color:var(--nbx-orange); flex:0 0 auto; }
.nbx-callout__title { font-weight:700; color:var(--nbx-heading); margin-right:6px; }
.nbx-callout__text { color:var(--nbx-ink); font-size:15px; line-height:1.5; }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width:991px){
  .nbx-hero__inner { flex-direction:column; align-items:flex-start; }
  .nbx-hero__actions { align-items:flex-start; width:100%; }
  .nbx-hero__buttons, .nbx-hero__links { justify-content:flex-start; }
}
@media (max-width:767px){
  .nbx-grid { grid-template-columns:1fr; }
  .nbx-hero__buttons { width:100%; }
  .nbx-hero__buttons .nbx-btn { flex:1; justify-content:center; }
}
/* Wider container on large desktops — restores the portal's prior standard
   (1280 → 1400 → 1600). This portal isn't mobile-first, so use the screen. */
@media (min-width:1440px){ .nbx-container, .nbx-hero { max-width:1400px; } }
@media (min-width:1920px){ .nbx-container, .nbx-hero { max-width:1600px; } }
/* The home L-layout lives in a Bootstrap .pam-carousel-container, which fell
   back to Bootstrap's narrow 1170px default once partnerportal/content.css were
   removed (they used to set the portal's wider container). Match it to the hero
   width (95% → 1280/1400/1600) so the content spans the same width as the
   banner above it, not a narrow centred column. (1.35.0) */
.pam-carousel-container { width:95% !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; }
@media (min-width:1440px){ .pam-carousel-container { max-width:1400px !important; } }
@media (min-width:1920px){ .pam-carousel-container { max-width:1600px !important; } }
/* The real ceiling is the Impartner page wrapper — a Bootstrap-3 .container
   capped at 1170px. Widen that parent to match (only CSS :has can target it).
   Scoped to the content wrapper so the nav is untouched: CMS pages expose
   > .page-content-row; platform .aspx pages (deal-reg form etc.) instead hold
   the ASP.NET body-content placeholder [id^="GlobalBodyContent_InternalBodyContent_BodyContent"].
   The nav sits in its own .container that contains neither, so it's never widened. */
body .container:has(> .page-content-row),
body .container:has([id^="GlobalBodyContent_InternalBodyContent_BodyContent"]),
body .container:has(.nbx) { width:95% !important; max-width:1280px !important; }   /* any brand page (1.37.0) */
@media (min-width:1440px){
  body .container:has(> .page-content-row),
  body .container:has([id^="GlobalBodyContent_InternalBodyContent_BodyContent"]),
  body .container:has(.nbx) { max-width:1400px !important; }
}
@media (min-width:1920px){
  body .container:has(> .page-content-row),
  body .container:has([id^="GlobalBodyContent_InternalBodyContent_BodyContent"]),
  body .container:has(.nbx) { max-width:1600px !important; }
}


/* ============================================================
   11. GLOBAL CHROME — top bar + main nav   (NOT gated under .nbx)
   ------------------------------------------------------------
   The portal nav and top bar live OUTSIDE the page content block, so unlike
   everything above, these rules are intentionally NOT scoped to .nbx. They
   only take effect on pages that link this stylesheet, so the chrome brands
   itself page-by-page as pages are migrated. Everything is scoped to
   .top-bar / .navbar so it cannot leak into page content, and the `body`
   prefix gives the specificity needed to beat the legacy topbar.css rule.
   Literal hexes are used here because the .nbx tokens don't reach the nav.
   ============================================================ */

/* --- Top utility bar (search / notifications / profile) --- */
body .top-bar { background:#3D0456 !important; }
/* Widget icons live in white circular buttons, so they must NOT be whitened
   (that turned the bell + profile icons white-on-white). Search magnifier sits
   on a dark button → white; bell / profile sit on white circles → brand purple. */
body .top-bar .top-search-bar i { color:#fff !important; }
body .top-bar .widget-item:not(.top-search-bar) i,
body .top-bar .widget-item:not(.top-search-bar) .caret { color:#8439A6 !important; }
body .top-bar input,
body .top-bar input[type="search"] {
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  color:#fff !important;
  border-radius:8px !important;
}
body .top-bar input::placeholder { color:rgba(255,255,255,.75) !important; }
/* Flyouts opened from the top bar (notifications, profile) have light backgrounds,
   so they must NOT inherit the bar's white text. Reset their text to dark. */
body .top-bar .dropdown-menu,
body .top-bar .widget-dropdown { color:#2b2b33 !important; }
body .top-bar .dropdown-menu a,
body .top-bar .dropdown-menu li,
body .top-bar .dropdown-menu p,
body .top-bar .dropdown-menu span,
body .top-bar .dropdown-menu h1, body .top-bar .dropdown-menu h2,
body .top-bar .dropdown-menu h3, body .top-bar .dropdown-menu h4,
body .top-bar .widget-dropdown a,
body .top-bar .widget-dropdown li { color:#2b2b33 !important; }
body .top-bar .dropdown-menu a:hover,
body .top-bar .widget-dropdown a:hover { color:#8439A6 !important; }
body .top-bar .dropdown-menu .btn,
body .top-bar .dropdown-menu .btn * { color:#fff !important; }  /* keep button labels (e.g. View All) white */
/* Dropdown visibility glue — folded from partnerportal.css so the top-bar
   flyouts still stack/position correctly once that file is removed. */
body .top-bar { position:relative !important; z-index:1100 !important; }
body .top-bar .dropdown-menu { position:absolute !important; opacity:1 !important; z-index:1200 !important; }
body .top-bar .dropdown.open, body .top-bar .dropdown.show { z-index:1200 !important; }

/* --- Main navigation bar --- */
body .navbar.navbar-default {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  border:0 !important;
  border-bottom:1px solid rgba(61,4,86,.08) !important;
  box-shadow:0 2px 12px rgba(61,4,86,.06) !important;
}
/* Header row width: the homepage forces this to 1600 so the pull-left logo +
   the main nav share ONE row; CMS content pages left it at Bootstrap's 1170,
   which wrapped the nav under the logo. Match the homepage. Nav-scoped
   (.navbar .navbar-full) so it can never reach page content. */
body .navbar .navbar-full { width:95% !important; max-width:1600px !important; }
body .navbar .navbar-nav > li > a,
body .navbar .navbar-nav > li > button {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  color:#3D0456 !important;
  font-weight:600 !important;
  font-size:15px !important;
  background:transparent !important;
  transition:color .2s ease, box-shadow .2s ease;
}
/* hover = orange underline accent */
body .navbar .navbar-nav > li > a:hover,
body .navbar .navbar-nav > li > a:focus,
body .navbar .navbar-nav > li > button:hover {
  color:#FF6D00 !important;
  box-shadow:inset 0 -3px 0 #FF6D00 !important;
}
/* open / active = purple underline */
body .navbar .navbar-nav > li.open > a,
body .navbar .navbar-nav > li.active > a,
body .navbar .navbar-nav > li.open > button {
  color:#8439A6 !important;
  box-shadow:inset 0 -3px 0 #8439A6 !important;
}

/* --- Dropdown menus --- */
body .navbar .dropdown-menu {
  border:0 !important;
  border-radius:12px !important;
  box-shadow:0 14px 36px rgba(61,4,86,.16) !important;
  padding:8px !important;
  margin-top:0 !important;   /* no gap — a gap drops the :hover before the cursor reaches the menu */
}
body .navbar .dropdown-menu > li > a {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  color:#2b2b33 !important;
  border-radius:8px !important;
  padding:8px 14px !important;
}
body .navbar .dropdown-menu > li > a:hover,
body .navbar .dropdown-menu > li > a:focus {
  background:#F1D3FF !important;
  color:#3D0456 !important;
}


/* ============================================================
   12. BACKGROUND ANIMATION — folded in from background.css + branded
   ------------------------------------------------------------
   Self-contained so a migrated page no longer needs background.css. Ungated
   (the animation sits outside .nbx). Orbs and all three waves use the brand
   palette inline (no dependency on legacy CSS variables). Requires three
   <svg> waves inside .nintex-lines-animation.
   ============================================================ */
.page-background-animation { position:fixed; top:110px; left:0; width:100%; height:calc(100% - 110px); overflow:hidden; z-index:0 !important; pointer-events:none !important; }

/* ---- GENERAL SAFEGUARD: keep ALL page content above the background ----
   The orb layer is z-index:0 and the waves z-index:1 (both position:fixed). Any
   page content sitting at the base layer (position:static / z-index:auto) gets
   painted OVER by the waves — e.g. the DCA grid header, and any other platform-
   injected element outside .nbx. Lift the platform's main content wrapper to
   z-index:2 so everything inside it renders above the background, in ONE place
   instead of per-component. z-index:2 is safely below all chrome — nav (1030),
   dropdowns (1200), release-notes panel (9999) — so nothing on top is affected.
   .nbx-container already self-lifts to z-index:4; this covers non-.nbx content. */
body section.page-content,
body .page-content { position:relative !important; z-index:2 !important; }
/* NOTE: deliberately NOT adding a blanket `.nbx { z-index }` — .nbx pages
   already layer correctly (.nbx-container self-lifts to z-index:4, the home
   banner wrapper is z-index:1, orbs show through the gutters). Lifting the
   shared .page-content wrapper is enough to carry non-.nbx platform content
   (grids, tables, injected widgets) above the waves without disturbing that. */
/* The legacy background.css loads AFTER this file (via the in-page loader) and
   sets .page-background-animation { z-index:-1 !important }, which on an
   !important tie wins by load order — burying the orbs behind the white body.
   Beat it with HIGHER SPECIFICITY (body-scoped) so load order is irrelevant.
   Orbs sit at z-index:0 (above page bg, below content); content wrappers are
   transparent so orbs peek through — same as the other migrated pages. (1.31.1) */
body .page-background-animation,
.flex-wrapper .page-background-animation,
html body .page-background-animation { z-index:0 !important; }
/* The white html/body root canvas was painting OVER the orbs (everything between
   is transparent, but the root white wins). Make the root transparent ONLY on
   pages that actually have the orb background present — scoped via :has() so no
   other page is affected. The orb block + a soft ivory base then form the page
   background, matching Pricing Center. (1.31.2) */
html:has(.page-background-animation),
html:has(.page-background-animation) body {
  background:transparent !important;
}
/* Plain white base behind the orbs — no page-wide tint (the other pages sit on
   white with only the orbs/waves floating). (1.32.1) */
html:has(.page-background-animation) body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#ffffff;
}
.flex-wrapper, section.page-content { background:transparent !important; }
/* The Featured section had an opaque grey (#f8f9fa from legacy CSS) covering the
   orbs — make it transparent so the soft background shows behind it too. */
.events-showcase-section { background:transparent !important; }
/* Ensure the banner wrapper (which now spans the whole L-layout) sits ABOVE the
   z-index:0 orb layer so orbs render behind the transparent content, and the
   wrapper itself stays transparent so the orbs show through. */
.main-banner-with-carousel { position:relative; z-index:1; background:transparent !important; }
.nintex-background-animation { position:fixed; left:0; top:0; width:100vw; height:100vh; overflow:visible !important; z-index:1 !important; opacity:1 !important; pointer-events:none !important; }
.page-background-animation .nintex-background-animation { position:fixed; top:0; left:0; width:100vw; height:100vh; }

/* Orbs */
.nintex-orbs-animation { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1 !important; display:block !important; opacity:1 !important; pointer-events:none !important; }
.nintex-orbs-animation__orb { position:absolute; border-radius:50% !important; animation:floating 7s ease 0s infinite; pointer-events:none !important; transform-origin:center center;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--orb) 40%, transparent) 0%, color-mix(in srgb, var(--orb) 25%, transparent) 30%, color-mix(in srgb, var(--orb) 15%, transparent) 70%, transparent 100%); }
.nintex-orbs-animation__orb.orb-purple { --orb:#8439A6; }
.nintex-orbs-animation__orb.orb-orange { --orb:#FF6D00; }
.nintex-orbs-animation__orb.orb-pink   { --orb:#ED2891; }
.page-background-animation .nintex-orbs-animation__orb.orb-purple { width:500px; height:500px; left:5%;  top:10%; opacity:.35; }
.page-background-animation .nintex-orbs-animation__orb.orb-orange { width:450px; height:450px; left:50%; top:5%;  opacity:.30; }
.page-background-animation .nintex-orbs-animation__orb.orb-pink   { width:400px; height:400px; left:70%; top:60%; opacity:.30; }

/* Waves */
.nintex-lines-animation { position:absolute; width:100%; height:100%; top:0; left:0; z-index:1 !important; overflow:visible; pointer-events:none !important; }
.nintex-lines-animation svg { position:absolute; left:0; width:400%; opacity:1; animation:nintex-wave linear 28s infinite; pointer-events:none !important; }
.page-background-animation .nintex-lines-animation { position:fixed; bottom:0; left:0; width:100vw; height:50vh; }
/* Beat legacy's wave-wrapper sizing (higher specificity) so the waves sweep the
   lower half of the viewport like the other pages, not a clipped top band. */
body .page-background-animation .nintex-lines-animation { position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; width:100vw !important; height:50vh !important; opacity:1 !important; }
.page-background-animation .nintex-lines-animation svg:nth-child(1) { top:auto; bottom:15%; animation:nintex-wave linear 28s infinite; }
.page-background-animation .nintex-lines-animation svg:nth-child(2) { top:auto; bottom:5%;  animation:nintex-wave-reverse linear 38s infinite; }
.page-background-animation .nintex-lines-animation svg:nth-child(3) { display:block; top:auto; bottom:20%; animation:nintex-wave linear 48s infinite; }
.nintex-lines-animation svg:nth-child(1) path { stroke:rgba(132,57,166,.50) !important; stroke-width:2.5px !important; }  /* purple */
.nintex-lines-animation svg:nth-child(2) path { stroke:rgba(255,109,0,.45)  !important; stroke-width:2.5px !important; }  /* orange */
.nintex-lines-animation svg:nth-child(3) path { stroke:rgba(237,40,145,.55) !important; stroke-width:2.5px !important; }  /* pink   */
/* The legacy background.css loads after this file and recolours wave 1 to the
   dead #0066CC blue (its !important wins by load order). Beat it with HIGHER
   SPECIFICITY (body-scoped) so the brand purple/orange/pink win regardless of
   load order — same pattern as the orb z-index fix. (1.32.0) */
body .page-background-animation .nintex-lines-animation svg:nth-child(1) path,
html body .nintex-lines-animation svg:nth-child(1) path { stroke:rgba(132,57,166,.55) !important; stroke-width:2.5px !important; }  /* purple */
body .page-background-animation .nintex-lines-animation svg:nth-child(2) path,
html body .nintex-lines-animation svg:nth-child(2) path { stroke:rgba(255,109,0,.50)  !important; stroke-width:2.5px !important; }  /* orange */
body .page-background-animation .nintex-lines-animation svg:nth-child(3) path,
html body .nintex-lines-animation svg:nth-child(3) path { stroke:rgba(237,40,145,.55) !important; stroke-width:2.5px !important; }  /* pink   */

@keyframes floating { 0%{transform:translateY(0);} 50%{transform:translateY(10%);} 100%{transform:translateY(0);} }
@keyframes nintex-wave { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes nintex-wave-reverse { 0%{transform:translateX(-50%);} 100%{transform:translateX(0);} }

@media (max-width:768px){
  .page-background-animation .nintex-orbs-animation__orb.orb-purple { width:300px; height:300px; left:-5%; top:5%; }
  .page-background-animation .nintex-orbs-animation__orb.orb-orange { width:250px; height:250px; left:60%; top:0; }
  .page-background-animation .nintex-orbs-animation__orb.orb-pink   { width:220px; height:220px; left:50%; top:70%; }
}
.nintex-background-animation, .nintex-orbs-animation, .nintex-orbs-animation__orb,
.nintex-lines-animation, .nintex-lines-animation svg, .nintex-lines-animation svg path { pointer-events:none !important; }


/* ============================================================
   13. NOTE / BUTTON-ROW / STACK — added for the Download page
   ============================================================ */

/* Inline note / alert badge inside a card */
.nbx-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.4;
  padding:8px 12px;
  border-radius:var(--nbx-radius-sm);
  margin:10px 0;
}
.nbx-note i { flex:0 0 auto; margin-top:1px; }
.nbx-note--info { background:rgba(132,57,166,.08); color:#3D0456; border:1px solid rgba(132,57,166,.20); }
.nbx-note--info i { color:var(--nbx-purple); }
.nbx-note--warn { background:rgba(255,109,0,.10); color:#8a3d00; border:1px solid rgba(255,109,0,.28); }
.nbx-note--warn i { color:var(--nbx-orange); }
.nbx-note a { color:inherit; font-weight:700; text-decoration:underline; }
.nbx-note a:hover { color:inherit; opacity:.8; }

/* Wrapping row of small buttons (release notes, install guides, downloads) */
.nbx-btnrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nbx-btnrow + .nbx-btnrow { margin-top:8px; }

/* Vertical list of cards within a section (download items stack, not a grid) */
.nbx-stack { display:flex; flex-direction:column; gap:14px; }


/* ============================================================
   14. JOURNEY / TIMELINE — Enablement Journeys (pillars + steps)
   Off-brand journey.css colours replaced with the brand palette.
   ============================================================ */

/* Pillar section (white card with a coloured header) */
.nbx-pillar { background:#fff; border-radius:var(--nbx-radius); overflow:hidden; box-shadow:var(--nbx-shadow); margin-bottom:24px; scroll-margin-top:90px; }
.nbx-pillar__head { display:flex; align-items:center; gap:12px; padding:14px 24px; color:#fff; background:linear-gradient(135deg,var(--nbx-purple-deep),var(--nbx-purple)); }
.nbx-pillar__head > i { font-size:20px; opacity:.9; }
.nbx-pillar__headtext { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.nbx-pillar__head h2 { margin:0 !important; font-size:18px !important; font-weight:700 !important; color:#fff !important; text-transform:uppercase; letter-spacing:.5px; }
.nbx-pillar__head p { margin:0 !important; font-size:13px !important; opacity:.8; color:#fff !important; }
/* pillar colour themes */
.nbx-pillar__head--gtm        { background:linear-gradient(135deg,#E55F00,#FF6D00); }
.nbx-pillar__head--ce         { background:linear-gradient(135deg,#3D0456,#8439A6); }
.nbx-pillar__head--salesforce { background:linear-gradient(135deg,#030A47,#2A348A); }
.nbx-pillar__head--k2         { background:linear-gradient(135deg,#BE0075,#ED2891); }

/* Product subsection inside a pillar */
.nbx-product { padding:20px 24px; border-bottom:1px solid #e9ecef; }
.nbx-product:last-child { border-bottom:none; }
.nbx-product__title { display:flex; align-items:center; gap:8px; font-size:17px !important; font-weight:700 !important; color:var(--nbx-heading) !important; margin:0 0 14px !important; }
.nbx-product__title i { color:var(--nbx-purple); font-size:16px; }

/* Timeline = responsive grid of step cards */
.nbx-journey { display:flex; flex-wrap:wrap; gap:18px; padding:18px; background:var(--nbx-ivory); border-radius:var(--nbx-radius-sm); }
.nbx-step { flex:1 1 210px; max-width:250px; min-width:190px; background:#fff; border:1px solid #e9ecef; border-radius:12px; padding:16px 16px 18px; position:relative; box-shadow:0 2px 8px rgba(61,4,86,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.nbx-step:hover { transform:translateY(-4px); box-shadow:var(--nbx-shadow-lg); border-color:rgba(132,57,166,.25); }

/* Step number / icon circle (coloured by type) */
.nbx-step__num { font-weight:700; }  /* circle/size from the canonical ICON SYSTEM; gradient via --path/--cert/--final/--gtm */
.nbx-step__num--path  { background:linear-gradient(135deg,#3D0456,#8439A6); }
.nbx-step__num--cert  { background:linear-gradient(135deg,#BE0075,#ED2891); }
.nbx-step__num--final { background:linear-gradient(135deg,#E55F00,#FF6D00); }
.nbx-step__num--gtm   { background:linear-gradient(135deg,#E55F00,#FF6D00); }

/* Type badge (top-right) */
.nbx-step__badge { position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.nbx-step__badge i { font-size:9px; }
.nbx-step__badge--path { background:rgba(132,57,166,.12); color:#8439A6; }
.nbx-step__badge--cert { background:rgba(237,40,145,.14); color:#C20F73; }
.nbx-step__badge--gtm  { background:rgba(255,109,0,.16); color:#B34B00; }

/* NPCU points badge (floats bottom-centre) */
.nbx-step__npcu { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:12px; font-size:10px; font-weight:700; background:var(--nbx-purple-deep); color:#fff; box-shadow:0 2px 6px rgba(61,4,86,.3); white-space:nowrap; z-index:2; }
.nbx-step__npcu i { color:#FFB800; }

/* Step title + description */
.nbx-step__title { font-size:15px !important; font-weight:600 !important; margin:12px 0 6px !important; line-height:1.35; color:var(--nbx-ink) !important; }
.nbx-step__title a { color:var(--nbx-ink) !important; text-decoration:none; }
.nbx-step__title a:hover { color:var(--nbx-purple) !important; }
.nbx-step__title i.fa-external-link-alt { font-size:11px; opacity:.5; margin-left:4px; }
.nbx-step__title a:hover i.fa-external-link-alt { opacity:1; }
.nbx-step__desc { font-size:13px !important; color:var(--nbx-muted) !important; margin:0 !important; line-height:1.45; }

/* NEW badge */
.nbx-new { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; letter-spacing:.5px; background:var(--nbx-orange); color:#fff; vertical-align:middle; margin-left:6px; }

/* End-of-page CTA */
.nbx-cta { background:linear-gradient(135deg,var(--nbx-purple-deep),var(--nbx-purple)); border-radius:var(--nbx-radius); padding:40px; text-align:center; color:#fff; margin-top:16px; }
.nbx-cta h3 { margin:0 0 10px !important; font-size:26px !important; font-weight:700 !important; color:#fff !important; }
.nbx-cta p { margin:0 0 22px !important; font-size:17px !important; opacity:.92; color:#fff !important; }
.nbx-cta .nbx-btn { font-size:16px; padding:13px 26px; }


/* ============================================================
   15. SIDEBAR — quick-link list + aside card (Upgrade Center)
   ============================================================ */

/* Vertical list of quick links (icon + label + arrow) */
.nbx-linklist { display:flex; flex-direction:column; gap:8px; }
.nbx-linkrow {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:rgba(132,57,166,.06);
  color:var(--nbx-link); font-weight:600; font-size:14px; text-decoration:none;
  border-left:3px solid transparent; transition:all .2s ease;
}
.nbx-linkrow:hover { background:rgba(132,57,166,.11); border-left-color:var(--nbx-orange); color:var(--nbx-link-hover); transform:translateX(3px); text-decoration:none; }
.nbx-linkrow > i:first-child { color:var(--nbx-purple); width:18px; text-align:center; flex:0 0 auto; }
.nbx-linkrow:hover > i:first-child { color:var(--nbx-orange); }
.nbx-linkrow__arrow { margin-left:auto; font-weight:700; opacity:.55; }

/* Light aside card for a sidebar note with a list */
.nbx-aside { background:var(--nbx-ivory); border:1px solid var(--nbx-border); border-left:4px solid var(--nbx-orange); border-radius:var(--nbx-radius-sm); padding:16px 18px; margin-top:16px; }
.nbx-aside__label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--nbx-muted); margin:0 0 4px; }
.nbx-aside__title { font-size:15px !important; font-weight:700 !important; color:var(--nbx-heading) !important; margin:0 0 8px !important; }
.nbx-aside p { font-size:13px !important; color:var(--nbx-ink) !important; line-height:1.5; margin:0 0 8px !important; }
.nbx-aside ul { margin:0; padding-left:18px; }
.nbx-aside li { font-size:13px; line-height:1.7; }
.nbx-aside li a { color:var(--nbx-link); text-decoration:none; }
.nbx-aside li a:hover { color:var(--nbx-link-hover); text-decoration:underline; }


/* ============================================================
   16. PX COMPONENTS — video, checklist, feature card, vcard (Crossbeam)
   ============================================================ */

/* Smaller standalone section heading */
.nbx-section__title--sm { font-size:18px !important; }

/* Responsive 16:9 video embed */
.nbx-video { position:relative; width:100%; padding-top:56.25%; border-radius:var(--nbx-radius); overflow:hidden; box-shadow:var(--nbx-shadow); }
.nbx-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Icon + text list (info points / checklists) */
.nbx-checklist { display:flex; flex-direction:column; gap:14px; }
.nbx-checkitem { display:flex; align-items:flex-start; gap:12px; }
.nbx-checkitem > i { flex:0 0 auto; font-size:18px; color:var(--nbx-orange); margin-top:2px; }
.nbx-checkitem p { margin:0 !important; font-size:15px !important; color:var(--nbx-ink) !important; line-height:1.5; }
.nbx-checkitem a { color:var(--nbx-link); } .nbx-checkitem a:hover { color:var(--nbx-link-hover); }

/* Feature card (centred, coloured icon) */
.nbx-feature { background:var(--nbx-surface); border:1px solid var(--nbx-border); border-radius:var(--nbx-radius); box-shadow:var(--nbx-shadow); padding:24px; height:100%; text-align:center; transition:transform .25s ease, box-shadow .25s ease; }
.nbx-feature:hover { transform:translateY(-3px); box-shadow:var(--nbx-shadow-lg); }
.nbx-feature__icon { margin:0 auto 14px; }  /* circle from the canonical ICON SYSTEM; gradient via --1/--2/--3 */
.nbx-feature__icon--1 { background:linear-gradient(135deg,#3D0456,#8439A6); }
.nbx-feature__icon--2 { background:linear-gradient(135deg,#E55F00,#FF6D00); }
.nbx-feature__icon--3 { background:linear-gradient(135deg,#BE0075,#ED2891); }
.nbx-feature p { margin:0 !important; font-size:14px !important; color:var(--nbx-muted) !important; line-height:1.5; }

/* Vertical resource card (icon tile on top, title, desc) */
.nbx-vcard { background:var(--nbx-surface); border:1px solid var(--nbx-border); border-radius:var(--nbx-radius); box-shadow:var(--nbx-shadow); padding:22px; height:100%; text-align:center; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.nbx-vcard:hover { transform:translateY(-3px); box-shadow:var(--nbx-shadow-lg); border-color:rgba(132,57,166,.25); }
.nbx-vcard__icon { margin:0 auto 12px; }  /* size/shape/colour from the canonical ICON SYSTEM */
.nbx-vcard__icon a { color:#fff !important; display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.nbx-vcard__title { font-size:15px !important; font-weight:700 !important; margin:0 0 6px !important; }
.nbx-vcard__title a { color:var(--nbx-link) !important; text-decoration:none; }
.nbx-vcard__title a:hover { color:var(--nbx-link-hover) !important; }
.nbx-vcard__desc { font-size:13px !important; color:var(--nbx-muted) !important; margin:0 !important; line-height:1.45; }
.nbx-vcard__desc a { color:inherit !important; text-decoration:none; }

/* ---- PAM card (home left column). Compact layout: avatar + name on ONE row
   to cut height, and cap the card so it never exceeds the carousel beside it.
   (1.20.3) Markup order: label, title, avatar, name(h5), contact(email). ---- */
/* PAM card sizes to its OWN content — deliberately NOT equal-height with the
   carousel (that coupling made both boxes resize as the carousel rotated
   between slides of differing height). (1.26.0) */
.nbx-pamcard { display:flex; flex-direction:column; padding:18px 20px !important; }
.nbx-pamcard .nbx-aside__label { text-align:center; }
.nbx-pamcard .nbx-aside__title { text-align:center; margin:0 0 14px !important; }
/* Avatar + name on ONE row, via a dedicated flex-row wrapper (.nbx-pamcard__person).
   Floats don't work here because .nbx-pamcard is a flex column (its children are
   flex items), so the wrapper carries the row layout instead. (1.25.0) */
.nbx-pamcard__person {
  display:flex; align-items:center; gap:12px;
  justify-content:center;            /* centre the avatar+name pair in the card */
}
.nbx-pamcard__avatar { flex:0 0 auto; width:48px !important; height:48px !important; margin:0 !important; font-size:20px !important; }
.nbx-pamcard .nbx-pamcard__person .nbx-vcard__title { margin:0 !important; text-align:left !important; line-height:1.2; }
.nbx-pamcard__contact { margin:14px 0 0 !important; text-align:center; }
.nbx-pamcard__contact .nbx-linkrow { font-size:13px; }

/* Optional CTA button at the foot of a vcard (centred, spaced from the desc) */
.nbx-vcard .nbx-btn { margin-top:16px; }


/* ============================================================
   17. PROSE — text-heavy content blocks + accent panels (Perf Rebates)
   ============================================================ */

/* Style headings / paragraphs / lists inside a prose block */
.nbx-prose h2 { font-size:22px !important; font-weight:700 !important; color:var(--nbx-heading) !important; margin:0 0 12px !important; line-height:1.25; }
.nbx-prose h3 { font-size:18px !important; font-weight:700 !important; color:var(--nbx-heading) !important; margin:0 0 12px !important; display:flex; align-items:center; gap:8px; }
.nbx-prose p  { font-size:15px !important; color:var(--nbx-ink) !important; line-height:1.6; margin:0 0 12px !important; }
.nbx-prose ul, .nbx-prose ol { margin:0 0 12px; padding-left:22px; }
.nbx-prose li { font-size:15px; color:var(--nbx-ink); line-height:1.6; margin-bottom:8px; }
.nbx-prose li:last-child { margin-bottom:0; }
.nbx-prose ul ul { margin:8px 0 0; }
.nbx-prose strong { font-weight:700; }
.nbx-prose em { font-style:italic; }
.nbx-prose a { color:var(--nbx-link); text-decoration:none; }
.nbx-prose a:hover { color:var(--nbx-link-hover); text-decoration:underline; }
.nbx-prose > :last-child { margin-bottom:0 !important; }
.nbx-prose--lead p { font-size:17px !important; }

/* Left-accent panel variants */
.nbx-panel--accent        { border-left:4px solid var(--nbx-orange); }
.nbx-panel--accent-purple { border-left:4px solid var(--nbx-purple); }


/* ---- prose dividers + heading icons + buttons (Internal FAQ) ---- */
.nbx-prose hr { border:0; border-top:1px solid var(--nbx-border); margin:12px 0; }
.nbx-prose h3 i { color:var(--nbx-purple); }
.nbx-prose .nbx-btn { margin:4px 6px 4px 0; }
.nbx-prose .nbx-btn img { height:18px; width:auto; }
/* Buttons inside prose must keep button styling, not inherit the .nbx-prose a
   link colour/underline (which made purple buttons render purple-on-purple). */
.nbx-prose a.nbx-btn { text-decoration:none !important; }
.nbx-prose a.nbx-btn:hover { text-decoration:none !important; }
.nbx-prose a.nbx-btn--primary,
.nbx-prose a.nbx-btn--secondary,
.nbx-prose a.nbx-btn--ghost { color:#fff !important; }
.nbx-prose a.nbx-btn--outline { color:var(--nbx-purple) !important; }
.nbx-prose a.nbx-btn--outline:hover { color:#fff !important; }


/* ---- prose headings follow authored case (platform forces UPPERCASE on h-tags) ---- */
.nbx-prose h2, .nbx-prose h3, .nbx-prose h4 { text-transform:none !important; }

/* ---- sub-card: a distinct item inside a section panel (e.g. each product's plays) ---- */
.nbx-subcard {
  background:rgba(255,255,255,.55);
  border:1px solid var(--nbx-border);
  border-radius:var(--nbx-radius-sm);
  padding:18px 20px;
  height:100%;
  box-sizing:border-box;
}


/* ============================================================
   18. ICON SYSTEM (canonical) — ONE tile, two shapes
   ------------------------------------------------------------
   .nbx-icon          square brand-coloured tile (the default)
   .nbx-icon--circle  circle variant (feature / emphasis)
   colour:            default purple, or --orange / --pink / --blue
   The component icon classes (.nbx-card__icon, .nbx-vcard__icon,
   .nbx-feature__icon, .nbx-step__num) are sized applications of these —
   one source of truth for "the icon container".
   ============================================================ */
.nbx-icon, .nbx-icon--circle,
.nbx-card__icon, .nbx-vcard__icon, .nbx-feature__icon, .nbx-step__num {
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff;
}
/* square tile (default) — flat brand colour */
.nbx-icon, .nbx-card__icon, .nbx-vcard__icon {
  width:46px; height:46px; border-radius:var(--nbx-radius-sm); font-size:18px;
  background:var(--nbx-purple);
  box-shadow:0 4px 12px rgba(61,4,86,.25), inset 0 1px 0 rgba(255,255,255,.2);
}
/* circle (feature cards, journey steps) — gradient supplied by each component's modifier */
.nbx-icon--circle, .nbx-feature__icon, .nbx-step__num { border-radius:50%; }
.nbx-icon--circle { background:linear-gradient(135deg,var(--nbx-purple-deep),var(--nbx-purple)); }
/* size applications */
.nbx-vcard__icon   { width:52px; height:52px; font-size:20px; }
.nbx-feature__icon { width:56px; height:56px; font-size:22px; }
.nbx-step__num     { width:36px; height:36px; font-size:14px; box-shadow:0 3px 10px rgba(61,4,86,.15); }
/* brand-colour modifiers (square tiles) */
.nbx-icon--orange, .nbx-card__icon--orange, .nbx-vcard__icon--orange { background:var(--nbx-orange); }
.nbx-icon--pink,   .nbx-card__icon--pink,   .nbx-vcard__icon--pink   { background:var(--nbx-pink); }
.nbx-icon--blue,   .nbx-vcard__icon--blue { background:var(--nbx-blue); }


/* ============================================================
   19. PLATFORM KPI INFO-BOXES (mfb-infoBoxes) — branded via CSS
   ------------------------------------------------------------
   The platform renders these Knockout .well KPI cards (Sales Dashboard,
   Renewals, etc.); the markup can't be edited, so we brand it from here.
   Scoped to .info-box-section so no other .well is affected. Literal
   colours because these boxes sit outside the .nbx wrapper.
   ============================================================ */
.info-box-section .row { margin-bottom:4px; }
.info-box-section .well {
  background:#fff;
  border:1px solid rgba(61,4,86,.12);
  border-top:3px solid #FF6D00;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(61,4,86,.08);
  padding:20px 18px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.info-box-section .well:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(61,4,86,.16); }
.info-box-section .media-heading {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:#6b7280; margin:0 0 8px;
}
.info-box-section .well h3 {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:26px; font-weight:700; color:#3D0456; margin:0;
}
.info-box-section .well h3 label { color:inherit; }
.info-box-section .media-left i { color:#8439A6; }


/* ============================================================
   20. SALESFORCE DATA GRID (.sforcegrid) — branded via CSS
   ------------------------------------------------------------
   The platform renders this Knockout grid (DealRegistration Manage:
   Leads / Opportunities / Renewals / Closed Won / Closed Lost, plus any
   other SforceGrid). Markup can't be edited, so we brand it here. Scoped
   to .sforcegrid; literal colours because the grid sits outside .nbx.
   Two button vocabularies live in this component:
     .btn-primary  = the segmented pill tabs (Leads / Opps / …)
     .btn-default  = the icon search buttons, Export, and pagination
   ============================================================ */

/* --- Pill tabs (segmented navigation) --- */
.sforcegrid .btn-primary {
  background:#fff;
  color:#8439A6;
  border:1px solid rgba(132,57,166,.40);
  border-radius:999px;
  padding:7px 18px;
  margin:0 6px 6px 0;
  font-weight:600;
  text-shadow:none;
  box-shadow:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sforcegrid .btn-primary:hover,
.sforcegrid .btn-primary:focus {
  background:rgba(132,57,166,.10);
  color:#3D0456;
  border-color:#8439A6;
  outline:none;
}
.sforcegrid .btn-primary.active,
.sforcegrid .btn-primary:active {
  background:#8439A6;
  color:#fff;
  border-color:#8439A6;
  box-shadow:0 4px 12px rgba(132,57,166,.30);
}

/* --- Secondary buttons: search / date-search / export / pagination --- */
.sforcegrid .btn-default {
  background:#fff;
  color:#8439A6;
  border:1px solid rgba(132,57,166,.35);
  font-weight:600;
  box-shadow:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.sforcegrid .btn-default:hover,
.sforcegrid .btn-default:focus {
  background:#8439A6;
  color:#fff;
  border-color:#8439A6;
  outline:none;
}
.sforcegrid .btn-default .glyphicon { color:inherit; }

/* --- Form controls (keyword box + date selects) --- */
.sforcegrid .form-control { border:1px solid rgba(61,4,86,.20); box-shadow:none; }
.sforcegrid .form-control:focus {
  border-color:#8439A6;
  box-shadow:0 0 0 3px rgba(132,57,166,.15);
}

/* --- Data table --- */
.sforcegrid .table > thead > tr > th {
  border-bottom:2px solid rgba(132,57,166,.25);
  color:#3D0456;
  font-weight:700;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.sforcegrid .table > thead > tr > th a {
  color:#8439A6;
  font-weight:700;
  text-decoration:none;
}
.sforcegrid .table > thead > tr > th a:hover { color:#3D0456; text-decoration:underline; }
.sforcegrid .table > tbody > tr > td a { color:#8439A6; }
.sforcegrid .table > tbody > tr > td a:hover { color:#3D0456; }
.sforcegrid .table-striped > tbody > tr:nth-of-type(odd) { background:rgba(132,57,166,.035); }
.sforcegrid .table-hover > tbody > tr:hover { background:rgba(132,57,166,.07); }
.sforcegrid .glyphicon-triangle-top,
.sforcegrid .glyphicon-triangle-bottom { color:#FF6D00; }

/* --- Loading spinner tint --- */
.sforcegrid .loading > i { color:#8439A6; }

/* ============================================================
   20b. DELEGATED CUSTOMER ACCOUNTS DASHBOARD GRID — branded via CSS
   ------------------------------------------------------------
   The DCA dashboard (sfdc_dca/...) renders a platform .table-responsive >
   table.table whose <thead> is hardcoded dark TEAL (rgb(42,87,105)) by legacy
   CSS — off-brand. Markup can't be edited, so rebrand here: purple-deep header
   (white text kept), brand fonts, subtle striped rows + purple hover. Scoped to
   a .table-responsive table that HAS a thead, so plain content tables (which
   don't render a styled thead) are untouched. Literal colours (outside .nbx). */
.table-responsive > table.table > thead,
.table-responsive > table.table > thead > tr {
  background:linear-gradient(120deg,#3D0456 0%,#8439A6 100%) !important;
}
.table-responsive > table.table > thead > tr > th {
  background:transparent !important;
  color:#fff !important;
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important;
  font-weight:700 !important;
  border-color:rgba(255,255,255,.15) !important;
  vertical-align:middle !important;
}
.table-responsive > table.table > tbody > tr > td {
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important;
  color:var(--nbx-ink,#2b2b33) !important;
  border-color:var(--nbx-border,rgba(61,4,86,.10)) !important;
}
.table-responsive > table.table > tbody > tr:nth-of-type(odd) > td { background:rgba(132,57,166,.04) !important; }
.table-responsive > table.table > tbody > tr:hover > td { background:rgba(132,57,166,.09) !important; }
/* "No Results Found" empty-state row reads as muted brand text */
.table-responsive > table.table + *,
.table-responsive ~ .no-results,
.table-responsive .no-results { color:var(--nbx-muted,#6b7280) !important; }
/* Links inside the grid → brand purple */
.table-responsive > table.table a { color:var(--nbx-link,#8439A6) !important; }
.table-responsive > table.table a:hover { color:var(--nbx-link-hover,#FF6D00) !important; }


/* ============================================================
   21. PLATFORM FORMS — branded + self-sufficient (no legacy CSS)
   ------------------------------------------------------------
   Full design for the platform-rendered CMS/SFDC forms (deal reg,
   trials, attachments) so a form page needs ONLY Font Awesome + this
   file — partnerportal.css and content.css can be dropped. Generic +
   reusable: scoped to .form-group and the platform form classes, NOT
   to one form's id, so it styles every form page. .form-group is the
   safe hook — the .sforcegrid filters live in .input-group, never
   .form-group, so the data grid (Section 20) is untouched. Literal
   colours: forms render OUTSIDE the .nbx wrapper.
   ============================================================ */

/* --- Field labels --- */
[id^="GlobalBodyContent"] .form-group .control-label {
  display:block;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  color:#8439A6;
  margin-bottom:6px;
}
[id^="GlobalBodyContent"] .form-group .control-label b { color:#dc3545; font-weight:700; }   /* required asterisk */

/* Info icon inline with its label (only labels with a trailing icon go
   inline-block, so lists + plain labels keep full width) */
[id^="GlobalBodyContent"] .form-group .control-label:has(+ a.fa-info-circle),
[id^="GlobalBodyContent"] .form-group .control-label:has(+ .fa-info-circle) { display:inline-block; }
[id^="GlobalBodyContent"] .form-group .fa-info-circle {
  color:#8439A6;
  font-size:14px;
  margin-left:6px;
  vertical-align:middle;
  cursor:help;
  transition:color .2s ease;
}
[id^="GlobalBodyContent"] .form-group .fa-info-circle:hover { color:#FF6D00; }

/* --- Inputs / selects / textareas --- */
[id^="GlobalBodyContent"] .form-group .form-control {
  display:block;
  width:100%;
  height:auto;
  padding:12px 16px;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  color:#333;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid #d1d5db;
  border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
[id^="GlobalBodyContent"] .form-group .form-control:focus {
  border-color:#8439A6;
  outline:0;
  box-shadow:0 0 0 3px rgba(132,57,166,.18);
}
[id^="GlobalBodyContent"] .form-group .form-control::placeholder { color:#9ca3af; opacity:1; }

/* Select: purple chevron, native arrow removed */
[id^="GlobalBodyContent"] .form-group select.form-control {
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238439A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position:right 12px center;
  background-repeat:no-repeat;
  background-size:16px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}
[id^="GlobalBodyContent"] .form-group textarea.form-control { min-height:100px; resize:vertical; }

/* --- Field rhythm: one controlled gap; collapse the empty
       <p>&nbsp;</p> spacers the platform prints after each field --- */
[id^="GlobalBodyContent"] .form-group { margin-bottom:14px; }
[id^="GlobalBodyContent"] .form-group > p { display:none; }

/* --- Checkbox cards (Product Interest) --- */
[id^="GlobalBodyContent"] .form-group .checkbox {
  display:flex;
  align-items:center;
  margin:0 0 4px;
  padding:6px 12px;
  background-color:#f6f2fb;
  border-radius:8px;
  transition:background-color .2s ease;
}
[id^="GlobalBodyContent"] .form-group .checkbox:hover { background-color:#ece6f3; }
[id^="GlobalBodyContent"] .form-group .checkbox label {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding-left:0;            /* clear Bootstrap-3 default .checkbox label padding */
  cursor:pointer;
  font-weight:400;
  color:#333;
}
[id^="GlobalBodyContent"] .form-group .checkbox input[type="checkbox"] {
  position:static;           /* Bootstrap-3 sets this absolute (margin-left:-20px),
                                which dragged the box on top of the label text */
  flex:0 0 auto;
  width:18px; height:18px; margin:0; cursor:pointer;
  accent-color:#8439A6;
}

/* --- Radio rows (Generate Trials): radio + label on one line --- */
.thumb-radios { border-collapse:separate; border-spacing:0 8px; }
.thumb-radios td {
  padding:8px 14px;
  background-color:#f6f2fb;
  border-radius:8px;
  transition:background-color .2s ease;
}
.thumb-radios td:hover { background-color:#ece6f3; }
.thumb-radios input[type="radio"] {
  width:18px; height:18px; margin:0 8px 0 0; cursor:pointer;
  vertical-align:middle; accent-color:#8439A6;
}
.thumb-radios label {
  display:inline-block; margin:0; font-weight:500; color:#333;
  vertical-align:middle; cursor:pointer;
}

/* --- Inline info callouts (trial-availability notes) --- */
.bordered-info {
  padding:16px;
  background-color:rgba(132,57,166,.06);
  border-left:4px solid #8439A6;
  border-radius:8px;
  color:#3D0456;
  font-size:13px;
  margin-bottom:16px;
}
.bordered-info .glyphicon,
.bordered-info .glyphicon-info-sign { margin-right:8px; color:#8439A6; }

/* --- In-form sub-headings (trial products) --- */
#Trial_Generation h3,
#NintexForSharepoint h3 {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px;
  font-weight:600;
  color:#3D0456;
  margin:24px 0 16px;
  padding-bottom:8px;
  border-bottom:2px solid #e5e7eb;
}

/* --- Tenant-name prefix (input-group) — scoped to .form-group so the
       data grid's own .input-group keyword search is untouched --- */
[id^="GlobalBodyContent"] .form-group .input-group { display:flex; align-items:stretch; }
[id^="GlobalBodyContent"] .form-group .input-group-addon {
  display:flex; align-items:center;
  padding:12px 16px;
  font-size:13px; color:#6b7280;
  background-color:#f6f2fb;
  border:1px solid #d1d5db; border-right:none;
  border-radius:10px 0 0 10px;
  white-space:nowrap;
}
[id^="GlobalBodyContent"] .form-group .input-group .form-control { border-radius:0 10px 10px 0; }

/* --- Primary submit — Nintex Orange CTA (any platform _btnSubmit) --- */
.btn[id*="btnSubmit"] {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:150px;
  padding:13px 32px;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px; font-weight:600;
  color:#fff;
  background:#FF6D00;
  border:1px solid #FF6D00;
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,109,0,.28);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn[id*="btnSubmit"]:hover,
.btn[id*="btnSubmit"]:focus {
  background:#E55F00; border-color:#E55F00; color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(255,109,0,.36);
}

/* --- "Choose File" — purple secondary (any platform _btnChooseFiles) --- */
.btn[id*="btnChooseFiles"] {
  padding:10px 20px;
  font-size:13px; font-weight:600;
  color:#8439A6;
  background:#fff;
  border:1px solid rgba(132,57,166,.4);
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn[id*="btnChooseFiles"]:hover,
.btn[id*="btnChooseFiles"]:focus {
  background:#8439A6; color:#fff; border-color:#8439A6;
}

/* --- Responsive --- */
@media (max-width:767px) {
  [id^="GlobalBodyContent"] .form-group .form-control { padding:10px 14px; }
  [id^="GlobalBodyContent"] .form-group .input-group { flex-direction:column; }
  [id^="GlobalBodyContent"] .form-group .input-group-addon {
    border-right:1px solid #d1d5db; border-bottom:none;
    border-radius:10px 10px 0 0;
  }
  [id^="GlobalBodyContent"] .form-group .input-group .form-control { border-radius:0 0 10px 10px; }
  .btn[id*="btnSubmit"] { width:100%; }
}


/* ============================================================
   22. HOME PAGE — branded component layer  (Batch 1)
   ------------------------------------------------------------
   The homepage self-loads its own CSS bundle and uses bespoke components.
   These rules brand them to the purple-led palette and SUPERSEDE the page's
   inline <style>/style="" (so those inline blocks can be deleted). Add
   nintex-brand LAST in the homepage loader array so these win. Scoped to the
   homepage component classes — nothing leaks to other pages. Literal hexes
   (homepage renders outside .nbx). !important is used deliberately to beat
   the page's inline declarations.
   Covered here: banner, section headings, Windows section, video modal,
   resource-card grid. (Carousel / PAM / LMS / Featured = next batch.)
   ============================================================ */

/* --- Home banner top gap fix (1.20.0) ---
   .page-content carries padding-top:~111px to clear the fixed nav. The home
   banner's purple gradient fills that whole zone, so the nav clearance renders
   as an empty purple band above the .nbx-hero card. Lift the hero card up so it
   sits just under the nav, keeping a small breathing gap. Scoped to the home
   banner only (.main-banner-with-carousel) so no other page is affected. */
/* The legacy banner wrapper reserved a tall hero height (min-height / vertical
   padding from partnerportal.css) sized for the old full-bleed image banner.
   The new .nbx-hero card is shorter, so that reserved height shows as an empty
   purple band above the card. Collapse the wrapper to fit its content instead
   of yanking the card up with a negative margin (which clipped under the nav).
   Scoped to the home banner only. (1.20.2) */
.main-banner-with-carousel.main-banner-with-animation,
.main-banner-with-carousel.background-blue,
.main-banner-with-carousel {
  min-height:0 !important;
  height:auto !important;
  padding-top:10px !important;   /* small breathing gap under the nav (not 0) */
  padding-bottom:0 !important;
}
.main-banner-with-carousel .main-banner {
  min-height:0 !important;
  padding-top:0 !important;
  margin-top:0 !important;
}
.main-banner-with-carousel .nbx-hero { margin-top:0 !important; }

/* --- Welcome banner: purple gradient (was blue) + branded waves --- */
.main-banner-with-carousel.background-blue,
.main-banner-with-carousel.main-banner-with-animation { background:transparent !important; }
/* Remove the legacy full-width purple banner-backdrop entirely. The .nbx-hero
   card carries its own gradient + rounded corners, so this separate
   .nintex-background-gradient layer is now a redundant ghost panel that pokes
   out above/beside the hero card (visible once the page background shows).
   (1.34.0 — was capped/masked in 1.30.0; now retired outright.) */
.main-banner-with-carousel .nintex-background-gradient.blue,
.main-banner-with-carousel .nintex-background-gradient { display:none !important; }
/* Banner waves must sit ABOVE the now-opaque purple gradient overlay, or the
   gradient (later in the DOM, opacity:1) paints over them and they vanish.
   z-index 2 on the wave layer > the gradient; scoped to the banner so the
   full-page background waves are untouched. (1.20.0) */
.main-banner-with-carousel .nintex-background-animation { z-index:2 !important; }
.main-banner-with-carousel .nintex-lines-animation { z-index:2 !important; }
.main-banner-with-carousel .nintex-background-gradient { z-index:1 !important; }
.main-banner-with-carousel .nintex-lines-animation svg path { stroke-width:2.5px !important; }
.main-banner-with-carousel .nintex-lines-animation svg:nth-child(1) path { stroke:rgba(255,255,255,.45) !important; }
.main-banner-with-carousel .nintex-lines-animation svg:nth-child(2) path { stroke:rgba(255,255,255,.30) !important; }
.main-banner-with-carousel .nintex-lines-animation svg:nth-child(3) path { stroke:rgba(255,255,255,.20) !important; }
.main-banner .banner-header,
.main-banner .banner-text,
.main-banner .banner-welcome h3,
.main-banner .welcome-icon { color:#fff !important; }
.main-banner .banner-welcome h3 { font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important; }
.main-banner .banner-header { font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important; font-weight:800 !important; text-transform:none !important; }

/* --- Section headings (Partner Resources, Featured) --- */
.resource-section .section-heading,
.events-panel-header .section-title {
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important;
  color:#3D0456 !important;
  font-weight:800 !important;
  display:inline-block;
  padding-bottom:6px;
  border-bottom:3px solid #FF6D00;
}
.events-panel-header .view-all-link,
.lms-quick-links .lms-link,
.document-title a,
.document-link { color:#8439A6 !important; }
.events-panel-header .view-all-link:hover,
.document-title a:hover,
.document-link:hover { color:#3D0456 !important; }

/* --- Windows section (ported from the page's inline <style>, rebranded) --- */
.windows-section {
  background:linear-gradient(135deg,#faf7fc 0%,#f1e9f6 100%) !important;
  border-bottom:2px solid rgba(61,4,86,.10) !important;
  padding:2rem 0;
}
.window-card {
  background:#fff; border-radius:14px;
  box-shadow:0 6px 20px rgba(61,4,86,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  height:100%; overflow:hidden;
}
.window-card:hover { transform:translateY(-5px); box-shadow:0 14px 36px rgba(61,4,86,.16); }
.window-header { padding:1.4rem; color:#fff !important; text-align:center; }
.window-header.video-header { background:linear-gradient(135deg,#FF6D00 0%,#ED2891 100%) !important; }
.window-header.documents-header { background:linear-gradient(135deg,#3D0456 0%,#8439A6 100%) !important; }
.window-title {
  margin:0; color:#fff !important;
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important;
  font-size:1.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.window-body { padding:1.5rem; }
.video-preview { border-radius:10px; overflow:hidden; margin-bottom:1rem; }
.video-preview img { width:100% !important; height:auto !important; display:block; }
.video-info h4, .video-title { color:#3D0456 !important; font-weight:700; }
.video-description { color:#6b7280; }

/* --- Video modal: keep behaviour, brand the close hover --- */
.custom-modal.video-modal .custom-modal-close:hover { background:rgba(132,57,166,.9) !important; }

/* --- Resource-card grid: override the inline rainbow → brand palette --- */
.resource-card {
  background:#fff; border-radius:14px;
  box-shadow:0 6px 20px rgba(61,4,86,.08); overflow:hidden; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.resource-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(61,4,86,.16); }
.resource-card .card-header {
  background:#f6f2fb !important;
  background-image:none !important;
  padding:14px 18px !important;
}
.resource-card .card-icon {
  background:#8439A6 !important; color:#fff !important;
  width:42px !important; height:42px !important; border-radius:11px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:17px !important;
}
.resource-section .row > [class*="col-"]:nth-child(even) .resource-card .card-icon { background:#FF6D00 !important; }
.resource-card .card-body { padding:16px 18px 18px !important; }
.resource-card .card-title {
  color:#3D0456 !important;
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif !important;
  font-weight:700 !important;
  font-size:15px !important; line-height:1.25 !important; margin-bottom:8px !important;
}
.resource-card .card-text { color:#6b7280 !important; font-size:13.5px !important; line-height:1.5 !important; }
.resource-card .btn-outline-primary {
  color:#8439A6 !important; border-color:#8439A6 !important; background:#fff !important;
}
.resource-card .btn-outline-primary:hover { background:#8439A6 !important; color:#fff !important; }

/* --- Primary CTA buttons inside homepage cards → Nintex Orange
       (scoped to homepage sections so it can't touch other pages) --- */
.windows-section .btn-primary,
.resource-section .btn-primary,
.events-showcase-section .btn-primary {
  background:#FF6D00 !important; border-color:#FF6D00 !important; color:#fff !important;
}
.windows-section .btn-primary:hover,
.resource-section .btn-primary:hover,
.events-showcase-section .btn-primary:hover {
  background:#E55F00 !important; border-color:#E55F00 !important;
}


/* ---- Home page batch 2: PAM card, carousel, featured event, LMS card.
        (Banner action buttons are pinned by an ID-scoped rule in the page's
        own CSS bundle — those are swapped to .nbx-btn in the WYSIWYG instead.)
        Verified live before deploy. ---- */
.pam-default-avatar, .pam-avatar { background:#8439A6 !important; }
.pam-name { color:#3D0456 !important; }
.pam-header .pam-title { color:#3D0456 !important; }
.carousel-tag, .event-tag { background:linear-gradient(135deg,#8439A6 0%,#3D0456 100%) !important; color:#fff !important; }
body .carousel-slide .content-main .carousel-title { color:#3D0456 !important; }
.featured-event-card .event-title { color:#3D0456 !important; }
.carousel-indicator.active { background:#8439A6 !important; }
.lms-icon { background:linear-gradient(135deg,#8439A6 0%,#3D0456 100%) !important; color:#fff !important; }
.lms-title { color:#3D0456 !important; }
.lms-npcu-badge { background:linear-gradient(135deg,rgba(255,109,0,.12),rgba(132,57,166,.12)) !important; border:1px solid rgba(255,109,0,.35) !important; }
.lms-npcu-badge .npcu-value, .lms-stat-value { color:#FF6D00 !important; }

/* ---- Home layout polish (1.27.0) ----
   (a) Carousel had square corners (border-radius:0, overflow:visible) from the
   legacy carousel.css while the PAM card + LMS rail are rounded — so its bottom
   edge looked unfinished. Round it and clip so the footer bar corners match. */
/* Rounded corners on the carousel WITHOUT clipping the "Upcoming Webinar" tag
   that intentionally overhangs the top-left edge. Keep the outer containers
   overflow:visible (so the tag shows), and round + clip only the inner slide
   surface. (1.33.0) */
.pam-carousel-container .carousel-section,
.pam-carousel-container .announcement-carousel,
.pam-carousel-container #announcementCarousel {
  border-radius:var(--nbx-radius,14px) !important;
  overflow:visible !important;
}
.pam-carousel-container .carousel-slide {
  border-radius:var(--nbx-radius,14px) !important;
  overflow:visible !important;   /* don't clip the overhanging tag */
}
/* Tag sits above the slide and is allowed to overhang the rounded edge. */
.pam-carousel-container .carousel-tag-container,
.pam-carousel-container .carousel-tag,
.pam-carousel-container .event-tag { z-index:3 !important; }
/* Carousel dots/indicators: carousel.css gives them a big negative left margin
   (Bootstrap default) that throws them off-centre. Reset and centre under the
   carousel. (1.36.0) */
.pam-carousel-container .carousel-indicators {
  margin-left:0 !important; margin-right:0 !important;
  left:0 !important; right:0 !important; width:100% !important;
  display:flex !important; justify-content:center !important;
}
/* .main-banner had a 50px bottom padding (legacy carousel.css) that left a big
   gap between the hero and the content row — halve it. (1.36.0) */
.main-banner-with-carousel .main-banner { padding-bottom:18px !important; }
/* "View all courses" moved INSIDE the Nintex University panel (was a separate
   header above the rail, which pushed the rail down out of line with the PAM +
   carousel). Sits centred under the buttons. (1.33.0) */
.nbx-lms-viewall { margin-top:12px; text-align:center; }
.nbx-lms-viewall .nbx-headrow__link { font-size:13px; }
/* (b) Tighten gutters on the home L-grid. Outer row uses a 20px gutter so the
   gap between the left column and the University rail is ~10px each side; the
   inner PAM/carousel row keeps its own gutter. (1.28.0) */
.pam-carousel-container > .row.g-4 { --bs-gutter-x:20px; --bs-gutter-y:18px; }
.col-lg-9 > .row { --bs-gutter-x:18px; }
/* University rail: only ~10px to its LEFT, and flush to the container's RIGHT
   edge (kill the column's right gutter-padding so it lines up with the banner). */
.pam-carousel-container > .row.g-4 > .col-lg-3 { --bs-gutter-x:0 !important; padding-left:10px !important; padding-right:0 !important; }
.pam-carousel-container > .row.g-4 > .col-lg-9 { padding-right:10px !important; }
/* The rail's content is wrapped in .nbx > .nbx-container, which normally
   centres itself (width:95%; max-width:1280px; margin:0 auto; padding:0 10px)
   for full-page layout. Inside this narrow column that centring is what insets
   the panel from both edges. Make it fill the column instead. (1.29.0) */
.col-lg-3 > .nbx { padding:0 !important; margin:0 !important; width:100% !important; }
/* The inner .col-12 wrapper carries a 15px Bootstrap gutter that insets the
   panel from the rail's right edge — zero it so the panel is truly flush. */
.col-lg-3 .col-12 { padding-left:0 !important; padding-right:0 !important; --bs-gutter-x:0 !important; }
.col-lg-3 > .nbx > .nbx-container {
  width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important;
}
/* (c) ~10px between the PAM/Carousel row and the Featured panel below it. */
.col-lg-9 > .events-showcase-section { margin-top:10px !important; }
/* Featured's .nbx-container also centres itself by default — make it fill the
   left column so Featured aligns flush with the PAM/carousel row above it. */
.col-lg-9 > .events-showcase-section > .nbx { padding:0 !important; }
/* Featured's inner .col-12 wrapper carries the same 15px Bootstrap gutter that
   insets the rail — zero it so Featured is flush-left with the PAM card above. */
.events-showcase-section .col-12,
.events-showcase-section [class*="col-"] { padding-left:0 !important; --bs-gutter-x:0 !important; }
.col-lg-9 > .events-showcase-section .nbx-container {
  width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important;
}
.lms-quick-links .lms-link-featured strong { color:#3D0456 !important; }


/* ---- Home page: video-modal + windows responsive (ported verbatim out of the
        page's inline <style> so that block can be deleted; layout kept as-is,
        only the close-button hover is branded). ---- */
.custom-modal.video-modal { background-color:rgba(0,0,0,.95); }
.custom-modal.video-modal .custom-modal-container {
  max-width:80vw; max-height:80vh; width:80vw; height:auto;
  background-color:#000; padding:0; margin:auto; position:relative;
}
.custom-modal.video-modal .custom-modal-content { background-color:#000; border-radius:8px; }
.custom-modal.video-modal .custom-modal-header {
  position:absolute; top:10px; right:10px; background:transparent; border:none; padding:0; z-index:1000;
}
.custom-modal.video-modal .custom-modal-close {
  background:rgba(0,0,0,.7); border-radius:50%; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px);
  color:#fff; border:none; cursor:pointer; font-size:24px; transition:all .3s ease;
}
.custom-modal.video-modal .custom-modal-close:hover { background:rgba(132,57,166,.9); }
.custom-modal.video-modal .custom-modal-body { padding:0; position:relative; background-color:#000; }
.video-container {
  position:relative; width:100%; height:0; padding-bottom:45%;
  background-color:#000; max-height:70vh; overflow:hidden;
}
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
@media (max-width:768px){
  .windows-section .row { flex-direction:column; }
  .window-header { padding:1rem; }
  .window-body { padding:1rem; }
  .custom-modal.video-modal .custom-modal-container { width:95vw; height:auto; margin:20px auto; }
}


/* ============================================================
   23. HOME PAGE LAYOUT COMPONENTS  (gated under .nbx)
   Small reusable structural helpers so the rebuilt home cards
   (Featured event, LMS card, PAM card, Windows row) carry no
   inline style. Layout only — colours/typography come from the
   tokens + existing components above.
   ============================================================ */

/* Header row: title left, "view all" link pushed right. */
.nbx .nbx-headrow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.nbx .nbx-headrow--end   { justify-content:flex-end; }   /* link only, no title */
.nbx .nbx-headrow--start { justify-content:flex-start; align-items:center; }  /* tag + date together */
.nbx .nbx-headrow__link  { color:var(--nbx-link); white-space:nowrap; }
.nbx .nbx-headrow__link:hover { color:var(--nbx-link-hover); }

/* PAM card: centred avatar + name + contact inside a .nbx-panel. */
.nbx .nbx-pamcard { text-align:center; }
.nbx .nbx-pamcard .nbx-aside__label,
.nbx .nbx-pamcard .nbx-aside__title { text-align:center; }
.nbx .nbx-pamcard__avatar  { margin:14px auto; }
.nbx .nbx-pamcard__contact { margin-top:6px; }

/* Speakers: tight left-aligned strip of head-shots. */
.nbx .nbx-speakers { display:flex; flex-wrap:wrap; gap:28px; margin-top:8px; }
.nbx .nbx-speaker  { width:120px; text-align:center; }
.nbx .nbx-speaker__photo { width:100px; height:100px; border-radius:12px; display:block; margin:0 auto; }
.nbx .nbx-speaker .nbx-vcard__title { margin-top:8px; }

/* Stat grid: compact fixed 3-across tiles (LMS certs / counts). */
.nbx .nbx-statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:8px; margin-top:6px; }
.nbx .nbx-stat { text-align:center; padding:10px 6px; }
.nbx .nbx-stat__value { display:flex; justify-content:center; font-size:17px !important; font-weight:700 !important; color:var(--nbx-heading) !important; margin:0 !important; }
.nbx .nbx-stat__label { font-size:13px !important; color:var(--nbx-muted) !important; }

/* LMS card header: icon + title left, NPCU pill right. */
.nbx .nbx-lmshead { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.nbx .nbx-lmshead__title { display:flex; align-items:center; gap:10px; }
.nbx .nbx-lmshead__title .nbx-product__title { margin:0 !important; }
.nbx .nbx-lmsdesc { text-align:left; margin-top:14px !important; }

/* Media vcard: left-aligned content + full-width thumbnail (Campaigns card). */
.nbx .nbx-vcard--media { text-align:left; }
.nbx .nbx-vcard--media .nbx-vcard__title,
.nbx .nbx-vcard--media .nbx-vcard__desc { text-align:left; }
.nbx .nbx-vcard--media .nbx-media__img { width:100%; height:auto; border-radius:12px; margin:6px 0 14px; display:block; }

/* Spacing utilities for .nbx blocks (replace inline margin-top). */
.nbx .nbx-mt-sm { margin-top:14px; }
.nbx .nbx-mt-md { margin-top:16px; }
.nbx .nbx-mt-lg { margin-top:18px; }

/* Carousel first-paint loading state (replaces the page's spin <style>). */
.nbx-carousel-loading { display:flex; align-items:center; justify-content:center; min-height:300px; }


/* =====================================================================
   SECTION 24 — RELEASE NOTES / "LATEST UPDATES" SLIDE-OUT PANEL
   ---------------------------------------------------------------------
   Folded in from the standalone release-notes-panel.css bundle (v1.0.0),
   which hardcoded the OLD #0066CC blue + #FF6B00 orange and so never
   picked up the brand refresh. Rebranded to tokens here.

   UNGATED (like Sections 19-20): release-notes-panel.js injects its markup
   straight onto document.body via insertAdjacentHTML - it is NOT inside a
   .nbx wrapper, so these rules target the panel's own class names directly.
   Scoping is tight (everything under .release-notes-popout or
   .release-notes-toggle), so the blast radius is only the panel itself.

   When this ships: remove the release-notes-panel.css <link> from the
   homepage loader (homepage-section1-wysiwyg.html) - these rules replace it.
   ===================================================================== */

/* ---- Drawer shell ---- */
.release-notes-popout {
  position:fixed; top:0; bottom:0; right:-400px;
  width:400px; height:100vh;
  background:var(--nbx-surface, rgba(255,249,244,.96));
  box-shadow:var(--nbx-shadow-lg, -5px 0 15px rgba(61,4,86,.2));
  transition:right .3s ease;
  z-index:9999;
  display:flex; flex-direction:column;
  backdrop-filter:blur(var(--nbx-blur,10px));
  -webkit-backdrop-filter:blur(var(--nbx-blur,10px));
}
.release-notes-popout.expanded { right:0; }
.release-notes-popout .content-area { flex:1; overflow-y:auto; padding:10px 0; }

/* ---- Header - was #0066CC w/ #FF6B00 border -> brand purple-deep + orange ---- */
.release-notes-header {
  padding:16px 20px;
  background:linear-gradient(120deg,var(--nbx-purple-deep,#3D0456) 0%,var(--nbx-purple,#8439A6) 100%);
  border-bottom:3px solid var(--nbx-orange,#FF6D00);
  position:relative;
}
.release-notes-title { color:#fff; margin:0; font-size:18px; font-weight:600; line-height:1.4; text-align:left; }
.release-notes-footer {
  padding:12px 15px;
  background:var(--nbx-ivory,#FFF9F4);
  border-top:1px solid var(--nbx-border,rgba(61,4,86,.12));
  font-size:12px; color:var(--nbx-muted,#6b7280); text-align:center;
}
/* "View all release notes" CTA button in the footer (1.21.1). Orange brand
   button, full-width, sits above the disclaimer note. */
.release-notes-footer .rnp-allnotes-btn {
  display:block; text-align:center; text-decoration:none;
  background:var(--nbx-orange,#FF6D00); color:#fff !important;
  font-size:13px; font-weight:600; padding:9px 14px; border-radius:8px;
  box-shadow:0 2px 8px rgba(255,109,0,.25); transition:background .2s ease, box-shadow .2s ease;
}
.release-notes-footer .rnp-allnotes-btn:hover {
  background:var(--nbx-orange-deep,#E55F00);
  box-shadow:0 4px 12px rgba(255,109,0,.35); text-decoration:none;
}
.release-notes-footer .rnp-footer-note { margin:10px 0 0; font-size:12px; color:var(--nbx-muted,#6b7280); line-height:1.4; }
.release-notes-popout .content-area .rnp-message { text-align:center; padding:20px; color:var(--nbx-muted,#6b7280); }

/* ---- Toggle tab - was #0066CC fill, #FF6B00 border -> brand purple + orange ---- */
.release-notes-toggle {
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:10001; width:65px; height:65px;
  background:var(--nbx-purple,#8439A6);
  border:3px solid var(--nbx-orange,#FF6D00);
  border-right:none; border-radius:8px 0 0 8px;
  cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:-2px 0 15px rgba(255,109,0,.2), -2px 0 25px rgba(255,109,0,.2);
  transition:right .3s ease, box-shadow .3s ease;
  will-change:transform, box-shadow;
}
.release-notes-toggle:hover { box-shadow:-2px 0 20px rgba(255,109,0,.4), -2px 0 35px rgba(255,109,0,.3); }
.release-notes-popout.expanded + .release-notes-toggle { right:400px; transform:translateY(-50%) rotate(-90deg); }
.release-notes-toggle .toggle-logo { width:50px; height:50px; object-fit:contain; transition:transform .3s ease; }

@keyframes nbxRnpGlow {
  0%   { box-shadow:-2px 0 15px rgba(255,109,0,.2), -2px 0 25px rgba(255,109,0,.2); }
  25%  { box-shadow:-2px 0 20px rgba(255,109,0,.4), -2px 0 35px rgba(255,109,0,.3); }
  50%  { box-shadow:-2px 0 25px rgba(255,109,0,.6), -2px 0 45px rgba(255,109,0,.4); }
  75%  { box-shadow:-2px 0 20px rgba(255,109,0,.4), -2px 0 35px rgba(255,109,0,.3); }
  100% { box-shadow:-2px 0 15px rgba(255,109,0,.2), -2px 0 25px rgba(255,109,0,.2); }
}
@keyframes nbxRnpShake {
  0%   { transform:translateY(-50%) rotate(0deg)   scale(1);    }
  20%  { transform:translateY(-50%) rotate(-15deg) scale(1.1);  }
  40%  { transform:translateY(-50%) rotate(12deg)  scale(1.1);  }
  60%  { transform:translateY(-50%) rotate(-12deg) scale(1.1);  }
  80%  { transform:translateY(-50%) rotate(8deg)   scale(1.05); }
  100% { transform:translateY(-50%) rotate(0deg)   scale(1);    }
}
.release-notes-toggle.glow-effect  { animation:nbxRnpGlow 3s ease-in-out infinite; }
.release-notes-toggle.shake-effect { animation:nbxRnpShake 1.2s cubic-bezier(.36,0,.66,-.56) 2; transform-origin:center center; }
.release-notes-popout.expanded + .release-notes-toggle { animation:none !important; box-shadow:none !important; }

/* ---- Accordion release items ---- */
.release-notes-popout .release-item {
  margin:0; overflow:hidden; background:#fff;
  border-bottom:1px solid var(--nbx-border,rgba(61,4,86,.12));
}
.release-notes-popout .release-item:first-child { border-top:1px solid var(--nbx-border,rgba(61,4,86,.12)); }
.release-notes-popout .release-item.expanded { box-shadow:var(--nbx-shadow,0 2px 8px rgba(61,4,86,.08)); position:relative; z-index:1; }
.release-notes-popout .release-header {
  background:#fff; padding:16px 20px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  position:relative; border-bottom:1px solid var(--nbx-border,rgba(61,4,86,.12));
  transition:background-color .2s ease;
}
.release-notes-popout .release-header:hover { background:var(--nbx-ivory,#FFF9F4); }
.release-notes-popout .release-header::after {
  content:''; position:absolute; right:20px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--nbx-purple,#8439A6);
  border-bottom:2px solid var(--nbx-purple,#8439A6);
  transform:translateY(-75%) rotate(45deg); transition:transform .3s ease;
}
.release-notes-popout .release-item.expanded .release-header::after { transform:translateY(-25%) rotate(-135deg); }
.release-notes-popout .release-name {
  font-size:13.5px; margin:0; flex-grow:1;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding-right:32px;
  color:var(--nbx-heading,#3D0456); font-weight:600; line-height:1.35;
  text-transform:none !important;   /* feed titles are sentence-case; stop platform uppercasing */
}
.release-notes-popout .release-name > span { text-transform:none !important; }
.release-notes-popout .release-name::after { display:none !important; }
.release-notes-popout .release-date { font-size:14px; color:var(--nbx-muted,#6b7280); font-weight:normal; margin-left:8px; }

/* ---- Per-item meta row: product tile + category chip (1.23.0) ----
   Built by release-notes-panel.js from _nintex.product_slug + _nintex.category.
   Product tile = brand-purple tinted pill; category chip = colour-coded by
   data-category, all within the Nintex palette. */
.release-notes-popout .release-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  width:100%; margin-top:8px;
}
.release-notes-popout .release-product {
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--nbx-purple-deep,#3D0456);
  background:rgba(132,57,166,.10);
  border:1px solid rgba(132,57,166,.22);
  padding:3px 9px; border-radius:6px; line-height:1.3;
}
.release-notes-popout .release-chip {
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:10px; line-height:1.3; color:#fff;
}
/* Category colours — all from the brand palette, mapped to a sensible role. */
.release-notes-popout .release-chip[data-category="feature"]      { background:var(--nbx-purple,#8439A6); }
.release-notes-popout .release-chip[data-category="improvement"]  { background:var(--nbx-navy,#2A348A); }
.release-notes-popout .release-chip[data-category="fix"]          { background:#6b7280; }
.release-notes-popout .release-chip[data-category="security"]     { background:var(--nbx-orange,#FF6D00); }
.release-notes-popout .release-chip[data-category="announcement"] { background:var(--nbx-pink,#ED2891); }

/* NEW tag - single clean Nintex Orange gradient (bundle had a dead blue dupe) */
.release-notes-popout .new-tag {
  display:inline-flex; align-items:center;
  background:linear-gradient(45deg,var(--nbx-orange,#FF6D00),#ff8533);
  color:#fff; padding:4px 10px; border-radius:12px;
  font-size:.75rem; font-weight:600; letter-spacing:.5px;
  margin-right:10px; text-transform:uppercase; position:relative;
  box-shadow:0 2px 8px rgba(255,109,0,.3); animation:nbxRnpTagPulse 2s infinite;
}
@keyframes nbxRnpTagPulse {
  0%   { transform:scale(1);    box-shadow:0 2px 8px rgba(255,109,0,.3); }
  50%  { transform:scale(1.05); box-shadow:0 4px 12px rgba(255,109,0,.4), 0 0 0 2px rgba(255,255,255,.5); }
  100% { transform:scale(1);    box-shadow:0 2px 8px rgba(255,109,0,.3); }
}

/* ---- Expanding details ---- */
.release-notes-popout .release-details {
  padding:0; max-height:0; overflow:hidden; opacity:0;
  transform:translateY(-10px); transition:all .3s ease-in-out; background:#fff;
}
.release-notes-popout .release-item.expanded .release-details {
  padding:20px; max-height:2000px; opacity:1; transform:translateY(0);
  border-top:1px solid var(--nbx-border,rgba(61,4,86,.12));
}
.release-notes-popout .release-details p  { margin:0 0 12px; line-height:1.6; color:var(--nbx-ink,#2b2b33); font-size:13.5px; }
/* Branded bullets: custom orange marker instead of the default disc (1.24.0). */
.release-notes-popout .release-details ul { margin:0 0 16px; padding-left:18px; list-style:none; }
.release-notes-popout .release-details li {
  position:relative; margin:8px 0; padding-left:16px;
  line-height:1.5; color:var(--nbx-ink,#2b2b33); font-size:13.5px;
}
.release-notes-popout .release-details li::before {
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--nbx-orange,#FF6D00);
}
/* Highlight titles (the <strong> we emit) take the brand heading colour. */
.release-notes-popout .release-details li strong { color:var(--nbx-purple-deep,#3D0456); font-weight:700; }
.release-notes-popout .release-details a  { color:var(--nbx-link,#8439A6); }
.release-notes-popout .release-details a:hover { color:var(--nbx-link-hover,#FF6D00); }
/* "Read full release notes" — a clearer branded action, not a bare text link. */
.release-notes-popout .release-readmore { margin:14px 0 0; }
.release-notes-popout .rnp-readmore-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; text-decoration:none;
  color:var(--nbx-orange,#FF6D00) !important;
}
.release-notes-popout .rnp-readmore-link:hover { color:var(--nbx-orange-deep,#E55F00) !important; text-decoration:underline; }