/**
 * Just2Pay marketplace landing — deep reskin (DesignKit Option B + Champagne)
 *
 * Loaded ONLY from resources/views/front/layout.blade.php, AFTER:
 *   - assets/front/css/style.css           (the bespoke marketing theme)
 *   - css/j2p-theme.css                    (global tokens + Bootstrap layer)
 *   - the inline <style> body {...} block  (sets --color-primary to J2P blue)
 *
 * Strategy
 * --------
 * The marketing CSS is keyed off `--color-primary` and a handful of bespoke
 * classes (`.home-banner`, `.section-title`, `.primary-btn`, `.pricing-area`,
 * `.footer-area`, ...). We override surface colors, hero treatment, card
 * styling, pricing layout, and footer chrome to match j2p-ecr/DesignKit.html.
 * No Blade markup is changed.
 *
 * Tenant storefronts (user-front.layout) are NOT affected — they don't load
 * this file and keep their own --color-primary.
 */

/* =========================================================================
   1. Landing-only token bridge.
   The marketing theme reads --bg-light / --bg-blue / --gradient-bg / etc.
   Re-define them in DesignKit terms so existing rules pick up the new look.
   Scoped to body so the inline <style> overrides on :root still cooperate.
   ========================================================================= */
body {
  --color-primary: #1d4ed8;
  --color-primary2: #0b1f4d;
  --color-primary-rgb: 29, 78, 216;

  --bg-light: #f8fafc;
  --bg-blue: #071537;
  --border-color: #e2e8f0;

  --text-dark: #0b1f4d;
  --text-medium: #475569;

  --gradient-bg: linear-gradient(135deg, #0b1f4d 0%, #1d4ed8 100%);
  --gradient-bg-soft: linear-gradient(135deg, rgba(11, 31, 77, 0.04) 0%, rgba(29, 78, 216, 0.04) 100%);

  /* Champagne accent for premium CTAs / pricing recommended ring */
  --j2p-accent: #e7cfa3;
  --j2p-accent-hover: #d9be8a;
  --j2p-accent-pressed: #c7aa73;
  --j2p-accent-tint: #fbf3e3;
  --accent-text: #7a4e12;
}

/* =========================================================================
   2. Global typography + base — tighten letter-spacing, refine link color.
   Use the brand navy ink for headings.
   ========================================================================= */
body {
  color: #475569; /* slate */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.h2,
.h3 {
  color: #0b1f4d;
  letter-spacing: -0.02em;
}

h1 { font-weight: 800; }
h2 { font-weight: 750; }
h3 { font-weight: 700; }
h4 { font-weight: 700; }

a {
  color: #1d4ed8;
}

a:hover {
  color: #1e40af;
}

/* =========================================================================
   3. Top header — navy chrome, glass, white nav.
   The .header-area is position: fixed, .header-inner-page makes it inherit.
   ========================================================================= */
.header-area {
  background: rgba(11, 31, 77, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-area.is-sticky {
  background: rgba(11, 31, 77, 0.96);
  -webkit-box-shadow: 0 8px 30px rgba(2, 6, 23, 0.25);
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.25);
}

.header-area .main-navbar {
  padding: 6px 0;
}

.header-area .main-navbar .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 500;
  border-radius: 10px;
  padding: 10px 14px !important;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}

.header-area .main-navbar .nav-link:hover,
.header-area .main-navbar .nav-link.active,
.header-area .main-navbar .nav-link:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
}

.header-area .main-navbar .nav-link.toggle i,
.header-area .main-navbar .nav-link i {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11px;
  margin-inline-start: 6px;
}

/* Mega/dropdown menu — light surface popped over navy header */
.header-area .main-navbar .menu-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 14px !important;
  -webkit-box-shadow: 0 12px 40px rgba(2, 6, 23, 0.18);
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.18);
  padding: 8px !important;
  margin-top: 8px !important;
}

.header-area .main-navbar .menu-dropdown .nav-link {
  color: #0f172a !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}

.header-area .main-navbar .menu-dropdown .nav-link:hover {
  background: rgba(231, 207, 163, 0.18) !important;
  color: #0b1f4d !important;
}

/* Logo — admin-managed wordmark on the navy header.
   Most tenant logos are dark/black on a transparent background, so we
   recolor them to white via brightness/invert so they read on navy.
   Container is a flex slot that will not squeeze the image at narrow widths. */
.header-area .main-navbar .navbar-brand,
.header-area .main-responsive-nav .logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 18px;
  padding: 0;
  min-width: 0;
  max-width: 240px;
}

.header-area .main-navbar .navbar-brand img,
.header-area .main-responsive-nav .logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

[dir='rtl'] .header-area .main-navbar .navbar-brand,
[dir='rtl'] .header-area .main-responsive-nav .logo {
  margin-right: 0;
  margin-left: 18px;
}

[dir='rtl'] .header-area .main-navbar .navbar-brand img,
[dir='rtl'] .header-area .main-responsive-nav .logo img {
  object-position: right center;
}

@media (max-width: 991.98px) {
  .header-area .main-navbar .navbar-brand img,
  .header-area .main-responsive-nav .logo img {
    height: 36px;
    max-width: 160px;
    max-height: 36px;
  }
}

/* Generous nav row so the logo + nav links breathe. */
.header-area .main-navbar .navbar {
  min-height: 72px;
}

/* nice-select language dropdown — glass treatment.
   The marketing CSS keeps a Font Awesome globe icon in `::after`
   (content: "\f0ac", positioned left:10px), so we KEEP that and only
   recolor it. We also keep the original 35px left padding so the icon
   sits comfortably on the left of the text. */
.header-area .nice-select,
.header-area .menu-action-item-wrapper .nice-select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  height: 40px !important;
  line-height: 38px !important;
  padding-right: 16px !important;
  padding-left: 36px !important;
  font-weight: 600;
  font-size: 13px;
}

[dir='rtl'] .header-area .nice-select,
[dir='rtl'] .header-area .menu-action-item-wrapper .nice-select {
  padding-right: 36px !important;
  padding-left: 16px !important;
}

.header-area .nice-select .current {
  color: #ffffff;
}

/* Keep the original Font Awesome globe — just recolor + reposition. */
.header-area .nice-select::after {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  left: 12px !important;
  right: auto !important;
}

[dir='rtl'] .header-area .nice-select::after {
  left: auto !important;
  right: 12px !important;
}

/* Dropdown panel — must escape the hero's stacking context.
   .home-banner has z-index: 1, header has z-index: 999, so we lift
   the dropdown beyond both with a hard z-index value. */
.header-area .nice-select .list {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 12px !important;
  -webkit-box-shadow: 0 12px 40px rgba(2, 6, 23, 0.22) !important;
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.22) !important;
  margin-top: 6px;
  padding: 6px;
  z-index: 1100 !important;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
}

.header-area .nice-select .list .option {
  color: #0f172a !important;
  background: transparent !important;
  border-radius: 8px;
  margin: 2px 0;
  padding: 6px 12px !important;
  min-height: 34px;
  line-height: 22px !important;
  font-size: 13px;
  font-weight: 500;
}

.header-area .nice-select .list .option:hover,
.header-area .nice-select .list .option.focus,
.header-area .nice-select .list .option.selected.focus {
  background: rgba(231, 207, 163, 0.2) !important;
  color: #0b1f4d !important;
}

.header-area .nice-select .list .option.selected {
  font-weight: 700 !important;
  color: #0b1f4d !important;
}

