:root {
  --primary: #475bf6; /* Main blue */
  --bs-primary: #475bf6;
  --secondary: hsl(172, 88%, 81%); /* Teal */
  --bs-success: #a2f9ed;
  --accent: #d6b8f8; /* Pink */
  --dark: #0c0c3a; /* Dark blue */
  --light-blue: #5380f2; /* Light blue */
  --light: #f8f9fa;
  --light-grey: #86868b; /* Light gray default */
  --success: #34c759;
  --dark-grey: #333333;
  --darker-grey: #292828;
  --font-family-chosen: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-small: clamp(8px, 1.65vw + 12px, 12px);
  --font-size-smaller: clamp(12px, 1.65vw + 12px, 15px);
  --font-size-default: clamp(16px, 1.65vw + 12px, 20px); /* Apple's default is around 20px for body text */
  --font-size-large: clamp(24px, 1.65vw + 12px, 36px);
  --font-size-largest: clamp(32px, 7.5vw + 8px, 50px);
  --font-weight-light: 500;
  --font-weight-default: 630; /* Use 630 for a clean Apple-like look */
  --font-weight-boldest: 660;
  --p-btn-border: #cacaca;
  --p-btn-def-bg: #FFFFFF;
  --p-btn-def-col: #000000;
  --p-btn-dir-col: #242424;
  --p-prim-text-col: #f5f5f5;
  --p-btn-scope-unactive: #212136;
  --p-btn-scope-action: #212136;

}
html, body {
  font-family: var(--font-family-chosen);
  color: var(--light-grey); 
  font-size: var(--font-size-default); 
  font-weight: var(--font-weight-default); 
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  line-height: 1.3; /* Slightly tighter than 1.8 but still readable */
  letter-spacing: 0.0em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* PREVENT HORIZONTAL RUBBER BAND EFFECT */
  overflow-x: hidden; /* Blocks horizontal scroll */
  overscroll-behavior-x: none; /* No horizontal rubber-band effect */
}

strong {
  font-weight: var(--font-weight-default);  /* Slightly bold, adjust to 700 if needed */
  color: #000000; /* Bold text in black */
    }
.strong {
      font-weight: var(--font-weight-default);  /* Slightly bold, adjust to 700 if needed */
      color: #000000; /* Bold text in black */
        }
.strong-white {
      font-weight: var(--font-weight-default);  /* Slightly bold, adjust to 700 if needed */
      color: #ffffff !important;
        }

.lp-big-bold-words {
  font-family: var(--font-family-chosen);
  font-size: var(--font-size-largest);
  font-weight: var(--font-weight-boldest);
  font-optical-sizing: auto;
  font-style: normal;
  color: #000000;
}

.lp-big-bold-words-white {
  font-family: var(--font-family-chosen);
  font-size: var(--font-size-largest);
  font-weight: var(--font-weight-boldest);
  color: #ffffff;
  font-optical-sizing: auto;
  font-style: normal;
}


.lp-big-bold-words-2 {
  font-family: var(--font-family-chosen);
  font-size: var(--font-size-large);
  color: var(--light-grey); 
  font-weight: var(--font-weight-boldest);
  font-optical-sizing: auto;
  font-style: normal;
}

.lp-small-words {
  font-family: var(--font-family-chosen);
  color: var(--light-grey);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-light); /* Use 400 or 300 for a clean Apple-like look */
  font-optical-sizing: auto;
  font-style: normal;
}


.text-primary {
  color: var(--primary) !important; /* Replace with your custom blue */
}

.custom-navbar {
  background-color: rgba(255, 255, 255, 0.7) !important; /* 70% transparent white */
  height: 50px; /* Adjust as needed for thinness */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* optional for better visibility */
}

#userArea {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center; /* optional: centers horizontally inside its own box */
  height: 100%;          /* ensures it stretches to navbar height */
}
#userArea a.p-btn {
  display: flex;
  align-items: center;   /* keeps button text vertically centered */
}

