@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
/* Mono face used by the Teams Plan page (--mono). */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ============================================================================
   BIGDOT DESIGN SYSTEM
   Single merged design system (old + new deduplicated; new values win).
   ============================================================================ */

:root {
  /* Fonts */
  --site-primary-font: "Plus Jakarta Sans", sans-serif !important;
  --site-secondary-font: "Instrument Serif", serif !important;
  --site-tertiary-font: "Bricolage Grotesque", sans-serif !important;

  /* Semantic roles */
  --site-body-font: var(--site-primary-font);
  --site-display-font: var(--site-tertiary-font);

  /* Brand colors (static - never change per theme) */
  --site-primary-color: #1c2d64;    /* deep navy */
  --site-secondary-color: #f2f4ff;  /* soft blue tint */
  --site-tertiary-color: #2255e8;   /* electric blue */
  --site-quaternary-color: #f15a25; /* brand orange */
  --site-cta-color: #f15a25;
  --site-button-bg-color: #f15a25;  /* legacy alias, still referenced */

  /* Text */
  --site-text-color: #1f1f1f;
  --site-text-muted-color: #808080;

  /* State */
  --site-success-color: #16a34a;
  --site-error-color: #dc2626;
  --site-warning-color: #d97706;

  /* Border radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease;
  --bdTransition: 0.3s ease;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--site-body-font) !important;
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.6;
  color: var(--site-text-color);
}

p {
  font-weight: 300;
}

/* ============================================
   COLOR UTILITIES
   ============================================ */
.primaryColor {
  color: var(--site-primary-color) !important;
}

.primaryColor a {
  color: var(--site-primary-color) !important;
}

.primaryBgColor {
  background-color: var(--site-primary-color) !important;
}

.secondaryColor {
  color: var(--site-secondary-color) !important;
}

.secondaryColor a {
  color: var(--site-secondary-color) !important;
}

.secondaryBgColor {
  background-color: var(--site-secondary-color) !important;
}

.tertiaryColor {
  color: var(--site-tertiary-color) !important;
}

.tertiaryBgColor {
  background-color: var(--site-tertiary-color) !important;
}

.headingColor {
  color: var(--site-text-color) !important;
}

.linkColor {
  color: var(--site-primary-color) !important;
}

.linkColor a {
  color: var(--site-primary-color) !important;
}

/* Legacy color utilities (old design system, still referenced) */
.website-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.textBlack1 {
  color: #010101;
}

.textBlack2 {
  color: #313131;
}

.mutedText {
  color: #4b4b4b;
}

.secondaryColor2,
.secondaryColor2:hover {
  color: var(--site-primary-color);
}

.secondaryBg1 {
  background-color: var(--site-primary-color);
}

.blackColor {
  color: #1a181e;
}

/* ============================================
   MISC UTILITIES
   ============================================ */
.cursorPointer {
  cursor: pointer !important;
}

.secondaryFont {
  font-family: var(--site-secondary-font) !important;
}

/* ============================================
   TYPOGRAPHY - FONT WEIGHTS
   ============================================ */
.font400 {
  font-weight: 400 !important;
}

.font500 {
  font-weight: 500 !important;
}

.font600 {
  font-weight: 600 !important;
}

.font700 {
  font-weight: 700 !important;
}

.font800 {
  font-weight: 800 !important;
}

/* ============================================
   TYPOGRAPHY - FONT SIZES (responsive)
   ============================================ */
.font12 {
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.5;
}

.font13 {
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.54;
}

.font14 {
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.5;
}

.font16 {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
}

.font18 {
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.5;
}

.font20 {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
}

.font22 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
}

.font24 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
}

.font26 {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.5;
}

.font30 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.33;
}

.font32 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.35;
}

.font36 {
  font-size: clamp(30px, 3vw, 36px);
  line-height: 1.35;
}

.font40 {
  font-size: clamp(32px, 3.2vw, 40px);
  line-height: 1.45;
}

.font48 {
  font-size: clamp(38px, 3.8vw, 48px);
  line-height: 1.2;
}

.font60 {
  font-size: clamp(48px, 4vw, 60px);
  line-height: 1.15;
}

/* Legacy display sizes (old design system, still referenced) */
.font72 {
  font-size: 72px;
  line-height: 72px;
}

.font225 {
  font-size: 190px;
  line-height: 210px;
}

.font300px {
  font-size: 300px;
  line-height: 210px;
}

/* ============================================
   LINE HEIGHT
   ============================================ */
.lh1 {
  line-height: 1 !important;
}

.lh14 {
  line-height: 1.4 !important;
}

.lh16 {
  line-height: 1.6 !important;
}

.lhNormal {
  line-height: normal !important;
}

/* ============================================
   BORDER RADIUS
   ============================================ */
.br0 {
  border-radius: var(--radius-none) !important;
}

.br4 {
  border-radius: var(--radius-sm) !important;
}

.br8 {
  border-radius: var(--radius-md) !important;
}

.br12 {
  border-radius: var(--radius-lg) !important;
}

.br16 {
  border-radius: var(--radius-xl) !important;
}

.br24 {
  border-radius: var(--radius-2xl) !important;
}

/* Legacy radius names (old design system, still referenced) */
.borderRadius2 {
  border-radius: 8px !important;
}

.borderRadius10 {
  border-radius: 10px !important;
}

/* ============================================
   THEME-AWARE TEXT UTILITIES
   ============================================ */
.bdTextBase {
  color: var(--bdText) !important;
}

.bdTextMuted {
  color: var(--bdTextMuted) !important;
}

/* BIGDOT DESIGN SYSTEM ENDS */

.card {
  border-radius: 10px;
}

.bottomBorder {
  height: 4px;
  background-color: #d9d9d9;
}

.filledBg {
  height: 4px;
  width: 90%;
}

.border-primary td,
.border-secondary td,
.border-teritory td {
  border-width: 2px;
}

.border-secondary {
  border-color: var(--site-primary-color) !important;
}

.orangeBackground p.font20.font500 {
  margin-top: 5px !important;
  margin-bottom: 25px !important;
}

.servicesSection.py-4 p.responsiveTextCenter {
  margin-top: 5px !important;
  margin-bottom: 25px !important;
}

#products p.font20.responsiveTextCenter {
  margin-top: 5px !important;
  margin-bottom: 25px !important;
}

div#gallery {
  max-width: 100% !important;
  padding-left: max(24px, calc(50vw - 640px)) !important;
  padding-right: max(24px, calc(50vw - 640px)) !important;
  margin-top: 70px;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
  background-color: #f4f6fb;
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 6%, transparent) 0%, transparent 70%);
}

div#gallery p.font20.font500 {
  color: #6b7280 !important;
  margin-top: 5px !important;
}

.faqSection p.font20.font500.mt-3.mb-0 {
  margin-top: 5px !important;
}

div#verticals p.font20.font500 {
  margin-top: 5px !important;
}

a {
  text-decoration: none;
}

.w-20 {
  justify-content: center;
  /* display: flex; */
  width: 20%;
}

/* Wizard CSS */

.form-control {
  width: 100%;
  padding: 12px 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  color: #0c121d;
  transition: all 0.2s ease;
}

.form-select {
  padding: 10px 10px;
  border-radius: 10px;
}

.headerLogo {
  width: 125px;
}

/* main css start here */

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .verticalProduct .serviceCard .serviceActions .buyNowButton {
    padding: 8px 20px !important;
  }
}

/* // `xl` applies to large devices (desktops, less than 1200px) */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */

.navbarCss {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}

.shape {
  position: relative;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  z-index: 1;
  background-color: var(--site-primary-color);
  height: 100%;
}

.custom {
  accent-color: #3e31cf !important;
  width: 25px;
  height: 25px;
  vertical-align: bottom;
  margin-right: 5px;
}

.orangeBackground {
  background-image: url("https://bigdot.ai/assets/img/Group%20718.svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0px;
  margin-top: 0px !important;
}

.carousel-indicators [data-bs-target] {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #3e31cf;
}

.carousel-indicators {
  margin-bottom: 6rem !important;
}

.carousel-indicators .active {
  background-color: #3e31cf;
}

.heroSectionBg .icon {
  height: 45px;
}

.borderSecondary {
  border: 1px solid var(--site-primary-color);
}

.borderSecondary:hover {
  border: 1px solid var(--site-primary-color);
}

#heroCaousel img {
  width: unset;
}

@keyframes ripple-white {
  0% {
    box-shadow:
      0 0 0 0 rgb(58, 21, 147, 0.05),
      0 0 0 10px rgb(58, 21, 147, 0.05),
      0 0 0 20px rgb(58, 21, 147, 0.05);
  }

  100% {
    box-shadow:
      0 0 0 10px rgba(58, 21, 147, 0.05),
      0 0 0 20px rgba(58, 21, 147, 0.05),
      0 0 0 30px rgba(58, 21, 147, 0.05);
  }
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  #heroCaousel img {
    width: unset;
    display: block;
    margin: auto;
  }

  #products .row.borderPrimary::before {
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
  }

  .servicesSection .row.m-0::before {
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
  }

  .orangeBackground .row.borderSecondary::before {
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
  }

  .sellAnywhereBeauty p.font20.font500.responsiveTextCenter {
    margin-bottom: 0px !important;
  }

  section#plans p.font16.font500.textBlack1.mb-0 {
    font-weight: 400;
  }

  .productGallery .card.border-0.w-100 p.mb-0 {
    font-size: 13px;
  }

  section.faqSection p.font20.font500.mt-3.mb-0 {
    margin-bottom: 0px !important;
  }

  .font20 {
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: 5px !important;
    font-weight: 400;
    margin-bottom: 15px !important;
  }

  .servicesSection.py-4 p.font20.font500.responsiveTextCenter {
    margin-bottom: 25px !important;
  }

  .custom {
    width: 20px;
    height: 20px;
  }

  .carousel-indicators {
    margin-bottom: 3.5rem !important;
  }

  .filledBg {
    height: 4px;
    width: 80% !important;
  }

  .bottomBorder {
    width: 100% !important;
  }

  .d-grid a.btn.btn-lg {
    padding: 10px 8px;
    font-size: 14px;
  }

  .d-grid a.btn.btn-lg .ms-2 {
    margin-left: 0.2rem !important;
  }

  .orangeBackground {
    padding: 25px 15px 0px;
    margin-top: 30px !important;
    background-attachment: fixed;
  }

  div#verticals {
    margin-top: 0px !important;
  }

  .scrolldiv .items {
    display: inline-block;
    width: 140px;
  }

  .caveatFont.textBlack1 {
    margin-top: 20px;
  }

  .heroSectionRightBG .col-md-6.col-6 {
    margin-bottom: 10px;
  }

  .backgroundBg .btn.teritaryBg {
    margin-top: 0px !important;
  }

  .backgroundBg .row.pb-5 {
    padding-bottom: 30px !important;
  }

  .bookingbackgroundBg .btn.teritaryBg {
    margin-top: 0px !important;
  }

  .bookingbackgroundBg .row.pb-5 {
    padding-bottom: 30px !important;
  }

  .bookingHero {
    width: 325px;
    margin: 0 auto;
  }

  /* .col-md-6.mt-4.font600.blackColor {
    margin-top: 0px !important;
  } */

  .card.border-0.w-100 .darkBlueBg {
    text-align: left !important;
    padding: 12px 8px !important;
  }

  .heroSection .ProductPage {
    max-height: 290px;
  }

  .orderingFooterSection .TermsAndConditions {
    text-align: left;
  }

  .productGallery .card.border-0.w-100 .darkBlueBg a.text-white {
    font-size: 13px;
  }

  .card.border-0.w-100 .darkBlueBg a.text-white img.img-fluid {
    width: 12px;
  }

  .card.border-0.w-100 .yellowBg1 {
    text-align: center !important;
  }

  .card.border-0.w-100 .greenBg1 {
    background-color: #1a9a2f;
    text-align: center !important;
  }

  .font36 {
    margin-bottom: 5px;
  }

  /* Rahman Changes */
  .col-12.borderPink.p-lg-3.py-3 {
    margin-bottom: 15px;
  }

  .row.footerResponsive.pt-lg-5.pt-0.font16.font500 {
    display: flex;
    flex-direction: column;
  }

  .col-md-6.col-lg-4.bizcard-primary-border2.p-lg-4.py-3 {
    margin-bottom: 15px;
  }

  .col-md-6.col-lg-4.booking-primary-border2.p-lg-4.py-3 {
    margin-bottom: 15px;
  }
}

.marginTop-15 {
  margin-top: -15px;
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) and (max-width: 1100px) {
  .carousel-indicators {
    margin-bottom: 3.5rem !important;
  }

  .bigdotLogoFooter {
    width: 80px !important;
  }

  .scrolldiv .items {
    display: inline-block;
  }
}

.BigDotPurchaseHeader .LanguageSection span#headerLanguage {
  border: 1px solid #fff;
  background: var(--site-primary-color);
}

/* megamenu css start here */

.navbar .has-megamenu {
  position: static !important;
}

.navbar .megamenu {
  left: 50% !important;
  right: auto !important;
  width: 720px !important;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
  padding: 0;
  overflow: hidden;
}

.megamenuInner {
  padding: 20px 24px 24px;
}

.megamenuSectionLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.megamenuItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
  margin-bottom: 2px;
}

.megamenuItem:hover {
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  text-decoration: none;
}

.megamenuItem:hover .megamenuIcon {
  background: color-mix(in srgb, var(--site-primary-color) 20%, transparent);
}

.megamenuIcon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  transition: background 0.15s ease;
}

.megamenuIcon i {
  font-size: 17px;
  color: var(--site-primary-color);
}

.megamenuContent h4 {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 2px;
  line-height: 1.3;
}

.megamenuContent p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.navbar-expand-lg .navbar-nav {
  position: initial;
}

.navbar li .dropdown-menu.fade-down {
  width: 100% !important;
}

.mat-mdc-form-field-infix.ng-tns-c3736059725-0 {
  padding: 10px !important;
}

.mdc-notched-outline {
  height: 45px !important;
}

.mat-mdc-form-field {
  height: 0px !important;
}

.mdc-text-field--outlined .mdc-text-field__input {
  padding: 10px 0px !important;
  font-size: 14px !important;
  color: #4e5255 !important;
}

.mat-mdc-form-field-infix.ng-tns-c3736059725-0 {
  padding: 0px 0px !important;
  font-size: 15px !important;
  color: #dee2e6 !important;
}

.sellAnywhereBeauty .font500.responsiveTextCenter.mt-3 {
  margin-top: 5px !important;
  margin-bottom: 0px !important;
}

.planSection p.font16.font500.textBlack1.mb-0 {
  margin-top: 10px;
}

.planSection p.font42.blackColor {
  margin-bottom: 10px !important;
}

.dropdown,
.dropdown-center,
.dropend,
.dropstart,
.dropup,
.dropup-center {
  position: initial;
}

.btn-whatsapp {
  background-color: #25d366;
  color: white;
  font-weight: 500;
  padding: 10px;
  border-radius: 4px;
}

.btn-whatsapp:hover {
  background-color: #128c7e;
  color: white;
}

/* megamenu css end here */

/* Rahman changes */
img.img-fluid.pluginsImage {
  width: 115px;
  height: 115px;
}

.newsArticleSlide .col-md-6 {
  position: relative;
}

.newsArticleSlide .col-md-6:first-child {
  background-image: url("https://cdn.create.vista.com/api/media/small/203505026/stock-vector-morning-coffee-and-newspaper-on-table");
  background-size: cover;
  background-position: center;
  height: 500px;
}

.newsArticleSlide .col-md-6:last-child {
  background: var(--site-primary-color);
  height: 380px;
  margin-left: -50px;
  max-width: 600px;
  z-index: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.newsArticleSlide .owl-carousel .item {
  padding: 20px;
  text-align: center;
}

.newsArticleSlide .owl-carousel .item img {
  width: 200px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 575.98px) {
  .newsArticleSlide .col-md-6:last-child {
    margin-left: 0px;
  }

  .newsArticleSlide .col-md-6:first-child {
    display: none;
  }

}

.navbarCss .navbar-nav li.nav-item a.nav-link {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

.bigdotUpiFooter p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0px;
  line-height: 14px;
  text-align: right;
  font-size: 14px;
}

.navbar.borderBottom {
  border-bottom: 1px solid #d4d4d4;
}

.mainSection .WebsiteSection:nth-child(1) {
  text-align: left;
}

.mainSection .WebsiteSection:nth-child(2) {
  text-align: right;
}

@media (max-width: 767px) {
  .container .productThreePrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .productGallery .nav-tabs .nav-link {
    margin-bottom: 15px;
  }

  .navbar .megamenu {
    width: 100% !important;
    transform: initial;
    left: 0 !important;
    border-radius: 12px;
    margin-top: 6px;
  }

  .container .productThreePrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productThreeBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productThreePrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productFourPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productFourPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productFourBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productFourPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productFivePrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productFivePrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productFiveBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productFivePrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productSixPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productSixPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  body .orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(2) {
    border-top: 1px solid var(--site-primary-color) !important;
    border-bottom: 1px solid var(--site-primary-color) !important;
    border-right: 0px !important;
    border-left: 0px !important;
  }

  body .orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(5) {
    border: 0px !important;
  }

  body .orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(8) {
    border-bottom: 1px solid var(--site-primary-color) !important;
    border-top: 1px solid var(--site-primary-color) !important;
    border-right: 0px !important;
    border-left: 0px !important;
  }

  .container .productSixBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productSixPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productSevenPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productSevenPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productSevenBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productSevenPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productEightPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productEightPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productEightBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productEightPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productNinePrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productNinePrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productNineBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productNinePrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .heroSection .mainSection {
    display: block !important;
  }
}

.orangeBackground .content-wrapper .secondaryBg1.filledBg.w-75 {
  background-color: #f87d33 !important;
}

.orangeBackground .exploreLink {
  text-decoration: none;
  color: #f87d33;
  font-size: 16px;
  display: block;
  font-weight: 500;
  z-index: 1;
  position: relative;
  text-decoration: underline;
}

.productGallery .nav-tabs .nav-link {
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  background: #fff;
  border: 1px solid #e5e7eb !important;
  border-radius: 100px;
  padding: 8px 22px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.productGallery .nav-tabs .nav-link:hover {
  background: color-mix(in srgb, var(--site-primary-color) 6%, #fff);
  color: var(--site-primary-color);
  border-color: color-mix(in srgb, var(--site-primary-color) 30%, transparent) !important;
}

.productGallery .nav-tabs .nav-link.active {
  border: 1px solid transparent !important;
  background: var(--site-primary-color);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--site-primary-color) 35%, transparent);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border: 0px;
  outline: initial;
}

.productGallery .col-md-4:nth-child(1) .darkBlueBg {
  background: linear-gradient(to top, var(--site-primary-color) 0%, var(--site-primary-color) 45%, color-mix(in srgb, var(--site-primary-color) 40%, transparent) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(2) .darkBlueBg {
  background: linear-gradient(to top, #9b6c00 0%, #b07d00 45%, rgba(176, 125, 0, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(3) .darkBlueBg {
  background: linear-gradient(to top, #0a5218 0%, #0d6b20 45%, rgba(13, 107, 32, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(4) .darkBlueBg {
  background: linear-gradient(to top, #280805 0%, #3a0b07 45%, rgba(58, 11, 7, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(5) .darkBlueBg {
  background: linear-gradient(to top, #800012 0%, #a00018 45%, rgba(160, 0, 24, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(6) .darkBlueBg {
  background: linear-gradient(to top, #2d0a55 0%, #3a0d6e 45%, rgba(58, 13, 110, 0.4) 80%, transparent 100%);
}

.productGallery .card.border-0.w-100 {
  position: relative;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.productGallery .card.border-0.w-100:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 0 2px color-mix(in srgb, var(--site-primary-color) 20%, transparent);
}

.faqSection {
  padding: 30px 0;
}

.accordionItem .accordion-body {
  font-weight: 300;
  padding-top: 0px;
  font-size: clamp(12px, 1.1vw, 15px);
}

.faqSection .accordionButton {
  font-weight: 600;
  background-color: #fff;
  box-shadow: none !important;
  position: relative;
  color: #1a181f;
  font-size: 20px;
}

/* Default icon (+) */
.faqSection .accordionButton::after {
  content: "+";
  font-size: 24px;
  font-weight: 500;
  position: absolute;
  right: 10px;
  top: 45%;
  transform: translateY(-55%);
  color: var(--site-primary-color);
  background-image: none !important;
}

/* Active state icon (-) */
.accordionButton:not(.collapsed)::after {
  content: "-";
}

.accordionItem {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid #d9d9d9;
}

.accordionItem .accordionHeader {
  margin: 0px;
}

.footerSection {
  border-top: 2px dashed #bcbcbc;
  margin-top: 15px;
  padding: 15px 0;
}

.TermsAndConditions {
  text-align: right;
}

.TermsAndConditions a {
  color: #212529;
  font-size: 14px;
}

/* main css end here */

.BigDotPurchaseHeader {
  position: absolute;
  width: 100%;
  margin-top: 10px;
  z-index: 100;
}

.container.header {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 100px;
}

.bigdotSalesHeader .container.header a.nav-link {
  color: #1a1a1a !important;
}

.BigDotPurchaseHeader .container.header a.nav-link {
  color: #fff;
}

.BigDotPurchaseHeader .LanguageSection p.text-white {
  color: #fff !important;
}

.bigdotSalesHeader .LanguageSection p.text-white {
  color: #1a1a1a !important;
}

.BigDotPurchaseHeader p#headerCartwrapper i {
  color: #fff !important;
}

.bigdotSalesHeader p#headerCartwrapper i {
  color: var(--site-primary-color) !important;
}

.BigDotPurchaseHeader .header a.navbar-brand img {
  width: 80px;
}

.LanguageSection span#headerLanguage {
  border-radius: 50px;
  background: var(--site-primary-color);
  width: 80px;
  font-size: 14px;
  padding: 6px 6px;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.LanguageSection {
  display: flex;
  align-items: center;
}

.LanguageSection span#headerLanguage select#headerLanguage-dropdopwn {
  width: 80px;
  background-color: var(--site-primary-color);
  border: 0px;
  color: #fff;
  cursor: pointer;
}

.heroSection {
  background-color: color-mix(in srgb, var(--site-primary-color) 18%, #05020d);
  background-image:
    radial-gradient(ellipse 65% 55% at 15% 30%,
      color-mix(in srgb, var(--site-primary-color) 35%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 70%,
      color-mix(in srgb, var(--site-primary-color) 20%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 50%,
      color-mix(in srgb, var(--site-primary-color) 8%, transparent) 0%,
      transparent 70%);
  padding: 140px 0;
  color: white;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.heroSection::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.heroSection>* {
  position: relative;
  z-index: 1;
}

.heroSection .mainSection {
  display: flex;
  justify-content: space-between;
  margin: 40px 0px;
}

.mainSection .WebsiteSection p {
  margin-bottom: 5px !important;
  font-size: 16px;
}

.mainSection .WebsiteSection h3 {
  font-size: 40px;
  font-weight: 600;
}

.heroSection .searchBar .input-group {
  width: 100%;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--site-primary-color);
  box-shadow: 0px 0px 18px var(--site-secondary-color);
}

.heroSection .searchBar input.form-control {
  padding: 12px;
}

/* .orangeBackground .row.borderSecondary {
    border-radius: 10px;
    overflow: hidden;
} */
.orangeBackground .row.borderSecondary {
  position: relative;
  border: 1px solid #f87d33;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 0px 20px #f87d33;
}

.orangeBackground .row.borderSecondary::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid #f87d33;
  border-radius: 10px;
  opacity: 0.8;
  box-shadow: 0px 4px 4px #f87d33;
}

.orangeBackground .col-12 .row.borderSecondary .col-md-6.col-lg-4.borderSecondary.p-lg-3.py-3 {
  border: 0px;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(2) {
  border-right: 1px solid #f87d33 !important;
  border-left: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(4) {
  border-top: 1px solid #f87d33 !important;
  border-bottom: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(5) {
  border: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(6) {
  border-top: 1px solid #f87d33 !important;
  border-bottom: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(8) {
  border-right: 1px solid #f87d33 !important;
  border-left: 1px solid #f87d33 !important;
}

#products .row.borderPrimary {
  position: relative;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 20px var(--site-primary-color);
}

#products .row.borderPrimary::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  opacity: 0.8;
  z-index: -1;
  box-shadow: 0px 4px 4px var(--site-primary-color);
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6.borderPrimary.p-lg-3.py-3 {
  border: 0px;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(2) {
  border-right: 1px solid var(--site-primary-color) !important;
  border-left: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(4) {
  border-top: 1px solid var(--site-primary-color) !important;
  border-bottom: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(5) {
  border: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(6) {
  border-top: 1px solid var(--site-primary-color) !important;
  border-bottom: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(8) {
  border-right: 1px solid var(--site-primary-color) !important;
  border-left: 1px solid var(--site-primary-color) !important;
}

.heroSection .searchBar .input-group i {
  position: absolute;
  right: 10px;
  background-color: var(--site-primary-color);
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  border-radius: 100px;
  overflow: hidden;
  font-size: 15px;
}

.ProductPage {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  margin-top: 8px;
  max-height: 320px;
  padding: 10px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ProductPage::-webkit-scrollbar {
  width: 4px;
}

.ProductPage::-webkit-scrollbar-track {
  background: transparent;
}

.ProductPage::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.ProductPage ul {
  padding: 0;
  margin: 0;
}

.ProductPage ul li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.ProductPage ul li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-bottom: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ProductPage ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ProductPage ul li:hover a {
  color: #fff;
}

.seeHowBtn {
  background-color: #2c2b2ba8;
  color: white;
  border-radius: 100px;
  padding: 10px 15px;
  font-size: 18px;
  margin-top: 30px;
  border: 2px solid var(--site-primary-color);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--site-primary-color) 70%, transparent),
    0 0 20px color-mix(in srgb, var(--site-primary-color) 50%, transparent);
  transition: 0.3s;
}

.seeHowBtn:hover {
  background-color: #2c2b2ba8;
}

.servicesSection .serviceCard {
  background: #fff;
  padding: 20px 10px;
  text-align: center;
}

.servicesSection .row.m-0 {
  position: relative;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 0 20px rgba(255, 90, 31, 0.4);
  box-shadow: 0px 0px 20px var(--site-primary-color);
}

.servicesSection .row.m-0::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  opacity: 0.8;
  z-index: -1;
  box-shadow: 0px 4px 4px var(--site-primary-color);
}

.serviceIcon img {
  width: 50px;
  height: 50px;
}

.servicesSection .serviceCard h3 {
  font-size: 1.25rem;
  margin: 10px 0;
  color: #333;
}

.servicesSection .serviceCard p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.serviceCard .serviceActions .buyNowButton {
  background-color: var(--site-primary-color);
  color: white;
  border: none;
  padding: 8px 40px;
  cursor: pointer;
  border-radius: 100px;
  font-size: 16px;
  margin-bottom: 20px;
}

.serviceCard .serviceActions .buyNowButton:hover {
  background-color: var(--site-primary-color);
}

.serviceCard .serviceActions {
  text-align: center;
}

.serviceCard .serviceActions .exploreLink {
  text-decoration: none;
  color: var(--site-primary-color);
  font-size: 16px;
  display: block;
}

.serviceCard .serviceActions .exploreLink:hover {
  text-decoration: underline;
}

.servicesSection .serviceCard.col-md-3:nth-child(2) {
  border-right: 1px solid var(--site-primary-color);
  border-left: 1px solid var(--site-primary-color);
}

.servicesSection .serviceCard.col-md-3:nth-child(3) {
  border-right: 1px solid var(--site-primary-color);
}

/* Responsive design */
@media (max-width: 768px) {
  .servicesSection .serviceCard.col-md-3:nth-child(2) {
    border-top: 1px solid var(--site-primary-color);
    border-bottom: 1px solid var(--site-primary-color);
    border-right: 0px;
    border-left: 0px;
  }

  .servicesSection .serviceCard.col-md-3:nth-child(3) {
    border-right: 0px;
    border-bottom: 1px solid var(--site-primary-color);
  }

  .servicesSection .row {
    margin: 0px;
  }

  .BigDotPurchaseHeader .container.header {
    z-index: 1;
    margin-right: 10px;
    margin-left: 10px;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader button.navbar-toggler i {
    color: var(--site-primary-color) !important;
  }

  .BigDotPurchaseHeader button.navbar-toggler i {
    color: #fff !important;
  }

  .BigDotPurchaseHeader div#navbarNav {
    background: var(--site-primary-color);
    padding: 10px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 70px;
  }

  .BigDotPurchaseHeader span.navbar-toggler-icon {
    display: none;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader .container.header a.nav-link {
    color: #fff !important;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader button.navbar-toggler {
    border: 1px solid var(--site-primary-color);
  }

  .BigDotPurchaseHeader button.navbar-toggler {
    border: 1px solid #fff;
  }

  .btnBrochure {
    margin-top: 15px;
  }
}

/* ============================================================
   Modern mobile navigation — animated hamburger + dropdown panel.
   Applies while the navbar is collapsed (below the lg breakpoint,
   <992px). Overrides the legacy mobile menu rules above.
   ============================================================ */
@media (max-width: 991.98px) {

  /* --- Animated hamburger button --- */
  .BigDotPurchaseHeader .navbar-toggler.bdHamburger {
    width: 42px;
    height: 42px;
    padding: 0;
    border: none !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader .navbar-toggler.bdHamburger {
    background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger:hover {
    background: rgba(255, 255, 255, 0.22);
  }

  .BigDotPurchaseHeader.bigdotSalesHeader .navbar-toggler.bdHamburger:hover {
    background: color-mix(in srgb, var(--site-primary-color) 16%, transparent);
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger:focus,
  .BigDotPurchaseHeader .navbar-toggler.bdHamburger:active {
    box-shadow: none !important;
    outline: none !important;
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger .bdHamburgerBox {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger .bdHamburgerBar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease,
      top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .BigDotPurchaseHeader.bigdotSalesHeader .navbar-toggler.bdHamburger .bdHamburgerBar {
    background: var(--site-primary-color);
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger .bdHamburgerBar:nth-child(1) {
    top: 0;
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger .bdHamburgerBar:nth-child(2) {
    top: 7px;
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger .bdHamburgerBar:nth-child(3) {
    top: 14px;
  }

  /* Open state — Bootstrap removes `.collapsed` while the menu is expanded */
  .BigDotPurchaseHeader .navbar-toggler.bdHamburger:not(.collapsed) .bdHamburgerBar:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger:not(.collapsed) .bdHamburgerBar:nth-child(2) {
    opacity: 0;
  }

  .BigDotPurchaseHeader .navbar-toggler.bdHamburger:not(.collapsed) .bdHamburgerBar:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  /* --- Dropdown panel --- */
  .BigDotPurchaseHeader div#navbarNav {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% + 6px);
    width: auto;
    padding: 8px;
    background: var(--site-primary-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(2, 8, 40, 0.42);
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
  }

  .BigDotPurchaseHeader div#navbarNav .navbar-nav {
    width: 100%;
    margin: 0 !important;
  }

  .BigDotPurchaseHeader div#navbarNav .navbar-nav>.nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .BigDotPurchaseHeader div#navbarNav .navbar-nav>.nav-item:last-child {
    border-bottom: none;
  }

  .BigDotPurchaseHeader div#navbarNav .navbar-nav>.nav-item>.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 12px !important;
    margin: 2px 0;
    border-radius: 10px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.15s ease;
  }

  .BigDotPurchaseHeader div#navbarNav .navbar-nav>.nav-item>.nav-link:hover,
  .BigDotPurchaseHeader div#navbarNav .navbar-nav>.nav-item>.nav-link:focus,
  .BigDotPurchaseHeader div#navbarNav .navbar-nav>.nav-item.show>.nav-link {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Modern chevron in place of Bootstrap's default caret */
  .BigDotPurchaseHeader div#navbarNav .dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px 2px 0;
    border: 2px solid currentColor;
    border-left: 0;
    border-top: 0;
    border-radius: 1px;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    vertical-align: middle;
  }

  .BigDotPurchaseHeader div#navbarNav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

  /* --- Mega menu rendered inline inside the mobile panel --- */
  .BigDotPurchaseHeader div#navbarNav .megamenu {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    inset: auto !important;
    margin: 2px 0 8px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(2, 8, 40, 0.2) !important;
    background: #fff;
  }

  .BigDotPurchaseHeader div#navbarNav .megamenuInner {
    padding: 8px !important;
  }

  .BigDotPurchaseHeader div#navbarNav .megamenuSectionLabel {
    margin: 4px 6px 6px;
  }

  .BigDotPurchaseHeader div#navbarNav .megamenuItem {
    margin-bottom: 0;
  }

  .BigDotPurchaseHeader div#navbarNav .megamenuContent h4 {
    font-size: 15px;
  }

  /* --- Language + cart row --- */
  .BigDotPurchaseHeader div#navbarNav .LanguageSection {
    width: 100%;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    justify-content: space-between;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .BigDotPurchaseHeader .container.header {
    background-color: var(--site-primary-color);
    border-radius: 0px;
    z-index: 1;
  }

  .BigDotPurchaseHeader button.navbar-toggler {
    border-color: #fff;
  }

  .BigDotPurchaseHeader span.navbar-toggler-icon {
    display: none;
  }
}

.LanguageSection button.dropdown-toggle.font16:active {
  border: 0px;
}

.planSection .product-bg-primary {
  background-color: var(--site-primary-color);
}

.product-bg-primary {
  background-color: var(--site-primary-color);
}

.product-bg-primary:hover {
  background-color: var(--site-primary-color);
}

.product-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

.product-color {
  color: var(--site-primary-color) !important;
}

.planSection .product-color {
  color: var(--site-primary-color) !important;
}

.planSection .bottomBorder.w-20 {
  margin: 0 auto;
}

.planCard p {
  text-align: left;
}

.BigDotPurchaseHeader a.navbar-brand {
  background-color: #fff;
  width: 120px;
  text-align: center;
  border-radius: 100px;
  padding: 10px;
  margin-left: -5px !important;
}

.BigDotPurchaseHeader.bigdotSalesHeader a.navbar-brand {
  padding: 0px !important;
  width: auto !important;
}

.featuresList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  font-size: clamp(11px, 1.1vw, 16px);
  color: #1a1a1a;
  margin-bottom: 40px !important;
  background-color: var(--site-secondary-color);
  width: 80%;
  margin: 0 auto;
  padding: 8px;
  border-radius: 100px;
}

.planCard {
  position: relative;
  background: #fff;
  color: #1a1a2e;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
  height: 100%;
  overflow: hidden;
}

.planCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--site-primary-color);
  border-radius: 16px 16px 0 0;
}

.planCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.planBadge {
  display: inline-block;
  background: color-mix(in srgb, var(--site-primary-color) 12%, transparent);
  color: var(--site-primary-color);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.3px;
}

.planTitle {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

.planFeatures {
  margin: 4px 0 0;
  padding: 0;
}

.planFeatureItem {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

.planFeatureIcon {
  color: var(--site-primary-color);
  font-size: 14px;
}

.planPrice {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

.planCurrency {
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
}

.planCartBtn {
  background: var(--site-primary-color);
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.planCartBtn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.exploreBanner {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
  border-radius: 10px;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  flex-wrap: wrap;
}

.exploreText {
  font-size: 16px;
  font-weight: 500;
}

.btnBrochure {
  background: #fff;
  color: var(--site-primary-color);
  font-size: 14px;
  font-weight: 500;
  border-radius: 30px;
  padding: 6px 18px;
  border: none;
  transition: all 0.3s ease-in-out;
}

.btnBrochure:hover {
  background: #f1f1f1;
  color: var(--site-primary-color);
}

.vertical-bg-primary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.vertical-primary-border2 {
  border: 1px solid var(--site-primary-color);
}

.vertical-color {
  color: var(--site-primary-color);
}

.vertical-primary-border {
  border: 1px solid var(--site-primary-color);
}

.vertical-bg-primary:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalPages .serviceCard .serviceActions .buyNowButton {
  background-color: var(--site-primary-color);
  padding: 8px 50px;
  border-radius: 100px;
}

.verticalPages.servicesSection .row {
  border: 1px solid var(--site-primary-color);
}

.verticalPages .serviceCard .serviceActions .exploreLink {
  color: var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard {
  border-right: 1px solid var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard:last-child {
  border-right: 0px;
}

.servicesSection.verticalPages.py-4 .website-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.verticalProduct .serviceCard .serviceActions .buyNowButton {
  padding: 10px 50px;
  border-radius: 100px;
}

.verticalProduct.servicesSection .serviceCard {
  border-right: 1px solid var(--site-primary-color);
}

.verticalProduct.servicesSection .serviceCard:last-child {
  border-right: 0px;
}

.verticalPageOne.exploreBanner {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageOne .btnBrochure {
  color: var(--site-primary-color);
}

@media (max-width: 767px) {
  .verticalPages.servicesSection .serviceCard {
    border-bottom: 1px solid var(--site-primary-color);
  }

  .LanguageSection p#headerCartwrapper i {
    color: #fff !important;
  }

  #cartCountIcon {
    right: -15px !important;
    top: -10px;
    background: #fff !important;
    color: var(--site-primary-color) !important;
  }

  .productGallery .col-md-4.mt-4.mt-lg-4.d-flex {
    margin-top: 0px !important;
    margin-bottom: 15px;
  }

  .col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(2) {
    border-right: 0px !important;
    border-left: 0px !important;
    border-top: 1px solid var(--site-primary-color) !important;
    border-bottom: 1px solid var(--site-primary-color) !important;
  }

  .col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(8) {
    border-right: 0px !important;
    border-left: 0px !important;
    border-top: 1px solid var(--site-primary-color) !important;
    border-bottom: 1px solid var(--site-primary-color) !important;
  }

  .col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(5) {
    border: 0px !important;
  }

  .BigDotPurchaseHeader nav.navbar {
    padding: 0px;
  }

  .seeHowBtn {
    margin-top: 0px;
  }

  .verticalPages.servicesSection .serviceCard:last-child {
    border-bottom: 0px;
  }

  .verticalProduct.servicesSection .serviceCard {
    border-bottom: 1px solid var(--site-primary-color);
  }

  .verticalProduct.servicesSection .serviceCard:last-child {
    border-bottom: 0px;
  }

  .productGallery .card.border-0.w-100 {
    height: 200px;
  }

  .verticalProduct .serviceCard .serviceActions .buyNowButton {
    padding: 8px 40px !important;
  }

  .getEssentialBtn {
    margin-top: 15px;
  }
}

.marketingText {
  font-size: 18px;
  font-weight: bold;
  color: var(--site-primary-color);
  /* purple */
  display: flex;
  align-items: center;
  gap: 10px;
}

.marketingText .dot {
  height: 8px;
  width: 8px;
  background-color: var(--site-secondary-color);
  /* orange-red */
  border-radius: 50%;
  display: inline-block;
}

.getEssentialBtn {
  text-align: center;
  width: 100%;
  background-color: var(--site-primary-color);
  border-radius: 100px;
  color: #fff;
  padding: 10px;
}

.getEssentialBtn:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.btnCardSubmit a.d-block {
  width: 100%;
  background: var(--site-primary-color);
  padding: 12px;
  font-weight: 600;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.extraOptions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.optBtn {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 15px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Box ki size fix rakhte hain taaki hover pe hile nahi */
  width: 120px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Icon hamesha center mein rahega */
.optBtn i {
  color: var(--site-primary-color);
  font-size: 30px;
  transition: transform 0.3s ease;
}

/* Text ko by default chhupa denge */
.optBtn span {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  margin-top: 0;
}

.optBtn:hover span {
  opacity: 1;
  max-height: 50px;
  margin-top: 8px;
}

.planCardBox {
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  max-width: 100%;
}

.planTenureLabel {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.planTenureSelect {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  color: #1a1a2e;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.planTenureSelect:focus {
  border-color: var(--site-primary-color);
}

.optBtn:hover i {
  transform: translateY(-5px);
}

.optBtn:hover {
  background-color: #f9f9f9;
  border-color: var(--site-primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover Effect */

.promoCode {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.selectedPlan .planCard {
  padding-bottom: 30px;
}

.selectedPlan .planCard {
  padding-bottom: 40px;
}

/* .exploreBanner.secondaryBg3 {
    background: var(--site-primary-color);
    border: 2px solid var(--site-secondary-color);
}

.exploreBanner.secondaryBg3 .btnBrochure {
    color: var(--site-secondary-color);
} */

/* Product page 3 theme css start here */

.row.productThreePrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageThree {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageThree .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 3 theme css end here */

/* Product page 4 theme css start here */

.row.productFourPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageFour {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageFour .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 4 theme css end here */

/* Product page 5 theme css start  here */

.row.productFivePrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageFive {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageFive .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 5 theme css end here */

/* Product page 6 theme css start  here */

.row.productSixPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageSix {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageSix .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 6 theme css end here */

/* Product page 7 theme css start  here */

.row.productSevenPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageSeven {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageSeven .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 7 theme css end here */

/* Product page 8 theme css start  here */

.row.productEightPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageEight {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageEight .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 8 theme css end here */

/* Product page 9 theme css start  here */

.row.productNinePrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.exploreBanner.productPageNine {
  background: linear-gradient(90deg,
      var(--site-tertiary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageNine .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 9 theme css end here */

/* vertical page 1 theme css start here */

.marketingText.verticalDotOne {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotOne .dot {
  background-color: #000;
}

/* vertical page 1 theme css end here */

/* vertical page 2 theme css start here */

.marketingText.verticalDotTwo {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotTwo .dot {
  background-color: #000;
}

.verticalTwoBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalTwoBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalTwoPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalTwoPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageTwo {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageTwo .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 3 theme css end here */

.marketingText.verticalDotThree {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotThree .dot {
  background-color: #000;
}

.verticalThreeColor {
  color: var(--site-primary-color);
}

.verticalThreeBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalThreeBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalThreePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalThreePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPagethree {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPagethree .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 3 theme css end here */

/* vertical page 4 theme css end here */

.marketingText.verticalDotFour {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotFour .dot {
  background-color: #000;
}

.verticalFourColor {
  color: var(--site-primary-color);
}

.verticalFourBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalFourBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalFourPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalFourPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageFour {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageFour .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 4 theme css end here */

/* vertical page 5 theme css end here */

.marketingText.verticalPageFive {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalPageFive .dot {
  background-color: #000;
}

.verticalFiveColor {
  color: var(--site-primary-color);
}

.verticalFiveBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalFiveBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalFivePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalFivePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageFive {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageFive .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 5 theme css end here */

/* vertical page 6 theme css end here */

.marketingText.verticalDotSix {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotSix .dot {
  background-color: #000;
}

.verticalSixBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalSixBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalSixPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalSixPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageSix {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageSix .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 6 theme css end here */

/* vertical page 7 theme css end here */

.marketingText.verticalDotSeven {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotSeven .dot {
  background-color: #000;
}

.verticalSevenBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalSevenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalSevenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalSevenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageSeven {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageSeven .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 7 theme css end here */

/* vertical page 8 theme css end here */

.marketingText.verticalDotEight {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotEight .dot {
  background-color: #000;
}

.verticalEightBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalEightBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalEightPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalEightPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageEight {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageEight .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 8 theme css end here */

/* vertical page 9 theme css end here */

.marketingText.verticalDotNine {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotNine .dot {
  background-color: #000;
}

.verticalNineBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalNineBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalNinePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalNinePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageNine {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageNine .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 9 theme css end here */

/* vertical page 10 theme css end here */

.marketingText.verticalDotTen {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotTen .dot {
  background-color: #000;
}

.verticalTenColor {
  color: var(--site-primary-color);
}

.verticalTenBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalTenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalTenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalTenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageTen {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageTen .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 10 theme css end here */

/* vertical page 11 theme css end here */

.marketingText.verticalDotEleven {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotEleven .dot {
  background-color: #000;
}

.verticalElevenColor {
  color: var(--site-primary-color);
}

.verticalElevenBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalElevenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalElevenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalElevenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageEleven {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageEleven .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 11 theme css end here */

/* vertical page 12 theme css end here */

.marketingText.verticalDotTwelve {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotTwelve .dot {
  background-color: #000;
}

.verticalTwelveBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalTwelveBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalTwelvePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalTwelvePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageTwelve {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageTwelve .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 12 theme css end here */

.flip {
  animation: flip 1.5s ease-in-out;
}

@keyframes flip {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }

  50% {
    transform: rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.accordionItem .accordion-body a {
  color: var(--site-primary-color);
}

::-webkit-scrollbar-thumb {
  background: var(--site-primary-color) !important;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.BigDotPurchaseHeader .dropdown-menu.show {
  left: auto;
}

.trustedSection {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.trustedSection .avatarGroup {
  display: flex;
  align-items: center;
}

.trustedSection .avatarGroup img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffff;
  margin-left: -10px;
}

.trustedSection .avatarGroup img:first-child {
  margin-left: 0;
}

.trustedSection .trustedText {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* header color the css start here */

.BigDotPurchaseHeader.dbcHeader {
  position: relative;
}

.BigDotPurchaseHeader.dbcHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.websiteHeader {
  position: relative;
}

.BigDotPurchaseHeader.websiteHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.ecommerceHeader {
  position: relative;
}

.BigDotPurchaseHeader.ecommerceHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.bookingHeader {
  position: relative;
}

.BigDotPurchaseHeader.bookingHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.invoicingHeader {
  position: relative;
}

.BigDotPurchaseHeader.invoicingHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.engagerHeader {
  position: relative;
}

.BigDotPurchaseHeader.engagerHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.flipbookHeader {
  position: relative;
}

.BigDotPurchaseHeader.flipbookHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.onelinkHeader {
  position: relative;
}

.BigDotPurchaseHeader.onelinkHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.accountingHeader {
  position: relative;
}

.BigDotPurchaseHeader.accountingHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.EpaymentsHeader {
  position: relative;
}

.BigDotPurchaseHeader.EpaymentsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.marketplaceHeader {
  position: relative;
}

.BigDotPurchaseHeader.marketplaceHeader .header {
  background-color: var(--site-primary-color);
}

/* header color the css start here */

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min-resolution: 144dpi) {
  .container.header a.nav-link {
    color: #fff;
    font-size: 14px;
  }

  .BigDotPurchaseHeader .header a.navbar-brand img {
    width: 60px;
  }

  .LanguageSection span#headerLanguage {
    font-size: 14px;
    padding: 2px 4px;
    border: 1px solid #fff;
    opacity: 1;
    box-shadow: none;
  }

  .BigDotPurchaseHeader div#navbarNav p.text-white.mb-0.cursorPointer {
    border: 1px solid #fff;
    padding: 2px 12px;
    border-radius: 1000px;
    color: #fff !important;
  }

  button.btn.text-white.dropdown-toggle {
    font-size: 14px;
  }

  .container.header {
    padding: 8px 20px;
    border-radius: 100px;
  }

  .heroSection {
    padding: 100px 0;
  }

  .mainSection .WebsiteSection h3 {
    font-size: 30px;
    font-weight: 600;
  }

  .heroSection .searchBar .input-group i {
    right: 6px;
    padding: 8px;
    font-size: 12px;
  }

  .seeHowBtn {
    padding: 8px 15px;
    font-size: 14px;
    margin-top: 0px;
  }

  .trustedSection .avatarGroup img {
    width: 25px;
    height: 25px;
  }

  .heroSection .searchBar input.form-control {
    padding: 8px;
    font-size: 14px;
  }

  .trustedSection {
    margin-top: 35px;
  }

  .trustedSection .trustedText {
    font-size: 14px;
  }

  .ProductPage ul li {
    padding: 7px 10px;
  }

  .ProductPage ul li a {
    font-size: 13px;
  }

  /* .servicesSection .serviceCard h3 {
    font-size: 16px;
  } */

  .servicesSection .serviceCard p {
    font-size: 14px;
  }

  .serviceCard .serviceActions .buyNowButton {
    padding: 5px 40px;
    font-size: 15px;
  }
}

.sellAnywhereBeauty.my-4.digitalBusinessCardFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.ecommerceFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.einvoicingFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.engagerFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.marketplacePromotionFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.websiteFeatured {
  background-color: var(--site-secondary-color);
}

.verticalPages.servicesSection .row.m-0::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  opacity: 0.8;
  z-index: -1;
  box-shadow: 0px 4px 4px var(--site-primary-color);
}

.verticalPages.servicesSection .row.m-0 {
  position: relative;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 0 20px var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard.col-md-3:nth-child(2) {
  border-right: 1px solid var(--site-primary-color);
  border-left: 1px solid var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard.col-md-3:nth-child(3) {
  border-right: 1px solid var(--site-primary-color);
}

.BigDotPurchaseHeader.bakeryHeader {
  position: relative;
}

.BigDotPurchaseHeader.bakeryHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.beautyspaHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.beautyspaHeader {
  position: relative;
}

.BigDotPurchaseHeader.doctorsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.doctorsHeader {
  position: relative;
}

.BigDotPurchaseHeader.giftflowersHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.giftflowersHeader {
  position: relative;
}

.BigDotPurchaseHeader.hotelsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.hotelsHeader {
  position: relative;
}

.BigDotPurchaseHeader.localservicesHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.localservicesHeader {
  position: relative;
}

.BigDotPurchaseHeader.realestateHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.realestateHeader {
  position: relative;
}

.BigDotPurchaseHeader.restaurantsHeader .header {
  background: var(--site-primary-color);
}

.BigDotPurchaseHeader.restaurantsHeader {
  position: relative;
}

.BigDotPurchaseHeader.schoolsHeader .header {
  background: linear-gradient(135deg,
      var(--school-primary-green) 0%,
      #43a047 100%);
  box-shadow: 0 15px 35px rgba(46, 125, 50, 0.25);
  z-index: 123;
}

.BigDotPurchaseHeader.schoolsHeader {
  position: relative;
}

.tourtravelsHeader .header {
  background: var(--site-primary-color);
}

.BigDotPurchaseHeader.tourtravelsHeader {
  position: relative;
}

.BigDotPurchaseHeader.tutorsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.tutorsHeader {
  position: relative;
}

.checkBelowBtn {
  background-color: #ffd9cd;
  font-size: 16px;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 10px;
  color: var(--site-primary-color);
}

img.arrowBottom {
  margin-left: 5px;
  padding-top: 40px;
  width: 50px;
}

p#headerCartwrapper {
  position: relative;
  margin: 0px 15px 0px;
}

#cartCountIcon {
  right: -15px;
  top: -10px;
  background: var(--site-primary-color);
  color: #fff;
}

.mat-mdc-text-field-wrapper {
  height: 45px;
  border-radius: 10px;
}

/* =========================================
   School Landing Page CSS Starts Here
   ========================================= */

/* Scoped Variables */
:root {
  --school-primary-secondary: #e6f4e7;
  --school-primary-green: var(--site-primary-color);
  --school-text-dark: #212529;
  --school-font-main: "Montserrat", sans-serif;
}

.schoolLandingBody {
  font-family: var(--school-font-main);
  background-color: #fff;
  color: var(--school-text-dark);
}

/* Navbar Scopes */

.schoolBrandSubtitle {
  color: #ffffff;
  font-weight: 500;
}

.schoolLogoIcon {
  color: var(--school-primary-green);
  font-size: 1.5rem;
}

.schoolNavLink {
  font-size: 15px;
  padding: 0.5rem 1rem !important;
}

.schoolNavLink:hover {
  color: var(--school-primary-green) !important;
}

/* Buttons */
.schoolBtnOrange {
  background-color: var(--school-primary-green);
  border: 2px solid var(--school-primary-green);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.schoolBtnOrange:hover {
  background-color: var(--school-primary-green);
  border-color: var(--school-primary-green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(102 187 106);
}

.schoolBtnWhatsApp {
  background-color: var(--school-primary-green);
  border: 2px solid var(--school-primary-green);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.schoolBtnWhatsApp:hover {
  background-color: #236526;
  border-color: #236526;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

/* Hero Section */
.schoolHeroSection {
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.schoolHeroTitle {
  font-weight: 800;
  color: #2c2c2c;
  line-height: 1.2;
}

.schoolHeroSubtext {
  font-size: 1.15rem;
  line-height: 1.6;
}

.schoolHeroBtn {
  font-size: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.schoolHeroImageWrapper {
  perspective: 1000px;
}

.schoolHeroImgElement {
  transition: transform 0.5s ease;
}

.schoolHeroImgElement:hover {
  transform: rotateY(-2deg) rotateX(2deg);
}

/* Section Title */
.schoolSectionTitle {
  position: relative;
  padding-bottom: 15px;
  font-weight: 800;
  color: #2c2c2c;
}

.schoolSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--school-primary-secondary);
  border-radius: 2px;
}

/* Features Cards */
.schoolFeaturesSection {
  background-color: #f8f9fa;
  /* Light grey bg */
}

.schoolFeatureCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.schoolFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.schoolFeatureIconBox {
  min-width: 60px;
  height: 60px;
  background-color: rgba(46, 125, 50, 0.1);
  /* Light green tint */
  color: var(--school-primary-green);
}

.headerBigDotLogo {
  width: 110px;
}

/* Tools & Support */
.schoolToolsSection {
  background-color: #fff;
}

.schoolToolCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.schoolToolCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.schoolToolIconWrapper {
  width: 80px;
  height: 80px;
  background-color: var(--school-primary-secondary);
  color: var(--school-primary-green);
}

.schoolSupportBanner {
  background: linear-gradient(135deg,
      var(--school-primary-green) 0%,
      var(--school-primary-secondary) 100%);
  box-shadow: 0 15px 35px rgba(46, 125, 50, 0.25);
}

.schoolSupportVisual img {
  max-height: 250px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Footer Banner */
.schoolFooterSection {
  background-color: #fff;
  padding-bottom: 4rem !important;
}

.schoolFooterCard {
  background-color: var(--school-primary-secondary);
  /* Very light grey/blue tint */
}

.schoolFooterTitle {
  color: #2c2c2c;
  font-weight: 800;
}

.schoolFooterDisclaimer {
  color: #6c757d;
  font-size: 0.9rem;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .schoolHeroTitle {
    font-size: 2rem;
  }

  .schoolSupportBanner {
    text-align: center;
  }

  .schoolHeroImageWrapper {
    margin-top: 3rem;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes floatMascot {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(102 187 106);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(239, 127, 26, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 127, 26, 0);
  }
}

.schoolSupportContent p.text-white-50 {
  color: #fff !important;
}

.schoolFadeInUp {
  animation: fadeInUp 0.8s ease-out both;
}

.schoolDelay100 {
  animation-delay: 0.1s;
}

.schoolDelay200 {
  animation-delay: 0.2s;
}

.schoolDelay300 {
  animation-delay: 0.3s;
}

.schoolMascotFloat {
  animation: floatMascot 4s ease-in-out infinite;
}

.schoolPulseBtn {
  animation: pulseButton 2s infinite;
}

.schoolHeroImgElement {
  /* Existing transition */
  transition: transform 0.5s ease;
  animation: fadeInUp 1s ease-out 0.3s both;
}

/* Update Hero Background */
.schoolHeroSection {
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 255, 255, 0.6) 100%),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/school_hero_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-top: -96px;
}

/* School Demo Modal Styles removed */
.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* =========================================
   beauty spa landing page css starts here
   ========================================= */

/* Scoped Variables for Beauty Spa */
:root {
  --beautySpa-primary: #d39340;
  --beautySpa-accent: #ffeed6;
  --beautySpa-bg-warm: #ffeed6;
  --beautySpa-text-dark: #3a2a2a;
  --beautySpa-text-muted: #7a6a6a;
}

/* Body */

/* Navbar / Header */
.beautySpaSiteHeader .header {
  background: linear-gradient(135deg,
      var(--beautySpa-primary) 0%,
      var(--beautySpa-bg-warm) 200%);
}

.beautySpaSiteHeader {
  z-index: 100;
  position: relative;
}

.beautySpaBrandSubtitle {
  color: #ffffff;
  font-weight: 500;
}

.beautySpaNavLink {
  font-size: 15px;
  padding: 0.5rem 1rem !important;
}

.beautySpaNavLink:hover {
  color: var(----beautySpa-text-dark) !important;
}

/* Primary Button (Orchid) */

/* WhatsApp Button (Green) */
.beautySpaBtnWhatsApp {
  background-color: var(--beautySpa-primary);
  border: 2px solid var(--beautySpa-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.beautySpaBtnWhatsApp:hover {
  background-color: #236526;
  border-color: #236526;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

/* Hero Section */
.beautySpaHeroSection {
  background: var(--beautySpa-bg-warm);
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 254, 0.55) 0%,
      rgba(255, 255, 255, 0.6) 100%),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-beauty-spa-bgimage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-top: -96px;
  position: relative;
  overflow: hidden;
}

.beautySpaHeroTitle {
  font-weight: 800;
  color: var(--beautySpa-text-dark);
  line-height: 1.3;
  font-size: 50px;
}

.beautySpaHeroSubtext {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--beautySpa-text-muted);
}

.beautySpaHeroBtn {
  font-size: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.beautySpaHeroImageWrapper {
  perspective: 1000px;
}

.beautySpaHeroImgElement {
  transition: transform 0.5s ease;
  animation: beautySpaFadeInUpKf 1s ease-out 0.3s both;
}

.beautySpaHeroImgElement:hover {
  transform: rotateY(-2deg) rotateX(2deg);
}

/* Section Title */
.beautySpaSectionTitle {
  position: relative;
  padding-bottom: 15px;
  font-weight: 800;
  color: var(--beautySpa-text-dark);
}

.beautySpaSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg,
      var(--beautySpa-primary),
      var(--beautySpa-accent));
  border-radius: 2px;
}

.beautySpaSupportContent .text-white-50 {
  color: #fff !important;
}

/* Features Section */
.beautySpaFeaturesSection {
  background-color: var(--beautySpa-bg-warm);
}

.beautySpaFeatureCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(199, 125, 186, 0.08) !important;
}

.beautySpaFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(199, 125, 186, 0.12) !important;
}

.beautySpaFeatureIconBox {
  min-width: 60px;
  height: 60px;
  background-color: var(--beautySpa-accent);
  color: var(--beautySpa-primary);
}

/* Tools & Support Section */
.beautySpaToolsSection {
  background-color: #fff;
}

.beautySpaToolCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(199, 125, 186, 0.06) !important;
}

.beautySpaToolCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(199, 125, 186, 0.12) !important;
}

.beautySpaToolIconWrapper {
  width: 80px;
  height: 80px;
  background-color: var(--beautySpa-accent);
  color: var(--beautySpa-primary);
}

/* Support Banner */
.beautySpaSupportBanner {
  background: linear-gradient(135deg,
      var(--beautySpa-primary) 0%,
      var(--beautySpa-accent) 100%);
  box-shadow: 0 15px 35px rgba(199, 125, 186, 0.25);
}

.beautySpaSupportVisual img {
  max-height: 250px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Footer Banner */
.beautySpaFooterSection {
  background-color: #fff;
  padding-bottom: 4rem !important;
}

.beautySpaFooterCard {
  background-color: var(--beautySpa-bg-warm);
  border: 1px solid rgba(199, 125, 186, 0.1);
}

.beautySpaFooterTitle {
  color: var(--beautySpa-text-dark);
  font-weight: 800;
}

.beautySpaFooterDisclaimer {
  color: var(--beautySpa-text-muted);
  font-size: 0.9rem;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .beautySpaHeroTitle {
    font-size: 2rem;
  }

  .schoolFooterCard {
    padding: 20px 10px !important;
  }

  .beautySpaSupportBanner {
    text-align: center;
  }

  .beautySpaHeroImageWrapper {
    margin-top: 3rem;
  }

  .schoolBtnWhatsApp i {
    margin-right: 5px !important;
    vertical-align: middle;
  }

  .schoolBtnWhatsApp {
    padding: 10px 5px !important;
    font-size: 15px;
  }

  .schoolBtnOrange {
    font-size: 15px !important;
    padding: 10px 5px !important;
  }

  .schoolSupportContent .d-flex.gap-3 {
    display: block !important;
  }
}

.schoolBtnOrange i {
  vertical-align: middle;
  font-size: 24px;
}

.schoolBtnWhatsApp i {
  font-size: 24px;
}

@media (max-width: 420px) {
  .schoolBtnWhatsApp {
    padding: 10px 5px !important;
    font-size: 12px;
  }

  .schoolBtnOrange {
    font-size: 12px !important;
    padding: 10px 5px !important;
  }
}

/* Animations */
@keyframes beautySpaFadeInUpKf {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes beautySpaFloatMascotKf {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes beautySpaPulseButtonKf {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(199, 125, 186, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(199, 125, 186, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(199, 125, 186, 0);
  }
}

.beautySpaFadeInUp {
  animation: beautySpaFadeInUpKf 0.8s ease-out both;
}

.beautySpaDelay200 {
  animation-delay: 0.2s;
}

.beautySpaMascotFloat {
  animation: beautySpaFloatMascotKf 4s ease-in-out infinite;
}

.beautySpaPulseBtn {
  animation: beautySpaPulseButtonKf 2s infinite;
}

/* =========================================
   beauty spa landing page css ends here
   ========================================= */
/* =========================================
   Real Estate Landing Page CSS Starts Here
   ========================================= */

/* Scoped Variables for Real Estate */
:root {
  --realState-primary: #0056b3;
  --realState-secondary: #e7f1ff;
  /* Light Blue */
  --realState-accent: var(--site-primary-color);
  --realState-text-dark: #242424;
  --realState-text-muted: #666666;
}

/* Body */

/* Header */
.realStateHeader .header {
  background: linear-gradient(135deg,
      var(--realState-primary) 0%,
      var(--realState-accent) 100%);
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
}

.realStateHeader {
  position: relative;
  z-index: 100;
}

/* Buttons */
.realStateBtnMain {
  background-color: var(--realState-primary);
  border: 2px solid var(--realState-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 10px 25px;
  border-radius: 5px;
}

.realStateBtnMain:hover {
  background-color: var(--realState-accent);
  border-color: var(--realState-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.35);
}

.realStateBtnWhatsApp {
  background-color: #25d366;
  border: 2px solid #25d366;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 10px 25px;
  border-radius: 5px;
}

.realStateBtnWhatsApp:hover {
  background-color: #128c7e;
  border-color: #128c7e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Hero Section */
.realStateHeroSection {
  background-image: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-real-state-bg-image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 10rem;
  padding-bottom: 6rem;
  margin-top: -96px;
  position: relative;
}

.realStateHeroTitle {
  font-weight: 800;
  color: var(--realState-text-dark);
  font-size: 3.5rem;
  line-height: 1.2;
}

.realStateHeroSubtext {
  font-size: 1.2rem;
  color: var(--realState-text-muted);
  margin-bottom: 2rem;
}

/* Feature Cards */
.realStateFeaturesSection {
  background-color: var(--realState-secondary);
  padding: 4rem 0;
}

.realStateFeatureCard {
  background: #fff;
  border: 1px solid rgba(0, 86, 179, 0.1);
  border-radius: 10px;
  padding: 2rem;
  transition: all 0.3s ease;
  height: 100%;
}

.realStateFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 86, 179, 0.1);
}

.realStateFeatureIconBox {
  background-color: var(--realState-secondary);
  color: var(--realState-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  padding: 15px;
}

/* Tools Section */
.realStateToolsSection {
  padding: 4rem 0;
  background-color: #fff;
}

.realStateToolCard {
  text-align: center;
  padding: 2rem;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.realStateToolCard:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--realState-primary);
}

.realStateToolIconWrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.5rem;
  background-color: var(--realState-secondary);
  color: var(--realState-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.8rem;
}

/* Support Banner */
.realStateSupportSection {
  background: linear-gradient(135deg,
      var(--realState-primary) 0%,
      var(--realState-accent) 100%);
  color: #fff;
  padding: 2rem 0;
  border-radius: 20px;
  margin: 4rem 0;
}

/* Footer Banner */
.realStateFooterSection {
  background-color: #fff;
  padding: 4rem 0;
  border-top: 1px solid #eee;
}

.realStateFooterCard {
  background-color: var(--realState-secondary);
  padding: 2rem;
  border-radius: 10px;
  height: 100%;
}

.realStateFooterTitle {
  font-weight: 700;
  color: var(--realState-primary);
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .realStateHeroTitle {
    font-size: 40px;
  }

  .realStateSupportContent .d-flex.gap-3 {
    justify-content: center;
  }

  .realStateSupportContent {
    text-align: center;
  }

  .realStateSupportVisual {
    text-align: center;
  }

  .realStateSupportVisual .img-fluid {
    width: 300px;
  }

  .realStateSupportSection {
    padding: 0px 0px 30px;
    margin: 1rem 0;
  }
}

/* Animations */
@keyframes realStateFadeInUpKf {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes realStateFloatMascotKf {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes realStatePulseButtonKf {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 86, 179, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 86, 179, 0);
  }
}

.realStateFadeInUp {
  animation: realStateFadeInUpKf 0.8s ease-out both;
}

.realStateMascotFloat {
  animation: realStateFloatMascotKf 4s ease-in-out infinite;
}

.realStatePulseButton {
  animation: realStatePulseButtonKf 2s infinite;
}

.realStateBrandSubtitle {
  color: #fff;
}

/* Restaurants landing page css starts here */

.restaurantsBrandSubtitle {
  color: #ff5722;
  font-weight: 600;
  margin-left: 10px;
  font-size: 14px;
}

.restaurantsHeroSection {
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgb(255 190 169)),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-restaurants-hero-bg-image.png");
  background-size: cover;
  background-position: center;
  padding: 150px 0 100px;
  margin-top: -100px;
}

.restaurantsHeroImageWrapper .restaurantsHeroImgElement {
  width: 100%;
}

.restaurantsHeroTitle {
  color: #2d3436;
  font-weight: 800;
  line-height: 1.2;
}

.restaurantsHeroSubtext {
  font-size: 18px;
  color: #636e72;
}

.restaurantsBtnOrange {
  background-color: #ff5722;
  border: none;
  color: white !important;
  transition: all 0.3s ease;
}

.restaurantsBtnOrange:hover {
  background-color: #e64a19;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 87, 34, 0.3);
}

.restaurantsBtnWhatsApp {
  background-color: #25d366;
  border: none;
  color: white !important;
  transition: all 0.3s ease;
}

.restaurantsBtnWhatsApp:hover {
  background-color: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.restaurantsSectionTitle {
  color: #2d3436;
  position: relative;
  padding-bottom: 15px;
}

.restaurantsSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #ff5722;
}

.restaurantsFeatureCard {
  transition: all 0.3s ease;
  border-radius: 20px !important;
  background: white;
}

.restaurantsFeatureCard:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.restaurantsFeatureIconBox {
  background: var(--site-secondary-color);
  width: 60px;
  height: 60px;
  min-width: 60px;
}

.restaurantsFeatureIcon {
  color: #ff5722;
}

.restaurantsToolCard {
  transition: all 0.3s ease;
  border-radius: 20px !important;
  background: white;
}

.restaurantsToolCard:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.restaurantsToolIconWrapper {
  background: #ff5722;
  width: 80px;
  height: 80px;
}

.restaurantsToolIcon {
  color: white;
}

.restaurantsSupportBanner {
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
}

.restaurantsMascotFloat {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.restaurantsFooterCard {
  background: var(--site-secondary-color);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.05);
}

.restaurantsSupportVisual img.img-fluid {
  width: 400px;
}

.restaurantsFooterTitle {
  color: #2d3436;
}

.restaurantsPulseBtn {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .restaurantsHeroSection {
    padding: 150px 0 100px;
    text-align: center;
  }

  .restaurantsHeroTitle {
    font-size: 1.8rem;
  }

  .restaurantsHeroSubtext {
    font-size: 16px;
  }
}

/* hotel landing page css starts here */

:root {
  --hotel-bg: #0f172a;
  --hotel-card-bg: #1e293b;
  --hotel-gold: #c5a059;
  --hotel-gold-hover: #d4af37;
  --hotel-border: #334155;
  --hotel-text: #f1f5f9;
}

.hotelLandingBody {
  background-color: var(--hotel-bg);
  color: var(--hotel-text);
}

.hotelBrandSubtitle {
  color: #fff;
  margin-left: 10px;
  font-size: 18px;
}

.BigDotPurchaseHeader.hotelHeader .container.header {
  background: var(--hotel-gold);
}

.hotelHeroSection {
  background:
    linear-gradient(rgb(147 159 189 / 70%), rgb(130 144 173 / 70%)),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-hotels-hero-bg-image.png");
  background-size: cover;
  background-position: center;
  padding: 120px 0;
}

.hotelHeroTitle {
  color: #f8fafc;
  font-weight: 800;
  line-height: 1.2;
}

.hotelHeroSubtext {
  font-size: 18px;
}

.hotelBtnGold {
  background-color: var(--hotel-gold);
  border: none;
  color: var(--hotel-card-bg) !important;
  transition: all 0.3s ease;
}

.hotelBtnGold:hover {
  background-color: var(--hotel-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
}

.hotelSectionTitle {
  color: #f8fafc;
  position: relative;
  padding-bottom: 15px;
}

.hotelSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--hotel-gold);
}

.hotelFeatureCard {
  background: var(--hotel-card-bg);
  border: 1px solid var(--hotel-border) !important;
  transition: all 0.3s ease;
  border-radius: 15px !important;
}

.hotelFeatureCard:hover {
  transform: translateY(-5px);
  border-color: var(--hotel-gold) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.hotelFeatureIconBox {
  background: rgba(197, 160, 89, 0.1);
  width: 50px;
  height: 50px;
  min-width: 50px;
}

.hotelFeatureIcon {
  color: var(--hotel-gold);
}

.hotelToolCard {
  background: var(--hotel-card-bg);
  border: 1px solid var(--hotel-border) !important;
  transition: all 0.3s ease;
  border-radius: 15px !important;
}

.hotelToolCard:hover {
  background: var(--hotel-border);
}

.hotelToolIconWrapper {
  background: var(--hotel-gold);
  width: 60px;
  height: 60px;
}

.hotelToolIcon {
  color: var(--hotel-card-bg);
}

.hotelSupportBanner {
  background: linear-gradient(135deg,
      var(--hotel-card-bg) 0%,
      var(--hotel-bg) 100%);
  border: 1px solid var(--hotel-border);
}

.hotelMascotFloat {
  animation: hotelFloat 4s ease-in-out infinite;
}

@keyframes hotelFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

.hotelFooterCard {
  background: var(--hotel-card-bg);
  border: 1px solid var(--hotel-border);
}

.hotelFooterTitle {
  color: #f8fafc;
}

.hotelSupportVisual img.img-fluid {
  width: 400px;
}

.hotelHeroImageWrapper img.img-fluid {
  width: 100%;
}

@media (max-width: 768px) {
  .hotelHeroSection {
    padding: 60px 0;
    text-align: center;
  }

  .hotelHeroTitle {
    font-size: 2rem;
  }
}

/* modern bakeries landing page css starts here */
:root {
  --bakeryPrimary: #5d4037;
  --bakerySecondary: #f5ebe0;
  --bakeryAccent: #d4a373;
  --bakeryText: #3e2723;
  --bakeryMuted: #795548;
  --bakeryCardBg: #ffffff;
  --bakeryBorder: #e3d5ca;
}

.bakeryLandingBody {
  background-color: #fefae0;
  color: var(--bakeryText);
}

.bakeryHeader {
  padding: 10px 0;
}

.bakeryBrandSubtitle {
  color: var(--bakerySecondary);
  font-size: 0.9rem;
  margin-left: 10px;
  border-left: 1px solid var(--bakerySecondary);
  padding-left: 10px;
}

.bakeryNavLink {
  color: var(--bakerySecondary) !important;
  font-weight: 500;
}

.bakeryNavLink:hover {
  color: var(--bakeryAccent) !important;
}

.bakeryHeroSection {
  background:
    linear-gradient(rgba(254, 250, 224, 0.9), rgba(254, 250, 224, 0.9)),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-modern-bakeries-hero-bg-image.png");
  background-size: cover;
  background-position: center;
  padding: 180px 0 120px;
  margin-top: -125px;
}

.bakeryHeroTitle {
  font-family: var(--site-secondary-font);
  color: var(--bakeryPrimary);
  font-weight: 800;
}

.bakeryHeroSubtext {
  color: var(--bakeryMuted);
  font-size: 1.1rem;
}

.bakeryBtnBrown {
  background-color: var(--bakeryPrimary);
  color: white !important;
  border: none;
  transition: all 0.3s ease;
}

.bakeryBtnBrown:hover {
  background-color: var(--bakeryText);
  transform: translateY(-2px);
}

.bakeryBtnWhatsApp {
  background-color: #25d366;
  color: white !important;
  border: none;
  transition: all 0.3s ease;
}

.bakeryBtnWhatsApp:hover {
  background-color: #128c7e;
  transform: translateY(-2px);
}

.bakerySectionTitle {
  font-family: var(--site-secondary-font);
  color: var(--bakeryPrimary);
  position: relative;
  padding-bottom: 15px;
}

.bakerySectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--bakeryAccent);
}

.bakeryFeatureCard {
  background: var(--bakeryCardBg);
  border: 1px solid var(--bakeryBorder) !important;
  border-radius: 15px !important;
  transition: all 0.3s ease;
}

.bakeryFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(93, 64, 55, 0.1) !important;
  border-color: var(--bakeryAccent) !important;
}

.bakeryFeatureIconBox {
  background: var(--bakerySecondary);
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.bakeryFeatureIcon {
  color: var(--bakeryPrimary);
}

.bakeryToolCard {
  background: var(--bakeryCardBg);
  border: 1px solid var(--bakeryBorder) !important;
  border-radius: 20px !important;
  transition: all 0.3s ease;
}

.bakeryToolCard:hover {
  background: var(--bakerySecondary);
}

.bakeryToolIconWrapper {
  background: var(--bakeryPrimary);
  color: white;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.bakerySupportBanner {
  background: linear-gradient(135deg,
      var(--bakeryPrimary) 0%,
      var(--bakeryMuted) 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  padding: 3rem;
}

.bakeryMascotFloat {
  animation: bakeryFloat 5s ease-in-out infinite;
}

@keyframes bakeryFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.bakeryFooterSection {
  background-color: #faedcd;
  padding: 80px 0;
}

.bakeryFooterCard {
  background: white;
  padding: 60px;
  border-radius: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.bakeryPulseBtn {
  animation: bakeryPulse 2s infinite;
}

@keyframes bakeryPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .bakeryHeroTitle {
    font-size: 2.5rem;
  }

  .bakeryFooterCard {
    padding: 30px;
  }
}

/* smart qr sticker landing page css starts here */
:root {
  --qrPrimary: #0f172a;
  --qrSecondary: #f59e0b;
  --qrBg: #020617;
  --qrCardBg: #1e293b;
  --qrTextColor: #f8fafc;
  --qrMutedColor: #94a3b8;
  --qrBorder: #334155;
}

.qrLandingBody {
  background-color: var(--qrBg);
  color: var(--qrTextColor);
}

.qrBrandSubtitle {
  color: var(--qrSecondary);
  font-size: 0.9rem;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--qrSecondary);
}

.qrNavLink {
  color: var(--qrTextColor) !important;
  font-weight: 500;
}

.qrNavLink:hover {
  color: var(--qrSecondary) !important;
}

.qrHeroSection {
  background:
    radial-gradient(circle at 80% 20%,
      rgba(59, 130, 246, 0.2),
      transparent 40%),
    radial-gradient(circle at 20% 80%,
      rgba(245, 158, 11, 0.15),
      transparent 40%),
    linear-gradient(135deg, #020617 0%, #0f172a 100%);
  padding: 250px 0 120px;
  margin-top: -125px;
  position: relative;
  overflow: hidden;
}

.qrHeroSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
  pointer-events: none;
}

.qrHeroTitle {
  font-size: 3.5rem;
  background: linear-gradient(to right, #fff, var(--qrSecondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.qrHeroSubtext {
  color: var(--qrMutedColor);
  font-size: 1.25rem;
}

.qrBtnGold {
  background: var(--qrSecondary);
  color: var(--qrPrimary) !important;
  border: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.qrBtnGold:hover {
  background: #fbbf24;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.qrSectionTitle {
  color: #fff;
  position: relative;
  display: inline-block;
}

.qrSectionTitle::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--qrSecondary);
  border-radius: 2px;
}

.qrUseCaseCard {
  background: var(--qrCardBg);
  border: 1px solid var(--qrBorder) !important;
  border-radius: 20px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.qrUseCaseCard:hover {
  transform: translateY(-10px);
  border-color: var(--qrSecondary) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.qrIconBox {
  background: rgba(59, 130, 246, 0.1);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px !important;
  margin: 0 auto;
}

.qrIconBox i {
  color: var(--qrSecondary);
}

.qrBenefitsList {
  list-style: none;
  padding-left: 0;
}

.qrBenefitsList li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.qrBenefitsList li i {
  color: var(--qrSecondary);
  margin-right: 12px;
}

.qrFooterSection {
  background: #000;
  padding: 80px 0;
}

.qrFooterCard {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid var(--qrBorder);
  padding: 60px;
  border-radius: 40px;
  text-align: center;
}

@media (max-width: 991px) {
  .qrHeroTitle {
    font-size: 2.8rem;
  }

  .qrFooterCard {
    padding: 20px;
  }

}

body .mat-mdc-text-field-wrapper {
  width: 100%;
  z-index: 0;
  border-radius: 8px !important;
  padding: 0px 15px !important;
  border: 1.5px solid #e2e8f0;
  height: 48px;
}

.mat-mdc-form-field .mdc-notched-outline__leading,
.mat-mdc-form-field .mdc-notched-outline__notch,
.mat-mdc-form-field .mdc-notched-outline__trailing {
  border: transparent !important;
}

.mdc-notched-outline__leading {
  display: none;
}

.orangeBackground {
  position: relative;
}

.orangeBackground svg {
  width: 100% !important;
  display: block !important;
  height: 100% !important;
}

.productGallery .row {
  justify-content: center;
}

/* Seller Site Checkout Page CSS Starts Here */

/* Stepper state modifiers */

/* Checkout flow 06 march 2026 */

.sSitePage {
  min-height: 100vh;
  color: #0d1b4b;
  padding: 28px 0 140px;
  gap: 18px;
  position: relative;
  overflow-x: hidden;
}

.sSiteProductsIcon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--site-secondary-color);
}

.serviceIcon .sSiteProductsIcon {
  margin: 0 auto;
}

.sSiteProductsIcon i {
  font-size: 28px;
  color: var(--site-primary-color);
}

.sSiteBlob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.sSiteBlob1 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle,
      rgba(24, 71, 212, 0.09) 0%,
      transparent 70%);
  top: -220px;
  left: -180px;
}

.sSiteBlob2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle,
      rgba(74, 123, 245, 0.07) 0%,
      transparent 70%);
  bottom: -100px;
  right: -100px;
}

.sSiteBlob3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
      rgba(245, 166, 35, 0.05) 0%,
      transparent 70%);
  top: 45%;
  left: 60%;
}

.sSiteLogoWrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: sSiteFadeDown 0.4s ease both;
}

.sSiteLogoText {
  font-size: 22px;
  font-weight: 800;
  color: var(--site-primary-color);
  display: flex;
  align-items: center;
  gap: 1px;
}

.sSiteLogoDot {
  color: var(--site-primary-color);
}

.sSiteLogoSub {
  font-size: 10px;
  color: #8a96b8;
  letter-spacing: 0.6px;
}

.sSiteBackToProduct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.15s ease;
}

.sSiteBackToProduct:hover {
  color: var(--site-primary-color);
  text-decoration: none;
}

.sSiteProgressWrap {
  width: 100%;
  position: relative;
  animation: sSiteFadeDown 0.5s ease 0.1s both;
  margin-bottom: 18px;
}

.sSiteProgSteps {
  display: flex;
  gap: 5px;
}

.sSiteProgSeg {
  flex: 1;
  height: 5px;
  border-radius: 10px;
  background: #e2e8f4;
  overflow: hidden;
}

.sSiteProgSeg.sSiteActive .sSiteProgFill {
  width: 100%;
  animation: sSiteFillBar 0.6s ease 0.1s both;
}

@keyframes sSiteFillBar {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.sSiteProgressLabel {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8a96b8;
}

.sSiteProgressLabelCurrent {
  color: var(--site-primary-color);
}

/* Add-on enquiry lead page — progress fill (base style; the .sSiteActive width
   rule above is shared). Scoped to <app-addon-lead> per design-rule.md. */
app-addon-lead .sSiteProgFill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--site-primary-color);
  border-radius: 10px;
  transition: width 0.4s ease;
}

.sSiteCard {
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e2e8f4;
  box-shadow:
    0 4px 40px rgba(24, 71, 212, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
}

.sSiteStep {
  display: none;
}

.sSiteStep.sSiteActive {
  display: block;
  animation: sSiteRiseIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sSiteRiseIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sSiteContent {
  padding: 24px 28px 20px;
}

.sSiteActions {
  padding: 0 28px 28px;
}

.sSiteStepHeader {
  padding: 28px 28px 0;
}

.sSitePlanChip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px 0;
}

.sSitePlanChipInner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.18);
  border-radius: 40px;
  padding: 7px 16px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSitePlanChipDot {
  width: 18px;
  height: 18px;
  background: var(--site-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  flex-shrink: 0;
}

.sSiteStepTitle {
  font-size: 22px;
  font-weight: 800;
  color: var(--site-primary-color);
  margin-bottom: 5px;
}

.sSiteStepSubtitle {
  font-size: 13px;
  color: #8a96b8;
  margin-bottom: 0;
  line-height: 1.6;
}

.sSitePlanGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px 28px;
}

.sSitePlanCardFull {
  grid-column: 1 / -1;
}

.sSitePlanLabel {
  cursor: pointer;
  display: block;
  width: 100%;
}

.sSitePlanLabel input[type="radio"] {
  display: none;
}

.sSitePlanCardInner {
  border: 2px solid #e2e8f4;
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 68px;
}

.sSitePlanLabel:hover .sSitePlanCardInner {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(24, 71, 212, 0.1);
}

.sSitePlanLabel input:checked+.sSitePlanCardInner {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow:
    0 0 0 1px var(--site-primary-color),
    0 8px 24px -8px rgba(24, 45, 100, 0.18);
  transform: translateY(-2px);
}

.sSitePlanCardMeta {
  flex: 1;
}

.sSitePlanName {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.sSitePlanSubtitle {
  font-size: 12px;
  color: #8a96b8;
}

.sSitePlanPrice {
  font-size: 15px;
  font-weight: 800;
  color: var(--site-primary-color);
  white-space: nowrap;
  margin-left: 10px;
}

.sSitePlanPriceSuffix {
  font-size: 11px;
  font-weight: 500;
  color: #8a96b8;
}

.sSiteCurrentBadge {
  position: absolute;
  top: -16px;
  left: 14px;
  background: var(--site-quaternary-color);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sSiteBestBadge {
  display: inline-block;
  background: rgba(23, 178, 106, 0.12);
  color: #17b26a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.sSiteTeamInputWrap {
  padding: 0 28px 16px;
  display: none;
}

.sSiteTeamInputWrap.sSiteVisible {
  display: block;
}

.sSiteFormLabel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #4a5578;
  margin-bottom: 7px;
}

.sSiteFormField {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  font-size: 14px;

  font-weight: 500;
  color: var(--site-primary-color);
  background: #fafbff;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.sSiteFormField::placeholder {
  color: #8a96b8;
  font-weight: 400;
}

.sSiteFormField:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(24, 71, 212, 0.1);
  background: #fff;
}

.sSiteFormErr {
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  margin-top: 5px;
  display: none;
}

/* ── Two-column layout for NFC addon steps ── */
.sSiteAddonLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}

.sSiteAddonLeft {
  position: relative;
  padding: 20px;
  border-right: 1.5px solid #e2e8f4;
  display: flex;
  align-items: stretch;
}

.sSiteAddonImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform 0.5s ease;
}

.sSiteAddonImg:hover {
  transform: scale(1.02);
}

.sSiteAddonRight {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sSiteAddonRight .sSiteContent {
  flex: 1;
}

.sSiteAddonRight .sSiteActions {
  margin-top: auto;
}

@media (max-width: 767px) {
  .sSiteAddonLayout {
    grid-template-columns: 1fr;
  }

  .sSiteAddonLeft {
    border-right: none;
    border-bottom: 1.5px solid #e2e8f4;
    max-height: 280px;
    padding: 16px 16px 0;
  }
}

/* (legacy — kept for other steps that still use it) */

.sSiteVisualHero {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 155px;
}

.sSiteNfcCardVisual {
  width: 185px;
  height: 115px;
  border-radius: 14px;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-primary-color) 100%);
  box-shadow:
    0 20px 50px rgba(24, 71, 212, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transform: rotate(-4deg) translateY(4px);
  transition: transform 0.45s ease;
  z-index: 2;
}

.sSiteNfcCardVisual:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.sSiteNfcCardVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.13) 0%,
      transparent 50%,
      rgba(255, 255, 255, 0.04) 100%);
}

.sSiteCardChip {
  position: absolute;
  top: 16px;
  left: 13px;
  width: 28px;
  height: 20px;
  background: linear-gradient(135deg, #d4af70, #f5d98a, #b8962e);
  border-radius: 4px;
  overflow: hidden;
}

.sSiteCardChip::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(139, 101, 20, 0.4);
  border-radius: 2px;
}

.sSiteCardNfcIcon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
}

.sSiteNfcWave {
  position: absolute;
  border: 1.5px solid #fff;
  border-radius: 50%;
  opacity: 0;
  animation: sSiteNfcPulse 2.2s ease infinite;
}

.sSiteNfcWave1 {
  width: 10px;
  height: 10px;
  top: 9px;
  right: 9px;
  animation-delay: 0s;
}

.sSiteNfcWave2 {
  width: 18px;
  height: 18px;
  top: 5px;
  right: 5px;
  animation-delay: 0.3s;
}

.sSiteNfcWave3 {
  width: 26px;
  height: 26px;
  top: 1px;
  right: 1px;
  animation-delay: 0.6s;
}

@keyframes sSiteNfcPulse {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

.sSiteCardNameLine {
  position: absolute;
  bottom: 14px;
  left: 13px;
  right: 13px;
}

.sSiteCardName {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.sSiteCardTitle {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
}

.sSiteCardBigdotLogo {
  font-size: 7px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: 8px;
  right: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sSiteStickerVisual {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f4ff, #e2eaff);
  border: 3px solid var(--site-secondary-color);
  box-shadow: 0 8px 24px rgba(24, 71, 212, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  transform: translateX(-14px) translateY(-10px);
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.sSiteStickerVisual:hover {
  transform: translateX(-14px) translateY(-16px);
}

.sSiteStickerInner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.sSiteStickerInner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0%,
      transparent 50%);
}

.sSiteStickerWaves {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sSiteArc {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}

.sSiteArc1 {
  width: 8px;
  height: 4px;
}

.sSiteArc2 {
  width: 14px;
  height: 7px;
}

.sSiteArc3 {
  width: 20px;
  height: 10px;
}

.sSiteStickerDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  margin-top: 1px;
}

.sSiteTapVisual {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: white;
  border: 1px solid #e2e8f4;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: sSiteFloatBob 3s ease-in-out infinite;
}

.sSiteFloatBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #f5a623;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
  animation: sSiteFloatBob 2.5s ease-in-out infinite 0.5s;
}

@keyframes sSiteFloatBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.sSiteHeadline {
  font-size: 25px;
  font-weight: 800;
  color: var(--site-primary-color);
  line-height: 1.2;
  margin-bottom: 18px;
}

.sSiteHeadlineAccent {
  color: var(--site-primary-color);
}

.sSiteSocialProof {
  display: flex;
  align-items: center;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.sSiteProofStat {
  flex: 1;
  text-align: center;
}

.sSiteProofNumber {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-primary-color);
  line-height: 1;
}

.sSiteProofLabel {
  font-size: 11px;
  color: #8a96b8;
  margin-top: 4px;
  line-height: 1.4;
}

.sSiteProofDivider {
  width: 1px;
  height: 38px;
  background: rgba(24, 71, 212, 0.12);
}

.sSiteBenefitsRow {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.sSiteBenefitChip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.1);
  border-radius: 12px;
  padding: 11px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--site-primary-color);
  text-align: center;
  line-height: 1.3;
  transition: all 0.2s;
}

.sSiteBenefitChip:hover {
  background: var(--site-secondary-color);
  border-color: rgba(24, 71, 212, 0.22);
  transform: translateY(-2px);
}

.sSiteBenefitIcon {
  font-size: 17px;
}

.sSiteProductLabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--site-primary-color);
  margin-bottom: 4px;
}

.sSiteProductHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  gap: 12px;
}

.sSiteProductTitle {
  font-size: 21px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSitePriceBadge {
  background: var(--site-primary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 8px 15px;
  border-radius: 12px;
  text-align: right;
  flex-shrink: 0;
}

.sSitePriceBadgeSub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
  display: block;
}

.sSiteProductDesc {
  font-size: 13px;
  color: #8a96b8;
  margin-bottom: 18px;
  line-height: 1.6;
}

.sSitePlacementItem.sSiteActive .sSitePlacementIcon {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sSiteSectionLabelRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sSiteSectionLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a96b8;
}

.sSiteSelectedCount {
  color: var(--site-primary-color);
}

.sSitePlacementOpts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.sSiteOptCard {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 13px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
  position: relative;
}

.sSiteOptCard:hover {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSiteOptCard.sSiteSelected {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow: 0 0 0 1px var(--site-primary-color);
}

.sSiteOptCardRow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  text-align: left;
}

.sSiteOptCardRowIcon {
  font-size: 21px;
  flex-shrink: 0;
}

.sSiteOptCardCheck {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border: 2px solid #c8d1e6;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.sSiteOptCardCheck::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
  transform: scale(0);
}

.sSiteOptCardRow .sSiteOptCardCheck {
  position: static;
  width: 20px;
  height: 20px;
  order: 999;
  margin-left: auto;
}

.sSiteOptCard.sSiteSelected .sSiteOptCardCheck,
.sSiteOptCard.sSiteOptCardSelected .sSiteOptCardCheck {
  border-color: var(--site-primary-color);
  background: white;
}

.sSiteOptCard.sSiteSelected .sSiteOptCardCheck::after,
.sSiteOptCard.sSiteOptCardSelected .sSiteOptCardCheck::after {
  background: var(--site-primary-color);
  transform: scale(1);
}

.sSiteOptCardIcon {
  font-size: 21px;
  margin-bottom: 6px;
}

.sSiteOptCardName {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.sSiteOptCardSub {
  font-size: 10px;
  color: #8a96b8;
}

.sSiteCustomQty {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.sSiteCustomQtyLabel {
  flex: 1;
}

.sSiteCustomQtyTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteCustomQtySub {
  font-size: 11px;
  color: #8a96b8;
}

.sSiteQtyControls {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sSiteQtyBtn {
  width: 32px;
  height: 32px;
  border: 1.5px solid #e2e8f4;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #4a5578;
  transition: all 0.15s;
  font-family: inherit;
}

.sSiteQtyBtn:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSiteQtyValue {
  font-size: 16px;
  font-weight: 800;
  color: var(--site-primary-color);
  min-width: 26px;
  text-align: center;
}

.sSiteCartMini {
  border: 1.5px dashed #e2e8f4;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: #fafbff;
}

.sSiteCartMiniLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sSiteCartMiniEmoji {
  font-size: 20px;
}

.sSiteCartMiniTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteCartMiniSub {
  font-size: 11px;
  color: #8a96b8;
}

.sSiteCartMiniPrice {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteFeaturesRow {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sSiteFeatureChip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
}

/* Card & CXO hero visuals */

.sSiteAddonGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.sSiteAddonTile {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 16px 14px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  background: #ffffff;
  position: relative;
}

.sSiteAddonTile:hover {
  border-color: var(--site-primary-color);
  box-shadow: 0 4px 20px rgba(24, 71, 212, 0.1);
}

.sSiteAddonTile.sSiteAddonOn {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow:
    0 0 0 1px var(--site-primary-color),
    0 4px 16px rgba(24, 71, 212, 0.12);
}

.sSiteAddonTopRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sSiteAddonIconWrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--site-primary-color);
  transition:
    background 0.2s,
    color 0.2s;
}

.sSiteAddonTile.sSiteAddonOn .sSiteAddonIconWrap {
  background: var(--site-primary-color);
  color: #fff;
}

.sSiteAddonCheck {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sSiteAddonTile.sSiteAddonOn .sSiteAddonCheck {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.sSiteAddonTitleRow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.sSiteAddonTitle {
  font-size: 13px;
  font-weight: 700;
  color: #000;
}

.sSiteAddonPill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(245, 90, 37, 0.1);
  color: var(--site-quaternary-color);
  border-radius: 5px;
  padding: 2px 7px;
  text-transform: uppercase;
}

.sSiteAddonDesc {
  font-size: 12px;
  color: #8a96b8;
  line-height: 1.5;
  margin-bottom: 8px;
}

.sSiteAddonPrice {
  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteReviewLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sSiteLeadBox {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
}

.sSiteLeadRow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid #e2e8f4;
}

.sSiteLeadRow:last-child {
  border-bottom: none;
}

.sSiteLeadIconWrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-primary-color);
  font-size: 13px;
  flex-shrink: 0;
}

.sSiteLeadKey {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8a96b8;
}

.sSiteLeadVal {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

/* ── Promo code ── */
.sSitePromoWrap {
  display: flex;
  margin-bottom: 10px;
}

.sSitePromoField {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f4;
  border-right: none;
  border-radius: 12px 0 0 12px;
  font-size: 13px;

  font-weight: 500;
  color: var(--site-primary-color);
  background: #fafbff;
  outline: none;
  transition: border-color 0.2s;
}

.sSitePromoField:focus {
  border-color: var(--site-primary-color);
}

.sSitePromoApply {
  padding: 0 20px;
  border-radius: 0 12px 12px 0;
  border: 1.5px solid #e2e8f4;
  border-left: none;
  background: var(--site-primary-color);
  color: #fff;

  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.sSitePromoApply:hover {
  background: var(--site-primary-color);
}

.sSitePromoChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.sSitePromoChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f4;
  background: #f4f6fb;
  font-size: 12px;
  font-weight: 700;
  color: #4a5578;
  cursor: pointer;
  transition: all 0.2s;
}

.sSitePromoChip:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSitePromoChip.sSitePromoUsed {
  border-color: #17b26a;
  background: #e6f9f1;
  color: #1a7a40;
}

.sSitePromoFeedback {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: none;
}

.sSiteOrderBox {
  background: #f4f6fb;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 18px 16px;
}

.sSiteOrderBoxTitle {
  font-size: 14px;
  font-weight: 800;
  color: #000;
  margin-bottom: 14px;
}

.sSiteOrderPlanTag {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--site-secondary-color);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 13px;
}

.sSiteOrderDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

.sSiteOrderPlanLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 12px;
}

.sSiteOrderRowLabel {
  color: #4a5578;
  font-weight: 500;
}

.sSiteOrderRowBilling {
  font-size: 10px;
  color: #9aa5c4;
  font-weight: 400;
  margin-top: 1px;
}

.sSiteOrderRowVal {
  font-weight: 700;
  color: var(--site-primary-color);
  align-self: flex-start;
}

.sSiteOrderRowDisc {
  color: #17b26a !important;
}

.sSiteOrderHr {
  border: none;
  border-top: 1px solid #e2e8f4;
  margin: 9px 0;
}

.sSiteOrderTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4px;
}

.sSiteOrderTotalLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderTotalAmt {
  font-size: 26px;
  font-weight: 800;
  color: #000;
  line-height: 1;
}

.sSiteOrderNote {
  font-size: 10px;
  color: #8a96b8;
  text-align: right;
  margin-top: 3px;
}

.sSiteTrustList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.sSiteTrustItem {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8a96b8;
  font-weight: 500;
}

.sSiteTrustItem i {
  color: #17b26a;
  font-size: 12px;
}

.sSiteTerms {
  font-size: 11px;
  color: #8a96b8;
  line-height: 1.65;
  margin-bottom: 18px;
}

.sSiteTerms a {
  color: var(--site-primary-color);
  font-weight: 600;
  text-decoration: none;
}

.sSiteTerms a:hover {
  text-decoration: underline;
}

.sSiteSuccess {
  padding: 52px 28px;
  display: none;
  text-align: center;
}

.sSiteSuccess.sSiteSuccessOn {
  display: block;
  animation: sSiteRiseIn 0.5s ease both;
}

.sSiteSuccessOrb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--site-tertiary-color) 0%,
      var(--site-primary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  margin: 0 auto 22px;
  box-shadow: 0 8px 28px rgba(24, 71, 212, 0.25);
  animation: sSiteSuccessBounce 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes sSiteSuccessBounce {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.sSiteSuccessTitle {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-primary-color);
  margin-bottom: 8px;
}

.sSiteSuccessBody {
  font-size: 14px;
  color: #4a5578;
  line-height: 1.7;
  margin-bottom: 26px;
}

.sSiteSuccessEm {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteBtnPrimary {
  width: 100%;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;

  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 24px rgba(24, 71, 212, 0.28);
  transition: all 0.2s;
  margin-bottom: 11px;
  position: relative;
  overflow: hidden;
}

.sSiteBtnPrimary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 60%);
  pointer-events: none;
}

.sSiteBtnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(24, 71, 212, 0.38);
}

.sSiteBtnPrimary:active {
  transform: scale(0.98);
}

.sSiteBtnPrimaryLeft {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.sSiteBtnPrimaryTitle {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.sSiteBtnPrimarySub {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.75;
  white-space: nowrap;
}

.sSiteBtnPrimarySub::before {
  content: '·';
  margin-right: 6px;
}

.sSiteBtnArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  gap: 4px;
  white-space: nowrap;
}

.sSiteBtnRowSecondary {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}

.sSiteBtnBack {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f4;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #4a5578;
  transition: all 0.2s;
  flex-shrink: 0;
  font-family: inherit;
}

.sSiteBtnBack:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  transform: translateX(-2px);
}

.sSiteBtnSecondary {
  flex: 1;
  background: transparent;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 12px 16px;

  font-size: 13px;
  font-weight: 600;
  color: #8a96b8;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.sSiteBtnSecondary:hover {
  border-color: #4a5578;
  color: #4a5578;
}

.sSiteBtnOutline {
  width: 100%;
  background: transparent;
  border: 2px dashed var(--site-primary-color);
  border-radius: 12px;
  padding: 13px 16px;

  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 11px;
}

.sSiteBtnOutline:hover {
  background: var(--site-secondary-color);
}

.sSiteSkipNote {
  text-align: center;
  font-size: 11px;
  color: #8a96b8;
  line-height: 1.6;
}

.sSiteSkipNoteStrong {
  color: #4a5578;
  font-weight: 600;
}

.sSiteCartBubble {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: var(--site-primary-color);
  color: white;
  padding: 12px 18px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(13, 27, 75, 0.3);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  z-index: 1000;

  font-weight: 700;
  font-size: 14px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  animation: sSiteFadeUp 0.5s ease 0.5s both;
}

.sSiteCartBubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(13, 27, 75, 0.38);
}

.sSiteCartBubbleIcon {
  width: 28px;
  height: 28px;
  background: var(--site-secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sSiteCartBubblePulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17b26a;
  animation: sSitePulseGreen 2s ease infinite;
}

@keyframes sSitePulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(23, 178, 106, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0);
  }
}

.sSiteModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.sSiteModalOverlay.sSiteActive {
  opacity: 1;
  pointer-events: auto;
}

.sSiteCartModal {
  position: fixed;
  bottom: 84px;
  right: 26px;
  width: 360px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
  border: 1px solid #e2e8f4;
  padding: 22px;
  z-index: 999;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: bottom right;
}

.sSiteCartModal.sSiteActive {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sSiteCartModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1.5px solid var(--site-secondary-color);
}

.sSiteCartModalTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteCloseBtn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f4f6fb;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5578;
  font-size: 12px;
  transition: background 0.2s;
  font-family: inherit;
}

.sSiteCloseBtn:hover {
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
}

.sSiteModalItem {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed #e2e8f4;
  font-size: 13px;
}

.sSiteModalItem:last-child {
  border-bottom: none;
}

.sSiteModalItemName {
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteModalItemPrice {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteModalTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-top: 13px;
  border-top: 1.5px solid var(--site-secondary-color);
}

.sSiteModalTotalLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a96b8;
}

.sSiteModalTotal {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteSecureNote {
  text-align: center;
  font-size: 11px;
  color: #8a96b8;
  margin-top: 8px;
}

.sSiteFooter {
  font-size: 11px;
  color: #8a96b8;
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 20px 0 0;
}

@keyframes sSiteFadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sSiteFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 600px) {
  .sSiteContent {
    padding: 20px 18px 16px;
  }

  .sSiteActions {
    padding: 0 18px 24px;
  }

  .sSiteStepHeader {
    padding: 22px 18px 0;
  }

  .sSitePlanGrid {
    padding: 16px 18px;
    grid-template-columns: 1fr;
  }

  .sSitePlanCardFull {
    grid-column: 1;
  }

  .sSiteHeadline {
    font-size: 22px;
  }

  .sSiteBenefitsRow {
    flex-wrap: wrap;
  }

  .sSiteBenefitChip {
    min-width: calc(50% - 4px);
    flex: none;
  }

  .sSiteAddonGrid {
    grid-template-columns: 1fr;
  }

  .sSiteReviewLayout {
    grid-template-columns: 1fr;
  }

  .sSiteCartModal {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }

  .sSiteCartModal.sSiteActive {
    transform: translateY(0);
  }

  .sSiteCartBubble {
    bottom: 100px;
    right: 10px;
    justify-content: center;
    width: auto;
  }
}

/* checkout flow css ends 06 march 2026 */

.sSCheckoutField.is-invalid {
  border-color: #dc3545;
  background-color: #fff8f8;
}

.sSCheckoutField.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.sSitePromoChip.sSiteAddonTileSelected {
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%) !important;
  color: white !important;
  border-color: var(--site-primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.sSiteOptCard.sSiteOptCardSelected {
  border-color: var(--site-primary-color) !important;
  /* background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  ) !important; */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.sSiteOptCard.sSiteOptCardSelected .sSiteOptCardCheck {
  border-color: var(--site-primary-color);
  background: white;
}

/* Error highlight for form fields */
input.error,
textarea.error,
select.error,
div.error {
  border: 1px solid #dc3545 !important;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

/* Error message text */
.bdPagesProOnboardFieldError,
.bdPagesOnboardFieldError {
  display: block !important;
  color: #dc3545 !important;
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Profession suggestions dropdown */
.bdPagesProOnboardInputWrap {
  position: relative;
}

.bdPagesProOnboardSuggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bdPagesProOnboardSuggestionItem {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}

.bdPagesProOnboardSuggestionItem:hover {
  background: #f0f0f0;
}

/* OTP Dialog */
.bdPagesProOnboardOtpOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesProOnboardOtpDialog {
  background: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 460px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bdPagesProOnboardOtpIcon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.bdPagesProOnboardOtpTitle {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.bdPagesProOnboardOtpDesc {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.bdPagesProOnboardOtpPhone {
  font-weight: 600;
  color: #333;
}

.bdPagesProOnboardOtpInput {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 10px;
  outline: none;
}

.bdPagesProOnboardOtpInput:focus {
  border-color: #0055cc;
}

.bdPagesProOnboardOtpSubmit {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  background: var(--bdOnboard-gold);
  color: #000000;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.bdPagesProOnboardOtpSubmit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Step 4: BizCard CTA buttons ── */

/* ── Step 4: Upgrade band (above LinkedIn card) ── */

/* ── Completion panel: button group ── */
.bdPagesProOnboardCompBtnGroup {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
}

.bdPagesProOnboardCompBtn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  border: none;
}

.bdPagesProOnboardCompBtn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bdPagesProOnboardCompBtnPrimary {
  background: #9a7a2e;
  color: #fff;
}

.bdPagesProOnboardCompBtnOutline {
  background: transparent;
  color: #9a7a2e;
  border: 1.5px solid #9a7a2e;
}

/* ── Completion panel upgrade band (golden scheme) ── */
.bdPagesProOnboardCompUpgradeBand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-top: 16px;
  border-radius: 14px;
  width: 100%;
  background: linear-gradient(135deg, #fdf8ee 0%, #fef3d0 100%);
  border: 1.5px solid #d4a843;
  flex-wrap: wrap;
  text-align: left;
}

.bdPagesProOnboardCompUpgradeBandLeft {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.bdPagesProOnboardCompUpgradeIcon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #c9922a, #e8b84b);
  color: #fff;
  font-size: 18px;
}

.bdPagesProOnboardCompUpgradeTitle {
  font-size: 13px;
  font-weight: 700;
  color: #7a5a1e;
  line-height: 1.3;
  margin-bottom: 3px;
}

.bdPagesProOnboardCompUpgradeSub {
  font-size: 12px;
  color: #a07830;
  line-height: 1.4;
}

.bdPagesProOnboardCompUpgradeBtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #c9922a, #e8b84b);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(201, 146, 42, 0.35);
}

.bdPagesProOnboardCompUpgradeBtn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

/* ============================================
   FLIPBOOK PAGE STYLES (/flipbook)
   ============================================ */

/* ── Hero Label ── */
.fbHeroLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  border: 1.5px solid var(--site-secondary-color);
  background: var(--site-secondary-color);
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.fbLabelDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

.fbHeroSubtext {
  max-width: 480px;
  line-height: 1.8;
}

/* ── Trust Avatars ── */
.fbTrustAvatars {
  display: flex;
}

.fbAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}

.fbAvatarA {
  background: var(--site-primary-color);
}

.fbAvatarB {
  background: #e04010;
}

.fbAvatarC {
  background: #ff7a52;
}

.fbAvatarD {
  background: #c93e0f;
}

/* ── Book Visual ── */
.fbBookScene {
  position: relative;
  width: 300px;
  height: 390px;
}

.fbBook {
  width: 100%;
  height: 100%;
  position: relative;
}

.fbBookBack {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 3px 12px 12px 3px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(255, 87, 34, 0.15);
  transform: translateX(-8px) translateZ(0);
}

.fbBookCover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 3px 12px 12px 3px;
  background: #fff;
  border: 1px solid rgba(255, 87, 34, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  box-shadow: 4px 6px 24px rgba(255, 87, 34, 0.12);
}

.fbCoverPattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 28px,
      rgba(255, 87, 34, 0.03) 28px,
      rgba(255, 87, 34, 0.03) 29px);
  pointer-events: none;
}

.fbCoverTag {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
  margin-bottom: 0.8rem;
  position: relative;
}

.fbCoverTitle {
  font-size: 1.45rem;
  font-weight: 800;
  color: #1f1f1f;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  position: relative;
}

.fbCoverSub {
  font-size: 0.78rem;
  color: #666;
  position: relative;
}

.fbCoverDivider {
  width: 36px;
  height: 2px;
  background: var(--site-primary-color);
  margin: 1rem 0;
  position: relative;
}

.fbCoverImages {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.fbImgBlock {
  border-radius: 4px;
  animation: fbShimmer 3s ease-in-out infinite;
}

.fbImgBlock:nth-child(1) {
  background: #faebe4;
  animation-delay: 0s;
}

.fbImgBlock:nth-child(2) {
  background: #fde8df;
  animation-delay: 0.4s;
}

.fbImgBlock:nth-child(3) {
  background: #fff0ea;
  animation-delay: 0.8s;
}

.fbImgBlock:nth-child(4) {
  background: #fce5da;
  animation-delay: 1.2s;
}

@keyframes fbShimmer {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.fbCoverFooter {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.fbPageDots {
  display: flex;
  gap: 3px;
}

.fbDot {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #e0e0e0;
}

.fbDotActive {
  background: var(--site-primary-color);
}

/* ── Page Flip Animation ── */
.fbFlipPage {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: fbFlipPage 6s ease-in-out infinite;
  pointer-events: none;
}

.fbFlipFront,
.fbFlipBack {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0 12px 12px 0;
  border: 1px solid rgba(255, 87, 34, 0.12);
}

.fbFlipFront {
  background: #fff8f5;
}

.fbFlipBack {
  background: #fff3ee;
  transform: rotateY(180deg);
}

@keyframes fbFlipPage {

  0%,
  30% {
    transform: rotateY(0deg);
  }

  50%,
  80% {
    transform: rotateY(-160deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

/* ── Floating Badges ── */
.fbBadge {
  position: absolute;
  background: #fff;
  border: 1.5px solid var(--site-secondary-color);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.75rem;
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.1);
  animation: fbFloat 5s ease-in-out infinite;
}

.fbBadge1 {
  top: -18px;
  right: -50px;
  animation-delay: 0s;
}

.fbBadge2 {
  bottom: 40px;
  right: -65px;
  animation-delay: 2.5s;
}

.fbBadge3 {
  bottom: -10px;
  left: -45px;
  animation-delay: 1.2s;
}

@keyframes fbFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-7px);
  }
}

.fbBadgeValue {
  display: block;
  font-weight: 700;
  color: var(--site-primary-color);
  font-size: 1rem;
}

.fbBadgeLabel {
  color: #666;
  font-size: 0.7rem;
}

/* ── Ticker ── */
.fbTicker {
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
  padding: 0.9rem 0;
  overflow: hidden;
  background: var(--site-secondary-color);
}

.fbTickerTrack {
  display: flex;
  gap: 2.5rem;
  animation: fbTicker 22s linear infinite;
  white-space: nowrap;
}

.fbTickerItem {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  font-weight: 500;
}

.fbTickerDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

@keyframes fbTicker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ── Section Label ── */
.fbSectionLabel {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.fbSectionLabelCenter {
  display: flex;
  justify-content: center;
}

.fbTextRelaxed {
  line-height: 1.85;
}

/* ── What Is Cards ── */
.fbWhatCards {
  border: 1.5px solid #ffe8e0;
  border-radius: 14px;
  overflow: hidden;
}

.fbWhatCard {
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid #ffe8e0;
  background: #fff;
  transition: background 0.2s;
}

.fbWhatCard:last-child {
  border-bottom: none;
}

.fbWhatCard:hover {
  background: #fff8f6;
}

.fbWhatNum {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* ── Features Grid ── */
.fbFeaturesSection {
  background: #fff8f6;
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
}

.fbFeaturesGrid {
  border: 1.5px solid #ffe8e0;
  border-radius: 14px;
  overflow: hidden;
}

.fbFeatureCard {
  padding: 2rem;
  background: #fff;
  border-right: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
  transition: background 0.2s;
}

.fbFeatureCard:hover {
  background: #fff8f6;
}

.fbFeatureCard:nth-child(3n) {
  border-right: none;
}

.fbFeatureCard:nth-last-child(-n+3) {
  border-bottom: none;
}

.fbFeatureIcon {
  width: 44px;
  height: 44px;
  border: 1.5px solid #ffe8e0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-secondary-color);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

/* ── Use Cases ── */
.fbUsecaseCard {
  border: 1.5px solid #ffe8e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.fbUsecaseCard:hover {
  transform: translateY(-4px);
  border-color: var(--site-primary-color);
  box-shadow: 0 8px 28px rgba(255, 87, 34, 0.12);
}

.fbUsecaseThumb {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.fbUsecaseThumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent 60%);
}

.fbUc1 {
  background: linear-gradient(135deg, #ffe0d4, #ffc4a8);
}

.fbUc2 {
  background: linear-gradient(135deg, #ffecd6, #ffd4a8);
}

.fbUc3 {
  background: linear-gradient(135deg, #ffddd4, #ffb89a);
}

.fbUc4 {
  background: linear-gradient(135deg, #ffe8d4, #ffcfaa);
}

.fbUsecaseIcon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(255, 87, 34, 0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
}

/* ── How It Works ── */
.fbHowSection {
  background: #fff8f6;
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
}

.fbStepsRow {
  position: relative;
}

.fbStepsLine {
  position: absolute;
  top: 28px;
  left: 22%;
  right: 22%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--site-secondary-color), var(--site-secondary-color), transparent);
  z-index: 0;
}

.fbStep {
  padding: 0 1.5rem;
}

.fbStepNum {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--site-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--site-primary-color);
  margin: 0 auto 1.5rem;
  background: #fff;
  position: relative;
  z-index: 1;
}

/* ── NFC Mockup ── */
.fbNfcMockup {
  position: relative;
  width: 280px;
  height: 280px;
}

.fbNfcCard {
  width: 270px;
  height: 168px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #ffe8e0;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(255, 87, 34, 0.1);
  transform: rotate(-4deg);
}

.fbNfcPattern {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 24px,
      rgba(255, 87, 34, 0.03) 24px, rgba(255, 87, 34, 0.03) 25px);
}

.fbNfcName {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1f1f1f;
  position: relative;
}

.fbNfcRole {
  font-size: 0.75rem;
  color: #888;
  position: relative;
}

.fbNfcChip {
  position: absolute;
  bottom: 1.3rem;
  right: 1.5rem;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
}

.fbNfcBrand {
  position: absolute;
  bottom: 1.3rem;
  left: 1.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--site-primary-color);
  font-weight: 700;
  text-transform: uppercase;
}

.fbTapRipple {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 87, 34, 0.45);
  animation: fbRipple 2.5s ease-out infinite;
}

.fbTapRipple::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 87, 34, 0.2);
  animation: fbRipple 2.5s ease-out infinite 0.6s;
}

@keyframes fbRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

.fbPhone {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 180px;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid #ffe8e0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(3deg);
  box-shadow: 0 4px 20px rgba(255, 87, 34, 0.08);
}

.fbPhoneNotch {
  height: 20px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fbPhoneBar {
  width: 28px;
  height: 4px;
  border-radius: 3px;
  background: #e0e0e0;
}

.fbPhoneScreen {
  flex: 1;
  padding: 7px;
  background: #fff8f6;
}

.fbPhonePage {
  border-radius: 5px;
  height: 100%;
  background: #fff;
  border: 1px solid #ffe8e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
}

.fbPhoneLine {
  width: 80%;
  height: 4px;
  border-radius: 2px;
  background: #e8e8e8;
}

.fbPhoneLineAccent {
  background: var(--site-secondary-color);
  border: 1px solid rgba(255, 87, 34, 0.3);
}

.fbPhoneLineShort {
  width: 50%;
}

/* ── CTA Section ── */
.fbCtaSection {
  background: var(--site-secondary-color);
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
}

.fbCtaSubtext {
  max-width: 440px;
  line-height: 1.8;
}

/* ============================================
   ONELINK PAGE STYLES (/onelink)
   ============================================ */

/* ── Hero ── */
/* .olHeroSection {
  background: #faf8f5;
  padding-top: 5rem;
} */

.olHeroInner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 4rem 4rem 5rem;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 4rem;
}

.olHeroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  margin-bottom: 2rem;
}

.olHeroTitle {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.03em;
  color: #1a1714;
  margin-bottom: 1.8rem;
}

.olHeroTitleAccent {
  color: var(--site-primary-color);
  display: block;
}

.olHeroTitleOutline {
  -webkit-text-stroke: 2px #1a1714;
  color: transparent;
  display: block;
}

.olHeroBody {
  font-size: 1.05rem;
  font-weight: 300;
  color: #4a4640;
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 2.8rem;
}

.olHeroActions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.olBtnRound {
  border-radius: 100px !important;
}

.olHeroStats {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.olStatNum {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1714;
  line-height: 1;
}

.olStatLabel {
  font-size: 0.78rem;
  color: #8a857e;
  margin-top: 0.2rem;
  font-weight: 300;
}

.olStatDivider {
  width: 1px;
  height: 40px;
  background: rgba(20, 18, 16, 0.2);
  flex-shrink: 0;
}

/* ── Phone Mockup ── */
.olPhoneWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.olPhoneOuter {
  width: 270px;
  background: #1a1714;
  border-radius: 38px;
  padding: 10px;
  position: relative;
  box-shadow: 0 40px 80px rgba(20, 18, 16, 0.18), 0 8px 24px rgba(20, 18, 16, 0.1);
}

.olPhoneInner {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  min-height: 540px;
  position: relative;
}

.olPhoneStatus {
  background: #1a1714;
  padding: 10px 24px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.olPhoneNotch {
  width: 66px;
  height: 20px;
  background: #1a1714;
  border-radius: 0 0 12px 12px;
}

.olPhoneContent {
  padding: 0 0 20px;
  background: #f9f7f4;
}

.olPhoneCover {
  height: 110px;
  background: linear-gradient(135deg, #1a1714, #2d2a24);
  position: relative;
  overflow: hidden;
}

.olPhoneCoverPattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px,
      rgba(255, 87, 34, 0.08) 14px, rgba(255, 87, 34, 0.08) 15px);
}

.olPhoneAvatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--site-primary-color), #f0a060);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
}

.olPhoneProfile {
  padding: 40px 18px 10px;
  text-align: center;
}

.olPhoneName {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1714;
}

.olPhoneHandle {
  font-size: 0.7rem;
  color: #8a857e;
  margin-top: 2px;
}

.olPhoneBio {
  font-size: 0.7rem;
  color: #4a4640;
  margin-top: 6px;
  line-height: 1.5;
  padding: 0 4px;
}

.olPhoneSocials {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.olSocialIcon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(20, 18, 16, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #4a4640;
  background: #fff;
}

.olPhoneLinks {
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.olPhoneLinkBtn {
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  text-decoration: none;
}

.olPhoneLinkBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 18, 16, 0.2);
}

.olLinkIcon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.olLinkIconOrange {
  background: #fff0eb;
}

.olLinkIconGreen {
  background: #ebf5eb;
}

.olLinkIconBlue {
  background: #ebf0ff;
}

.olLinkIconPurple {
  background: #f2ebff;
}

.olLinkText {
  flex: 1;
}

.olLinkTitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: #1a1714;
  line-height: 1.2;
}

.olLinkSub {
  font-size: 0.62rem;
  color: #8a857e;
  margin-top: 1px;
}

.olLinkArrow {
  font-size: 0.8rem;
  color: #8a857e;
}

.olPhoneBigdot {
  text-align: center;
  margin-top: 10px;
  font-size: 0.58rem;
  color: #8a857e;
  letter-spacing: 0.06em;
}

/* ── Phone Floats ── */
.olPhoneFloat {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.75rem;
  box-shadow: 0 4px 16px rgba(20, 18, 16, 0.08);
  animation: olFloatY 5s ease-in-out infinite;
}

.olPhoneFloatF1 {
  top: -18px;
  right: -58px;
  animation-delay: 0s;
}

.olPhoneFloatF2 {
  bottom: 60px;
  right: -62px;
  animation-delay: 2s;
}

.olPhoneFloatF3 {
  bottom: 0;
  left: -52px;
  animation-delay: 1s;
}

@keyframes olFloatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.olFloatVal {
  font-weight: 700;
  font-size: 1rem;
  color: #1a1714;
  letter-spacing: -0.02em;
  display: block;
}

.olFloatLbl {
  font-size: 0.66rem;
  color: #8a857e;
  font-weight: 300;
}

/* ── Strip / Ticker ── */
.olStrip {
  background: #1a1714;
  padding: 0.95rem 0;
  overflow: hidden;
}

.olStripInner {
  display: flex;
  gap: 2.5rem;
  animation: olStripScroll 22s linear infinite;
  white-space: nowrap;
}

.olStripItem {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.4);
}

.olStripDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

@keyframes olStripScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ── Shared Section Layout ── */
.olSectionWrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 6rem 4rem;
}

.olEyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 500;
  margin-bottom: 1rem;
}

.olSectionTitle {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.07;
  color: #1a1714;
  margin-bottom: 1.2rem;
}

/* ── VS Section ── */
.olVsSection {
  background: #f0ede7;
  border-top: 1px solid rgba(20, 18, 16, 0.1);
  border-bottom: 1px solid rgba(20, 18, 16, 0.1);
}

.olVsGrid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 3.5rem;
}

.olVsColHead {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.olVsColHeadAccent {
  color: var(--site-primary-color);
}

.olVsColHeadMuted {
  color: #8a857e;
}

.olVsColSub {
  font-size: 0.8rem;
  color: #8a857e;
  margin-bottom: 2rem;
  font-weight: 300;
}

.olVsRow {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 0.5px solid rgba(20, 18, 16, 0.1);
  font-size: 0.875rem;
}

.olVsRow:last-child {
  border-bottom: none;
}

.olVsIcon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.olVsIconYes {
  background: #e8f5e9;
  color: #2e7d32;
}

.olVsIconNo {
  background: #ffebee;
  color: #c62828;
}

.olVsIconMid {
  background: #fff8e1;
  color: #f57f17;
}

.olVsText {
  color: #4a4640;
  line-height: 1.5;
  font-weight: 300;
}

.olVsText strong {
  color: #1a1714;
  font-weight: 500;
}

.olVsDivider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 2rem;
  color: #8a857e;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.olVsDividerLine {
  width: 1px;
  flex: 1;
  background: rgba(20, 18, 16, 0.2);
}

.olVsBadge {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--site-primary-color);
  letter-spacing: -0.02em;
}

/* ── Features Grid ── */
.olFeaturesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(20, 18, 16, 0.1);
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 3.5rem;
}

.olFeatCard {
  background: #faf8f5;
  padding: 2.2rem;
  transition: background 0.2s;
}

.olFeatCard:hover {
  background: #fff;
}

.olFeatNum {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8a857e;
  margin-bottom: 1.6rem;
}

.olFeatAccentBar {
  width: 24px;
  height: 2px;
  background: var(--site-primary-color);
  margin-bottom: 1.1rem;
}

.olFeatTitle {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1714;
  margin-bottom: 0.6rem;
}

.olFeatDesc {
  font-size: 0.875rem;
  color: #4a4640;
  line-height: 1.7;
  font-weight: 300;
}

/* ── Use Cases ── */
.olUcSection {
  background: #f0ede7;
  border-top: 1px solid rgba(20, 18, 16, 0.1);
  border-bottom: 1px solid rgba(20, 18, 16, 0.1);
}

.olUcGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.olUcCard {
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.olUcCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 18, 16, 0.1);
}

.olUcThumb {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.olUc1 {
  background: #fff0eb;
}

.olUc2 {
  background: #f0f5ff;
}

.olUc3 {
  background: #f0fff4;
}

.olUc4 {
  background: #fdf5e0;
}

.olUcEmoji {
  font-size: 2rem;
  position: relative;
  z-index: 1;
}

.olUcBody {
  padding: 1.1rem 1.3rem 1.4rem;
}

.olUcTitle {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1714;
  margin-bottom: 0.4rem;
}

.olUcDesc {
  font-size: 0.78rem;
  color: #4a4640;
  font-weight: 300;
  line-height: 1.6;
}

/* ── How It Works ── */
.olHowGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.olHowStepsList {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.5rem;
}

.olHowStep {
  display: flex;
  gap: 1.4rem;
  padding: 1.8rem 0;
  border-bottom: 0.5px solid rgba(20, 18, 16, 0.1);
  transition: padding-left 0.2s;
  cursor: default;
}

.olHowStep:last-child {
  border-bottom: none;
}

.olHowStep:hover {
  padding-left: 0.5rem;
}

.olHowStepNum {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--site-primary-color);
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 28px;
  letter-spacing: 0.05em;
}

.olHowStepTitle {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1714;
  margin-bottom: 0.4rem;
}

.olHowStepDesc {
  font-size: 0.875rem;
  color: #4a4640;
  font-weight: 300;
  line-height: 1.7;
}

.olHowVisual {
  background: #f0ede7;
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 20px;
  padding: 2.4rem;
  position: relative;
  overflow: hidden;
}

.olHowVisualUrl {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1714;
  line-height: 1.2;
  margin-bottom: 1.4rem;
}

.olHowVisualUrlAccent {
  color: var(--site-primary-color);
}

.olHowVisualTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.olHowTag {
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  color: #4a4640;
}

.olHowTagAccent {
  background: var(--site-primary-color);
  color: #fff;
  border-color: var(--site-primary-color);
}

/* ── NFC Section (dark) ── */
.olNfcSection {
  background: #1a1714;
}

.olNfcInner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 6rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.olNfcEyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 500;
  margin-bottom: 1rem;
}

.olNfcTitle {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #f5f2ed;
  margin-bottom: 1.3rem;
}

.olNfcBody {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(245, 242, 237, 0.6);
  line-height: 1.8;
  max-width: 440px;
  margin-bottom: 2.4rem;
}

.olBtnLight {
  display: inline-block;
  background: #f5f2ed;
  color: #1a1714;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.9rem 2.2rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.olBtnLight:hover {
  background: #fff;
  transform: translateY(-2px);
  color: #1a1714;
}

.olNfcVisual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.olNfcCardMock {
  width: 230px;
  height: 142px;
  background: #1e1c18;
  border-radius: 12px;
  border: 0.5px solid rgba(245, 242, 237, 0.12);
  padding: 1.3rem;
  position: relative;
  overflow: hidden;
  transform: rotate(-4deg);
  flex-shrink: 0;
}

.olNfcCardMock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 18px,
      rgba(255, 87, 34, 0.04) 18px, rgba(255, 87, 34, 0.04) 19px);
}

.olNfcCardName {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f5f2ed;
  position: relative;
}

.olNfcCardRole {
  font-size: 0.68rem;
  color: rgba(245, 242, 237, 0.4);
  font-weight: 300;
  position: relative;
}

.olNfcCardBrand {
  position: absolute;
  bottom: 1.1rem;
  left: 1.3rem;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
}

.olNfcArrowWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.olNfcArrow {
  font-size: 1.4rem;
  color: rgba(245, 242, 237, 0.3);
}

.olNfcArrowLabel {
  font-size: 0.62rem;
  color: rgba(245, 242, 237, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.olMiniPhone {
  width: 86px;
  height: 148px;
  background: #2a2723;
  border-radius: 16px;
  border: 0.5px solid rgba(245, 242, 237, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(2deg);
  flex-shrink: 0;
}

.olMiniPhoneBar {
  height: 13px;
  background: #1a1814;
  display: flex;
  align-items: center;
  justify-content: center;
}

.olMiniBar {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #2a2723;
}

.olMiniScreen {
  flex: 1;
  background: #f9f7f4;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.olMiniAvatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--site-primary-color), #f0a060);
  margin: 3px auto 2px;
}

.olMiniName {
  width: 58%;
  height: 4px;
  border-radius: 3px;
  background: #1a1714;
  margin: 0 auto;
}

.olMiniBtn {
  height: 13px;
  border-radius: 7px;
  background: #fff;
  border: 0.5px solid rgba(20, 18, 16, 0.1);
}

/* ── CTA Section ── */
.olCtaSection {
  background: #faf8f5;
  border-top: 1px solid rgba(20, 18, 16, 0.1);
}

.olCtaInner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 7rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.olCtaTitle {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #1a1714;
  margin-bottom: 1.3rem;
}

.olCtaTitleOutline {
  -webkit-text-stroke: 2px #1a1714;
  color: transparent;
}

.olCtaBody {
  font-size: 1rem;
  font-weight: 300;
  color: #4a4640;
  line-height: 1.8;
  margin-bottom: 0;
  max-width: 420px;
}

.olCtaRight {
  background: #f0ede7;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 20px;
  padding: 2.4rem;
}

.olCtaFormLabel {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 0.35rem;
}

.olCtaFormSub {
  font-size: 0.8rem;
  color: #8a857e;
  margin-bottom: 1.6rem;
  font-weight: 300;
}

.olCtaInputRow {
  display: flex;
  gap: 0;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 100px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 0.8rem;
}

.olCtaInputPrefix {
  padding: 0.8rem 0 0.8rem 1.3rem;
  font-size: 0.9rem;
  color: #8a857e;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-weight: 300;
}

.olCtaInput {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.8rem 0.5rem;
  font-size: 0.9rem;
  color: #1a1714;
  background: transparent;
  font-weight: 400;
}

.olCtaSubmit {
  padding: 0.8rem 1.3rem;
  background: var(--site-primary-color);
  color: #fff;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 100px;
  margin: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.olCtaSubmit:hover {
  background: var(--site-quaternary-color);
}

.olCtaLinkHint {
  font-size: 0.74rem;
  color: #8a857e;
  margin-bottom: 1.3rem;
}

.olCtaLinkHintBold {
  color: #1a1714;
}

.olCtaFeatList {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.olCtaFeatItem {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: #4a4640;
  font-weight: 300;
}

.olCtaFeatDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .olHeroInner {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 4rem;
  }

  .olPhoneWrap {
    display: none;
  }

  .olSectionWrap {
    padding: 4.5rem 2rem;
  }

  .olVsGrid {
    grid-template-columns: 1fr;
  }

  .olVsDivider {
    display: none;
  }

  .olFeaturesGrid {
    grid-template-columns: 1fr 1fr;
  }

  .olUcGrid {
    grid-template-columns: 1fr 1fr;
  }

  .olHowGrid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .olNfcInner {
    grid-template-columns: 1fr;
    padding: 4.5rem 2rem;
  }

  .olNfcVisual {
    display: none;
  }

  .olCtaInner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4.5rem 2rem;
  }

  .olHeroStats {
    flex-wrap: wrap;
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .olFeaturesGrid {
    grid-template-columns: 1fr;
  }

  .olUcGrid {
    grid-template-columns: 1fr;
  }

  .olStatDivider {
    display: none;
  }
}

/* ============================================
   SHOP PAGE (/shop)
   ============================================ */
:root {
  --shopNavy: #1c2d64;
  --shopNavyDeep: #131f47;
  --shopNavyNight: #0b1230;
  --shopBlue: #2255e8;
  --shopOrange: #f15a25;
  --shopOrangeWarm: #ff7a3d;
  --shopOrangeSoft: #fff1e9;
  --shopCream: #fbf6f0;
  --shopCreamDeep: #f4ece1;
  --shopGreen: #21d4a8;
  --shopGold: #ffc857;
  --shopInk: #0d1428;
  --shopInkSoft: #2a3556;
  --shopMuted: #6b748f;
  --shopLine: #e6e9f2;
  --shopLineSoft: #f0f2f8;
  --shopBg: #fafbff;
  --shopShadowSm: 0 1px 2px rgba(11, 18, 48, 0.06), 0 2px 6px rgba(11, 18, 48, 0.04);
  --shopShadowMd: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --shopRadiusMd: 16px;
  --shopRadiusPill: 999px;
  --shopNavH: 70px;
}

app-shop {
  display: block;
  background: var(--shopBg);
  color: var(--shopInk);
  font-family: var(--site-primary-font);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

app-shop a {
  color: inherit;
  text-decoration: none;
}

app-shop button {
  font-family: inherit;
  cursor: pointer;
}

/* ====== PROMO BANNER ====== */
.shopPromoBanner {
  background: linear-gradient(135deg, #f15a25 0%, #ff7a3d 50%, #f15a25 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 16px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.005em;
}

.shopPromoBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.5;
}

.shopPromoInner {
  position: relative;
  gap: 14px;
}

.shopPromoIcon {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.shopPromoText {
  gap: 8px;
}

.shopPromoText strong {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.shopPromoDivider {
  opacity: 0.4;
  font-weight: 300;
}

.shopPromoCta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #d6431a;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  transition: transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.shopPromoCta:hover {
  transform: translateX(2px);
  background: #fff5ee;
  color: #d6431a;
}

.shopPromoCta svg {
  transition: transform 0.2s ease;
}

.shopPromoCta:hover svg {
  transform: translateX(2px);
}

@media (max-width: 600px) {
  .shopPromoBanner {
    padding: 9px 14px;
    font-size: 12.5px;
  }

  .shopPromoInner {
    gap: 10px;
  }

  .shopPromoDivider {
    display: none;
  }

  .shopPromoText {
    gap: 6px;
  }
}

/* ====== NAV ====== */
.shopNav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--shopLine);
  padding: 13px 0;
  height: var(--shopNavH);
}

.shopNavInner {
  height: 100%;
}

.shopNavLogo img {
  height: 32px;
  width: auto;
  display: block;
}

.shopNavSearch {
  position: relative;
  max-width: 540px;
}

.shopNavSearch input.form-control {
  width: 100%;
  padding: 10px 16px 10px 42px !important;
  border: 1.5px solid var(--shopLine);
  font-size: 14px;
  background: var(--shopBg);
  color: var(--shopInk);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: none;
  height: auto;
}

.shopNavSearch input.form-control:focus {
  border-color: var(--shopOrange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(241, 90, 37, 0.08);
}

.shopNavSearchIcon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--shopMuted);
  pointer-events: none;
  z-index: 2;
}

.shopNavLink {
  font-size: 14px;
  font-weight: 500;
  color: var(--shopInkSoft);
  padding: 8px 14px;
  border-radius: var(--shopRadiusPill);
  transition: background 0.2s ease, color 0.2s ease;
}

.shopNavLink:hover {
  background: var(--shopCream);
  color: var(--shopNavy);
}

.shopNavCart {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopCream);
  color: var(--shopNavy);
  transition: background 0.2s ease;
}

.shopNavCart:hover {
  background: var(--shopOrangeSoft);
}

.shopNavCartCount {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 19px;
  height: 19px;
  background: var(--shopOrange);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.shopNavGetStarted {
  background: var(--shopNavy);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--shopRadiusPill);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.shopNavGetStarted:hover {
  background: var(--shopBlue);
  color: #fff;
}

/* ====== HEADER ====== */
.shopHeader {
  background: linear-gradient(135deg, var(--shopNavyDeep) 0%, var(--shopNavy) 100%);
  color: #fff;
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}

.shopHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.shopHeader::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

.shopHeaderInner {
  position: relative;
}

.shopBreadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 18px;
}

.shopBreadcrumb a {
  color: rgba(255, 255, 255, 0.65);
}

.shopBreadcrumb a:hover {
  color: #fff;
}

.shopBreadcrumbCurrent {
  color: #fff;
  font-weight: 600;
}

.shopBreadcrumbSep {
  color: rgba(255, 255, 255, 0.3);
}

.shopTitleRow {
  gap: 30px;
}

.shopTitle {
  font-family: var(--site-secondary-font);
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}

.shopTitle em {
  font-style: italic;
  color: var(--shopOrange);
}

.shopSub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}

.shopStats {
  gap: 32px;
}

.shopStat {
  text-align: right;
}

.shopStatNum {
  font-family: var(--site-secondary-font);
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.shopStatUnit {
  color: var(--shopOrange);
  font-family: var(--site-primary-font);
  font-size: 16px;
}

.shopStatLbl {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .shopStats {
    width: 100%;
    gap: 20px;
  }

  .shopStat {
    text-align: left;
  }
}

/* ====== TOOLBAR ====== */
.shopToolbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--shopLine);
  padding: 16px 0;
  position: sticky;
  top: var(--shopNavH);
  z-index: 70;
  backdrop-filter: blur(10px);
}

.shopToolbarMobileBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--shopLine);
  border-radius: var(--shopRadiusPill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shopNavy);
  background: #fff;
  transition: border-color 0.2s ease;
}

.shopToolbarMobileBtn:hover {
  border-color: var(--shopNavy);
}

.shopToolbarResults {
  font-size: 13.5px;
  color: var(--shopMuted);
}

.shopToolbarResults strong {
  color: var(--shopInk);
  font-weight: 600;
}

.shopToolbarSort .form-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--shopLine);
  background-color: #fff;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--shopNavy);
  cursor: pointer;
  outline: none;
  width: auto;
  min-width: 180px;
  box-shadow: none;
}

.shopViewToggle {
  display: flex;
  background: var(--shopCream);
  border-radius: var(--shopRadiusPill);
  padding: 4px;
  border: 1px solid var(--shopLine);
}

.shopViewBtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopMuted);
  background: transparent;
  border: none;
  transition: all 0.2s ease;
}

.shopViewBtnActive {
  background: var(--shopNavy);
  color: #fff;
}

/* ====== BODY ====== */
/* Vertical padding only — the shorthand used to zero the horizontal padding
   that .container supplies, which made the product cards bleed to the
   viewport edges on mobile. */
.shopBody {
  padding-top: 32px;
  padding-bottom: 80px;
}

/* ====== SIDEBAR ====== */
.shopSidebar {
  position: sticky;
  top: calc(var(--shopNavH) + 70px);
  max-height: calc(100vh - var(--shopNavH) - 90px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--shopLine) transparent;
}

.shopSidebar::-webkit-scrollbar {
  width: 4px;
}

.shopSidebar::-webkit-scrollbar-thumb {
  background: var(--shopLine);
  border-radius: 2px;
}

.shopSidebarHead {
  font-family: var(--site-primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shopMuted);
  padding: 0 12px;
  margin-bottom: 12px;
}

.shopCatList {
  margin: 0 0 24px;
  padding: 0;
}

.shopCatItem {
  margin-bottom: 2px;
}

.shopCatLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--shopRadiusMd);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--shopInkSoft);
  transition: all 0.2s ease;
}

.shopCatLink:hover {
  background: var(--shopCream);
  color: var(--shopNavy);
}

.shopCatLinkActive {
  background: var(--shopNavy) !important;
  color: #fff !important;
}

.shopCatLinkActive .shopCatCount {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.shopCatLinkActive .shopCatIcon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--shopOrange);
}

.shopCatLinkLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shopCatIcon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--shopCreamDeep);
  color: var(--shopNavy);
  transition: all 0.2s ease;
}

.shopCatLink:hover .shopCatIcon {
  background: var(--shopOrangeSoft);
  color: var(--shopOrange);
}

.shopCatName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopCatCount {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--shopCream);
  color: var(--shopMuted);
  padding: 2px 8px;
  border-radius: var(--shopRadiusPill);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shopSidebarDivider {
  border: none;
  height: 1px;
  background: var(--shopLine);
  margin: 4px 14px 16px;
}

.shopHelpCard {
  background: linear-gradient(135deg, var(--shopOrangeSoft), #ffe4d0);
  border-radius: var(--shopRadiusMd);
  padding: 22px;
  border: 1px solid rgba(241, 90, 37, 0.2);
  margin: 0 6px;
}

.shopHelpCardIcon {
  width: 36px;
  height: 36px;
  background: var(--shopOrange);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.shopHelpCard h4 {
  font-family: var(--site-secondary-font);
  font-size: 19px;
  font-weight: 600;
  color: var(--shopNavy);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}

.shopHelpCard p {
  font-size: 12.5px;
  color: var(--shopInkSoft);
  line-height: 1.5;
  margin: 0 0 14px;
}

.shopHelpBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shopNavy);
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--shopRadiusPill);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.shopHelpBtn:hover {
  background: var(--shopBlue);
  color: #fff;
}

.shopSidebarOffcanvas {
  width: 320px;
  max-width: 90%;
}

.shopSidebarCloseTitle {
  font-family: var(--site-secondary-font);
  font-size: 22px;
  font-weight: 600;
  color: var(--shopNavy);
}

/* ====== MAIN ====== */
.shopMain {
  min-width: 0;
}

.shopCatSection {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--shopNavH) + 80px);
}

.shopCatSectionHead {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--shopLine);
}

.shopCatSectionIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.shopCsIcon1 {
  background: linear-gradient(135deg, #2255e8, #4d7cff);
}

.shopCsIcon2 {
  background: linear-gradient(135deg, #f15a25, #ff8255);
}

.shopCsIcon3 {
  background: linear-gradient(135deg, #21d4a8, #4ee3bd);
}

.shopCsIcon4 {
  background: linear-gradient(135deg, #b65cdc, #d68dff);
}

.shopCsIcon5 {
  background: linear-gradient(135deg, #ffc857, #f1a012);
  color: #4a3300;
}

.shopCsIcon6 {
  background: linear-gradient(135deg, #1c2d64, #2c4180);
}

.shopCsIcon7 {
  background: linear-gradient(135deg, #2255e8, #1c2d64);
}

.shopCsIcon8 {
  background: linear-gradient(135deg, #f15a25, #b6306b);
}

.shopCsIcon9 {
  background: linear-gradient(135deg, #1d8b8e, #21d4a8);
}

.shopCsIcon10 {
  background: linear-gradient(135deg, #5b2d6e, #b65cdc);
}

.shopCsIcon11 {
  background: linear-gradient(135deg, #2255e8, #21d4a8);
}

.shopCsIcon12 {
  background: linear-gradient(135deg, #1c2d64, #b65cdc);
}

.shopCsIcon13 {
  background: linear-gradient(135deg, #f1a012, #f15a25);
  color: #4a3300;
}

.shopCsIcon14 {
  background: linear-gradient(135deg, #2c4180, #4d7cff);
}

.shopCsIcon15 {
  background: linear-gradient(135deg, #b6306b, #b65cdc);
}

.shopCatSectionTitle {
  font-family: var(--site-secondary-font);
  font-size: 30px;
  font-weight: 600;
  color: var(--shopNavy);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.shopCatSectionMeta {
  font-size: 13px;
  color: var(--shopMuted);
  margin: 4px 0 0;
}

.shopCatSectionLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--shopBlue);
  font-weight: 600;
  font-size: 13.5px;
  transition: gap 0.2s ease;
}

.shopCatSectionLink:hover {
  gap: 10px;
  color: var(--shopBlue);
}

/* ====== SUBCAT CHIPS ====== */
.shopSubcatChips {
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.shopSubcatChip {
  padding: 8px 16px;
  border-radius: var(--shopRadiusPill);
  font-size: 13px;
  font-weight: 600;
  color: var(--shopInkSoft);
  background: #fff;
  border: 1.5px solid var(--shopLine);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopSubcatChip:hover {
  border-color: var(--shopNavy);
  color: var(--shopNavy);
}

.shopSubcatChipActive {
  background: var(--shopNavy);
  color: #fff;
  border-color: var(--shopNavy);
}

.shopSubcatChipActive:hover {
  color: #fff;
}

.shopChipCount {
  background: var(--shopCream);
  color: var(--shopMuted);
  padding: 1px 7px;
  border-radius: var(--shopRadiusPill);
  font-size: 11px;
  font-weight: 700;
}

.shopSubcatChipActive .shopChipCount {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ====== PRODUCT CARDS ====== */
.shopPc {
  background: #fff;
  border: 1px solid var(--shopLine);
  border-radius: var(--shopRadiusMd);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.shopPc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shopShadowMd);
  border-color: var(--shopBlue);
}

.shopPcArt {
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shopPcArtIcon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(8px);
}

.shopArtBlue {
  background: linear-gradient(135deg, #2255e8, #4d7cff);
}

.shopArtOrange {
  background: linear-gradient(135deg, #f15a25, #ff8255);
}

.shopArtGreen {
  background: linear-gradient(135deg, #21d4a8, #4ee3bd);
}

.shopArtPurple {
  background: linear-gradient(135deg, #b65cdc, #d68dff);
}

.shopArtGold {
  background: linear-gradient(135deg, #ffc857, #f1a012);
}

.shopArtGold .shopPcArtIcon {
  color: #4a3300;
}

.shopArtNavy {
  background: linear-gradient(135deg, #1c2d64, #2c4180);
}

.shopArtDeep {
  background: linear-gradient(135deg, #2255e8, #1c2d64);
}

.shopArtRose {
  background: linear-gradient(135deg, #f15a25, #b6306b);
}

.shopArtTeal {
  background: linear-gradient(135deg, #1d8b8e, #21d4a8);
}

.shopArtViolet {
  background: linear-gradient(135deg, #5b2d6e, #b65cdc);
}

.shopPcBadges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}

.shopPcBadge {
  background: #fff;
  color: var(--shopNavy);
  padding: 3px 9px;
  border-radius: var(--shopRadiusPill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shopShadowSm);
}

.shopPcBadge_hot {
  background: var(--shopOrange);
  color: #fff;
}

.shopPcBadge_new {
  background: var(--shopGreen);
  color: #fff;
}

.shopPcBadge_sale {
  background: var(--shopGold);
  color: #4a3300;
}

.shopPcQuick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopNavy);
  opacity: 0;
  transform: translateY(-3px);
  transition: all 0.2s ease;
}

.shopPc:hover .shopPcQuick {
  opacity: 1;
  transform: translateY(0);
}

.shopPcQuick:hover {
  background: var(--shopOrange);
  color: #fff;
}

.shopPcBody {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.shopPcCat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shopOrange);
}

.shopPcName {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--shopNavy);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.shopPcDesc {
  font-size: 13px;
  color: var(--shopMuted);
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.shopPcRating {
  font-size: 12px;
  color: var(--shopMuted);
  margin-top: 2px;
}

.shopPcStars {
  color: var(--shopGold);
  display: inline-flex;
  gap: 1px;
}

.shopPcRating strong {
  color: var(--shopInk);
  font-weight: 600;
}

.shopPcFoot {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--shopLineSoft);
}

.shopPcPriceRow {
  display: flex;
  flex-direction: column;
}

.shopPcPriceStrike {
  font-size: 11.5px;
  color: var(--shopMuted);
  text-decoration: line-through;
}

.shopPcPriceNum {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--shopNavy);
  letter-spacing: -0.005em;
  line-height: 1;
}

.shopPcPriceNum small {
  font-family: var(--site-primary-font);
  font-size: 12px;
  color: var(--shopMuted);
  font-weight: 500;
  margin-left: 2px;
}

.shopPcPriceFrom {
  font-size: 10.5px;
  color: var(--shopMuted);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.shopPcAdd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  background: var(--shopCream);
  color: var(--shopNavy);
  border-radius: var(--shopRadiusPill);
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: none;
}

.shopPcAdd:hover {
  background: var(--shopOrange);
  color: #fff;
}

.shopPcAddAdded {
  background: var(--shopGreen);
  color: #fff;
}

.shopPcAddAdded:hover {
  background: var(--shopGreen);
  color: #fff;
}

.shopPcAdd svg {
  width: 12px;
  height: 12px;
}

/* ====== STICKY CART ====== */
.shopStickyCart {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--shopNavy);
  color: #fff;
  padding: 11px 14px 11px 22px;
  border-radius: var(--shopRadiusPill);
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 50px rgba(11, 18, 48, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 70;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(100% - 32px);
}

.shopStickyCartIn {
  transform: translateX(-50%) translateY(0);
}

.shopScIconWrap {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shopScCount {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--shopOrange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--shopNavy);
}

.shopScInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.shopScName {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.2;
}

.shopScPrice {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.shopScCheckout {
  background: var(--shopOrange);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--shopRadiusPill);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopScCheckout:hover {
  background: var(--shopOrangeWarm);
  color: #fff;
}

@media (max-width: 600px) {
  .shopStickyCart {
    padding: 9px 11px 9px 16px;
    gap: 12px;
  }

  .shopScName {
    display: none;
  }

  .shopScPrice {
    font-size: 17px;
  }
}

/* ====== FOOTER ====== */
.shopFooter {
  background: var(--shopNavyNight);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 28px;
}

.shopFooterTop {
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.shopFooterLogo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  margin-bottom: 12px;
}

.shopFooterTagline {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}

.shopFooterCol h4 {
  font-family: var(--site-primary-font);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0 0 14px;
}

.shopFooterCol ul li {
  margin-bottom: 8px;
}

.shopFooterCol a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
}

.shopFooterCol a:hover {
  color: #fff;
}

.shopFooterBottom {
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.shopFooterBottom a {
  color: rgba(255, 255, 255, 0.5);
  margin-left: 16px;
}

.shopFooterBottom a:hover {
  color: #fff;
}

/* ====== REVEAL ANIMATION ====== */
.shopReveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.shopRevealIn {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SHOP — LEAD-GEN OVERRIDES (scoped to <app-shop>)
   The page dropped its own shopNav in favour of the shared site
   header (<app-navigation>), which is position:relative and scrolls
   away. The sticky offsets below were measured against the old
   70px fixed shopNav (--shopNavH), so they are re-zeroed here.
   Also styles the product card as a single lead link.
   ============================================================ */
app-shop .shopToolbar {
  top: 0;
}

/* The site header is a floating white pill; without this the navy page
   header butts straight up against it. */
app-shop .shopHeader {
  margin-top: 18px;
}

/* Anchor offset was sized for the old 70px fixed shopNav; now only the
   sticky toolbar (~60px) covers the top edge. */
app-shop .shopCatSection {
  scroll-margin-top: 76px;
}

app-shop .shopSidebar {
  top: 90px;
  max-height: calc(100vh - 110px);
}

/* Whole product card is an <a> to /enquiry/:slug */
app-shop .shopPcLink {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

app-shop .shopPcLink:hover {
  color: inherit;
}

app-shop .shopPcEnquireHint {
  font-size: 12px;
  font-weight: 600;
  color: var(--shopMuted, #6b748f);
  letter-spacing: 0.01em;
}

app-shop .shopPcEnquire {
  background: var(--shopNavy);
  color: #fff;
}

app-shop .shopPcEnquire svg {
  width: 13px;
  height: 13px;
}

app-shop .shopPc:hover .shopPcEnquire {
  background: var(--shopBlue, #2255e8);
}

/* ---- List view (toolbar toggle) ---- */
app-shop .shopProductsList .shopPc {
  flex-direction: row;
  align-items: stretch;
}

app-shop .shopProductsList .shopPcArt {
  flex: 0 0 190px;
  height: auto;
  min-height: 140px;
}

app-shop .shopProductsList .shopPcBody {
  flex: 1;
  justify-content: center;
}

app-shop .shopProductsList .shopPcDesc {
  max-width: 62ch;
}

@media (max-width: 575.98px) {
  /* Side-by-side is too cramped below this width — fall back to the stacked
     card so list view stays readable rather than becoming a sliver of art. */
  app-shop .shopProductsList .shopPc {
    flex-direction: column;
  }

  app-shop .shopProductsList .shopPcArt {
    flex: 0 0 auto;
    min-height: 0;
    height: 96px;
  }
}

app-shop .shopEmptyNote {
  margin: 4px 0 0;
  padding: 18px 20px;
  border: 1px dashed var(--shopLine);
  border-radius: var(--shopRadiusMd);
  color: var(--shopMuted);
  font-size: 14px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 991.98px) {
  .shopBody {
    padding-top: 16px;
  }

  .shopSidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .shopHeader {
    padding: 40px 0 32px;
  }

  .shopCatSection {
    margin-bottom: 40px;
  }

  .shopCatSectionTitle {
    font-size: 24px;
  }

  .shopCatSectionIcon {
    width: 38px;
    height: 38px;
  }
}

/* ============================================================
   SHOP — MOBILE (scoped to <app-shop>)
   The page uses the shared site header, which is position:relative
   and scrolls away, so the toolbar owns the top edge on small
   screens. Everything below trims vertical space so the product
   grid is reachable without scrolling past a tall chrome stack.
   ============================================================ */
@media (max-width: 991.98px) {
  app-shop .shopSidebar {
    top: auto;
    max-height: none;
  }
}

@media (max-width: 767.98px) {
  /* Promo band — single compact line. The supporting sentence and the icon
     are dropped so the headline and the CTA sit side by side instead of
     stacking into a 120px-tall block. */
  app-shop .shopPromoBanner {
    padding: 7px 12px;
    font-size: 12.5px;
    line-height: 1.3;
  }

  app-shop .shopPromoInner {
    gap: 10px;
  }

  app-shop .shopPromoIcon,
  app-shop .shopPromoSub,
  app-shop .shopPromoDivider {
    display: none;
  }

  app-shop .shopPromoText {
    gap: 0;
  }

  app-shop .shopPromoCta {
    white-space: nowrap;
  }

  /* Breathing room between the site header and the navy page header */
  app-shop .shopHeader {
    margin-top: 14px;
  }

  /* A bare `section { padding: 72px 0 }` from the wedding-page block leaks
     into every page at this width, adding ~144px of dead space to each
     category section. Cancel it here. */
  app-shop .shopCatSection {
    padding: 0;
    margin-bottom: 32px;
  }

  /* Toolbar — one short row. The product/category counts are already
     shown in the header stats directly above, so they are dropped here
     rather than wrapping the sticky bar onto a second line. */
  app-shop .shopToolbar {
    padding: 10px 0;
  }

  app-shop .shopToolbarInner {
    gap: 10px;
  }

  app-shop .shopToolbarResults,
  app-shop .shopViewToggle {
    display: none;
  }

  app-shop .shopToolbarRight {
    margin-left: auto;
  }

  app-shop .shopToolbarSort .form-select {
    font-size: 13px;
    padding: 6px 30px 6px 14px;
  }

  /* Subcategory chips — swipeable strip instead of 3-4 stacked rows */
  app-shop .shopSubcatChips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px;
    padding-bottom: 2px;
  }

  app-shop .shopSubcatChips::-webkit-scrollbar {
    display: none;
  }

  app-shop .shopSubcatChip {
    flex: 0 0 auto;
  }

  /* Cards — the 140px gradient block is mostly dead space at this width */
  app-shop .shopPcArt {
    height: 96px;
  }

  app-shop .shopPcBody {
    padding: 14px 14px 16px;
  }

  app-shop .shopPcDesc {
    font-size: 13px;
  }

  app-shop .shopPcFoot {
    padding-top: 10px;
  }

  app-shop .shopCatSectionHead {
    margin-bottom: 14px;
  }
}

/* ============================================================
   Wizard / Step-One component styles
   Merged from src/assets/css/wizard-test.css
   Theme/colors use this file's :root only (no duplicate :root / font @imports).
   var(--site-cta-color) remapped to var(--site-button-bg-color).
   ============================================================ */

/* ---- Component rules ---- */

/*  Typography Controls Ends Heres */

/* Main CSS Starts Here */

.form-check-input:checked {
  background-color: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

.form-control:focus,
.form-select:focus {
  box-shadow: none;
  border: 1px solid var(--site-primary-color);
}

/* wedding collections css end here */

.form-control {
  padding: 10px 10px;
  border-radius: 10px;
  font-size: clamp(12px, 1vw, 14px) !important;
}

.btn.active,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  border-color: transparent;
}

.priceText {
  font-size: 1.2rem;
  font-weight: 600;
}

.form-select:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.form-control:focus,
.form-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-group-text {
  border-radius: 10px 0 0 10px;
  border: 1px solid #dee2e6;
  border-right: none;
  background: #f8f9fa;
  font-weight: 600;
}

.input-group .form-control {
  border-radius: 0 10px 10px 0 !important;
  font-size: clamp(13px, 1vw, 14px);
}

.input-group:focus-within .input-group-text {
  border-color: var(--site-primary-color) !important;
}

.is-invalid {
  border-color: #dc3545 !important;
}

label {
  color: var(--site-text-muted-color, #555);
  margin-bottom: 1px !important;
}

.dropImg i {
  color: var(--site-primary-color) !important;
}

.dropImg:hover {
  border-color: var(--site-primary-color) !important;
  background: #f0f4ff;
}

.dropImg {
  cursor: pointer;
  border: 2px dashed var(--site-primary-color);
}

.cardTitle {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.dropImg:hover {
  border-color: #0056b3;
  background: #f0f4ff;
}

/* Common Button Styles */
.btn {
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.wizard-modal-dialog {
  width: 100%;
  max-width: 480px;
  margin: 1rem;
}

.wizard-modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.wizard-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.wizard-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.wizard-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

.wizard-modal-body {
  padding: 1.25rem;
}

.wizard-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e5e7eb;
}

/* ── Generic helpers used inside wizard ── */
.pointer,
.cursorPointer {
  cursor: pointer;
}

.dropImg {
  position: relative;
  width: 100%;
  min-height: 100px;
  background: #f9fbff;
  border: 2px dashed var(--site-quaternary-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  overflow: hidden;
  padding: 20px;
}

.dropImg:hover {
  border-color: var(--site-button-bg-color);
  background: #fff5f0;
}

.dropImg i {
  font-size: 28px;
  color: var(--site-text-muted-color);
}

.dropImg input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.aiSkipWrap {
  display: flex;
  margin-top: 6px;
}

.aiSkipPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  border: 1.5px solid #ddd6fe;
  background: #f5f3ff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--site-tertiary-color);
  user-select: none;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}

.aiSkipPill:hover {
  background: #ede9fe;
  border-color: var(--site-tertiary-color);
}

.aiSkipActive {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
  color: #fff;
}

.aiSkipIcon {
  font-size: 13px;
  flex-shrink: 0;
}

.uploadContainer {
  border-color: #cbd5e1 !important;
  background: #fafbfd !important;
  border-radius: 12px !important;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.uploadContainer:hover:not(.disabledGallery) {
  border-color: var(--site-tertiary-color) !important;
  background: var(--site-secondary-color) !important;
}

.uploadContainer i {
  color: #94a3b8;
}

.uploadContainer:hover:not(.disabledGallery) i {
  color: var(--site-tertiary-color);
}

.disabledGallery {
  opacity: 0.45;
  pointer-events: none;
}

.templateGridWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.templateCard {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #e8ecf1;
  cursor: pointer;
  background: #fff;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.templateCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  border-color: var(--site-tertiary-color);
}

.templateCardSelected {
  border-color: var(--site-tertiary-color) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.templateCardBadge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.45);
}

.templateCardPreview {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f4f8;
}

.templateCardPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.3s ease;
}

.templateCard:hover .templateCardPreview img {
  transform: scale(1.04);
}

.templateCardFooter {
  padding: 10px 10px 11px;
}

.templateCardBtn {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  background: var(--site-secondary-color);
  color: var(--site-tertiary-color);
  transition:
    background 0.18s,
    color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.templateCardBtn:hover {
  background: #ede9fe;
}

.templateCardBtnSelected {
  background: var(--site-tertiary-color);
  color: #fff;
}

.templateCardBtnSelected:hover {
  background: var(--site-tertiary-color);
}

.publishScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 32px;
  min-height: 420px;
}

.publishSvgWrap {
  width: 100%;
  max-width: 340px;
  margin-bottom: 28px;
}

.publishSvg {
  width: 100%;
  height: auto;
  display: block;
}

.wbNav {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.2s;
}

.wbNavLogo {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.35s;
}

.wbNavL1 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.45s;
}

.wbNavL2 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.55s;
}

.wbNavL3 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.65s;
}

.wbHero {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.85s;
}

.wbHeroH {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1s;
}

.wbHeroS {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.15s;
}

.wbHeroBtn {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.3s;
}

.wbL1 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.6s;
}

.wbL2 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.8s;
}

.wbL3 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2s;
}

.wbC1 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2.3s;
}

.wbC2 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2.5s;
}

.wbC3 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2.7s;
}

.wbCursor {
  animation: wbCursor 0.7s step-end infinite;
  animation-delay: 1.6s;
}

.wbDot1 {
  animation: wbFloat 6s ease infinite;
  animation-delay: 0.5s;
}

.wbDot2 {
  animation: wbFloat 6s ease infinite;
  animation-delay: 1.2s;
}

.wbDot3 {
  animation: wbFloat 6s ease infinite;
  animation-delay: 2s;
}

.publishText {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.publishTitle {
  font-size: 22px;
  font-weight: 700;
  color: #1e1b3a;
  margin-bottom: 8px;
  line-height: 1.3;
}

.publishType {
  color: var(--site-tertiary-color);
  display: inline-block;
}

.publishSub {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

.publishDots span {
  display: inline-block;
  animation: dotPulse 1.4s ease infinite;
}

.publishDots span:nth-child(1) {
  animation-delay: 0s;
}

.publishDots span:nth-child(2) {
  animation-delay: 0.2s;
}

.publishDots span:nth-child(3) {
  animation-delay: 0.4s;
}

.publishBarWrap {
  width: 100%;
  height: 5px;
  background: #ede9fe;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.publishBarFill {
  height: 100%;
  background: linear-gradient(90deg, var(--site-tertiary-color), #a78bfa);
  border-radius: 10px;
  animation: barSlide 6s ease-in-out infinite;
}

.publishSteps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
}

.publishStep {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
}

.publishStepDone {
  color: #34c759;
}

.publishStepActive {
  color: var(--site-tertiary-color);
}

.publishStepPending {
  color: #cbd5e1;
}

.cgWrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cgSearchWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cgSearchIcon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

.cgSearchInput {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #334155;
  background: #fafbfd;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.cgSearchInput:focus {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
  background: #fff;
}

.cgSearchInput::placeholder {
  color: #b0bac9;
}

.cgMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cgCount {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.cgClear {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #c81515;
  cursor: pointer;
  padding: 0;
}

.cgClear:hover {
  text-decoration: underline;
}

.cgChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cgChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  background: var(--site-secondary-color);
  border: 1px solid var(--site-tertiary-color);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--site-tertiary-color);
}

.cgChipRemove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--site-tertiary-color);
  font-size: 11px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.cgGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}

.cgGrid::-webkit-scrollbar {
  width: 4px;
}

.cgGrid::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.cgGrid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.cgItem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1.5px solid #e8ecf4;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.16s,
    background 0.16s;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
  line-height: 1.3;
}

.cgItem:hover {
  border-color: #fbc4aa;
  background: #fff8f6;
}

.cgItemSelected {
  background: var(--site-secondary-color) !important;
  border-color: var(--site-tertiary-color) !important;
}

.cgCheckbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.16s,
    border-color 0.16s;
}

.cgItemSelected .cgCheckbox {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
}

.cgCheckIcon {
  font-size: 10px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s;
}

.cgItemSelected .cgCheckIcon {
  opacity: 1;
}

.cgItemLabel {
  flex: 1;
  min-width: 0;
}

.cgNoResults {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  padding: 24px 0;
  margin: 0;
}

.cgGrid {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  max-height: 420px;
}

.cgGrid {
  grid-template-columns: repeat(2, 1fr);
  max-height: 300px;
  overflow-y: auto;
}

.slmWrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.slmList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.slmCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #e8ecf4;
  border-radius: 12px;
  transition:
    box-shadow 0.18s,
    border-color 0.18s;
}

.slmCard:hover {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
}

.slmThumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f4f8;
  border: 1px solid #e8ecf4;
}

.slmThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slmInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slmName {
  font-size: 14px;
  font-weight: 600;
  color: #1e1b3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slmPrice {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-tertiary-color);
  display: flex;
  align-items: center;
  gap: 5px;
}

.slmMrp {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  text-decoration: line-through;
}

.slmActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.slmBtn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s;
}

.slmBtnEdit {
  background: #f0f4ff;
  color: #4f6ef7;
}

.slmBtnEdit:hover {
  background: #dbe4ff;
}

.slmBtnDel {
  background: #fff1f0;
  color: #ef4444;
}

.slmBtnDel:hover {
  background: #fee2e2;
}

.slmAddMore {
  width: 100%;
  padding: 11px 0;
  border: 1.5px dashed var(--site-tertiary-color);
  border-radius: 10px;
  background: var(--site-secondary-color);
  color: var(--site-tertiary-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background 0.16s,
    border-color 0.16s;
  margin-top: 4px;
}

.slmAddMore:hover {
  background: var(--site-secondary-color);
  border-color: var(--site-tertiary-color);
}

.slmEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 14px;
  background: #fafbfd;
  text-align: center;
}

.slmEmptyIcon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #a78bfa;
  margin-bottom: 14px;
}

.slmEmptyTitle {
  font-size: 15px;
  font-weight: 600;
  color: #1e1b3a;
  margin-bottom: 4px;
}

.slmEmptySub {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 18px;
}

.slmEmptyBtn {
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: var(--site-tertiary-color);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s;
}

.slmEmptyBtn:hover {
  background: var(--site-tertiary-color);
}

.congratsNeedHelp {
  display: block;
  width: auto;
  margin: 8px auto 0;
  padding: 7px 20px;
  background: transparent;
  color: #f4a607;
  border: 1.5px solid #f4a608;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.16s,
    border-color 0.16s;
}

.congratsNeedHelp:hover {
  color: #475569;
  border-color: #94a3b8;
}

.mutedText {
  color: #4d4d4e !important;
}

.cursorPointer {
  cursor: pointer !important;
}

.dropImg {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #ececec;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.dropImg i {
  color: #b0b0b0;
  font-size: 20px;
}

.dropImg input {
  position: absolute;
  left: 0;
  top: 25px;
  opacity: 0;
}

.dropImg img {
  height: 100%;
  object-fit: cover !important;
  text-align: center;
  position: relative;
  right: 15px;
}

.bdCustomLabel {
  font-weight: 500;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--site-text-muted-color, #555);
  margin-bottom: 6px !important;
  display: block;
}

.action-button {
  background: var(--site-button-bg-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease !important;
  letter-spacing: 0.01em;
}

.action-button:hover {
  background-color: var(--site-primary-color) !important;
}

.action-button-previous {
  /* background: var(--site-button-bg-color) !important;
  color: #fff !important; */
  border-color: #3f4245 !important;
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  /* border: none !important; */
  transition:
    background-color 0.2s ease,
    transform 0.1s ease !important;
  letter-spacing: 0.01em;
}

.action-button:hover {
  background-color: var(--site-tertiary-color) !important;
}

.bookingContent .bookingTitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.bookingContent .bookingSubtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 1.25rem;
}

.teamSizeOptions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 10px;
}

.teamSizeOption {
  background: #f6f8fb;
  border: 1px solid #e1e8ed;
  border-radius: 9px;
  padding: 19px 20px;
  font-size: 16px;
  color: #18152b;
  text-align: left;
  font-weight: 500;
  transition:
    background 0.2s,
    border 0.2s;
  cursor: pointer;
}

.teamSizeOption.active {
  border: 2px solid var(--site-tertiary-color);
  background: var(--site-secondary-color);
}

.teamSizeOption:hover {
  background: #e3eaff;
  border-color: #a9bddb;
}

.serviceInputWithIcon {
  position: relative;
  display: flex;
  align-items: center;
}

.congratsContainer {
  padding: 24px 12px 36px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(23, 32, 47, 0.07);
  text-align: center;
}

.congratsContainer .congratsLogo {
  height: 48px;
  margin-bottom: 8px;
}

.congratsHeadline {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: 40px;
}

.congratsUser {
  color: var(--site-primary-color);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 30px;
}

.congratsStoreInfo {
  font-size: 20px;
  margin-bottom: 20px;
}

.congratsStoreName {
  font-weight: 600;
}

.congratsBrand {
  font-weight: 700;
}

.congratsNote {
  color: #949494;
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 20px;
  font-weight: 300 !important;
}

.congratsPreviewBtn {
  background: #fc6722;
  color: #fff;
  border: none;
  width: 77%;
  margin: 0 auto 16px auto;
  font-size: 16px;
  border-radius: 24px;
  font-weight: 500;
  transition: background 0.18s;
  cursor: pointer;
  display: block;
  padding: 12px 0px;
}

.congratsPreviewBtn:hover {
  background: #d9550c;
}

.templateCard {
  border: 1px solid #eee;
  border-radius: 14px;
  transition: 0.3s;
  text-align: center;
}

.templateCard:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.cursorPointer {
  cursor: pointer !important;
}

.formGroup.col-12 .ms-3.mb-3.form-check {
  margin-left: 0px !important;
}

.wizard-form-container {
  text-align: left !important;
}

.confirmPurchase .cardTitle {
  margin-bottom: 10px;
}

.confirmPurchase .userInfoBox {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

.userSubText {
  font-size: 13px;
  color: #6c757d;
}

.orderSummaryBox {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 14px;
}

.summaryTitle {
  margin-bottom: 10px;
  font-size: 18px;
}

.summaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.totalRow {
  font-weight: 500;
}

.statusDot {
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
}

.termsText {
  font-size: 12px;
  margin-top: 14px;
  text-align: center;
}

.confirmPurchase .termsText a {
  color: var(--site-primary-color);
  font-weight: 500;
  text-align: center;
}

.secureText {
  font-size: 12px;
  color: #6c757d;
  margin-top: 8px;
  text-align: center;
}

.userInfoBox h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.summaryRow.standardPlan {
  background-color: rgb(245 247 251);
  padding: 10px;
  border-radius: 8px;
}

.confirmPurchase .planItem {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid #eef2f7;
  margin-bottom: 20px !important;
  cursor: pointer;
  align-items: flex-start;
}

.confirmPurchase .planItem:hover {
  border-color: #c7d7ff;
}

.planItem .planContent {
  flex: 1;
}

.planContent .planHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.planContent .planName {
  font-weight: 600;
}

.planContent .planPrice {
  font-weight: 600;
}

.planContent .planPrice small {
  font-weight: 400;
  color: #6c757d;
}

.planItem .planRadio {
  margin-top: 6px;
}

.planContent .planDesc {
  font-size: 13px;
  color: #6c757d;
  margin-top: 4px;
}

.planContent .planLink {
  font-size: 14px;
  color: var(--site-primary-color);
  border-bottom: 1px dashed;
  float: right;
  line-height: 18px;
  font-weight: 500;
}

.popularBadge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #20c997;
  color: #fff;
  font-size: 10px;
  padding: 1px 10px;
  border-radius: 20px;
}

.planContainerBtn button.action-button.continuePeriod {
  background-color: #f59e0b !important;
}

.templateCard {
  transition: all 0.3s ease;
  background: #fff;
}

.templateCard:hover {
  border-color: var(--site-primary-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.jffCard {
  margin-top: 0px !important;
  z-index: 0 !important;
  position: relative !important;
  border-radius: 20px !important;
  padding: 20px 30px !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  font-weight: normal;
  background: #ffffff;
  box-shadow:
    0 8px 40px rgba(28, 45, 100, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #eaecf5 !important;
}

.priceText {
  font-size: 1.2rem;
}

.congratsPreviewBtn {
  width: 100%;
}

/* ─── Spinner ─── */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wizard-spinner-border 0.75s linear infinite;
}

/* ─── Inline SVG icon styles ─── */
.wiz-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

.wiz-icon-lg {
  width: 1.5em;
  height: 1.5em;
}

.wiz-icon-xl {
  width: 2em;
  height: 2em;
}

/* ---- Keyframes ---- */

@keyframes wizard-spinner-border {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Publish-screen keyframes ----
   These animation names are referenced by the .wb* / .publish* rules above
   but had NO @keyframes definition anywhere in the source project (a
   pre-existing gap). Reconstructed here so the publish/loading screen
   animates correctly. Tune freely. */

/* Staggered "website is being built" reveal (elements start at opacity:0). */
@keyframes wbBuild {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

  82% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Decorative dots gently floating in and out. */
@keyframes wbFloat {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-6px);
  }

  75% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* Blinking text cursor (used with step-end timing). */
@keyframes wbCursor {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Pulsing "..." dots in the subtitle. */
@keyframes dotPulse {

  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Indeterminate progress-bar sweep (parent has overflow:hidden). */
@keyframes barSlide {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ============================================================
   WHATSAPP ORDERING PAGE
   Scoped to <app-product-whatsapp-ordering>.
   Moved here from a component stylesheet per design-rule.md
   (all component styles live in this global file).
   ============================================================ */
/* ============================================
   BIGDOT WHATSAPP ORDERING PAGE - SCOPED DESIGN TOKENS
   (WhatsApp brand palette)
   #25D366 light green · #128C7E teal · #075E54 dark teal · #34B7F1 blue
   ============================================ */
app-product-whatsapp-ordering {
  --bd-navy: #075e54;
  /* WhatsApp dark teal — headings */
  --bd-navy-deep: #054d44;
  --bd-navy-night: #022b27;
  --bd-blue: #128c7e;
  /* WhatsApp teal — links/accents */
  --bd-blue-soft: #e3f7ec;
  --bd-orange: #25d366;
  /* WhatsApp green — primary CTA */
  --bd-orange-warm: #1fbe5a;
  --bd-orange-soft: #e3f7ec;
  --bd-cream: #eef7f1;
  --bd-green: #25d366;
  --bd-green-deep: #075e54;
  /* WhatsApp accent blue */
  --bd-wa-chat: #e5ddd5;
  /* classic chat wallpaper */
  --bd-wa-bubble-out: #dcf8c6;
  /* outgoing bubble green */
  --bd-ink: #0b1f1c;
  --bd-ink-soft: #2b3b38;
  --bd-muted: #6b7c78;
  --bd-line: #e2ece7;
  --bd-line-soft: #eff5f2;
  --bd-white: #ffffff;
  --bd-bg: #f4faf6;
  --bd-shadow-sm: 0 1px 2px rgba(7, 94, 84, 0.06), 0 2px 6px rgba(7, 94, 84, 0.05);
  --bd-shadow-md: 0 4px 12px rgba(7, 94, 84, 0.08), 0 12px 32px rgba(7, 94, 84, 0.10);
  --bd-shadow-lg: 0 24px 60px rgba(7, 94, 84, 0.20);
  --bd-radius-sm: 10px;
  --bd-radius-md: 16px;
  --bd-radius-lg: 24px;
  --bd-radius-pill: 999px;
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
  --bd-display: var(--site-tertiary-font, "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif);
}

/* ============================================
   SHARED HELPERS
   ============================================ */
app-product-whatsapp-ordering .bdSection {
  padding: 100px 0;
}

@media (max-width: 768px) {
  app-product-whatsapp-ordering .bdSection {
    padding: 64px 0;
  }
}

app-product-whatsapp-ordering .bdEyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

app-product-whatsapp-ordering .bdEyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

app-product-whatsapp-ordering .bdEyebrowCenter::before {
  display: none;
}

app-product-whatsapp-ordering .bdSectionTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0;
}

app-product-whatsapp-ordering .bdSectionTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

app-product-whatsapp-ordering .bdSectionSub {
  font-size: 17px;
  color: var(--bd-muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
}

app-product-whatsapp-ordering .bdSectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

app-product-whatsapp-ordering .bdSectionHead .bdLead {
  max-width: 720px;
}

app-product-whatsapp-ordering .bdSectionHeadCenter {
  text-align: center;
  flex-direction: column;
  align-items: center;
}

app-product-whatsapp-ordering .bdSectionHeadCenter .bdLead {
  margin: 0 auto;
}

app-product-whatsapp-ordering .bdSectionHeadCenter .bdEyebrow {
  justify-content: center;
}

app-product-whatsapp-ordering .bdSectionHeadCenter .bdSectionSub {
  margin: 0 auto;
}

/* ============================================
   BUTTONS
   ============================================ */
app-product-whatsapp-ordering .bdBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--bd-radius-pill);
  font-family: var(--bd-sans);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

app-product-whatsapp-ordering .bdBtn:hover {
  transform: translateY(-2px);
}

app-product-whatsapp-ordering .bdBtnPrimary {
  background: var(--bd-orange);
  color: var(--bd-white);
  box-shadow: 0 6px 20px rgba(241, 90, 37, 0.35);
}

app-product-whatsapp-ordering .bdBtnPrimary:hover {
  background: var(--bd-orange-warm);
  color: var(--bd-white);
  box-shadow: 0 12px 28px rgba(241, 90, 37, 0.45);
}

app-product-whatsapp-ordering .bdBtnSecondary {
  background: var(--bd-white);
  color: var(--bd-navy);
  border: 1.5px solid var(--bd-line);
}

app-product-whatsapp-ordering .bdBtnSecondary:hover {
  border-color: var(--bd-navy);
  color: var(--bd-navy);
}

app-product-whatsapp-ordering .bdBtnGhostLight {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bd-white);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

app-product-whatsapp-ordering .bdBtnGhostLight:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--bd-white);
}

/* ============================================
   BREADCRUMB
   ============================================ */
app-product-whatsapp-ordering .bdBreadcrumb {
  padding-top: 20px;
  padding-bottom: 10px;
  background: var(--bd-bg);
}

app-product-whatsapp-ordering .bdBreadcrumbList {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--bd-muted);
}

app-product-whatsapp-ordering .bdBreadcrumbList a {
  color: var(--bd-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

app-product-whatsapp-ordering .bdBreadcrumbList a:hover {
  color: var(--bd-blue);
}

app-product-whatsapp-ordering .bdBreadcrumbSep {
  color: var(--bd-line);
}

app-product-whatsapp-ordering .bdBreadcrumbCurrent {
  color: var(--bd-navy);
  font-weight: 600;
}

/* ============================================
   HERO
   ============================================ */
app-product-whatsapp-ordering .bdHero {
  background: var(--bd-bg);
  padding: 30px 0 80px;
}

app-product-whatsapp-ordering .bdHeroGrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 980px) {
  app-product-whatsapp-ordering .bdHeroGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

app-product-whatsapp-ordering .bdHeroPill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-ink-soft);
  margin-bottom: 24px;
  box-shadow: var(--bd-shadow-sm);
}

app-product-whatsapp-ordering .bdHeroBadge {
  background: var(--bd-green);
  color: white;
  padding: 3px 9px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

app-product-whatsapp-ordering .bdHeroTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--bd-navy);
}

app-product-whatsapp-ordering .bdHeroTitle em {
  font-style: italic;
  color: var(--bd-orange);
  position: relative;
  display: inline-block;
}

app-product-whatsapp-ordering .bdHeroTitle em::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 14px;
  width: 9px;
  height: 9px;
  background: var(--bd-orange);
  border-radius: 50%;
}

app-product-whatsapp-ordering .bdHeroSub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--bd-ink-soft);
  margin: 0 0 28px;
  max-width: 540px;
}

app-product-whatsapp-ordering .bdHeroBullets {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  max-width: 520px;
}

app-product-whatsapp-ordering .bdHeroBullets li {
  font-size: 14.5px;
  color: var(--bd-ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

app-product-whatsapp-ordering .bdHeroBullets li::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--bd-green);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

app-product-whatsapp-ordering .bdHeroCtas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

app-product-whatsapp-ordering .bdHeroPriceTease {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--bd-line);
  flex-wrap: wrap;
}

app-product-whatsapp-ordering .bdHptLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-muted);
}

app-product-whatsapp-ordering .bdHptPrice {
  font-family: var(--bd-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--bd-navy);
  line-height: 1;
  letter-spacing: -0.02em;
}

app-product-whatsapp-ordering .bdHptPrice small {
  font-family: var(--bd-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-muted);
}

app-product-whatsapp-ordering .bdHptDivider {
  color: var(--bd-line);
}

app-product-whatsapp-ordering .bdHptLink {
  font-size: 14px;
  color: var(--bd-blue);
  font-weight: 600;
}

/* HERO ART */
app-product-whatsapp-ordering .bdHeroArt {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

app-product-whatsapp-ordering .bdHeroBrowser {
  width: 100%;
  max-width: 480px;
  background: var(--bd-white);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(11, 18, 48, 0.18), 0 0 0 1px rgba(11, 18, 48, 0.04);
  overflow: hidden;
  position: relative;
  transform: rotate(-2deg);
  z-index: 2;
}

app-product-whatsapp-ordering .bdHbBar {
  background: var(--bd-cream);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--bd-line);
}

app-product-whatsapp-ordering .bdHbDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ddd;
}

app-product-whatsapp-ordering .bdHbDotR {
  background: #ff6b6b;
}

app-product-whatsapp-ordering .bdHbDotY {
  background: #ffc857;
}

app-product-whatsapp-ordering .bdHbDotG {
  background: #4adba0;
}

app-product-whatsapp-ordering .bdHbUrl {
  flex: 1;
  background: var(--bd-white);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--bd-muted);
  margin-left: 10px;
  font-family: ui-monospace, monospace;
}

app-product-whatsapp-ordering .bdHbLock {
  color: var(--bd-green-deep);
  margin-right: 4px;
}

app-product-whatsapp-ordering .bdHbContent {
  padding: 28px 26px;
  background: linear-gradient(180deg, #fff 0%, #fcf8f1 100%);
}

app-product-whatsapp-ordering .bdHbNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

app-product-whatsapp-ordering .bdHbLogo {
  font-family: var(--bd-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--bd-navy);
  font-style: italic;
}

app-product-whatsapp-ordering .bdHbMenu {
  display: flex;
  gap: 14px;
}

app-product-whatsapp-ordering .bdHbMenu span {
  width: 28px;
  height: 4px;
  background: var(--bd-line);
  border-radius: 2px;
}

app-product-whatsapp-ordering .bdHbHeroText {
  font-family: var(--bd-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--bd-navy);
  line-height: 1.1;
  margin-bottom: 8px;
}

app-product-whatsapp-ordering .bdHbHeroText em {
  font-style: italic;
  color: var(--bd-orange);
}

app-product-whatsapp-ordering .bdHbHeroSub {
  height: 6px;
  background: var(--bd-line);
  border-radius: 3px;
  margin-bottom: 6px;
}

app-product-whatsapp-ordering .bdHbHeroSubShort {
  width: 70%;
}

app-product-whatsapp-ordering .bdHbCta {
  margin-top: 16px;
  background: var(--bd-navy);
  color: var(--bd-white);
  padding: 8px 16px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

app-product-whatsapp-ordering .bdHbGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
}

app-product-whatsapp-ordering .bdHbCard {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0e6d2, #e0c89e);
}

app-product-whatsapp-ordering .bdHbCard:nth-child(2) {
  background: linear-gradient(135deg, #c7d4ff, #8da6ff);
}

app-product-whatsapp-ordering .bdHbCard:nth-child(3) {
  background: linear-gradient(135deg, #ffd4a8, #ff9466);
}

app-product-whatsapp-ordering .bdFloatChip {
  position: absolute;
  background: var(--bd-white);
  padding: 9px 14px;
  border-radius: var(--bd-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bd-navy);
  box-shadow: var(--bd-shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  border: 1px solid var(--bd-line);
}

app-product-whatsapp-ordering .bdFcOrange {
  color: var(--bd-orange);
}

app-product-whatsapp-ordering .bdFcBlue {
  color: var(--bd-blue);
}

app-product-whatsapp-ordering .bdFcGreen {
  color: var(--bd-green);
}

app-product-whatsapp-ordering .bdFc1 {
  top: 12%;
  left: -4%;
  transform: rotate(-4deg);
}

app-product-whatsapp-ordering .bdFc2 {
  top: 30%;
  right: -8%;
  transform: rotate(3deg);
}

app-product-whatsapp-ordering .bdFc3 {
  bottom: 18%;
  left: -2%;
  transform: rotate(2deg);
}

app-product-whatsapp-ordering .bdFc4 {
  bottom: 6%;
  right: 4%;
  transform: rotate(-3deg);
}

@media (max-width: 980px) {
  app-product-whatsapp-ordering .bdHeroArt {
    min-height: 380px;
  }

  app-product-whatsapp-ordering .bdHeroBrowser {
    max-width: 380px;
  }

  app-product-whatsapp-ordering .bdFc1 {
    left: 0;
  }

  app-product-whatsapp-ordering .bdFc2 {
    right: -2%;
  }
}

@media (max-width: 600px) {
  app-product-whatsapp-ordering .bdHeroBullets {
    grid-template-columns: 1fr;
  }

  app-product-whatsapp-ordering .bdFloatChip {
    font-size: 11px;
    padding: 7px 11px;
  }
}

/* ============================================
   PROOF
   ============================================ */
app-product-whatsapp-ordering .bdProof {
  background: var(--bd-navy-deep);
  color: white;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

app-product-whatsapp-ordering .bdProof::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

app-product-whatsapp-ordering .bdProofGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

app-product-whatsapp-ordering .bdProofStat {
  padding: 18px 22px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

app-product-whatsapp-ordering .bdProofStat:first-child {
  border-left-color: var(--bd-orange);
}

app-product-whatsapp-ordering .bdProofNum {
  font-family: var(--bd-serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: white;
}

app-product-whatsapp-ordering .bdProofUnit {
  font-family: var(--bd-sans);
  font-size: 18px;
  color: var(--bd-orange);
  font-weight: 600;
  margin-left: 4px;
}

app-product-whatsapp-ordering .bdProofLabel {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  app-product-whatsapp-ordering .bdProofGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  app-product-whatsapp-ordering .bdProofNum {
    font-size: 38px;
  }
}

/* ============================================
   FEATURES
   ============================================ */
app-product-whatsapp-ordering .bdFeatures {
  background: var(--bd-bg);
}

app-product-whatsapp-ordering .bdFeaturesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

app-product-whatsapp-ordering .bdFeature {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-md);
  padding: 30px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

app-product-whatsapp-ordering .bdFeature:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
  border-color: var(--bd-blue);
}

app-product-whatsapp-ordering .bdFeatureIcon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--bd-white);
}

app-product-whatsapp-ordering .bdFeatureIcon1 {
  background: linear-gradient(135deg, #2255e8, #4d7cff);
}

app-product-whatsapp-ordering .bdFeatureIcon2 {
  background: linear-gradient(135deg, #f15a25, #ff8255);
}

app-product-whatsapp-ordering .bdFeatureIcon3 {
  background: linear-gradient(135deg, #21d4a8, #4ee3bd);
}

app-product-whatsapp-ordering .bdFeatureIcon4 {
  background: linear-gradient(135deg, #1c2d64, #2c4180);
}

app-product-whatsapp-ordering .bdFeatureIcon5 {
  background: linear-gradient(135deg, #b65cdc, #d68dff);
}

app-product-whatsapp-ordering .bdFeatureIcon6 {
  background: linear-gradient(135deg, #ffc857, #f1a012);
  color: #4a3300;
}

app-product-whatsapp-ordering .bdFeature h3 {
  font-family: var(--bd-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--bd-navy);
  letter-spacing: -0.01em;
}

app-product-whatsapp-ordering .bdFeature p {
  font-size: 14.5px;
  color: var(--bd-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  app-product-whatsapp-ordering .bdFeaturesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  app-product-whatsapp-ordering .bdFeaturesGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   PLANS
   ============================================ */
app-product-whatsapp-ordering .bdPlans {
  background: var(--bd-white);
}

app-product-whatsapp-ordering .bdIncludesStrip {
  background: var(--bd-cream);
  border-radius: var(--bd-radius-md);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  justify-content: center;
}

app-product-whatsapp-ordering .bdIncludesLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-ink);
}

app-product-whatsapp-ordering .bdIncludesItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--bd-ink-soft);
  font-weight: 500;
}

app-product-whatsapp-ordering .bdIncludesItem svg {
  color: var(--bd-blue);
}

app-product-whatsapp-ordering .bdPlansControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

app-product-whatsapp-ordering .bdTenureToggle {
  display: inline-flex;
  background: var(--bd-cream);
  border-radius: var(--bd-radius-pill);
  padding: 5px;
  border: 1px solid var(--bd-line);
}

app-product-whatsapp-ordering .bdTenureBtn {
  padding: 9px 20px;
  border-radius: var(--bd-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--bd-sans);
  transition: all 0.2s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

app-product-whatsapp-ordering .bdTenureBtnActive {
  background: var(--bd-navy);
  color: var(--bd-white);
  box-shadow: 0 4px 12px rgba(28, 45, 100, 0.25);
}

app-product-whatsapp-ordering .bdTenureBtnActive .bdTenureSave {
  background: var(--bd-orange);
  color: white;
}

app-product-whatsapp-ordering .bdCurrencyPicker {
  position: relative;
}

app-product-whatsapp-ordering .bdCurrencySelect {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--bd-line);
  background: var(--bd-white);
  padding: 10px 36px 10px 16px;
  border-radius: var(--bd-radius-pill);
  font-family: var(--bd-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-navy);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2d64' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* ============================================
   PLAN CARDS
   ============================================ */
app-product-whatsapp-ordering .bdPlansGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
}

app-product-whatsapp-ordering .bdPlanCard {
  background: var(--bd-white);
  border: 2px solid var(--bd-line);
  border-radius: var(--bd-radius-lg);
  padding: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

app-product-whatsapp-ordering .bdPlanCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
}

app-product-whatsapp-ordering .bdPlanCardFeatured {
  border-color: var(--bd-orange);
  background: linear-gradient(180deg, #fff 0%, #fff8f3 100%);
  box-shadow: 0 12px 40px rgba(241, 90, 37, 0.12);
}

app-product-whatsapp-ordering .bdPlanBadge {
  position: absolute;
  top: -14px;
  left: 36px;
  background: var(--bd-orange);
  color: white;
  padding: 7px 16px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(241, 90, 37, 0.4);
}

app-product-whatsapp-ordering .bdPlanTag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--bd-radius-pill);
  margin-bottom: 14px;
}

app-product-whatsapp-ordering .bdPlanTagStarter {
  background: var(--bd-blue-soft);
  color: var(--bd-blue);
}

app-product-whatsapp-ordering .bdPlanTagPro {
  background: var(--bd-orange-soft);
  color: var(--bd-orange);
}

app-product-whatsapp-ordering .bdPlanName {
  font-family: var(--bd-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--bd-navy);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

app-product-whatsapp-ordering .bdPlanBest {
  font-size: 14px;
  color: var(--bd-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

app-product-whatsapp-ordering .bdPlanBest strong {
  color: var(--bd-ink);
  font-weight: 600;
}

app-product-whatsapp-ordering .bdPlanPriceRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

app-product-whatsapp-ordering .bdPlanPrice {
  font-family: var(--bd-serif);
  font-size: 52px;
  font-weight: 600;
  color: var(--bd-navy);
  letter-spacing: -0.02em;
  line-height: 1;
}

app-product-whatsapp-ordering .bdPlanCurrency {
  font-family: var(--bd-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--bd-navy);
}

app-product-whatsapp-ordering .bdPlanPeriod {
  font-size: 14px;
  color: var(--bd-muted);
  font-weight: 500;
}

app-product-whatsapp-ordering .bdPlanMonthly {
  font-size: 13px;
  color: var(--bd-muted);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bd-line);
}

app-product-whatsapp-ordering .bdPlanMonthly strong {
  color: var(--bd-ink);
  font-weight: 600;
}

app-product-whatsapp-ordering .bdPlanStrike {
  text-decoration: line-through;
  color: var(--bd-muted);
  margin-right: 6px;
  opacity: 0.7;
}

app-product-whatsapp-ordering .bdPlanFeatures {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}

app-product-whatsapp-ordering .bdPlanFeatures li {
  font-size: 14.5px;
  padding: 9px 0 9px 28px;
  position: relative;
  color: var(--bd-ink-soft);
  line-height: 1.5;
}

app-product-whatsapp-ordering .bdPlanFeatures li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  background: var(--bd-green);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

app-product-whatsapp-ordering .bdPlanFeatures li.bdPlanFeatureLocked {
  color: var(--bd-muted);
  opacity: 0.7;
}

app-product-whatsapp-ordering .bdPlanFeatures li.bdPlanFeatureLocked::before {
  background: var(--bd-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b748f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
}

app-product-whatsapp-ordering .bdPlanCta {
  width: 100%;
  padding: 16px;
  border-radius: var(--bd-radius-pill);
  font-weight: 600;
  font-size: 15px;
  background: var(--bd-white);
  color: var(--bd-navy);
  border: 2px solid var(--bd-navy);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--bd-sans);
}

app-product-whatsapp-ordering .bdPlanCta:hover {
  background: var(--bd-navy);
  color: white;
}

app-product-whatsapp-ordering .bdPlanCardFeatured .bdPlanCta {
  background: var(--bd-orange);
  color: white;
  border-color: var(--bd-orange);
}

app-product-whatsapp-ordering .bdPlanCardFeatured .bdPlanCta:hover {
  background: var(--bd-orange-warm);
  border-color: var(--bd-orange-warm);
}

app-product-whatsapp-ordering .bdPlanSecondary {
  text-align: center;
  font-size: 13px;
  color: var(--bd-muted);
  margin: 0;
}

app-product-whatsapp-ordering .bdPlanSecondary a {
  color: var(--bd-blue);
  font-weight: 600;
  text-decoration: none;
}

app-product-whatsapp-ordering .bdPlanSecondary a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  app-product-whatsapp-ordering .bdPlansGrid {
    grid-template-columns: 1fr;
  }

  app-product-whatsapp-ordering .bdPlanCard {
    padding: 28px 24px;
  }
}

/* ============================================
   COMPARE TABLE
   ============================================ */
app-product-whatsapp-ordering .bdCompare {
  background: var(--bd-bg);
}

app-product-whatsapp-ordering .bdCompareTableWrap {
  background: var(--bd-white);
  border-radius: var(--bd-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bd-line);
  box-shadow: var(--bd-shadow-sm);
}

app-product-whatsapp-ordering .bdCompareTable {
  width: 100%;
  border-collapse: collapse;
}

app-product-whatsapp-ordering .bdCompareTable th,
app-product-whatsapp-ordering .bdCompareTable td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--bd-line-soft);
  vertical-align: middle;
}

app-product-whatsapp-ordering .bdCompareTable thead th {
  background: var(--bd-cream);
  font-family: var(--bd-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bd-navy);
  text-transform: uppercase;
  border-bottom: 2px solid var(--bd-line);
}

app-product-whatsapp-ordering .bdCompareTable thead th:first-child {
  width: 36%;
}

app-product-whatsapp-ordering .bdColPlan {
  text-align: center;
  position: relative;
}

app-product-whatsapp-ordering .bdPname {
  font-family: var(--bd-serif);
  font-size: 22px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--bd-navy);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

app-product-whatsapp-ordering .bdColPlanFeatured {
  background: linear-gradient(180deg, #fff7f0, #fbe8d8);
}

app-product-whatsapp-ordering .bdColPlanFeatured .bdPname {
  color: var(--bd-orange);
  font-style: italic;
}

app-product-whatsapp-ordering .bdPprice {
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-muted);
  text-transform: none;
  letter-spacing: 0;
}

app-product-whatsapp-ordering .bdCompareTable tbody td {
  font-size: 14.5px;
  color: var(--bd-ink-soft);
}

app-product-whatsapp-ordering .bdFeatureName {
  font-weight: 600;
  color: var(--bd-ink);
}

app-product-whatsapp-ordering .bdFeatureName small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--bd-muted);
  margin-top: 2px;
}

app-product-whatsapp-ordering .bdCellVal {
  text-align: center;
}

app-product-whatsapp-ordering .bdCellValFeatured {
  background: linear-gradient(180deg, rgba(255, 247, 240, 0.5), rgba(251, 232, 216, 0.3));
}

app-product-whatsapp-ordering .bdCvYes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bd-green);
  border-radius: 50%;
  color: white;
}

app-product-whatsapp-ordering .bdCvNo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bd-line);
  border-radius: 50%;
  color: var(--bd-muted);
}

app-product-whatsapp-ordering .bdCompareSectionRow td {
  background: var(--bd-cream);
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--bd-navy);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 24px;
}

app-product-whatsapp-ordering .bdCompareTable tfoot td {
  padding: 22px 24px;
  background: var(--bd-white);
}

app-product-whatsapp-ordering .bdCompareCta {
  display: inline-block;
  padding: 11px 22px;
  background: var(--bd-navy);
  color: white;
  border-radius: var(--bd-radius-pill);
  font-size: 14px;
  font-weight: 600;
  width: 90%;
  text-align: center;
  text-decoration: none;
}

app-product-whatsapp-ordering .bdCompareCtaFeatured {
  background: var(--bd-orange);
}

app-product-whatsapp-ordering .bdCompareCta:hover {
  background: var(--bd-blue);
  color: white;
}

app-product-whatsapp-ordering .bdCompareCtaFeatured:hover {
  background: var(--bd-orange-warm);
}

@media (max-width: 768px) {
  app-product-whatsapp-ordering .bdCompareTableWrap {
    overflow-x: auto;
  }

  app-product-whatsapp-ordering .bdCompareTable {
    min-width: 720px;
  }
}

/* ============================================
   ADDONS
   ============================================ */
app-product-whatsapp-ordering .bdAddons {
  background: var(--bd-white);
}

app-product-whatsapp-ordering .bdAddonsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

app-product-whatsapp-ordering .bdAddon {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-md);
  padding: 24px;
  transition: all 0.25s ease;
  display: flex;
  gap: 16px;
  position: relative;
}

app-product-whatsapp-ordering .bdAddon:hover {
  border-color: var(--bd-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(241, 90, 37, 0.12);
}

/* ============================================
   FAQ
   ============================================ */
app-product-whatsapp-ordering .bdFaq {
  background: var(--bd-white);
}

app-product-whatsapp-ordering .bdFaqWrap {
  max-width: 880px;
  margin: 0 auto;
}

app-product-whatsapp-ordering .bdFaqItem {
  border: none !important;
  border-bottom: 1px solid var(--bd-line) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

app-product-whatsapp-ordering .bdFaqItem:last-child {
  border-bottom: none !important;
}

app-product-whatsapp-ordering .bdFaqItem .accordion-collapse {
  border: none !important;
}

app-product-whatsapp-ordering .bdFaqSummary {
  width: 100%;
  padding: 24px 0 !important;
  font-family: var(--bd-serif);
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--bd-navy) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  letter-spacing: -0.005em;
}

app-product-whatsapp-ordering .bdFaqSummary:hover {
  color: var(--bd-blue) !important;
}

app-product-whatsapp-ordering .bdFaqSummary::after {
  display: none !important;
}

app-product-whatsapp-ordering .bdFaqIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bd-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.2s ease;
  color: var(--bd-navy);
  margin-left: auto;
}

app-product-whatsapp-ordering .bdFaqSummary[aria-expanded="true"] .bdFaqIcon {
  transform: rotate(45deg);
  background: var(--bd-orange);
  color: white;
}

app-product-whatsapp-ordering .bdFaqBody {
  padding: 0 60px 24px 0 !important;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bd-muted);
  margin: 0;
}

/* ============================================
   BROCHURE / FINAL CTA
   ============================================ */
app-product-whatsapp-ordering .bdBrochure {
  background: var(--bd-white);
  padding: 32px 0 80px;
}

app-product-whatsapp-ordering .bdBrochureCard {
  background: linear-gradient(135deg, var(--bd-navy) 0%, var(--bd-navy-deep) 100%);
  border-radius: var(--bd-radius-lg);
  padding: 36px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

app-product-whatsapp-ordering .bdBrochureCard::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.25), transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
}

app-product-whatsapp-ordering .bdBrochureText {
  color: white;
  position: relative;
}

app-product-whatsapp-ordering .bdBrochureText h3 {
  font-family: var(--bd-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: white;
}

app-product-whatsapp-ordering .bdBrochureText p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

app-product-whatsapp-ordering .bdBrochureActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

@media (max-width: 600px) {
  app-product-whatsapp-ordering .bdBrochureCard {
    padding: 28px 24px;
  }
}

/* ============================================
   WHATSAPP THEME OVERRIDES
   (recolour the few hard-coded brand values
    that the design-token swap can't reach)
   ============================================ */
app-product-whatsapp-ordering .bdBtnPrimary {
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

app-product-whatsapp-ordering .bdBtnPrimary:hover {
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
}

app-product-whatsapp-ordering .bdPlanCardFeatured {
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.14);
}

app-product-whatsapp-ordering .bdPlanBadge {
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

app-product-whatsapp-ordering .bdAddon:hover {
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.14);
}

app-product-whatsapp-ordering .bdBrochureCard::before {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.28), transparent 60%);
}

/* feature icon tiles — WhatsApp green/teal family */
app-product-whatsapp-ordering .bdFeatureIcon1 {
  background: linear-gradient(135deg, #25d366, #5be584);
}

app-product-whatsapp-ordering .bdFeatureIcon2 {
  background: linear-gradient(135deg, #128c7e, #34c8b3);
}

app-product-whatsapp-ordering .bdFeatureIcon3 {
  background: linear-gradient(135deg, #075e54, #128c7e);
}

app-product-whatsapp-ordering .bdFeatureIcon4 {
  background: linear-gradient(135deg, #34b7f1, #74d3f7);
}

app-product-whatsapp-ordering .bdFeatureIcon5 {
  background: linear-gradient(135deg, #1fbe5a, #25d366);
}

app-product-whatsapp-ordering .bdFeatureIcon6 {
  background: linear-gradient(135deg, #128c7e, #075e54);
  color: #eafff5;
}

app-product-whatsapp-ordering .bdHbCta {
  background: var(--bd-green);
}

/* ============================================
   WHATSAPP PHONE / CHAT MOCKUP (hero art)
   ============================================ */
app-product-whatsapp-ordering .bdWaPhone {
  width: 100%;
  max-width: 340px;
  background: #0b141a;
  border-radius: 34px;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(7, 94, 84, 0.28), 0 0 0 1px rgba(7, 94, 84, 0.06);
  position: relative;
  transform: rotate(-2deg);
  z-index: 2;
}

app-product-whatsapp-ordering .bdWaScreen {
  border-radius: 24px;
  overflow: hidden;
  background: var(--bd-wa-chat);
  position: relative;
}

/* chat doodle wallpaper */
app-product-whatsapp-ordering .bdWaScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d8cfc4' stroke-width='1.2' opacity='0.5'%3E%3Cpath d='M14 20c4-4 9-4 12 0M52 60c4-4 9-4 12 0'/%3E%3Ccircle cx='62' cy='18' r='5'/%3E%3Ccircle cx='20' cy='58' r='5'/%3E%3Cpath d='M40 36l4 4-4 4-4-4z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
}

app-product-whatsapp-ordering .bdWaTopBar {
  position: relative;
  background: linear-gradient(180deg, #128c7e, #075e54);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
}

app-product-whatsapp-ordering .bdWaBack {
  font-size: 18px;
  opacity: 0.9;
}

app-product-whatsapp-ordering .bdWaAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #075e54;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bd-sans);
}

app-product-whatsapp-ordering .bdWaPeer {
  line-height: 1.2;
}

app-product-whatsapp-ordering .bdWaPeerName {
  font-size: 14px;
  font-weight: 700;
}

app-product-whatsapp-ordering .bdWaPeerStatus {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

app-product-whatsapp-ordering .bdWaPeerStatus::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34ff9b;
  margin-right: 5px;
}

app-product-whatsapp-ordering .bdWaTopIcons {
  margin-left: auto;
  display: flex;
  gap: 14px;
  opacity: 0.9;
  font-size: 14px;
}

app-product-whatsapp-ordering .bdWaBody {
  position: relative;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 360px;
}

app-product-whatsapp-ordering .bdWaBubble {
  max-width: 80%;
  padding: 8px 11px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #0b1f1c;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

app-product-whatsapp-ordering .bdWaIn {
  background: #fff;
  align-self: flex-start;
  border-top-left-radius: 2px;
}

app-product-whatsapp-ordering .bdWaOut {
  background: var(--bd-wa-bubble-out);
  align-self: flex-end;
  border-top-right-radius: 2px;
}

app-product-whatsapp-ordering .bdWaTime {
  position: absolute;
  right: 9px;
  bottom: 5px;
  font-size: 9.5px;
  color: #5a6b66;
}

app-product-whatsapp-ordering .bdWaOut .bdWaTime::after {
  content: " \2713\2713";
  color: #34b7f1;
}

app-product-whatsapp-ordering .bdWaImg {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 6px;
}

app-product-whatsapp-ordering .bdWaItem {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

app-product-whatsapp-ordering .bdWaItem+.bdWaItem {
  margin-top: 2px;
}

app-product-whatsapp-ordering .bdWaItem span:last-child {
  font-weight: 700;
}

app-product-whatsapp-ordering .bdWaDivider {
  border: none;
  border-top: 1px dashed #bcd9b0;
  margin: 6px 0;
}

app-product-whatsapp-ordering .bdWaTotal {
  font-weight: 800;
  color: #075e54;
}

app-product-whatsapp-ordering .bdWaPayBtn {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 9px;
  border-radius: 8px;
}

app-product-whatsapp-ordering .bdWaDayChip {
  align-self: center;
  background: rgba(255, 255, 255, 0.85);
  color: #5a6b66;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

app-product-whatsapp-ordering .bdWaInputBar {
  position: relative;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
}

app-product-whatsapp-ordering .bdWaInputField {
  flex: 1;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11.5px;
  color: #97a39f;
}

app-product-whatsapp-ordering .bdWaSend {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  app-product-whatsapp-ordering .bdWaPhone {
    max-width: 300px;
  }
}

/* ============================================================
   PRODUCT PAGES — shared BigDot design system
   Scoped to the .bdProductPage host class (added via @Component host).
   Used by: website, accounting, booking, ecommerce, einvoicing,
   engager, epayments, digital-business-cards, marketplace-promotion.
   Moved here from website.component.css per design-rule.md.
   ============================================================ */
/* ============================================
   BIGDOT WEBSITES PAGE - SCOPED DESIGN TOKENS
   (mapped to BIGDOT DESIGN SYSTEM)
   ============================================ */
.bdProductPage {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-navy-deep: #131f47;
  --bd-navy-night: #0b1230;
  --bd-blue: var(--site-tertiary-color, #2255e8);
  --bd-blue-soft: #eef2ff;
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-orange-warm: #ff7a3d;
  --bd-orange-soft: #fff1e9;
  --bd-cream: #fbf6f0;
  --bd-green: #21d4a8;
  --bd-green-deep: #1d8b8e;
  --bd-ink: #0d1428;
  --bd-ink-soft: #2a3556;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-line-soft: #f0f2f8;
  --bd-white: #ffffff;
  --bd-bg: #fafbff;
  --bd-shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.06), 0 2px 6px rgba(11, 18, 48, 0.04);
  --bd-shadow-md: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --bd-shadow-lg: 0 24px 60px rgba(11, 18, 48, 0.18);
  --bd-radius-sm: 10px;
  --bd-radius-md: 16px;
  --bd-radius-lg: 24px;
  --bd-radius-pill: 999px;
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
  --bd-display: var(--site-tertiary-font, "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif);
}

/* ============================================
   SHARED HELPERS
   ============================================ */
.bdProductPage .bdSection {
  padding: 100px 0;
}

@media (max-width: 768px) {
  .bdProductPage .bdSection {
    padding: 64px 0;
  }
}

.bdProductPage .bdEyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bdProductPage .bdEyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

.bdProductPage .bdEyebrowCenter::before {
  display: none;
}

.bdProductPage .bdSectionTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0;
}

.bdProductPage .bdSectionTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

.bdProductPage .bdSectionSub {
  font-size: 17px;
  color: var(--bd-muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
}

.bdProductPage .bdSectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.bdProductPage .bdSectionHead .bdLead {
  max-width: 720px;
}

.bdProductPage .bdSectionHeadCenter {
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.bdProductPage .bdSectionHeadCenter .bdLead {
  margin: 0 auto;
}

.bdProductPage .bdSectionHeadCenter .bdEyebrow {
  justify-content: center;
}

.bdProductPage .bdSectionHeadCenter .bdSectionSub {
  margin: 0 auto;
}

/* ============================================
   BUTTONS
   ============================================ */
.bdProductPage .bdBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--bd-radius-pill);
  font-family: var(--bd-sans);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bdProductPage .bdBtn:hover {
  transform: translateY(-2px);
}

.bdProductPage .bdBtnPrimary {
  background: var(--bd-orange);
  color: var(--bd-white);
  box-shadow: 0 6px 20px rgba(241, 90, 37, 0.35);
}

.bdProductPage .bdBtnPrimary:hover {
  background: var(--bd-orange-warm);
  color: var(--bd-white);
  box-shadow: 0 12px 28px rgba(241, 90, 37, 0.45);
}

.bdProductPage .bdBtnSecondary {
  background: var(--bd-white);
  color: var(--bd-navy);
  border: 1.5px solid var(--bd-line);
}

.bdProductPage .bdBtnSecondary:hover {
  border-color: var(--bd-navy);
  color: var(--bd-navy);
}

.bdProductPage .bdBtnGhostLight {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bd-white);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.bdProductPage .bdBtnGhostLight:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--bd-white);
}

/* ============================================
   BREADCRUMB
   ============================================ */
.bdProductPage .bdBreadcrumb {
  padding-top: 20px;
  padding-bottom: 10px;
  background: var(--bd-bg);
}

.bdProductPage .bdBreadcrumbList {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--bd-muted);
}

.bdProductPage .bdBreadcrumbList a {
  color: var(--bd-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bdProductPage .bdBreadcrumbList a:hover {
  color: var(--bd-blue);
}

.bdProductPage .bdBreadcrumbSep {
  color: var(--bd-line);
}

.bdProductPage .bdBreadcrumbCurrent {
  color: var(--bd-navy);
  font-weight: 600;
}

/* ============================================
   HERO
   ============================================ */
.bdProductPage .bdHero {
  background: var(--bd-bg);
  padding: 30px 0 80px;
}

.bdProductPage .bdHeroGrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 980px) {
  .bdProductPage .bdHeroGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.bdProductPage .bdHeroPill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-ink-soft);
  margin-bottom: 24px;
  box-shadow: var(--bd-shadow-sm);
}

.bdProductPage .bdHeroBadge {
  background: var(--bd-green);
  color: white;
  padding: 3px 9px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bdProductPage .bdHeroTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--bd-navy);
}

.bdProductPage .bdHeroTitle em {
  font-style: italic;
  color: var(--bd-orange);
  position: relative;
  display: inline-block;
}

.bdProductPage .bdHeroTitle em::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 14px;
  width: 9px;
  height: 9px;
  background: var(--bd-orange);
  border-radius: 50%;
}

.bdProductPage .bdHeroSub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--bd-ink-soft);
  margin: 0 0 28px;
  max-width: 540px;
}

.bdProductPage .bdHeroBullets {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  max-width: 520px;
}

.bdProductPage .bdHeroBullets li {
  font-size: 14.5px;
  color: var(--bd-ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.bdProductPage .bdHeroBullets li::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--bd-green);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.bdProductPage .bdHeroCtas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.bdProductPage .bdHeroPriceTease {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--bd-line);
  flex-wrap: wrap;
}

.bdProductPage .bdHptLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-muted);
}

.bdProductPage .bdHptPrice {
  font-family: var(--bd-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--bd-navy);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bdProductPage .bdHptPrice small {
  font-family: var(--bd-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-muted);
}

.bdProductPage .bdHptDivider {
  color: var(--bd-line);
}

.bdProductPage .bdHptLink {
  font-size: 14px;
  color: var(--bd-blue);
  font-weight: 600;
}

/* HERO ART */
.bdProductPage .bdHeroArt {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.bdProductPage .bdHeroBrowser {
  width: 100%;
  max-width: 480px;
  background: var(--bd-white);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(11, 18, 48, 0.18), 0 0 0 1px rgba(11, 18, 48, 0.04);
  overflow: hidden;
  position: relative;
  transform: rotate(-2deg);
  z-index: 2;
}

.bdProductPage .bdHbBar {
  background: var(--bd-cream);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--bd-line);
}

.bdProductPage .bdHbDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ddd;
}

.bdProductPage .bdHbDotR {
  background: #ff6b6b;
}

.bdProductPage .bdHbDotY {
  background: #ffc857;
}

.bdProductPage .bdHbDotG {
  background: #4adba0;
}

.bdProductPage .bdHbUrl {
  flex: 1;
  background: var(--bd-white);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--bd-muted);
  margin-left: 10px;
  font-family: ui-monospace, monospace;
}

.bdProductPage .bdHbLock {
  color: var(--bd-green-deep);
  margin-right: 4px;
}

.bdProductPage .bdHbContent {
  padding: 28px 26px;
  background: linear-gradient(180deg, #fff 0%, #fcf8f1 100%);
}

.bdProductPage .bdHbNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.bdProductPage .bdHbLogo {
  font-family: var(--bd-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--bd-navy);
  font-style: italic;
}

.bdProductPage .bdHbMenu {
  display: flex;
  gap: 14px;
}

.bdProductPage .bdHbMenu span {
  width: 28px;
  height: 4px;
  background: var(--bd-line);
  border-radius: 2px;
}

.bdProductPage .bdHbHeroText {
  font-family: var(--bd-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--bd-navy);
  line-height: 1.1;
  margin-bottom: 8px;
}

.bdProductPage .bdHbHeroText em {
  font-style: italic;
  color: var(--bd-orange);
}

.bdProductPage .bdHbHeroSub {
  height: 6px;
  background: var(--bd-line);
  border-radius: 3px;
  margin-bottom: 6px;
}

.bdProductPage .bdHbHeroSubShort {
  width: 70%;
}

.bdProductPage .bdHbCta {
  margin-top: 16px;
  background: var(--bd-navy);
  color: var(--bd-white);
  padding: 8px 16px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.bdProductPage .bdHbGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
}

.bdProductPage .bdHbCard {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0e6d2, #e0c89e);
}

.bdProductPage .bdHbCard:nth-child(2) {
  background: linear-gradient(135deg, #c7d4ff, #8da6ff);
}

.bdProductPage .bdHbCard:nth-child(3) {
  background: linear-gradient(135deg, #ffd4a8, #ff9466);
}

.bdProductPage .bdFloatChip {
  position: absolute;
  background: var(--bd-white);
  padding: 9px 14px;
  border-radius: var(--bd-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bd-navy);
  box-shadow: var(--bd-shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  border: 1px solid var(--bd-line);
}

.bdProductPage .bdFcOrange {
  color: var(--bd-orange);
}

.bdProductPage .bdFcBlue {
  color: var(--bd-blue);
}

.bdProductPage .bdFcGreen {
  color: var(--bd-green);
}

.bdProductPage .bdFc1 {
  top: 12%;
  left: -4%;
  transform: rotate(-4deg);
}

.bdProductPage .bdFc2 {
  top: 30%;
  right: -8%;
  transform: rotate(3deg);
}

.bdProductPage .bdFc3 {
  bottom: 18%;
  left: -2%;
  transform: rotate(2deg);
}

.bdProductPage .bdFc4 {
  bottom: 6%;
  right: 4%;
  transform: rotate(-3deg);
}

@media (max-width: 980px) {
  .bdProductPage .bdHeroArt {
    min-height: 380px;
  }

  .bdProductPage .bdHeroBrowser {
    max-width: 380px;
  }

  .bdProductPage .bdFc1 {
    left: 0;
  }

  .bdProductPage .bdFc2 {
    right: -2%;
  }
}

@media (max-width: 600px) {
  .bdProductPage .bdHeroBullets {
    grid-template-columns: 1fr;
  }

  .bdProductPage .bdFloatChip {
    font-size: 11px;
    padding: 7px 11px;
  }
}

/* ============================================
   PROOF
   ============================================ */
.bdProductPage .bdProof {
  background: var(--bd-navy-deep);
  color: white;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

.bdProductPage .bdProof::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.bdProductPage .bdProofGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.bdProductPage .bdProofStat {
  padding: 18px 22px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.bdProductPage .bdProofStat:first-child {
  border-left-color: var(--bd-orange);
}

.bdProductPage .bdProofNum {
  font-family: var(--bd-serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: white;
}

.bdProductPage .bdProofUnit {
  font-family: var(--bd-sans);
  font-size: 18px;
  color: var(--bd-orange);
  font-weight: 600;
  margin-left: 4px;
}

.bdProductPage .bdProofLabel {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .bdProductPage .bdProofGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bdProductPage .bdProofNum {
    font-size: 38px;
  }
}

/* ============================================
   FEATURES
   ============================================ */
.bdProductPage .bdFeatures {
  background: var(--bd-bg);
}

.bdProductPage .bdFeaturesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bdProductPage .bdFeature {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-md);
  padding: 30px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.bdProductPage .bdFeature:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
  border-color: var(--bd-blue);
}

.bdProductPage .bdFeatureIcon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--bd-white);
}

.bdProductPage .bdFeatureIcon1 {
  background: linear-gradient(135deg, #2255e8, #4d7cff);
}

.bdProductPage .bdFeatureIcon2 {
  background: linear-gradient(135deg, #f15a25, #ff8255);
}

.bdProductPage .bdFeatureIcon3 {
  background: linear-gradient(135deg, #21d4a8, #4ee3bd);
}

.bdProductPage .bdFeatureIcon4 {
  background: linear-gradient(135deg, #1c2d64, #2c4180);
}

.bdProductPage .bdFeatureIcon5 {
  background: linear-gradient(135deg, #b65cdc, #d68dff);
}

.bdProductPage .bdFeatureIcon6 {
  background: linear-gradient(135deg, #ffc857, #f1a012);
  color: #4a3300;
}

.bdProductPage .bdFeature h3 {
  font-family: var(--bd-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--bd-navy);
  letter-spacing: -0.01em;
}

.bdProductPage .bdFeature p {
  font-size: 14.5px;
  color: var(--bd-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .bdProductPage .bdFeaturesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .bdProductPage .bdFeaturesGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   PLANS
   ============================================ */
.bdProductPage .bdPlans {
  background: var(--bd-white);
}

.bdProductPage .bdIncludesStrip {
  background: var(--bd-cream);
  border-radius: var(--bd-radius-md);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  justify-content: center;
}

.bdProductPage .bdIncludesLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-ink);
}

.bdProductPage .bdIncludesItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--bd-ink-soft);
  font-weight: 500;
}

.bdProductPage .bdIncludesItem svg {
  color: var(--bd-blue);
}

.bdProductPage .bdPlansControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.bdProductPage .bdTenureToggle {
  display: inline-flex;
  background: var(--bd-cream);
  border-radius: var(--bd-radius-pill);
  padding: 5px;
  border: 1px solid var(--bd-line);
}

.bdProductPage .bdTenureBtn {
  padding: 9px 20px;
  border-radius: var(--bd-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--bd-sans);
  transition: all 0.2s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bdProductPage .bdTenureBtnActive {
  background: var(--bd-navy);
  color: var(--bd-white);
  box-shadow: 0 4px 12px rgba(28, 45, 100, 0.25);
}

.bdProductPage .bdTenureSave {
  background: var(--bd-orange-soft);
  color: var(--bd-orange);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--bd-radius-pill);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bdProductPage .bdTenureBtnActive .bdTenureSave {
  background: var(--bd-orange);
  color: white;
}

.bdProductPage .bdCurrencyPicker {
  position: relative;
}

.bdProductPage .bdCurrencySelect {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--bd-line);
  background: var(--bd-white);
  padding: 10px 36px 10px 16px;
  border-radius: var(--bd-radius-pill);
  font-family: var(--bd-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-navy);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2d64' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* ============================================
   PLAN CARDS
   ============================================ */
.bdProductPage .bdPlansGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.bdProductPage .bdPlanCard {
  background: var(--bd-white);
  border: 2px solid var(--bd-line);
  border-radius: var(--bd-radius-lg);
  padding: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bdProductPage .bdPlanCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
}

.bdProductPage .bdPlanCardFeatured {
  border-color: var(--bd-orange);
  background: linear-gradient(180deg, #fff 0%, #fff8f3 100%);
  box-shadow: 0 12px 40px rgba(241, 90, 37, 0.12);
}

.bdProductPage .bdPlanBadge {
  position: absolute;
  top: -14px;
  left: 36px;
  background: var(--bd-orange);
  color: white;
  padding: 7px 16px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(241, 90, 37, 0.4);
}

.bdProductPage .bdPlanTag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--bd-radius-pill);
  margin-bottom: 14px;
}

.bdProductPage .bdPlanTagStarter {
  background: var(--bd-blue-soft);
  color: var(--bd-blue);
}

.bdProductPage .bdPlanTagPro {
  background: var(--bd-orange-soft);
  color: var(--bd-orange);
}

.bdProductPage .bdPlanName {
  font-family: var(--bd-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--bd-navy);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.bdProductPage .bdPlanBest {
  font-size: 14px;
  color: var(--bd-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

.bdProductPage .bdPlanBest strong {
  color: var(--bd-ink);
  font-weight: 600;
}

.bdProductPage .bdPlanPriceRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.bdProductPage .bdPlanPrice {
  font-family: var(--bd-serif);
  font-size: 52px;
  font-weight: 600;
  color: var(--bd-navy);
  letter-spacing: -0.02em;
  line-height: 1;
}

.bdProductPage .bdPlanCurrency {
  font-family: var(--bd-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--bd-navy);
}

.bdProductPage .bdPlanPeriod {
  font-size: 14px;
  color: var(--bd-muted);
  font-weight: 500;
}

.bdProductPage .bdPlanMonthly {
  font-size: 13px;
  color: var(--bd-muted);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bd-line);
}

.bdProductPage .bdPlanMonthly strong {
  color: var(--bd-ink);
  font-weight: 600;
}

.bdProductPage .bdPlanStrike {
  text-decoration: line-through;
  color: var(--bd-muted);
  margin-right: 6px;
  opacity: 0.7;
}

.bdProductPage .bdPlanFeatures {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}

.bdProductPage .bdPlanFeatures li {
  font-size: 14.5px;
  padding: 9px 0 9px 28px;
  position: relative;
  color: var(--bd-ink-soft);
  line-height: 1.5;
}

.bdProductPage .bdPlanFeatures li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  background: var(--bd-green);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.bdProductPage .bdPlanFeatures li.bdPlanFeatureLocked {
  color: var(--bd-muted);
  opacity: 0.7;
}

.bdProductPage .bdPlanFeatures li.bdPlanFeatureLocked::before {
  background: var(--bd-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b748f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
}

.bdProductPage .bdPlanCta {
  width: 100%;
  padding: 16px;
  border-radius: var(--bd-radius-pill);
  font-weight: 600;
  font-size: 15px;
  background: var(--bd-white);
  color: var(--bd-navy);
  border: 2px solid var(--bd-navy);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--bd-sans);
}

.bdProductPage .bdPlanCta:hover {
  background: var(--bd-navy);
  color: white;
}

.bdProductPage .bdPlanCardFeatured .bdPlanCta {
  background: var(--bd-orange);
  color: white;
  border-color: var(--bd-orange);
}

.bdProductPage .bdPlanCardFeatured .bdPlanCta:hover {
  background: var(--bd-orange-warm);
  border-color: var(--bd-orange-warm);
}

.bdProductPage .bdPlanSecondary {
  text-align: center;
  font-size: 13px;
  color: var(--bd-muted);
  margin: 0;
}

.bdProductPage .bdPlanSecondary a {
  color: var(--bd-blue);
  font-weight: 600;
  text-decoration: none;
}

.bdProductPage .bdPlanSecondary a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .bdProductPage .bdPlansGrid {
    grid-template-columns: 1fr;
  }

  .bdProductPage .bdPlanCard {
    padding: 28px 24px;
  }
}

/* ============================================
   COMPARE TABLE
   ============================================ */
.bdProductPage .bdCompare {
  background: var(--bd-bg);
}

.bdProductPage .bdCompareTableWrap {
  background: var(--bd-white);
  border-radius: var(--bd-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bd-line);
  box-shadow: var(--bd-shadow-sm);
}

.bdProductPage .bdCompareTable {
  width: 100%;
  border-collapse: collapse;
}

.bdProductPage .bdCompareTable th,
.bdProductPage .bdCompareTable td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--bd-line-soft);
  vertical-align: middle;
}

.bdProductPage .bdCompareTable thead th {
  background: var(--bd-cream);
  font-family: var(--bd-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bd-navy);
  text-transform: uppercase;
  border-bottom: 2px solid var(--bd-line);
}

.bdProductPage .bdCompareTable thead th:first-child {
  width: 36%;
}

.bdProductPage .bdColPlan {
  text-align: center;
  position: relative;
}

.bdProductPage .bdPname {
  font-family: var(--bd-serif);
  font-size: 22px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--bd-navy);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.bdProductPage .bdColPlanFeatured {
  background: linear-gradient(180deg, #fff7f0, #fbe8d8);
}

.bdProductPage .bdColPlanFeatured .bdPname {
  color: var(--bd-orange);
  font-style: italic;
}

.bdProductPage .bdPprice {
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-muted);
  text-transform: none;
  letter-spacing: 0;
}

.bdProductPage .bdCompareTable tbody td {
  font-size: 14.5px;
  color: var(--bd-ink-soft);
}

.bdProductPage .bdFeatureName {
  font-weight: 600;
  color: var(--bd-ink);
}

.bdProductPage .bdFeatureName small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--bd-muted);
  margin-top: 2px;
}

.bdProductPage .bdCellVal {
  text-align: center;
}

.bdProductPage .bdCellValFeatured {
  background: linear-gradient(180deg, rgba(255, 247, 240, 0.5), rgba(251, 232, 216, 0.3));
}

.bdProductPage .bdCvYes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bd-green);
  border-radius: 50%;
  color: white;
}

.bdProductPage .bdCvNo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bd-line);
  border-radius: 50%;
  color: var(--bd-muted);
}

.bdProductPage .bdCompareSectionRow td {
  background: var(--bd-cream);
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--bd-navy);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 24px;
}

.bdProductPage .bdCompareTable tfoot td {
  padding: 22px 24px;
  background: var(--bd-white);
}

.bdProductPage .bdCompareCta {
  display: inline-block;
  padding: 11px 22px;
  background: var(--bd-navy);
  color: white;
  border-radius: var(--bd-radius-pill);
  font-size: 14px;
  font-weight: 600;
  width: 90%;
  text-align: center;
  text-decoration: none;
}

.bdProductPage .bdCompareCtaFeatured {
  background: var(--bd-orange);
}

.bdProductPage .bdCompareCta:hover {
  background: var(--bd-blue);
  color: white;
}

.bdProductPage .bdCompareCtaFeatured:hover {
  background: var(--bd-orange-warm);
}

@media (max-width: 768px) {
  .bdProductPage .bdCompareTableWrap {
    overflow-x: auto;
  }

  .bdProductPage .bdCompareTable {
    min-width: 720px;
  }
}

/* ============================================
   ADDONS
   ============================================ */
.bdProductPage .bdAddons {
  background: var(--bd-white);
}

.bdProductPage .bdAddonsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bdProductPage .bdAddon {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-md);
  padding: 24px;
  transition: all 0.25s ease;
  display: flex;
  gap: 16px;
  position: relative;
}

.bdProductPage .bdAddon:hover {
  border-color: var(--bd-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(241, 90, 37, 0.12);
}

.bdProductPage .bdAddonIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bd-orange-soft), #ffd9bf);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-orange);
  flex-shrink: 0;
}

.bdProductPage .bdAddonBody {
  flex: 1;
  min-width: 0;
}

.bdProductPage .bdAddonTitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.bdProductPage .bdAddon h4 {
  font-family: var(--bd-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--bd-navy);
  margin: 0;
  letter-spacing: -0.005em;
}

.bdProductPage .bdAddonPrice {
  font-family: var(--bd-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--bd-orange);
  white-space: nowrap;
}

.bdProductPage .bdAddon p {
  font-size: 13.5px;
  color: var(--bd-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}

.bdProductPage .bdAddonAdd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-navy);
  padding: 6px 12px;
  background: var(--bd-cream);
  border: none;
  border-radius: var(--bd-radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.bdProductPage .bdAddonAdd:hover {
  background: var(--bd-orange);
  color: white;
}

@media (max-width: 900px) {
  .bdProductPage .bdAddonsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .bdProductPage .bdAddonsGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FAQ
   ============================================ */
.bdProductPage .bdFaq {
  background: var(--bd-white);
}

.bdProductPage .bdFaqWrap {
  max-width: 880px;
  margin: 0 auto;
}

.bdProductPage .bdFaqItem {
  border: none !important;
  border-bottom: 1px solid var(--bd-line) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.bdProductPage .bdFaqItem:last-child {
  border-bottom: none !important;
}

.bdProductPage .bdFaqItem .accordion-collapse {
  border: none !important;
}

.bdProductPage .bdFaqSummary {
  width: 100%;
  padding: 24px 0 !important;
  font-family: var(--bd-serif);
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--bd-navy) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  letter-spacing: -0.005em;
}

.bdProductPage .bdFaqSummary:hover {
  color: var(--bd-blue) !important;
}

.bdProductPage .bdFaqSummary::after {
  display: none !important;
}

.bdProductPage .bdFaqIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bd-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.2s ease;
  color: var(--bd-navy);
  margin-left: auto;
}

.bdProductPage .bdFaqSummary[aria-expanded="true"] .bdFaqIcon {
  transform: rotate(45deg);
  background: var(--bd-orange);
  color: white;
}

.bdProductPage .bdFaqBody {
  padding: 0 60px 24px 0 !important;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bd-muted);
  margin: 0;
}

/* ============================================
   BROCHURE / FINAL CTA
   ============================================ */
.bdProductPage .bdBrochure {
  background: var(--bd-white);
  padding: 32px 0 80px;
}

.bdProductPage .bdBrochureCard {
  background: linear-gradient(135deg, var(--bd-navy) 0%, var(--bd-navy-deep) 100%);
  border-radius: var(--bd-radius-lg);
  padding: 36px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.bdProductPage .bdBrochureCard::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.25), transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
}

.bdProductPage .bdBrochureText {
  color: white;
  position: relative;
}

.bdProductPage .bdBrochureText h3 {
  font-family: var(--bd-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: white;
}

.bdProductPage .bdBrochureText p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.bdProductPage .bdBrochureActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

@media (max-width: 600px) {
  .bdProductPage .bdBrochureCard {
    padding: 28px 24px;
  }
}

/* ============================================
   PACKAGE PAGE ADDITIONS
   Reuses the .bdProductPage design system; only the
   bundle-specific bits (hero image frame, single centred
   pricing card, 2-col checklist) live here.
   Used by: sme-in-box, sme-in-box-ecomm, re-engage,
   essestial-pack (each carries host class .bdProductPage).
   ============================================ */
.bdProductPage .bdPkgHeroFrame {
  width: 100%;
  max-width: 440px;
  background: var(--bd-white);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 30px 80px rgba(11, 18, 48, 0.18), 0 0 0 1px rgba(11, 18, 48, 0.04);
  transform: rotate(-2deg);
  position: relative;
  z-index: 2;
}

.bdProductPage .bdPkgHeroFrame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* single, centred pricing card */
.bdProductPage .bdPkgPricingGrid {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  margin-top: 8px;
}

/* two-column feature checklist for the long "everything included" list */
.bdProductPage .bdPkgFeatureCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

@media (max-width: 560px) {
  .bdProductPage .bdPkgFeatureCols {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WEDDING WEBSITES PAGE — scoped to <app-wedding-websites>.
   Moved here from wedding-websites.component.css per design-rule.md.
   ============================================================ */

/* Login Modal Overlay */
app-wedding-websites .bdWedLoginModal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

app-wedding-websites .bdWedLoginBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

app-wedding-websites .bdWedLoginDialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 24px;
}

/* ============================================================
   LANDING PAGES INDEX (/lp) — scoped to <app-verticals-index>.
   Moved here from landing-index.component.css per design-rule.md.
   ============================================================ */
app-verticals-index {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-navy-deep: #131f47;
  --bd-blue: var(--site-tertiary-color, #2255e8);
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-orange-warm: #ff7a3d;
  --bd-cream: #fbf6f0;
  --bd-ink: #0d1428;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-white: #ffffff;
  --bd-shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.06), 0 2px 6px rgba(11, 18, 48, 0.04);
  --bd-shadow-md: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --bd-radius-md: 16px;
  --bd-radius-pill: 999px;
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

app-verticals-index .lpIndex {
  font-family: var(--bd-sans);
  background: var(--bd-cream);
  /* extra top padding clears the absolute-positioned site header (~80px) */
  padding: 132px 0 96px;
  min-height: 60vh;
}

@media (max-width: 991px) {
  app-verticals-index .lpIndex {
    padding-top: 108px;
  }
}

/* No max-width override here — the page uses Bootstrap's .container so its
   content lines up with the site header and the home page (1320px at xxl). */

app-verticals-index .lpHead {
  text-align: center;
  margin-bottom: 48px;
}

app-verticals-index .lpEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bd-orange);
  margin-bottom: 16px;
}

app-verticals-index .lpEyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bd-orange);
  border-radius: 2px;
}

app-verticals-index .lpTitle {
  font-family: var(--bd-serif);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  color: var(--bd-navy);
  margin: 0 0 14px;
}

app-verticals-index .lpTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

app-verticals-index .lpSub {
  color: var(--bd-muted);
  font-size: 17px;
  margin: 0;
}

app-verticals-index .lpGrid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

app-verticals-index .lpCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-md);
  box-shadow: var(--bd-shadow-sm);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

app-verticals-index .lpCard:hover {
  transform: translateY(-3px);
  border-color: var(--bd-orange);
  box-shadow: var(--bd-shadow-md);
}

app-verticals-index .lpCardIcon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--bd-cream);
  color: var(--bd-orange);
  font-size: 22px;
  transition: background 0.2s ease, color 0.2s ease;
}

app-verticals-index .lpCard:hover .lpCardIcon {
  background: var(--bd-orange);
  color: var(--bd-white);
}

app-verticals-index .lpCardBody {
  flex: 1 1 auto;
  min-width: 0;
}

app-verticals-index .lpCardName {
  font-size: 17px;
  font-weight: 600;
  color: var(--bd-ink);
}

app-verticals-index .lpCardDesc {
  display: block;
  font-size: 13px;
  color: var(--bd-muted);
  margin-top: 3px;
  line-height: 1.45;
}

app-verticals-index .lpCardPath {
  display: block;
  font-size: 13px;
  color: var(--bd-muted);
  margin-top: 4px;
}

app-verticals-index .lpCardArrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--bd-radius-pill);
  background: var(--bd-cream);
  color: var(--bd-navy);
  font-size: 18px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

app-verticals-index .lpCard:hover .lpCardArrow {
  background: var(--bd-orange);
  color: var(--bd-white);
  transform: translateX(2px);
}

/* ============================================================
   SHARED: legal pages (terms / privacy). Scoped to <app-terms>, <app-privacy>.
   Note: bare h1-h5 selectors elsewhere (wedding landing page block) leak a
   serif font sitewide, so headings here are re-pinned to --bd-sans explicitly.
   ============================================================ */
app-terms, app-privacy, app-contact {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-cream: #fbf6f0;
  --bd-ink: #0d1428;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-white: #ffffff;
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

app-terms .legalPage,
app-contact .legalPage,
app-privacy .legalPage {
  font-family: var(--bd-sans);
  background: var(--bd-cream);
  /* extra top padding clears the absolute-positioned site header (~80px) */
  padding: 132px 0 96px;
}

@media (max-width: 991px) {
  app-terms .legalPage,
  app-contact .legalPage,
  app-privacy .legalPage {
    padding-top: 108px;
  }
}

app-terms .legalPage .container,
app-contact .legalPage .container,
app-privacy .legalPage .container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

app-terms .legalHead,
app-contact .legalHead,
app-privacy .legalHead {
  text-align: center;
  margin-bottom: 48px;
}

app-terms .lpEyebrow,
app-contact .lpEyebrow,
app-privacy .lpEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bd-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bd-orange);
  margin-bottom: 16px;
}

app-terms .lpEyebrow::before,
app-privacy .lpEyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bd-orange);
  border-radius: 2px;
}

app-terms .legalTitle,
app-contact .legalTitle,
app-privacy .legalTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.05;
  color: var(--bd-navy);
  margin: 0;
}

app-terms .legalCard,
app-contact .legalCard,
app-privacy .legalCard {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: 16px;
  padding: 48px clamp(24px, 5vw, 56px);
  box-shadow: 0 4px 12px rgba(11, 18, 48, 0.06);
}

app-terms .legalCard p,
app-contact .legalCard p,
app-privacy .legalCard p {
  font-family: var(--bd-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bd-muted);
  margin: 0 0 18px;
}

app-terms .legalCard h3,
app-contact .legalCard h3,
app-privacy .legalCard h3 {
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: 19px;
  color: var(--bd-ink);
  margin: 36px 0 14px;
}

app-terms .legalCard h3:first-child,
app-privacy .legalCard h3:first-child {
  margin-top: 0;
}

app-terms .legalCard ul,
app-contact .legalCard ul,
app-privacy .legalCard ul {
  font-family: var(--bd-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bd-muted);
  margin: 0 0 18px;
  padding-left: 22px;
}

app-terms .legalCard li,
app-contact .legalCard li,
app-privacy .legalCard li {
  margin-bottom: 6px;
}

app-terms .legalCard a,
app-contact .legalCard a,
app-privacy .legalCard a {
  color: var(--bd-orange);
  text-decoration: underline;
}

/* ============================================================
   CONTACT PAGE — scoped to <app-contact>.
   Shares the legal-page shell above (.legalPage / .legalHead / .legalCard)
   and the wizard's global .sSiteForm* field styles; only the pieces unique
   to this page live here.
   ============================================================ */
app-contact .contactIntro {
  font-family: var(--bd-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bd-muted);
  margin: 0 0 28px;
}

app-contact .contactTextarea {
  min-height: 130px;
  resize: vertical;
  padding-top: 12px;
}

app-contact .contactSubmitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  background: var(--bd-navy);
  color: var(--bd-white);
  font-family: var(--bd-sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

app-contact .contactSubmitBtn:hover {
  background: var(--bd-orange);
  transform: translateY(-1px);
}

app-contact .contactTerms {
  font-family: var(--bd-sans);
  font-size: 12.5px;
  color: var(--bd-muted);
  margin: 14px 0 0;
}

/* Thank-you state */
app-contact .contactSuccess {
  text-align: center;
  padding: 20px 0 8px;
}

app-contact .contactSuccessOrb {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 212, 168, 0.14);
  color: #12a37f;
  font-size: 30px;
}

app-contact .contactSuccess h3 {
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: 22px;
  color: var(--bd-ink);
  margin: 0 0 10px;
}

app-contact .contactSuccess p {
  margin-bottom: 22px;
}

/* Contact details below the card */
app-contact .contactInfoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

app-contact .contactInfoItem {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: 14px;
  padding: 22px 20px;
}

app-contact .contactInfoIcon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 90, 37, 0.1);
  color: var(--bd-orange);
  font-size: 18px;
  margin-bottom: 12px;
}

app-contact .contactInfoItem h4 {
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: 14px;
  color: var(--bd-ink);
  margin: 0 0 6px;
}

app-contact .contactInfoItem p {
  font-family: var(--bd-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bd-muted);
  margin: 0;
}

/* ============================================================
   SHARED: products-vertical ("Every industries. One toolkit.")
   Scoped to <app-products-vertical>. Moved from products-vertical.component.css
   per design-rule.md.
   ============================================================ */
app-products-vertical {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-blue: var(--site-tertiary-color, #2255e8);
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-cream: #fbf6f0;
  --bd-ink: #0d1428;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-white: #ffffff;
  --bd-radius-sm: 10px;
  --bd-radius-md: 16px;
  --bd-shadow-md: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

app-products-vertical .bdVerticals {
  padding: 110px 0;
  background: var(--bd-cream);
  position: relative;
  overflow: hidden;
}

app-products-vertical .bdVerticals::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, rgba(28, 45, 100, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

app-products-vertical .bdVerticals .container {
  position: relative;
}

@media (max-width: 768px) {
  app-products-vertical .bdVerticals {
    padding: 72px 0;
  }
}

app-products-vertical .bdVerticalsHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

app-products-vertical .bdVerticalsHead .bdLead {
  max-width: 720px;
}

app-products-vertical .bdEyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

app-products-vertical .bdEyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

app-products-vertical .bdSectionTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0;
}

app-products-vertical .bdSectionTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

app-products-vertical .bdSectionSub {
  font-size: 17px;
  color: var(--bd-muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
}

app-products-vertical .bdLinkArrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bd-blue);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

app-products-vertical .bdLinkArrow:hover {
  gap: 12px;
  color: var(--bd-blue);
}

app-products-vertical .bdVerticalsGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

app-products-vertical .bdVertical {
  background: var(--bd-white);
  padding: 28px 16px 22px;
  border-radius: var(--bd-radius-md);
  text-align: center;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
}

app-products-vertical .bdVertical::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bd-blue);
  transform: translateY(-3px);
  transition: transform 0.25s ease;
}

app-products-vertical .bdVertical:hover {
  transform: translateY(-3px);
  box-shadow: var(--bd-shadow-md);
  border-color: var(--bd-line);
}

app-products-vertical .bdVertical:hover::before {
  transform: translateY(0);
}

app-products-vertical .bdVerticalIcon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bd-cream);
  border-radius: var(--bd-radius-sm);
  color: var(--bd-navy);
  transition: background 0.25s ease, color 0.25s ease;
  overflow: hidden;
}

app-products-vertical .bdVerticalIcon img {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
}

app-products-vertical .bdVerticalIcon svg {
  width: 28px;
  height: 28px;
}

app-products-vertical .bdVertical:hover .bdVerticalIcon {
  background: var(--bd-blue);
  color: var(--bd-white);
}

app-products-vertical .bdVerticalName {
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-navy);
  margin: 0;
  letter-spacing: -0.005em;
}

@media (max-width: 1024px) {
  app-products-vertical .bdVerticalsGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  app-products-vertical .bdVerticalsGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 380px) {
  app-products-vertical .bdVerticalsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   SHARED: products-listing ("Nine products. One login.")
   Scoped to <app-products-listing>. Moved from products-listing.component.css per design-rule.md.
   ============================================================ */
app-products-listing {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-blue: var(--site-tertiary-color, #2255e8);
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-ink: #0d1428;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-white: #ffffff;
  --bd-radius-sm: 10px;
  --bd-radius-md: 16px;
  --bd-shadow-md: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

app-products-listing .bd-products {
  padding: 110px 0;
  background: var(--bd-white);
}

@media (max-width: 768px) {
  app-products-listing .bd-products {
    padding: 72px 0;
  }
}

app-products-listing .bd-products-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

app-products-listing .bd-products-head .bd-lead {
  max-width: 720px;
}

app-products-listing .bd-eyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

app-products-listing .bd-eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

app-products-listing .bd-section-title {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0;
}

app-products-listing .bd-section-title em {
  font-style: italic;
  color: var(--bd-orange);
}

app-products-listing .bd-section-sub {
  font-size: 17px;
  color: var(--bd-muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
}

app-products-listing .bd-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

app-products-listing .bd-product {
  padding: 28px;
  border-radius: var(--bd-radius-md);
  border: 1px solid var(--bd-line);
  background: var(--bd-white);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

app-products-listing .bd-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
  border-color: var(--bd-blue);
}

app-products-listing .bd-product-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--bd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--bd-white);
}

app-products-listing .bd-product-icon svg {
  width: 24px;
  height: 24px;
}

app-products-listing .bd-product-icon-1 {
  background: linear-gradient(135deg, #2255e8, #4d7cff);
}

app-products-listing .bd-product-icon-2 {
  background: linear-gradient(135deg, #f15a25, #ff8255);
}

app-products-listing .bd-product-icon-3 {
  background: linear-gradient(135deg, #1c2d64, #2c4180);
}

app-products-listing .bd-product-icon-4 {
  background: linear-gradient(135deg, #21d4a8, #4ee3bd);
}

app-products-listing .bd-product-icon-5 {
  background: linear-gradient(135deg, #ffc857, #f1a012);
  color: #4a3300;
}

app-products-listing .bd-product-icon-6 {
  background: linear-gradient(135deg, #b65cdc, #d68dff);
}

app-products-listing .bd-product-icon-7 {
  background: linear-gradient(135deg, #2255e8, #1c2d64);
}

app-products-listing .bd-product-icon-8 {
  background: linear-gradient(135deg, #f15a25, #b6306b);
}

app-products-listing .bd-product-icon-9 {
  background: linear-gradient(135deg, #21d4a8, #1d8b8e);
}

app-products-listing .bd-product h3 {
  font-family: var(--bd-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--bd-navy);
  letter-spacing: -0.01em;
}

app-products-listing .bd-product p {
  font-size: 14.5px;
  color: var(--bd-muted);
  line-height: 1.55;
  margin: 0 0 18px;
  flex-grow: 1;
}

app-products-listing .bd-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

app-products-listing .bd-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bd-blue);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

app-products-listing .bd-link-arrow:hover {
  gap: 10px;
}

app-products-listing .bd-product-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--bd-orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  app-products-listing .bd-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  app-products-listing .bd-products-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SHARED: gallery-item ("Real businesses. Real products.")
   Scoped to <app-gallery-item>. Moved from gallery-item.component.css per design-rule.md.
   ============================================================ */
app-gallery-item {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-navy-deep: #131f47;
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-cream: #fbf6f0;
  --bd-ink: #0d1428;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-white: #ffffff;
  --bd-radius-md: 16px;
  --bd-radius-pill: 999px;
  --bd-shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.06), 0 2px 6px rgba(11, 18, 48, 0.04);
  --bd-shadow-lg: 0 24px 60px rgba(11, 18, 48, 0.18);
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
  --bd-display: var(--site-tertiary-font, "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif);
}

app-gallery-item .bdGallery {
  padding: 110px 0;
  background: var(--bd-cream);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  app-gallery-item .bdGallery {
    padding: 72px 0;
  }
}

app-gallery-item .bdGalleryHead {
  margin-bottom: 56px;
  max-width: 720px;
}

app-gallery-item .bdEyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

app-gallery-item .bdEyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

app-gallery-item .bdGalleryTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0;
}

app-gallery-item .bdGalleryTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

app-gallery-item .bdGallerySub {
  font-size: 17px;
  color: var(--bd-muted);
  line-height: 1.55;
  margin: 0;
}

app-gallery-item .bdGalleryTabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding: 0;
  list-style: none;
  border: none;
}

app-gallery-item .bdGalleryTab {
  padding: 10px 22px;
  border-radius: var(--bd-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-ink);
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  cursor: pointer;
  font-family: var(--bd-sans);
  transition: all 0.2s ease;
}

app-gallery-item .bdGalleryTab:hover {
  border-color: var(--bd-navy);
}

app-gallery-item .bdGalleryTab.active {
  background: var(--bd-navy);
  color: var(--bd-white);
  border-color: var(--bd-navy);
}

app-gallery-item .bdGalleryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

app-gallery-item .bdCardTile {
  background: var(--bd-white);
  border-radius: var(--bd-radius-md);
  overflow: hidden;
  box-shadow: var(--bd-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

app-gallery-item .bdCardTile:hover {
  transform: translateY(-6px);
  box-shadow: var(--bd-shadow-lg);
}

app-gallery-item .bdCardTileStatus {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #1d8b8e;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bd-white);
  border-bottom: 1px solid var(--bd-line);
}

app-gallery-item .bdCardTileStatus::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #21d4a8;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(33, 212, 168, 0.6);
}

app-gallery-item .bdCardTileImg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

app-gallery-item .bdCardTileBody {
  padding: 18px 22px;
  color: var(--bd-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

app-gallery-item .bdCardBg1 {
  background: linear-gradient(180deg, var(--bd-navy) 0%, var(--bd-navy-deep) 100%);
}

app-gallery-item .bdCardBg2 {
  background: linear-gradient(180deg, #c89b3c 0%, #8e6c20 100%);
}

app-gallery-item .bdCardBg3 {
  background: linear-gradient(180deg, #21d4a8 0%, #157a5d 100%);
}

app-gallery-item .bdCardBg4 {
  background: linear-gradient(180deg, #6e3a1f 0%, #3a1d0d 100%);
}

app-gallery-item .bdCardBg5 {
  background: linear-gradient(180deg, #5e8a3a 0%, #2f4a1d 100%);
}

app-gallery-item .bdCardBg6 {
  background: linear-gradient(180deg, #b65cdc 0%, #5b2d6e 100%);
}

app-gallery-item .bdCardTileName {
  font-family: var(--bd-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--bd-white);
}

app-gallery-item .bdCardTileTag {
  font-size: 11px;
  opacity: 0.85;
  margin: 2px 0 0;
  color: var(--bd-white);
}

app-gallery-item .bdCardTileLink {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  flex-shrink: 0;
  transition: gap 0.2s ease;
}

app-gallery-item .bdCardTileLink:hover {
  color: var(--bd-white);
  gap: 8px;
}

@media (max-width: 900px) {
  app-gallery-item .bdGalleryGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  app-gallery-item .bdGalleryGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SHARED: add-on-services ("Flexible add-ons.")
   Scoped to <app-add-on-services>. Moved from add-on-services.component.css per design-rule.md.
   ============================================================ */
app-add-on-services {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-ink: #0d1428;
  --bd-ink-soft: #2a3556;
  --bd-muted: #6b748f;
  --bd-white: #ffffff;
  --bd-radius-md: 16px;
  --bd-radius-lg: 24px;
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

app-add-on-services .bdVas {
  padding: 110px 0;
  background: var(--bd-white);
  position: relative;
}

@media (max-width: 768px) {
  app-add-on-services .bdVas {
    padding: 72px 0;
  }
}

app-add-on-services .bdVasWrap {
  background: linear-gradient(135deg, #fff5ee 0%, #ffe9d8 100%);
  border-radius: var(--bd-radius-lg);
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(241, 90, 37, 0.15);
}

app-add-on-services .bdVasWrap::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.18), transparent 60%);
  border-radius: 50%;
  filter: blur(20px);
}

app-add-on-services .bdVasHead {
  position: relative;
  margin-bottom: 44px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  flex-wrap: wrap;
}

app-add-on-services .bdEyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

app-add-on-services .bdEyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

app-add-on-services .bdSectionTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0;
}

app-add-on-services .bdSectionTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

app-add-on-services .bdSectionSub {
  font-size: 17px;
  color: var(--bd-ink-soft);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
}

app-add-on-services .bdVasGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
}

app-add-on-services .bdVasCard {
  background: var(--bd-white);
  padding: 26px;
  border-radius: var(--bd-radius-md);
  display: flex;
  gap: 18px;
  border: 1px solid rgba(241, 90, 37, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

app-add-on-services .bdVasCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(241, 90, 37, 0.15);
  border-color: var(--bd-orange);
}

app-add-on-services .bdVasIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff1e6, #ffd9bf);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bd-orange);
}

app-add-on-services .bdVasCard h4 {
  font-family: var(--bd-serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--bd-navy);
  letter-spacing: -0.01em;
}

app-add-on-services .bdVasCard p {
  font-size: 13.5px;
  color: var(--bd-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}

app-add-on-services .bdVasCard a {
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

app-add-on-services .bdVasCard a:hover {
  gap: 8px;
}

@media (max-width: 960px) {
  app-add-on-services .bdVasGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  app-add-on-services .bdVasWrap {
    padding: 40px 24px;
  }

  app-add-on-services .bdVasGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SHARED: footer (global site footer) — embedded on ~37 pages.
   Scoped to <app-footer>. Moved from footer.component.css per design-rule.md.
   ============================================================ */
app-footer {
  --bd-navy-night: #0b1230;
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-white: #ffffff;
  --bd-radius-pill: 999px;
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
  --bd-display: var(--site-tertiary-font, "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif);
}

app-footer .bd-footer {
  background: var(--bd-navy-night);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 32px;
  font-family: var(--bd-sans);
}

app-footer .bd-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

app-footer .bd-footer-about {
  max-width: 460px;
}

app-footer .bd-footer-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

app-footer .bd-footer-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--bd-radius-pill);
  transition: all 0.2s ease;
}

app-footer .bd-footer-links a:hover {
  color: var(--bd-white);
  border-color: var(--bd-orange);
  background: rgba(255, 255, 255, 0.06);
}

app-footer .bd-footer-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  text-decoration: none;
}

app-footer .bd-footer-brand img {
  height: 38px;
  width: auto;
  display: block;
}

app-footer .bd-footer-tagline {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 320px;
}

app-footer .bd-footer-socials {
  display: flex;
  gap: 10px;
}

app-footer .bd-footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s ease;
}

app-footer .bd-footer-social:hover {
  background: var(--bd-orange);
  border-color: var(--bd-orange);
  color: var(--bd-white);
  transform: translateY(-2px);
}

app-footer .bd-footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

app-footer .bd-footer-region {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--bd-radius-pill);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 700px) {
  app-footer .bd-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  app-footer .bd-footer-links {
    flex-wrap: wrap;
  }
}

/* ============================================================
   SHARED: login (checkout login/sign-up modal) — compiled from
   login.component.scss, scoped to <app-login>. Per design-rule.md.
   NOTE: component currently unused (no references) — kept for parity.
   ============================================================ */
app-login .login-container {
  padding: 0;
}

app-login .login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}

app-login .login-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

app-login .btn-close-custom {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--site-primary-color, #007bff);
  cursor: pointer;
  padding: 0;
}

app-login .btn-close-custom:hover {
  opacity: 0.7;
}

app-login .login-body {
  padding: 24px;
}

app-login .input-field {
  height: 50px;
  border-radius: 6px;
}

app-login .input-field:focus {
  box-shadow: none;
  border-color: var(--site-primary-color, #007bff);
}

app-login .country-select {
  outline: none;
  background: transparent;
  cursor: pointer;
}

app-login .custom-btn {
  height: 48px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  background-color: var(--site-primary-color, #007bff);
  border-color: var(--site-primary-color, #007bff);
}

app-login .custom-btn:hover {
  opacity: 0.9;
  background-color: var(--site-primary-color, #007bff);
  border-color: var(--site-primary-color, #007bff);
}

app-login .custom-btn:disabled {
  opacity: 0.6;
}

app-login .validation-message {
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 0;
}

app-login .resend-link {
  font-size: 14px;
  font-weight: 500;
}

app-login .resend-link.active {
  color: var(--site-primary-color, #007bff);
  cursor: pointer;
}

app-login .resend-link.disabled {
  color: #999;
  cursor: not-allowed;
}

app-login .forgot-password-link {
  font-size: 14px;
  font-weight: 500;
  color: #dc3545;
  cursor: pointer;
}

app-login .cursor-pointer {
  cursor: pointer;
}

app-login .info-text {
  font-size: 14px;
  color: #dc3545;
  font-weight: 500;
  padding: 0 12px;
}

/* ============================================================
   HOME PAGE (default route / and /home) — scoped to <app-home>.
   Moved from home.component.css per design-rule.md.
   (@keyframes bdRipple kept global; no name collision.)
   ============================================================ */
/* Custom seller-site homepage — distributor's hosted HTML, rendered full-screen. */
app-home .bdCustomHomeFrame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  z-index: 1000;
}

/* ============================================
   BIGDOT HOME - SCOPED DESIGN TOKENS
   (mapped to existing BIGDOT DESIGN SYSTEM in bigdot-landingpages-v2.css)
   ============================================ */
app-home {
  --bd-navy: var(--site-primary-color, #1c2d64);
  --bd-navy-deep: #131f47;
  --bd-navy-night: #0b1230;
  --bd-blue: var(--site-tertiary-color, #2255e8);
  --bd-orange: var(--site-quaternary-color, #f15a25);
  --bd-orange-warm: #ff7a3d;
  --bd-cream: #fbf6f0;
  --bd-ink: #0d1428;
  --bd-ink-soft: #2a3556;
  --bd-muted: #6b748f;
  --bd-line: #e6e9f2;
  --bd-white: #ffffff;
  --bd-shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.06), 0 2px 6px rgba(11, 18, 48, 0.04);
  --bd-shadow-md: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --bd-shadow-lg: 0 24px 60px rgba(11, 18, 48, 0.18);
  --bd-radius-sm: 10px;
  --bd-radius-md: 16px;
  --bd-radius-lg: 24px;
  --bd-radius-pill: 999px;
  --bd-serif: var(--site-secondary-font, "Cormorant Garamond", Georgia, serif);
  --bd-sans: var(--site-primary-font, "Plus Jakarta Sans", system-ui, sans-serif);
  --bd-display: var(--site-tertiary-font, "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif);
}

/* ============================================
   SHARED SECTION HELPERS
   ============================================ */
app-home .bdSection {
  padding: 110px 0;
}

@media (max-width: 768px) {
  app-home .bdSection {
    padding: 72px 0;
  }
}

app-home .bdEyebrow {
  font-family: var(--bd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

app-home .bdEyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--bd-orange);
}

app-home .bdSectionTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  margin: 14px 0 14px;
}

app-home .bdSectionTitle em {
  font-style: italic;
  color: var(--bd-orange);
}

app-home .bdSectionSub {
  font-size: 17px;
  color: var(--bd-muted);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
}

app-home .bdSectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

app-home .bdSectionHead .bdLead {
  max-width: 720px;
}

app-home .bdSectionHeadCenter {
  justify-content: center;
  text-align: center;
}

app-home .bdSectionHeadCenter .bdLead {
  margin: 0 auto;
}

app-home .bdSectionHeadCenter .bdEyebrow {
  justify-content: center;
}

app-home .bdSectionDark .bdSectionTitle {
  color: var(--bd-white);
}

app-home .bdSectionDark .bdSectionSub {
  color: rgba(255, 255, 255, 0.7);
}

app-home .bdSectionDark .bdEyebrow {
  color: var(--bd-orange-warm);
}

app-home .bdSectionDark .bdEyebrow::before {
  background: var(--bd-orange-warm);
}

/* ============================================
   BUTTONS
   ============================================ */
app-home .bdBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--bd-radius-pill);
  font-family: var(--bd-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

app-home .bdBtn:hover {
  transform: translateY(-2px);
}

app-home .bdBtnPrimary {
  background: var(--bd-orange);
  color: var(--bd-white);
  box-shadow: 0 6px 20px rgba(241, 90, 37, 0.35);
}

app-home .bdBtnPrimary:hover {
  background: var(--bd-orange-warm);
  color: var(--bd-white);
  box-shadow: 0 12px 28px rgba(241, 90, 37, 0.45);
}

app-home .bdBtnGhostLight {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bd-white);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

app-home .bdBtnGhostLight:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--bd-white);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   HERO
   ============================================ */
app-home .bdHero {
  position: relative;
  background: var(--bd-navy-deep);
  color: var(--bd-white);
  padding: 160px 0 100px;
  isolation: isolate;
}

app-home .bdHeroBgFx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

app-home .bdHeroBgFx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 50%, transparent 100%);
}

app-home .bdHeroBgFx::after {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(34, 85, 232, 0.4) 0%, transparent 60%);
  filter: blur(40px);
}

app-home .bdHeroGlow2 {
  position: absolute;
  bottom: -300px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.18) 0%, transparent 60%);
  filter: blur(40px);
}

app-home .bdHeroGrid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 980px) {
  app-home .bdHeroGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

app-home .bdHeroPill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--bd-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}

app-home .bdHeroPill .bdBadge {
  background: var(--bd-orange);
  color: white;
  padding: 4px 10px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

app-home .bdHeroTitle {
  font-family: var(--bd-serif);
  font-weight: 500;
  font-size: clamp(46px, 6.4vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--bd-white);
}

app-home .bdHeroTitle .bdAccent {
  color: var(--bd-orange);
  font-style: italic;
  position: relative;
  display: inline-block;
}

html[data-lang="100001"] app-home .bdHeroTitle .bdAccent::after {
  display: none;
}

app-home .bdHeroTitle .bdAccent::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  background: var(--bd-orange);
  border-radius: 50%;
}

app-home .bdHeroSub {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 24px;
  max-width: 560px;
}

app-home .bdHeroFooter {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

app-home .bdHasSuggestions .bdHeroFooter {
  opacity: 0.12;
  pointer-events: none;
}

app-home .bdHeroCtas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

app-home .bdHeroCtas .bdBtn {
  min-width: 260px;
}

@media (max-width: 600px) {
  app-home .bdHeroCtas .bdBtn {
    min-width: 0;
    flex: 1 1 100%;
  }
}

app-home .bdHeroTrust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0;
  border: none;
}

app-home .bdTrustAvatars {
  display: flex;
}

app-home .bdTrustAvatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bd-navy-deep);
  margin-left: -10px;
  object-fit: cover;
}

app-home .bdTrustAvatars img:first-child {
  margin-left: 0;
}

app-home .bdTrustText {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

app-home .bdTrustText strong {
  color: var(--bd-white);
  font-weight: 700;
}

app-home .bdTrustStars {
  display: inline-flex;
  gap: 2px;
  color: #ffc857;
  margin-right: 6px;
  vertical-align: middle;
}

/* HERO CARD MOCKUP */
app-home .bdHeroArt {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}

app-home .bdCardMock {
  width: 320px;
  background: linear-gradient(155deg, #1c2d64 0%, #2a4080 100%);
  border-radius: 24px;
  padding: 28px 24px;
  color: white;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: rotate(-6deg);
  position: relative;
  z-index: 2;
}

app-home .bdCardMock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(241, 90, 37, 0.25), transparent 50%);
  border-radius: 24px;
  pointer-events: none;
}

app-home .bdCmTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}

app-home .bdCmOnline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(33, 212, 168, 0.15);
  color: #4adba0;
  padding: 4px 10px;
  border-radius: var(--bd-radius-pill);
}

app-home .bdCmOnline::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #4adba0;
  border-radius: 50%;
  box-shadow: 0 0 8px #4adba0;
}

app-home .bdCmLogo {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}

app-home .bdCmLogo .bdCmD {
  color: var(--bd-orange);
}

app-home .bdCmAvatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f15a25, #ff9466);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bd-serif);
  font-size: 38px;
  font-weight: 600;
  color: white;
  box-shadow: 0 8px 20px rgba(241, 90, 37, 0.4);
}

app-home .bdCmName {
  font-family: var(--bd-serif);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 4px;
  color: white;
}

app-home .bdCmRole {
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px;
}

app-home .bdCmActions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

app-home .bdCmAction {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 16px;
}

app-home .bdCmSave {
  background: var(--bd-orange);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

app-home .bdCardMock2 {
  position: absolute;
  width: 240px;
  height: 320px;
  background: linear-gradient(155deg, #2255e8 0%, #5b86ff 100%);
  border-radius: 24px;
  bottom: 30px;
  right: 0;
  transform: rotate(8deg);
  box-shadow: 0 24px 60px rgba(34, 85, 232, 0.4);
  z-index: 1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

app-home .bdCardMock2::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 60%);
  top: -60px;
  left: -60px;
  border-radius: 50%;
}

app-home .bdCm2Chip {
  width: 36px;
  height: 28px;
  background: linear-gradient(135deg, #ffc857, #f1a012);
  border-radius: 6px;
  position: relative;
  z-index: 2;
}

app-home .bdCm2Chip::before,
app-home .bdCm2Chip::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.18);
  height: 1px;
  width: 100%;
  left: 0;
}

app-home .bdCm2Chip::before {
  top: 12px;
}

app-home .bdCm2Chip::after {
  top: 18px;
}

app-home .bdCm2Bottom {
  color: white;
  position: relative;
  z-index: 2;
}

app-home .bdCm2Label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.7;
  margin-bottom: 4px;
}

app-home .bdCm2Name {
  font-family: var(--bd-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

app-home .bdCm2Tap {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 11px;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  z-index: 2;
}

app-home .bdCm2Pulse {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
}

app-home .bdCm2Pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid white;
  animation: bdRipple 2s infinite;
}

@keyframes bdRipple {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (max-width: 980px) {
  app-home .bdHero {
    padding: 130px 0 80px;
  }

  app-home .bdHeroArt {
    min-height: 420px;
  }

  app-home .bdCardMock {
    width: 280px;
  }

  app-home .bdCardMock2 {
    width: 200px;
    height: 270px;
    right: -10px;
  }
}

/* HERO SEARCH */
app-home .bdHeroSearch {
  margin: 0 0 32px;
  position: relative;
  z-index: 60;
  max-width: 560px;
}

app-home .bdHeroSearchBar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--bd-radius-pill);
  padding: 6px 6px 6px 22px;
  backdrop-filter: blur(10px);
  width: 100%;
  margin: 0;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  position: relative;
}

app-home .bdHeroSearchBar:focus-within {
  border-color: rgba(241, 90, 37, 0.5);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(241, 90, 37, 0.12);
}

app-home .bdHeroSearchIcon {
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

app-home .bdHeroSearchBar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--bd-white);
  font-family: var(--bd-sans);
  font-size: 16px;
  padding: 14px 0;
  font-weight: 500;
}

app-home .bdHeroSearchBar input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

app-home .bdHeroSearchBtn {
  background: var(--bd-orange);
  color: var(--bd-white);
  border: none;
  border-radius: var(--bd-radius-pill);
  padding: 13px 24px;
  font-family: var(--bd-sans);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(241, 90, 37, 0.4);
}

app-home .bdHeroSearchBtn:hover {
  background: var(--bd-orange-warm);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(241, 90, 37, 0.5);
}

app-home .bdHeroSearch .ProductPage,
app-home .bdSearchSuggestions {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--bd-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius-md) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(11, 18, 48, 0.04) !important;
  margin-top: 0 !important;
  padding: 6px 0 !important;
  max-height: 220px !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}

app-home .bdHeroSearch .ProductPage ul,
app-home .bdSearchSuggestions ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 208px !important;
  overflow-y: auto !important;
}

app-home .bdHeroSearch .ProductPage ul li,
app-home .bdSearchSuggestions ul li {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: none !important;
}

app-home .bdHeroSearch .ProductPage ul li:hover,
app-home .bdSearchSuggestions ul li:hover {
  background: var(--bd-cream) !important;
}

app-home .bdHeroSearch .ProductPage ul li a,
app-home .bdSearchSuggestions ul li a,
app-home .bdHeroSearch .ProductPage ul li:hover a {
  display: block !important;
  padding: 10px 18px !important;
  color: var(--bd-ink) !important;
  text-decoration: none !important;
  font-family: var(--bd-sans);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  transition: color 0.15s ease;
}

app-home .bdHeroSearch .ProductPage ul li a:hover,
app-home .bdSearchSuggestions ul li a:hover {
  color: var(--bd-navy) !important;
}

app-home .bdSearchSuggestions::-webkit-scrollbar,
app-home .bdHeroSearch .ProductPage::-webkit-scrollbar {
  width: 6px !important;
}

app-home .bdSearchSuggestions::-webkit-scrollbar-thumb,
app-home .bdHeroSearch .ProductPage::-webkit-scrollbar-thumb {
  background: rgba(11, 18, 48, 0.18) !important;
  border-radius: 4px !important;
}

app-home .bdSuggestionLink {
  cursor: pointer;
}

app-home .bdHeroSearchChips {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

app-home .bdChipLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 4px;
}

app-home .bdChip {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bd-radius-pill);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

app-home .bdChip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--bd-white);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  app-home .bdHeroSearch {
    margin: 0 0 24px;
    max-width: 100%;
  }

  app-home .bdHeroSearchBar {
    padding: 5px 5px 5px 18px;
    gap: 8px;
  }

  app-home .bdHeroSearchBar input {
    font-size: 15px;
    padding: 12px 0;
  }

  app-home .bdHeroSearchBtn {
    padding: 11px 14px;
    font-size: 13px;
  }

  app-home .bdHeroSearchBtn .bdBtnText {
    display: none;
  }

  app-home .bdHeroSearchChips {
    gap: 6px;
  }

  app-home .bdChip {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ============================================
   STATS BAR
   ============================================ */
app-home .bdStats {
  background: var(--bd-navy-night);
  color: white;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

app-home .bdStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

app-home .bdStat {
  text-align: center;
  padding: 8px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

app-home .bdStat:last-child {
  border-right: none;
}

app-home .bdStatNum {
  font-family: var(--bd-serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff !important;
}

app-home .bdStatNum .bdPlus {
  color: var(--bd-orange);
}

app-home .bdStatLabel {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  app-home .bdStatsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  app-home .bdStat:nth-child(2) {
    border-right: none;
  }

  app-home .bdStatNum {
    font-size: 34px;
  }
}

/* ============================================
   HOW IT WORKS
   ============================================ */
app-home .bdHow {
  background: var(--bd-white);
}

app-home .bdHowSteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  margin-top: 20px;
}

app-home .bdHowSteps::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(to right,
      var(--bd-blue) 0,
      var(--bd-blue) 6px,
      transparent 6px,
      transparent 12px);
  opacity: 0.3;
  z-index: 0;
}

app-home .bdStep {
  background: var(--bd-white);
  padding: 36px 32px;
  border-radius: var(--bd-radius-md);
  border: 1px solid var(--bd-line);
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

app-home .bdStep:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
  border-color: transparent;
}

app-home .bdStepNum {
  width: 52px;
  height: 52px;
  background: var(--bd-navy);
  color: var(--bd-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bd-serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
}

app-home .bdStepNum::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1.5px dashed var(--bd-line);
  border-radius: 50%;
}

app-home .bdStep h3 {
  font-family: var(--bd-serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--bd-navy);
}

app-home .bdStep p {
  font-size: 15px;
  color: var(--bd-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 768px) {
  app-home .bdHowSteps {
    grid-template-columns: 1fr;
  }

  app-home .bdHowSteps::before {
    display: none;
  }
}

/* ============================================
   PACKAGES (DARK)
   ============================================ */
app-home .bdPackages {
  background: var(--bd-navy-deep);
  color: var(--bd-white);
  position: relative;
  overflow: hidden;
}

app-home .bdPackages::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

app-home .bdPackagesGlow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.15), transparent 70%);
  border-radius: 50%;
  top: 50%;
  right: -200px;
  transform: translateY(-50%);
  filter: blur(40px);
  pointer-events: none;
}

app-home .bdPackages .container {
  position: relative;
}

app-home .bdPackagesGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

app-home .bdPkg {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bd-radius-lg);
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  backdrop-filter: blur(8px);
}

app-home .bdPkg:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

app-home .bdPkgFeatured {
  background: linear-gradient(155deg, rgba(34, 85, 232, 0.15), rgba(241, 90, 37, 0.08));
  border-color: rgba(241, 90, 37, 0.4);
}

app-home .bdPkgFeatured:hover {
  border-color: var(--bd-orange);
}

app-home .bdPkgBadge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bd-orange);
  color: white;
  padding: 6px 16px;
  border-radius: var(--bd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(241, 90, 37, 0.5);
}

app-home .bdPkgIcon {
  width: 56px;
  height: 56px;
  border-radius: var(--bd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 22px;
  color: white;
}

app-home .bdPkgIcon svg {
  width: 24px;
  height: 24px;
}

app-home .bdPkgFeatured .bdPkgIcon {
  background: var(--bd-orange);
}

app-home .bdPkgName {
  font-family: var(--bd-serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--bd-white);
}

app-home .bdPkgDesc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: 0 0 22px;
  min-height: 65px;
  flex-grow: 1;
}

app-home .bdPkgCtaWrap {
  margin-top: auto;
}

app-home .bdPkgCta {
  width: 100%;
  padding: 14px;
  border-radius: var(--bd-radius-pill);
  font-weight: 600;
  font-size: 14.5px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--bd-sans);
}

app-home .bdPkgCta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

app-home .bdPkgFeatured .bdPkgCta {
  background: var(--bd-orange);
  border-color: var(--bd-orange);
}

app-home .bdPkgFeatured .bdPkgCta:hover {
  background: var(--bd-orange-warm);
  border-color: var(--bd-orange-warm);
}

@media (max-width: 1024px) {
  app-home .bdPackagesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  app-home .bdPackagesGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TESTIMONIALS (DARK)
   ============================================ */
app-home .bdTestimonials {
  background: var(--bd-navy);
  color: white;
  position: relative;
  overflow: hidden;
}

app-home .bdTestimonials::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(34, 85, 232, 0.25), transparent 70%);
  filter: blur(50px);
  border-radius: 50%;
  transform: translateY(-50%);
}

app-home .bdTestimonials .container {
  position: relative;
}

app-home .bdTestiGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 12px;
}

app-home .bdTestiMain,
app-home .bdTestiSide {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bd-radius-lg);
  padding: 40px;
  position: relative;
  backdrop-filter: blur(6px);
}

app-home .bdTestiMain {
  background: linear-gradient(155deg, rgba(34, 85, 232, 0.18), rgba(255, 255, 255, 0.02));
  border-color: rgba(34, 85, 232, 0.3);
}

app-home .bdTestiMark {
  position: absolute;
  top: 24px;
  right: 32px;
  font-family: var(--bd-serif);
  font-size: 100px;
  line-height: 0.6;
  color: var(--bd-orange);
  opacity: 0.4;
}

app-home .bdTestiQuote {
  font-family: var(--bd-serif);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
  color: white;
}

app-home .bdTestiSide .bdTestiQuote {
  font-size: 18px;
}

app-home .bdTestiAuthor {
  display: flex;
  align-items: center;
  gap: 14px;
}

app-home .bdTestiAvatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bd-serif);
  font-size: 19px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

app-home .bdTestiAvatar1 {
  background: linear-gradient(135deg, #f15a25, #ff9466);
}

app-home .bdTestiAvatar2 {
  background: linear-gradient(135deg, #2255e8, #6a8eff);
}

app-home .bdTestiAvatar3 {
  background: linear-gradient(135deg, #21d4a8, #5cdcc1);
}

app-home .bdTestiName {
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  color: white;
}

app-home .bdTestiRole {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

app-home .bdTestiSideStack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

app-home .bdTestiSide {
  padding: 28px;
}

@media (max-width: 900px) {
  app-home .bdTestiGrid {
    grid-template-columns: 1fr;
  }

  app-home .bdTestiMain {
    padding: 32px 28px;
  }

  app-home .bdTestiQuote {
    font-size: 20px;
  }
}

/* ============================================
   FAQ
   ============================================ */
app-home .bdFaq {
  background: var(--bd-white);
}

app-home .bdFaqWrap {
  max-width: 880px;
  margin: 0 auto;
}

app-home .bdFaqItem {
  border: none !important;
  border-bottom: 1px solid var(--bd-line) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

app-home .bdFaqItem:last-child {
  border-bottom: none !important;
}

app-home .bdFaqItem .accordion-collapse {
  border: none !important;
}

app-home .bdFaqSummary {
  width: 100%;
  padding: 24px 0 !important;
  font-family: var(--bd-serif);
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--bd-navy) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  letter-spacing: -0.005em;
}

app-home .bdFaqSummary:hover {
  color: var(--bd-blue) !important;
}

app-home .bdFaqSummary::after {
  display: none !important;
}

app-home .bdFaqIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bd-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.2s ease;
  color: var(--bd-navy);
  margin-left: auto;
}

app-home .bdFaqSummary[aria-expanded="true"] .bdFaqIcon {
  transform: rotate(45deg);
  background: var(--bd-orange);
  color: white;
}

app-home .bdFaqBody {
  padding: 0 60px 24px 0 !important;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bd-muted);
  margin: 0;
}

/* ============================================
   FINAL CTA
   ============================================ */
app-home .bdCtaFinal {
  padding: 80px 0;
  background: var(--bd-navy-deep);
  position: relative;
  overflow: hidden;
}

app-home .bdCtaCard {
  background: linear-gradient(135deg, var(--bd-navy) 0%, var(--bd-navy-deep) 100%);
  border-radius: var(--bd-radius-lg);
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

app-home .bdCtaCard::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.3), transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
}

app-home .bdCtaCard::after {
  content: "";
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(34, 85, 232, 0.25), transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
}

app-home .bdCtaContent {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}

app-home .bdCtaContent h2 {
  font-family: var(--bd-serif);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  color: white;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

app-home .bdCtaContent h2 em {
  color: var(--bd-orange);
  font-style: italic;
}

app-home .bdCtaContent p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

app-home .bdCtaActions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

app-home .bdCtaActions .bdBtn {
  font-size: 16px;
  padding: 18px 30px;
  justify-content: center;
}

app-home .bdCtaMeta {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  app-home .bdCtaCard {
    padding: 48px 28px;
  }

  app-home .bdCtaContent {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   MOVED FROM bigdot-landingpages-v2.css
   Page-specific styles for: e-payments (bdEpay*), bags-luggage (bdBag*),
   pets (bdPet*). These pages use ONLY these prefixes (self-contained).
   =================================================================== */

/* ============================================================
   EPAYMENTS PAGE — bdEpay* components
   Used by: bigdot-epayments-v2.html
   ============================================================ */

/*  Hero grid overlay  */
.bdEpayGridBg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--bdEpayGridLine) 1px, transparent 1px),
    linear-gradient(90deg, var(--bdEpayGridLine) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] {
  --bdEpayGridLine: rgba(34, 85, 232, 0.04);
}

[data-theme="dark"] {
  --bdEpayGridLine: rgba(0, 212, 255, 0.04);
}

/*  Animated orbs  */
@keyframes bdEpayDrift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(20px, 30px);
  }
}

.bdEpayOrb--3 {
  width: 260px;
  height: 260px;
  top: 30%;
  right: 20%;
}

[data-theme="light"] .bdEpayOrb--1 {
  background: radial-gradient(circle, rgba(34, 85, 232, 0.12), transparent 70%);
}

/*  Gradient text for hero and stats  */

[data-theme="light"] {}

[data-theme="dark"] {}

/* Gold variant for hero title word */

[data-theme="light"] {}

[data-theme="dark"] {}

/*  ZATCA / gold-accent card  */
.bdEpayZatcaCard {
  border-color: rgba(245, 200, 66, 0.3) !important;
  position: relative;
  overflow: hidden;
}

.bdEpayZatcaCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%,
      rgba(245, 200, 66, 0.07),
      transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.bdEpayZatcaCard>* {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .bdEpayZatcaCard {
  background: linear-gradient(135deg,
      #0a1628 0%,
      #0d1f38 50%,
      #0a1a2e 100%) !important;
}

/* Gold badge pill */
.bdEpayBadgeGold {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.4);
  color: #b8902a;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .bdEpayBadgeGold {
  color: #f5c842;
}

/*  Featured pay-mode card  */
.bdEpayPayFeatured {
  border-color: rgba(245, 200, 66, 0.3) !important;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .bdEpayPayFeatured {
  background: linear-gradient(135deg, #0f1e34, #101c30) !important;
}

.bdEpayPayFeatured:hover {
  border-color: rgba(245, 200, 66, 0.55) !important;
}

/* Diagonal ribbon "Popular" */
.bdEpayRibbon {
  position: absolute;
  top: 16px;
  right: -28px;
  background: #f5c842;
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 36px;
  transform: rotate(45deg);
  z-index: 2;
}

/*  Animated status dot  */
@keyframes bdEpayPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

.bdEpayStatusDot {
  flex-shrink: 0;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00e5a0;
  box-shadow: 0 0 8px #00e5a0;
  animation: bdEpayPulse 2s ease infinite;
}

.bdEpayStatusDot--blue {
  background: #4db3ff;
  box-shadow: 0 0 8px #4db3ff;
}

/*  Compliance list  */
.bdEpayComplianceList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bdEpayComplianceList li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--bdText);
  line-height: 1.6;
}

.bdEpayComplianceList li::before {
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: rgba(0, 229, 160, 0.15);
  border: 1px solid rgba(0, 229, 160, 0.3);
  color: #00e5a0;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/*  ZATCA logo block  */
.bdEpayZatcaBlock {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color var(--bdTransition);
}

[data-theme="dark"] .bdEpayZatcaBlock {
  background: rgba(255, 255, 255, 0.04);
}

.bdEpayZatcaBlock__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.bdEpayZatcaBlock__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bdText);
  margin-bottom: 0.2rem;
}

.bdEpayZatcaBlock__sub {
  font-size: 0.8rem;
  color: var(--bdTextMuted);
  margin: 0;
  line-height: 1.4;
}

/*  Hero section override  */
.bdEpayHero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 7rem 0 5rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 767px) {
  .bdEpayOrb--2 {
    width: 240px;
    height: 240px;
  }

  .bdEpayOrb--3 {
    display: none;
  }

  .bdEpayZatcaCard .row {
    flex-direction: column;
  }
}

/* ============================================================
   BIGDOT FOR BAGS & LUGGAGE — Page Specific
   Prefix: bdBag*
   (moved from inline <style> of bags-luggage landing page)
   ============================================================ */

/* Shared nav gets the site navy on this page. */
.BigDotPurchaseHeader.bagsHeader {
  position: relative;
}

.BigDotPurchaseHeader.bagsHeader .header {
  background-color: var(--site-primary-color);
}

/* ---------- NAV ---------- */
.bdBagNav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1rem 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bdBorderSubtle);
}

.bdBagLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bdText);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
}

.bdBagLogo img {
  height: 36px;
  width: auto;
  display: block;
}

.bdBagLogo .dot {
  color: var(--site-quaternary-color);
}

.bdBagNavLink {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bdTextMuted);
  text-decoration: none;
  padding: 0.3rem 1rem;
  transition: color 0.2s;
}

.bdBagNavLink:hover {
  color: var(--bdText);
}

.bdBagNavCta {
  background: var(--site-primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s;
}

.bdBagNavCta:hover {
  background: var(--site-tertiary-color);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- HERO ---------- */
/* Top padding is 5rem, not 8rem: the shared header is position:relative and
   sits in flow, so the hero no longer has to clear a fixed nav. */
.bdBagHero {
  position: relative;
  padding: 5rem 0 5rem;
  overflow: hidden;
}

/* Soft world-map dotted pattern */
.bdBagHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(28, 45, 100, 0.12) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
  pointer-events: none;
}

.bdBagHero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(34, 85, 232, 0.12), transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 75%, rgba(241, 90, 37, 0.08), transparent 60%);
  pointer-events: none;
}

.bdBagEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(34, 85, 232, 0.08);
  border: 1px solid rgba(34, 85, 232, 0.2);
  color: var(--site-tertiary-color);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.bdBagEyebrow svg {
  width: 14px;
  height: 14px;
}

.bdBagHeroTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--bdText);
  margin-bottom: 1.5rem;
}

.bdBagHeroTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-tertiary-color);
  letter-spacing: -0.02em;
}

.bdBagHeroTitle .underline {
  position: relative;
  white-space: nowrap;
}

.bdBagHeroTitle .underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.16em;
  background: rgba(241, 90, 37, 0.4);
  z-index: -1;
}

.bdBagHeroSub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--bdTextMuted);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 2rem;
}

.bdBagHeroCtas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.5rem;
}

.bdBagBtnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--site-primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.95rem 1.8rem;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 25px -8px rgba(28, 45, 100, 0.5);
  transition: all 0.2s;
}

.bdBagBtnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(28, 45, 100, 0.6);
  color: #fff;
  background: #15224d;
}

.bdBagBtnPrimary svg {
  transition: transform 0.2s;
}

.bdBagBtnPrimary:hover svg {
  transform: translateX(3px);
}

.bdBagBtnGhost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--bdText);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95rem 1.5rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid var(--bdBorderStrong);
  transition: all 0.2s;
}

.bdBagBtnGhost:hover {
  border-color: var(--site-primary-color);
  background: rgba(28, 45, 100, 0.04);
  color: var(--bdText);
}

.bdBagHeroProof {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px dashed var(--bdBorder);
}

.bdBagProofItem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bdBagProofItem svg {
  color: var(--site-success-color);
  width: 18px;
  height: 18px;
}

.bdBagProofItem span {
  font-size: 0.82rem;
  color: var(--bdText);
  font-weight: 600;
}

/* ---------- HERO VISUAL: Boarding pass / luggage tag ---------- */
.bdBagHeroVisual {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* Luggage photo in the hero with glow + ring + float effects */
.bdBagHeroPet {
  position: absolute;
  inset: 4%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdBagHeroGlow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
      rgba(241, 90, 37, 0.34) 0%,
      rgba(34, 85, 232, 0.14) 42%,
      transparent 68%);
  filter: blur(14px);
  animation: bdBagGlowPulse 6s ease-in-out infinite;
}

@keyframes bdBagGlowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.bdBagHeroRing {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 2px dashed rgba(28, 45, 100, 0.16);
  animation: bdBagRingSpin 38s linear infinite;
}

.bdBagHeroRing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f15a25;
  box-shadow: 0 0 16px 2px rgba(241, 90, 37, 0.7);
  transform: translateY(-50%);
}

@keyframes bdBagRingSpin {
  to {
    transform: rotate(360deg);
  }
}

.bdBagHeroImg {
  position: relative;
  z-index: 1;
  width: 90%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 45px rgba(28, 45, 100, 0.28)) drop-shadow(0 0 30px rgba(241, 90, 37, 0.22));
  animation: bdBagImgBob 5.5s ease-in-out infinite;
}

@keyframes bdBagImgBob {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

/* Dotted route line behind */
.bdBagRouteLine {
  position: absolute;
  inset: -10% -5% -5% -5%;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.bdBagRouteLine svg {
  width: 100%;
  height: 100%;
}

.bdBagPass {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(28, 45, 100, 0.3);
  transform: rotate(-3deg);
  animation: bdBagTilt 6s ease-in-out infinite;
}

@keyframes bdBagTilt {

  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }

  50% {
    transform: rotate(-2deg) translateY(-8px);
  }
}

.bdBagPassTop {
  background: var(--site-primary-color);
  color: #fff;
  padding: 1.2rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.bdBagPassTop::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background-image: radial-gradient(circle at 8px 8px, var(--site-primary-color) 8px, transparent 8px);
  background-size: 16px 16px;
  background-position: 0 -8px;
}

.bdBagPassBrand .dot {
  color: var(--site-quaternary-color);
}

@keyframes bdBagPlaneMove {

  0%,
  100% {
    transform: translate(-130%, -50%);
  }

  50% {
    transform: translate(30%, -50%);
  }
}

.bdBagPassMetaItem .label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bdTextMuted);
  display: block;
  margin-bottom: 0.2rem;
}

.bdBagPassMetaItem .value {
  font-family: var(--site-tertiary-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bdText);
}

/* Floating stamps */
.bdBagStamp {
  position: absolute;
  background: rgba(241, 90, 37, 0.08);
  border: 2px solid var(--site-quaternary-color);
  color: var(--site-quaternary-color);
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  font-family: var(--site-tertiary-font);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  z-index: 2;
}

.bdBagStamp--1 {
  top: -3%;
  right: -2%;
  transform: rotate(12deg);
  animation: bdBagFloat 5s ease-in-out infinite;
}

.bdBagStamp--2 {
  bottom: -2%;
  left: -4%;
  transform: rotate(-8deg);
  animation: bdBagFloat 5s 1s ease-in-out infinite reverse;
}

@keyframes bdBagFloat {

  0%,
  100% {
    transform: rotate(12deg) translateY(0);
  }

  50% {
    transform: rotate(10deg) translateY(-6px);
  }
}

.bdBagStamp--2 {
  animation-name: bdBagFloat2;
}

@keyframes bdBagFloat2 {

  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }

  50% {
    transform: rotate(-10deg) translateY(-6px);
  }
}

/* ---------- MARQUEE ---------- */
.bdBagMarquee {
  background: var(--site-primary-color);
  color: #fff;
  padding: 1.4rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--bdBorder);
  border-bottom: 1px solid var(--bdBorder);
}

.bdBagMarqueeTrack {
  display: flex;
  gap: 3.5rem;
  animation: bdBagMarquee 35s linear infinite;
  white-space: nowrap;
}

.bdBagMarqueeItem {
  font-family: var(--site-tertiary-font);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.bdBagMarqueeItem em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: #ffb198;
}

.bdBagMarqueeDot {
  width: 8px;
  height: 8px;
  background: var(--site-quaternary-color);
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes bdBagMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- SECTION COMMON ---------- */
.bdBagSection {
  padding: 6rem 0;
  position: relative;
}

.bdBagSectionAlt {
  background: var(--bdBgSection);
}

.bdBagSectionLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-tertiary-color);
  margin-bottom: 1rem;
}

.bdBagSectionLabel::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: var(--site-tertiary-color);
}

.bdBagSectionTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bdText);
  margin-bottom: 1rem;
}

.bdBagSectionTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-tertiary-color);
}

.bdBagSectionTitle em.orange {
  color: var(--site-quaternary-color);
}

.bdBagSectionSub {
  font-size: 1.05rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  max-width: 600px;
}

/* ---------- FEATURE GRID ---------- */
.bdBagFeatureCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bdBagFeatureCard:hover {
  transform: translateY(-6px);
  border-color: var(--site-tertiary-color);
  box-shadow: 0 24px 48px -16px rgba(34, 85, 232, 0.18);
}

.bdBagFeatureNum {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--site-quaternary-color);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.bdBagFeatureIcon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(34, 85, 232, 0.08);
  color: var(--site-tertiary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
}

.bdBagFeatureIcon svg {
  width: 26px;
  height: 26px;
}

.bdBagFeatureCard:nth-child(3n+2) .bdBagFeatureIcon {
  background: rgba(28, 45, 100, 0.08);
  color: var(--site-primary-color);
}

.bdBagFeatureCard:nth-child(3n) .bdBagFeatureIcon {
  background: rgba(241, 90, 37, 0.1);
  color: var(--site-quaternary-color);
}

.bdBagFeatureTitle {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdBagFeatureText {
  font-size: 0.92rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* ---------- USE-CASE STRIP ---------- */
.bdBagUseCard {
  position: relative;
  border-radius: 22px;
  padding: 2rem 1.75rem 1.75rem;
  height: 100%;
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  overflow: hidden;
  transition: all 0.3s ease;
}

.bdBagUseCard:hover {
  transform: translateY(-4px);
  border-color: var(--site-primary-color);
  box-shadow: 0 18px 36px -12px rgba(28, 45, 100, 0.18);
}

.bdBagUseCard::before {
  content: attr(data-num);
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-size: 1rem;
  color: var(--site-quaternary-color);
  letter-spacing: 0.05em;
}

.bdBagUseIcon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--site-tertiary-color), var(--site-primary-color));
  color: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.bdBagUseIcon svg {
  width: 28px;
  height: 28px;
}

.bdBagUseTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--bdText);
  letter-spacing: -0.01em;
}

.bdBagUseText {
  font-size: 0.88rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* ---------- STATS RIBBON ---------- */
.bdBagStat {
  text-align: center;
}

.bdBagStatValue {
  font-family: var(--site-tertiary-font);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--site-primary-color);
  margin-bottom: 0.4rem;
}

.bdBagStatValue em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-quaternary-color);
}

.bdBagStatLabel {
  font-size: 0.85rem;
  color: var(--bdTextMuted);
  font-weight: 500;
}

/* ---------- HOW IT WORKS — destination style ---------- */
.bdBagJourney {
  position: relative;
  padding-top: 2rem;
}

.bdBagJourneyLine {
  position: absolute;
  top: 3.6rem;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
      var(--site-tertiary-color) 0,
      var(--site-tertiary-color) 6px,
      transparent 6px,
      transparent 12px);
  z-index: 0;
}

@media (max-width: 991px) {
  .bdBagJourneyLine {
    display: none;
  }
}

.bdBagStop {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 1rem;
}

.bdBagStopBadge {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--bdBg);
  border: 3px solid var(--site-tertiary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--site-primary-color);
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 6px var(--bdBg);
  position: relative;
}

.bdBagStopBadge::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px dashed var(--site-quaternary-color);
  opacity: 0.4;
  animation: bdBagRotate 20s linear infinite;
}

@keyframes bdBagRotate {
  to {
    transform: rotate(360deg);
  }
}

.bdBagStopTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--bdText);
  letter-spacing: -0.02em;
}

.bdBagStopText {
  color: var(--bdTextMuted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 280px;
  margin: 0 auto;
}

/* ---------- COMPARISON TABLE ---------- */
.bdBagCompare {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.06);
}

.bdBagCompareTable {
  width: 100%;
  border-collapse: collapse;
}

.bdBagCompareTable th,
.bdBagCompareTable td {
  padding: 1rem 1.2rem;
  text-align: center;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--bdBorder);
}

.bdBagCompareTable th:first-child,
.bdBagCompareTable td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--bdText);
  background: rgba(28, 45, 100, 0.02);
}

.bdBagCompareTable thead th {
  font-family: var(--site-tertiary-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: rgba(28, 45, 100, 0.04);
  color: var(--bdText);
  padding: 1.2rem 1rem;
}

.bdBagCompareTable thead th.is-featured {
  background: var(--site-primary-color);
  color: #fff;
  position: relative;
}

.bdBagCompareTable thead th.is-featured small {
  display: block;
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: #ffb198;
  font-size: 0.75rem;
  margin-top: 0.1rem;
  text-transform: none;
  letter-spacing: 0;
}

.bdBagCompareTable td.is-featured {
  background: rgba(28, 45, 100, 0.03);
  font-weight: 600;
  color: var(--site-primary-color);
}

.bdBagCompareCheck {
  color: var(--site-success-color);
  font-weight: 700;
}

.bdBagCompareX {
  color: #c44;
  opacity: 0.5;
}

.bdBagCompareTable tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 767px) {
  .bdBagCompare {
    overflow-x: auto;
  }

  .bdBagCompareTable {
    min-width: 560px;
  }
}

/* ---------- PRICING ---------- */
.bdBagPriceCard {
  background: var(--bdBgCard);
  border: 1.5px solid var(--bdBorder);
  border-radius: 24px;
  padding: 2.2rem;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
}

.bdBagPriceCard:hover {
  transform: translateY(-4px);
  border-color: var(--bdBorderStrong);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}

.bdBagPriceCard--featured {
  border-color: var(--site-primary-color);
  background: linear-gradient(180deg, rgba(28, 45, 100, 0.04), var(--bdBgCard));
  box-shadow: 0 24px 48px -16px rgba(28, 45, 100, 0.18);
}

.bdBagPriceBadge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--site-quaternary-color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1.2rem;
  border-radius: 100px;
  white-space: nowrap;
}

.bdBagPriceTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bdText);
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.bdBagPriceTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-tertiary-color);
  margin-left: 0.3rem;
}

.bdBagPriceTag {
  font-family: var(--site-tertiary-font);
  font-size: 3rem;
  font-weight: 800;
  color: var(--bdText);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 1.2rem 0 0.4rem;
}

.bdBagPriceTag .currency {
  font-size: 1.4rem;
  vertical-align: top;
  margin-right: 0.15em;
  color: var(--bdTextMuted);
}

.bdBagPriceTag .strike {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: var(--site-quaternary-color);
  color: var(--bdTextMuted);
  margin-left: 0.5rem;
}

.bdBagPriceMeta {
  font-size: 0.85rem;
  color: var(--bdTextMuted);
  margin-bottom: 1.5rem;
}

.bdBagPriceList {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
}

.bdBagPriceList li {
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--bdText);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.bdBagPriceList li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--site-success-color);
}

.bdBagPriceBtn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.95rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
  border: 1.5px solid var(--bdBorderStrong);
  color: var(--bdText);
  background: transparent;
}

.bdBagPriceBtn:hover {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
  color: #fff;
}

.bdBagPriceCard--featured .bdBagPriceBtn {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.bdBagPriceCard--featured .bdBagPriceBtn:hover {
  background: #15224d;
  border-color: #15224d;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(28, 45, 100, 0.5);
  color: #fff;
}

/* ---------- TESTIMONIALS ---------- */
.bdBagTesti {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 22px;
  padding: 2rem;
  height: 100%;
  position: relative;
}

.bdBagTesti::before {
  content: "\201C";
  position: absolute;
  top: 0.6rem;
  right: 1.6rem;
  font-family: var(--site-secondary-font);
  font-size: 5rem;
  line-height: 1;
  color: rgba(34, 85, 232, 0.15);
}

.bdBagTestiTrip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--site-tertiary-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-tertiary-color);
  background: rgba(34, 85, 232, 0.08);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.bdBagTestiText {
  font-family: var(--site-secondary-font);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--bdText);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.bdBagTestiAuthor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.bdBagTestiAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--site-tertiary-color), var(--site-primary-color));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.bdBagTestiName {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bdText);
  line-height: 1.2;
}

.bdBagTestiRole {
  font-size: 0.78rem;
  color: var(--bdTextMuted);
  margin-top: 2px;
}

.bdBagStars {
  color: var(--site-quaternary-color);
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* ---------- FAQ ---------- */
.bdBagFaq {
  border-top: 1px solid var(--bdBorder);
}

.bdBagFaqItem {
  border-bottom: 1px solid var(--bdBorder);
}

.bdBagFaqQ {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.5rem 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--site-tertiary-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bdText);
  cursor: pointer;
  letter-spacing: -0.01em;
}

.bdBagFaqQ:hover {
  color: var(--site-tertiary-color);
}

.bdBagFaqPlus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(34, 85, 232, 0.1);
  color: var(--site-tertiary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  transition: transform 0.3s;
}

.bdBagFaqItem.is-open .bdBagFaqPlus {
  transform: rotate(45deg);
}

.bdBagFaqA {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.bdBagFaqA p {
  padding: 0 0 1.5rem;
  color: var(--bdTextMuted);
  line-height: 1.7;
  margin: 0;
  font-size: 0.95rem;
  max-width: 700px;
}

.bdBagFaqItem.is-open .bdBagFaqA {
  max-height: 400px;
}

/* ---------- FINAL CTA ---------- */
.bdBagFinalCta {
  background: var(--site-primary-color);
  border-radius: 32px;
  padding: 4.5rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.bdBagFinalCta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(34, 85, 232, 0.35), transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(241, 90, 37, 0.25), transparent 60%);
  pointer-events: none;
}

/* dotted route across CTA */
.bdBagFinalCta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 30px 30px;
  pointer-events: none;
}

.bdBagFinalCta>* {
  position: relative;
  z-index: 1;
}

.bdBagFinalCta h2 {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  color: #fff;
}

.bdBagFinalCta h2 em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: #ffb198;
}

.bdBagFinalCta p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  max-width: 540px;
  margin: 0 auto 2rem;
}

.bdBagFinalBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--site-quaternary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.95rem 1.8rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
}

.bdBagFinalBtn:hover {
  background: #d44318;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(241, 90, 37, 0.5);
}

/* ---------- FOOTER ---------- */
.bdBagFooter {
  background: #0d1530;
  color: rgba(255, 255, 255, 0.6);
  padding: 4rem 0 2rem;
}

.bdBagFooter h6 {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-family: var(--site-primary-font);
}

.bdBagFooterLink {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.92rem;
  display: block;
  padding: 0.3rem 0;
  transition: color 0.2s;
}

.bdBagFooterLink:hover {
  color: var(--site-quaternary-color);
}

.bdBagFooterLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  display: inline-block;
}

.bdBagFooterLogo img {
  height: 40px;
  width: auto;
  display: block;
}

.bdBagFooterLogo .dot {
  color: var(--site-quaternary-color);
}

.bdBagFooterBottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 3rem;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
}

.bdBagSocial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-right: 0.4rem;
  transition: all 0.2s;
}

.bdBagSocial:hover {
  background: var(--site-tertiary-color);
  color: #fff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .bdBagHero {
    padding: 3rem 0;
  }

  .bdBagSection {
    padding: 4rem 0;
  }

  .bdBagFinalCta {
    padding: 3rem 1.5rem;
    border-radius: 24px;
  }

  .bdBagHeroVisual {
    margin-top: 2rem;
    max-width: 460px;
  }

  .bdBagNavMenu {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .bdBagHeroCtas {
    flex-direction: column;
    align-items: stretch;
  }

  .bdBagBtnPrimary,
  .bdBagBtnGhost {
    justify-content: center;
  }

  .bdBagStamp--1 {
    right: 4%;
    top: 2%;
  }

  .bdBagStamp--2 {
    left: 4%;
    bottom: 2%;
  }

  .bdBagPassBody {
    grid-template-columns: 1fr;
  }

  .bdBagPassMeta {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   BIGDOT PET TRACKER — Page Specific
   Prefix: bdPet*
   (moved from inline <style> of pets landing page)
   ============================================================ */

/* Shared nav gets the site navy on this page. */
.BigDotPurchaseHeader.petsHeader {
  position: relative;
}

.BigDotPurchaseHeader.petsHeader .header {
  background-color: var(--site-primary-color);
}

/* Decorative dotted paw pattern, used as soft background */
.bdPetPawBg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px,
      rgba(28, 45, 100, 0.08) 1px,
      transparent 0);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- HERO ---------- */
/* Top padding is 5rem, not 8rem: the shared header is position:relative and
   sits in flow, so the hero no longer has to clear a fixed nav. */
.bdPetHero {
  position: relative;
  padding: 5rem 0 5rem;
  overflow: hidden;
}

.bdPetHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%,
      rgba(241, 90, 37, 0.1) 0%,
      transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%,
      rgba(34, 85, 232, 0.08) 0%,
      transparent 60%);
  pointer-events: none;
}

.bdPetEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(241, 90, 37, 0.08);
  border: 1px solid rgba(241, 90, 37, 0.2);
  color: var(--site-quaternary-color);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.bdPetEyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--site-quaternary-color);
  border-radius: 50%;
  animation: bdPetPulse 1.6s infinite;
}

@keyframes bdPetPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

.bdPetHeroTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--bdText);
  margin-bottom: 1.5rem;
}

.bdPetHeroTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-quaternary-color);
  letter-spacing: -0.02em;
}

.bdPetHeroTitle .squiggle {
  position: relative;
  display: inline-block;
}

.bdPetHeroTitle .squiggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 0.18em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'><path d='M0 6 Q 12.5 0 25 6 T 50 6 T 75 6 T 100 6' fill='none' stroke='%23f15a25' stroke-width='3' stroke-linecap='round'/></svg>") repeat-x;
  background-size: auto 100%;
}

.bdPetHeroSub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--bdTextMuted);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 2rem;
}

.bdPetHeroCtas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.5rem;
}

.bdPetBtnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--site-quaternary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.95rem 1.8rem;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 25px -8px rgba(241, 90, 37, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.bdPetBtnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(241, 90, 37, 0.55);
  color: #fff;
}

.bdPetBtnPrimary svg {
  transition: transform 0.2s;
}

.bdPetBtnPrimary:hover svg {
  transform: translateX(3px);
}

.bdPetBtnGhost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--bdText);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95rem 1.5rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid var(--bdBorderStrong);
  transition: all 0.2s;
}

.bdPetBtnGhost:hover {
  border-color: var(--site-primary-color);
  background: rgba(28, 45, 100, 0.04);
  color: var(--bdText);
}

.bdPetHeroMeta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.bdPetAvatarStack {
  display: flex;
}

.bdPetAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--bdBg);
  margin-left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.bdPetAvatar:first-child {
  margin-left: 0;
}

.bdPetAvatar:nth-child(1) {
  background: linear-gradient(135deg, #f15a25, #f59f7c);
}

.bdPetAvatar:nth-child(2) {
  background: linear-gradient(135deg, #2255e8, #6e8df5);
}

.bdPetAvatar:nth-child(3) {
  background: linear-gradient(135deg, #1c2d64, #4a5a8f);
}

.bdPetAvatar:nth-child(4) {
  background: linear-gradient(135deg, #16a34a, #4ec172);
}

.bdPetStars {
  color: var(--site-quaternary-color);
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* ---------- HERO VISUAL: tag mockup ---------- */
.bdPetHeroVisual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  margin: 0 auto;
}

.bdPetVisualBg {
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 50% 50%,
      rgba(241, 90, 37, 0.18) 0%,
      rgba(34, 85, 232, 0.08) 45%,
      transparent 70%);
  border-radius: 50%;
  animation: bdPetSpin 30s linear infinite;
}

@keyframes bdPetSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Dog photo in the hero (replaces the standalone tag mockup) */
.bdPetHeroPet {
  position: absolute;
  inset: 4%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Warm radial glow behind the dog */
.bdPetHeroGlow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
      rgba(241, 90, 37, 0.38) 0%,
      rgba(241, 90, 37, 0.14) 40%,
      transparent 68%);
  filter: blur(14px);
  animation: bdPetGlowPulse 6s ease-in-out infinite;
}

@keyframes bdPetGlowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Slowly rotating dashed accent ring */
.bdPetHeroRing {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  animation: bdPetSpin 38s linear infinite;
}

.bdPetHeroRing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f15a25;
  box-shadow: 0 0 16px 2px rgba(241, 90, 37, 0.7);
  transform: translateY(-50%);
}

/* The dog image itself — floats gently with a soft shadow */
.bdPetHeroImg {
  position: relative;
  z-index: 1;
  width: 92%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 45px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 30px rgba(241, 90, 37, 0.25));
  animation: bdPetBob 5.5s ease-in-out infinite;
}

@keyframes bdPetBob {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

.bdPetTag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: 58%;
  aspect-ratio: 1 / 1.25;
  background: linear-gradient(135deg, #f15a25, #d44318);
  border-radius: 28px;
  box-shadow:
    0 30px 60px -20px rgba(241, 90, 37, 0.45),
    0 0 0 8px rgba(255, 255, 255, 0.9),
    0 0 0 9px rgba(28, 45, 100, 0.1);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: bdPetFloat 5s ease-in-out infinite;
}

@keyframes bdPetFloat {

  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-6deg);
  }

  50% {
    transform: translate(-50%, -53%) rotate(-4deg);
  }
}

/* Floating accent chips around the tag */
.bdPetChip {
  position: absolute;
  z-index: 2;
  background: #fff;
  border-radius: 16px;
  padding: 0.65rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--site-primary-color);
  box-shadow: 0 14px 30px -8px rgba(28, 45, 100, 0.18);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--bdBorder);
}

.bdPetChip svg {
  width: 18px;
  height: 18px;
}

.bdPetChip--1 {
  top: 12%;
  left: 0;
  animation: bdPetFloat2 4s ease-in-out infinite;
}

.bdPetChip--2 {
  top: 25%;
  right: -2%;
  animation: bdPetFloat2 4s 0.5s ease-in-out infinite reverse;
}

.bdPetChip--3 {
  bottom: 18%;
  left: 6%;
  animation: bdPetFloat2 4s 1s ease-in-out infinite;
}

.bdPetChip--4 {
  bottom: 8%;
  right: 4%;
  animation: bdPetFloat2 4s 1.5s ease-in-out infinite reverse;
}

@keyframes bdPetFloat2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ---------- MARQUEE TRUST STRIP ---------- */
.bdPetMarquee {
  background: var(--site-primary-color);
  color: #fff;
  padding: 1.4rem 0;
  overflow: hidden;
  position: relative;
}

.bdPetMarqueeTrack {
  display: flex;
  gap: 3.5rem;
  animation: bdPetMarquee 32s linear infinite;
  white-space: nowrap;
}

.bdPetMarqueeItem {
  font-family: var(--site-tertiary-font);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.bdPetMarqueeItem em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: #ffd9c8;
}

.bdPetMarqueeDot {
  width: 8px;
  height: 8px;
  background: var(--site-quaternary-color);
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes bdPetMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- SECTION COMMON ---------- */
.bdPetSection {
  padding: 6rem 0;
  position: relative;
}

.bdPetSectionAlt {
  background: var(--bdBgSection);
}

.bdPetSectionLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-quaternary-color);
  margin-bottom: 1rem;
}

.bdPetSectionLabel::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: var(--site-quaternary-color);
}

.bdPetSectionTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bdText);
  margin-bottom: 1rem;
}

.bdPetSectionTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-quaternary-color);
}

.bdPetSectionSub {
  font-size: 1.05rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  max-width: 600px;
}

/* ---------- FEATURE GRID ---------- */
.bdPetFeatureCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bdPetFeatureCard:hover {
  transform: translateY(-6px);
  border-color: var(--site-quaternary-color);
  box-shadow: 0 24px 48px -16px rgba(241, 90, 37, 0.18);
}

.bdPetFeatureCard::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.bdPetFeatureCard:hover::after {
  opacity: 1;
}

.bdPetFeatureIcon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(241, 90, 37, 0.1);
  color: var(--site-quaternary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
}

.bdPetFeatureIcon svg {
  width: 26px;
  height: 26px;
}

.bdPetFeatureCard:nth-child(3n+2) .bdPetFeatureIcon {
  background: rgba(34, 85, 232, 0.1);
  color: var(--site-tertiary-color);
}

.bdPetFeatureCard:nth-child(3n) .bdPetFeatureIcon {
  background: rgba(28, 45, 100, 0.08);
  color: var(--site-primary-color);
}

.bdPetFeatureTitle {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPetFeatureText {
  font-size: 0.92rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* ---------- HOW IT WORKS ---------- */
.bdPetStep {
  position: relative;
  padding: 0 1rem;
}

.bdPetStepNum {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-size: 5rem;
  font-weight: 500;
  color: var(--site-quaternary-color);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.bdPetStepTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--bdText);
  letter-spacing: -0.02em;
}

.bdPetStepText {
  color: var(--bdTextMuted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.bdPetStepConnector {
  display: none;
}

@media (min-width: 992px) {
  .bdPetStepConnector {
    display: block;
    position: absolute;
    top: 2.2rem;
    right: -16%;
    width: 30%;
    height: 30px;
    color: var(--bdBorderStrong);
  }
}

/* ---------- PRODUCT SHOWCASE ---------- */
.bdPetShowcase {
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      #2a3a7a 100%);
  border-radius: 32px;
  padding: 4rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.bdPetShowcase::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.25), transparent 60%);
  pointer-events: none;
}

.bdPetShowcase::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.bdPetShowcase .bdPetSectionLabel {
  color: #ffb198;
}

.bdPetShowcase .bdPetSectionLabel::before {
  background: #ffb198;
}

.bdPetShowcase h2 {
  color: #fff;
}

.bdPetShowcase h2 em {
  color: #ffb198;
}

.bdPetShowcase p {
  color: rgba(255, 255, 255, 0.75);
}

.bdPetSpecRow {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bdPetSpecRow:last-child {
  border-bottom: none;
}

.bdPetSpecCheck {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(241, 90, 37, 0.2);
  color: #ffb198;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdPetSpecRow span {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.bdPetShowcaseVisual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 380px;
  margin: 0 auto;
}

/* ---------- PRICING ---------- */
.bdPetPriceCard {
  background: var(--bdBgCard);
  border: 1.5px solid var(--bdBorder);
  border-radius: 24px;
  padding: 2.2rem;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
}

.bdPetPriceCard:hover {
  transform: translateY(-4px);
  border-color: var(--bdBorderStrong);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}

.bdPetPriceCard--featured {
  border-color: var(--site-quaternary-color);
  background: linear-gradient(180deg,
      rgba(241, 90, 37, 0.04),
      var(--bdBgCard));
  box-shadow: 0 24px 48px -16px rgba(241, 90, 37, 0.18);
}

.bdPetPriceBadge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--site-quaternary-color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1.2rem;
  border-radius: 100px;
  white-space: nowrap;
}

.bdPetPriceTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bdText);
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.bdPetPriceTag {
  font-family: var(--site-tertiary-font);
  font-size: 3rem;
  font-weight: 800;
  color: var(--bdText);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 1.2rem 0 0.4rem;
}

.bdPetPriceTag .currency {
  font-size: 1.4rem;
  vertical-align: top;
  margin-right: 0.15em;
  color: var(--bdTextMuted);
}

.bdPetPriceTag .strike {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: var(--site-quaternary-color);
  color: var(--bdTextMuted);
  margin-left: 0.5rem;
}

.bdPetPriceMeta {
  font-size: 0.85rem;
  color: var(--bdTextMuted);
  margin-bottom: 1.5rem;
}

.bdPetPriceList {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
}

.bdPetPriceList li {
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--bdText);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.bdPetPriceList li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--site-success-color);
}

.bdPetPriceBtn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.95rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
  border: 1.5px solid var(--bdBorderStrong);
  color: var(--bdText);
  background: transparent;
}

.bdPetPriceBtn:hover {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.bdPetPriceCard--featured .bdPetPriceBtn {
  background: var(--site-quaternary-color);
  border-color: var(--site-quaternary-color);
  color: #fff;
}

.bdPetPriceCard--featured .bdPetPriceBtn:hover {
  background: #d44318;
  border-color: #d44318;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(241, 90, 37, 0.45);
  color: #fff;
}

/* ---------- TESTIMONIALS ---------- */
.bdPetTestimonial {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 22px;
  padding: 2rem;
  height: 100%;
  position: relative;
}

.bdPetTestimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.6rem;
  right: 1.6rem;
  font-family: var(--site-secondary-font);
  font-size: 5rem;
  line-height: 1;
  color: rgba(241, 90, 37, 0.16);
}

.bdPetTestiText {
  font-family: var(--site-secondary-font);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--bdText);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.bdPetTestiAuthor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.bdPetTestiAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f15a25, #1c2d64);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.bdPetTestiName {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bdText);
  line-height: 1.2;
}

.bdPetTestiRole {
  font-size: 0.78rem;
  color: var(--bdTextMuted);
  margin-top: 2px;
}

/* ---------- FAQ ---------- */
.bdPetFaq {
  border-top: 1px solid var(--bdBorder);
}

.bdPetFaqItem {
  border-bottom: 1px solid var(--bdBorder);
}

.bdPetFaqQ {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.5rem 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--site-tertiary-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bdText);
  cursor: pointer;
  letter-spacing: -0.01em;
}

.bdPetFaqQ:hover {
  color: var(--site-quaternary-color);
}

.bdPetFaqPlus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(241, 90, 37, 0.1);
  color: var(--site-quaternary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  transition: transform 0.3s;
}

.bdPetFaqItem.is-open .bdPetFaqPlus {
  transform: rotate(45deg);
}

.bdPetFaqA {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.bdPetFaqA p {
  padding: 0 0 1.5rem;
  color: var(--bdTextMuted);
  line-height: 1.7;
  margin: 0;
  font-size: 0.95rem;
  max-width: 700px;
}

.bdPetFaqItem.is-open .bdPetFaqA {
  max-height: 400px;
}

/* ---------- FINAL CTA ---------- */
.bdPetFinalCta {
  background: var(--site-primary-color);
  border-radius: 32px;
  padding: 4.5rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.bdPetFinalCta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(241, 90, 37, 0.25), transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(34, 85, 232, 0.3), transparent 60%);
  pointer-events: none;
}

.bdPetFinalCta>* {
  position: relative;
  z-index: 1;
}

.bdPetFinalCta h2 {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  color: #fff;
}

.bdPetFinalCta h2 em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: #ffb198;
}

.bdPetFinalCta p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  max-width: 540px;
  margin: 0 auto 2rem;
}

/* ---------- FOOTER ---------- */
.bdPetFooter {
  background: #0d1530;
  color: rgba(255, 255, 255, 0.6);
  padding: 4rem 0 2rem;
}

.bdPetFooter h6 {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-family: var(--site-primary-font);
}

.bdPetFooterLink {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.92rem;
  display: block;
  padding: 0.3rem 0;
  transition: color 0.2s;
}

.bdPetFooterLink:hover {
  color: #ffb198;
}

.bdPetFooterLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  display: inline-block;
}

.bdPetFooterLogo img {
  height: 40px;
  width: auto;
  display: block;
}

.bdPetFooterLogo .dot {
  color: var(--site-quaternary-color);
}

.bdPetFooterBottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 3rem;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
}

.bdPetSocial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-right: 0.4rem;
  transition: all 0.2s;
}

.bdPetSocial:hover {
  background: var(--site-quaternary-color);
  color: #fff;
}

/* ---------- NAVIGATION ---------- */
.bdPetNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bdBorderSubtle);
  padding: 1rem 0;
}

.bdPetLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bdText);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
}

.bdPetLogo img {
  height: 36px;
  width: auto;
  display: block;
}

.bdPetLogo .dot {
  color: var(--site-quaternary-color);
  display: inline-block;
  animation: bdPetPulse 2.4s infinite;
}

.bdPetNavLink {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bdTextMuted);
  text-decoration: none;
  padding: 0.3rem 1rem;
  transition: color 0.2s;
}

.bdPetNavLink:hover {
  color: var(--bdText);
}

.bdPetNavCta {
  background: var(--site-primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bdPetNavCta:hover {
  background: var(--site-quaternary-color);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- STATS RIBBON ---------- */
.bdPetStat {
  text-align: center;
}

.bdPetStatValue {
  font-family: var(--site-tertiary-font);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--site-primary-color);
  margin-bottom: 0.4rem;
}

.bdPetStatValue em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--site-quaternary-color);
}

.bdPetStatLabel {
  font-size: 0.85rem;
  color: var(--bdTextMuted);
  font-weight: 500;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .bdPetHero {
    padding: 3rem 0;
  }

  .bdPetSection {
    padding: 4rem 0;
  }

  .bdPetShowcase {
    padding: 2.5rem 1.75rem;
    border-radius: 24px;
  }

  .bdPetFinalCta {
    padding: 3rem 1.5rem;
    border-radius: 24px;
  }

  .bdPetHeroVisual {
    margin-top: 2rem;
    max-width: 420px;
  }

  .bdPetNavMenu {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .bdPetHeroCtas {
    flex-direction: column;
    align-items: stretch;
  }

  .bdPetBtnPrimary,
  .bdPetBtnGhost {
    justify-content: center;
  }

  .bdPetChip--1 {
    top: 4%;
    left: -4%;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
  }

  .bdPetChip--2 {
    top: 18%;
    right: -6%;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
  }

  .bdPetChip--3 {
    bottom: 22%;
    left: -4%;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
  }

  .bdPetChip--4 {
    bottom: 4%;
    right: -4%;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
  }

  .bdPetShowcase {
    padding: 2rem 1.25rem;
  }
}

/* ===================================================================
   MOVED FROM bigdot-landingpages-v2.css
   Portfolio pages design system: student-portfolio (+onboarding),
   professional-portfolio (+onboarding), shared/professional-portfolio.
   Prefixes: bdPages* / bdStud* / bdPro* (+ their keyframes).
   Shared :root tokens, global base, @import and generic bd* utilities
   intentionally remain in landingpages-v2 (used site-wide).
   =================================================================== */

.bdPagesHeroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      var(--bdHeroBg1) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%,
      var(--bdHeroBg2) 0%,
      transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%,
      var(--bdHeroBg3) 0%,
      transparent 60%);
}

.bdPagesMarqueeWrap {
  background: var(--bdMarqueeBg);
  border-top: 1px solid var(--bdBorder);
  border-bottom: 1px solid var(--bdBorder);
}

.bdPagesMarqueeDot {
  background: var(--bdMarqueeDot);
}

.bdPagesSolutionSection {
  background: var(--bdSectionAltBg);
  border-top-color: var(--bdSectionAltBorder);
  border-bottom-color: var(--bdSectionAltBorder);
}

.bdPagesSocialSection {
  background: var(--bdSocialSectionBg);
}

.bdPagesFeaturesSection {
  background: var(--bdFeatureSectionBg);
}

.bdPagesStepsLine {
  background: var(--bdStepLineGrad);
}

.bdPagesThemeToggle {
  background: var(--bdToggleBg);
  border-color: var(--bdBorder);
}

.bdPagesThemeToggle__knob {
  background: var(--bdToggleKnob);
}

[data-theme="dark"] .bdPagesThemeToggle__knob {
  background: var(--bdToggleKnobActive);
}

.bdPagesNavCta:hover {
  box-shadow: 0 0 24px var(--bdNavCtaHoverShadow);
}

.bdPagesLogoImg {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bdPagesLogoImg__light,
.bdPagesLogoImg__dark {
  height: 32px;
  width: auto;
  display: block;
  transition: opacity 0.2s;
}

[data-theme="light"] .bdPagesLogoImg__dark {
  display: none;
}

[data-theme="light"] .bdPagesLogoImg__light {
  display: block;
}

[data-theme="dark"] .bdPagesLogoImg__light {
  display: none;
}

[data-theme="dark"] .bdPagesLogoImg__dark {
  display: block;
}

.bdPagesNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bdNavBg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdBorder);
  padding: 1rem 0;
  transition:
    background var(--bdTransition),
    border-color var(--bdTransition);
}

.bdPagesLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bdText);
  text-decoration: none;
}

[data-theme="light"] .bdPagesLogo__dot {
  color: var(--site-quaternary-color);
}

.bdPagesNavCta {
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
  display: block !important;
}

.bdPagesNavCta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(200, 241, 53, 0.35);
  color: var(--bdCtaText);
}

[data-theme="light"] .bdPagesNavCta:hover {
  box-shadow: 0 0 24px rgba(241, 90, 37, 0.35);
}

.bdPagesNavLink {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bdMuted);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.bdPagesNavLink:hover {
  color: var(--bdText);
}

.bdPagesThemeToggle {
  width: 48px;
  height: 26px;
  background: var(--bdBorder);
  border: 1.5px solid var(--bdBorder);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}

.bdPagesThemeToggle:hover {
  border-color: var(--bdAccent);
}

[data-theme="light"] .bdPagesThemeToggle:hover {
  border-color: var(--site-tertiary-color);
}

.bdPagesThemeToggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bdText);
  position: absolute;
  top: 2px;
  left: 2px;
  transition:
    transform 0.3s,
    background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

[data-theme="dark"] .bdPagesThemeToggle__knob {
  transform: translateX(22px);
  background: var(--bdAccent);
}

.bdPagesThemeToggle__icon {
  line-height: 1;
}

.bdPagesHero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1rem 4rem;
  position: relative;
  overflow: hidden;
}

.bdPagesHeroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(34, 85, 232, 0.08) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%,
      rgba(28, 45, 100, 0.06) 0%,
      transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%,
      rgba(241, 90, 37, 0.05) 0%,
      transparent 60%);
}

.bdPagesHeroBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 85, 232, 0.08);
  border: 1px solid rgba(34, 85, 232, 0.2);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--site-tertiary-color);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  animation: bdFadeUp 0.8s ease both;
}

[data-theme="dark"] .bdPagesHeroBadge {
  background: rgba(200, 241, 53, 0.1);
  border-color: rgba(200, 241, 53, 0.25);
  color: #c8f135;
}

.bdPagesHeroTitle {
  font-family: var(--site-tertiary-font);
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--bdText);
  margin-bottom: 1.5rem;
  animation: bdFadeUp 0.8s 0.1s ease both;
}

.bdPagesHeroTitle__accent {
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesHeroTitle__accent {
  color: #c8f135;
}

.bdPagesHeroTitle__strike {
  position: relative;
  color: var(--bdTextMuted);
  text-decoration: line-through;
  text-decoration-color: var(--site-quaternary-color);
  text-decoration-thickness: 3px;
}

[data-theme="dark"] .bdPagesHeroTitle__strike {
  text-decoration-color: #ff3d8f;
}

.bdPagesHeroSub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--bdTextMuted);
  max-width: 540px;
  line-height: 1.65;
  margin: 0 auto 2.5rem;
  animation: bdFadeUp 0.8s 0.2s ease both;
}

.bdPagesHeroActions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: bdFadeUp 0.8s 0.3s ease both;
}

.bdPagesBtnPrimary {
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 2.2rem;
  border-radius: 100px;
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bdPagesBtnPrimary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.bdPagesBtnPrimary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px rgba(241, 90, 37, 0.35);
  color: var(--bdCtaText);
}

[data-theme="dark"] .bdPagesBtnPrimary:hover {
  box-shadow: 0 8px 32px rgba(200, 241, 53, 0.35);
}

.bdPagesBtnPrimary:hover::after {
  opacity: 1;
}

.bdPagesBtnGhost {
  color: var(--bdText);
  font-family: var(--site-primary-font);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2.2rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid var(--bdBorder);
  transition:
    border-color 0.2s,
    background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bdPagesBtnGhost:hover {
  border-color: var(--bdAccentAlt);
  background: rgba(34, 85, 232, 0.06);
  color: var(--bdText);
}

[data-theme="dark"] .bdPagesBtnGhost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.bdPagesHeroCards {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 260px;
  margin: 3rem auto 0;
  animation: bdFadeUp 0.8s 0.4s ease both;
}

.bdPagesProfileCard {
  position: absolute;
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 20px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .bdPagesProfileCard {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.bdPagesProfileCard--main {
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  animation: bdFloat 5s ease-in-out infinite;
}

.bdPagesProfileCard--left {
  left: 5%;
  top: 40px;
  width: 200px;
  animation: bdFloat 5s 1s ease-in-out infinite;
  opacity: 0.8;
}

.bdPagesProfileCard--right {
  right: 5%;
  top: 40px;
  width: 200px;
  animation: bdFloat 5s 2s ease-in-out infinite;
  opacity: 0.8;
}

.bdPagesCardAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff;
  flex-shrink: 0;
}

.bdPagesCardName {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bdText);
}

.bdPagesCardMeta {
  font-size: 0.78rem;
  color: var(--bdTextMuted);
}

.bdPagesCardTags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bdPagesTag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: rgba(28, 45, 100, 0.07);
  color: var(--bdTextMuted);
}

[data-theme="dark"] .bdPagesTag {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
}

.bdPagesTag--accent {
  background: rgba(34, 85, 232, 0.1);
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesTag--accent {
  background: rgba(200, 241, 53, 0.15);
  color: #c8f135;
}

.bdPagesCardStat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bdTextMuted);
}

.bdPagesCardStatDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bdPagesCardAlert {
  background: rgba(34, 85, 232, 0.08);
  border: 1px solid rgba(34, 85, 232, 0.15);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesCardAlert {
  background: rgba(200, 241, 53, 0.08);
  border-color: rgba(200, 241, 53, 0.2);
  color: #c8f135;
}

.bdPagesMarqueeWrap {
  overflow: hidden;
  padding: 1.25rem 0;
  background: rgba(28, 45, 100, 0.03);
  border-top: 1px solid var(--bdBorder);
  border-bottom: 1px solid var(--bdBorder);
}

.bdPagesMarqueeTrack {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: bdMarquee 28s linear infinite;
}

.bdPagesMarqueeItem {
  font-family: var(--site-tertiary-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bdTextMuted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bdPagesMarqueeDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  flex-shrink: 0;
}

.bdPagesSection {
  padding: 5rem 0;
}

.bdPagesSectionLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-tertiary-color);
  margin-bottom: 0.875rem;
  display: block;
}

[data-theme="dark"] .bdPagesSectionLabel {
  color: #c8f135;
}

.bdPagesSectionTitle {
  font-family: var(--site-tertiary-font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bdText);
}

.bdPagesSectionTitle__colored {
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesSectionTitle__colored {
  color: #c8f135;
}

.bdPagesSectionTitle__pink {
  color: var(--site-quaternary-color);
}

[data-theme="dark"] .bdPagesSectionTitle__pink {
  color: #ff3d8f;
}

.bdPagesProblemSection {
  background: var(--bdBg);
}

.bdPagesProblemCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--bdTransition),
    transform var(--bdTransition),
    box-shadow var(--bdTransition);
  height: 100%;
}

.bdPagesProblemCard:hover {
  border-color: var(--site-quaternary-color);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(241, 90, 37, 0.1);
}

[data-theme="dark"] .bdPagesProblemCard:hover {
  border-color: rgba(255, 61, 143, 0.35);
  box-shadow: none;
}

.bdPagesProblemCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--site-quaternary-color);
  opacity: 0;
  transition: opacity var(--bdTransition);
}

[data-theme="dark"] .bdPagesProblemCard::before {
  background: #ff3d8f;
}

.bdPagesProblemCard:hover::before {
  opacity: 1;
}

.bdPagesProblemNum {
  font-family: var(--site-secondary-font);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(28, 45, 100, 0.07);
  line-height: 1;
  margin-bottom: 1rem;
}

[data-theme="dark"] .bdPagesProblemNum {
  color: rgba(255, 255, 255, 0.06);
}

.bdPagesProblemCard__title {
  font-family: var(--site-primary-font);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--bdText);
}

.bdPagesProblemCard__text {
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

.bdPagesSolutionSection {
  background: rgba(34, 85, 232, 0.03);
  border-top: 1px solid rgba(34, 85, 232, 0.08);
  border-bottom: 1px solid rgba(34, 85, 232, 0.08);
}

.bdPagesSolutionVisual {
  background: var(--bdBgCard);
  border: 1px solid rgba(34, 85, 232, 0.15);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 0 60px rgba(34, 85, 232, 0.06);
  position: relative;
}

[data-theme="dark"] .bdPagesSolutionVisual {
  border-color: rgba(200, 241, 53, 0.15);
  box-shadow: 0 0 60px rgba(200, 241, 53, 0.05);
}

.bdPagesProfilePreview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bdPagesPpHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bdBorder);
}

.bdPagesPpAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--site-tertiary-color),
      var(--site-primary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  flex-shrink: 0;
}

[data-theme="dark"] .bdPagesPpAvatar {
  background: linear-gradient(135deg, #c8f135, #1a1aff);
  color: #0a0a0f;
}

.bdPagesPpName {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bdText);
}

.bdPagesPpMeta {
  font-size: 0.8rem;
  color: var(--bdTextMuted);
}

.bdPagesPpSkills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bdPagesPpSkill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: rgba(34, 85, 232, 0.08);
  color: var(--site-tertiary-color);
  border: 1px solid rgba(34, 85, 232, 0.18);
}

[data-theme="dark"] .bdPagesPpSkill {
  background: rgba(200, 241, 53, 0.1);
  color: #c8f135;
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesPpProjects {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bdPagesPpProject {
  background: rgba(28, 45, 100, 0.04);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

[data-theme="dark"] .bdPagesPpProject {
  background: rgba(255, 255, 255, 0.04);
}

.bdPagesPpProjectDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  flex-shrink: 0;
  margin-top: 4px;
}

[data-theme="dark"] .bdPagesPpProjectDot {
  background: #c8f135;
}

.bdPagesPpProjectName {
  font-weight: 600;
  color: var(--bdText);
}

.bdPagesPpProjectType {
  color: var(--bdTextMuted);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.bdPagesPpQr {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(28, 45, 100, 0.03);
  border: 1px solid var(--bdBorder);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--bdTextMuted);
}

[data-theme="dark"] .bdPagesPpQr {
  background: rgba(255, 255, 255, 0.03);
}

.bdPagesQrBox {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--bdText);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 4px;
  flex-shrink: 0;
}

.bdPagesQrCell {
  background: var(--bdBg);
  border-radius: 1px;
}

.bdPagesQrCell--w {
  background: transparent;
}

.bdPagesSolutionPills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.bdPagesPill {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--bdBorder);
  color: var(--bdTextMuted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bdPagesPill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesPill__dot {
  background: #c8f135;
}

.bdPagesBenefitCard {
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--bdTransition);
  height: 100%;
}

.bdPagesBenefitCard:hover {
  transform: translateY(-6px);
}

.bdPagesBenefitCard--blue {
  background: linear-gradient(135deg,
      rgba(34, 85, 232, 0.1),
      rgba(34, 85, 232, 0.03));
  border: 1px solid rgba(34, 85, 232, 0.18);
}

.bdPagesBenefitCard--lime {
  background: linear-gradient(135deg,
      rgba(34, 85, 232, 0.07),
      rgba(28, 45, 100, 0.03));
  border: 1px solid rgba(28, 45, 100, 0.12);
}

.bdPagesBenefitCard--pink {
  background: linear-gradient(135deg,
      rgba(241, 90, 37, 0.1),
      rgba(241, 90, 37, 0.03));
  border: 1px solid rgba(241, 90, 37, 0.18);
}

.bdPagesBenefitCard--orange {
  background: linear-gradient(135deg,
      rgba(28, 45, 100, 0.1),
      rgba(28, 45, 100, 0.03));
  border: 1px solid rgba(28, 45, 100, 0.15);
}

[data-theme="dark"] .bdPagesBenefitCard--blue {
  background: linear-gradient(135deg, #1a1aff22, #1a1aff08);
  border-color: rgba(26, 26, 255, 0.2);
}

[data-theme="dark"] .bdPagesBenefitCard--lime {
  background: linear-gradient(135deg,
      rgba(200, 241, 53, 0.12),
      rgba(200, 241, 53, 0.03));
  border-color: rgba(200, 241, 53, 0.2);
}

[data-theme="dark"] .bdPagesBenefitCard--pink {
  background: linear-gradient(135deg,
      rgba(255, 61, 143, 0.12),
      rgba(255, 61, 143, 0.03));
  border-color: rgba(255, 61, 143, 0.2);
}

[data-theme="dark"] .bdPagesBenefitCard--orange {
  background: linear-gradient(135deg,
      rgba(255, 107, 43, 0.12),
      rgba(255, 107, 43, 0.03));
  border-color: rgba(255, 107, 43, 0.2);
}

.bdPagesBenefitIcon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.bdPagesBenefitCard__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPagesBenefitCard__text {
  font-size: 0.88rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

.bdPagesHowSection {
  background: var(--bdBg);
}

.bdPagesStepsWrap {
  position: relative;
  margin-top: 4rem;
}

.bdPagesStepsLine {
  display: none;
}

@media (min-width: 768px) {
  .bdPagesStepsLine {
    display: block;
    position: absolute;
    top: 32px;
    left: calc(16.67% + 1rem);
    right: calc(16.67% + 1rem);
    height: 1px;
    background: linear-gradient(90deg,
        var(--site-tertiary-color),
        var(--site-primary-color));
  }

  /* bdPagesStepsLine dark handled by token */
}

.bdPagesStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
}

.bdPagesStepNum {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bdBgCard);
  border: 2px solid var(--site-tertiary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-tertiary-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--site-tertiary-color);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 24px rgba(34, 85, 232, 0.2);
}

.bdPagesStepNum--blue {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  box-shadow: 0 0 24px rgba(28, 45, 100, 0.25);
}

[data-theme="dark"] .bdPagesStepNum--blue {
  border-color: #1a1aff;
  color: #1a1aff;
  box-shadow: 0 0 24px rgba(26, 26, 255, 0.3);
}

.bdPagesStepNum--lime {
  border-color: var(--site-tertiary-color);
  color: var(--site-tertiary-color);
  box-shadow: 0 0 24px rgba(34, 85, 232, 0.2);
}

[data-theme="dark"] .bdPagesStepNum--lime {
  border-color: #c8f135;
  color: #c8f135;
  box-shadow: 0 0 24px rgba(200, 241, 53, 0.2);
}

.bdPagesStepNum--pink {
  border-color: var(--site-quaternary-color);
  color: var(--site-quaternary-color);
  box-shadow: 0 0 24px rgba(241, 90, 37, 0.2);
}

[data-theme="dark"] .bdPagesStepNum--pink {
  border-color: #ff3d8f;
  color: #ff3d8f;
  box-shadow: 0 0 24px rgba(255, 61, 143, 0.2);
}

.bdPagesStep__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPagesStep__text {
  font-size: 0.87rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

.bdPagesSocialSection {
  background: rgba(28, 45, 100, 0.02);
}

.bdPagesUseCard {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--bdBorder);
  transition:
    transform var(--bdTransition),
    border-color var(--bdTransition);
  height: 100%;
}

.bdPagesUseCard:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 85, 232, 0.25);
}

[data-theme="dark"] .bdPagesUseCard:hover {
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesUseCardImg {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

.bdPagesUseCard--handshake .bdPagesUseCardImg {
  background: linear-gradient(135deg,
      rgba(28, 45, 100, 0.12),
      rgba(34, 85, 232, 0.2));
}

.bdPagesUseCard--briefcase .bdPagesUseCardImg {
  background: linear-gradient(135deg,
      rgba(34, 85, 232, 0.08),
      rgba(28, 45, 100, 0.15));
}

.bdPagesUseCard--globe .bdPagesUseCardImg {
  background: linear-gradient(135deg,
      rgba(241, 90, 37, 0.08),
      rgba(241, 90, 37, 0.18));
}

[data-theme="dark"] .bdPagesUseCard--handshake .bdPagesUseCardImg {
  background: linear-gradient(135deg, #0d0d2b, #1a1aff33);
}

[data-theme="dark"] .bdPagesUseCard--briefcase .bdPagesUseCardImg {
  background: linear-gradient(135deg, #0f1a0d, rgba(200, 241, 53, 0.2));
}

[data-theme="dark"] .bdPagesUseCard--globe .bdPagesUseCardImg {
  background: linear-gradient(135deg, #1a0d1a, rgba(255, 61, 143, 0.2));
}

.bdPagesUseCardBody {
  padding: 1.5rem;
  background: var(--bdBgCard);
}

.bdPagesUseCardBody__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--bdText);
}

.bdPagesUseCardBody__text {
  font-size: 0.83rem;
  color: var(--bdTextMuted);
  line-height: 1.6;
  margin: 0;
}

.bdPagesTestiStrip {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bdPagesTestiStrip::-webkit-scrollbar {
  display: none;
}

.bdPagesTesti {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 16px;
  padding: 1.5rem;
  min-width: 280px;
  flex-shrink: 0;
  transition: border-color var(--bdTransition);
}

.bdPagesTesti:hover {
  border-color: rgba(34, 85, 232, 0.25);
}

[data-theme="dark"] .bdPagesTesti:hover {
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesTestiText {
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin-bottom: 1rem;
  font-style: italic;
}

.bdPagesTestiAuthor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bdPagesTestiAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
  flex-shrink: 0;
}

[data-theme="dark"] .bdPagesTestiAvatar {
  color: #0a0a0f;
}

.bdPagesTestiName {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--bdText);
}

.bdPagesTestiRole {
  font-size: 0.75rem;
  color: var(--bdTextMuted);
}

.bdPagesFeaturesSection {
  background: var(--bdBgAlt);
}

[data-theme="dark"] .bdPagesFeaturesSection {
  background: var(--bdBg);
}

.bdPagesFeatureCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 20px;
  padding: 2rem;
  transition:
    border-color var(--bdTransition),
    transform var(--bdTransition);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.bdPagesFeatureCard:hover {
  border-color: rgba(34, 85, 232, 0.25);
  transform: translateY(-4px);
}

[data-theme="dark"] .bdPagesFeatureCard:hover {
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesFeatureCard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--site-tertiary-color), transparent);
  opacity: 0;
  transition: opacity var(--bdTransition);
}

[data-theme="dark"] .bdPagesFeatureCard::after {
  background: linear-gradient(90deg, #c8f135, transparent);
}

.bdPagesFeatureCard:hover::after {
  opacity: 1;
}

.bdPagesFeatureIcon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.bdPagesFeatureCard__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPagesFeatureCard__text {
  font-size: 0.87rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

.bdPagesFeatureCard--wide {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.bdPagesFeatureCard--wide .bdPagesFeatureIcon {
  font-size: 3rem;
  flex-shrink: 0;
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .bdPagesFeatureCard--wide {
    flex-direction: column;
  }
}

.bdPagesCtaSection {
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bdPagesCtaGlow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse,
      rgba(34, 85, 232, 0.1) 0%,
      transparent 70%);
  pointer-events: none;
}

[data-theme="dark"] .bdPagesCtaGlow {
  background: radial-gradient(ellipse,
      rgba(200, 241, 53, 0.12) 0%,
      transparent 70%);
}

.bdPagesCtaNote {
  font-size: 0.8rem;
  color: var(--bdTextMuted);
  margin-top: 0.5rem;
}

.bdPagesStatVal {
  font-family: var(--site-tertiary-font);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--site-tertiary-color);
  line-height: 1;
}

[data-theme="dark"] .bdPagesStatVal {
  color: #c8f135;
}

.bdPagesStatLabel {
  font-size: 0.85rem;
  color: var(--bdTextMuted);
  margin-top: 0.25rem;
}

.bdPagesFooter {
  padding: 1.75rem 0;
  border-top: 1px solid var(--bdBorder);
  font-size: 0.82rem;
  color: var(--bdTextMuted);
}

.bdPagesFooterLink {
  color: var(--bdTextMuted);
  text-decoration: none;
  transition: color var(--bdTransition);
}

.bdPagesFooterLink:hover {
  color: var(--bdText);
}

.bdPagesReveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.bdPagesReveal.bdPagesReveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.bdPagesProfileCard--main {
  animation: bdFloat 5s ease-in-out infinite !important;
}

@media (max-width: 767px) {
  /* .bdPagesProfileCard--left,
  .bdPagesProfileCard--right {
    display: none;
  } */

  .bdPagesProCtaFrame {
    inset: 15px !important;
  }

  .bdPagesProCtaSection {
    padding: 2rem 15px !important;
  }

  .bdPagesHeroCards .bdPagesProfileCard--left {
    left: -3%;
    top: -20px;
  }

  .bdPagesHeroTitle {
    line-height: 50px;
  }

  .bdPagesBtnPrimary {
    padding: 10px 25px !important;
  }

  .bdPagesHeroCards .bdPagesProfileCard--right {
    right: 50%;
    top: 220px;
    width: 200px;
  }

  .bdPagesHeroCards .bdPagesProfileCard--main {
    left: 35%;
    width: 260px;
    top: 50px;
  }

  .bdPagesHeroCards {
    height: 350px;
  }

  .bdPagesSection {
    padding: 3.5rem 0;
  }

  .bdPagesCtaSection {
    padding: 4rem 0;
  }

  .bdPagesStep {
    margin-bottom: 2rem;
  }

  .bdPagesHeroTitle {
    letter-spacing: -0.03em;
  }
}

@media (max-width: 991px) {
  .bdPagesStepsLine {
    display: none;
  }
}

.bdPagesProNoise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9999;
}

.bdPagesProNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    backdrop-filter 0.4s ease;
  background-color: transparent;
}

.bdPagesProNavLink {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pro-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.bdPagesProNavLink:hover {
  color: var(--pro-text);
}

.bdPagesProNavCta {
  background: var(--pro-gold);
  color: #0a0a0b !important;
  font-family: var(--site-primary-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s;
  white-space: nowrap;
  display: block !important;
}

.bdPagesProNavCta:hover {
  background: var(--pro-gold-light);
  transform: translateY(-1px);
  color: #0a0a0b !important;
}

.bdPagesProHero {
  min-height: 100vh;
  background: var(--pro-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
}

.bdPagesProHeroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%,
      rgba(201, 168, 76, 0.07) 0%,
      transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%,
      rgba(201, 168, 76, 0.04) 0%,
      transparent 60%);
}

[data-theme="light"] .bdPagesProHeroBg {
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%,
      rgba(201, 168, 76, 0.12) 0%,
      transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%,
      rgba(28, 45, 100, 0.05) 0%,
      transparent 60%);
}

.bdPagesProHeroGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
      black 0%,
      transparent 100%);
}

[data-theme="light"] .bdPagesProHeroGrid {
  background-image:
    linear-gradient(rgba(28, 45, 100, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 45, 100, 0.04) 1px, transparent 1px);
}

.bdPagesProHeroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pro-gold);
  margin-bottom: 2rem;
  animation: bdFadeUp 0.8s ease 0.2s both;
}

.bdPagesProHeroEyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--pro-gold);
}

.bdPagesProHeroTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--pro-text);
  margin-bottom: 1.75rem;
  animation: bdFadeUp 0.8s ease 0.35s both;
}

.bdPagesProHeroTitle em {
  font-style: italic;
  color: var(--pro-gold);
}

.bdPagesProHeroSub {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--pro-muted);
  max-width: 480px;
  line-height: 1.85;
  margin-bottom: 3rem;
  animation: bdFadeUp 0.8s ease 0.5s both;
}

.bdPagesProHeroActions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  animation: bdFadeUp 0.8s ease 0.65s both;
}

.bdPagesProBtnPrimary {
  background: var(--pro-gold);
  color: #0a0a0b;
  font-family: var(--site-primary-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.bdPagesProBtnPrimary:hover {
  background: var(--pro-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(201, 168, 76, 0.28);
  color: #0a0a0b;
}

.bdPagesProBtnGhost {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--pro-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
}

.bdPagesProBtnGhost:hover {
  color: var(--pro-text);
}

.bdPagesProBtnGhost svg {
  transition: transform 0.2s;
}

.bdPagesProBtnGhost:hover svg {
  transform: translateX(4px);
}

.bdPagesProHeroVisual {
  animation: bdFadeUp 1.2s ease 0.8s both;
}

.bdPagesProProCard {
  width: 100%;
  max-width: 360px;
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 12px;
  padding: 2.25rem;
  position: relative;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}

[data-theme="light"] .bdPagesProProCard {
  box-shadow: 0 20px 60px rgba(28, 45, 100, 0.12);
}

.bdPagesProProCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pro-gold), transparent);
  border-radius: 12px 12px 0 0;
}

.bdPagesProCardHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.bdPagesProCardAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pro-gold) 0%, #8b5e1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-size: 1.3rem;
  font-weight: 600;
  color: #0a0a0b;
  flex-shrink: 0;
}

.bdPagesProCardName {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pro-text);
}

.bdPagesProCardMeta {
  font-size: 0.72rem;
  color: var(--pro-muted);
  letter-spacing: 0.04em;
}

.bdPagesProCardStats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bdPagesProCardStat {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

[data-theme="light"] .bdPagesProCardStat {
  background: rgba(28, 45, 100, 0.04);
}

.bdPagesProCardStatVal {
  font-family: var(--site-secondary-font);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--pro-gold);
  line-height: 1;
}

.bdPagesProCardStatLbl {
  font-size: 0.62rem;
  color: var(--pro-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.bdPagesProCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.bdPagesProCardTag {
  font-size: 0.68rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--pro-border);
  border-radius: 100px;
  color: var(--pro-muted);
  letter-spacing: 0.04em;
}

.bdPagesProCardQr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--pro-gold-dim);
  border: 1px solid var(--pro-gold-border);
  border-radius: 8px;
}

.bdPagesProQrBox {
  width: 44px;
  height: 44px;
  background: var(--pro-text);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 5px;
  flex-shrink: 0;
}

.bdPagesProQrDot {
  background: var(--pro-bg);
  border-radius: 1px;
}

.bdPagesProQrText {
  font-size: 0.72rem;
  color: var(--pro-gold);
  font-weight: 500;
}

.bdPagesProQrSub {
  font-size: 0.62rem;
  color: var(--pro-faint);
}

.bdPagesProFloatBadge {
  position: absolute;
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pro-muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bdPagesProFloatBadge--top {
  top: -16px;
  right: -24px;
  animation: bdFloat 3s ease-in-out infinite;
}

.bdPagesProFloatBadge--bottom {
  bottom: 24px;
  left: -28px;
  animation: bdFloat 3.5s ease-in-out 0.5s infinite;
}

.bdPagesProBadgeDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bdPagesProSection {
  padding: 5.5rem 0;
  background: var(--pro-bg);
}

.bdPagesProSection--alt {
  background: var(--pro-bg-alt);
}

.bdPagesProDivider {
  height: 1px;
  background: var(--pro-border);
}

.bdPagesProEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pro-gold);
  margin-bottom: 1.25rem;
}

.bdPagesProEyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--pro-gold);
}

.bdPagesProEyebrow--center::before {
  display: none;
}

.bdPagesProTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--pro-text);
}

.bdPagesProTitle em {
  font-style: italic;
  color: var(--pro-gold);
}

.bdPagesProBody {
  font-size: 1rem;
  color: var(--pro-muted);
  line-height: 1.85;
}

.bdPagesProProblemCard {
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--bdTransition);
  height: 100%;
}

.bdPagesProProblemCard:hover {
  border-color: var(--pro-border-hover);
}

.bdPagesProProblemCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pro-gold);
  opacity: 0.5;
}

.bdPagesProProblemNum {
  font-family: "DM Mono", "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--pro-faint);
  margin-bottom: 0.625rem;
  letter-spacing: 0.1em;
}

.bdPagesProProblemTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--pro-text);
}

.bdPagesProProblemDesc {
  font-size: 0.875rem;
  color: var(--pro-muted);
  line-height: 1.7;
}

.bdPagesProSolWrap {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesProSolCircle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(201, 168, 76, 0.1) 0%,
      transparent 70%);
  border: 1px solid var(--pro-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bdPagesProSolCircleInner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--pro-bg-card);
  border: 1px solid rgba(201, 168, 76, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.bdPagesProSolIcon {
  font-size: 2.5rem;
}

.bdPagesProSolLabel {
  font-family: var(--site-secondary-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pro-gold);
  text-align: center;
  letter-spacing: 0.05em;
}

.bdPagesProOrbitTag {
  position: absolute;
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  padding: 0.5rem 0.875rem;
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--pro-muted);
  white-space: nowrap;
}

.bdPagesProOrbitTag--tr {
  top: 30px;
  right: 10px;
}

.bdPagesProOrbitTag--br {
  bottom: 50px;
  right: 0;
}

.bdPagesProOrbitTag--bl {
  bottom: 40px;
  left: 20px;
}

.bdPagesProOrbitTag--tl {
  top: 60px;
  left: 10px;
}

.bdPagesProBenefitsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pro-border);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4rem;
}

@media (max-width: 991px) {
  .bdPagesProBenefitsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .bdPagesProBenefitsGrid {
    grid-template-columns: 1fr;
  }
}

.bdPagesProBenefitItem {
  background: var(--pro-bg-card);
  padding: 2.5rem 2rem;
  transition: background var(--bdTransition);
}

.bdPagesProBenefitItem:hover {
  background: var(--pro-bg-alt);
}

.bdPagesProBenefitIcon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--pro-gold-dim);
  border: 1px solid var(--pro-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.bdPagesProBenefitTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--pro-text);
}

.bdPagesProBenefitDesc {
  font-size: 0.85rem;
  color: var(--pro-muted);
  line-height: 1.7;
}

.bdPagesProSteps {
  margin-top: 4rem;
}

.bdPagesProStep {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2.5rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--pro-border);
  align-items: start;
}

.bdPagesProStep:last-child {
  border-bottom: none;
}

.bdPagesProStepNum {
  font-family: var(--site-secondary-font);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(201, 168, 76, 0.2);
  line-height: 1;
  padding-top: 4px;
}

.bdPagesProStepTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  color: var(--pro-text);
}

.bdPagesProStepDesc {
  font-size: 0.9rem;
  color: var(--pro-muted);
  line-height: 1.75;
}

.bdPagesProUseCaseCard {
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 2.25rem;
  transition:
    border-color var(--bdTransition),
    transform var(--bdTransition);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.bdPagesProUseCaseCard:hover {
  border-color: var(--pro-gold-border);
  transform: translateY(-4px);
}

.bdPagesProUseCaseCard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--pro-gold), transparent);
  opacity: 0;
  transition: opacity var(--bdTransition);
}

.bdPagesProUseCaseCard:hover::after {
  opacity: 1;
}

.bdPagesProUseCaseEmoji {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  display: block;
}

.bdPagesProUseCaseTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--pro-text);
}

.bdPagesProUseCaseDesc {
  font-size: 0.875rem;
  color: var(--pro-muted);
  line-height: 1.75;
}

.bdPagesProFeatureCard {
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 2.25rem;
  position: relative;
  transition: border-color var(--bdTransition);
  height: 100%;
}

.bdPagesProFeatureCard:hover {
  border-color: rgba(201, 168, 76, 0.25);
}

.bdPagesProFeatureCard--featured {
  background: var(--pro-bg-card);
  border-color: var(--pro-gold-border);
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .bdPagesProFeatureCard--featured {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.bdPagesProFeatureBadge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pro-gold);
  background: var(--pro-gold-dim);
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}

.bdPagesProFeatureIconLg {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  background: var(--pro-gold-dim);
  border: 1px solid var(--pro-gold-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdPagesProFeatureIconSm {
  font-size: 1.5rem;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1.25rem;
}

[data-theme="light"] .bdPagesProFeatureIconSm {
  background: rgba(28, 45, 100, 0.05);
}

.bdPagesProFeatureTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  color: var(--pro-text);
}

.bdPagesProFeatureDesc {
  font-size: 0.875rem;
  color: var(--pro-muted);
  line-height: 1.75;
}

.bdPagesProStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pro-border);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 3.5rem;
}

@media (max-width: 767px) {
  .bdPagesProStatsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bdPagesProStatItem {
  background: var(--pro-bg-card);
  padding: 2.5rem 2rem;
  text-align: center;
}

.bdPagesProStatVal {
  font-family: var(--site-secondary-font);
  font-size: 3rem;
  font-weight: 600;
  color: var(--pro-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.bdPagesProStatLbl {
  font-size: 0.8rem;
  color: var(--pro-muted);
  letter-spacing: 0.04em;
}

.bdPagesProTestimonial {
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 2rem;
  transition: border-color var(--bdTransition);
  height: 100%;
}

.bdPagesProTestimonial:hover {
  border-color: var(--pro-gold-border);
}

.bdPagesProTestiStars {
  color: var(--pro-gold);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.bdPagesProTestiText {
  font-size: 0.9rem;
  color: var(--pro-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.bdPagesProTestiPerson {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bdPagesProTestiAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0b;
  flex-shrink: 0;
}

.bdPagesProTestiName {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pro-text);
}

.bdPagesProTestiRole {
  font-size: 0.72rem;
  color: var(--pro-faint);
}

.bdPagesProCtaSection {
  padding: 7rem 0;
  text-align: center;
  background: var(--pro-bg);
  position: relative;
  overflow: hidden;
}

.bdPagesProCtaBg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%,
      rgba(201, 168, 76, 0.06) 0%,
      transparent 70%);
  pointer-events: none;
}

.bdPagesProCtaFrame {
  position: absolute;
  inset: 2.5rem;
  border: 1px solid var(--pro-border);
  border-radius: 16px;
  pointer-events: none;
}

.bdPagesProCtaNote {
  font-size: 0.78rem;
  color: var(--pro-faint);
  margin-top: 1.25rem;
  letter-spacing: 0.04em;
}

.bdPagesProFooter {
  padding: 2.5rem 0;
  border-top: 1px solid var(--pro-border);
  background: var(--pro-bg);
}

.bdPagesProFooterLogo {
  font-family: var(--site-secondary-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pro-muted);
  text-decoration: none;
}

.bdPagesProFooterLogo span {
  color: var(--pro-gold);
}

.bdPagesProFooterLink {
  font-size: 0.75rem;
  color: var(--pro-faint);
  text-decoration: none;
  transition: color var(--bdTransition);
}

.bdPagesProFooterLink:hover {
  color: var(--pro-muted);
}

.bdPagesProFooterCopy {
  font-size: 0.75rem;
  color: var(--pro-faint);
}

.bdPagesProThemeToggle {
  width: 48px;
  height: 26px;
  background: rgba(201, 168, 76, 0.15);
  border: 1.5px solid var(--pro-gold-border);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}

.bdPagesProThemeToggle:hover {
  border-color: var(--pro-gold);
}

.bdPagesProThemeToggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pro-gold);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

[data-theme="dark"] .bdPagesProThemeToggle__knob {
  transform: translateX(22px);
}

.bdPagesProOnboardWrap {
  background: var(--bdOnboard-bg);
  color: var(--bdOnboard-text);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition:
    background 0.3s,
    color 0.3s;
}

.bdPagesProOnboardNoise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  z-index: 9999;
}

.bdPagesProOnboardHeader {
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bdOnboard-border);
  flex-shrink: 0;
  background: var(--bdOnboard-bg);
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdPagesProOnboardLogo {
  font-family: var(--site-secondary-font);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardThemeToggle {
  width: 42px;
  height: 24px;
  background: var(--bdOnboard-border);
  border: 1.5px solid var(--bdOnboard-goldBorder);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition:
    background 0.3s,
    border-color 0.3s;
  flex-shrink: 0;
}

.bdPagesOnboardThemeToggle:hover {
  border-color: var(--bdOnboard-gold);
}

.bdPagesOnboardThemeToggle__knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

[data-theme="dark"] .bdPagesOnboardThemeToggle__knob {
  transform: translateX(18px);
}

.bdPagesProOnboardWizardWrap {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

.bdPagesProOnboardSidebar {
  border-right: 1px solid var(--bdOnboard-border);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bdOnboard-bgOff);
  position: relative;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdPagesProOnboardSidebar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(201, 168, 76, 0.04), transparent);
  pointer-events: none;
}

.bdPagesProOnboardSidebarTitle {
  font-family: var(--site-secondary-font);
  font-weight: 600;
  color: var(--bdOnboard-silver);
  letter-spacing: 0.16em;
  margin-bottom: 36px;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.bdPagesProOnboardStepItem:hover:not(.active):not(.locked) {
  background: var(--bdOnboard-white08);
}

.bdPagesProOnboardStepItem.active {
  background: var(--bdOnboard-goldDim);
}

.bdPagesProOnboardStepItem.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.bdPagesProOnboardStepItem.active .bdPagesProOnboardStepBullet {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
}

.bdPagesProOnboardStepItem.done .bdPagesProOnboardStepBullet {
  border-color: var(--bdOnboard-green);
  background: rgba(74, 222, 128, 0.12);
  color: var(--bdOnboard-green);
}

.bdPagesProOnboardStepItem.active .bdPagesProOnboardStepLabel {
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardStepItem.done .bdPagesProOnboardStepLabel {
  color: var(--bdOnboard-silver);
}

.bdPagesProOnboardStepItem.active .bdPagesProOnboardStepSub {
  color: rgba(201, 168, 76, 0.7);
}

.bdPagesProOnboardMainContent {
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.bdPagesProOnboardStepPanel {
  display: none;
  flex: 1;
  flex-direction: column;
  animation: bdOnboardPanelIn 0.4s ease;
}

.bdPagesProOnboardStepPanel.active {
  display: flex;
}

.bdPagesProOnboardPanelHeader {
  padding: 48px 60px 36px;
  border-bottom: 1px solid var(--bdOnboard-border);
  background: linear-gradient(to bottom, var(--bdOnboard-goldDim), transparent);
}

.bdPagesProOnboardPanelEyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bdOnboard-gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdPagesProOnboardPanelEyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--bdOnboard-gold);
}

.bdPagesProOnboardPanelTitle {
  font-family: var(--site-secondary-font);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardPanelTitle em {
  font-style: italic;
  color: var(--bdOnboard-gold);
}

.bdPagesProOnboardPanelDesc {
  font-size: 0.9rem;
  color: var(--bdOnboard-silver);
  max-width: 480px;
  line-height: 1.75;
}

.bdPagesProOnboardOptionalBadge {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bdOnboard-silver);
  background: var(--bdOnboard-white08);
  padding: 3px 9px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 500;
}

.bdPagesProOnboardPanelBody {
  padding: 40px 60px;
  flex: 1;
}

.bdStudOnboardShell:not(.bdProOnboardShell) .bdPagesProOnboardStepPanel>*:not(.bdPagesProOnboardPanelHeader) {
  padding-left: 60px;
  padding-right: 60px;
  max-width: 800px;
}

.bdStudOnboardShell:not(.bdProOnboardShell) .bdPagesProOnboardPanelHeader+* {
  padding-top: 40px;
}

.bdStudOnboardShell:not(.bdProOnboardShell) .bdPagesProOnboardStepPanel>*:last-child {
  padding-bottom: 48px;
}

@media (max-width: 768px) {
  .bdStudOnboardShell:not(.bdProOnboardShell) .bdPagesProOnboardStepPanel>*:not(.bdPagesProOnboardPanelHeader) {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.bdPagesProOnboardFormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 680px;
}

.bdPagesProOnboardFormGrid.single {
  grid-template-columns: 1fr;
}

.bdPagesProOnboardFieldGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bdPagesProOnboardFieldGroup.full {
  grid-column: span 2;
}

.bdPagesProOnboardFieldLabel {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bdOnboard-silver);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bdPagesProOnboardReq {
  color: var(--bdOnboard-gold);
  font-size: 0.85rem;
}

.bdPagesProOnboardOptTag {
  font-size: 0.6rem;
  color: var(--bdOnboard-muted);
  background: var(--bdOnboard-white08);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.06em;
  font-weight: 400;
  text-transform: none;
}

.bdPagesProOnboardWrap input,
.bdPagesProOnboardWrap textarea,
.bdPagesProOnboardWrap select {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-border);
  border-radius: 6px;
  color: var(--bdOnboard-text);
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  padding: 12px 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.bdPagesProOnboardWrap input:focus,
.bdPagesProOnboardWrap textarea:focus,
.bdPagesProOnboardWrap select:focus {
  border-color: var(--bdOnboard-borderFocus);
  background: var(--bdOnboard-bgCard2);
  box-shadow: 0 0 0 3px var(--bdOnboard-goldDim);
}

.bdPagesProOnboardWrap input.error {
  border-color: var(--bdOnboard-red);
  background: var(--bdOnboard-error);
}

.bdPagesProOnboardWrap input::placeholder,
.bdPagesProOnboardWrap textarea::placeholder {
  color: var(--bdOnboard-muted);
}

.bdPagesProOnboardWrap select {
  cursor: pointer;
}

.bdPagesProOnboardWrap select option {
  background: var(--bdOnboard-bgCard2);
}

.bdPagesProOnboardWrap textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.bdPagesProOnboardFieldHint {
  font-size: 0.72rem;
  color: var(--bdOnboard-muted);
  line-height: 1.5;
}

.bdPagesProOnboardFieldError {
  font-size: 0.72rem;
  color: var(--bdOnboard-red);
  display: none;
}

.bdPagesProOnboardFieldError.show {
  display: block;
}

.bdPagesProOnboardFieldCounter {
  font-size: 0.68rem;
  color: var(--bdOnboard-muted);
  text-align: right;
  font-family: "DM Mono", monospace;
}

.bdPagesProOnboardAvatarUpload {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--bdOnboard-bgCard);
  border: 1px dashed var(--bdOnboard-border);
  border-radius: 8px;
  transition: border-color 0.2s;
  cursor: pointer;
  position: relative;
}

.bdPagesProOnboardAvatarUpload:hover {
  border-color: var(--bdOnboard-goldBorder);
}

.bdPagesProOnboardAvatarPreview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdOnboard-gold), #8b5e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-size: 1.8rem;
  font-weight: 600;
  color: #09090b;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.bdPagesProOnboardAvatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
}

.bdPagesProOnboardAvatarUploadLabel {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bdOnboard-text);
  margin-bottom: 4px;
}

.bdPagesProOnboardAvatarUploadSub {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
}

.bdPagesProOnboardAvatarUploadOr {
  font-size: 0.78rem;
  color: var(--bdOnboard-muted);
  margin: 12px 0 6px;
}

.bdPagesProOnboardUrlInputWrap {
  position: relative;
}

.bdPagesProOnboardUrlInputWrap input {
  padding-left: 36px;
}

.bdPagesProOnboardUrlIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bdOnboard-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.bdPagesProOnboardEduList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.bdPagesProOnboardEduCard {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-border);
  border-radius: 8px;
  overflow: hidden;
}

.bdPagesProOnboardEduCardHeader {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.2s;
}

.bdPagesProOnboardEduCardHeader:hover {
  background: var(--bdOnboard-white08);
}

.bdPagesProOnboardEduCardTitle {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardEduCardSub {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  margin-top: 2px;
}

.bdPagesProOnboardEduCardActions {
  display: flex;
  gap: 8px;
}

.bdPagesProOnboardBtnIcon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--bdOnboard-border);
  background: transparent;
  color: var(--bdOnboard-silver);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.bdPagesProOnboardBtnIcon:hover {
  border-color: var(--bdOnboard-borderFocus);
  color: var(--bdOnboard-text);
  background: var(--bdOnboard-goldDim);
}

.bdPagesProOnboardBtnIcon.danger:hover {
  border-color: var(--bdOnboard-red);
  color: var(--bdOnboard-red);
  background: var(--bdOnboard-error);
}

.bdPagesProOnboardEduCardBody {
  padding: 0 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bdPagesProOnboardAddBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: transparent;
  border: 1px dashed var(--bdOnboard-goldBorder);
  border-radius: 8px;
  color: var(--bdOnboard-gold);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 680px;
}

.bdPagesProOnboardAddBtn:hover {
  background: var(--bdOnboard-goldDim);
  border-color: var(--bdOnboard-gold);
}

.bdPagesProOnboardAddBtnIcon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.bdPagesProOnboardPill {
  padding: 9px 18px;
  border: 1px solid var(--bdOnboard-border);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--bdOnboard-silver);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.bdPagesProOnboardPill:hover {
  border-color: var(--bdOnboard-goldBorder);
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardPill.selected {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  font-weight: 500;
}

.bdPagesProOnboardBtnSkip {
  background: transparent;
  border: none;
  color: var(--bdOnboard-muted);
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 12px 16px;
  transition: color 0.2s;
}

.bdPagesProOnboardBtnSkip:hover {
  color: var(--bdOnboard-silver);
}

.bdPagesProOnboardLinkedinHero {
  max-width: 680px;
  margin: 0 auto;
}

.bdPagesProOnboardLiCard {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.bdPagesProOnboardLiCardHeader {
  padding: 28px 32px;
  background: linear-gradient(135deg,
      var(--bdOnboard-linkedinDim) 0%,
      transparent 70%);
  border-bottom: 1px solid var(--bdOnboard-border);
  display: flex;
  align-items: center;
  gap: 20px;
}

.bdPagesProOnboardLiLogo {
  width: 52px;
  height: 52px;
  background: var(--bdOnboard-linkedin);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: white;
  font-family: serif;
  flex-shrink: 0;
}

.bdPagesProOnboardLiTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLiSub {
  font-size: 0.85rem;
  color: var(--bdOnboard-silver);
  line-height: 1.5;
}

.bdPagesProOnboardLiDataPreview {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bdPagesProOnboardLiDataItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(10, 102, 194, 0.06);
  border: 1px solid rgba(10, 102, 194, 0.15);
  border-radius: 8px;
}

.bdPagesProOnboardLiDataIcon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(10, 102, 194, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.bdPagesProOnboardLiDataText {
  flex: 1;
}

.bdPagesProOnboardLiDataLabel {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLiDataDesc {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
  margin-top: 2px;
}

.bdPagesProOnboardLiCheck {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--bdOnboard-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--bdOnboard-green);
  transition: all 0.3s;
}

.bdPagesProOnboardLiCheck.checked {
  border-color: var(--bdOnboard-green);
  background: rgba(74, 222, 128, 0.12);
}

.bdPagesProOnboardBtnLinkedin {
  width: 100%;
  background: var(--bdOnboard-linkedin);
  border: none;
  color: white;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}

.bdPagesProOnboardBtnLinkedin:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(10, 102, 194, 0.35);
}

.bdPagesProOnboardBtnLinkedin:active {
  transform: translateY(0);
}

.bdPagesProOnboardBtnLinkedin .li-icon {
  font-size: 1.3rem;
  font-weight: 900;
  font-family: serif;
}

.bdPagesProOnboardLiConnecting {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
  gap: 20px;
}

.bdPagesProOnboardLiConnecting.show {
  display: flex;
}

.bdPagesProOnboardLiSpinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(10, 102, 194, 0.2);
  border-top-color: var(--bdOnboard-linkedin);
  border-radius: 50%;
  animation: bdOnboardSpin 0.8s linear infinite;
}

.bdPagesProOnboardLiConnectSteps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bdPagesProOnboardLiConnectStep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--bdOnboard-muted);
  transition: color 0.3s;
}

.bdPagesProOnboardLiConnectStep.active {
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLiConnectStep.done {
  color: var(--bdOnboard-green);
}

.bdPagesProOnboardLiConnectDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bdOnboard-border);
  flex-shrink: 0;
  transition: background 0.3s;
}

.bdPagesProOnboardLiConnectStep.active .bdPagesProOnboardLiConnectDot {
  background: var(--bdOnboard-linkedin);
  animation: bdOnboardPulse 1s infinite;
}

.bdPagesProOnboardLiConnectStep.done .bdPagesProOnboardLiConnectDot {
  background: var(--bdOnboard-green);
}

.bdPagesProOnboardSecurityNote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bdOnboard-white08);
  border-radius: 8px;
  border: 1px solid var(--bdOnboard-border);
}

.bdPagesProOnboardSecurityIcon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.bdPagesProOnboardSecurityText {
  font-size: 0.76rem;
  color: var(--bdOnboard-silver);
  line-height: 1.6;
}

.bdPagesProOnboardSecurityText strong {
  color: var(--bdOnboard-text);
  font-weight: 500;
}

.bdPagesProOnboardLiSkipText {
  text-align: center;
  font-size: 0.78rem;
  color: var(--bdOnboard-muted);
  margin-top: 16px;
}

.bdPagesProOnboardLiSkipText button {
  background: none;
  border: none;
  color: var(--bdOnboard-silver);
  cursor: pointer;
  font-size: 0.78rem;
  font-family: "DM Sans", sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.bdPagesProOnboardLiSkipText button:hover {
  color: var(--bdOnboard-text);
}

#bdProOnboardCompletionPanel {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px;
  flex-direction: column;
  gap: 28px;
  animation: bdOnboardPanelIn 0.5s ease;
}

#bdProOnboardCompletionPanel.show {
  display: flex;
}

.bdPagesProOnboardCompletionIcon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdOnboard-gold), #8b5e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  animation: bdOnboardPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bdPagesProOnboardCompletionTitle {
  font-family: var(--site-secondary-font);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardCompletionTitle em {
  font-style: italic;
  color: var(--bdOnboard-gold);
}

.bdPagesProOnboardCompletionSub {
  font-size: 1rem;
  color: var(--bdOnboard-silver);
  max-width: 400px;
  line-height: 1.75;
}

.bdPagesProOnboardCompletionCard {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-goldBorder);
  border-radius: 10px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  width: 100%;
}

.bdPagesProOnboardCompAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdOnboard-gold), #8b5e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: #09090b;
  flex-shrink: 0;
}

.bdPagesProOnboardCompName {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardCompRole {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  margin-top: 3px;
}

@media (max-width: 768px) {

  .bdPagesProOnboardPanelHeader,
  .bdPagesProOnboardPanelBody,
  .bdPagesProOnboardPanelFooter {
    padding-left: 24px;
    padding-right: 24px;
  }

  .bdPagesProOnboardFormGrid {
    grid-template-columns: 1fr;
  }

  .bdPagesProOnboardFieldGroup.full {
    grid-column: span 1;
  }

  .bdPagesProOnboardEduCardBody {
    grid-template-columns: 1fr;
  }

}

.bdPagesOnboardApp {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--bdOnboard-bg);
  color: var(--bdOnboard-text);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  transition:
    background 0.3s,
    color 0.3s;
}

.bdPagesOnboardTopNav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--bdOnboard-border);
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdPagesOnboardStepDot.done {
  cursor: pointer;
}

.bdPagesOnboardStepDot.active .bdPagesOnboardStepDotNum {
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-weight: 600;
}

.bdPagesOnboardStepDot.done .bdPagesOnboardStepDotNum {
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  border-color: var(--bdOnboard-goldBorder);
}

.bdPagesOnboardStepDot.active .bdPagesOnboardStepDotLabel {
  color: var(--bdOnboard-text);
  font-weight: 500;
}

.bdPagesOnboardStepPanel.active {
  display: block;
}

.bdPagesOnboardPurposeCard.selected {
  border-color: var(--bdOnboard-gold);
  background: linear-gradient(150deg,
      var(--bdOnboard-ink4) 0%,
      var(--bdOnboard-ink3) 100%);
  box-shadow:
    0 0 0 1px var(--bdOnboard-gold),
    0 20px 40px rgba(200, 168, 75, 0.1);
}

.bdPagesOnboardPurposeCard.selected::after {
  content: "✓";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesOnboardPlanCard.selected {
  border-color: var(--bdOnboard-gold);
  background: linear-gradient(150deg,
      var(--bdOnboard-ink4),
      var(--bdOnboard-ink3));
  box-shadow:
    0 0 0 1px var(--bdOnboard-gold),
    0 16px 32px rgba(200, 168, 75, 0.1);
}

.bdPagesOnboardPlanCard.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesOnboardHwCard.selected {
  border-color: var(--bdOnboard-gold);
  background: linear-gradient(150deg,
      var(--bdOnboard-ink4),
      var(--bdOnboard-ink3));
  box-shadow:
    0 0 0 1px var(--bdOnboard-gold),
    0 16px 32px rgba(200, 168, 75, 0.1);
}

.bdPagesOnboardHwCard.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesOnboardHwVisual.sticker {
  background: linear-gradient(135deg, #1a2a1e, #101a12);
}

.bdPagesOnboardColorOpt.active {
  border-color: var(--bdOnboard-text);
  box-shadow: 0 0 0 3px var(--bdOnboard-white20);
  transform: scale(1.1);
}

.bdPagesOnboardToggleSwitch.on {
  background: var(--bdOnboard-gold);
  border-color: var(--bdOnboard-gold);
}

.bdPagesOnboardToggleSwitch.on .bdPagesOnboardToggleKnob {
  left: 22px;
}

.bdPagesOnboardCrossItem.added {
  border-color: var(--bdOnboard-green);
  background: rgba(40, 217, 138, 0.04);
}

.bdPagesOnboardAddBtn.add {
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  border: 1px solid var(--bdOnboard-goldBorder);
}

.bdPagesOnboardAddBtn.added {
  background: rgba(40, 217, 138, 0.1);
  color: var(--bdOnboard-green);
  border: 1px solid rgba(40, 217, 138, 0.3);
}

.bdPagesOnboardPayOpt.active {
  border-color: var(--bdOnboard-gold);
  color: var(--bdOnboard-gold);
}

@media (max-width: 900px) {

  .bdPagesProHero {
    padding: 0rem 0 5rem;
  }

  /* .bdPagesOnboardSidebar {
    display: none;
  } */

  .bdPagesOnboardStepDots {
    padding: 0 20px;
  }

  .bdPagesOnboardStepTitle {
    font-size: 2.2rem;
  }
}

.bdStudOnboardShell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bdBg);
  color: var(--bdText);
  font-family: var(--site-primary-font);
  --bdStudOnboard-headerH: 66px;

  /*  Remap gold → the student landing's primary accent (--bdCta:
      lime in dark / orange in light) so the wizard matches the landing  */
  --bdOnboard-gold: var(--bdCta);
  --bdOnboard-goldDim: var(--bdBadgeBg);
  --bdOnboard-goldGlow: var(--bdCtaGlow1);
  --bdOnboard-goldBorder: var(--bdBadgeBorder);
  --bdOnboard-bg: var(--bdBg);
  --bdOnboard-bgOff: var(--bdBgAlt);
  --bdOnboard-bgCard: var(--bdBgCard);
  --bdOnboard-text: var(--bdText);
  --bdOnboard-silver: var(--bdTextMuted);
  --bdOnboard-border: var(--bdBorder);

  /*  Semantic tokens for this wizard  */
  --bdStudOnboard-textOnColor: #fff;
  --bdStudOnboard-linkedinBorder: rgba(10, 102, 194, 0.2);
  --bdStudOnboard-linkedinShadow: rgba(10, 102, 194, 0.35);
  --bdStudOnboard-linkedinGradEnd: #00a0dc;
  --bdStudOnboard-successBorder: rgba(22, 163, 74, 0.3);
  --bdStudOnboard-successBg: rgba(22, 163, 74, 0.04);
  --bdStudOnboard-successBadgeBg: rgba(22, 163, 74, 0.1);
  --bdStudOnboard-footerBg: rgba(255, 255, 255, 0.92);
  --bdStudOnboard-ctaGradEnd: var(--site-quaternary-color);
  --bdStudOnboard-ctaShadow: rgba(241, 90, 37, 0.35);
  --bdStudOnboard-borderHover: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .bdStudOnboardShell {
  --bdStudOnboard-footerBg: rgba(10, 10, 15, 0.92);
  --bdStudOnboard-borderHover: rgba(255, 255, 255, 0.15);
}

.bdStudOnboardShell.bdProOnboardShell {
  --bdBg: var(--pro-bg);
  --bdBgAlt: var(--pro-bg-alt);
  --bdBgCard: var(--pro-bg-card);
  --bdText: var(--pro-text);
  --bdTextMuted: var(--pro-muted);
  --bdBorder: var(--pro-border);
  --bdHighlight: var(--pro-gold);
  --bdHighlightAlt: var(--pro-gold);
  --bdAccent: var(--pro-gold);
  --bdBadgeBg: var(--pro-gold-dim);
  --bdBadgeBorder: var(--pro-gold-border);
  --bdCta: var(--pro-gold);
  --bdCtaText: #0a0a0b;
  --bdCtaGlow1: var(--pro-gold-dim);
  --bdInputFocusBorder: var(--pro-gold);
  --bdInputFocusShadow: var(--pro-gold-dim);
}

.bdProOnboardBack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bdTextMuted);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bdBorder);
  border-radius: 100px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.bdProOnboardBack:hover {
  color: var(--bdOnboard-gold);
  border-color: var(--bdOnboard-goldBorder);
  background: var(--bdOnboard-goldDim);
}

.bdStudOnboardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  height: var(--bdStudOnboard-headerH);
  background: var(--bdBg);
  border-bottom: 1px solid var(--bdBorder);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdStudOnboardHeaderRight {
  font-size: 0.78rem;
  color: var(--bdTextMuted);
  letter-spacing: 0.04em;
}

.bdStudOnboardHeaderRight strong {
  color: var(--bdHighlightAlt);
  font-weight: 600;
}

.bdStudOnboardBody {
  display: flex;
  flex: 1;
  min-height: 0;
}

.bdStudOnboardSidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--bdBgAlt);
  border-right: 1px solid var(--bdBorder);
  padding: 2rem 1.5rem;
  position: sticky;
  top: var(--bdStudOnboard-headerH);
  height: calc(100vh - var(--bdStudOnboard-headerH));
  overflow: hidden;
}

.bdStudOnboardStepItem {
  cursor: pointer;
  transition: background 0.2s;
}

.bdStudOnboardStepItem:not(.active):not(.done):hover {
  background: var(--bdOnboard-white08);
}

.bdStudOnboardStepItem.active {
  background: var(--bdOnboard-goldDim);
}

.bdStudOnboardStepItem.done {
  opacity: 0.75;
}

.bdStudOnboardStepCircle {
  width: 38px;
  height: 38px;
  border: 2px solid var(--bdOnboard-border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bdOnboard-silver);
  transition: all 0.3s;
  flex-shrink: 0;
}

.bdStudOnboardStepItem.active .bdStudOnboardStepCircle {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
}

.bdStudOnboardStepItem.done .bdStudOnboardStepCircle {
  border-color: var(--bdOnboard-gold);
  background: transparent;
  color: var(--bdOnboard-gold);
}

.bdStudOnboardStepLabel {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bdOnboard-silver);
}

.bdStudOnboardStepName {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 2px;
  color: var(--bdOnboard-text);
}

.bdStudOnboardStepItem.active .bdStudOnboardStepName {
  color: var(--bdOnboard-gold);
}

.bdStudOnboardStepItem.done .bdStudOnboardStepName {
  color: var(--bdOnboard-silver);
}

.bdStudOnboardStepConnector {
  width: 2px;
  height: 16px;
  background: var(--bdOnboard-border);
  margin: 2px 0 2px calc(1rem + 18px);
  border-radius: 2px;
  transition: background 0.4s;
}

.bdStudOnboardStepConnector.doneLine {
  background: var(--bdOnboard-gold);
}

.bdStudOnboardProgressTrack {
  height: 4px;
  background: var(--bdOnboard-white08);
  overflow: hidden;
}

.bdStudOnboardProgressFill {
  height: 100%;
  background: var(--bdStepLineGrad);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bdStudOnboardMain {
  flex: 1;
  min-width: 0;
}

.bdStudOnboardContent {
  padding: 3rem 3.5rem 5rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.bdStudOnboardStepPanel {
  display: none;
  animation: studOnboardSlideIn 0.35s var(--bdOnboard-ease) both;
}

.bdStudOnboardStepPanel.active {
  display: block;
}

@keyframes studOnboardSlideIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bdStudOnboardEyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bdOnboard-gold);
}

.bdStudOnboardTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bdOnboard-text);
  margin-bottom: 0.5rem;
}

.bdStudOnboardMuted {
  color: var(--bdOnboard-silver) !important;
}

.bdStudOnboardAccentText {
  color: var(--bdOnboard-gold) !important;
}

.bdStudOnboardOpt {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--bdOnboard-silver);
  margin-left: 4px;
}

.bdStudOnboardLabel {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
  opacity: 0.75;
}

.bdStudOnboardInput {
  background: var(--bdOnboard-bgCard) !important;
  border: 1.5px solid var(--bdOnboard-border) !important;
  border-radius: 12px !important;
  padding: 0.8rem 1rem !important;
  color: var(--bdOnboard-text) !important;
  font-size: 0.9rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardInput::placeholder {
  color: var(--bdOnboard-silver);
}

.bdStudOnboardInput:focus {
  border-color: var(--bdInputFocusBorder) !important;
  box-shadow: 0 0 0 3px var(--bdInputFocusShadow) !important;
  background: var(--bdOnboard-bgCard) !important;
  outline: none;
}

.bdStudOnboardFieldError {
  font-size: 0.78rem;
  color: var(--bdOnboard-red);
  margin-top: 4px;
}

.bdStudOnboardPrefixWrap {
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bdOnboard-bgCard);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardPrefixWrap:focus-within {
  border-color: var(--bdInputFocusBorder);
  box-shadow: 0 0 0 3px var(--bdInputFocusShadow);
}

.bdStudOnboardPrefixLabel {
  background: var(--bdBgAlt);
  border-right: 1px solid var(--bdBorder);
  padding: 0.8rem 1rem;
  font-size: 0.84rem;
  color: var(--bdOnboard-silver);
  white-space: nowrap;
}

.bdStudOnboardAvatarBlock {
  background: var(--bdOnboard-bgCard);
  border: 1.5px dashed var(--bdOnboard-border);
  border-radius: 16px;
  transition: border-color 0.2s;
}

.bdStudOnboardAvatarBlock:hover {
  border-color: var(--bdOnboard-gold);
}

.bdStudOnboardAvatarSquare {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  background: linear-gradient(135deg,
      var(--bdOnboard-gold),
      var(--site-primary-color));
  color: var(--bdStudOnboard-textOnColor);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.bdStudOnboardAvatarSquare:hover {
  opacity: 0.85;
}

.bdStudOnboardAvatarIcon {
  font-size: 2rem;
  opacity: 0.8;
}

.bdStudOnboardAvatarBtn {
  background: transparent;
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 6px;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition:
    border-color 0.2s,
    color 0.2s;
}

.bdStudOnboardAvatarBtn:hover {
  border-color: var(--bdOnboard-gold);
  color: var(--bdOnboard-gold);
}

.bdStudOnboardAvatarBtnRemove {
  color: var(--site-error-color);
  border-color: var(--bdErrorBg);
}

.bdStudOnboardAvatarBtnRemove:hover {
  border-color: var(--site-error-color);
  color: var(--site-error-color);
}

.bdStudOnboardChip {
  border: 1.5px solid var(--bdOnboard-border);
  background: var(--bdOnboard-bgCard);
  color: var(--bdOnboard-text);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.bdStudOnboardChip:hover {
  border-color: var(--bdOnboard-goldBorder);
  color: var(--bdOnboard-gold);
}

.bdStudOnboardChip.selected {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
}

.bdStudOnboardEduCard {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 16px;
  transition: border-color 0.2s;
}

.bdStudOnboardEduCard:hover {
  border-color: var(--bdOnboard-goldBorder);
}

.bdStudOnboardEduRemove {
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: var(--bdOnboard-error);
  color: var(--bdOnboard-red);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1;
  border: none;
}

.bdStudOnboardEduRemove:hover {
  background: var(--bdErrorBg);
}

.bdStudOnboardAddBtn {
  background: transparent;
  border: 1.5px dashed var(--bdOnboard-goldBorder) !important;
  border-radius: 12px !important;
  color: var(--bdOnboard-gold);
  font-size: 0.84rem;
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition:
    background 0.2s,
    border-color 0.2s;
}

.bdStudOnboardAddBtn:hover {
  background: var(--bdOnboard-goldDim);
  border-color: var(--bdOnboard-gold) !important;
}

.bdStudOnboardTipBox {
  background: var(--bdOnboard-goldDim);
  border: 1px solid var(--bdOnboard-goldBorder);
}

.bdStudOnboardLiFeature {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 12px;
}

.bdStudOnboardLiHero {
  background: var(--bdOnboard-linkedinDim);
  border: 1.5px solid var(--bdStudOnboard-linkedinBorder);
}

.bdStudOnboardLiLogo {
  width: 54px;
  height: 54px;
  background: var(--bdOnboard-linkedin);
  border-radius: 12px;
  color: var(--bdStudOnboard-textOnColor);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--site-secondary-font);
}

.bdStudOnboardBtnLinkedin {
  background: var(--bdOnboard-linkedin);
  color: var(--bdStudOnboard-textOnColor);
  font-family: var(--site-primary-font);
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardBtnLinkedin:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--bdStudOnboard-linkedinShadow);
}

.bdStudOnboardBtnLinkedin:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.bdStudOnboardLiConnected {
  border: 1.5px solid var(--bdStudOnboard-successBorder);
  background: var(--bdStudOnboard-successBg);
  border-radius: 14px;
}

.bdStudOnboardLiAvatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg,
      var(--bdOnboard-linkedin),
      var(--bdStudOnboard-linkedinGradEnd));
  color: var(--bdStudOnboard-textOnColor);
  font-size: 1rem;
}

.bdStudOnboardLiBadge {
  background: var(--bdStudOnboard-successBadgeBg);
  border: 1px solid var(--bdStudOnboard-successBorder);
  color: var(--bdOnboard-green);
  font-size: 0.72rem;
  white-space: nowrap;
}

.bdStudOnboardPreviewCard {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-goldBorder);
  border-radius: 20px;
  box-shadow: 0 0 40px var(--bdOnboard-goldGlow);
}

.bdStudOnboardPreviewAvatar {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg,
      var(--bdOnboard-gold),
      var(--site-primary-color));
  color: var(--bdStudOnboard-textOnColor);
  font-size: 1.2rem;
}

.bdStudOnboardPChip {
  background: var(--bdOnboard-goldDim);
  border: 1px solid var(--bdOnboard-goldBorder);
  color: var(--bdOnboard-gold);
  font-size: 0.72rem;
}

.bdStudOnboardWhatNext {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 16px;
}

.bdStudOnboardFooterNav {
  background: var(--bdStudOnboard-footerBg);
  backdrop-filter: blur(20px);
  border-color: var(--bdBorder) !important;
  z-index: 10;
}

.bdStudOnboardBtnBack {
  background: transparent;
  border: 1.5px solid var(--bdOnboard-border) !important;
  color: var(--bdOnboard-silver);
  font-family: var(--site-primary-font);
  font-size: 0.88rem;
  transition: all 0.2s;
  cursor: pointer;
}

.bdStudOnboardBtnBack:hover:not(:disabled) {
  border-color: var(--bdStudOnboard-borderHover) !important;
  color: var(--bdOnboard-text);
}

.bdStudOnboardBtnBack:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bdStudOnboardBtnNext {
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-primary-font);
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardBtnNext:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

.bdStudOnboardBtnNext.finish {
  background: linear-gradient(135deg,
      var(--bdCta),
      var(--bdStudOnboard-ctaGradEnd));
  color: var(--bdStudOnboard-textOnColor);
}

.bdStudOnboardBtnNext.finish:hover {
  box-shadow: 0 8px 24px var(--bdStudOnboard-ctaShadow);
}

.bdStudOnboardSuccess {
  min-height: 70vh;
  animation: studOnboardSlideIn 0.5s var(--bdOnboard-ease) both;
}

.bdStudOnboardSuccessBurst {
  width: 90px;
  height: 90px;
  background: var(--bdOnboard-goldDim);
  border: 2px solid var(--bdOnboard-goldBorder);
  font-size: 2.8rem;
  box-shadow: 0 0 40px var(--bdOnboard-goldGlow);
  animation: studOnboardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes studOnboardPop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bdStudOnboardSuccessUrl {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-goldBorder) !important;
  border-radius: 12px;
  transition: border-color 0.2s;
}

.bdStudOnboardSuccessUrl:hover {
  border-color: var(--bdOnboard-gold) !important;
}

.bdStudOnboardToast {
  bottom: 2rem;
  right: 2rem;
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-goldBorder) !important;
  border-radius: 12px;
  font-size: 0.84rem;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s var(--bdOnboard-ease);
  max-width: 300px;
  color: var(--bdOnboard-text);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.bdStudOnboardToast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 992px) {
  .bdStudOnboardHeader {
    padding: 0.875rem 1.25rem;
  }

  .bdStudOnboardHeaderRight {
    display: none;
  }

}

.bdStudOnboardLogoImg {
  height: 26px;
}

.bdStudOnboardLiFeatureDesc {
  font-size: 0.78rem;
  line-height: 1.5;
}

.bdStudOnboardLiHeroText {
  max-width: 380px;
  line-height: 1.65;
}

.bdStudOnboardUrlHint {
  font-size: 0.72rem;
}

.bdStudOnboardSuccessText {
  max-width: 420px;
}

.bdStudOnboardSuccessUrl {
  max-width: 400px;
  cursor: pointer;
}

@media (max-width: 576px) {
  .bdStudOnboardContent {
    padding: 1.75rem 1.25rem 5rem;
  }

  .bdStudOnboardTitle {
    font-size: 1.7rem;
  }

  .bdStudOnboardFooterNav {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .bdStudOnboardBtnBack,
  .bdStudOnboardBtnNext {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.82rem;
  }
}

/* ============================================================================
   MERGED FROM bigdot-landingpages-v2.css (css-consolidation)
   Full content appended below (minus @import lines, already at top of this
   file). Appending preserves the original cascade order: this file loaded
   FIRST and landingpages-v2 SECOND in index.html, so later rules here win
   ties exactly as before. Sections: design tokens/utilities, shared landing
   components (bdPricing/bdFaq/...), wedding (bdWed*), mystories (ms*).
   ============================================================================ */

/* ============================================
   BADGE UTILITIES
   ============================================ */
.bdBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bdBadgeBg);
  border: 1px solid var(--bdBadgeBorder);
  color: var(--bdBadgeText);
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================
   SECTION STRIPE UTILITIES
   ============================================ */
.bdSectionAlt {
  background: var(--bdSectionAltBg);
  border-top: 1px solid var(--bdSectionAltBorder);
  border-bottom: 1px solid var(--bdSectionAltBorder);
}

/* ============================================
   STATE SURFACE UTILITIES
   ============================================ */
.bdSuccessSurface {
  background: var(--bdSuccessBg) !important;
  color: var(--site-success-color) !important;
}

.bdErrorSurface {
  background: var(--bdErrorBg) !important;
  color: var(--site-error-color) !important;
}

.bdWarningSurface {
  background: var(--bdWarningBg) !important;
  color: var(--site-warning-color) !important;
}

/* ============================================
   INPUT UTILITIES
   ============================================ */
.bdInput {
  background: var(--bdInputBg);
  border: 1px solid var(--bdInputBorder);
  color: var(--bdInputText);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  font-family: var(--site-body-font);
  font-size: 0.9rem;
  width: 100%;
  outline: none;
  transition:
    border-color var(--bdTransition),
    box-shadow var(--bdTransition);
}

/* ============================================
   CARD UTILITIES
   ============================================ */
.bdCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--bdTransition),
    border-color var(--bdTransition),
    box-shadow var(--bdTransition);
}

.bdCard:hover {
  transform: translateY(-4px);
  border-color: var(--bdBorderStrong);
  box-shadow: var(--shadow-card-hover);
}

/* ============================================
   BUTTON UTILITIES
   ============================================ */
.bdBtnCta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-body-font);
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.bdBtnCta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-cta);
  color: var(--bdCtaText);
}

.bdBtnOutline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--bdText);
  font-family: var(--site-body-font);
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--bdBorder);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.bdBtnOutline:hover {
  border-color: var(--bdAccentAlt);
  background: var(--bdSectionAltBg);
  color: var(--bdText);
}

/* ============================================
   GLOBAL BASE — Theme transitions & scrollbar
   ============================================ */

html {
  scroll-behavior: smooth;
  transition:
    background-color var(--bdTransition),
    color var(--bdTransition);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bdScrollTrack);
}

::-webkit-scrollbar-thumb {
  background: var(--bdScrollThumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bdBorder);
}

/* Selection */
::selection {
  background: var(--bdSelectionBg);
  color: var(--bdSelectionText);
}

::-moz-selection {
  background: var(--bdSelectionBg);
  color: var(--bdSelectionText);
}

/* ============================================
   BigDot Landing Pages v2 - Custom Stylesheet
   Convention: bdPages prefix + camelCase BEM-like
   Bootstrap 5.3 companion file
   ============================================================ */

/* Google Fonts */

/* CSS Variables */
/* ============================================================
   BIGDOT THEME TOKENS
   Apply [data-theme="light"] or [data-theme="dark"] on <html>
   Light mode is default (:root). Dark shifts to neon palette.
   ============================================================ */

/*  LIGHT MODE (default)  */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bdBg: #ffffff;
  --bdBgAlt: #f2f4ff;
  --bdBgCard: #ffffff;
  --bdBgSection: #f8f9ff;
  --bdNavBg: rgba(255, 255, 255, 0.94);

  /* Text */
  --bdText: #1c1a16;
  --bdTextMuted: #808080;
  --bdTextFaint: #a8a8b0;

  /* Keep legacy names aligned */
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;

  /* Brand accents */
  --bdAccent: #1c2d64;
  --bdAccentAlt: #2255e8;
  --bdCta: #f15a25;
  --bdCtaText: #ffffff;
  --bdHighlight: #1c2d64;
  --bdHighlightAlt: #2255e8;

  /* Borders */
  --bdBorder: rgba(28, 45, 100, 0.12);
  --bdBorderStrong: rgba(28, 45, 100, 0.25);
  --bdBorderSubtle: rgba(28, 45, 100, 0.06);

  /* Shadows */
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 8px 32px rgba(241, 90, 37, 0.12);
  --shadow-cta: 0 8px 32px rgba(241, 90, 37, 0.35);

  /* Form inputs */
  --bdInputBg: #ffffff;
  --bdInputBorder: #d1cfc9;
  --bdInputText: #1c1a16;
  --bdInputFocusBorder: #2255e8;
  --bdInputFocusShadow: rgba(34, 85, 232, 0.15);

  /* Badges / pills */
  --bdBadgeBg: rgba(34, 85, 232, 0.08);
  --bdBadgeBorder: rgba(34, 85, 232, 0.2);
  --bdBadgeText: #2255e8;

  /* Section stripe */
  --bdSectionAltBg: rgba(34, 85, 232, 0.03);
  --bdSectionAltBorder: rgba(34, 85, 232, 0.08);

  /* State surfaces */
  --bdSuccessBg: rgba(22, 163, 74, 0.08);
  --bdErrorBg: rgba(220, 38, 38, 0.08);
  --bdWarningBg: rgba(217, 119, 6, 0.08);

  /* Scrollbar */
  --bdScrollTrack: #f2f4ff;
  --bdScrollThumb: rgba(28, 45, 100, 0.18);

  /* Selection */
  --bdSelectionBg: rgba(34, 85, 232, 0.2);
  --bdSelectionText: #1c2d64;

  /* Hero radial blobs */
  --bdHeroBg1: rgba(34, 85, 232, 0.08);
  --bdHeroBg2: rgba(28, 45, 100, 0.06);
  --bdHeroBg3: rgba(241, 90, 37, 0.05);

  /* Marquee strip */
  --bdMarqueeBg: rgba(28, 45, 100, 0.03);
  --bdMarqueeDot: #2255e8;

  /* Feature section */
  --bdFeatureSectionBg: rgba(28, 45, 100, 0.02);

  /* Social proof section */
  --bdSocialSectionBg: rgba(28, 45, 100, 0.02);

  /* Step connector */
  --bdStepLineGrad: linear-gradient(90deg, #2255e8, #1c2d64);

  /* Theme toggle pill */
  --bdToggleBg: rgba(28, 45, 100, 0.12);
  --bdToggleKnob: #1c2d64;
  --bdToggleKnobActive: #c8f135;

  /* Nav CTA glow */
  --bdNavCtaHoverShadow: rgba(241, 90, 37, 0.35);

  /* Card accent colors */

  /* CTA section */
  --bdCtaGlow1: rgba(34, 85, 232, 0.15);

  /* Pro theme accent (used in bdPagesPro* components) */
  --pro-gold: #b8902a;
  --pro-gold-light: #d4a83c;
  --pro-gold-dim: rgba(184, 144, 42, 0.18);
  --pro-gold-border: rgba(184, 144, 42, 0.2);
  --pro-bg: #f8f6f2;
  --pro-bg-card: #ffffff;
  --pro-bg-alt: #f0ece4;
  --pro-border: rgba(184, 144, 42, 0.2);
  --pro-text: #1a1814;
  --pro-muted: #6b6560;
  --pro-faint: #a8a4a0;
}

/*  DARK MODE  */
[data-theme="dark"] {
  /* Surfaces */
  --bdBg: #0a0a0f;
  --bdBgAlt: #13131c;
  --bdBgCard: #13131c;
  --bdBgSection: #0d0d16;
  --bdNavBg: rgba(10, 10, 15, 0.92);

  /* Text */
  --bdText: #fafaf8;
  --bdTextMuted: #6b6b7a;
  --bdTextFaint: #3a3a44;

  /* Legacy names — dark overrides */
  --site-text-color: #fafaf8;
  --site-text-muted-color: #6b6b7a;

  /* Brand accents — neon shift */
  --bdAccent: #c8f135;
  --bdAccentAlt: #1a1aff;
  --bdCta: #c8f135;
  --bdCtaText: #0a0a0f;
  --bdHighlight: #c8f135;
  --bdHighlightAlt: #ff3d8f;

  /* Borders */
  --bdBorder: rgba(255, 255, 255, 0.08);
  --bdBorderStrong: rgba(255, 255, 255, 0.16);
  --bdBorderSubtle: rgba(255, 255, 255, 0.04);

  /* Shadows */
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 8px 32px rgba(200, 241, 53, 0.08);
  --shadow-cta: 0 8px 32px rgba(200, 241, 53, 0.35);

  /* Form inputs */
  --bdInputBg: rgba(255, 255, 255, 0.04);
  --bdInputBorder: rgba(255, 255, 255, 0.1);
  --bdInputText: #fafaf8;
  --bdInputFocusBorder: #c8f135;
  --bdInputFocusShadow: rgba(200, 241, 53, 0.15);

  /* Badges / pills */
  --bdBadgeBg: rgba(200, 241, 53, 0.1);
  --bdBadgeBorder: rgba(200, 241, 53, 0.25);
  --bdBadgeText: #c8f135;

  /* Section stripe */
  --bdSectionAltBg: rgba(255, 255, 255, 0.01);
  --bdSectionAltBorder: rgba(255, 255, 255, 0.04);

  /* State surfaces */
  --bdSuccessBg: rgba(22, 163, 74, 0.12);
  --bdErrorBg: rgba(220, 38, 38, 0.12);
  --bdWarningBg: rgba(217, 119, 6, 0.12);

  /* Scrollbar */
  --bdScrollTrack: #13131c;
  --bdScrollThumb: rgba(255, 255, 255, 0.1);

  /* Selection */
  --bdSelectionBg: rgba(200, 241, 53, 0.25);
  --bdSelectionText: #0a0a0f;

  /* Hero radial blobs */
  --bdHeroBg1: rgba(200, 241, 53, 0.08);
  --bdHeroBg2: rgba(26, 26, 255, 0.06);
  --bdHeroBg3: rgba(255, 61, 143, 0.05);

  /* Marquee strip */
  --bdMarqueeBg: rgba(255, 255, 255, 0.02);
  --bdMarqueeDot: #c8f135;

  /* Feature section */
  --bdFeatureSectionBg: rgba(255, 255, 255, 0.01);

  /* Social proof section */
  --bdSocialSectionBg: rgba(255, 255, 255, 0.01);

  /* Step connector */
  --bdStepLineGrad: linear-gradient(90deg, #c8f135, #1a1aff);

  /* Theme toggle pill */
  --bdToggleBg: rgba(255, 255, 255, 0.1);
  --bdToggleKnob: #fafaf8;
  --bdToggleKnobActive: #c8f135;

  /* Nav CTA glow */
  --bdNavCtaHoverShadow: rgba(200, 241, 53, 0.35);

  /* Card accent colors */

  /* CTA section */
  --bdCtaGlow1: rgba(200, 241, 53, 0.12);

  /* Pro theme — dark shift */
  --pro-gold: #d4a83c;
  --pro-gold-light: #f0cc6e;
  --pro-gold-dim: rgba(212, 168, 60, 0.2);
  --pro-gold-border: rgba(212, 168, 60, 0.18);
  --pro-bg: #080c12;
  --pro-bg-card: #0d1520;
  --pro-bg-alt: #121c28;
  --pro-border: rgba(184, 144, 42, 0.14);
  --pro-text: #ddd8cc;
  --pro-muted: #5a6a7a;
  --pro-faint: #8a9aaa;
}

/* Base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bdBg);
  overflow-x: hidden;
  transition:
    background-color var(--bdTransition),
    color var(--bdTransition);
}

/* Animations */
@keyframes bdFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bdFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes bdMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Responsive Overrides */

/* ============================================================
   BigDot Professional Page - bdPagesPro components
   ============================================================ */

/* Pro Color Tokens */
:root {
  --pro-gold: #c9a84c;
  --pro-gold-light: #e8c97a;
  --pro-gold-dim: rgba(201, 168, 76, 0.12);
  --pro-gold-border: rgba(201, 168, 76, 0.2);
  --pro-bg: #0a0a0b;
  --pro-bg-card: #141418;
  --pro-bg-alt: #111114;
  --pro-border: rgba(255, 255, 255, 0.08);
  --pro-border-hover: rgba(255, 255, 255, 0.18);
  --pro-text: #f5f4f0;
  --pro-muted: #9ba3af;
  --pro-faint: #5a5a6a;
}

[data-theme="light"] {
  --pro-bg: #faf9f6;
  --pro-bg-card: #ffffff;
  --pro-bg-alt: #f3f1ec;
  --pro-border: rgba(28, 45, 100, 0.1);
  --pro-border-hover: rgba(201, 168, 76, 0.35);
  --pro-text: #1c1a16;
  --pro-muted: #6b6470;
  --pro-faint: #9b97a3;
}

/* ============================================================
   BigDot Onboarding Pages - Shared Tokens
   Convention: bdPagesProOnboard* (pro) / bdPagesOnboard* (students)
   ============================================================ */

/* Onboarding Variables - Light Mode defaults */
:root {
  --bdOnboard-bg: #f6f5f2;
  --bdOnboard-bgOff: #eeede9;
  --bdOnboard-bgCard: #ffffff;
  --bdOnboard-bgCard2: #f5f3ee;
  --bdOnboard-text: #1a1a1e;
  --bdOnboard-silver: #6b6b7a;
  --bdOnboard-muted: #9a9aaa;
  --bdOnboard-gold: #c9a84c;
  --bdOnboard-goldDim: rgba(201, 168, 76, 0.08);
  --bdOnboard-goldGlow: rgba(201, 168, 76, 0.1);
  --bdOnboard-goldBorder: rgba(201, 168, 76, 0.18);
  --bdOnboard-border: rgba(0, 0, 0, 0.08);
  --bdOnboard-borderFocus: rgba(201, 168, 76, 0.4);
  --bdOnboard-green: #18a262;
  --bdOnboard-red: #e53e3e;
  --bdOnboard-error: rgba(229, 62, 62, 0.08);
  --bdOnboard-linkedin: #0a66c2;
  --bdOnboard-linkedinDim: rgba(10, 102, 194, 0.08);
  --bdOnboard-white20: rgba(26, 26, 30, 0.12);
  --bdOnboard-white08: rgba(26, 26, 30, 0.05);
  --bdOnboard-ink3: #f0ede8;
  --bdOnboard-ink4: #e8e5de;
  --bdOnboard-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Onboarding Variables - Dark Mode overrides */
[data-theme="dark"] {
  --bdOnboard-bg: #09090b;
  --bdOnboard-bgOff: #111113;
  --bdOnboard-bgCard: #141417;
  --bdOnboard-bgCard2: #1a1a1f;
  --bdOnboard-text: #f2f0ea;
  --bdOnboard-silver: #8a9099;
  --bdOnboard-muted: #444454;
  --bdOnboard-goldDim: rgba(201, 168, 76, 0.12);
  --bdOnboard-goldGlow: rgba(201, 168, 76, 0.18);
  --bdOnboard-goldBorder: rgba(201, 168, 76, 0.25);
  --bdOnboard-border: rgba(255, 255, 255, 0.08);
  --bdOnboard-borderFocus: rgba(201, 168, 76, 0.5);
  --bdOnboard-green: #4ade80;
  --bdOnboard-red: #f87171;
  --bdOnboard-error: rgba(248, 113, 113, 0.1);
  --bdOnboard-linkedinDim: rgba(10, 102, 194, 0.12);
  --bdOnboard-white20: rgba(242, 240, 234, 0.2);
  --bdOnboard-white08: rgba(242, 240, 234, 0.08);
  --bdOnboard-ink3: #181824;
  --bdOnboard-ink4: #1e1e2c;
}

@keyframes bdOnboardPanelIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bdOnboardPopIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Keyframes */
@keyframes bdOnboardSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bdOnboardPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes bdOnboardNavPulse {

  0%,
  100% {
    box-shadow: 0 0 8px var(--bdOnboard-gold);
  }

  50% {
    box-shadow:
      0 0 20px var(--bdOnboard-gold),
      0 0 40px rgba(200, 168, 75, 0.3);
  }
}

@keyframes bdOnboardSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bdOnboardSuccessPop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===================================================================
   ===== Wedding Site Styles =====
   Source: wedding-site.css (BigDot Wedding Websites — Landing Page)
   All classes prefixed with bdWed / bdWedWiz — no conflicts with
   existing bdPages* selectors above.

   Conflict resolution notes:
   - :root variables merged below (bdWed* names don't clash with
     site-* / bd* names already declared above).
   - Universal * reset (margin/padding 0) already absorbed into the
     base * rule above; duplicate rule omitted here.
   - body, h1-h6, a, section: wedding-site declares bare element
     rules used exclusively by the wedding landing page. They are
     kept here and will apply site-wide. The wedding body rules use
     var(--bdWedText) / var(--bdWedWhite) which are defined below,
     so they take effect once those variables are in scope.  The
     font-smoothing and overflow-x:hidden on body are additive and
     harmless.
   =================================================================== */

/* --- Wedding CSS Variables (appended to :root) --- */
:root {
  --bdWedGold: #e11d63;
  --bdWedGoldLight: #fbc1d4;
  --bdWedGoldDark: #9f1239;
  --bdWedBeige: #fff1f5;
  --bdWedBeigeDark: #ffe4ec;
  --bdWedCream: #fffafb;
  --bdWedText: #2d2a26;
  --bdWedTextMuted: #6b6560;
  --bdWedWhite: #ffffff;
  --bdWedShadowSm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --bdWedShadowMd: 0 8px 30px rgba(0, 0, 0, 0.08);
  --bdWedShadowLg: 0 16px 50px rgba(0, 0, 0, 0.1);
  --bdWedRadius: 16px;
}

/* --- Wedding Base & Typography ---
   These bare-element rules apply only when the wedding landing page
   is loaded (it has its own font imports for Playfair Display /
   Poppins). They extend rather than break the v2 base rules. */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--site-secondary-font);
  font-weight: 500;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

/* --- Reusable Components --- */

.bdWedSectionTitle {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bdWedText);
  margin-bottom: 16px;
  line-height: 1.25;
}

.bdWedSectionSubtitle {
  font-size: 1.1rem;
  color: var(--bdWedTextMuted);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

.bdWedFeatureBadgeLabel {
  display: inline-block;
  background: linear-gradient(135deg,
      rgba(225, 29, 99, 0.15),
      rgba(225, 29, 99, 0.08));
  color: var(--bdWedGoldDark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
}

/* --- Buttons --- */

.bdWedBtnPrimary {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  border: none;
  font-family: var(--site-primary-font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(225, 29, 99, 0.35);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bdWedBtnPrimary:hover {
  background: linear-gradient(135deg, var(--bdWedGoldDark), #9f1239);
  color: var(--bdWedWhite);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(225, 29, 99, 0.45);
}

.bdWedBtnSecondary {
  background: var(--bdWedWhite);
  color: var(--bdWedText);
  border: 2px solid var(--bdWedBeigeDark);
  font-family: var(--site-primary-font);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bdWedBtnSecondary:hover {
  border-color: var(--bdWedGold);
  color: var(--bdWedGoldDark);
  background: var(--bdWedBeige);
  transform: translateY(-2px);
}

.bdWedBtnLg {
  padding: 16px 40px;
  font-size: 1.05rem;
}

.bdWedBtnXl {
  padding: 20px 52px;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}

.bdWedBtnBlock {
  width: 100%;
  justify-content: center;
}

/* --- Navbar --- */

.bdWedNavbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(225, 29, 99, 0.1);
  padding: 12px 0;
  z-index: 1050;
  transition: all 0.3s ease;
}

.bdWedLogo {
  font-family: var(--site-secondary-font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bdWedText) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWedLogoAccent {
  color: var(--bdWedGold);
}

.bdWedNavLinks .nav-link {
  font-family: var(--site-primary-font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bdWedTextMuted);
  padding: 8px 18px !important;
  transition: color 0.3s ease;
}

.bdWedNavLinks .nav-link:hover {
  color: var(--bdWedGold);
}

.bdWedBtnNav {
  padding: 10px 24px;
  font-size: 0.88rem;
  margin-left: 8px;
}

.bdWedNavCta {
  margin-left: 8px;
}

.bdWedToggler {
  border: none;
  box-shadow: none !important;
}

/* --- Hero Section --- */

.bdWedHeroSection {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg,
      var(--bdWedCream) 0%,
      var(--bdWedBeige) 40%,
      rgba(225, 29, 99, 0.08) 100%);
  overflow: hidden;
  padding-top: 100px;
}

.bdWedHeroOverlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%,
      rgba(225, 29, 99, 0.08) 0%,
      transparent 50%),
    radial-gradient(ellipse at 80% 20%,
      rgba(225, 29, 99, 0.06) 0%,
      transparent 50%);
  pointer-events: none;
}

.bdWedHeroRow {
  min-height: calc(100vh - 100px);
}

.bdWedHeroContent {
  position: relative;
  z-index: 2;
  padding: 40px 0;
}

.bdWedHeroBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg,
      rgba(225, 29, 99, 0.12),
      rgba(225, 29, 99, 0.06));
  color: var(--bdWedGoldDark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 28px;
}

.bdWedBtnHero {
  padding: 16px 36px;
  font-size: 1rem;
}

/* Hero Mockup */

.bdWedHeroMockup:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

.bdWedMockupBrowser {
  background: var(--bdWedBeige);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bdWedBeigeDark);
}

/* --- Social Proof Section --- */

.bdWedSocialProof {
  background: var(--bdWedWhite);
  padding: 80px 0;
}

.bdWedProofHeader {
  margin-bottom: 48px;
}

.bdWedProofBadge {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}

.bdWedProofBadge i {
  color: var(--bdWedGold);
  font-size: 1.1rem;
}

.bdWedTestimonialStars i {
  color: var(--bdWedGold);
  font-size: 0.85rem;
}

.bdWedTestimonialText {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--bdWedText);
  margin-bottom: 20px;
  font-style: italic;
}

.bdWedTestimonialAuthor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bdWedTestimonialAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Testimonials Marquee (two auto-scrolling rows) --- */

.bdWedMarquee {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
  /* Soft fade at both edges so cards drift in/out gracefully */
  -webkit-mask-image: linear-gradient(90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent);
  mask-image: linear-gradient(90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent);
}

.bdWedMarqueeRow {
  overflow: hidden;
  padding: 10px 0;
}

.bdWedMarqueeTrack {
  display: flex;
  width: max-content;
  align-items: stretch;
}

.bdWedMarqueeRowLeft .bdWedMarqueeTrack {
  animation: bdWedMarqueeLeft 48s linear infinite;
}

.bdWedMarqueeRowRight .bdWedMarqueeTrack {
  animation: bdWedMarqueeRight 56s linear infinite;
}

/* Pause whichever row the visitor hovers */
.bdWedMarqueeRow:hover .bdWedMarqueeTrack {
  animation-play-state: paused;
}

@keyframes bdWedMarqueeLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes bdWedMarqueeRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.bdWedReviewCard {
  flex: 0 0 auto;
  width: 372px;
  margin-right: 24px;
  background: var(--bdWedWhite);
  border: 1px solid var(--bdWedBeigeDark);
  border-radius: var(--bdWedRadius);
  padding: 26px 26px 22px;
  box-shadow: var(--bdWedShadowSm);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.bdWedReviewCard:hover {
  box-shadow: var(--bdWedShadowMd);
  border-color: var(--bdWedGoldLight);
}

.bdWedReviewStars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.bdWedReviewStars i {
  color: var(--bdWedGold);
  font-size: 0.8rem;
}

.bdWedReviewText {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bdWedText);
  font-style: italic;
  margin: 0 0 22px;
  flex-grow: 1;
}

.bdWedReviewFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bdWedReviewPerson {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bdWedReviewAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bdWedBeigeDark);
}

.bdWedReviewMeta {
  min-width: 0;
}

.bdWedReviewMeta strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--bdWedText);
  white-space: nowrap;
}

.bdWedReviewFlag {
  font-size: 0.95rem;
  line-height: 1;
}

.bdWedReviewMeta span {
  display: block;
  font-size: 0.75rem;
  color: var(--bdWedTextMuted);
  white-space: nowrap;
}

.bdWedReviewTag {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bdWedGoldDark);
  background: var(--bdWedBeige);
  border: 1px solid var(--bdWedGoldLight);
  border-radius: 50px;
  padding: 5px 11px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .bdWedReviewCard {
    width: 300px;
    margin-right: 16px;
    padding: 22px 20px 18px;
  }

  .bdWedReviewText {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .bdWedMarqueeRowLeft .bdWedMarqueeTrack,
  .bdWedMarqueeRowRight .bdWedMarqueeTrack {
    animation: none;
  }
}

/* --- Features Section --- */

.bdWedFeaturesSection {
  background: var(--bdWedBeige);
}

.bdWedFeatureHeader {
  margin-bottom: 56px;
}

.bdWedFeatureCard {
  background: var(--bdWedWhite);
  border: 1px solid rgba(225, 29, 99, 0.1);
  border-radius: var(--bdWedRadius);
  padding: 36px 28px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bdWedFeatureCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bdWedGold), var(--bdWedGoldLight));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bdWedFeatureCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--bdWedShadowLg);
}

.bdWedFeatureCard:hover::before {
  opacity: 1;
}

.bdWedFeatureCardPopular {
  border-color: var(--bdWedGold);
  box-shadow: var(--bdWedShadowMd);
}

.bdWedFeatureCardPopular::before {
  opacity: 1;
}

.bdWedPopularBadge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bdWedFeatureIcon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg,
      rgba(225, 29, 99, 0.12),
      rgba(225, 29, 99, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.bdWedFeatureIcon i {
  font-size: 1.5rem;
  color: var(--bdWedGold);
}

.bdWedFeatureTitle {
  font-family: var(--site-primary-font);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.bdWedFeatureDesc {
  font-size: 0.88rem;
  color: var(--bdWedTextMuted);
  line-height: 1.7;
  margin-bottom: 18px;
}

.bdWedFeatureList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bdWedFeatureList li {
  font-size: 0.83rem;
  color: var(--bdWedText);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWedFeatureList li i {
  color: var(--bdWedGold);
  font-size: 0.8rem;
}

/* --- How It Works --- */

.bdWedHowItWorks {
  background: var(--bdWedWhite);
}

.bdWedHowHeader {
  margin-bottom: 56px;
}

.bdWedStepsRow {
  position: relative;
}

.bdWedStepsRow>.col-md-4 {
  position: relative;
}

.bdWedStepCard {
  text-align: center;
  padding: 40px 28px;
  background: var(--bdWedWhite);
  border: 1px solid var(--bdWedBeigeDark);
  border-radius: var(--bdWedRadius);
  position: relative;
  transition: all 0.3s ease;
}

.bdWedStepCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bdWedShadowMd);
  border-color: var(--bdWedGoldLight);
}

.bdWedStepNumber {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.bdWedStepIcon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bdWedBeige);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.bdWedStepIcon i {
  font-size: 1.8rem;
  color: var(--bdWedGold);
}

.bdWedStepTitle {
  font-family: var(--site-primary-font);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.bdWedStepDesc {
  font-size: 0.88rem;
  color: var(--bdWedTextMuted);
  line-height: 1.7;
}

.bdWedStepConnector {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  color: var(--bdWedGoldLight);
  font-size: 1.4rem;
  z-index: 2;
}

.bdWedHowCta {
  margin-top: 48px;
}

/* --- Demo Section --- */

.bdWedDemoSection {
  background: var(--bdWedBeige);
}

.bdWedDemoHeader {
  margin-bottom: 48px;
}

.bdWedDemoCard {
  background: var(--bdWedWhite);
  border-radius: var(--bdWedRadius);
  overflow: hidden;
  border: 1px solid rgba(225, 29, 99, 0.1);
  transition: all 0.3s ease;
  height: 100%;
}

.bdWedDemoCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--bdWedShadowLg);
}

.bdWedDemoCardImg {
  background: linear-gradient(135deg, #ffe0eb, #fbc1d4);
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bdWedDemoCardImg i {
  font-size: 2.5rem;
  color: var(--bdWedGoldDark);
}

.bdWedDemoCardImg span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bdWedGoldDark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bdWedDemoCardBody {
  padding: 24px;
}

.bdWedDemoCardBody h4 {
  font-family: var(--site-primary-font);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.bdWedDemoCardBody p {
  font-size: 0.88rem;
  color: var(--bdWedTextMuted);
  line-height: 1.6;
  margin: 0;
}

/* --- Gift Registry Section --- */

.bdWedGiftSection {
  background: var(--bdWedWhite);
}

.bdWedGiftRow {
  gap: 0;
}

.bdWedGiftVisual {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.bdWedGiftMockup {
  width: 100%;
  max-width: 380px;
  background: var(--bdWedWhite);
  border-radius: var(--bdWedRadius);
  box-shadow: var(--bdWedShadowLg);
  overflow: hidden;
  border: 1px solid rgba(225, 29, 99, 0.15);
}

.bdWedGiftMockupHeader {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1rem;
}

.bdWedGiftMockupBody {
  padding: 20px 24px;
}

.bdWedGiftItem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bdWedBeigeDark);
}

/* --- Pricing Section --- */

.bdWedPricingSection {
  background: var(--bdWedBeige);
}

.bdWedPricingHeader {
  margin-bottom: 56px;
}

.bdWedPricingCard {
  background: var(--bdWedWhite);
  border: 1px solid var(--bdWedBeigeDark);
  border-radius: var(--bdWedRadius);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bdWedPricingCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bdWedShadowMd);
}

.bdWedPricingCardPopular {
  border-color: var(--bdWedGold);
  box-shadow: var(--bdWedShadowMd);
  transform: scale(1.03);
}

.bdWedPricingCardPopular:hover {
  transform: scale(1.03) translateY(-4px);
}

.bdWedPricingPopularBadge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bdWedPricingName {
  font-family: var(--site-primary-font);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bdWedTextMuted);
  margin-bottom: 8px;
}

.bdWedPricingPrice {
  font-family: var(--site-secondary-font);
  font-size: 3rem;
  font-weight: 700;
  color: var(--bdWedText);
  line-height: 1;
  margin-bottom: 4px;
}

.bdWedPricingPeriod {
  font-size: 0.82rem;
  color: var(--bdWedTextMuted);
  margin-bottom: 28px;
}

.bdWedPricingFeatures {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
  flex-grow: 1;
}

.bdWedPricingFeatures li {
  font-size: 0.88rem;
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bdWedText);
}

.bdWedPricingFeatures li i {
  color: var(--bdWedGold);
  font-size: 0.85rem;
}

/* --- Final CTA --- */

.bdWedFinalCta {
  position: relative;
  background: linear-gradient(160deg, var(--bdWedText) 0%, #1a1815 100%);
  padding: 120px 0;
  overflow: hidden;
}

.bdWedFinalCtaOverlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%,
      rgba(225, 29, 99, 0.15) 0%,
      transparent 60%),
    radial-gradient(ellipse at 70% 50%,
      rgba(225, 29, 99, 0.1) 0%,
      transparent 60%);
  pointer-events: none;
}

.bdWedFinalCtaContent {
  position: relative;
  z-index: 2;
}

.bdWedFinalCtaTitle {
  font-size: 3rem;
  font-weight: 700;
  color: var(--bdWedWhite);
  margin-bottom: 16px;
}

.bdWedFinalCtaSubtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.bdWedFinalCtaTrust {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bdWedFinalCtaTrust i {
  color: var(--bdWedGold);
}

/* --- Footer --- */

.bdWedFooter {
  background: #1a1815;
  padding: 64px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.bdWedFooterBrand {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bdWedWhite);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWedFooterDesc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.bdWedFooterSocials {
  display: flex;
  gap: 12px;
}

.bdWedFooterSocials a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.bdWedFooterSocials a:hover {
  background: var(--bdWedGold);
  color: var(--bdWedWhite);
  transform: translateY(-2px);
}

/* ============================================
   Wedding Responsive Styles
   ============================================ */

@media (max-width: 991.98px) {

  .bdWedSectionTitle {
    font-size: 2rem;
  }

  .bdWedFinalCtaTitle {
    font-size: 2.2rem;
  }

  .bdWedNavCta {
    margin-left: 0;
    margin-top: 12px;
  }

  .bdWedBtnNav {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  section {
    padding: 72px 0;
  }

  .bdWedSectionTitle {
    font-size: 1.75rem;
  }

  .bdWedHeroCtas {
    flex-direction: column;
  }

  .bdWedBtnHero {
    text-align: center;
    justify-content: center;
  }

  .bdWedBtnHeroSecondary {
    justify-content: center;
  }

  .bdWedStepConnector {
    display: none !important;
  }

  .bdWedFinalCta {
    padding: 80px 0;
  }

  .bdWedFinalCtaTitle {
    font-size: 1.85rem;
  }

  .bdWedFinalCtaTrust {
    flex-direction: column;
    gap: 8px;
  }

  .bdWedPricingCardPopular {
    transform: none;
  }

  .bdWedPricingCardPopular:hover {
    transform: translateY(-4px);
  }

  .bdWedFooterNewsletter {
    flex-direction: column;
  }

  .bdWedFooterBottom {
    flex-direction: column;
    text-align: center;
  }

  .bdWedMockupEvents {
    gap: 8px;
    padding: 16px 10px;
  }

  .bdWedMockupNav {
    gap: 8px;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {

  .bdWedSectionTitle {
    font-size: 1.5rem;
  }

  .bdWedBtnXl {
    padding: 16px 32px;
    font-size: 1rem;
  }

  .bdWedHeroSection .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bdWedHeroBadge {
    margin-bottom: 14px;
  }

  .bdWedBtnHero {
    padding: 14px 20px;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
  }

  .bdWedPricingPrice {
    font-size: 2.5rem;
  }
}

/* ============================================
   BigDot Wizard v2 — bdWedWiz prefix
   ============================================ */

/* --- Modal Overlay --- */

.bdWedWizModal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.bdWedWizModal.bdWedWizOpen {
  opacity: 1;
  visibility: visible;
}

.bdWedWizBackdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      var(--bdWedCream) 0%,
      var(--bdWedBeige) 35%,
      var(--bdWedGoldLight) 70%,
      var(--bdWedGold) 100%);
}

.bdWedWizBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%,
      rgba(225, 29, 99, 0.18) 0%,
      transparent 55%),
    radial-gradient(ellipse at 80% 70%,
      rgba(168, 135, 46, 0.12) 0%,
      transparent 55%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* --- Dialog Shell --- */

.bdWedWizDialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bdWedWizOpen .bdWedWizDialog {
  transform: translateY(0) scale(1);
}

/* --- Left Panel (hidden in new design) --- */
.bdWedWizLeft {
  display: none;
}

/* Keep left step elements for JS compatibility */
.bdWedWizLeftStep,
.bdWedWizLeftLine {
  display: none;
}

/* --- Main Card --- */

.bdWedWizRight {
  width: 520px;
  max-width: calc(100vw - 80px);
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

/* --- Card Header --- */

.bdWedWizCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #f2ede7;
  flex-shrink: 0;
}

.bdWedWizHeaderBtn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1.5px solid #f3d9e2;
  background: #fff;
  color: #888280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  position: static;
}

.bdWedWizHeaderBtn:hover {
  background: #fff1f5;
  color: #444;
}

/* Keep .bdWedWizClose pointing to the round button */
.bdWedWizClose {
  display: none;
}

/* In-header close button (right side of header) */
.bdWedWizHeaderCloseBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #f3d9e2;
  background: #fff;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.bdWedWizHeaderCloseBtn:hover {
  background: var(--bdWedBeige);
  border-color: var(--bdWedGoldLight);
  color: var(--bdWedGoldDark);
}

/* --- Progress bar (thin, hidden label) --- */
.bdWedWizProgressTrack {
  height: 3px;
  background: #f0ebe4;
  width: 100%;
  flex-shrink: 0;
}

.bdWedWizProgressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--bdWedGold), var(--bdWedGoldDark));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bdWedWizStepCounter {
  display: none;
}

/* --- Steps Container --- */

.bdWedWizStepsWrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.bdWedWizStep {
  position: absolute;
  inset: 0;
  padding: 18px 24px 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}

.bdWedWizStep.bdWedWizStepActive {
  display: flex;
  animation: none;
}

/* Slide transitions */
.bdWedWizStep.bdWedWizEnterRight {
  display: flex;
  animation: bdWedWizSlideInRight 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bdWedWizStep.bdWedWizEnterLeft {
  display: flex;
  animation: bdWedWizSlideInLeft 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bdWedWizStep.bdWedWizExitLeft {
  display: flex;
  animation: bdWedWizSlideOutLeft 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bdWedWizStep.bdWedWizExitRight {
  display: flex;
  animation: bdWedWizSlideOutRight 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes bdWedWizSlideInRight {
  from {
    transform: translateX(40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bdWedWizSlideInLeft {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bdWedWizSlideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-40px);
    opacity: 0;
  }
}

@keyframes bdWedWizSlideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

/* --- Step Illustration --- */

/* Old step head classes kept for success step */

/* --- Form Fields --- */

.bdWedWizForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bdWedWizField {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bdWedWizLabel {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2d2a26;
}

.bdWedWizReq {
  color: var(--bdWedGoldDark);
}

.bdWedWizInput {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #ffd9e4;
  border-radius: 12px;
  font-family: var(--site-primary-font);
  font-size: 0.92rem;
  color: #2d2a26;
  background: #fff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.bdWedWizInput::placeholder {
  color: #b8b2aa;
}

.bdWedWizInput:focus {
  border-color: #e11d63;
  box-shadow: 0 0 0 3px rgba(225, 29, 99, 0.1);
}

.bdWedWizInput.bdWedWizInputErr {
  border-color: #c0192c;
  box-shadow: 0 0 0 3px rgba(192, 25, 44, 0.08);
}

.bdWedWizErr {
  font-size: 0.72rem;
  color: #c0192c;
  min-height: 14px;
}

/* Verify (OTP) step */
.bdWedWizVerifyHint {
  font-size: 0.82rem;
  color: #6b655e;
  text-align: center;
  margin: 0 0 4px;
}

.bdWedWizResendRow {
  display: flex;
  justify-content: center;
  font-size: 0.78rem;
  min-height: 18px;
}

.bdWedWizResendTimer {
  color: #b8b2aa;
}

.bdWedWizResendLink {
  color: var(--bdWedGoldDark);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bdWedWizResendLink:hover {
  text-decoration: underline;
}

/* Phone row */
.bdWedWizPhoneRow {
  display: flex;
  gap: 8px;
}

.bdWedWizPhoneRow .bdWedWizInput {
  flex: 1;
}

/* Custom checkbox */
.bdWedWizCheckRow {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}

.bdWedWizCheckInput {
  display: none;
}

.bdWedWizCheckBox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #ffd9e4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
}

.bdWedWizCheckBox::after {
  content: "\2713";
  font-size: 0.72rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bdWedWizCheckInput:checked+.bdWedWizCheckBox {
  background: var(--bdWedGold);
  border-color: transparent;
}

.bdWedWizCheckInput:checked+.bdWedWizCheckBox::after {
  opacity: 1;
}

.bdWedWizCheckText {
  font-size: 0.85rem;
  color: #8a847e;
}

/* --- Calendar --- */

/* Date display pill */

/* --- Nav Bar --- */

.bdWedWizNavBar {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 22px;
  flex-shrink: 0;
}

/* Back button hidden — back is in card header */

.bdWedWizBtnNext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--site-primary-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(225, 29, 99, 0.35);
  transition: all 0.2s ease;
}

.bdWedWizBtnNext:hover {
  background: linear-gradient(135deg, var(--bdWedGoldDark), #9f1239);
  box-shadow: 0 6px 22px rgba(225, 29, 99, 0.45);
  transform: translateY(-1px);
}

.bdWedWizBtnNext:active {
  transform: translateY(0);
}

/* --- Success Step --- */

.bdWedWizSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
  flex: 1;
}

.bdWedWizSuccessRing {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(225, 29, 99, 0.1);
  border: 2px solid rgba(225, 29, 99, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: bdWedWizSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes bdWedWizSuccessPop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bdWedWizSuccessCheck {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 6px 20px rgba(225, 29, 99, 0.4);
}

.bdWedWizSuccessTitle {
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #2d2a26;
  margin-bottom: 8px;
  display: block !important;
  font-family: var(--site-secondary-font);
}

.bdWedWizSuccessBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.bdWedWizSuccessBtn:hover {
  background: linear-gradient(135deg, var(--bdWedGoldDark), #9f1239);
  color: #fff;
  transform: translateY(-1px);
}

.bdWedWizSuccessNote {
  font-size: 0.75rem;
  color: #8a847e;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Modern Stepper (below card) --- */

.bdWedWizFloatNav {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 14px;
  width: 520px;
  max-width: calc(100vw - 80px);
  padding: 16px 24px 14px;
  position: relative;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Full-width gray track */
.bdWedWizFloatNav::before {
  content: "";
  position: absolute;
  top: calc(16px + 20px);
  left: calc(24px + 20px);
  right: calc(24px + 20px);
  height: 1.5px;
  background: #ffe4ec;
  z-index: 0;
  border-radius: 2px;
}

.bdWedWizFloatStep {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Progress connector to next step */
.bdWedWizFloatStep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(50% + 21px);
  width: calc(100% - 42px);
  height: 1.5px;
  background: #ffe4ec;
  z-index: 0;
  border-radius: 2px;
  transition: background 0.4s ease;
}

.bdWedWizFloatStep.bdWedWizFloatStepDone:not(:last-child)::after {
  background: linear-gradient(90deg, #e11d63 40%, #e8d89a 100%);
}

/* Base circle */
.bdWedWizFloatStepCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #f4f0ec;
  border: 1.5px solid #f3d9e2;
  color: #b8b0a6;
  box-shadow: none;
}

/* Step number — shown for future steps */
.bdWedWizFloatStepNum {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  letter-spacing: -0.2px;
}

/* Icon — hidden for future, shown for active */
.bdWedWizFloatStepIcon {
  display: none;
  align-items: center;
  justify-content: center;
}

/* Checkmark — hidden by default */
.bdWedWizFloatStepCheck {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  position: absolute;
}

/* Step label */
.bdWedWizFloatStepLabel {
  font-size: 0.65rem;
  font-weight: 500;
  color: #c0b8ae;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.28s ease,
    font-weight 0.2s ease;
  text-transform: uppercase;
}

/* Active state */
.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepCircle {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  border-color: var(--bdWedGold);
  color: #fff;
  transform: scale(1.15);
  box-shadow:
    0 0 0 5px rgba(225, 29, 99, 0.15),
    0 6px 22px rgba(225, 29, 99, 0.4);
}

.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepNum {
  display: flex;
}

.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepIcon {
  display: flex;
}

.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepLabel {
  color: var(--bdWedGoldDark);
  font-weight: 700;
}

/* Done state */
.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepCircle {
  background: #e11d63;
  border-color: #e11d63;
  color: #fff;
  transform: scale(0.86);
  box-shadow: 0 2px 12px rgba(225, 29, 99, 0.35);
}

.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepNum {
  display: none;
}

.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepIcon {
  display: none;
}

.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepCheck {
  display: flex;
}

.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepLabel {
  color: #e11d63;
  font-weight: 600;
}

/* --- Wizard Responsive --- */

@media (max-width: 560px) {

  /* Hide background on mobile — card fills full screen */
  .bdWedWizBackdrop {
    background-image: none !important;
    background: #fff !important;
  }

  .bdWedWizBackdrop::after {
    display: none;
  }

  .bdWedWizModal {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }

  .bdWedWizDialog {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 100dvh;
    gap: 0;
  }

  /* Card fills full screen */
  .bdWedWizRight {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    flex: 1;
    min-height: 100dvh;
    max-height: none;
    box-shadow: none;
  }

  /* Stepper on mobile */
  .bdWedWizFloatNav {
    width: 100%;
    max-width: 100%;
    padding: 10px 16px 14px;
    margin-top: 0;
    background: #faf8f5;
    border-top: 1px solid #ede8e0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bdWedWizFloatNav::before {
    top: calc(10px + 18px);
    left: calc(16px + 18px);
    right: calc(16px + 18px);
  }

  .bdWedWizFloatStepCircle {
    width: 36px;
    height: 36px;
  }

  .bdWedWizFloatStep:not(:last-child)::after {
    top: 17px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
  }

  .bdWedWizFloatStepLabel {
    font-size: 0.58rem;
    letter-spacing: 0.2px;
  }

  .bdWedWizStep {
    padding: 14px 20px 0;
  }

  .bdWedWizNavBar {
    padding: 10px 20px 16px;
  }

  .bdWedWizCalGrid {
    gap: 1px;
    padding: 5px;
  }

  .bdWedWizCalCell {
    font-size: 0.7rem;
  }

  .bdWedWizIllusSvg {
    width: 68px;
    height: 68px;
  }

  .bdWedWizIllusImg {
    width: 60px;
    /* height: 90px; */
  }

  .bdWedWizIllusWrap {
    padding-top: 0;
    margin-bottom: 12px;
  }
}

/* ============================================
   MyStory Exclusive — ms prefix (camelCase)
   Light / Dark mode — Light is default
   ============================================ */

/* --- Theme CSS Variables --- */

:root,
[data-bs-theme="light"] {
  --msVoid: #f8f6f2;
  --msInk: #f0ece4;
  --msInk2: #ffffff;
  --msGold: #b8902a;
  --msGold2: #c9a030;
  --msGold3: #d4a83c;
  --msText: #1a1814;
  --msMuted: #6b6560;
  --msMuted2: #8a8480;
  --msBorder: rgba(184, 144, 42, 0.28);
  --msBorder2: rgba(0, 0, 0, 0.08);
  --msNavBg: rgba(248, 246, 242, 0.96);
  --msDarkSectionBg: #f0ece4;
  --msHeroLineBg: rgba(184, 144, 42, 0.07);
  --msCardBg: #ffffff;
  --msCardHoverBg: #f8f6f2;
  --msApplySectionBg: #f0ece4;
  --msFooterBg: #e8e4dc;
}

[data-bs-theme="dark"] {
  --msVoid: #030507;
  --msInk: #080c12;
  --msInk2: #0d1520;
  --msGold: #b8902a;
  --msGold2: #d4a83c;
  --msGold3: #f0cc6e;
  --msText: #ddd8cc;
  --msMuted: #5a6a7a;
  --msMuted2: #8a9aaa;
  --msBorder: rgba(184, 144, 42, 0.14);
  --msBorder2: rgba(255, 255, 255, 0.06);
  --msNavBg: rgba(3, 5, 7, 0.93);
  --msDarkSectionBg: #080c12;
  --msHeroLineBg: rgba(184, 144, 42, 0.07);
  --msCardBg: #0d1520;
  --msCardHoverBg: #121c28;
  --msApplySectionBg: #080c12;
  --msFooterBg: #080c12;
}

/* --- Body --- */

.msBody {
  font-family: "Outfit", sans-serif;
  color: var(--msText);
  background-color: var(--msVoid);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

/* --- Cursor: native browser cursor used --- */

.msCursor,
.msCursorRing {
  display: none !important;
}

/* --- Grain overlay (dark mode only) --- */

[data-bs-theme="dark"] .msBody::before,
[data-bs-theme="dark"].msBody::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* --- Spacing helpers --- */

.msPyLg6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (max-width: 991px) {
  .msPyLg6 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* --- Navbar --- */

.msNavbar {
  background: var(--msNavBg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--msBorder);
  min-height: 68px;
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}

.msNavWordmark {
  font-family: var(--site-secondary-font);
  font-size: 18px;
  font-weight: 500;
  color: var(--msText) !important;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.2s;
}

.msNavWordmark em {
  font-style: italic;
  color: var(--msGold2);
}

.msNavLink {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msMuted) !important;
  text-decoration: none;
  transition: color 0.2s;
  padding: 6px 2px !important;
}

.msNavLink:hover {
  color: var(--msText) !important;
}

.msNavInvite {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msGold2) !important;
  text-decoration: none;
  border: 1px solid var(--msBorder);
  padding: 8px 18px;
  border-radius: 3px;
  transition: all 0.25s;
}

.msNavInvite:hover {
  background: var(--msGold);
  color: #fff !important;
  border-color: var(--msGold);
}

.msNavToggler {
  color: var(--msText);
  box-shadow: none !important;
  border-color: var(--msBorder) !important;
}

.msNavToggler .navbar-toggler-icon {
  filter: none;
}

[data-bs-theme="light"] .msNavToggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231a1814' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .msNavToggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ddd8cc' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Mobile navbar collapse styling */
.msNavbar .navbar-collapse {
  background: var(--msNavBg);
  backdrop-filter: blur(24px);
  padding: 16px 0;
}

@media (min-width: 992px) {
  .msNavbar .navbar-collapse {
    background: transparent;
    backdrop-filter: none;
    padding: 0;
  }
}

/* --- Theme Toggle Button --- */

.msThemeToggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--msBorder);
  background: transparent;
  color: var(--msGold2);
  cursor: pointer !important;
  transition: all 0.2s;
  font-size: 15px;
  flex-shrink: 0;
}

.msThemeToggle:hover {
  background: rgba(184, 144, 42, 0.1);
}

/* Floating theme toggle — fixed top-right, just below the app navbar */
.msThemeFab {
  position: fixed;
  top: 88px;
  right: 20px;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--msNavBg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

@media (max-width: 991px) {
  .msThemeFab {
    top: 78px;
    right: 14px;
  }
}

[data-bs-theme="light"] .msIconDark {
  display: none;
}

[data-bs-theme="light"] .msIconLight {
  display: inline;
}

[data-bs-theme="dark"] .msIconLight {
  display: none;
}

[data-bs-theme="dark"] .msIconDark {
  display: inline;
}

/* --- Brand Logo (header + footer) --- */

.msBrandLogo {
  height: 26px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.msFooter .msBrandLogo {
  height: 22px;
}

/* The supplied asset is a white logo — flip it to dark in light mode so it stays visible. */
[data-bs-theme="light"] .msBrandLogo {
  filter: invert(1) hue-rotate(180deg);
}

/* --- Hero --- */

.msHero {
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
  background-color: var(--msVoid);
  transition: background-color 0.35s ease;
}

.msHeroLines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--msHeroLineBg) 1px, transparent 1px),
    linear-gradient(90deg, var(--msHeroLineBg) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.msHeroPortrait {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 60%,
      rgba(184, 144, 42, 0.09) 0%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.msHeroVignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
      transparent 40%,
      var(--msVoid) 82%);
  pointer-events: none;
  z-index: 1;
  transition: background 0.35s ease;
}

.msHeroInner {
  position: relative;
  z-index: 2;
}

/* Corner ornaments */
.msCorner {
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  opacity: 0.35;
  pointer-events: none;
}

.msCornerTl {
  top: 88px;
  left: 40px;
  border-top: 1px solid var(--msGold);
  border-left: 1px solid var(--msGold);
}

.msCornerTr {
  top: 88px;
  right: 40px;
  border-top: 1px solid var(--msGold);
  border-right: 1px solid var(--msGold);
}

.msCornerBl {
  bottom: 24px;
  left: 40px;
  border-bottom: 1px solid var(--msGold);
  border-left: 1px solid var(--msGold);
}

.msCornerBr {
  bottom: 24px;
  right: 40px;
  border-bottom: 1px solid var(--msGold);
  border-right: 1px solid var(--msGold);
}

@media (max-width: 768px) {
  .msCorner {
    display: none;
  }
}

/* Overline */
.msOverlineRule {
  width: 40px;
  height: 1px;
  background: var(--msGold);
  opacity: 0.5;
  flex-shrink: 0;
}

.msOverlineText {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msGold2);
}

/* Hero headings */
.msHeroH1 {
  font-family: var(--site-secondary-font);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--msText);
  margin-bottom: 16px;
}

.msHeroH1 em {
  font-style: italic;
  color: var(--msGold3);
}

.msHeroH1Sub {
  font-family: var(--site-secondary-font);
  font-size: clamp(22px, 3.5vw, 48px);
  font-style: italic;
  font-weight: 400;
  color: var(--msMuted);
  margin-bottom: 0;
}

/* Divider ornament */
.msHdivLine {
  flex: 0 0 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--msGold), transparent);
}

.msHdivDiamond {
  width: 7px;
  height: 7px;
  background: var(--msGold2);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Hero description */
.msHeroDesc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--msMuted2);
  max-width: 520px;
}

/* --- Buttons --- */

.msBtnGold {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 20px rgba(184, 144, 42, 0.3);
  transition: all 0.25s;
  cursor: pointer;
}

.msBtnGold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184, 144, 42, 0.45);
  color: #0d0a04 !important;
}

.msBtnGhost {
  background: transparent;
  color: var(--msGold2) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid var(--msBorder);
  transition: all 0.25s;
  cursor: pointer;
}

.msBtnGhost:hover {
  background: rgba(184, 144, 42, 0.07);
  border-color: var(--msGold2);
  color: var(--msGold3) !important;
}

/* --- Hero Data Strip --- */

.msHeroData {
  background: rgba(184, 144, 42, 0.05);
  border: 1px solid var(--msBorder);
  backdrop-filter: blur(8px);
  padding: 20px 32px;
  border-radius: 6px;
}

.msHdataNum {
  font-family: var(--site-secondary-font);
  font-size: 34px;
  font-weight: 400;
  color: var(--msGold2);
  line-height: 1;
}

.msHdataLabel {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msMuted);
  margin-top: 4px;
}

.msHdataSep {
  width: 1px;
  height: 32px;
  background: var(--msBorder);
  align-self: center;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .msHeroData {
    padding: 16px 20px;
    gap: 12px !important;
  }
}

/* --- Scroll Reveal --- */

.msReveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.msReveal.msVisible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Section Headings --- */

.msSectionLabel {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msGold2);
}

.msSectionH2 {
  font-family: var(--site-secondary-font);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  color: var(--msText);
  line-height: 1.15;
  margin-bottom: 16px;
}

.msSectionH2 em {
  font-style: italic;
  color: var(--msGold2);
}

.msSectionSub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--msMuted2);
  margin-bottom: 0;
}

/* Dark section stripe */
.msSectionDark {
  background: var(--msDarkSectionBg);
  transition: background-color 0.35s ease;
}

/* --- Gate Section --- */

.msGateSection {
  background: var(--msInk);
  border-top: 1px solid var(--msBorder);
  border-bottom: 1px solid var(--msBorder);
  transition: background-color 0.35s ease;
}

.msGateSymbol {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--msBorder);
  color: var(--msGold2);
  font-size: 22px;
  box-shadow:
    0 0 0 8px rgba(184, 144, 42, 0.05),
    0 0 0 16px rgba(184, 144, 42, 0.025);
}

.msInviteForm {
  border: 1px solid var(--msBorder);
  border-radius: 3px;
  overflow: hidden;
}

.msInviteInput {
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  color: var(--msText);
  width: 100%;
  letter-spacing: 0.06em;
}

.msInviteInput::placeholder {
  color: var(--msMuted);
  letter-spacing: 0;
}

.msInviteBtn {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04;
  border: none;
  padding: 13px 20px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s;
  white-space: nowrap;
}

.msInviteBtn:hover {
  filter: brightness(1.1);
}

.msInviteMsg {
  font-size: 12px;
  min-height: 18px;
}

.msInviteMsgMuted {
  color: var(--msMuted);
}

.msInviteMsgSuccess {
  color: var(--msGold2);
}

.msInviteMsgError {
  color: #c06040;
}

.msGateAlt {
  font-size: 13px;
  color: var(--msMuted);
}

.msGateAlt a {
  color: var(--msGold2);
  text-decoration: none;
  border-bottom: 1px solid var(--msBorder);
  transition: color 0.2s;
}

.msGateAlt a:hover {
  color: var(--msGold3);
}

/* --- Who Qualifies Grid --- */

.msQualGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .msQualGrid {
    grid-template-columns: 1fr;
  }
}

.msQualCell {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  padding: 32px;
  transition: background 0.2s;
}

.msQualCell:hover {
  background: var(--msCardHoverBg);
}

.msQualMark {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.msQualYes {
  color: var(--msGold2);
}

.msQualNo {
  color: #b06040;
}

.msQualTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--msText);
  margin-bottom: 8px;
}

.msQualBody {
  font-size: 13px;
  font-weight: 300;
  color: var(--msMuted2);
  line-height: 1.7;
}

/* --- Perk Cards --- */

.msPerkCard {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  border-radius: 4px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

[data-bs-theme="light"] .msPerkCard {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.msPerkCard:hover {
  transform: translateY(-3px);
  border-color: var(--msBorder);
}

[data-bs-theme="light"] .msPerkCard:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.msPerkNumber {
  font-family: var(--site-secondary-font);
  font-size: 72px;
  font-weight: 300;
  color: var(--msGold);
  opacity: 0.18;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 18px;
  pointer-events: none;
  user-select: none;
}

.msPerkIconLine {
  width: 32px;
  height: 1px;
  background: var(--msGold2);
}

.msPerkTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--msText);
}

.msPerkBody {
  font-size: 13px;
  font-weight: 300;
  color: var(--msMuted2);
  line-height: 1.75;
}

.msPerkTag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msGold2);
  border-bottom: 1px solid var(--msBorder);
  padding-bottom: 2px;
}

/* --- Pricing --- */

.msPricingWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .msPricingWrap {
    grid-template-columns: 1fr;
  }
}

.msPriceCard {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  padding: 44px 40px;
  transition: background 0.35s ease;
}

[data-bs-theme="light"] .msPriceCard {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.msPriceCardFeatured {
  background: linear-gradient(160deg,
      rgba(184, 144, 42, 0.06),
      var(--msCardBg)) !important;
  border-color: var(--msBorder) !important;
}

.msPriceTier {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msGold2);
}

.msPriceTierFeatured {
  color: var(--msGold3);
}

.msPriceTitle {
  font-family: var(--site-secondary-font);
  font-size: 30px;
  font-weight: 500;
  color: var(--msText);
  line-height: 1.2;
  margin: 6px 0;
}

.msPriceDesc {
  font-size: 13px;
  font-weight: 300;
  color: var(--msMuted);
  line-height: 1.65;
}

.msPriceNum {
  font-family: var(--site-secondary-font);
  font-size: 52px;
  font-weight: 600;
  color: var(--msGold3);
  line-height: 1;
}

.msPriceNum sup {
  font-size: 22px;
  vertical-align: top;
  margin-top: 10px;
  margin-right: 2px;
  font-weight: 400;
}

.msPriceCycle {
  font-size: 12px;
  color: var(--msMuted);
}

.msPriceItems {
  border-top: 1px solid var(--msBorder2);
  padding-top: 16px;
}

.msPriceItems li {
  font-size: 13px;
  color: var(--msMuted2);
  font-weight: 300;
  padding: 8px 0;
  border-bottom: 1px solid var(--msBorder2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.msPriceItems li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--msGold2);
  flex-shrink: 0;
}

.msPriceCta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.25s;
}

.msPctaGold {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04 !important;
  box-shadow: 0 4px 16px rgba(184, 144, 42, 0.3);
}

.msPctaGold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(184, 144, 42, 0.45);
  color: #0d0a04 !important;
}

.msPctaGhost {
  background: transparent;
  color: var(--msGold2) !important;
  border: 1px solid var(--msBorder);
}

.msPctaGhost:hover {
  background: rgba(184, 144, 42, 0.06);
  border-color: var(--msGold2);
  color: var(--msGold2) !important;
}

@media (max-width: 575px) {
  .msPriceCard {
    padding: 32px 24px;
  }
}

/* --- Member Cards --- */

.msMemberCard {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  border-radius: 4px;
  padding: 30px 26px;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

[data-bs-theme="light"] .msMemberCard {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.msMemberCard:hover {
  transform: translateY(-3px);
  border-color: var(--msBorder);
}

[data-bs-theme="light"] .msMemberCard:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.msMemberQuoteMark {
  font-family: var(--site-secondary-font);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.7;
  color: var(--msGold2);
  opacity: 0.4;
  margin-bottom: 8px;
}

.msMemberQuote {
  font-family: var(--site-secondary-font);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--msText);
  line-height: 1.7;
}

.msMemberRule {
  width: 24px;
  height: 1px;
  background: var(--msGold2);
}

.msMemberName {
  font-size: 13px;
  font-weight: 600;
  color: var(--msText);
}

.msMemberRole {
  font-size: 11px;
  color: var(--msMuted);
  letter-spacing: 0.06em;
}

.msMemberBadge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msMuted2);
  border: 1px solid var(--msBorder);
  padding: 3px 9px;
  border-radius: 2px;
}

/* --- Manifesto Section --- */

.msManifestoSection {
  border-top: 1px solid var(--msBorder);
}

.msManifestoText {
  font-family: var(--site-secondary-font);
  font-size: clamp(20px, 3.2vw, 38px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--msText);
}

.msManifestoText em {
  font-style: italic;
  color: var(--msGold3);
}

.msManifestoText strong {
  font-weight: 600;
  color: var(--msText);
}

/* --- Apply Section --- */

.msApplySection {
  background: var(--msApplySectionBg);
  border-top: 1px solid var(--msBorder);
  transition: background-color 0.35s ease;
}

.msFormLabel {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--msMuted);
  margin-bottom: 6px;
}

.msFormInput,
.msFormSelect,
.msFormTextarea {
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--msBorder2);
  border-radius: 3px;
  padding: 12px 16px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--msText);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

[data-bs-theme="dark"] .msFormInput,
[data-bs-theme="dark"] .msFormSelect,
[data-bs-theme="dark"] .msFormTextarea {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--msBorder2);
}

.msFormInput::placeholder,
.msFormTextarea::placeholder {
  color: var(--msMuted);
}

.msFormInput:focus,
.msFormSelect:focus,
.msFormTextarea:focus {
  border-color: var(--msGold2);
  box-shadow: 0 0 0 3px rgba(184, 144, 42, 0.12);
}

.msFormSelect {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.03);
}

[data-bs-theme="dark"] .msFormSelect {
  background-color: rgba(255, 255, 255, 0.03);
}

.msFormSelect option {
  background: var(--msInk2);
  color: var(--msText);
}

.msFormTextarea {
  resize: vertical;
  min-height: 96px;
}

.msFormSubmit {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04;
  border: none;
  border-radius: 3px;
  padding: 15px;
  width: 100%;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}

.msFormSubmit:hover {
  box-shadow: 0 6px 20px rgba(184, 144, 42, 0.4);
  transform: translateY(-1px);
}

.msFormSubmitLoading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.msFormSubmitSuccess {
  background: rgba(184, 144, 42, 0.12) !important;
  color: var(--msGold2) !important;
  border: 1px solid rgba(184, 144, 42, 0.3) !important;
  box-shadow: none !important;
  transform: none !important;
}

.msApplyNote {
  font-size: 12px;
  color: var(--msMuted);
  line-height: 1.7;
}

/* --- Footer --- */

.msFooter {
  background: var(--msFooterBg);
  border-top: 1px solid var(--msBorder);
  transition: background-color 0.35s ease;
}

.msFooterWordmark {
  font-family: var(--site-secondary-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--msText);
  letter-spacing: 0.08em;
}

.msFooterWordmark em {
  font-style: italic;
  color: var(--msGold2);
}

.msFooterLinks a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msMuted);
  text-decoration: none;
  transition: color 0.2s;
}

.msFooterLinks a:hover {
  color: var(--msText);
}

.msFooterCopy {
  font-size: 11px;
  color: var(--msMuted);
  letter-spacing: 0.06em;
}

/* --- Mobile Responsive --- */

@media (max-width: 575px) {
  .msQualCell {
    padding: 24px 18px;
  }

  .msPerkCard {
    padding: 26px 22px;
  }

  .msMemberCard {
    padding: 24px 20px;
  }

  .msHeroData {
    padding: 14px 18px;
  }

  .msHeroDivider {
    gap: 12px !important;
  }

  .msHdivLine {
    flex: 0 0 40px;
  }

  .msFooter .d-flex {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }

  .msFooterLinks {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
   BIGDOT DESIGN SYSTEM — GENERIC LANDING PAGE COMPONENTS
   All use design tokens. No new CSS needed for new pages.
   Prefix: bdPages* (component) | bd* (utility)
   ============================================================ */

/* ============================================================
   1. PRICING CARDS
   Usage: wrap in .bdPricingGrid, each tier = .bdPricingCard
   Highlight the best plan with .bdPricingCard--featured
   ============================================================ */

.bdPricingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.bdPricingCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-2xl);
  padding: 2.25rem 2rem;
  position: relative;
  transition:
    transform var(--bdTransition),
    box-shadow var(--bdTransition),
    border-color var(--bdTransition);
}

/* ============================================================
   2. FAQ ACCORDION
   Usage: .bdFaqList > .bdFaqItem > .bdFaqQuestion + .bdFaqAnswer
   Toggle .bdFaqItem--open via JS to expand
   ============================================================ */

.bdFaqItem {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--bdTransition);
}

.bdFaqIcon {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--bdBorder);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  transition:
    transform var(--bdTransition),
    border-color var(--bdTransition),
    background var(--bdTransition);
}

.bdFaqItem--open .bdFaqIcon {
  transform: rotate(45deg);
  background: var(--bdCta);
  border-color: var(--bdCta);
  color: var(--bdCtaText);
}

/* ============================================================
   3. STATS / METRICS STRIP
   Usage: .bdStatsGrid > .bdStatItem
   ============================================================ */

.bdStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
}

.bdStatItem {
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--bdBorder);
  position: relative;
}

@media (max-width: 575px) {
  .bdStatsGrid {
    grid-template-columns: repeat(2, 1fr);
  }

}

.bdStatNum {
  font-family: var(--site-display-font);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--bdText);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.bdStatLabel {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bdTextMuted);
  letter-spacing: 0.04em;
}

/* Variant: cards layout */
.bdStatsGrid--cards {
  gap: 1rem;
}

.bdStatsGrid--cards .bdStatItem:last-child {
  border-right: 1px solid var(--bdBorder);
}

/* ============================================================
   4. SECTION DIVIDER / SEPARATOR
   Usage: <div class="bdDivider"> or bdDivider--labeled
   ============================================================ */

.bdDivider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}

.bdDivider::before,
.bdDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bdBorder);
}

.bdDividerLabel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bdTextFaint);
  white-space: nowrap;
}

/* ============================================================
   5. AVATAR GROUP (social proof / team)
   Usage: .bdAvatarGroup > .bdAvatar (stacked)
   ============================================================ */

/* Star rating (for use with avatar groups) */

/* ============================================================
   6. FEATURE ROW (icon + heading + text — horizontal)
   Usage: .bdFeatureList > .bdFeatureRow
   ============================================================ */

/* Numbered variant */

/* ============================================================
   7. TRUST BADGES / SOCIAL PROOF STRIP
   Usage: .bdTrustStrip > .bdTrustBadge
   ============================================================ */

/* Logo wall (partner/press logos) */

/* ============================================================
   8. ALERT / NOTICE BANNERS
   Usage: .bdAlert.bdAlert--info / --success / --warning / --error
   ============================================================ */

/* ============================================================
   9. PILL / TAB NAV
   Usage: .bdTabNav > .bdTabNav__item  (.bdTabNav__item--active)
   ============================================================ */

/* Tab panels */

/* ============================================================
   10. COMPARISON TABLE
   Usage: .bdCompareTable > thead/tbody with .bdCompareRow
   ============================================================ */

.bdCompareWrap {
  overflow-x: auto;
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-xl);
}

.bdCompareTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.bdCompareTable th,
.bdCompareTable td {
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--bdBorder);
}

.bdCompareTable th {
  font-family: var(--site-display-font);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bdText);
  background: var(--bdBgCard);
}

.bdCompareTable th:first-child,
.bdCompareTable td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--bdText);
}

.bdCompareTable td {
  color: var(--bdTextMuted);
  background: var(--bdBg);
}

.bdCompareTable tr:last-child td,
.bdCompareTable tr:last-child th {
  border-bottom: none;
}

.bdCompareTable .bdCompareCol--featured {
  background: var(--bdBadgeBg);
  border-left: 1px solid var(--bdBadgeBorder);
  border-right: 1px solid var(--bdBadgeBorder);
  color: var(--bdBadgeText);
  font-weight: 700;
}

.bdCompareCheck {
  color: var(--site-success-color);
  font-size: 1rem;
}

.bdCompareCross {
  color: var(--bdTextFaint);
  font-size: 1rem;
}

/* ============================================================
   11. NEWSLETTER / EMAIL CAPTURE
   Usage: .bdNewsletter > .bdNewsletterForm
   ============================================================ */

.bdNewsletter {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem;
  text-align: center;
}

.bdNewsletter__title {
  font-family: var(--site-display-font);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--bdText);
  margin-bottom: 0.5rem;
}

.bdNewsletterForm {
  display: flex;
  gap: 0.5rem;
  max-width: 460px;
  margin: 0 auto;
}

.bdNewsletterInput {
  flex: 1;
  background: var(--bdInputBg);
  border: 1.5px solid var(--bdInputBorder);
  border-radius: var(--radius-full);
  padding: 0.7rem 1.25rem;
  font-family: var(--site-body-font);
  font-size: 0.9rem;
  color: var(--bdInputText);
  outline: none;
  transition:
    border-color var(--bdTransition),
    box-shadow var(--bdTransition);
}

/* ============================================================
   COMPONENT RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 767px) {

  .bdStatsGrid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ===================================================================
   Wedding landing — modern pink redesign: hero + memory sections
   (new bdWed* classes; theme vars are now the pink-red palette)
   =================================================================== */
.bdWedHero2 {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 150px 0 120px;
}

.bdWedHero2Bg {
  position: absolute;
  inset: 0;
  background: url("https://images.pexels.com/photos/30817299/pexels-photo-30817299.jpeg?auto=compress&cs=tinysrgb&w=1920") center/cover no-repeat;
  transform: scale(1.05);
}

.bdWedHero2Overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,
      rgba(159, 18, 57, 0.82),
      rgba(225, 29, 99, 0.5) 55%,
      rgba(47, 10, 28, 0.8));
}

.bdWedHero2Fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 130px;
  background: linear-gradient(to top, var(--bdWedCream), transparent);
  z-index: 2;
}

.bdWedHero2Inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  color: #fff;
}

.bdWedHero2Badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--site-primary-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 26px;
}

.bdWedHero2Title {
  font-family: var(--site-secondary-font);
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 20px;
  text-shadow: 0 6px 36px rgba(0, 0, 0, 0.35);
}

.bdWedHero2Subtitle {
  font-family: var(--site-primary-font);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  max-width: 700px;
  margin: 0 auto 34px;
}

.bdWedHero2Subtitle strong {
  color: #fff;
  font-weight: 600;
}

.bdWedHero2Ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 32px;
}

.bdWedHero2Ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: var(--site-primary-font);
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

.bdWedHero2Ghost:hover {
  background: #fff;
  color: var(--bdWedGoldDark);
  transform: translateY(-2px);
}

.bdWedHero2Trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  font-family: var(--site-primary-font);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.bdWedHero2Trust i {
  color: #ffd1df;
  margin-right: 6px;
}

.bdWedTextLeft {
  text-align: left;
}

/* Memory / Google Drive album */
.bdWedMemory {
  padding: 100px 0;
  background: var(--bdWedBeige);
}

.bdWedMemoryGallery {
  position: relative;
  padding: 18px 18px 30px;
}

.bdWedMemoryImg {
  border-radius: 22px;
  box-shadow: var(--bdWedShadowLg);
  object-fit: cover;
  display: block;
}

.bdWedMemoryImgMain {
  width: 100%;
  height: 440px;
}

.bdWedMemoryImgFloat {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 190px;
  height: 190px;
  border: 6px solid #fff;
}

.bdWedMemoryDrive {
  position: absolute;
  top: 34px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--bdWedText);
  font-family: var(--site-primary-font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--bdWedShadowMd);
}

.bdWedMemoryDrive i {
  color: var(--bdWedGold);
  font-size: 1.1rem;
}

.bdWedMemoryLead {
  font-family: var(--site-primary-font);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--bdWedTextMuted);
  margin: 10px 0 28px;
}

.bdWedMemoryLead strong {
  color: var(--bdWedGoldDark);
}

.bdWedMemorySteps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 26px;
}

.bdWedMemoryStep {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bdWedMemoryStepNum {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  box-shadow: 0 8px 18px rgba(225, 29, 99, 0.3);
}

.bdWedMemoryStep h4 {
  font-family: var(--site-primary-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bdWedText);
  margin: 2px 0 3px;
}

.bdWedMemoryStep p {
  font-family: var(--site-primary-font);
  font-size: 0.92rem;
  color: var(--bdWedTextMuted);
  margin: 0;
  line-height: 1.6;
}

.bdWedMemoryPills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.bdWedMemoryPills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(225, 29, 99, 0.18);
  color: var(--bdWedGoldDark);
  font-family: var(--site-primary-font);
  font-size: 0.82rem;
  font-weight: 600;
}

.bdWedMemoryPills i {
  color: var(--bdWedGold);
}

/* Experiences trio */
.bdWedExperiences {
  padding: 100px 0;
  background: var(--bdWedCream);
}

.bdWedExpCard {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--bdWedShadowMd);
  border: 1px solid rgba(225, 29, 99, 0.08);
  height: 100%;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.bdWedExpCard:hover {
  transform: translateY(-8px);
  box-shadow: var(--bdWedShadowLg);
}

.bdWedExpImg {
  position: relative;
  height: 210px;
  background-size: cover;
  background-position: center;
}

.bdWedExpImg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(159, 18, 57, 0.55), transparent 60%);
}

.bdWedExpIcon {
  position: absolute;
  bottom: -26px;
  left: 24px;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  box-shadow: 0 10px 22px rgba(225, 29, 99, 0.4);
}

.bdWedExpBody {
  padding: 40px 26px 30px;
}

.bdWedExpBody h3 {
  font-family: var(--site-secondary-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bdWedText);
  margin: 0 0 8px;
}

.bdWedExpBody p {
  font-family: var(--site-primary-font);
  font-size: 0.94rem;
  color: var(--bdWedTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* Living gallery strip */
.bdWedGallery {
  padding: 90px 0 0;
  background: var(--bdWedCream);
}

.bdWedGalleryStrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 30px;
}

.bdWedGalleryItem {
  height: 260px;
  background-size: cover;
  background-position: center;
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

.bdWedGalleryItem:hover {
  transform: scale(1.05);
  z-index: 2;
  position: relative;
}

/* Photo-rich final CTA */
.bdWedFinalCta {
  background:
    linear-gradient(rgba(159, 18, 57, 0.5), rgba(159, 18, 57, 0.5)),
    url("https://images.pexels.com/photos/265722/pexels-photo-265722.jpeg?auto=compress&cs=tinysrgb&w=1920") center/cover no-repeat;
}

@media (max-width: 991px) {
  .bdWedGalleryStrip {
    grid-template-columns: repeat(2, 1fr);
  }

  .bdWedMemoryImgMain {
    height: 340px;
  }
}

@media (max-width: 575px) {
  .bdWedGalleryStrip {
    grid-template-columns: 1fr;
  }

  .bdWedMemoryImgFloat {
    display: none;
  }

  .bdWedHero2 {
    min-height: 80vh;
    padding: 120px 0 90px;
  }
}

/* Wedding landing — consistent vertical rhythm between sections.
   (Features/HowItWorks/Demo/Pricing previously had no padding because the
   global `section { padding:100px 0 }` rule is intentionally commented out.) */
.bdWedFeaturesSection,
.bdWedHowItWorks,
.bdWedDemoSection,
.bdWedPricingSection {
  padding: 100px 0;
}

/* ===== Wedding wizard — custom themed date picker ===== */
.bdWedDpField {
  position: relative;
}

.bdWedDpTrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.bdWedDpTrigger i {
  color: var(--bdWedGold);
  font-size: 1.15rem;
}

.bdWedDpPlaceholder span {
  color: #9aa0a6;
}

.bdWedDp {
  margin-top: 12px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(225, 29, 99, 0.14);
  box-shadow: 0 12px 34px rgba(159, 18, 57, 0.14);
  padding: 14px;
  animation: bdWedDpIn 0.18s ease-out;
}

@keyframes bdWedDpIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bdWedDpHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bdWedDpTitle {
  font-family: var(--site-primary-font);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--bdWedText);
}

.bdWedDpNav {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--bdWedBeige);
  color: var(--bdWedGoldDark);
  transition: all 0.2s ease;
}

.bdWedDpNav:hover {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: #fff;
}

.bdWedDpWeek {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.bdWedDpWeek span {
  text-align: center;
  font-family: var(--site-primary-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: #b8a8af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0;
}

.bdWedDpGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bdWedDpDay {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--site-primary-font);
  font-size: 0.88rem;
  color: var(--bdWedText);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

.bdWedDpDay:hover:not(:disabled) {
  background: var(--bdWedBeige);
  color: var(--bdWedGoldDark);
}

.bdWedDpDayOther {
  color: #d2cace;
}

.bdWedDpDay:disabled {
  color: #ddd6d9;
  cursor: not-allowed;
}

.bdWedDpDayToday:not(.bdWedDpDaySelected) {
  box-shadow: inset 0 0 0 1.5px var(--bdWedGoldLight);
  font-weight: 600;
}

.bdWedDpDaySelected {
  background: linear-gradient(135deg,
      var(--bdWedGold),
      var(--bdWedGoldDark)) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(225, 29, 99, 0.4);
}

.bdWedDpFooter {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(225, 29, 99, 0.1);
}

.bdWedDpFootBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--site-primary-font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bdWedTextMuted);
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.2s ease;
}

.bdWedDpFootBtn:hover {
  color: var(--bdWedGoldDark);
}

.bdWedDpFootBtnAccent {
  color: var(--bdWedGold);
}

/* ===== Wedding wizard — background slideshow (India / USA / Arab / Africa) ===== */
.bdWedWizBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bdWedWizBgImg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity, transform;
}

.bdWedWizBgImg.bdWedWizBgActive {
  opacity: 0.25;
  animation: bdWedWizBgZoom 6s ease-in-out forwards;
}

@keyframes bdWedWizBgZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

/* ===== Wizard — let tall steps (e.g. the open date calendar) grow the modal
   instead of being clipped by the fixed-height, overflow:hidden containers.
   Active step flows in normal layout so the wrap sizes to it; the right panel
   scrolls only if content exceeds the viewport. ===== */
.bdWedWizRight {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

.bdWedWizStepsWrap {
  flex: 1 0 auto;
  overflow: visible;
}

.bdWedWizStep.bdWedWizStepActive {
  position: relative;
  inset: auto;
  overflow: visible;
}

/* ===== Wizard date step — compact calendar, clean scroll, sticky CTA ===== */
/* Hide the global (purple) scrollbar inside the wizard panel */
.bdWedWizRight {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bdWedWizRight::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Keep NEXT pinned & visible even if a step needs a little scroll */
.bdWedWizNavBar {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 5;
}

/* Compact, balanced calendar (was oversized due to square full-width cells) */
.bdWedDp {
  max-width: 330px;
  margin: 10px auto 0;
  padding: 12px;
  border-radius: 14px;
}

.bdWedDpHeader {
  margin-bottom: 8px;
}

.bdWedDpTitle {
  font-size: 0.9rem;
}

.bdWedDpNav {
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  border-radius: 8px;
}

.bdWedDpWeek {
  margin-bottom: 2px;
}

.bdWedDpWeek span {
  font-size: 0.66rem;
  padding: 3px 0;
}

.bdWedDpGrid {
  gap: 1px;
}

.bdWedDpDay {
  aspect-ratio: auto;
  height: 34px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.bdWedDpFooter {
  margin-top: 8px;
  padding-top: 8px;
}

.bdWedDpFootBtn {
  font-size: 0.8rem;
}

/* ===== Date calendar as a floating dropdown — overlays the content below
   (the "still deciding" row + NEXT) instead of pushing the layout down.
   With the step no longer growing, the panel needs no scroll (purple bar gone). ===== */
.bdWedWizRight {
  overflow: visible;
}

.bdWedDp {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 340px;
  max-width: calc(100% - 4px);
  margin: 0 auto;
  z-index: 60;
}

.bdWedDpDay {
  height: 30px;
}

/* ===================================================================
   Wizard layout v2 — split modal on desktop, fixed full-screen on mobile
   - Desktop (>=768px): image slideshow on the left 50%, wizard form on
     the right 50% (roomier & more readable).
   - Mobile (<=767px): single full-height column, image hidden, the step
     indicator stays pinned to the bottom (no clipping, no page scroll).
   Appended last so it wins over the earlier wizard rules by source order.
   =================================================================== */

/* ---------- Desktop: split modal card ---------- */
@media (min-width: 768px) {
  .bdWedWizDialog {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: min(1080px, calc(100vw - 48px));
    height: min(700px, calc(100vh - 48px));
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  /* LEFT — imagery panel */
  .bdWedWizBg {
    position: relative;
    inset: auto;
    flex: 0 0 50%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .bdWedWizBgImg.bdWedWizBgActive {
    opacity: 1;
    /* full-strength image inside its own panel */
  }

  .bdWedWizBgScrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(159, 18, 57, 0.78) 0%,
        rgba(159, 18, 57, 0.22) 48%,
        rgba(45, 42, 38, 0.12) 100%);
  }

  .bdWedWizBgContent {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 42px 38px;
    color: #fff;
  }

  .bdWedWizBgBadge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-family: var(--site-primary-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .bdWedWizBgTitle {
    font-family: var(--site-secondary-font);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 10px;
    color: #fff;
  }

  .bdWedWizBgText {
    font-family: var(--site-primary-font);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    opacity: 0.92;
    max-width: 320px;
  }

  /* RIGHT — content column */
  .bdWedWizPanel {
    flex: 1 1 50%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  .bdWedWizRight {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden auto;
  }

  /* Roomier, more readable form area */
  .bdWedWizStep {
    padding: 28px 44px 0;
  }

  .bdWedWizForm {
    gap: 16px;
  }

  .bdWedWizInput {
    padding: 14px 18px;
    font-size: 0.98rem;
  }

  .bdWedWizLabel {
    font-size: 0.86rem;
  }

  .bdWedWizIllusImg {
    width: 72px;
  }

  .bdWedWizIllusLabel {
    font-size: 1.1rem;
  }

  .bdWedWizIllusWrap {
    margin-bottom: 22px;
  }

  .bdWedWizNavBar {
    padding: 14px 44px 18px;
  }

  .bdWedWizBtnNext {
    padding: 15px 22px;
    font-size: 1rem;
  }

  /* Step indicators pinned to the bottom of the right column */
  .bdWedWizFloatNav {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 14px 44px 18px;
    border-radius: 0;
    border-top: 1px solid #f2ede7;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bdWedWizFloatNav::before {
    top: calc(14px + 20px);
    left: calc(44px + 20px);
    right: calc(44px + 20px);
  }
}

/* ---------- Mobile / small tablet: full-screen single column ---------- */
@media (max-width: 767px) {
  .bdWedWizModal {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  /* Fixed-height shell so the stepper can't be pushed off-screen */
  .bdWedWizDialog {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: #fff;
  }

  /* Decorative image panel hidden on phones */
  .bdWedWizBg {
    display: none;
  }

  .bdWedWizPanel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  /* Form fills the space above the stepper and scrolls internally if ever needed */
  .bdWedWizRight {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden auto;
  }

  /* NEXT stays pinned to the bottom of the form area */
  .bdWedWizNavBar {
    position: sticky;
    bottom: 0;
    background: #fff;
  }

  /* Step indicators: always visible, pinned at the very bottom (sticky) */
  .bdWedWizFloatNav {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0;
    border-top: 1px solid #ede8e0;
    background: #faf8f5;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bdWedWizFloatNav::before {
    top: calc(10px + 18px);
    left: calc(16px + 18px);
    right: calc(16px + 18px);
  }
}
/* ============================================================
   SHARED VERTICAL SECTIONS
   Used by every /verticals/* page so the pages stay in sync:
   - <app-vertical-six-x>     "BigDot <x> is 6x Better" band
   - <app-vertical-demo-cta>  closing "free demo" call to action
   ============================================================ */

app-vertical-six-x,
app-vertical-demo-cta {
  --bdVSurface: #ffffff;
  --bdVInk: #1c1a16;
  --bdVMuted: #6f7183;
  --bdVNavy: var(--site-primary-color);
  --bdVBlue: var(--site-tertiary-color);
  --bdVOrange: var(--site-quaternary-color);
  --bdVLine: rgba(255, 255, 255, 0.12);
  display: block;
}

/* ---------- 6x BETTER BAND ---------- */
app-vertical-six-x .bdSixX {
  padding: 5rem 0;
}

app-vertical-six-x .bdSixXPanel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background:
    linear-gradient(135deg, var(--bdVNavy) 0%, #16224b 55%, #111a3c 100%);
  box-shadow: 0 40px 80px -40px rgba(28, 45, 100, 0.65);
  isolation: isolate;
}

app-vertical-six-x .bdSixXPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 70% 80% at 20% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 20% 30%, #000, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

app-vertical-six-x .bdSixXGlow {
  position: absolute;
  width: 460px;
  height: 460px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(241, 90, 37, 0.35) 0%,
      rgba(34, 85, 232, 0.18) 45%,
      transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

app-vertical-six-x .row {
  position: relative;
  z-index: 1;
}

app-vertical-six-x .bdSixXClaim {
  padding: 3.25rem 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

app-vertical-six-x .bdSixXLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 1.1rem;
}

app-vertical-six-x .bdSixXLabel::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--bdVOrange);
}

app-vertical-six-x .bdSixXHeading {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.35rem;
}

app-vertical-six-x .bdSixXFigure {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  line-height: 0.85;
  margin-bottom: 1.25rem;
}

app-vertical-six-x .bdSixXNum {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(5.5rem, 11vw, 9rem);
  letter-spacing: -0.06em;
  color: #fff;
  background: linear-gradient(160deg, #ffffff 30%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

app-vertical-six-x .bdSixXTimes {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--bdVOrange);
  letter-spacing: -0.04em;
}

app-vertical-six-x .bdSixXBetter {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  margin-left: 0.45rem;
}

app-vertical-six-x .bdSixXBlurb {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 380px;
  margin: 0;
}

app-vertical-six-x .bdSixXGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
  border-left: 1px solid var(--bdVLine);
}

app-vertical-six-x .bdSixXItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 2.25rem 1.5rem;
  border-bottom: 1px solid var(--bdVLine);
  border-right: 1px solid var(--bdVLine);
  transition: background 0.25s ease, transform 0.25s ease;
}

app-vertical-six-x .bdSixXItem:nth-child(3n) {
  border-right: none;
}

app-vertical-six-x .bdSixXItem:nth-child(n + 4) {
  border-bottom: none;
}

app-vertical-six-x .bdSixXItem:hover {
  background: rgba(255, 255, 255, 0.06);
}

app-vertical-six-x .bdSixXItemIndex {
  position: absolute;
  top: 1rem;
  right: 1.15rem;
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.28);
}

app-vertical-six-x .bdSixXItemIcon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: all 0.25s ease;
}

app-vertical-six-x .bdSixXItemIcon i {
  font-size: 22px;
  line-height: 1;
}

app-vertical-six-x .bdSixXItem:hover .bdSixXItemIcon {
  background: var(--bdVOrange);
  border-color: var(--bdVOrange);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(241, 90, 37, 0.8);
}

app-vertical-six-x .bdSixXItemLabel {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 991.98px) {
  app-vertical-six-x .bdSixXGrid {
    border-left: none;
    border-top: 1px solid var(--bdVLine);
  }

  app-vertical-six-x .bdSixXClaim {
    padding: 2.5rem 2rem 2rem;
  }

  app-vertical-six-x .bdSixXItem:nth-child(n + 4) {
    border-bottom: 1px solid var(--bdVLine);
  }

  app-vertical-six-x .bdSixXItem:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}

@media (max-width: 575.98px) {
  app-vertical-six-x .bdSixX {
    padding: 3rem 0;
  }

  app-vertical-six-x .bdSixXPanel {
    border-radius: 24px;
  }

  app-vertical-six-x .bdSixXGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  app-vertical-six-x .bdSixXItem {
    padding: 1.6rem 1.1rem;
    border-bottom: 1px solid var(--bdVLine);
  }

  app-vertical-six-x .bdSixXItem:nth-child(3n) {
    border-right: 1px solid var(--bdVLine);
  }

  app-vertical-six-x .bdSixXItem:nth-child(2n) {
    border-right: none;
  }

  app-vertical-six-x .bdSixXItem:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

/* ---------- DEMO CTA ---------- */
app-vertical-demo-cta .bdDemoCta {
  padding: 1rem 0 6rem;
}

app-vertical-demo-cta .bdDemoCard {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  text-align: center;
  background: linear-gradient(150deg, #16224b 0%, var(--bdVNavy) 45%, #0f1836 100%);
  box-shadow: 0 40px 80px -40px rgba(28, 45, 100, 0.7);
  isolation: isolate;
}

app-vertical-demo-cta .bdDemoGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

app-vertical-demo-cta .bdDemoGlow {
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(241, 90, 37, 0.4) 0%,
      rgba(34, 85, 232, 0.2) 45%,
      transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

app-vertical-demo-cta .bdDemoInner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

app-vertical-demo-cta .bdDemoLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

app-vertical-demo-cta .bdDemoPulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.7);
  animation: bdDemoPulseKf 2s infinite;
}

@keyframes bdDemoPulseKf {
  70% {
    box-shadow: 0 0 0 8px rgba(53, 208, 127, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(53, 208, 127, 0);
  }
}

app-vertical-demo-cta .bdDemoHeading {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1.1rem;
}

app-vertical-demo-cta .bdDemoSub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

app-vertical-demo-cta .bdDemoActions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

app-vertical-demo-cta .bdDemoBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2.2rem;
  border-radius: 100px;
  background: var(--bdVOrange);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  box-shadow: 0 16px 34px -12px rgba(241, 90, 37, 0.85);
  transition: all 0.22s ease;
}

app-vertical-demo-cta .bdDemoBtn i {
  font-size: 20px;
}

app-vertical-demo-cta .bdDemoBtn:hover {
  background: #ff7a3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -12px rgba(241, 90, 37, 0.95);
}

app-vertical-demo-cta .bdDemoBtn svg {
  transition: transform 0.22s ease;
}

app-vertical-demo-cta .bdDemoBtn:hover svg {
  transform: translateX(3px);
}

app-vertical-demo-cta .bdDemoTrust {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

app-vertical-demo-cta .bdDemoTrust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);
}

app-vertical-demo-cta .bdDemoTrust i {
  color: #35d07f;
  font-size: 16px;
}

@media (max-width: 575.98px) {
  app-vertical-demo-cta .bdDemoCta {
    padding: 0 0 3.5rem;
  }

  app-vertical-demo-cta .bdDemoCard {
    border-radius: 24px;
  }

  app-vertical-demo-cta .bdDemoTrust {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   VERTICAL LANDING PAGES — shared block, scoped to .bdVerticalPage
   Every /verticals/* page carries this host class (see design-rule.md §
   "When several components share one stylesheet"), so they all share one
   layout system. Header, footer, the 6x band and the demo CTA are separate
   shared components styled in their own blocks.
   ============================================================ */

.bdVerticalPage {
  --bdVertInk: #1c1a16;
  --bdVertMuted: #6f7183;
  --bdVertNavy: var(--site-primary-color);
  --bdVertBlue: var(--site-tertiary-color);
  --bdVertOrange: var(--site-quaternary-color);
  --bdVertBorder: rgba(28, 45, 100, 0.12);
  --bdVertBorderStrong: rgba(28, 45, 100, 0.25);
  --bdVertCard: #ffffff;
  --bdVertAlt: #f8f9ff;
  display: block;
}

/* These pages use the shared nav on the site navy. */
.BigDotPurchaseHeader.automobilesHeader {
  position: relative;
}

.BigDotPurchaseHeader.automobilesHeader .header {
  background-color: var(--site-primary-color);
}
.BigDotPurchaseHeader.retailHeader {
  position: relative;
}

.BigDotPurchaseHeader.retailHeader .header {
  background-color: var(--site-primary-color);
}
.BigDotPurchaseHeader.fitnessHeader {
  position: relative;
}

.BigDotPurchaseHeader.fitnessHeader .header {
  background-color: var(--site-primary-color);
}
.BigDotPurchaseHeader.consultantsHeader {
  position: relative;
}

.BigDotPurchaseHeader.consultantsHeader .header {
  background-color: var(--site-primary-color);
}
.BigDotPurchaseHeader.photographersHeader {
  position: relative;
}

.BigDotPurchaseHeader.photographersHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.teamsHeader {
  position: relative;
}

.BigDotPurchaseHeader.teamsHeader .header {
  background-color: var(--site-primary-color);
}

/* ---------- HERO ---------- */
.bdVerticalPage .bdVertHero {
  position: relative;
  padding: 5rem 0 4.5rem;
  overflow: hidden;
}

.bdVerticalPage .bdVertHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(28, 45, 100, 0.12) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.45;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
  pointer-events: none;
}

.bdVerticalPage .bdVertHero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 78% 28%, rgba(34, 85, 232, 0.14), transparent 60%),
    radial-gradient(ellipse 42% 42% at 12% 78%, rgba(241, 90, 37, 0.1), transparent 60%);
  pointer-events: none;
}

.bdVerticalPage .bdVertEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  background: rgba(34, 85, 232, 0.08);
  border: 1px solid rgba(34, 85, 232, 0.2);
  color: var(--bdVertBlue);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.bdVerticalPage .bdVertEyebrow i {
  font-size: 15px;
}

.bdVerticalPage .bdVertHeroTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bdVertInk);
  margin-bottom: 1.4rem;
}

.bdVerticalPage .bdVertHeroTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--bdVertBlue);
  letter-spacing: -0.02em;
}

.bdVerticalPage .bdVertHeroSub {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--bdVertMuted);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 2rem;
}

.bdVerticalPage .bdVertHeroCtas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.25rem;
}

.bdVerticalPage .bdVertBtnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bdVertOrange);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.95rem 1.8rem;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  box-shadow: 0 14px 30px -12px rgba(241, 90, 37, 0.8);
  transition: all 0.2s ease;
}

.bdVerticalPage .bdVertBtnPrimary i {
  font-size: 19px;
}

.bdVerticalPage .bdVertBtnPrimary:hover {
  background: #ff7a3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -12px rgba(241, 90, 37, 0.9);
}

.bdVerticalPage .bdVertBtnPrimary svg {
  transition: transform 0.2s ease;
}

.bdVerticalPage .bdVertBtnPrimary:hover svg {
  transform: translateX(3px);
}

.bdVerticalPage .bdVertBtnGhost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--bdVertInk);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95rem 1.5rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid var(--bdVertBorderStrong);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bdVerticalPage .bdVertBtnGhost:hover {
  border-color: var(--bdVertNavy);
  background: rgba(28, 45, 100, 0.04);
  color: var(--bdVertInk);
}

.bdVerticalPage .bdVertHeroProof {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px dashed var(--bdVertBorder);
}

.bdVerticalPage .bdVertProofItem {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.bdVerticalPage .bdVertProofItem i {
  color: var(--site-success-color);
  font-size: 18px;
}

.bdVerticalPage .bdVertProofItem span {
  font-size: 0.82rem;
  color: var(--bdVertInk);
  font-weight: 600;
}

/* ---------- HERO VISUAL ---------- */
.bdVerticalPage .bdVertHeroVisual {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdVerticalPage .bdVertHeroGlow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
      rgba(241, 90, 37, 0.32) 0%,
      rgba(34, 85, 232, 0.16) 42%,
      transparent 68%);
  filter: blur(16px);
  animation: bdVertGlowPulse 6s ease-in-out infinite;
}

@keyframes bdVertGlowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.bdVerticalPage .bdVertHeroRing {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 2px dashed rgba(28, 45, 100, 0.16);
  animation: bdVertRingSpin 38s linear infinite;
}

.bdVerticalPage .bdVertHeroRing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bdVertOrange);
  box-shadow: 0 0 16px 2px rgba(241, 90, 37, 0.7);
  transform: translateY(-50%);
}

@keyframes bdVertRingSpin {
  to {
    transform: rotate(360deg);
  }
}

.bdVerticalPage .bdVertHeroImg {
  position: relative;
  z-index: 1;
  width: 82%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 28px 55px -20px rgba(28, 45, 100, 0.5);
  animation: bdVertImgBob 5.5s ease-in-out infinite;
}

@keyframes bdVertImgBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.bdVerticalPage .bdVertStamp {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--bdVertBorder);
  box-shadow: 0 14px 30px -14px rgba(28, 45, 100, 0.5);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bdVertInk);
  white-space: nowrap;
}

.bdVerticalPage .bdVertStamp i {
  font-size: 16px;
  color: var(--bdVertBlue);
}

.bdVerticalPage .bdVertStamp--1 {
  top: 10%;
  left: -2%;
  animation: bdVertFloatA 7s ease-in-out infinite;
}

.bdVerticalPage .bdVertStamp--2 {
  bottom: 12%;
  right: -1%;
  animation: bdVertFloatB 8s ease-in-out infinite;
}

.bdVerticalPage .bdVertStamp--2 i {
  color: var(--bdVertOrange);
}

@keyframes bdVertFloatA {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes bdVertFloatB {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
  }
}

/* ---------- MARQUEE ---------- */
.bdVerticalPage .bdVertMarquee {
  overflow: hidden;
  border-top: 1px solid var(--bdVertBorder);
  border-bottom: 1px solid var(--bdVertBorder);
  background: var(--bdVertAlt);
  padding: 1.1rem 0;
}

.bdVerticalPage .bdVertMarqueeTrack {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: bdVertMarqueeScroll 34s linear infinite;
}

@keyframes bdVertMarqueeScroll {
  to {
    transform: translateX(-50%);
  }
}

.bdVerticalPage .bdVertMarqueeItem {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bdVertMuted);
  white-space: nowrap;
}

.bdVerticalPage .bdVertMarqueeItem em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--bdVertNavy);
}

.bdVerticalPage .bdVertMarqueeDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bdVertOrange);
  flex-shrink: 0;
}

/* ---------- SECTION SHELL ---------- */
.bdVerticalPage .bdVertSection {
  padding: 5.5rem 0;
  position: relative;
}

.bdVerticalPage .bdVertSectionAlt {
  background: var(--bdVertAlt);
}

.bdVerticalPage .bdVertSectionLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bdVertBlue);
  margin-bottom: 1rem;
}

.bdVerticalPage .bdVertSectionLabel::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: var(--bdVertBlue);
}

.bdVerticalPage .bdVertSectionLabelCenter {
  justify-content: center;
}

.bdVerticalPage .bdVertSectionTitle {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--bdVertInk);
  margin-bottom: 1rem;
}

.bdVerticalPage .bdVertSectionTitle em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  color: var(--bdVertOrange);
}

.bdVerticalPage .bdVertSectionTitleCenter {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.bdVerticalPage .bdVertSectionSub {
  font-size: 1.02rem;
  color: var(--bdVertMuted);
  line-height: 1.65;
  max-width: 600px;
  margin-bottom: 0;
}

/* ---------- FEATURE CARDS ---------- */
.bdVerticalPage .bdVertFeatureCard {
  background: var(--bdVertCard);
  border: 1px solid var(--bdVertBorder);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  height: 100%;
  transition: all 0.3s ease;
}

.bdVerticalPage .bdVertFeatureCard:hover {
  transform: translateY(-6px);
  border-color: var(--bdVertBlue);
  box-shadow: 0 24px 48px -18px rgba(34, 85, 232, 0.22);
}

.bdVerticalPage .bdVertFeatureNum {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bdVertOrange);
  margin-bottom: 0.6rem;
}

.bdVerticalPage .bdVertFeatureIcon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(34, 85, 232, 0.08);
  color: var(--bdVertBlue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.bdVerticalPage .bdVertFeatureIcon i {
  font-size: 26px;
}

.bdVerticalPage .col-lg-4:nth-child(3n+2) .bdVertFeatureIcon {
  background: rgba(28, 45, 100, 0.08);
  color: var(--bdVertNavy);
}

.bdVerticalPage .col-lg-4:nth-child(3n) .bdVertFeatureIcon {
  background: rgba(241, 90, 37, 0.1);
  color: var(--bdVertOrange);
}

.bdVerticalPage .bdVertFeatureTitle {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--bdVertInk);
}

.bdVerticalPage .bdVertFeatureText {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--bdVertMuted);
  margin-bottom: 0;
}

/* ---------- STATS ---------- */
.bdVerticalPage .bdVertStatsSection {
  padding: 4rem 0;
}

.bdVerticalPage .bdVertStat {
  text-align: left;
}

.bdVerticalPage .bdVertStatValue {
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bdVertNavy);
  margin-bottom: 0.5rem;
}

.bdVerticalPage .bdVertStatValue em {
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-weight: 500;
  font-size: 0.5em;
  color: var(--bdVertOrange);
}

.bdVerticalPage .bdVertStatLabel {
  font-size: 0.85rem;
  color: var(--bdVertMuted);
  line-height: 1.5;
  max-width: 210px;
}

/* ---------- USE CASES ---------- */
.bdVerticalPage .bdVertUseCard {
  position: relative;
  height: 100%;
  padding: 2.25rem 1.6rem 1.9rem;
  border-radius: 22px;
  background: var(--bdVertCard);
  border: 1px solid var(--bdVertBorder);
  overflow: hidden;
  transition: all 0.3s ease;
}

.bdVerticalPage .bdVertUseCard::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bdVertOrange), var(--bdVertBlue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.bdVerticalPage .bdVertUseCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -18px rgba(28, 45, 100, 0.25);
}

.bdVerticalPage .bdVertUseCard:hover::after {
  transform: scaleX(1);
}

.bdVerticalPage .bdVertUseNum {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-family: var(--site-secondary-font);
  font-style: italic;
  font-size: 1.4rem;
  color: rgba(28, 45, 100, 0.14);
}

.bdVerticalPage .bdVertUseIcon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(28, 45, 100, 0.07);
  color: var(--bdVertNavy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}

.bdVerticalPage .bdVertUseIcon i {
  font-size: 24px;
}

.bdVerticalPage .bdVertUseCard:hover .bdVertUseIcon {
  background: var(--bdVertNavy);
  color: #fff;
}

.bdVerticalPage .bdVertUseTitle {
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 0.55rem;
  color: var(--bdVertInk);
}

.bdVerticalPage .bdVertUseText {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--bdVertMuted);
  margin-bottom: 0;
}

/* ---------- JOURNEY ---------- */
.bdVerticalPage .bdVertJourney {
  position: relative;
}

.bdVerticalPage .bdVertJourneyLine {
  position: absolute;
  top: 26px;
  left: 12%;
  right: 12%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--bdVertBorderStrong) 50%, transparent 0);
  background-size: 12px 2px;
  background-repeat: repeat-x;
}

.bdVerticalPage .bdVertStop {
  text-align: center;
  padding: 0 1rem;
  position: relative;
}

.bdVerticalPage .bdVertStopBadge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bdVertNavy);
  color: #fff;
  font-family: var(--site-tertiary-font);
  font-weight: 800;
  font-size: 1.05rem;
  border: 5px solid var(--bdVertAlt);
  box-shadow: 0 0 0 1px var(--bdVertBorder);
}

.bdVerticalPage .bdVertStopTitle {
  font-weight: 700;
  font-size: 1.12rem;
  margin-bottom: 0.6rem;
  color: var(--bdVertInk);
}

.bdVerticalPage .bdVertStopText {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--bdVertMuted);
  max-width: 320px;
  margin: 0 auto;
}

/* ---------- TESTIMONIALS ---------- */
.bdVerticalPage .bdVertTesti {
  height: 100%;
  padding: 2rem 1.75rem;
  border-radius: 22px;
  background: var(--bdVertCard);
  border: 1px solid var(--bdVertBorder);
  transition: all 0.3s ease;
}

.bdVerticalPage .bdVertTesti:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(28, 45, 100, 0.25);
}

.bdVerticalPage .bdVertTestiTag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: rgba(34, 85, 232, 0.08);
  color: var(--bdVertBlue);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.bdVerticalPage .bdVertStars {
  color: #f5a623;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.bdVerticalPage .bdVertTestiText {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--bdVertInk);
  margin-bottom: 1.5rem;
}

.bdVerticalPage .bdVertTestiAuthor {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bdVertBorder);
}

.bdVerticalPage .bdVertTestiAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bdVertNavy);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.bdVerticalPage .bdVertTestiName {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bdVertInk);
}

.bdVerticalPage .bdVertTestiRole {
  font-size: 0.82rem;
  color: var(--bdVertMuted);
}

/* ---------- FAQ ---------- */
.bdVerticalPage .bdVertFaq {
  border-top: 1px solid var(--bdVertBorder);
}

.bdVerticalPage .bdVertFaqItem {
  border-bottom: 1px solid var(--bdVertBorder);
}

.bdVerticalPage .bdVertFaqQ {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--bdVertInk);
  cursor: pointer;
  transition: color 0.2s ease;
}

.bdVerticalPage .bdVertFaqQ:hover {
  color: var(--bdVertBlue);
}

.bdVerticalPage .bdVertFaqPlus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 45, 100, 0.07);
  color: var(--bdVertNavy);
  transition: all 0.25s ease;
}

.bdVerticalPage .bdVertFaqPlus i {
  font-size: 17px;
}

.bdVerticalPage .bdVertFaqItem.is-open .bdVertFaqPlus {
  background: var(--bdVertOrange);
  color: #fff;
  transform: rotate(45deg);
}

.bdVerticalPage .bdVertFaqA {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.bdVerticalPage .bdVertFaqItem.is-open .bdVertFaqA {
  grid-template-rows: 1fr;
}

.bdVerticalPage .bdVertFaqA > p {
  overflow: hidden;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--bdVertMuted);
}

.bdVerticalPage .bdVertFaqItem.is-open .bdVertFaqA > p {
  padding-bottom: 1.4rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .bdVerticalPage .bdVertJourneyLine {
    display: none;
  }

  .bdVerticalPage .bdVertHeroVisual {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .bdVerticalPage .bdVertHero {
    padding: 3rem 0;
  }

  .bdVerticalPage .bdVertSection {
    padding: 3.5rem 0;
  }

  .bdVerticalPage .bdVertStamp {
    font-size: 0.7rem;
    padding: 0.45rem 0.8rem;
  }

  .bdVerticalPage .bdVertStamp--1 {
    left: 0;
  }

  .bdVerticalPage .bdVertStamp--2 {
    right: 0;
  }

  .bdVerticalPage .bdVertStatLabel {
    max-width: none;
  }
}


/* ============================================================
   BIGDOT TEAMS PLAN — scoped to the .bdTeamsPage host class
   Ported from the standalone bigdot-teams-plan.html design.
   Every selector is prefixed bdTp* and scoped to the host so the
   generic source names (.row, .card, .btn, .col, .nav) cannot
   collide with Bootstrap or the rest of the app. Design tokens
   live on the host, not :root, per design-rule.md.
   The page's own nav/footer were dropped in favour of the shared
   <app-navigation> / <app-footer>.
   ============================================================ */
/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */.bdTeamsPage{
  display:block;
  --ink:        #131f47;   /* homepage hero navy (--bd-navy-deep) */
  --ink-2:      #1c2d64;   /* homepage navy */
  --navy:       var(--site-primary-color);
  --blue:       var(--site-tertiary-color);
  --blue-lift:  #5D8BFF;
  --orange:     var(--site-quaternary-color);
  --paper:      #fafbff;   /* homepage light-section bg */
  --paper-2:    #E7ECFA;
  --white:      #FFFFFF;

  --on-dark:      rgba(255,255,255,.92);
  --on-dark-mute: rgba(203,214,247,.62);
  --on-light:     var(--site-primary-color);
  --on-light-mute:#4B5878;

  --hair-dark:  rgba(147,170,236,.20);
  --hair-light: rgba(28,45,100,.14);

  --display: var(--site-secondary-font);
  --body: var(--site-primary-font);
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --band-y: clamp(72px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}.bdTeamsPage, .bdTeamsPage *, .bdTeamsPage *::before, .bdTeamsPage *::after{box-sizing:border-box}.bdTeamsPage{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}.bdTeamsPage .bdTpRoot h1, .bdTeamsPage .bdTpRoot h2, .bdTeamsPage .bdTpRoot h3, .bdTeamsPage .bdTpRoot h4{font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1.05; margin:0}.bdTeamsPage .bdTpRoot p{margin:0; font-weight:400}.bdTeamsPage .bdTpRoot a{color:inherit; text-decoration:none}.bdTeamsPage .bdTpRoot :focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}.bdTeamsPage .bdTpRoot{font-size:17px}.bdTeamsPage .bdTpBand{padding-block:var(--band-y); position:relative}.bdTeamsPage .bdTpBandLight{background:var(--paper); color:var(--on-light)}.bdTeamsPage .bdTpBandTight{padding-block:calc(var(--band-y) * .62)}

/* eyebrow: mono, tracked — used as a consistent structural signpost */.bdTeamsPage .bdTpEyebrow{
  font-family:var(--body); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:10px;
}.bdTeamsPage .bdTpEyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none}.bdTeamsPage .bdTpBandLight .bdTpEyebrow{color:var(--orange)}.bdTeamsPage .bdTpLede{font-size:clamp(17px,1.35vw,19.5px); color:var(--on-dark-mute); max-width:56ch}.bdTeamsPage .bdTpBandLight .bdTpLede{color:var(--on-light-mute)}

/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s ease, background .16s ease, border-color .16s ease;
  white-space:nowrap;
}.bdTeamsPage .bdTpBtn:hover{transform:translateY(-2px)}.bdTeamsPage .bdTpBtnPrimary{background:var(--orange); color:#fff; box-shadow:0 10px 28px -12px rgba(241,90,37,.6)}.bdTeamsPage .bdTpBtnPrimary:hover{background:#ff7a3d}.bdTeamsPage .bdTpBtnGhost{border-color:var(--hair-dark); color:var(--on-dark)}.bdTeamsPage .bdTpBtnGhost:hover{border-color:var(--blue-lift)}.bdTeamsPage .bdTpBtnFlame{background:var(--orange); color:#fff; box-shadow:0 10px 28px -12px var(--orange)}.bdTeamsPage .bdTpBandLight .bdTpBtnGhost{border-color:var(--hair-light); color:var(--on-light)}

/* ─────────────────────────────────────────────
   HERO — the signature: a tap becomes a row
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpHero{position:relative; overflow:hidden; padding-block:clamp(56px,7vw,96px) clamp(72px,8vw,110px)}.bdTeamsPage .bdTpHero::before{
  content:''; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(52% 46% at 74% 18%, rgba(34,85,232,.32), transparent 68%),
    radial-gradient(38% 38% at 12% 6%, rgba(241,90,37,.14), transparent 70%);
  pointer-events:none;
}.bdTeamsPage .bdTpHeroGrid{
  position:relative; display:grid; gap:clamp(44px,5vw,72px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:center;
}.bdTeamsPage .bdTpH1{
  font-size:clamp(46px,6.4vw,84px); line-height:1.0; letter-spacing:-.025em;
  margin:22px 0 20px; max-width:15ch;
}.bdTeamsPage .bdTpH1 em{font-style:italic; color:var(--orange); position:relative}.bdTeamsPage .bdTpRoot h2 em, .bdTeamsPage .bdTpRoot h3 em{font-family:var(--site-secondary-font); font-style:italic; font-weight:500; color:var(--orange)}.bdTeamsPage .bdTpLede em{font-family:var(--site-secondary-font); font-style:italic; color:var(--blue-lift)}.bdTeamsPage .bdTpH1 .bdTpDot{color:var(--orange)}.bdTeamsPage .bdTpHeroCta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}.bdTeamsPage .bdTpHeroProof{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:34px; padding-top:22px;
  border-top:1px solid var(--hair-dark);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-mute);
}

/* --- device column --- */.bdTeamsPage .bdTpRig{position:relative; display:grid; gap:18px}

/* card stack */.bdTeamsPage .bdTpStack{position:relative; height:232px; perspective:1100px}.bdTeamsPage .bdTpDbc{
  position:absolute; inset:0; margin:auto; width:min(360px,100%); height:206px;
  border-radius:var(--r-lg); padding:22px;
  background:linear-gradient(148deg,#22357A 0%, #0C1330 92%);
  border:1px solid rgba(147,170,236,.26);
  box-shadow:0 30px 60px -30px #000, inset 0 1px 0 rgba(255,255,255,.09);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease, filter .8s ease;
  will-change:transform;
}.bdTeamsPage .bdTpDbc[data-pos="0"]{transform:translate3d(0,0,0) rotate(0deg); z-index:3}.bdTeamsPage .bdTpDbc[data-pos="1"]{transform:translate3d(14px,20px,-60px) rotate(2.4deg); z-index:2; filter:brightness(.72)}.bdTeamsPage .bdTpDbc[data-pos="2"]{transform:translate3d(28px,40px,-120px) rotate(4.8deg); z-index:1; filter:brightness(.5)}.bdTeamsPage .bdTpDbcTop{display:flex; justify-content:space-between; align-items:flex-start}.bdTeamsPage .bdTpDbcLogo{display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:800; font-size:14px}.bdTeamsPage .bdTpDbcLogo i{width:8px;height:8px;border-radius:50%;background:var(--orange)}.bdTeamsPage .bdTpDbcName{font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.02em}.bdTeamsPage .bdTpDbcRole{font-size:13px; color:var(--on-dark-mute); margin-top:3px}.bdTeamsPage .bdTpDbcUrl{font-family:var(--mono); font-size:11px; color:var(--blue-lift); margin-top:12px; letter-spacing:.02em}

/* nfc mark + tap ripple */.bdTeamsPage .bdTpNfc{position:relative; width:34px; height:34px; display:grid; place-items:center; flex:none}.bdTeamsPage .bdTpNfc svg{opacity:.72}.bdTeamsPage .bdTpRipple{
  position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--orange); opacity:0; pointer-events:none;
}.bdTeamsPage .bdTpIsTapping .bdTpRipple{animation:bdTpRippleKf 1.05s cubic-bezier(.2,.7,.3,1) forwards}.bdTeamsPage .bdTpIsTapping .bdTpRipple:nth-child(2){animation-delay:.16s}
@keyframes bdTpRippleKf{
  0%{opacity:.9; transform:scale(.5)}
  100%{opacity:0; transform:scale(5.4)}
}.bdTeamsPage .bdTpTapFlag{
  position:absolute; top:14px; right:calc(100% + 14px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); opacity:0; white-space:nowrap; transition:opacity .3s ease;
}.bdTeamsPage .bdTpIsTapping .bdTpTapFlag{opacity:1}

/* the database console */.bdTeamsPage .bdTpConsole{
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#0A1030,#080D26);
  border:1px solid var(--hair-dark);
  box-shadow:0 30px 70px -34px #000;
}.bdTeamsPage .bdTpConsoleBar{
  display:flex; align-items:center; gap:9px; padding:11px 16px;
  border-bottom:1px solid var(--hair-dark); background:rgba(147,170,236,.05);
  font-family:var(--mono); font-size:11px; color:var(--on-dark-mute); letter-spacing:.04em;
}.bdTeamsPage .bdTpPip{width:8px;height:8px;border-radius:50%;background:#2ECC8F; box-shadow:0 0 0 4px rgba(46,204,143,.14)}.bdTeamsPage .bdTpConsoleBar b{color:var(--on-dark); font-weight:500}.bdTeamsPage .bdTpConsoleSql{padding:16px 18px 14px; font-family:var(--mono); font-size:12.2px; line-height:1.75; border-bottom:1px solid var(--hair-dark); overflow-x:auto}.bdTeamsPage .bdTpK{color:var(--blue-lift)}.bdTeamsPage .bdTpS{color:#F2B36B}.bdTeamsPage .bdTpC{color:rgba(203,214,247,.42)}.bdTeamsPage .bdTpConsoleGrid{padding:6px 0 8px; min-height:190px}.bdTeamsPage .bdTpRow{
  display:grid; grid-template-columns:1.25fr .95fr .9fr 62px; gap:12px;
  padding:9px 18px; align-items:center;
  font-family:var(--mono); font-size:11.6px; color:var(--on-dark-mute);
}.bdTeamsPage .bdTpRowHead{color:rgba(203,214,247,.4); letter-spacing:.12em; text-transform:uppercase; font-size:10px; padding-bottom:6px}.bdTeamsPage .bdTpRowData{border-top:1px solid rgba(147,170,236,.08)}.bdTeamsPage .bdTpRowData b{color:var(--on-dark); font-weight:500}.bdTeamsPage .bdTpRowNew{animation:bdTpSlotKf .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes bdTpSlotKf{from{opacity:0; transform:translateY(-9px); background:rgba(34,85,232,.20)} to{opacity:1; transform:none; background:transparent}}.bdTeamsPage .bdTpChip{
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; text-align:center;
  padding:3px 7px; border-radius:100px; border:1px solid rgba(46,204,143,.4); color:#5FE3B0;
}.bdTeamsPage .bdTpConsoleFoot{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 18px; border-top:1px solid var(--hair-dark);
  font-family:var(--mono); font-size:11px; color:var(--on-dark-mute);
}.bdTeamsPage .bdTpCount{color:var(--white); font-weight:700}

/* ─────────────────────────────────────────────
   THE GAP (regular vs teams)
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpGapHead{display:flex; flex-wrap:wrap; gap:20px 60px; align-items:end; margin-bottom:46px}.bdTeamsPage .bdTpGapHead h2{font-size:clamp(30px,3.6vw,50px); max-width:18ch}.bdTeamsPage .bdTpVersus{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px)}.bdTeamsPage .bdTpCol{border-radius:var(--r-xl); padding:clamp(24px,3vw,36px); border:1px solid var(--hair-light)}.bdTeamsPage .bdTpColOld{background:transparent}.bdTeamsPage .bdTpColNew{background:var(--ink); color:var(--on-dark); border-color:transparent; box-shadow:0 40px 80px -46px rgba(7,12,34,.6)}.bdTeamsPage .bdTpColTag{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-light-mute)}.bdTeamsPage .bdTpColNew .bdTpColTag{color:var(--blue-lift)}.bdTeamsPage .bdTpCol h3{font-size:clamp(21px,2.2vw,27px); margin:10px 0 22px}.bdTeamsPage .bdTpCol ul{list-style:none; margin:0; padding:0; display:grid; gap:13px}.bdTeamsPage .bdTpCol li{display:flex; gap:12px; font-size:15.4px; line-height:1.5}.bdTeamsPage .bdTpCol li span{flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700}.bdTeamsPage .bdTpColOld li{color:var(--on-light-mute)}.bdTeamsPage .bdTpColOld li span{background:var(--paper-2); color:#8A94AE}.bdTeamsPage .bdTpColNew li span{background:rgba(34,85,232,.28); color:var(--blue-lift)}

/* ─────────────────────────────────────────────
   CAPABILITIES
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpFeatPair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); margin-top:48px}.bdTeamsPage .bdTpCard{
  border-radius:var(--r-xl); padding:clamp(26px,2.8vw,38px);
  background:linear-gradient(168deg,rgba(147,170,236,.09),rgba(147,170,236,.03));
  border:1px solid var(--hair-dark);
}.bdTeamsPage .bdTpCard h3{font-size:clamp(22px,2.3vw,29px); margin:16px 0 12px}.bdTeamsPage .bdTpCard p{color:var(--on-dark-mute); font-size:15.4px}.bdTeamsPage .bdTpCardArt{margin-top:26px}

/* domain art */.bdTeamsPage .bdTpUrlbar{
  display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:100px;
  background:rgba(7,12,34,.66); border:1px solid var(--hair-dark);
  font-family:var(--mono); font-size:12.4px; overflow:hidden;
}.bdTeamsPage .bdTpUrlbar .bdTpLock{color:#5FE3B0; font-size:11px}.bdTeamsPage .bdTpUrlbar b{color:var(--white); font-weight:500}.bdTeamsPage .bdTpUrlbar span{color:var(--on-dark-mute)}.bdTeamsPage .bdTpUrlbar em{font-style:normal; color:var(--orange)}.bdTeamsPage .bdTpUrlbarNote{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mute); margin-top:12px; display:block}

/* db art */.bdTeamsPage .bdTpPerm{display:grid; gap:8px}.bdTeamsPage .bdTpPermRow{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-sm);
  background:rgba(7,12,34,.6); border:1px solid var(--hair-dark);
  font-family:var(--mono); font-size:11.6px;
}.bdTeamsPage .bdTpPermRow b{color:var(--white); font-weight:500; flex:1}.bdTeamsPage .bdTpPermRow i{font-style:normal; color:var(--on-dark-mute)}.bdTeamsPage .bdTpYes{color:#5FE3B0}

/* trio */.bdTeamsPage .bdTpTrio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(14px,2vw,24px)}.bdTeamsPage .bdTpTrio .bdTpCard{padding:clamp(24px,2.4vw,30px)}.bdTeamsPage .bdTpTrio h3{font-size:clamp(19px,1.9vw,23px)}.bdTeamsPage .bdTpTrio p{font-size:14.6px}

/* sparkline */.bdTeamsPage .bdTpSpark{display:flex; align-items:flex-end; gap:5px; height:74px}.bdTeamsPage .bdTpSpark i{flex:1; background:linear-gradient(180deg,var(--blue-lift),rgba(34,85,232,.22)); border-radius:3px 3px 0 0; display:block; transform-origin:bottom; animation:bdTpGrowKf .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes bdTpGrowKf{from{transform:scaleY(.05)} to{transform:scaleY(1)}}

/* pipeline */.bdTeamsPage .bdTpPipe{display:grid; gap:7px}.bdTeamsPage .bdTpPipeStep{
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.4px;
  padding:9px 12px; border-radius:var(--r-sm); background:rgba(7,12,34,.55); border:1px solid var(--hair-dark);
}.bdTeamsPage .bdTpPipeStep em{font-style:normal; margin-left:auto; color:var(--on-dark-mute)}.bdTeamsPage .bdTpDotB{width:7px;height:7px;border-radius:50%;background:var(--blue-lift); flex:none}.bdTeamsPage .bdTpDotO{width:7px;height:7px;border-radius:50%;background:var(--orange); flex:none}.bdTeamsPage .bdTpDotG{width:7px;height:7px;border-radius:50%;background:#2ECC8F; flex:none}

/* event ticket */.bdTeamsPage .bdTpTicket{
  border-radius:var(--r-md); border:1px dashed rgba(147,170,236,.34); padding:16px;
  background:rgba(7,12,34,.55); display:flex; gap:14px; align-items:center;
}.bdTeamsPage .bdTpTicketQr{width:52px;height:52px;border-radius:6px;flex:none;
  background:
    conic-gradient(from 0deg,var(--white) 25%,transparent 0 50%,var(--white) 0 75%,transparent 0) 0 0/13px 13px,
    var(--ink-2);
  opacity:.9}.bdTeamsPage .bdTpTicket b{font-family:var(--display); font-size:16px; display:block}.bdTeamsPage .bdTpTicket span{font-family:var(--mono); font-size:10.6px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mute)}

/* ─────────────────────────────────────────────
   ASSETS — bold, saturated product band
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpAssets{background:linear-gradient(180deg,var(--navy),#0A1130 78%); position:relative; overflow:hidden}.bdTeamsPage .bdTpAssets::after{
  content:''; position:absolute; inset:auto -20% -60% -20%; height:70%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(241,90,37,.22), transparent 70%);
  pointer-events:none;
}.bdTeamsPage .bdTpLineup{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); margin-top:52px; position:relative}.bdTeamsPage .bdTpAsset{
  border-radius:var(--r-lg); padding:24px; text-align:center;
  background:rgba(7,12,34,.42); border:1px solid var(--hair-dark);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}.bdTeamsPage .bdTpAsset:hover{transform:translateY(-8px); border-color:rgba(93,139,255,.5)}.bdTeamsPage .bdTpAssetStage{height:118px; display:grid; place-items:center; margin-bottom:20px}.bdTeamsPage .bdTpAsset h4{font-family:var(--display); font-size:17.5px; font-weight:800}.bdTeamsPage .bdTpAsset p{font-size:13.4px; color:var(--on-dark-mute); margin-top:7px}.bdTeamsPage .bdTpObjCard{width:112px;height:70px;border-radius:9px;background:linear-gradient(140deg,#2B3F86,#0D1436);border:1px solid rgba(147,170,236,.3); box-shadow:0 16px 30px -16px #000; position:relative}.bdTeamsPage .bdTpObjCard::after{content:''; position:absolute; top:9px; left:9px; width:8px;height:8px;border-radius:50%;background:var(--orange)}.bdTeamsPage .bdTpObjKey{width:74px;height:74px;border-radius:16px;background:linear-gradient(140deg,#2B3F86,#0D1436);border:1px solid rgba(147,170,236,.3); position:relative; box-shadow:0 16px 30px -16px #000}.bdTeamsPage .bdTpObjKey::before{content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:11px;height:11px;border-radius:50%; border:2px solid rgba(147,170,236,.5)}.bdTeamsPage .bdTpObjKey::after{content:''; position:absolute; inset:auto 0 16px; margin:auto; width:9px;height:9px;border-radius:50%;background:var(--orange)}.bdTeamsPage .bdTpObjSticker{width:76px;height:76px;border-radius:50%;background:linear-gradient(140deg,#2B3F86,#0D1436);border:2px dashed rgba(147,170,236,.42); display:grid; place-items:center; box-shadow:0 16px 30px -16px #000}.bdTeamsPage .bdTpObjSticker i{width:10px;height:10px;border-radius:50%;background:var(--orange)}.bdTeamsPage .bdTpObjCxo{width:112px;height:70px;border-radius:9px;background:linear-gradient(140deg,#161A2E,#05070F);border:1px solid rgba(241,90,37,.55); box-shadow:0 16px 34px -14px #000, inset 0 1px 0 rgba(255,255,255,.08); position:relative}.bdTeamsPage .bdTpObjCxo::after{content:''; position:absolute; top:9px; left:9px; width:8px;height:8px;border-radius:50%;background:var(--orange); box-shadow:0 0 12px var(--orange)}.bdTeamsPage .bdTpObjCxo::before{content:''; position:absolute; bottom:11px; left:9px; right:38px; height:1px; background:linear-gradient(90deg,rgba(241,90,37,.7),transparent)}

/* ─────────────────────────────────────────────
   ROLLOUT — a real sequence, so it is numbered
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpSteps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:52px}.bdTeamsPage .bdTpStep{position:relative; padding-top:26px; border-top:2px solid var(--hair-light)}.bdTeamsPage .bdTpStepN{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--blue); display:block; margin-bottom:12px}.bdTeamsPage .bdTpStep h4{font-family:var(--display); font-size:clamp(19px,2vw,23px); font-weight:800; margin-bottom:9px}.bdTeamsPage .bdTpStep p{color:var(--on-light-mute); font-size:15.2px}

/* ─────────────────────────────────────────────
   CTA
   ───────────────────────────────────────────── */.bdTeamsPage .bdTpCta{position:relative; overflow:hidden; text-align:center; background:var(--ink)}.bdTeamsPage .bdTpCta::before{
  content:''; position:absolute; inset:auto -10% -70% -10%; height:150%;
  background:radial-gradient(46% 52% at 50% 82%, rgba(34,85,232,.34), transparent 68%);
}.bdTeamsPage .bdTpCtaIn{position:relative}.bdTeamsPage .bdTpCta h2{font-size:clamp(33px,4.4vw,60px); max-width:19ch; margin:20px auto 18px}.bdTeamsPage .bdTpCta .bdTpLede{margin:0 auto}.bdTeamsPage .bdTpCtaRow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px}.bdTeamsPage .bdTpCta .bdTpEyebrow{justify-content:center}.bdTeamsPage .bdTpRoot p.bdTpCtaFine{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mute); margin-top:44px}

/* reveal */.bdTeamsPage .bdTpRv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}.bdTeamsPage .bdTpRv.bdTpIn{opacity:1; transform:none}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width:1000px){.bdTeamsPage .bdTpHeroGrid{grid-template-columns:1fr}.bdTeamsPage .bdTpFeatPair, .bdTeamsPage .bdTpVersus{grid-template-columns:1fr}.bdTeamsPage .bdTpTrio, .bdTeamsPage .bdTpLineup, .bdTeamsPage .bdTpSteps{grid-template-columns:repeat(2,1fr)}.bdTeamsPage .bdTpTapFlag{right:auto; left:0; top:-26px}
}
@media (max-width:600px){.bdTeamsPage .bdTpRoot{font-size:16px}.bdTeamsPage .bdTpTrio, .bdTeamsPage .bdTpLineup, .bdTeamsPage .bdTpSteps{grid-template-columns:1fr}.bdTeamsPage .bdTpRow{grid-template-columns:1.2fr .9fr 56px; font-size:10.8px; gap:8px}.bdTeamsPage .bdTpRow .bdTpHideSm{display:none}.bdTeamsPage .bdTpStack{height:200px}.bdTeamsPage .bdTpDbc{height:186px; padding:18px}.bdTeamsPage .bdTpConsoleGrid{min-height:150px}
}
@media (prefers-reduced-motion:reduce){.bdTeamsPage, .bdTeamsPage *{animation:none !important; transition:none !important}.bdTeamsPage .bdTpRv{opacity:1; transform:none}
}


/* ============================================================
   TEAM PLAN WIZARD — <app-team-plan-wizard>, prefix bdTpw*
   Ported verbatim from V4_BigdotManageBackend
   (src/assets/css/instaciti-manager.css). The component uses
   ViewEncapsulation.None, so these must stay global.
   It is a fixed-position overlay rendered OUTSIDE .bdTpRoot so the
   Teams page's own base element rules cannot restyle it.
   ============================================================ */
/* Retheme relative to the manage-backend original: that design used orange for
   every border and selection, which shouts on this site. Here orange is
   reserved for the primary CTA (matching the homepage); structure is neutral
   and selection/focus use the site's electric blue. */
.bdTpw {
  --bdTpwLine: #dfe4f2;
  --bdTpwAccent: var(--site-tertiary-color);
}
/* Input tokens the wizard expects; absent from this project's palette. */
:root {
  --site-input-bg: #ffffff;
  --site-input-border: #d1cfc9;
}
.bdTpw{
  position: fixed;
  inset: 0;
  /* Above the fixed sidebar (.bdSide, z-index 9999) and the v2 header. */
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: var(--site-body-font);
  color: var(--site-text-color);
  animation: bdTpwFadeIn 0.2s ease;
}body.bdTpwOpen{
  overflow: hidden;
}body.bdTpwOpen .cdk-overlay-container{
  z-index: 10100 !important;
}.bdTpwBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}.bdTpwPanel{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 960px;
  max-width: 100%;
  max-height: 100%;
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: bdTpwPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}.bdTpwRepBar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: var(--site-primary-color);
  color: #ffffff;
  font-size: 12.5px;
}.bdTpwRepDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bdTpwAccent);
  box-shadow: 0 0 0 3px rgba(241, 90, 37, 0.28);
  flex-shrink: 0;
}.bdTpwRepText{
  flex: 1;
  min-width: 0;
}.bdTpwRepText strong{
  font-weight: 700;
}.bdTpwRepText small{
  color: rgba(255, 255, 255, 0.6);
  margin-left: 8px;
}.bdTpwRepToggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}.bdTpwRepToggle:hover{
  background: rgba(255, 255, 255, 0.16);
}.bdTpwRepSwitch{
  width: 26px;
  height: 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.24);
  position: relative;
  transition: var(--transition-fast);
}.bdTpwRepSwitch::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  transition: var(--transition-fast);
}.bdTpwRepToggleOn .bdTpwRepSwitch{
  background: var(--bdTpwAccent);
}.bdTpwRepToggleOn .bdTpwRepSwitch::after{
  left: 14px;
}.bdTpwHead{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--bdTpwLine);
}.bdTpwHeadMain{
  flex: 1;
  min-width: 0;
}.bdTpwBrand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}.bdTpwBrandDot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--site-cta-color);
  box-shadow: 0 0 0 4px rgba(241, 90, 37, 0.12);
  position: relative;
}.bdTpwBrandDot::after{
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #ffffff;
}.bdTpwBrandName{
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}.bdTpwTitle{
  font-family: var(--site-secondary-font);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--site-text-color);
}.bdTpwSub{
  color: var(--site-text-muted-color);
  font-size: 13px;
  margin: 4px 0 0;
  max-width: 620px;
}.bdTpwClose{
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bdTpwLine);
  background: #ffffff;
  color: var(--site-text-muted-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}.bdTpwClose:hover{
  background: var(--site-secondary-color);
  color: var(--site-text-color);
}.bdTpwProgress{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bdTpwLine);
  background: var(--site-secondary-color);
  overflow-x: auto;
  /* Steps can still pan on narrow screens, but never show a scrollbar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}.bdTpwProgress::-webkit-scrollbar{
  display: none;
}.bdTpwProgressStep{
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  cursor: default;
}.bdTpwProgressStep + .bdTpwProgressStep::before{
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--bdTpwLine);
  flex-shrink: 0;
}.bdTpwProgressStepDone + .bdTpwProgressStep::before,
.bdTpwProgressStepCurrent + .bdTpwProgressStep::before{
  background: rgba(241, 90, 37, 0.4);
}.bdTpwProgressStepDone{
  cursor: pointer;
}.bdTpwProgressBubble{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--bdTpwLine);
  color: var(--site-text-muted-color);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
}.bdTpwProgressStepCurrent .bdTpwProgressBubble{
  background: var(--bdTpwAccent);
  border-color: var(--bdTpwAccent);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(241, 90, 37, 0.14);
}.bdTpwProgressStepDone .bdTpwProgressBubble{
  background: rgba(241, 90, 37, 0.14);
  border-color: transparent;
  color: var(--bdTpwAccent);
}.bdTpwProgressLabel{
  font-size: 12px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.bdTpwProgressStepCurrent .bdTpwProgressLabel{
  color: var(--site-text-color);
}.bdTpwProgressStepDone .bdTpwProgressLabel{
  color: var(--site-text-color);
}.bdTpwBody{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 26px;
  background: var(--site-secondary-color);
}.bdTpwCard{
  background: #ffffff;
  border: 1px solid var(--bdTpwLine);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 26px;
}.bdTpwStepMeta{
  margin-bottom: 4px;
}.bdTpwStepBadge{
  display: inline-block;
  background: rgba(241, 90, 37, 0.1);
  color: var(--bdTpwAccent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-full);
}.bdTpwField{
  margin-top: 20px;
}.bdTpwLabel{
  font-size: 13px;
  font-weight: 700;
  color: var(--site-text-color);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}.bdTpwLabelInternal{
  color: var(--site-tertiary-color);
}.bdTpwLabelNote{
  font-weight: 500;
  font-size: 12px;
  color: var(--site-text-muted-color);
}.bdTpwReq{
  background: rgba(220, 38, 38, 0.1);
  color: var(--site-error-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}.bdTpwHint{
  font-size: 12.5px;
  color: var(--site-text-muted-color);
  line-height: 1.5;
  margin-bottom: 8px;
}.bdTpwMuted{
  color: var(--site-text-muted-color);
  font-weight: 500;
}.bdTpwInput{
  width: 100%;
  padding: 10px 13px;
  background: var(--site-input-bg);
  border: 1px solid var(--site-input-border);
  border-radius: var(--radius-md);
  color: var(--site-text-color);
  font-size: 13.5px;
  font-family: inherit;
  transition: var(--transition-fast);
}.bdTpwInput:focus{
  outline: none;
  border-color: var(--bdTpwAccent);
  box-shadow: 0 0 0 3px rgba(241, 90, 37, 0.12);
}.bdTpwInput::placeholder{
  color: var(--site-text-muted-color);
}.bdTpwInputSpaced{
  margin-top: 10px;
}.bdTpwTextarea{
  resize: vertical;
  min-height: 74px;
  line-height: 1.55;
}.bdTpwGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}.bdTpwPhoneRow{
  display: flex;
  align-items: stretch;
}.bdTpwDialSelect{
  padding: 10px 12px;
  background: var(--site-secondary-color);
  border: 1px solid var(--site-input-border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--site-text-color);
  cursor: pointer;
}.bdTpwDialSelect:focus{
  outline: none;
}.bdTpwInputPhone{
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}.bdTpwSlider{
  padding: 6px 0 2px;
}.bdTpwSliderValue{
  display: block;
  text-align: center;
  font-family: var(--site-secondary-font);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--bdTpwAccent);
}.bdTpwSliderCaption{
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--site-text-muted-color);
}.bdTpwRange{
  width: 100%;
  height: 6px;
  margin-top: 16px;
  border-radius: var(--radius-full);
  background: var(--bdTpwLine);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}.bdTpwRange:focus{
  outline: none;
}.bdTpwRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--bdTpwAccent);
  box-shadow: 0 4px 10px rgba(241, 90, 37, 0.3);
  cursor: grab;
}.bdTpwRange::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--bdTpwAccent);
  box-shadow: 0 4px 10px rgba(241, 90, 37, 0.3);
  cursor: grab;
}.bdTpwSliderMeta{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--site-text-muted-color);
}.bdTpwTileGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}.bdTpwTileGridWide{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}.bdTpwTile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 13px 11px;
  background: #ffffff;
  border: 1px solid var(--bdTpwLine);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-fast);
}.bdTpwTile:hover{
  border-color: var(--site-input-border);
  background: var(--site-secondary-color);
}.bdTpwTileActive{
  border-color: var(--bdTpwAccent);
  background: rgba(241, 90, 37, 0.07);
  box-shadow: 0 0 0 3px rgba(241, 90, 37, 0.1);
}.bdTpwTileIcon{
  font-size: 17px;
  color: var(--bdTpwAccent);
  line-height: 1.2;
}.bdTpwTileActive .bdTpwTileIcon{
  color: var(--bdTpwAccent);
}.bdTpwTileLabel{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwTileActive .bdTpwTileLabel{
  color: var(--bdTpwAccent);
}.bdTpwTileSub{
  font-size: 11.5px;
  color: var(--site-text-muted-color);
}.bdTpwOptionRow{
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid var(--bdTpwLine);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-fast);
}.bdTpwOptionRow:hover{
  border-color: var(--site-input-border);
  background: var(--site-secondary-color);
}.bdTpwOptionRowActive{
  border-color: var(--bdTpwAccent);
  background: rgba(241, 90, 37, 0.07);
}.bdTpwOptionIcon{
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--site-secondary-color);
  color: var(--bdTpwAccent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}.bdTpwOptionRowActive .bdTpwOptionIcon{
  background: #ffffff;
  color: var(--bdTpwAccent);
}.bdTpwOptionBody{
  display: flex;
  flex-direction: column;
  min-width: 0;
}.bdTpwOptionLabel{
  font-size: 13px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwOptionRowActive .bdTpwOptionLabel{
  color: var(--bdTpwAccent);
}.bdTpwOptionSub{
  font-size: 12px;
  color: var(--site-text-muted-color);
}.bdTpwToggleRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  margin-bottom: 8px;
  background: var(--site-secondary-color);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: var(--transition-fast);
}.bdTpwToggleRow:hover{
  border-color: var(--bdTpwLine);
}.bdTpwToggleRowOn{
  background: rgba(241, 90, 37, 0.08);
  border-color: rgba(241, 90, 37, 0.35);
}.bdTpwToggleBody{
  flex: 1;
  min-width: 0;
}.bdTpwToggleBody strong{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwToggleRowOn .bdTpwToggleBody strong{
  color: var(--bdTpwAccent);
}.bdTpwToggleBody small{
  display: block;
  font-size: 12px;
  color: var(--site-text-muted-color);
  margin-top: 1px;
}.bdTpwToggleSwitch{
  width: 36px;
  height: 21px;
  border-radius: var(--radius-full);
  background: var(--bdTpwLine);
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-fast);
}.bdTpwToggleSwitch::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: var(--transition-fast);
}.bdTpwToggleRowOn .bdTpwToggleSwitch{
  background: var(--bdTpwAccent);
}.bdTpwToggleRowOn .bdTpwToggleSwitch::after{
  left: 17px;
}.bdTpwBanner{
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: rgba(217, 119, 6, 0.09);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  margin-top: 20px;
}.bdTpwBannerApplied{
  background: rgba(22, 163, 74, 0.09);
  border-color: rgba(22, 163, 74, 0.32);
}.bdTpwBannerIcon{
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--site-warning-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}.bdTpwBannerApplied .bdTpwBannerIcon{
  color: var(--site-success-color);
}.bdTpwBannerBody{
  flex: 1;
  min-width: 0;
}.bdTpwBannerTitle{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwBannerText{
  font-size: 12.5px;
  color: var(--site-text-muted-color);
  line-height: 1.55;
  margin-top: 2px;
}.bdTpwBannerBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 13px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--site-primary-color);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
}.bdTpwBannerBtn:hover{
  background: var(--site-tertiary-color);
}.bdTpwPlanList{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}.bdTpwPlan{
  background: #ffffff;
  border: 1px solid var(--bdTpwLine);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: var(--transition-fast);
}.bdTpwPlan:hover{
  border-color: var(--site-input-border);
}.bdTpwPlanPicked{
  border-color: var(--bdTpwAccent);
  background: rgba(241, 90, 37, 0.05);
}.bdTpwPlanHead{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}.bdTpwPlanIcon{
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--site-secondary-color);
  color: var(--bdTpwAccent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}.bdTpwPlanPicked .bdTpwPlanIcon{
  background: #ffffff;
  color: var(--bdTpwAccent);
}.bdTpwPlanMeta{
  flex: 1;
  min-width: 0;
}.bdTpwPlanName{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--site-tertiary-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--site-text-color);
}.bdTpwPlanTag{
  font-family: var(--site-body-font);
  background: var(--site-success-color);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}.bdTpwPlanDesc{
  font-size: 12.5px;
  color: var(--site-text-muted-color);
  line-height: 1.45;
  margin-top: 2px;
}.bdTpwPlanPrice{
  font-size: 12.5px;
  color: var(--site-text-muted-color);
  margin-top: 6px;
}.bdTpwPlanPrice strong{
  font-family: var(--site-tertiary-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwPlanFeatures{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--site-text-muted-color);
}.bdTpwPlanFeatures i{
  color: var(--site-success-color);
  font-size: 10px;
  margin-right: 3px;
}.bdTpwPlanFoot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--bdTpwLine);
}.bdTpwPlanSubtotal{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--site-text-muted-color);
}.bdTpwPlanPicked .bdTpwPlanSubtotal{
  color: var(--bdTpwAccent);
}.bdTpwPlanSubtotal strong{
  font-family: var(--site-tertiary-font);
  font-size: 15px;
  color: inherit;
}.bdTpwStepper{
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--site-input-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}.bdTpwPlanPicked .bdTpwStepper,
.bdTpwProductPicked .bdTpwStepper{
  border-color: var(--bdTpwAccent);
}.bdTpwStepper button{
  width: 34px;
  height: 34px;
  border: none;
  background: #ffffff;
  color: var(--site-text-muted-color);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition-fast);
}.bdTpwStepper button:hover:not(:disabled){
  background: var(--site-secondary-color);
  color: var(--bdTpwAccent);
}.bdTpwStepper button:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}.bdTpwStepper input{
  width: 54px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--bdTpwLine);
  border-right: 1px solid var(--bdTpwLine);
  background: transparent;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--site-text-color);
  -moz-appearance: textfield;
}.bdTpwStepper input:focus{
  outline: none;
  background: rgba(241, 90, 37, 0.07);
}.bdTpwStepper input::-webkit-outer-spin-button,
.bdTpwStepper input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}.bdTpwAllocation{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--site-text-muted-color);
  text-align: center;
}.bdTpwAllocationWarn{
  color: var(--site-error-color);
}.bdTpwAllocationOk{
  color: var(--site-success-color);
  font-weight: 600;
}.bdTpwProductGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}.bdTpwProduct{
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--bdTpwLine);
  border-radius: var(--radius-lg);
  padding: 15px;
  transition: var(--transition-fast);
}.bdTpwProductPicked{
  border-color: var(--bdTpwAccent);
  background: rgba(241, 90, 37, 0.05);
}.bdTpwProductArt{
  height: 96px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f4f5fa, #e6e9f2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}.bdTpwProductPicked .bdTpwProductArt{
  background: linear-gradient(135deg, #ffffff, rgba(241, 90, 37, 0.14));
}.bdTpwArtSvg{
  width: 96px;
  height: 62px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14));
}.bdTpwArtCardFace{
  fill: #ffffff;
  stroke: var(--site-input-border);
  stroke-width: 1;
}.bdTpwArtInk{
  fill: var(--site-primary-color);
}.bdTpwArtInkSoft{
  fill: var(--site-text-muted-color);
}.bdTpwArtAccent{
  fill: var(--bdTpwAccent);
}.bdTpwArtHole{
  fill: #ffffff;
}.bdTpwArtRing{
  fill: none;
  stroke: var(--bdTpwAccent);
  stroke-width: 1.5;
}.bdTpwArtRingDashed{
  fill: none;
  stroke: var(--bdTpwAccent);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}.bdTpwArtBand{
  fill: var(--bdTpwAccent);
}.bdTpwArtBandInner{
  fill: #ffffff;
  opacity: 0.25;
}.bdTpwArtMetal{
  fill: url(#bdTpwMetalGrad);
  stroke: #475569;
  stroke-width: 1;
}.bdTpwArtMetalLine{
  fill: #ffffff;
  opacity: 0.9;
}.bdTpwArtMetalLineSoft{
  fill: #ffffff;
  opacity: 0.7;
}.bdTpwArtMetalChip{
  fill: #ffffff;
  opacity: 0.35;
}.bdTpwProductName{
  font-family: var(--site-tertiary-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwProductDesc{
  flex: 1;
  font-size: 12px;
  color: var(--site-text-muted-color);
  line-height: 1.5;
  margin-top: 2px;
}.bdTpwProductFoot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
}.bdTpwProductPrice{
  font-family: var(--site-tertiary-font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--site-text-color);
}.bdTpwProductPrice small{
  font-family: var(--site-body-font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--site-text-muted-color);
}.bdTpwSummary{
  background: var(--site-secondary-color);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 18px;
}.bdTpwSummaryTitle{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-text-muted-color);
  margin: 0 0 10px;
}.bdTpwSummaryRow{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--bdTpwLine);
  font-size: 13px;
}.bdTpwSummaryRow:last-of-type{
  border-bottom: none;
}.bdTpwSummaryKey{
  color: var(--site-text-muted-color);
}.bdTpwSummaryVal{
  font-weight: 700;
  color: var(--site-text-color);
  text-align: right;
}.bdTpwSummaryRowStrong .bdTpwSummaryKey{
  color: var(--site-text-color);
  font-weight: 700;
}.bdTpwSummaryDark{
  background: var(--site-primary-color);
  color: #ffffff;
}.bdTpwSummaryDark .bdTpwSummaryTitle{
  color: rgba(255, 255, 255, 0.6);
}.bdTpwSummaryDark .bdTpwSummaryRow{
  border-bottom-color: rgba(255, 255, 255, 0.12);
}.bdTpwSummaryDark .bdTpwSummaryKey{
  color: rgba(255, 255, 255, 0.72);
}.bdTpwSummaryDark .bdTpwSummaryVal{
  color: #ffffff;
}.bdTpwSummaryRowDiscount .bdTpwSummaryKey,
.bdTpwSummaryRowDiscount .bdTpwSummaryVal{
  color: var(--site-warning-color);
}.bdTpwSummaryRowTotal{
  border-bottom: none;
  border-top: 2px solid rgba(255, 255, 255, 0.85);
  margin-top: 6px;
  padding-top: 11px;
  align-items: center;
}.bdTpwSummaryRowTotal .bdTpwSummaryKey{
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
}.bdTpwSummaryRowTotal .bdTpwSummaryVal{
  font-family: var(--site-secondary-font);
  font-size: 23px;
  font-weight: 600;
  color: var(--bdTpwAccent);
}.bdTpwSummaryNote{
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 8px 0 0;
}.bdTpwConsent{
  font-size: 12px;
  color: var(--site-text-muted-color);
  text-align: center;
  line-height: 1.55;
  margin: 20px 0 0;
}.bdTpwFoot{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border-top: 1px solid var(--bdTpwLine);
  background: #ffffff;
}.bdTpwFootSpacer{
  flex: 1;
}.bdTpwFootError{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--site-error-color);
}.bdTpwFootTotal{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--site-primary-color);
  color: #ffffff;
  font-size: 12.5px;
}.bdTpwFootTotal strong{
  font-family: var(--site-tertiary-font);
  font-size: 15px;
  font-weight: 700;
}.bdTpwFootTotalLabel{
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}.bdTpwBtn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 17px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bdTpwLine);
  background: #ffffff;
  color: var(--site-text-color);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}.bdTpwBtn:hover:not(:disabled){
  background: var(--site-secondary-color);
  border-color: var(--site-input-border);
}.bdTpwBtn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}.bdTpwBtnPrimary{
  background: var(--site-cta-color);
  border-color: var(--site-cta-color);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(241, 90, 37, 0.28);
}.bdTpwBtnPrimary:hover:not(:disabled){
  background:#ff7a3d;
  border-color: #d94d1f;
  color: #ffffff;
}.bdTpwBtnGhost{
  background: transparent;
  border-color: transparent;
}.bdTpwBtnGhost:hover:not(:disabled){
  background: var(--site-secondary-color);
}.bdTpwSuccess{
  text-align: center;
  padding: 40px 24px 44px;
}.bdTpwSuccessIcon{
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--site-success-color);
  color: #ffffff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 36px rgba(22, 163, 74, 0.28);
  animation: bdTpwPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}.bdTpwSuccessTitle{
  font-family: var(--site-secondary-font);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--site-text-color);
}.bdTpwSuccessText{
  max-width: 460px;
  margin: 10px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--site-text-muted-color);
}.bdTpwSuccessRef{
  display: inline-block;
  margin-top: 18px;
  padding: 6px 14px;
  border: 1px solid var(--bdTpwLine);
  border-radius: var(--radius-md);
  background: var(--site-secondary-color);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}.bdTpwSuccessActions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
@media (max-width: 860px) {.bdTpwProductGrid,
  .bdTpwGrid2{
    grid-template-columns: 1fr;
  }}
@media (max-width: 680px) {.bdTpw{
    padding: 0;
  }.bdTpwPanel{
    border-radius: 0;
    height: 100%;
    max-height: 100%;
  }.bdTpwProgressLabel{
    display: none;
  }.bdTpwBody{
    padding: 14px 12px 20px;
  }.bdTpwCard{
    padding: 16px 14px 20px;
  }.bdTpwFoot{
    padding: 11px 12px;
    gap: 8px;
  }.bdTpwFootTotal{
    padding: 6px 10px;
    font-size: 11px;
  }.bdTpwFootError{
    order: 3;
    width: 100%;
  }}
@keyframes bdTpwFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bdTpwPop {
  from {
    transform: translateY(12px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes bdTpwPopIn {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Replaces Font Awesome's fa-spin on the wizard's submit spinner. */
.bdTpwSpin { animation: bdTpwSpinKf 1s linear infinite; }
@keyframes bdTpwSpinKf { to { transform: rotate(360deg); } }