/* Belt + braces: if niceSelect hasn't initialized yet (FOUC) and a raw
   <select> is briefly visible, give it the same glass look so it doesn't
   pop a white pill. */
.header-area .language select {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  height: 40px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
}

.header-area .language select option {
  color: #0f172a;
  background: #ffffff;
}

/* Push the whole header above any hero stacking context.
   IMPORTANT: `.header-inner-page { position: inherit }` (marketing CSS) resolves
   to `static` on landing pages, which makes `z-index: 999` a no-op and lets
   `.home-banner { position: relative; z-index: 1 }` paint over the responsive
   dropdown at the top of the page. Force a positioning context here so the
   mobile menu can always rise above the hero — even before `.is-sticky`
   promotes the header to `position: fixed`. The sticky rule still wins because
   `position: fixed` beats `position: relative`. */
.header-area,
.header-area.header-inner-page {
  position: relative;
  z-index: 1050;
}

/* Mobile hamburger button — glass */
.header-area .side-option-responsive .side-option-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

/* =========================================================================
   3b. Meanmenu (mobile/tablet menu) reskin
   The marketing site uses the meanmenu jQuery plugin on small screens.
   On init, it makes `.main-responsive-menu` the `.mean-container` and
   prepends:
     .mean-bar               (absolute, top:0, width:100%)
       a.meanmenu-reveal     (absolute, right:0 via INLINE style)
       nav.mean-nav          (the slide-down panel)

   Because `.mean-bar` is absolute and overlays the .logo (which is in
   normal flow inside the menu), and because the bar carries no real
   height, the dropdown that the marketing CSS positioned `absolute`
   without an explicit `top:` ended up sitting at the top of the bar
   (often above the logo, hence the "opens upward" report).

   We fix this by:
     1. Making `.main-responsive-menu` a clean flex row with min-height
        so the logo always has space.
     2. Placing the hamburger via TOP/RIGHT explicitly (with !important
        to override the inline style attribute that the plugin writes).
     3. Pinning `.mean-nav` to `top: 100%` of `.main-responsive-menu`
        so it ALWAYS opens DOWNWARD as a card attached to the navbar
        bottom edge — regardless of bar height or screen orientation.
   ========================================================================= */
@media (max-width: 1199.98px) {
  /* Layout the responsive menu row: logo on one side, hamburger on the other,
     with explicit min-height so the logo container has breathing room. */
  .header-area .main-responsive-nav .main-responsive-menu {
    min-height: 56px;
    padding-inline-end: 56px; /* reserve room for the absolute hamburger */
    position: relative;
  }

  [dir='rtl'] .header-area .main-responsive-nav .main-responsive-menu {
    padding-inline-end: 0;
    padding-inline-start: 56px;
  }

  /* The mean-bar wraps the hamburger + the dropdown panel. We pin it across
     the full width of the menu row so the dropdown panel below it can use
     `width: 100%` to span the navbar edge-to-edge. */
  .header-area .mean-container .mean-bar {
    background: transparent !important;
    z-index: 1080 !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline: 0 !important;
    min-height: 56px;
    padding: 0 !important;
  }

  /* Hamburger button — white pill, anchored to the right of the navbar row.
     The plugin writes `right: 0; left: auto` as INLINE styles on this <a>;
     we override with `right: 16px !important`. We also override the
     marketing CSS's `top: 50%; transform: translateY(-50%)` with a fixed
     top so the button sits cleanly within the row regardless of its
     intrinsic line-height.

     ICONS: meanmenu emits raw `<span/><span/><span/>` for open and a literal
     ASCII "X" for close (see `meanMenuOpen` / `meanMenuClose` plugin options).
     Those look inconsistent next to the site's Font Awesome iconography, so
     we hide the plugin-emitted content (font-size: 0 collapses both the spans
     and the X text) and paint a proper `::before` glyph instead — `\f0c9`
     bars for closed, `\f00d` xmark for the `.meanclose` open state. */
  .header-area .main-responsive-nav .main-responsive-menu.mean-container a.meanmenu-reveal,
  .header-area .mean-container a.meanmenu-reveal {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 8px !important;
    right: 16px !important;
    left: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 0 !important; /* hide raw span/X content */
    text-indent: 0 !important;
    line-height: 1 !important;
    -webkit-transition: background 0.15s ease, border-color 0.15s ease;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  /* Font Awesome 6 Free glyph painted over the plugin's native content. */
  .header-area .main-responsive-nav .main-responsive-menu.mean-container a.meanmenu-reveal::before,
  .header-area .mean-container a.meanmenu-reveal::before {
    content: "\f0c9"; /* fa-bars */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
    display: inline-block;
  }

  .header-area .main-responsive-nav .main-responsive-menu.mean-container a.meanmenu-reveal.meanclose::before,
  .header-area .mean-container a.meanmenu-reveal.meanclose::before {
    content: "\f00d"; /* fa-xmark / times */
    font-size: 20px;
  }

  /* The plugin's native hamburger spans are now hidden by `font-size: 0` on
     the parent, but we still zero out their box so they don't take height. */
  .header-area .mean-container a.meanmenu-reveal span {
    display: none !important;
  }

  .header-area .mean-container a.meanmenu-reveal:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
  }

  /* RTL: anchor to the left edge instead. The marketing CSS already sets
     `left: 0 !important; right: unset !important;` for RTL, so keep the
     same pattern with explicit padding. */
  [dir='rtl'] .header-area .main-responsive-nav .main-responsive-menu.mean-container a.meanmenu-reveal,
  [dir='rtl'] .header-area .mean-container a.meanmenu-reveal {
    right: auto !important;
    left: 16px !important;
  }

  /* Dropdown menu panel — pinned to the BOTTOM EDGE of the responsive
     navbar row, spans full container width, opens downward as a card. */
  .header-area .main-responsive-nav .main-responsive-menu.mean-container .mean-nav,
  .header-area .mean-container .mean-nav {
    background: #ffffff !important;
    position: absolute !important;
    top: 100% !important;
    inset-inline: 0 !important;
    margin-top: 8px !important;
    width: auto !important;
    float: none !important;
    border-radius: 14px !important;
    -webkit-box-shadow: 0 18px 48px rgba(2, 6, 23, 0.28) !important;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.28) !important;
    z-index: 1090 !important;
    overflow: hidden;
  }

  .header-area .mean-container .mean-nav ul {
    background: transparent !important;
  }

  .header-area .mean-container .mean-nav ul li {
    position: relative;
    width: 100% !important;
    background: transparent !important;
    float: none !important;
  }
}

/* Size the scrollable inner list to its content, capped at the viewport.

   The marketing CSS hardcodes `height: 450px` on this element, which makes
   the dropdown panel render as a 450px-tall white card regardless of how
   short the menu actually is (→ big empty space under the last item). We
   override that with `height: auto` so the panel shrinks to content, and
   cap the expanded size with `max-height` so a very long menu can still
   scroll on short devices.

   IMPORTANT: neither `display` nor `height` may carry `!important` here.
   The meanmenu plugin toggles the panel with jQuery's `slideUp/slideDown`,
   which animates `height` inline and writes `display: none` at the end of
   slideUp. An `!important` class rule would beat those inline values and
   either break the animation (height) or leave the panel stuck on screen
   after "close" (display). Non-`!important` rules still beat the marketing
   CSS because this file loads after it. `max-height` is safe with
   `!important` — it only caps the animated height, never forces one. */