.dropdown-item {
  font-family: var(--font-family-chosen) !important;;
  color: var(--light-grey) !important;; 
  font-size: var(--font-size-smaller) !important;; 
  font-weight: var(--font-weight-default) !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* When clicked / active */
.dropdown-item:active,
.dropdown-item[aria-selected="true"],
.dropdown-item.selected {
  color: var(--primary) !important;
  background-color: var(--lightest-grey) !important; /* Optional: subtle bg on select */
}

.transparent-logo {
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
  color: #000; /* Optional: ensure text is visible */
}

.transparent-logo:hover {
  background-color: var(--light);
}



.logo-text {
  font-family: var(--font-family-chosen);
  font-size: var(--font-size-default);
  font-weight: 700; 
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 96.3;
}

/* Bullet List */

.big-dot {
  list-style: none; /* Remove default bullets */
  padding-left: 30px; /* Add padding for custom bullets */
}

.big-dot li {
  position: relative;
  margin-bottom: 10px; /* Add spacing between list items */
}

.big-dot li::before {
  content: ''; /* Add custom content */
  position: absolute;
  left: -25px; /* Adjust bullet position */
  width: 17px; /* Size of the bullet */
  height: 17px; /* Size of the bullet */
  background-color: #000000; /* Bullet color */
  border: 4px solid var(--accent); /* Bullet border */
  border-radius: 50%; /* Make it a circle */
  margin-bottom: 10px;
  margin-top: 6px;
}

/* Custom Bullet List */

.custom-bullet-list li::before {
  content: '\2713'; /* Unicode character for checkmark */
  display: inline-block;
  color: #ff758c; /* Custom bullet color */
  padding: 0 6px 0 0; /* Space between bullet and text */
}

.custom-bullet-list li {
  list-style-type: none; /* Removes default bullets */
  font-size: 1em; /* Text size */
  margin-bottom: 20px; /* Adds space between list items */
}

u {
  text-decoration-thickness: 1.5px; /* Adjusts underline thickness */
  text-decoration-color: #80FFE6; /* Underline color */
  text-underline-offset: 0.3em; /* Space between text and underline */
  font-weight: 630; /* Text weight */
  color: #80FFE6; /* Text color */
  text-decoration-style: double; /* Double underline */
}


.bold-teal {
  font-weight: 630;
  color: #80FFE6;
}

.bold-pink {
  font-weight: 630;
  color: #C89AF8;
}

.bold-red {
  font-weight: 630;
  color: #ff758c;
}


.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-h2-divider {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Light gray background */
  border-width: 1px 0; /* Top and bottom border */
  border-style: solid; /* Add a solid border */
  border-color: rgba(0, 0, 0, 0.1); /* Match the background color */
  padding: 10px 0; /* 10px padding on top and bottom */
}

.mycard {
  margin-bottom: 1rem; /* Add bottom margin */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(69, 69, 69, 0.3); /* Subtle shadow */
  overflow: hidden; /* Prevent content from overflowing */
  background-color: #ffffffd7; /* White background */
  padding: 2rem; /* Add padding to the card body */
}

.mycard2 {
  margin-bottom: 1rem; /* Add bottom margin */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0 2px 4px rgb(255, 255, 255); /* Subtle shadow */
  overflow: hidden; /* Prevent content from overflowing */
  background-color: #ffffff; /* White background */
  padding: 2rem; /* Add padding to the card body */
}

.mycard3 {
  margin-bottom: 1rem; /* Add bottom margin */
  border-radius: 24px; /* Rounded corners */
  border-color: #ffffff;
  border-style: solid; 
  overflow: hidden;
  border-width: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  overflow: hidden; /* Prevent content from overflowing */
  padding: 2rem; /* Add padding to the card body */

}

.progress-bar {
  background-color: #5FC3F0;
}

/* Floating Labels */
.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 1.75rem;
  font-size:large;
  border-radius: 24px;
}
.form-floating > .form-select {
  border-radius: 24px !important;
  padding-left: 1.75rem;
  font-size: large;
}
.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(2.5rem + 2px);
  line-height: 1;
}

.form-floating>label {
  padding: 0.5rem 1.75rem;
  font-size:medium;
}

.custom-file-button .form-control[type="file"] {
  border-radius: 24px;
  padding: 0.5rem 1.75rem; /* Optional: match other inputs */
  font-size: large;         /* Optional: for consistency */
  height: calc(2.5rem + 2px); /* Optional: match height */
}

.invalid-feedback {
  font-size:small;
}

.hero-bullet {
  font-size: 1em;
  margin-bottom: 5px; /* Adds space between each list item */

}

/* Collapse Nav Bar */
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.664)fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 40px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

.fixed-product-width-btn {
  width: 150px;                /* Set consistent width */
  text-overflow: ellipsis;    /* Show "..." if too long */
  white-space: nowrap;        /* Prevent text wrapping */
  overflow: hidden;           /* Hide overflow content */
  display: inline-block;      /* Needed for ellipsis */
  text-align: left;           /* Optional: align text nicely */
}

.truncate-start {
  direction: rtl;              /* Flip direction so end shows first */
  text-align: left;            /* Align text visually from the left */
  white-space: nowrap;         /* Prevent wrapping */
  overflow: hidden;            /* Hide overflow */
  text-overflow: ellipsis;     /* Show ellipsis */
  display: inline-block;
  max-width: 300px;            /* Adjust as needed */
}

.form-floating > label.small-label {
  font-size: 0.70rem; /* or any size you prefer */
}

.form-floating.small-input > .form-control {
  font-size: 0.70rem;
  padding-top: 1rem;     /* Adjust as needed for vertical alignment */
  padding-bottom: 0.5rem;
}