.header-area .main-responsive-nav .main-responsive-menu.mean-container .mean-nav .navbar-nav,
.header-area .mean-container .mean-nav .navbar-nav {
  height: auto;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.header-area .mean-container .mean-nav ul li a {
  color: #0f172a !important;
  background: transparent !important;
  border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
  padding: 14px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  width: 100% !important;
  float: none !important;
  text-align: start !important;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}

.header-area .mean-container .mean-nav ul li:first-child a {
  border-top: 0 !important;
}

.header-area .mean-container .mean-nav ul li a:hover,
.header-area .mean-container .mean-nav ul li a.active {
  background: rgba(231, 207, 163, 0.18) !important;
  color: #0b1f4d !important;
}

/* Sub-menu items (children) */
.header-area .mean-container .mean-nav ul li ul li a {
  background: rgba(248, 250, 252, 0.9) !important;
  color: #475569 !important;
  padding-inline-start: 36px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-top-color: rgba(226, 232, 240, 0.6) !important;
}

.header-area .mean-container .mean-nav ul li ul li a:hover {
  background: rgba(231, 207, 163, 0.14) !important;
  color: #0b1f4d !important;
}

/* "Expand" caret button next to items with submenus */
.header-area .mean-container .mean-nav ul li a.mean-expand {
  background: transparent !important;
  border: 0 !important;
  border-inline-start: 1px solid rgba(226, 232, 240, 0.85) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: #475569 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  inset-inline-end: 0;
  top: 0;
}

.header-area .mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  background: rgba(11, 31, 77, 0.06) !important;
  color: #0b1f4d !important;
}

/* Action buttons (login, language) inside the mobile menu.

   The marketing CSS has the wrapper as `display: flex; flex-wrap: wrap;
   justify-content: center; gap: 15px;` (row layout) and renders inside a UL
   as a bare <div> sibling of the <li>s. On mobile we stack vertically and
   explicitly width-bound every descendant (wrapper, item, button, select) so
   that the login pill cannot escape past the panel's right edge. */
.header-area .mean-container .mean-nav .menu-action-item-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 12px;
  padding: 16px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
}

.header-area .mean-container .mean-nav .menu-action-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.header-area .mean-container .mean-nav .menu-action-item .btn {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: center;
  justify-content: center;
  white-space: normal; /* allow the label to wrap on very narrow screens */
}

/* Language nice-select inside the mobile menu — dark text on light panel */
.header-area .mean-container .mean-nav .nice-select,
.header-area .mean-container .mean-nav .menu-action-item-wrapper .nice-select {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, 0.7) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Safety net: every descendant of the mobile panel must respect its container
   width. The plugin copies nested HTML via `.html()`, and some third-party
   widgets (nice-select, language picker) default to `box-sizing: content-box`
   with explicit padding, which can overflow on sub-360px viewports. */
.header-area .mean-container .mean-nav,
.header-area .mean-container .mean-nav * {
  box-sizing: border-box;
}

.header-area .mean-container .mean-nav .nice-select .current {
  color: #0f172a;
}

.header-area .mean-container .mean-nav .nice-select::after {
  color: #475569 !important;
}

.header-area .mean-container .mean-nav .nice-select .list {
  background: #ffffff !important;
  z-index: 1100 !important;
}

/* =========================================================================
   4. Buttons — DesignKit primary/secondary/video.
   .primary-btn = champagne CTA (premium feel, navy text)
   .secondary-btn = navy outline
   .video-btn = glass play (used inline next to CTAs)
   ========================================================================= */
.btn {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
  -webkit-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.08s ease;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.08s ease;
}

.btn-sm {
  border-radius: 10px;
  padding: 8px 14px;
}

.primary-btn {
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  border: 1px solid var(--j2p-accent-hover) !important;
  -webkit-box-shadow: 0 14px 30px rgba(231, 207, 163, 0.22);
  box-shadow: 0 14px 30px rgba(231, 207, 163, 0.22);
}

.primary-btn:hover,
.primary-btn:focus {
  background: var(--j2p-accent-hover) !important;
  color: #0b1f4d !important;
  border-color: var(--j2p-accent-pressed) !important;
}

.primary-btn:active {
  background: var(--j2p-accent-pressed) !important;
}

.secondary-btn {
  background: transparent !important;
  color: #0b1f4d !important;
  border: 1px solid rgba(11, 31, 77, 0.2) !important;
}

.secondary-btn:hover,
.secondary-btn:focus {
  background: rgba(11, 31, 77, 0.06) !important;
  color: #0b1f4d !important;
  border-color: rgba(11, 31, 77, 0.4) !important;
}

/* On dark surfaces (hero, footer) the secondary needs a light treatment */
.home-banner .secondary-btn,
.footer-area .secondary-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.home-banner .secondary-btn:hover,
.footer-area .secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

/* Video-button (round play affordance) — glass champagne */
.video-btn {
  width: 52px;
  height: 52px;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(231, 207, 163, 0.16) !important;
  color: var(--j2p-accent) !important;
  border: 1px solid rgba(231, 207, 163, 0.4) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 14px;
  -webkit-box-shadow: 0 8px 22px rgba(231, 207, 163, 0.16);
  box-shadow: 0 8px 22px rgba(231, 207, 163, 0.16);
}

.video-btn:hover {
  background: rgba(231, 207, 163, 0.28) !important;
  color: #ffffff !important;
}

.video-btn i {
  font-size: 14px;
  margin-inline-start: 2px;
}

/* =========================================================================
   5. Hero (.home-banner) — navy gradient + champagne radial, white headlines.
   Replaces the pale --bg-light wash and removes the marketing PNG shapes.
   ========================================================================= */
.home-banner {
  background-color: #0b1f4d;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(231, 207, 163, 0.32) 0%, rgba(231, 207, 163, 0) 55%),
    radial-gradient(circle at 10% 90%, rgba(29, 78, 216, 0.45) 0%, rgba(29, 78, 216, 0) 55%),
    linear-gradient(135deg, #0b1f4d 0%, #1d4ed8 100%);
  color: rgba(255, 255, 255, 0.86);
  /* Header is in-flow (slim navy bar) — no legacy fixed-header offset. */
  padding-top: clamp(24px, 4.5vw, 44px);
  padding-bottom: 120px;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

/* Kill the legacy banner-shape-1/2 background images that fight the gradient */
.home-banner::before,
.home-banner::after {
  content: none !important;
  background: none !important;
}

/* Decorative SVG shapes still appear, but quieted */
.home-banner .shape img {
  opacity: 0.18;
  filter: brightness(0) invert(1);
}

/* Make sure the hero content sits ABOVE the radial gradient + decorative
   shapes, and stays fully visible regardless of AOS state or any other
   inherited opacity / transform. */
.home-banner .content {
  position: relative;
  z-index: 3;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* "subtitle" pill — bronze chip with dot.
   Champagne text on transparent bronze background sits crisp on navy. */
.home-banner .content .subtitle {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(231, 207, 163, 0.14) !important;
  border: 1px solid rgba(231, 207, 163, 0.32);
  color: #f6e4c3 !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.home-banner .content .subtitle::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--j2p-accent);
  box-shadow: 0 0 0 4px rgba(231, 207, 163, 0.18);
}

.home-banner .content .subtitle img {
  max-height: 18px;
  width: auto;
  margin-inline-start: 4px;
  /* Trophy / award icons are usually colorful — make them champagne to match
     the chip without losing their silhouette. */
  filter: brightness(0) saturate(100%) invert(86%) sepia(18%) saturate(720%)
    hue-rotate(354deg) brightness(96%) contrast(92%);
}

/* Headline — white, ALWAYS, no matter what. The marketing CSS sets a
   dark color via `h1 { color: var(--text-dark) }` (specificity 0,0,1).
   Our 0,3,0 + !important rule below trumps it definitively. */
.home-banner .content .title,
.home-banner .content h1.title,
.home-banner h1.title {
  color: #ffffff !important;
  font-size: 56px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  max-width: 16ch;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Body paragraph — light slate on navy. */
.home-banner .content .text,
.home-banner .content p.text,
.home-banner .content p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 17px;
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 32px;
  opacity: 1 !important;
}

.home-banner .content .clients h6 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* CTA row — keep above any decorative layers and let the button shine. */
.home-banner .content .content-botom,
.home-banner .content-botom {
  position: relative;
  z-index: 4;
  gap: 14px;
  flex-wrap: wrap;
}

/* Banner image — wrap with a soft glass frame so transparent / dark
   illustrations remain readable against the new navy gradient. */
.home-banner .banner-img {
  position: relative;
  z-index: 2;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 20%, rgba(231, 207, 163, 0.18) 0%, rgba(231, 207, 163, 0) 60%),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35);
  /* Cancel the negative margin that the marketing CSS applies on .image-right
     so the frame doesn't overflow off-screen on smaller viewports. */
  margin-inline-end: 0 !important;
  max-width: 100%;
}

.home-banner .banner-img img {
  border-radius: 18px;
  width: 100%;
  height: auto;
  display: block;
  /* Lift any stray transparent illustrations onto a soft white plate so they
     stay legible on the navy gradient. */
  background: rgba(255, 255, 255, 0.96);
  padding: 6px;
}

@media (max-width: 991.98px) {
  .home-banner .banner-img {
    padding: 12px;
    margin-top: 32px;
  }
}

@media (max-width: 991.98px) {
  .home-banner {
    padding-top: clamp(20px, 5vw, 36px);
    padding-bottom: 80px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .home-banner .content .title {
    font-size: 38px;
  }
}

/* =========================================================================
   6. Section title — bronze subtitle + navy ink heading
   ========================================================================= */
.section-title {
  margin-bottom: 56px;
}

.section-title .subtitle {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.section-title .title {
  color: #0b1f4d !important;
  font-size: 36px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-title .title span {
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, #0b1f4d, #1d4ed8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title .text {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  max-width: 64ch;
  margin: 16px auto 0;
}

@media (max-width: 767.98px) {
  .section-title .title {
    font-size: 28px;
  }
}

/* Quiet the decorative shape PNGs across all sections */
.store-area .shape img,
.template-area .shape img,
.choose-area .shape img,
.pricing-area .shape img,
.user-profile-area .shape img,
.testimonial-area .shape img,
.blog-area .shape img,
.sponsor .shape img {
  opacity: 0.12;
}

.store-area .bg-overlay,
.template-area .bg-overlay,
.pricing-area .bg-overlay,
.user-profile-area .bg-overlay,
.testimonial-area .bg-overlay,
.blog-area .bg-overlay {
  opacity: 0.5;
}

/* =========================================================================
   7. Process / Templates / Choose / Features cards (.store-area .card,
   .template-area .card, .choose-area .card)
   DesignKit card: white surface, 16px radius, subtle shadow, slate border.
   ========================================================================= */
.store-area .card,
.template-area .card,
.choose-area .card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  -webkit-box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.store-area .card:hover,
.template-area .card:hover,
.choose-area .card:hover {
  border-color: rgba(29, 78, 216, 0.22) !important;
  -webkit-box-shadow: 0 16px 40px rgba(2, 6, 23, 0.1);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.1);
  -webkit-transform: translateY(-4px) !important;
  transform: translateY(-4px) !important;
}

/* The marketing theme adds a 2px bottom border via ::after — repaint navy */
.store-area .card::after,
.choose-area .card::after {
  border-bottom-color: #1d4ed8 !important;
  border-radius: 16px !important;
}

/* Card icon — DesignKit rounded square with brand-blue tint */
.store-area .card .card-icon,
.template-area .card .card-icon,
.choose-area .card .card-icon {
  width: 52px !important;
  height: 52px !important;
  line-height: 52px !important;
  border-radius: 14px !important;
  font-size: 24px !important;
  background: rgba(29, 78, 216, 0.1) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.18);
  margin-bottom: 18px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* When the marketing theme tagged a card icon as "primary" (champagne intent) */
.store-area .card .card-icon.primary,
.template-area .card .card-icon.primary,
.choose-area .card .card-icon.primary,
.pricing-area .card .icon.primary {
  background: rgba(231, 207, 163, 0.18) !important;
  color: var(--accent-text) !important;
  border-color: rgba(231, 207, 163, 0.4) !important;
}

/* Choose-area icon-after rail (decorative) — repaint to brand */
.choose-area .card .card-icon::after {
  background-color: #1d4ed8 !important;
}

.choose-area .card .card-icon.primary::after {
  background-color: var(--j2p-accent) !important;
}

/* Card title + text */
.store-area .card .card-title,
.template-area .card .card-title,
.choose-area .card .card-title,
.choose-area .card .card-content .card-title,
.blog-area .card .card-title {
  color: #0b1f4d !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.store-area .card .card-text,
.template-area .card .card-text,
.choose-area .card .card-text {
  color: #475569 !important;
  line-height: 1.7;
}

.choose-area .card .card-content .card-btn {
  color: #1d4ed8 !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Template-area card image — rounded with subtle shadow */
.template-area .card-image .lazy-container,
.template-area .card-image img {
  border-radius: 14px;
  overflow: hidden;
}

.template-area .card-image img {
  -webkit-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.template-area .card:hover .card-image img {
  transform: scale(1.03);
}

.template-area .card h4 a {
  color: #0b1f4d;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.template-area .card h4 a:hover {
  color: #1d4ed8;
}

/* Choose-area "list" check icons — brand blue */
.choose-area .choose-content .choose-list li span {
  background: rgba(29, 78, 216, 0.12);
  color: #1d4ed8;
  border-radius: 8px;
}

.choose-area .choose-content .subtitle {
  color: var(--accent-text) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.choose-area .choose-content .title {
  color: #0b1f4d !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* =========================================================================
   8. Sponsor / partners slider — neutral surface
   ========================================================================= */
.sponsor .item-single {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  padding: 20px 16px;
  align-items: center;
  justify-content: center;
  height: 96px;
  -webkit-transition: border-color 0.2s ease, transform 0.15s ease;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.sponsor .item-single:hover {
  border-color: rgba(29, 78, 216, 0.22);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.sponsor .item-single .sponsor-img img {
  max-height: 48px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.sponsor .item-single:hover .sponsor-img img {
  filter: none;
  opacity: 1;
}

.sponsor .swiper-pagination .swiper-pagination-bullet-active {
  background: #1d4ed8 !important;
}

/* =========================================================================
   9. Pricing — DesignKit pricing card. Champagne accent on recommended.
   ========================================================================= */
.pricing-area .nav-tabs-navigation .nav {
  background: rgba(29, 78, 216, 0.08) !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(29, 78, 216, 0.12);
}

.pricing-area .nav-tabs-navigation .nav .nav-link {
  color: #475569 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 26px !important;
  background: transparent !important;
  border: 0 !important;
}

.pricing-area .nav-tabs-navigation .nav .nav-link.active {
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  border: 0 !important;
  -webkit-box-shadow: 0 6px 18px rgba(231, 207, 163, 0.32);
  box-shadow: 0 6px 18px rgba(231, 207, 163, 0.32);
}

.pricing-area .card {
  /* Override marketing `overflow: hidden` so `.card.active::before` (RECOMMENDED) is not clipped. */
  overflow: visible !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  -webkit-box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05);
  box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05);
  -webkit-transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.pricing-area .card:hover {
  -webkit-transform: translateY(-4px) !important;
  transform: translateY(-4px) !important;
  -webkit-box-shadow: 0 18px 48px rgba(2, 6, 23, 0.1);
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.1);
}

/* Kill the inverted "all-caps" hover transform from marketing CSS */
.pricing-area .card::after {
  display: none !important;
}

/* Recommended (active) card — champagne ring + bigger lift */
.pricing-area .card.active {
  border-color: var(--j2p-accent) !important;
  -webkit-box-shadow: 0 16px 48px rgba(231, 207, 163, 0.28),
    inset 0 0 0 1px rgba(231, 207, 163, 0.5) !important;
  box-shadow: 0 16px 48px rgba(231, 207, 163, 0.28),
    inset 0 0 0 1px rgba(231, 207, 163, 0.5) !important;
  position: relative;
}

.pricing-area .card.active::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: -12px;
  inset-inline-start: 24px;
  background: var(--j2p-accent);
  color: #0b1f4d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  -webkit-box-shadow: 0 6px 16px rgba(231, 207, 163, 0.4);
  box-shadow: 0 6px 16px rgba(231, 207, 163, 0.4);
}

/* Reset the marketing on-hover/active "fully invert to gradient" treatment.
   We want the recommended card to STAY white with champagne ring (DesignKit). */
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) {
  background: #ffffff !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) :is(h3, .text, .price, .period, h5, .item-list) {
  color: inherit !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) :is(.text, h5, .item-list) {
  color: #475569 !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .item-list i {
  color: #ffffff !important;
  background: #15803d !important;
  -webkit-box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25) !important;
  box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25) !important;
}

/* Not-included rows: hover/active card rules above use !important on every icon;
   restore muted treatment so disabled features stay gray (same as default card). */
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .item-list li.disabled {
  color: #64748b !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .item-list li.disabled i {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .icon.blue,
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .icon.yellow,
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .icon.green,
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .icon.orange,
.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .icon.primary {
  background: rgba(29, 78, 216, 0.1) !important;
  color: #1d4ed8 !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .secondary-btn {
  border-color: rgba(11, 31, 77, 0.2) !important;
  color: #0b1f4d !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .primary-btn {
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  border-color: var(--j2p-accent-hover) !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .show-more {
  color: #475569 !important;
}

.pricing-area .card:is(.pricing-area .card:hover, .pricing-area .card.active) .label span {
  background: rgba(231, 207, 163, 0.16) !important;
  color: var(--accent-text) !important;
}

/* Pricing icon */
.pricing-area .card .icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(29, 78, 216, 0.1) !important;
  color: #1d4ed8 !important;
  font-size: 22px !important;
  border: 1px solid rgba(29, 78, 216, 0.18);
}

.pricing-area .card .icon.blue,
.pricing-area .card .icon.yellow,
.pricing-area .card .icon.green,
.pricing-area .card .icon.orange {
  background: rgba(29, 78, 216, 0.1) !important;
  color: #1d4ed8 !important;
}

.pricing-area .card h3 {
  color: #0b1f4d !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pricing-area .card .label span {
  background: rgba(231, 207, 163, 0.18);
  color: var(--accent-text);
  border: 1px solid rgba(231, 207, 163, 0.4);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 8px;
}

.pricing-area .card .price {
  color: #0b1f4d !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em;
}

.pricing-area .card .period {
  color: #475569 !important;
  font-weight: 500 !important;
}

.pricing-area .card h5 {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}

.pricing-area .card .item-list li {
  color: #0f172a;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 10px;
}

.pricing-area .card .item-list i {
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  margin-top: 1px;
  text-align: center !important;
  background: #15803d !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  flex-shrink: 0;
  border: 0 !important;
  -webkit-box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25);
  box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25);
}

/* Excluded: readable muted copy, no strikethrough; icon reads as “not included” */
.pricing-area .card .item-list li.disabled {
  color: #64748b;
  font-weight: 400;
}

.pricing-area .card .item-list li.disabled i {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.pricing-area .card .show-more {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-area .card .show-more:hover {
  text-decoration: underline;
}

/* CTA row at bottom */
.pricing-area .card .d-flex.align-items-center:last-of-type {
  margin-top: 28px;
}

/* =========================================================================
   10. User profile / featured shops cards
   ========================================================================= */
.user-profile-area .card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
  -webkit-box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05);
  box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05);
}

.user-profile-area .card .icon img {
  border: 3px solid #ffffff;
  -webkit-box-shadow: 0 8px 22px rgba(2, 6, 23, 0.12);
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.12);
}

.user-profile-area .card .card-content,
.user-profile-area .card .card-content.primary,
.user-profile-area .card .card-content.green,
.user-profile-area .card .card-content.orange {
  background: transparent !important;
}

.user-profile-area .card .card-title {
  color: #0b1f4d !important;
  font-size: 17px;
  font-weight: 700;
}

.user-profile-area .card .social-link a {
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1d4ed8 !important;
  border: 0;
  margin-inline-end: 6px;
  border-radius: 10px;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}

.user-profile-area .card .social-link a:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

.user-profile-area .btn,
.user-profile-area .card .cta-btns .btn.primary-btn {
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  border: 1px solid var(--j2p-accent-hover) !important;
}

.user-profile-area .btn:hover {
  background: var(--j2p-accent-hover) !important;
  color: #0b1f4d !important;
  border-color: var(--j2p-accent-pressed) !important;
}

.user-profile-area .swiper-pagination .swiper-pagination-bullet-active {
  background: #1d4ed8 !important;
}

/* =========================================================================
   11. Testimonial — quote card with bronze quote icon
   ========================================================================= */
.testimonial-area .section-title {
  margin-bottom: 32px;
}

.testimonial-area .section-title .title {
  color: #0b1f4d !important;
  text-align: start;
}

.testimonial-area .image img {
  border-radius: 24px;
  -webkit-box-shadow: 0 18px 48px rgba(2, 6, 23, 0.12);
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.12);
}

.testimonial-area .swiper-slide .slider-item {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  -webkit-box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05);
  box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05);
}