.template-dropdown-menu {
  max-height: 200px;
  overflow-y: scroll;
}

/* Apply to all table headers */
#dataTableSafeAI th {
  background-color: #ffffff;
  color: rgb(134, 134, 139);
}

/* Apply to first column cells */
#dataTableSafeAI td:first-child {
  background-color: #ffffff;
  color: rgb(134, 134, 139);
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-photo-height {
    max-height: 1000px;
    width: auto; /* keeps aspect ratio */
  }

/* Shimmering */

.urgency-meter {
  margin: 20px 0;
  text-align: center;
}

.urgency-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5px;
  justify-content: center;
}

.urgency-box {
  width: 10px;
  height: 20px;
  border-radius: 1px;
  background-color: var(--light-grey); /* default grey */
}

.urgency-taken {
  background-color: var(--light-grey);
}

.urgency-available {
  background-color: var(--success); /* green */
}

.urgency-shimmering {
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% { background-color: var(--light-grey); }
  50% { background-color: var(--success); }
}

.dark-bg-card {
  background: var(--dark-grey);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* Bonus */

.bonus-img {
  width: 100%;
  height: auto;
}

.bonues-receipt-container {
  background: white;
  border: 2px dashed rgba(71,91,246,0.3);
  border-radius: 10px;
  padding: 25px;
  position: relative;
  overflow: hidden;
}

.bonus-paid-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-size: 4rem;
  font-weight: 900;
  color: rgba(71,91,246,0.3);
  pointer-events: none;
  z-index: 0;
}

/* Footer */
.apple-footer {
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  font-size: 14px;
  color: #6e6e73;
}

.apple-footer .footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.apple-footer .footer-links li {
  margin-bottom: 12px;
}

.apple-footer .footer-links a {
  text-decoration: none;
  color: #6e6e73;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.apple-footer .footer-links a:hover {
  color: #000;
}

.apple-footer svg {
  fill: currentColor;
  transition: transform 0.2s;
}

.apple-footer a:hover svg {
  transform: scale(1.05);
}

.apple-footer .footer-note {
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
}

/* ToastR */
/* Custom toastr position */
#toast-container.toast-top-center > div,
#toast-container.toast-top-full-width > div {
    top: 50px !important;
}

/* Or if you want all toasts to have this position */
#toast-container > div {
    top: 50px !important;
}
#toast-container > .toast {
  border-radius: 12px;
  font-family: var(--font-family-chosen);
  font-size: var(--font-size-default);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  pointer-events: auto; /* So you can still interact with the toast (close button, etc.) */

}

/* Success */
#toast-container > .toast-success {
  background-color: var(--success) !important; /* or var(--your-success-color) */
  color: white  !important;
}

/* Info */
#toast-container > .toast-info {
  background-color: var(--secondary) !important;
  color: white !important;
}

/* Warning */
#toast-container > .toast-warning {
  background-color:  var(--accent) !important;
  color: white!important;
}

/* Error */
#toast-container > .toast-error {
  background-color: #dc3545 !important;
  color: white !important;
}

/* Bootstrap radio check */
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(71, 91, 246, 0.25);
}

.offer-timer .badge {
  background-color: var(--accent);
  font-size: 0.65rem;
  color: white;
  padding: 0.6em 1.2em;
  display: inline-block;
}

.hidden {
  display: none;
}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
  margin-top: 16px;
}

/* Buttons and links */
.button-stripe {
  background: #000000;
  font-family: var(--font-family-chosen);
  color: #ffffff;
  border-radius: 4px;
  border: 0;
  padding: 14px 18px;       
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
.button-stripe:hover {
  filter: contrast(115%);
}
.button-stripe:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #000000;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #000000;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* When mobile view */
@media only screen and (max-width: 600px) {
  form {
    width: 80vw;
    min-width: initial;
  }
}

/* Strike Through */
strikethrough {
    position: relative;
    display: inline;
}

strikethrough::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px; /* Line thickness */
    background: white; /* Uses the text color */
    opacity: 0.7; /* Slightly transparent */
    transform: translateY(-50%) rotate(-15deg); /* Diagonal angle */
    transform-origin: center center;
}

/* Stepper Progress Bar Styles in Pricing */
.progress-bar-wrapper {
  display: flex;
  align-items: flex-start; /* Align to top to handle different label heights */
  justify-content: center;
  width: 100%;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-indicator {
  display: flex;
  align-items: center;
  cursor: pointer;
  transform: scale(1.5);
  margin: 0 calc(1 * 1.5em);
}

.step-line {
  width: 60px;
  height: 3px;
  border-radius: 4px;
  background: lightgrey;
  transition: background 0.5s linear;
}

.step-circle {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  border-radius: 50%;
  border: 2px solid lightgrey;
  background-color: transparent;
  transition: all 0.5s ease;
}

.step-circle::before {
  content: "✔";
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-52.5%, -52.5%);
  opacity: 0;
  transition: opacity 0.5s ease;
  font-size: 12px;
}