.testimonial-area .swiper-slide .slider-item .quote {
  padding: 28px;
  border-bottom-color: rgba(226, 232, 240, 0.85);
}

.testimonial-area .swiper-slide .slider-item .quote .icon {
  color: var(--j2p-accent) !important;
  font-size: 32px;
  opacity: 0.9;
}

.testimonial-area .swiper-slide .slider-item .quote .text {
  color: #475569;
  font-size: 15px;
  line-height: 1.75;
  margin-top: 14px;
}

.testimonial-area .swiper-slide .slider-item .client {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-area .swiper-slide .slider-item .client .image .lazy-image {
  border-radius: 999px;
  border: 2px solid #ffffff;
  -webkit-box-shadow: 0 4px 12px rgba(2, 6, 23, 0.1);
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.1);
}

.testimonial-area .swiper-slide .slider-item .client .name {
  color: #0b1f4d;
  font-weight: 700;
  margin: 0;
}

.testimonial-area .swiper-slide .slider-item .client .designation {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.testimonial-area .swiper-pagination .swiper-pagination-bullet-active {
  background: #1d4ed8 !important;
}

/* =========================================================================
   12. Blog cards
   ========================================================================= */
.blog-area .card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  -webkit-box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05) !important;
  box-shadow: 0 6px 24px rgba(2, 6, 23, 0.05) !important;
  -webkit-transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.blog-area .card:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  border-color: rgba(29, 78, 216, 0.22) !important;
  -webkit-box-shadow: 0 18px 48px rgba(2, 6, 23, 0.1) !important;
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.1) !important;
}