.step-indicator.active .step-circle::before {
  opacity: 1;
}

.step-indicator.active .step-circle {
  background-color: var(--success);
  border-color: var(--success);
}

.step-indicator.active .step-line {
  background: var(--success);
}

.step-label {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  min-height: 3.5em; /* Adjust based on your needs */
  display: flex;
  align-items: center;
}

.progress-step .step-indicator.active + .step-label {
  font-weight: bold;
  color: var(--success);
}

/* Specific adjustment for the third step */
.progress-step:nth-child(3) .step-label {
  margin-top: 15px; /* Remove extra margin */
  font-weight: 500;
  transform: translateY(-0.1em); /* Fine-tune positioning */
}

/* Urgency box Pricing */
.urgency-border.box {
  border: 3px solid var(--light-grey);
  padding: 16px 16px;
  border-radius: 12px;
  text-align: left;
  max-width: 230px;
}

/* pricing- blur text */
.blur-text {
  filter: blur(10px) brightness(0.5);
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* ghosty look */
}

.gradient-text-blue {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-green {
  background: linear-gradient(to right, var(--success), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Edge-to-edge demo video on small screens */
@media (max-width: 576px) {
  #closer-look-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Make the 16:9 box span the full viewport width */
  #closer-look-section .ratio {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* pull to screen edges */
  }
  #closer-look-section video,
  #closer-look-section .plyr {
    width: 100%;
    height: 100%;
  }
}

/* Lay out the two CTAs without weird inline gaps */
.cta-row {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;           /* replaces ms-2 */
  flex-wrap: wrap;
}

.price-benefits {
  font-size: var(--font-size-smaller) !important;
}

/* --------------------- New Section --------------------- */
/* Colored Section */

.colored-section-outcome {
  width: 100%;          /* Full width of the viewport */
  background-color: rgb(245, 245, 247);  /* You can change this to any color you like */
  overflow: visible;
}

.colored-section-trust {
  width: 100%;          /* Full width of the viewport */
  background-color: rgb(241, 243, 251);  /* You can change this to any color you like */
  overflow: visible;
}

.colored-section-compare {
  width: 100%;          /* Full width of the viewport */
  background-color:rgb(246, 245, 245); /* You can change this to any color you like */
  overflow: visible;
}

.colored-section-price {
  width: 100%;          /* Full width of the viewport */
  background-color:#000000;  /* You can change this to any color you like */
  overflow: visible;
}

.colored-section-bonus {
  width: 100%;
  background: linear-gradient(
    to bottom,
    #ff758c 0%,
    white 5%,
    white 10%,
    #e7dbf5 30%,
    white 50%,
    #e7dbf5 70%,
    white 90%
  );
  overflow: visible;
}

/* --------------------- New Section --------------------- */
/* Modal */

body.modal-open { 
  padding-right: var(--bs-scrollbar-width) !important; 
}

/* Smooth modal open: compensate fixed elements for scrollbar width */
.modal-open .fixed-top,
.modal-open .sticky-top {
  padding-right: var(--bs-scrollbar-width) !important;
}

/* Best: prevent layout jump entirely where supported */
html { scrollbar-gutter: stable; } /* or: stable both-edges */

/* --------------------- New Section --------------------- */

/* --- Liquid Glass defaults for pages without data-toolpad-color-scheme --- */

.glass-scope {
  /* Light mode defaults */
  --panel: rgba(0, 0, 0, 0.04);
  --panel-strong: rgba(0, 0, 0, 0.06);
  --border: rgba(2, 132, 199, 0.24);
  --border-strong: rgba(2, 132, 199, 0.38);
  --text-subtle: rgba(0, 0, 0, 0.82);
  --text-muted: rgba(0, 0, 0, 0.62);
  --accent-a: #06b6d4;
  --accent-b: #a855f7;
  --shadow-strong: 0 20px 40px rgba(2, 6, 23, 0.10);
}

/* Dark override when Bootstrap theme is dark */
html[data-bs-theme="dark"] .glass-scope {
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.10);
  --border: rgba(103, 232, 249, 0.28);
  --border-strong: rgba(103, 232, 249, 0.45);
  --text-subtle: rgba(255, 255, 255, 0.84);
  --text-muted: rgba(255, 255, 255, 0.64);
  --accent-a: #67e8f9;
  --accent-b: #ec4899;
  --shadow-strong: 0 30px 60px rgba(0, 0, 0, 0.45);
}

/* Liquid glass container */
.lg-strip {
  position: relative;
  border-radius: 28px;
  background: var(--panel);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 16px 40px color-mix(in srgb, #000 16%, transparent);
  overflow: hidden;
}
.lg-strip::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 55%),
    radial-gradient(140% 80% at 10% 10%, rgba(255,255,255,.12), transparent 70%);
  pointer-events: none;
  opacity: .85; transition: opacity .2s ease;
}
.lg-strip:hover::before { opacity: 1; }

/* Animated rim */
.lg-strip.ai-rim::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent-a) 70%, transparent),
    color-mix(in srgb, var(--accent-b) 70%, transparent),
    color-mix(in srgb, var(--accent-a) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: blur(.4px); opacity: .48; animation: ai-breathe 7s linear infinite; pointer-events: none;
}

/* Pills */
.glass-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 8px 24px color-mix(in srgb, #000 10%, transparent);
  color: var(--text-subtle);
  font-size: 14px; line-height: 1.2;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.glass-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 36px color-mix(in srgb, var(--accent-a) 18%, transparent);
  border-color: color-mix(in srgb, var(--border-strong) 85%, transparent);
}
.glass-pill i { opacity: .9; font-size: .95em; }

/* Note text tint */
.lg-note { color: var(--text-muted); font-size: 13px; }

/* Tiny tooltip trigger inside pills */
.pill-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  width: 18px;
  height: 18px;
  font-size: 0.9em;
  color: var(--text-muted);
  opacity: .9;
  cursor: pointer;
  transition: transform .1s ease, color .1s ease, opacity .1s ease;
}
.pill-tip:hover { transform: translateY(-1px); color: var(--accent-a); opacity: 1; }
/* Liquid glass tooltip look (more opaque) */
/* Solid tooltip (no liquid/blur) */
.trust-tooltip {
  /* LIGHT defaults */
  --bs-tooltip-bg: #ffffff;                 /* solid background so the arrow has a color */
  --bs-tooltip-color: rgba(3, 7, 18, 0.92); /* near-black text */
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: 12px;
  --bs-tooltip-padding-y: 9px;
  --bs-tooltip-border-radius: 12px;
  --bs-tooltip-arrow-color: var(--bs-tooltip-bg); /* ensure triangle fills */
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.26));
}

/* Use border colors for the triangle, not background */
.trust-tooltip.bs-tooltip-top .tooltip-arrow::before,
.trust-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--bs-tooltip-arrow-color) !important;
}
.trust-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.trust-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--bs-tooltip-arrow-color) !important;
}
.trust-tooltip.bs-tooltip-start .tooltip-arrow::before,
.trust-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--bs-tooltip-arrow-color) !important;
}
.trust-tooltip.bs-tooltip-end .tooltip-arrow::before,
.trust-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--bs-tooltip-arrow-color) !important;
}


/* Optional: a subtle border without glass */
.trust-tooltip .tooltip-inner {
  border-radius: var(--bs-tooltip-border-radius) !important;
}

/* Trust section column helpers */
#trust-badge-section .col {
  display: flex;
}
#trust-badge-section .pill-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Make pills comfortably wide inside their column */
#trust-badge-section .glass-pill {
  width: 100%;
  justify-content: flex-start; /* icon + text alignment */
}

/* Trust pills stack: consistent gaps & wrapping */
.pill-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
@media (min-width: 992px) {
  .pill-stack { gap: .75rem; }
}

/* Optional: nudge info icon a touch */
.glass-pill .pill-tip i {
  opacity: .85;
  font-size: .95em;
}

/*  End Section  */
/* --- Liquid Glass defaults for pages without data-toolpad-color-scheme --- */


/* --------------------- New Section --------------------- */
/* --- Liquid Glass defaults for pages without data-toolpad-color-scheme --- */
/* --- Liquid glass for Bootstrap table --- */
.glass-table-bs {
  border-radius: 24px;
  background: var(--panel);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 14%, transparent);
  overflow: hidden;
}

/* Horizontal scroll wrapper with iOS momentum + edge fade hint */
.table-scroll-x {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  /* soft fade at edges to hint scroll */
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}


/* Remove default table borders that fight the glass look */
.glass-table-bs .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: color-mix(in srgb, var(--panel) 55%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--panel-strong) 75%, transparent);
  margin: 0;
  min-width: 900px; /* triggers horizontal scroll on phones */
}

/* Uniform mode: no zebra, no hover tint, neutral first column */
.glass-table-bs.uniform tbody tr:nth-of-type(odd) td,
.glass-table-bs.uniform tbody tr:nth-of-type(even) td {
  background: transparent !important;
}
.glass-table-bs.uniform tbody tr:hover td {
  background: transparent !important;
}

/* Make the sticky first column match the table surface */
.glass-table-bs.uniform th:first-child,
.glass-table-bs.uniform td:first-child {
  background: color-mix(in srgb, var(--panel) 96%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--border) 35%, transparent);
}