.blog-area .card .card-image .lazy-container {
  border-radius: 14px;
}

/* "info-list" pill that floats over the image */
.blog-area .card .info-list {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  -webkit-box-shadow: 0 6px 20px rgba(2, 6, 23, 0.08);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.08);
  border-radius: 999px;
}

.blog-area .card .info-list li {
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.blog-area .card .info-list li i {
  color: #1d4ed8;
  font-size: 13px;
}

.blog-area .card .content {
  padding: 18px 8px 6px;
}

.blog-area .card .card-title a:hover {
  color: #1d4ed8 !important;
}

.blog-area .card .card-text {
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}

.blog-area .card .card-btn {
  color: #1d4ed8 !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-area .card .card-btn::after {
  background: #1d4ed8 !important;
}

/* =========================================================================
   13. Page bar (inner pages) — compact strip with quiet luxury finish
   Soft mesh, inset sheen, jewel accent, editorial title, pill breadcrumbs.
   ========================================================================= */
.page-title-area.page-title-area--designkit {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 85% 120% at 100% -30%, rgba(231, 207, 163, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 70% 90% at -5% 110%, rgba(29, 78, 216, 0.07) 0%, transparent 52%),
    linear-gradient(165deg, #ffffff 0%, #f9fafb 42%, #f1f5f9 100%) !important;
  -webkit-box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 14px 36px -18px rgba(15, 23, 42, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 14px 36px -18px rgba(15, 23, 42, 0.12);
}

.page-title-area.page-title-area--designkit .page-hero__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%);
  opacity: 0.9;
}

.page-title-area.page-title-area--designkit .page-hero__accent {
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #fbf3e3 0%, #e7cfa3 42%, #c9a66d 100%);
  -webkit-box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.35) inset,
    2px 0 14px rgba(199, 170, 115, 0.28);
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.35) inset,
    2px 0 14px rgba(199, 170, 115, 0.28);
}

[dir='rtl'] .page-title-area.page-title-area--designkit .page-hero__accent {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-radius: 4px 0 0 4px;
  -webkit-box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.35) inset,
    -2px 0 14px rgba(199, 170, 115, 0.28);
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.35) inset,
    -2px 0 14px rgba(199, 170, 115, 0.28);
}

.page-title-area.page-title-area--designkit .page-hero__container {
  position: relative;
  z-index: 2;
  padding-block: 15px 17px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.page-title-area--designkit .page-hero--bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-inline-start: 4px;
}

[dir='rtl'] .page-title-area--designkit .page-hero--bar {
  padding-inline-start: 0;
  padding-inline-end: 4px;
}

.page-title-area--designkit .page-hero__title {
  color: #0b1f4d !important;
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.22;
  margin: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: min(100%, 11rem);
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.page-title-area--designkit .page-hero__crumb {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-title-area--designkit .page-hero__breadcrumb {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1px 2px;
  max-width: 100%;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  padding: 7px 16px 7px 14px;
  list-style: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 999px;
  -webkit-box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px -6px rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px -6px rgba(15, 23, 42, 0.08);
}

.page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item a {
  color: #64748b;
  text-decoration: none;
  -webkit-transition:
    color 0.18s ease,
    box-shadow 0.18s ease;
  transition:
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item a:hover {
  color: #1d4ed8;
}

.page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item.active {
  color: #0b1f4d;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-inline-start: 0;
}

.page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding: 0 9px 0 0;
  color: rgba(148, 163, 184, 0.85);
  content: '·';
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
}

[dir='rtl'] .page-title-area--designkit .page-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  padding: 0 0 0 9px;
}

.page-title-area--designkit .page-hero__title + * {
  margin-top: 0;
}

.page-title-area--designkit .content > h1:not(.page-hero__title),
.page-title-area--designkit .content > h2,
.page-title-area--designkit .content > h3 {
  color: #0b1f4d !important;
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* First block after the slim page bar: legacy `pt-*` utilities assumed a tall
   fixed header — tighten so the first `.container` aligns with the new chrome. */
.page-title-area.page-title-area--designkit + * {
  padding-top: clamp(1.5rem, 4.5vw, 2.75rem) !important;
}

@media (min-width: 768px) {
  .page-title-area.page-title-area--designkit + * {
    padding-top: clamp(1.75rem, 4vw, 3rem) !important;
  }
}

/* =========================================================================
   14. Footer — deep navy chrome (DesignKit footer)
   ========================================================================= */
.footer-area {
  background: #071537 !important;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.footer-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(29, 78, 216, 0.18) 0%, rgba(29, 78, 216, 0) 50%),
    radial-gradient(circle at 90% 100%, rgba(231, 207, 163, 0.08) 0%, rgba(231, 207, 163, 0) 50%);
  pointer-events: none;
  z-index: 0;
}

.footer-area .container { position: relative; z-index: 1; }

.footer-top {
  padding-top: 72px !important;
  padding-bottom: 56px !important;
}

.footer-area .footer-widget .navbar-brand img {
  filter: brightness(0) invert(1);
  max-height: 36px;
  width: auto;
}

.footer-area .footer-widget h3 {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 22px !important;
}

.footer-area .footer-widget p {
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.75;
}

.footer-area .footer-widget .footer-links li,
.footer-area .footer-widget .info-list li {
  color: rgba(255, 255, 255, 0.78) !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
  font-size: 14px;
}

.footer-area .footer-widget .footer-links a,
.footer-area .footer-widget .info-list a {
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}

.footer-area .footer-widget .footer-links a:hover,
.footer-area .footer-widget .info-list a:hover {
  color: var(--j2p-accent) !important;
}

.footer-area .footer-widget .info-list i {
  color: var(--j2p-accent) !important;
  font-size: 16px !important;
  width: 32px;
  text-align: center;
}

.footer-area .footer-widget .social-link a {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: 10px;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}

.footer-area .footer-widget .social-link a:hover {
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  -webkit-box-shadow: 0 6px 16px rgba(231, 207, 163, 0.32) !important;
  box-shadow: 0 6px 16px rgba(231, 207, 163, 0.32) !important;
}

/* Newsletter input + submit */
.footer-area form#footerSubscriber .input-group {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 6px;
  display: flex;
  align-items: center;
}

.footer-area form#footerSubscriber .form-control {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}

.footer-area form#footerSubscriber .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer-area form#footerSubscriber .btn {
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-weight: 700;
  white-space: nowrap;
}

.footer-area form#footerSubscriber .btn:hover {
  background: var(--j2p-accent-hover) !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* Copyright bar */