/* Keep the featured row ring but remove its inner tint */
.glass-table-bs.uniform .glass-featured-row td {
  background: transparent !important;
  box-shadow: none;
}
.glass-table-bs.uniform .glass-featured-row:hover td {
  background: transparent !important;
  box-shadow: none;
}


/* Compact mode using Bootstrap variables (wins specificity cleanly) */
.table-compact {
  --bs-table-cell-padding-y: .6rem;
  --bs-table-cell-padding-x: .9rem;
  font-size: clamp(.88rem, 1.6vw, .98rem);
}

/* Mobile tweak for compact mode */
@media (max-width: 576px) {
  .table-compact {
    --bs-table-cell-padding-y: .5rem;
    --bs-table-cell-padding-x: .75rem;
    font-size: .84rem;
  }
}

/* Sticky, frosted header */
.glass-table-bs thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

/* Sticky first column (labels) — slightly more opaque */
.glass-table-bs th:first-child,
.glass-table-bs td:first-child {
  position: sticky;
  left: 0;
  z-index: 6; /* above body cells and row ring */
  background:
    /* faint tint for readability on both themes */
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel) 98%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--border) 55%, transparent);
}

/* Header cells z-index (keep header on top of sticky first col) */
.glass-table-bs thead th { z-index: 7; }
.glass-table-bs thead th:first-child { z-index: 9; }

/* Featured row's first cell must remain sticky (don’t let other rules override) */
.glass-table-bs .glass-featured-row td:first-child {
  position: sticky;
  left: 0;
  z-index: 8; /* above other body cells + row ring */
}


/* Tidy cells */
.glass-table-bs td, .glass-table-bs th {
  border-color: color-mix(in srgb, var(--border) 35%, transparent);
  color: var(--text-subtle);
}

/* Hairline vertical separators for better column scannability */
.glass-table-bs th + th,
.glass-table-bs td + td {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--border) 45%, transparent);
}

/* Zebra + hover (override Bootstrap so it blends with glass) */
.glass-table-bs tbody tr:nth-of-type(odd) td {
  background: color-mix(in srgb, var(--panel) 45%, transparent);
}
.glass-table-bs tbody tr:hover td {
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
}

/* --- Premium liquid glass featured row --- */
.glass-table-bs .glass-featured-row td {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-a) 14%, transparent), transparent 46%),
    color-mix(in srgb, var(--panel) 88%, transparent);
  border-color: color-mix(in srgb, var(--border) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  color: var(--text-subtle);
}


/* rounded edges for the row */
.glass-table-bs .glass-featured-row td:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.glass-table-bs .glass-featured-row td:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Single outer ring around the whole featured row */
.glass-table-bs .glass-featured-row { position: relative; }
.glass-table-bs .glass-featured-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* align to cell box edges */
  top: 4px; bottom: 4px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-a) 40%, transparent),
    0 6px 18px color-mix(in srgb, var(--accent-a) 18%, transparent);
}

/* left ribbon accent (cyan→pink), keeps the row scannable */
.glass-table-bs .glass-featured-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
  opacity: .85;
}

/* hover: gentle sheen sweep and a touch more lift */
.glass-table-bs .glass-featured-row:hover td {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.12) 0%, transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-a) 20%, transparent), transparent 52%),
    color-mix(in srgb, var(--panel-strong) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 14px 36px color-mix(in srgb, var(--accent-a) 22%, transparent);
}

/* ensure badges/text remain readable on the premium row */
.glass-table-bs .glass-featured-row .badge.bg-success-subtle {
  background-color: color-mix(in srgb, var(--accent-a) 20%, #10b98120) !important;
  color: color-mix(in srgb, #065f46 70%, var(--text-subtle)) !important;
}


/* Footer/last row rounding if needed in future */
.glass-table-bs .table tfoot th,
.glass-table-bs .table tfoot td {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

/*  End Section  */



/* --------------------- New Section --------------------- */
/* Purpitino -Apple button */

.p-btn {
  background: var(--p-btn-def-bg);
  border: 1px solid var(--p-btn-border);
  border-radius: 10px;
  color: var(--p-btn-def-col);
  display: inline-block;
  font-family: -apple-system, "Inter", sans-serif;
  font-size: 1.1rem;
  padding: .4rem 1.2rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 0.375px rgba(0, 0, 0, 0.05), 0 0.25px 0.375px rgba(0, 0, 0, 0.15);
  user-select: none;
  cursor: pointer;
}
.p-btn:focus{
  outline: 2px solid #64baff;
}
.p-btn.p-btn-block{
  display: block;
}
.p-btn.p-btn-sm {
  padding: .3rem 1.1rem;
  font-size: 0.8rem;
}
.p-btn.p-btn-md {
  padding: .8rem 2.4rem;
  font-size: 1.6rem;
}
.p-btn.p-btn-lg {
  padding: 1.2rem 2.8rem;
  font-size: 1.8rem;
}

.p-btn-xl {
  padding: 1.4rem 3rem;   /* bigger padding */
  font-size: 1.1rem;        /* larger text */
  font-weight: 700;       /* strong weight for conversion */
  border-radius: 14px;    /* a bit rounder */
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.35); /* glow shadow */
}

.p-btn-destructive{
  color: #FF3B30;
}
.p-btn-mob{
  padding: 10px 40px;
  background: #227bec;
  color: #fff;
  border: 0;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%), 0px 2px 3px -2px rgba(0,0,0,.3);
}
.p-btn[disabled],
.p-btn:disabled,
.p-btn-disabled{
  filter:contrast(0.5) grayscale(.5) opacity(.8);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.p-prim-col {
  position: relative; 
  background: #007AFF;
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41), 0px 2px 3px -2px rgba(0, 0, 0, 0.3);
  color: var(--p-prim-text-col);
  overflow: hidden; /* Ensure the ::before element doesn't overflow */
}

.p-prim-col:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.17;
  pointer-events: none;
}

.p-btn.p-prim-col:active {
  background: #0f75f5;
}

.p-btn-more::after {
  content: "...";
}

.p-btn-round {
  border: 0;
  border-radius: 50px;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%);
  padding: 10px 30px;
}

.p-btn-icon {
  align-items: center;
  background: var(--p-btn-def-bg);
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #0f75f5;
  display: inline-flex;
  font-weight: 900;
  height: 40px;
  width: 40px;
  justify-content: center;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  user-select: none;
  vertical-align: bottom;
}

.p-btn-icon.p-btn-icon-no-border{
  border: 0px;
}

.p-btn-scope {
  background: #8e8e8e;
  color: #fff;
  margin: 5px;
  padding: 2px 20px;
  box-shadow: none;
}
.p-btn-scope-unactive {
  background: transparent;
  border-color: transparent;
  color: var(--p-btn-scope-unactive);
  transition: border-color 0.2s;
}
.p-btn-scope-unactive:hover {
  border-color: var(--p-btn-border);
}

.p-btn-scope-outline {
  background: transparent;
  color: var(--p-btn-scope-action);
  box-shadow: none;
}

.p-btn-outline {
  background: none;
  border-color: currentColor;
  box-shadow: none;
}

.p-btn-outline-dash {
  background: none;
  border-color: currentColor;
  border-style: dashed;
  box-shadow: none;
} 

/* --- Google-like material profile for p-btn --- */
.p-btn.p-btn--material {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  color: #1f1f1f;
  border: 1px solid #747775;
  border-radius: 20px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                   /* space for optional icon */
  font-family: Roboto, arial, sans-serif;
  font-size: 14px;
  letter-spacing: .25px;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  box-shadow: none;
}

/* Hover shadow */
.p-btn.p-btn--material:not(:disabled):hover {
  box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),
              0 1px 3px 1px rgba(60,64,67,.15);
}

/* Focus/Active state overlay via ::after (no HTML change needed) */
.p-btn.p-btn--material::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #303030;
  opacity: 0;
  transition: opacity .218s;
}
.p-btn.p-btn--material:not(:disabled):active::after,
.p-btn.p-btn--material:not(:disabled):focus::after { opacity: .12; }
.p-btn.p-btn--material:not(:disabled):hover::after { opacity: .08; }

/* Disabled */
.p-btn.p-btn--material:disabled,
.p-btn.p-btn--material[disabled] {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
  color: rgba(31,31,31,.38);
  box-shadow: none;
}

/* Size variants */
.p-btn.p-btn--material.p-btn-sm { height: 36px; border-radius: 18px; padding: 0 10px; font-size: 13px; }
.p-btn.p-btn--material.p-btn-lg { height: 48px; border-radius: 24px; padding: 0 16px; font-size: 16px; }

/* Let this button take the measured Google width via a CSS var */
.p-btn.p-btn--match-google {
  width: var(--gsi-width, auto);
  max-width: var(--gsi-width, none);
  box-sizing: border-box;
}