.copy-right-area {
  background: #050d22 !important;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

.copy-right-area .copy-right-content,
.copy-right-area span,
.copy-right-area p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.copy-right-area a {
  color: var(--j2p-accent) !important;
}

/* Footer — mobile / tablet horizontal inset (padding on the band, not fighting
   Bootstrap `.container` math — avoids row bleed + invisible gutters). */
@media (max-width: 991.98px) {
  .footer-area .footer-top,
  .footer-area .copy-right-area {
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
  }

  .footer-area .footer-top > .container,
  .footer-area .copy-right-area > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Space above home-indicator + floating controls (theme used ~85px). */
@media (max-width: 767.98px) {
  .footer-area .copy-right-area {
    padding-top: 16px !important;
    padding-bottom: max(5.25rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem)) !important;
  }
}

.footer-area .footer-widget .info-list li span {
  word-break: break-word;
}

.footer-area .copy-right-area .copy-right-content {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* =========================================================================
   15. Misc — Go-to-top button + cookie banner + toastr
   ========================================================================= */
/* Go-top: `#goTop` + stylesheet order after @yield('styles')` so `position:fixed`
   stays viewport-relative. First child of `body` avoids transformed ancestors. */
#goTop.go-top {
  position: fixed !important;
  z-index: 10050 !important;
  top: auto !important;
  left: max(1rem, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  background: var(--j2p-accent) !important;
  color: #0b1f4d !important;
  border-radius: 12px !important;
  -webkit-box-shadow: 0 14px 30px rgba(231, 207, 163, 0.28) !important;
  box-shadow: 0 14px 30px rgba(231, 207, 163, 0.28) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-transform: translate3d(0, 12px, 0) !important;
  transform: translate3d(0, 12px, 0) !important;
  -webkit-transition:
    opacity 0.35s ease,
    -webkit-transform 0.35s ease,
    visibility 0.35s ease !important;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease !important;
}

#goTop.go-top.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

#goTop.go-top.active:hover {
  -webkit-transform: translate3d(0, -3px, 0) !important;
  transform: translate3d(0, -3px, 0) !important;
}

[dir='rtl'] #goTop.go-top {
  left: auto !important;
  right: max(1rem, env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 767.98px) {
  #goTop.go-top {
    bottom: max(6.5rem, calc(env(safe-area-inset-bottom, 0px) + 5.25rem)) !important;
  }
}

#goTop.go-top i {
  color: #0b1f4d;
  line-height: 1;
  font-size: 1.25rem;
}

/* Cookie banner — see j2p-theme.css (shared with tenant storefronts). */

/* Toastr alignment with brand */
#toast-container .toast {
  border-radius: 14px !important;
  -webkit-box-shadow: 0 12px 40px rgba(2, 6, 23, 0.18) !important;
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.18) !important;
  font-family: inherit;
}

/* =========================================================================
   16. Responsive tweaks
   ========================================================================= */
@media (max-width: 991.98px) {
  /* The marketing CSS already hides .main-navbar below 1199px and uses
     meanmenu instead (handled in section 3b). We only need to make sure
     the responsive bar carries the navy chrome through. */
  .header-area .main-responsive-nav {
    background: rgba(11, 31, 77, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    padding: 8px 0;
  }

  .pricing-area .nav-tabs-navigation .nav .nav-link {
    padding: 8px 18px !important;
  }
  .pricing-area .card.active::before {
    inset-inline-start: 16px;
  }
  .footer-area .footer-widget {
    margin-bottom: 32px;
  }
}

/* =========================================================================
   17. RTL polish — bronze chip arrow + breadcrumb separator flipping
   ========================================================================= */
[dir='rtl'] .home-banner .content .subtitle img {
  margin-inline-start: 0;
  margin-inline-end: 4px;
}

[dir='rtl'] .video-btn {
  margin-inline-start: 0;
  margin-inline-end: 14px;
}

[dir='rtl'] .video-btn i {
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

/* =========================================================================
   18. Pricing PAGE revamp (front/pricing.blade.php) — DesignKit upgrade.

   The standalone pricing page (`.pricing-area--page`) layers the following
   on top of the shared `.pricing-area` styles already defined in section 9:
     - Intro block (eyebrow + bold headline + lede)
     - Toggle (already styled — only responsive tweaks here)
     - Card grid with equal-height cards and CTA pinned to the bottom
     - Trust strip (3 reassurance pillars)
     - FAQ accordion (Bootstrap 5 accordion repainted to DesignKit)
     - Final CTA card (deep navy gradient with champagne CTA)
     - Mobile-first responsive refinements

   Scope: every selector below either inherits from `.pricing-area` (so it
   lives entirely inside the marketplace landing) or is namespaced with the
   page-only `.pricing-area--page` modifier to leave the homepage pricing
   section untouched.
   ========================================================================= */

/* -- Page-level vertical rhythm (bottom only; top comes from the rule
   `.page-title-area--designkit + *` so we do not stack with legacy `pt-*`). */
.pricing-area--page {
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  .pricing-area--page {
    padding-bottom: 120px;
  }
}

/* Keep decorative shapes from sliding under content on narrow viewports.
   The shared `.pricing-area .shape img { opacity: 0.12 }` already quiets
   them — we only constrain layout here. */
.pricing-area--page > .container { position: relative; z-index: 2; }

/* -- Intro block. Centered eyebrow chip + bold navy headline + slate lede. */
.pricing-intro {
  margin-bottom: 48px;
}

.pricing-intro-eyebrow {
  display: inline-block;
  color: var(--accent-text);
  background: rgba(231, 207, 163, 0.18);
  border: 1px solid rgba(231, 207, 163, 0.4);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.pricing-intro-title {
  color: #0b1f4d !important;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.pricing-intro-lede {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .pricing-intro { margin-bottom: 32px; }
  .pricing-intro-title { font-size: 28px; }
  .pricing-intro-lede { font-size: 15px; }
}

/* -- Cancel the marketing-template hack from the legacy Blade.
   The old inline `#Lifetime .col-md-6.col-lg-4 { margin: 0 auto }` rule
   forced every card-column to center, which broke 2-column rows on tablet
   when the row count was even. The new Blade uses Bootstrap's
   `justify-content-center` on the row instead — which centers *short* rows
   (<3 items) without distorting full rows. The selector below is a no-op
   safety in case the old Blade is cached anywhere. */
.pricing-area .pricing-grid > [class*='col-'] { margin-left: 0; margin-right: 0; }

/* Equal-height cards: the Blade puts `d-flex` on the col, the inner card
   uses `d-flex flex-column` and `mt-auto` on the CTA row. We just give the
   card a guaranteed full height so taller siblings pull the rest. */
.pricing-area .card.w-100 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Pin CTAs to the card bottom — already handled by Blade's `mt-auto`,
   but we add a top margin floor so the buttons don't crash into the
   feature list when the user has many features. */
.pricing-area .pricing-card-cta {
  margin-top: 24px;
  gap: 10px;
}

.pricing-area .pricing-card-cta .btn {
  flex: 1 1 auto;
  min-width: 120px;
  text-align: center;
  white-space: nowrap;
}

/* The marketing CSS may render single-CTA rows. Make a lone button look
   intentional rather than half-width. */
.pricing-area .pricing-card-cta .btn:only-child {
  flex: 1 1 100%;
}

/* The price + period sometimes wrap awkwardly on very narrow plans
   (e.g. "Free / lifetime"). Force baseline alignment + soft wrap. */
.pricing-area .card .price {
  line-height: 1;
  margin-inline-end: 8px;
}

.pricing-area .card .period {
  font-size: 14px;
  color: #64748b !important;
}

/* -- Toggle (Lifetime / Monthly / Yearly).
   We bypass the legacy `.nav` width quirks (block fallback inside flex
   parents, Bootstrap-default `flex: 1 1 auto` on responsive utilities)
   by addressing the `.pricing-toggle` class added in the Blade. The
   pill sizes to its content and is centered by `.text-center` on the
   surrounding wrapper. */
.pricing-area .nav-tabs-navigation {
  margin: 0 0 40px;
  text-align: center;
}

.pricing-area .nav-tabs-navigation .nav.pricing-toggle {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100%;
  vertical-align: top;
  flex: 0 0 auto !important;
}

@media (max-width: 575.98px) {
  .pricing-area .nav-tabs-navigation .nav.pricing-toggle {
    width: 100% !important;
  }
  .pricing-area .nav-tabs-navigation .nav.pricing-toggle .nav-link {
    padding: 9px 16px !important;
    font-size: 13px !important;
    flex: 1 1 0;
  }
}

/* -- Trust strip — 3 reassurance pillars below the card grid. */
.pricing-area--page .pricing-trust-strip {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
  --bs-gutter-y: 24px;
}

.pricing-area--page .pricing-trust-strip .trust-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0;
}

.pricing-area--page .pricing-trust-strip .trust-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(29, 78, 216, 0.1);
  color: #1d4ed8;
  border: 1px solid rgba(29, 78, 216, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.pricing-area--page .pricing-trust-strip h4 {
  color: #0b1f4d;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.pricing-area--page .pricing-trust-strip p {
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 767.98px) {
  .pricing-area--page .pricing-trust-strip {
    margin-top: 48px;
    padding-top: 40px;
  }
}

/* -- FAQ accordion — Bootstrap 5 reskin to DesignKit. */
.pricing-area--page .pricing-faq {
  margin-top: 80px;
}

.pricing-area--page .pricing-faq-head {
  margin-bottom: 32px;
}

.pricing-area--page .pricing-faq-title {
  color: #0b1f4d !important;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}

.pricing-area--page .pricing-faq .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-area--page .pricing-faq .accordion-item {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 14px !important;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 14px rgba(2, 6, 23, 0.04);
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-area--page .pricing-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(29, 78, 216, 0.28) !important;
  -webkit-box-shadow: 0 12px 32px rgba(2, 6, 23, 0.08);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.08);
}

.pricing-area--page .pricing-faq .accordion-button {
  background: #ffffff !important;
  color: #0b1f4d !important;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  padding: 18px 22px !important;
  box-shadow: none !important;
  border: 0 !important;
  line-height: 1.4;
}

.pricing-area--page .pricing-faq .accordion-button:not(.collapsed) {
  color: #1d4ed8 !important;
  background: rgba(29, 78, 216, 0.04) !important;
}

.pricing-area--page .pricing-faq .accordion-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
}

/* Bootstrap 5's caret icon — repaint to navy/brand. */
.pricing-area--page .pricing-faq .accordion-button::after {
  width: 14px;
  height: 14px;
  background-size: 14px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2375828f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  flex-shrink: 0;
}

.pricing-area--page .pricing-faq .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d4ed8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.pricing-area--page .pricing-faq .accordion-body {
  background: #ffffff !important;
  color: #475569;
  font-size: 15px;
  line-height: 1.7;
  padding: 4px 22px 22px !important;
}

.pricing-area--page .pricing-faq .accordion-body p { margin: 0; }

[dir='rtl'] .pricing-area--page .pricing-faq .accordion-button::after {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 767.98px) {
  .pricing-area--page .pricing-faq { margin-top: 56px; }
  .pricing-area--page .pricing-faq-title { font-size: 24px; }
  .pricing-area--page .pricing-faq .accordion-button {
    font-size: 15px;
    padding: 16px 18px !important;
  }
  .pricing-area--page .pricing-faq .accordion-body {
    font-size: 14px;
    padding: 4px 18px 18px !important;
  }
}

/* -- Final CTA card — navy gradient panel anchoring the page. */
.pricing-area--page .pricing-cta-row {
  margin-top: 80px;
}

.pricing-area--page .pricing-cta-card {
  background:
    radial-gradient(circle at 88% 14%, rgba(231, 207, 163, 0.22) 0%, rgba(231, 207, 163, 0) 55%),
    radial-gradient(circle at 8% 86%, rgba(29, 78, 216, 0.45) 0%, rgba(29, 78, 216, 0) 60%),
    linear-gradient(135deg, #0b1f4d 0%, #1d4ed8 100%);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  -webkit-box-shadow: 0 24px 60px rgba(2, 6, 23, 0.25);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.25);
  position: relative;
  overflow: hidden;
}

.pricing-area--page .pricing-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.pricing-area--page .pricing-cta-content {
  flex: 1 1 360px;
  min-width: 0;
}

.pricing-area--page .pricing-cta-card .pricing-intro-eyebrow {
  background: rgba(231, 207, 163, 0.18);
  color: #f6e4c3;
  border-color: rgba(231, 207, 163, 0.32);
  margin-bottom: 14px;
}

.pricing-area--page .pricing-cta-card h3 {
  color: #ffffff !important;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 26ch;
}

.pricing-area--page .pricing-cta-card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}

.pricing-area--page .pricing-cta-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pricing-area--page .pricing-cta-actions .secondary-btn {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.pricing-area--page .pricing-cta-actions .secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 767.98px) {
  .pricing-area--page .pricing-cta-row { margin-top: 56px; }
  .pricing-area--page .pricing-cta-card {
    padding: 32px 24px;
    border-radius: 20px;
  }
  .pricing-area--page .pricing-cta-card h3 { font-size: 22px; }
  .pricing-area--page .pricing-cta-card p { font-size: 14px; }
  .pricing-area--page .pricing-cta-actions { width: 100%; }
  .pricing-area--page .pricing-cta-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* -- Pricing card refinements for narrow viewports.
   At ≤ 575px the col is `col-12 col-sm-10` — reduce internal padding so
   the feature list keeps comfortable line-length and the card doesn't feel
   crammed. Keep the RECOMMENDED badge anchored to the inline-start so it
   stays visible on RTL and LTR alike. */
@media (max-width: 575.98px) {
  .pricing-area .card {
    padding: 26px 20px !important;
    border-radius: 18px !important;
  }

  .pricing-area .card .price { font-size: 36px !important; }
  .pricing-area .card .icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 19px !important;
  }
  .pricing-area .card .label h3 { font-size: 18px; }
  .pricing-area .card .item-list li { font-size: 13px; }
  .pricing-area .card.active::before {
    inset-inline-start: 14px;
    font-size: 10px;
    padding: 4px 10px;
  }
}

/* -- Page bar: stack on very narrow screens. */
@media (max-width: 575.98px) {
  .page-title-area.page-title-area--designkit .page-hero__accent {
    inset-block: 10px;
  }

  .page-title-area.page-title-area--designkit .page-hero__container {
    padding-block: 13px 15px;
  }

  .page-title-area--designkit .page-hero--bar {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px 0;
    padding-inline-start: 2px;
  }

  .page-title-area--designkit .page-hero__title {
    min-width: 0;
    width: 100%;
    font-size: 1.125rem;
  }

  .page-title-area--designkit .page-hero__crumb {
    width: 100%;
  }

  .page-title-area--designkit .page-hero__breadcrumb {
    width: 100%;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 8px 14px;
  }
}