/* Ensure material button has the same sizing rules as Google */
.p-btn.p-btn--material {
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

/*  End Section  */


/* --------------------- New Section --------------------- */
/* ===== Before/After section (usecases) ===== */
.ba-scope { --ba-radius: 16px; --ba-gap: 10px; }

.ba-tabs {
  display: flex; flex-wrap: wrap; gap: var(--ba-gap);
  border: 1px solid color-mix(in srgb, var(--border, #d8dee4) 60%, transparent);
  border-radius: 20px;   /* ↓ was 999px, now more rectangular */
  padding: 6px; 
  background: color-mix(in srgb, #fff 80%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, #000 10%, transparent);
  overflow-x: auto; 
  scrollbar-gutter: stable both-edges;
}
.ba-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; 
  border-radius: 10px;   /* ↓ also reduce here so tabs aren’t pill-shaped */
  font-weight: 600; 
  white-space: nowrap;
}
.ba-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--panel, #f6f8fa) 100%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #d8dee4) 80%, transparent);
}

.ba-pair { margin-top: 12px; }
.ba-card {
  height: 100%;
  padding: 10px; border-radius: var(--ba-radius);
  background: var(--panel, #ffffff);
  border: 1px solid color-mix(in srgb, var(--border, #d8dee4) 70%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 10%, transparent);
}
.ba-label {
  font-size: 0.9rem; font-weight: 700; opacity: 0.7; margin-bottom: 6px;
}

.ba-img-wrap {
  position: relative; overflow: hidden; border-radius: 12px;
  /* keep a steady box so layout doesn't jump; adjust as desired */
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, #eef2f7 60%, transparent);
}
.ba-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: 0; transition: opacity .25s ease;
}
.ba-img.is-loaded { opacity: 1; }

/* shimmering placeholder */
.ba-skeleton {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: baShimmer 1.2s infinite;
}
@keyframes baShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.ba-links .ba-link { font-size: .9rem; text-decoration: underline; }
/*  End Section  */

/* --------------------- New Section --------------------- */

/* FAQ */

/* Accordian FAQ */
.accordion {
  max-width: 1000px;
  margin: auto;
  font-family: var(--font-family-chosen);
  color: var(--light-grey); 
  font-size: var(--font-size-default); 
  font-weight: var(--font-weight-default); 
}
.accordion-item {
  border-radius: 0.5em;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 1em;
}
.accordion-header {
  width: 100%;
  text-align: left;
  background: var(--light);
  border: none;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 300ms;
  font-family: var(--font-family-chosen);
  color: var(--light-grey); 
  font-size: var(--font-size-default); 
  font-weight: var(--font-weight-default); 
  
}
.accordion-header:hover {
  background: #cdc6c677;
}
.accordion-header .title {
  flex-grow: 1;
}
.accordion-header .triangle {
  padding: 0.5em;
}
.accordion-header .triangle {
  transition: transform 300ms ease;
  opacity: 0.25;
}
.accordion-header:hover .triangle {
  opacity: 0.5;
}
.accordion-header.rotated .triangle {
  transform: rotate(90deg);
  opacity: 1;
}
.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 400ms ease, opacity 400ms ease;
  padding: 0 1em;
  font-family: var(--font-family-chosen);
  color: var(--light-grey); 
  font-size: var(--font-size-default); 
  font-weight: var(--font-weight-default); 
}
.accordion-content.show {
  opacity: 1;
  padding: 1em;
}

/* ===== FAQ (Bootstrap accordion) scoped overrides ===== */
.faq-accordion {
  /* Fallback-friendly tokens (use your existing CSS vars if present) */
  --faq-text: var(--light-grey, #4b5563);
  --faq-panel: var(--panel, #ffffff);
  --faq-border: color-mix(in srgb, var(--border, #d8dee4) 70%, transparent);

  /* Map to Bootstrap accordion variables */
  --bs-accordion-color: var(--faq-text);
  --bs-accordion-bg: var(--faq-panel);
  --bs-accordion-border-color: var(--faq-border);
  --bs-accordion-border-radius: 12px;
  --bs-accordion-inner-border-radius: 12px;

  /* Header / active states */
  --bs-accordion-btn-color: var(--faq-text);
  --bs-accordion-btn-bg: color-mix(in srgb, var(--faq-panel) 92%, #000 0%);
  --bs-accordion-active-color: var(--faq-text);
  --bs-accordion-active-bg: color-mix(in srgb, var(--faq-panel) 96%, #000 0%);

  /* Remove Bootstrap’s blue glow + shadow jump */
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: var(--bs-accordion-btn-icon); /* keep default icon */
}

/* Card-like items with subtle layering */
.faq-accordion .accordion-item {
  margin-bottom: 12px;
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--faq-panel);
  box-shadow: 0 6px 16px color-mix(in srgb, #000 10%, transparent);
}

/* Header text/weight and hover state */
.faq-accordion .accordion-button {
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.faq-accordion .accordion-button:hover {
  background: color-mix(in srgb, var(--faq-panel) 88%, #000 0%);
}

/* Remove Bootstrap’s extra bottom border on flush accordions */
.faq-accordion.accordion-flush .accordion-item .accordion-button,
.faq-accordion.accordion-flush .accordion-item .accordion-collapse {
  border: 0;
}

/* Keep content light grey as requested */
.faq-accordion .accordion-body {
  color: var(--faq-text);
}

/* Prevent “jump” when opened */
.faq-accordion .accordion-button:not(.collapsed) {
  box-shadow: inset 0 0 0 1px var(--faq-border);
}