@charset "UTF-8";
/* ───────────────────────────────────────────────────────────
 * PHP Pro Bid — main stylesheet
 *
 * Component-based design system. Class names are generic and
 * reusable: no body.p-X selectors anywhere. If you find yourself
 * wanting to style a specific page, add a modifier class instead
 * (e.g. .hero-centered vs .hero-split) so the rule stays shared.
 *
 * Build:
 *   sass assets/css/style.scss assets/css/style.css
 *
 * Load order in head.php places this AFTER shared.css, so any
 * generic rule here overrides equivalent body.p-X rules in
 * shared.css that have lower specificity than ours.
 * ─────────────────────────────────────────────────────────── */
/* @version 10.0 [rev.02] */
/* @version 10.0 [rev.01] */
/* @version 9.0 [rev.9.0.01] */
/* @version 9.0 [rev.9.0.01] */
/* @version 10.0 [rev.02] */
/* @version 10.0 [rev.01] */
/* colors array: V10 */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
:root {
  --pb-color-white: #fff;
  --pb-color-gray-50: #f9fafb;
  --pb-color-gray-100: #f3f4f6;
  --pb-color-gray-200: #e5e7eb;
  --pb-color-gray-300: #d1d5db;
  --pb-color-gray-400: #9ca3af;
  --pb-color-gray-500: #6b7280;
  --pb-color-gray-600: #4b5563;
  --pb-color-gray-700: #374151;
  --pb-color-gray-800: #1f2937;
  --pb-color-gray-900: #111827;
  --pb-color-black: #000;
  --pb-color-primary-50: #e6f2ff;
  --pb-color-primary-100: #cce5ff;
  --pb-color-primary-200: #b8daff;
  --pb-color-primary-300: #93c5fd;
  --pb-color-primary-400: #60a5fa;
  --pb-color-primary-500: #3b82f6;
  --pb-color-primary-600: #1673f5;
  --pb-color-primary-700: #0065d3;
  --pb-color-primary-800: #0054af;
  --pb-color-primary-900: #004080;
  --pb-color-success-50: #f3fbe8;
  --pb-color-success-100: #e6f6d1;
  --pb-color-success-200: #d6efb0;
  --pb-color-success-300: #b8e17a;
  --pb-color-success-400: #95cf44;
  --pb-color-success-500: #7ec326;
  --pb-color-success-600: #6bb913;
  --pb-color-success-700: #5aa100;
  --pb-color-success-800: #4a8500;
  --pb-color-success-900: #376300;
  --pb-color-warning-50: #fff8e6;
  --pb-color-warning-100: #fff1cc;
  --pb-color-warning-200: #ffe7a3;
  --pb-color-warning-300: #ffda66;
  --pb-color-warning-400: #ffce33;
  --pb-color-warning-500: #ffc107;
  --pb-color-warning-600: #e2ab00;
  --pb-color-warning-700: #bd8e00;
  --pb-color-warning-800: #9b7500;
  --pb-color-warning-900: #735700;
  --pb-color-danger-50: #fdecef;
  --pb-color-danger-100: #fbd7dc;
  --pb-color-danger-200: #f7b5bd;
  --pb-color-danger-300: #f18895;
  --pb-color-danger-400: #ea5b6d;
  --pb-color-danger-500: #e13f52;
  --pb-color-danger-600: #dc3545;
  --pb-color-danger-700: #c22939;
  --pb-color-danger-800: #a1212f;
  --pb-color-danger-900: #7a1823;
  --pb-color-info-50: #e9f7fa;
  --pb-color-info-100: #d3eff5;
  --pb-color-info-200: #a9dfeb;
  --pb-color-info-300: #7ccfdf;
  --pb-color-info-400: #4dbdcf;
  --pb-color-info-500: #2faec3;
  --pb-color-info-600: #17a2b8;
  --pb-color-info-700: #148ca0;
  --pb-color-info-800: #107080;
  --pb-color-info-900: #0b5260;
  --pb-color-blue-50: #e8f1fe;
  --pb-color-blue-100: #d0e2fd;
  --pb-color-blue-200: #a2c6fb;
  --pb-color-blue-300: #73a9f9;
  --pb-color-blue-400: #458df7;
  --pb-color-blue-500: #1673f5;
  --pb-color-blue-600: #125fcb;
  --pb-color-blue-700: #0e4ca3;
  --pb-color-blue-800: #09387a;
  --pb-color-blue-900: #052552;
  --pb-color-blue: #1673f5;
  --pb-color-indigo-50: #f0e8fe;
  --pb-color-indigo-100: #e0d0fd;
  --pb-color-indigo-200: #c2a1fb;
  --pb-color-indigo-300: #a371f8;
  --pb-color-indigo-400: #8542f6;
  --pb-color-indigo-500: #6610f2;
  --pb-color-indigo-600: #550dc9;
  --pb-color-indigo-700: #440aa1;
  --pb-color-indigo-800: #330878;
  --pb-color-indigo-900: #220550;
  --pb-color-indigo: #6610f2;
  --pb-color-purple-50: #f1ecf9;
  --pb-color-purple-100: #e2daf4;
  --pb-color-purple-200: #c6b4e8;
  --pb-color-purple-300: #a98fdc;
  --pb-color-purple-400: #8d69cf;
  --pb-color-purple-500: #6f42c1;
  --pb-color-purple-600: #5c369f;
  --pb-color-purple-700: #482b7c;
  --pb-color-purple-800: #35205a;
  --pb-color-purple-900: #211438;
  --pb-color-purple: #6f42c1;
  --pb-color-pink-50: #fcecf4;
  --pb-color-pink-100: #f9d8e8;
  --pb-color-pink-200: #f4b2d1;
  --pb-color-pink-300: #ee8bba;
  --pb-color-pink-400: #e965a3;
  --pb-color-pink-500: #e83e8c;
  --pb-color-pink-600: #bf3374;
  --pb-color-pink-700: #97285c;
  --pb-color-pink-800: #6f1e45;
  --pb-color-pink-900: #47132d;
  --pb-color-pink: #e83e8c;
  --pb-color-red-50: #fbecee;
  --pb-color-red-100: #f7d7da;
  --pb-color-red-200: #efafb5;
  --pb-color-red-300: #e78891;
  --pb-color-red-400: #df606c;
  --pb-color-red-500: #dc3545;
  --pb-color-red-600: #b62c39;
  --pb-color-red-700: #8f232d;
  --pb-color-red-800: #691a21;
  --pb-color-red-900: #421114;
  --pb-color-red: #dc3545;
  --pb-color-orange-50: #fff2e8;
  --pb-color-orange-100: #fee5d0;
  --pb-color-orange-200: #fdcba1;
  --pb-color-orange-300: #fcb172;
  --pb-color-orange-400: #fb9743;
  --pb-color-orange-500: #fd7e14;
  --pb-color-orange-600: #cf670f;
  --pb-color-orange-700: #a1500c;
  --pb-color-orange-800: #733a09;
  --pb-color-orange-900: #452206;
  --pb-color-orange: #fd7e14;
  --pb-color-yellow-50: #fff9e6;
  --pb-color-yellow-100: #fff3cc;
  --pb-color-yellow-200: #ffe799;
  --pb-color-yellow-300: #ffda66;
  --pb-color-yellow-400: #ffce33;
  --pb-color-yellow-500: #ffc107;
  --pb-color-yellow-600: #d19f06;
  --pb-color-yellow-700: #a37c05;
  --pb-color-yellow-800: #755a03;
  --pb-color-yellow-900: #473702;
  --pb-color-yellow: #ffc107;
  --pb-color-green-50: #f0f8e7;
  --pb-color-green-100: #e1f1d0;
  --pb-color-green-200: #c3e3a1;
  --pb-color-green-300: #a6d573;
  --pb-color-green-400: #88c744;
  --pb-color-green-500: #6bb913;
  --pb-color-green-600: #58980f;
  --pb-color-green-700: #45770c;
  --pb-color-green-800: #325608;
  --pb-color-green-900: #1f3505;
  --pb-color-green: #6bb913;
  --pb-color-teal-50: #e9fbf5;
  --pb-color-teal-100: #d2f6ea;
  --pb-color-teal-200: #a5edd5;
  --pb-color-teal-300: #78e4bf;
  --pb-color-teal-400: #4bdbaa;
  --pb-color-teal-500: #20c997;
  --pb-color-teal-600: #1aa57d;
  --pb-color-teal-700: #148163;
  --pb-color-teal-800: #0f5d48;
  --pb-color-teal-900: #09392e;
  --pb-color-teal: #20c997;
  --pb-color-cyan-50: #e8f6f8;
  --pb-color-cyan-100: #d1edf1;
  --pb-color-cyan-200: #a2dbe3;
  --pb-color-cyan-300: #74c9d5;
  --pb-color-cyan-400: #45b7c7;
  --pb-color-cyan-500: #17a2b8;
  --pb-color-cyan-600: #138597;
  --pb-color-cyan-700: #0f6876;
  --pb-color-cyan-800: #0a4b54;
  --pb-color-cyan-900: #062e33;
  --pb-color-cyan: #17a2b8;
  --pb-color-gold-50: #fff9e6;
  --pb-color-gold-100: #fff2cc;
  --pb-color-gold-200: #fee699;
  --pb-color-gold-300: #feda66;
  --pb-color-gold-400: #fdcd33;
  --pb-color-gold-500: #fbc404;
  --pb-color-gold-600: #cfa103;
  --pb-color-gold-700: #a37e03;
  --pb-color-gold-800: #775c02;
  --pb-color-gold-900: #4b3901;
  --pb-color-gold: #fbc404;
  --pb-color-primary: #1673f5;
  --pb-color-secondary: #4b5563;
  --pb-color-success: #6bb913;
  --pb-color-info: #17a2b8;
  --pb-color-warning: #ffc107;
  --pb-color-danger: #dc3545;
  --pb-color-light: #f3f4f6;
  --pb-color-dark: #1f2937;
  --pb-color-rgba-white-10: rgba(255, 255, 255, 0.1);
  --pb-color-rgba-white-20: rgba(255, 255, 255, 0.2);
  --pb-color-rgba-white-30: rgba(255, 255, 255, 0.3);
  --pb-color-rgba-white-40: rgba(255, 255, 255, 0.4);
  --pb-color-rgba-white-50: rgba(255, 255, 255, 0.5);
  --pb-color-rgba-white-60: rgba(255, 255, 255, 0.6);
  --pb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
  --pb-color-rgba-white-80: rgba(255, 255, 255, 0.8);
  --pb-color-rgba-white-90: rgba(255, 255, 255, 0.9);
  --pb-color-rgba-gray-10: rgba(156, 163, 175, 0.1);
  --pb-color-rgba-gray-20: rgba(156, 163, 175, 0.2);
  --pb-color-rgba-gray-30: rgba(156, 163, 175, 0.3);
  --pb-color-rgba-gray-40: rgba(156, 163, 175, 0.4);
  --pb-color-rgba-gray-50: rgba(156, 163, 175, 0.5);
  --pb-color-rgba-gray-60: rgba(156, 163, 175, 0.6);
  --pb-color-rgba-gray-70: rgba(156, 163, 175, 0.7);
  --pb-color-rgba-gray-80: rgba(156, 163, 175, 0.8);
  --pb-color-rgba-gray-90: rgba(156, 163, 175, 0.9);
  --pb-color-rgba-black-10: rgba(0, 0, 0, 0.1);
  --pb-color-rgba-black-20: rgba(0, 0, 0, 0.2);
  --pb-color-rgba-black-30: rgba(0, 0, 0, 0.3);
  --pb-color-rgba-black-40: rgba(0, 0, 0, 0.4);
  --pb-color-rgba-black-50: rgba(0, 0, 0, 0.5);
  --pb-color-rgba-black-60: rgba(0, 0, 0, 0.6);
  --pb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
  --pb-color-rgba-black-80: rgba(0, 0, 0, 0.8);
  --pb-color-rgba-black-90: rgba(0, 0, 0, 0.9);
  --pb-body-color: var(--pb-color-black);
  --pb-body-bg: var(--pb-color-white);
  --pb-link-color: var(--pb-color-primary);
  --pb-link-hover-color: var(--pb-color-primary-500);
}

/* @version 10.0 [rev.01] */
:root {
  --pb-font-primary: Inter;
  --pb-font-secondary: Inter;
  --pb-font-heading: Inter, sans-serif;
  --pb-font-size: 1rem;
  --pb-font-size-sm: 0.875rem;
  --pb-font-size-xs: 0.75rem;
  --pb-font-size-lg: 1.2rem;
  --pb-font-size-btn: 15px;
  --pb-font-size-btn-xs: 10px;
  --pb-font-size-btn-sm: 12px;
  --pb-font-size-btn-lg: 18px;
  --pb-font-size-70: 70%;
  --pb-font-size-btn-70: 70%;
  --pb-font-size-80: 80%;
  --pb-font-size-btn-80: 80%;
  --pb-font-size-90: 90%;
  --pb-font-size-btn-90: 90%;
  --pb-font-size-95: 95%;
  --pb-font-size-btn-95: 95%;
  --pb-font-size-100: 100%;
  --pb-font-size-btn-100: 100%;
  --pb-font-size-105: 105%;
  --pb-font-size-btn-105: 105%;
  --pb-font-size-110: 110%;
  --pb-font-size-btn-110: 110%;
  --pb-font-size-125: 125%;
  --pb-font-size-btn-125: 125%;
  --pb-font-size-150: 150%;
  --pb-font-size-btn-150: 150%;
  --pb-font-size-175: 175%;
  --pb-font-size-btn-175: 175%;
  --pb-font-size-200: 200%;
  --pb-font-size-btn-200: 200%;
  --pb-font-weight-light: 300;
  --pb-font-weight-normal: 400;
  --pb-font-weight-medium: 500;
  --pb-font-weight-semibold: 600;
  --pb-font-weight-bold: 700;
  --pb-box-shadow-spread: 0;
  --pb-box-shadow-size: .25rem;
  --pb-flex-gap: 0.25rem;
  --pb-flex-label-width: 225px;
  --pb-navbar-height: 4rem;
  --pb-sidebar-width: 275px;
  --pb-border-radius: 0.375rem;
  --pb-border-radius-sm: 4px;
  --pb-border-radius-lg: 0.75rem;
  --pb-default-box-bg: rgba(255, 255, 255, 0.7);
  --pb-default-box-border-color: rgba(156, 163, 175, 0.2);
}
@media (max-width: 991.98px) {
  :root {
    --pb-navbar-height: 3.5rem;
    --pb-sidebar-width: 80vw;
  }
}

@media (min-width: 768px) {
  .animate {
    animation-duration: 0.3s;
    animation-fill-mode: both;
  }
}
@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.slideIn {
  animation-name: slideIn;
}

.fadeIn {
  animation-name: fadeIn;
}

.fadeOut {
  animation-name: fadeOut;
}

/* @version 10.0 [rev.01] */
body {
  color: var(--pb-body-color);
  background-color: var(--pb-body-bg);
  font-size: var(--pb-font-size);
  font-family: var(--pb-font-primary), sans-serif;
  margin: 0;
}

a {
  --pb-link-color: var(--pb-color-primary);
  --pb-link-text-decoration: none;
  color: var(--pb-link-color);
  text-decoration: var(--pb-link-text-decoration);
}
a:hover {
  --pb-link-color: var(--pb-color-primary-500);
}

/* NO-WRAP */
.nowrap {
  white-space: nowrap;
}

/* /NO-WRAP */
/* ADD GAP ON FLEX ITEMS */
.d-flex {
  gap: var(--pb-flex-gap);
}

/* /ADD GAP ON FLEX ITEMS */
.backdrop {
  z-index: 5;
  color: var(--pb-backdrop-color, var(--pb-color-black));
}

small, .small {
  font-size: var(--pb-font-size-sm);
}

.text-right {
  text-align: right !important;
}

/* @version 9.0 [rev.9.0.01] */
/* PRINT */
@media print {
  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
  }
  .print-only {
    display: block !important;
  }
  .no-print {
    display: none !important;
  }
  a:link:after, a:visited:after {
    display: none;
    content: "";
  }
  .img-thumbnail {
    padding: 0;
    width: 75%;
    border: none;
  }
  .slick-arrow {
    display: none !important;
  }
}
@media screen {
  .print-only {
    display: none !important;
  }
}
/* /PRINT */
/* @version 10.0 [rev.01] */
/* ANCHOR */
.anchor {
  padding: 0 0.175rem;
  opacity: 0;
  transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
.anchor::after {
  content: "@";
}
.anchor:focus, .anchor:hover, :target > .anchor {
  opacity: 1;
  color: var(--pb-anchor-hover-color, var(--pb-color-primary-500));
}

/* /ANCHOR */
/* @version 10.0 [rev.01] */
.badge {
  --pb-badge-font-size: var(--pb-font-size-90);
  --pb-badge-font-weight: var(--pb-font-weight-normal);
  --pb-badge-text-color: var(--pb-color-black);
  --pb-badge-bg: transparent;
  --pb-badge-color: inherit;
  --pb-badge-padding-y: 0.25rem;
  --pb-badge-padding-x: 0.5rem;
  font-size: var(--pb-badge-font-size);
  font-weight: var(--pb-badge-font-weight);
  white-space: normal;
  text-align: left;
  padding: var(--pb-badge-padding-y) var(--pb-badge-padding-x);
  background-color: var(--pb-badge-bg) !important;
  color: var(--pb-badge-color) !important;
}
.btn .badge {
  top: var(--pb-badge-btn-top, 0);
  --pb-badge-font-size: 80%;
}
.badge-text {
  color: var(--pb-badge-text-color);
}
.badge-slim {
  --pb-badge-font-weight: var(--pb-font-weight-light);
}
.badge.text-bg-primary {
  --pb-badge-bg: var(--pb-color-primary);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-primary, .badge.text-bg-primary.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-primary);
}
.badge.text-bg-secondary {
  --pb-badge-bg: var(--pb-color-secondary);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-secondary, .badge.text-bg-secondary.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-secondary);
}
.badge.text-bg-success {
  --pb-badge-bg: var(--pb-color-success);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-success, .badge.text-bg-success.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-success);
}
.badge.text-bg-danger {
  --pb-badge-bg: var(--pb-color-danger);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-danger, .badge.text-bg-danger.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-danger);
}
.badge.text-bg-warning {
  --pb-badge-bg: var(--pb-color-warning);
  --pb-badge-color: var(--pb-color-black);
}
.badge-group .badge.text-bg-warning, .badge.text-bg-warning.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-warning-700);
}
.badge.text-bg-info {
  --pb-badge-bg: var(--pb-color-info-200);
  --pb-badge-color: var(--pb-color-info-700);
}
.badge-group .badge.text-bg-info, .badge.text-bg-info.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-info-200);
}
.badge.text-bg-light {
  --pb-badge-bg: var(--pb-color-light);
  --pb-badge-color: var(--pb-color-black);
}
.badge-group .badge.text-bg-light, .badge.text-bg-light.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-light);
}
.badge.text-bg-dark {
  --pb-badge-bg: var(--pb-color-dark);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-dark, .badge.text-bg-dark.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-dark);
}
.badge.text-bg-open {
  --pb-badge-bg: var(--pb-color-success-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-open, .badge.text-bg-open.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-success-700);
}
.badge.text-bg-closing {
  --pb-badge-bg: var(--pb-color-gray-300);
  --pb-badge-color: var(--pb-color-red-700);
}
.badge-group .badge.text-bg-closing, .badge.text-bg-closing.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-700);
}
.badge.text-bg-closed {
  --pb-badge-bg: var(--pb-color-red-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-closed, .badge.text-bg-closed.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-700);
}
.badge.text-bg-scheduled {
  --pb-badge-bg: var(--pb-color-blue-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-scheduled, .badge.text-bg-scheduled.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-700);
}
.badge.text-bg-preferred {
  --pb-badge-bg: var(--pb-color-blue-500);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-preferred, .badge.text-bg-preferred.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-500);
}
.badge.text-bg-verified {
  --pb-badge-bg: var(--pb-color-blue-400);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-verified, .badge.text-bg-verified.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-400);
}
.badge.text-bg-live-mode {
  --pb-badge-bg: var(--pb-color-red-800);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-live-mode, .badge.text-bg-live-mode.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-800);
}
.badge.text-bg-account-mode {
  --pb-badge-bg: var(--pb-color-blue-800);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-account-mode, .badge.text-bg-account-mode.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-800);
}
.badge.text-bg-store-info {
  --pb-badge-bg: var(--pb-color-gray-500);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-store-info, .badge.text-bg-store-info.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-gray-500);
}
.badge.text-bg-seller {
  --pb-badge-bg: var(--pb-color-blue);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-seller, .badge.text-bg-seller.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue);
}
.badge.text-bg-buyer {
  --pb-badge-bg: var(--pb-color-red);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-buyer, .badge.text-bg-buyer.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red);
}
.badge.text-bg-draft {
  --pb-badge-bg: var(--pb-color-light);
  --pb-badge-color: var(--pb-color-black);
}
.badge-group .badge.text-bg-draft, .badge.text-bg-draft.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-gray-500);
}
.badge.text-bg-pending {
  --pb-badge-bg: var(--pb-color-gray-400);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-pending, .badge.text-bg-pending.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-gray-400);
}
.badge.text-bg-declined {
  --pb-badge-bg: var(--pb-color-red-800);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-declined, .badge.text-bg-declined.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-800);
}
.badge.text-bg-withdrawn {
  --pb-badge-bg: var(--pb-color-yellow-500);
  --pb-badge-color: var(--pb-color-black);
}
.badge-group .badge.text-bg-withdrawn, .badge.text-bg-withdrawn.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-yellow-500);
}
.badge.text-bg-product {
  --pb-badge-bg: var(--pb-color-blue);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-product, .badge.text-bg-product.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue);
}
.badge.text-bg-classified {
  --pb-badge-bg: var(--pb-color-red);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-classified, .badge.text-bg-classified.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red);
}
.badge.text-bg-auction {
  --pb-badge-bg: var(--pb-color-green);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-auction, .badge.text-bg-auction.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green);
}
.badge.text-bg-activity-bids {
  --pb-badge-bg: var(--pb-color-green-500);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-activity-bids, .badge.text-bg-activity-bids.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-500);
}
.badge.text-bg-activity-offers {
  --pb-badge-bg: var(--pb-color-orange-400);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-activity-offers, .badge.text-bg-activity-offers.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-orange-400);
}
.badge.text-bg-activity-sales {
  --pb-badge-bg: var(--pb-color-blue-400);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-activity-sales, .badge.text-bg-activity-sales.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-400);
}
.badge.text-bg-count-lots {
  --pb-badge-bg: var(--pb-color-yellow-300);
  --pb-badge-color: var(--pb-color-yellow-800);
}
.badge-group .badge.text-bg-count-lots, .badge.text-bg-count-lots.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-yellow-300);
}
.badge.text-bg-listin-site {
  --pb-badge-bg: var(--pb-color-blue-600);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-listin-site, .badge.text-bg-listin-site.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-600);
}
.badge.text-bg-listin-store {
  --pb-badge-bg: var(--pb-color-blue-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-listin-store, .badge.text-bg-listin-store.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-700);
}
.badge.text-bg-listin-both {
  --pb-badge-bg: var(--pb-color-pink-500);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-listin-both, .badge.text-bg-listin-both.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-pink-500);
}
.badge.text-bg-homepage-featured {
  --pb-badge-bg: var(--pb-color-green-600);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-homepage-featured, .badge.text-bg-homepage-featured.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-600);
}
.badge.text-bg-category-featured {
  --pb-badge-bg: var(--pb-color-red-600);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-category-featured, .badge.text-bg-category-featured.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-600);
}
.badge.text-bg-offer {
  --pb-badge-bg: var(--pb-color-green-600);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-offer, .badge.text-bg-offer.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-600);
}
.badge.text-bg-counter {
  --pb-badge-bg: var(--pb-color-red-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-counter, .badge.text-bg-counter.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-700);
}
.badge.text-bg-blue {
  --pb-badge-bg: var(--pb-color-blue);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-blue, .badge.text-bg-blue.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue);
}
.badge.text-bg-green {
  --pb-badge-bg: var(--pb-color-green);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-green, .badge.text-bg-green.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green);
}
.badge.text-bg-red {
  --pb-badge-bg: var(--pb-color-red);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-red, .badge.text-bg-red.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red);
}
.badge.text-bg-gold {
  --pb-badge-bg: var(--pb-color-gold);
  --pb-badge-color: var(--pb-color-gold-800);
}
.badge-group .badge.text-bg-gold, .badge.text-bg-gold.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-gold);
}
.badge.text-bg-black {
  --pb-badge-bg: var(--pb-color-gray-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-black, .badge.text-bg-black.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-gray-700);
}
.badge.text-bg-orange {
  --pb-badge-bg: var(--pb-color-orange);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-orange, .badge.text-bg-orange.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-orange);
}
.badge.text-bg-activity-in-cart {
  --pb-badge-bg: var(--pb-color-blue-700);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-activity-in-cart, .badge.text-bg-activity-in-cart.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-blue-700);
}
.badge.text-bg-activity-paid {
  --pb-badge-bg: var(--pb-color-green-600);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-activity-paid, .badge.text-bg-activity-paid.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-600);
}
.badge.text-bg-activity-sold {
  --pb-badge-bg: var(--pb-color-green-400);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-activity-sold, .badge.text-bg-activity-sold.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-400);
}
.badge.text-bg-high-bid {
  --pb-badge-bg: var(--pb-color-green-500);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-high-bid, .badge.text-bg-high-bid.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-500);
}
.badge.text-bg-outbid {
  --pb-badge-bg: var(--pb-color-red-500);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-outbid, .badge.text-bg-outbid.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-red-500);
}
.badge.text-bg-event {
  --pb-badge-bg: var(--pb-color-gray-800);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-event, .badge.text-bg-event.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-gray-800);
}
.badge.text-bg-event-lot {
  --pb-badge-bg: var(--pb-color-green-700);
  --pb-badge-color: var(--pb-color-green-100);
}
.badge-group .badge.text-bg-event-lot, .badge.text-bg-event-lot.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-green-700);
}
.badge.text-bg-create-event {
  --pb-badge-bg: var(--pb-color-white);
  --pb-badge-color: var(--pb-color-white);
}
.badge-group .badge.text-bg-create-event, .badge.text-bg-create-event.inverted {
  --pb-badge-bg: #f3f4f6;
  --pb-badge-color: var(--pb-color-white);
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-badge-group-gap-y, 0.2rem) var(--pb-badge-group-gap-x, 0.35rem);
}

/* @version 10.0 [rev.02] */
/* BLOCKQUOTES */
.bq {
  --pb-blockquote-background-color: var(--pb-color-gray-100);
  --pb-blockquote-border-left-color: var(--pb-color-gray-500);
  --pb-blockquote-border-left-width: 5px;
  --pb-blockquote-border-left-style: solid;
  --pb-blockquote-padding: 12px;
  background-color: var(--pb-blockquote-background-color);
  border-left-color: var(--pb-blockquote-border-left-color);
  border-left-width: var(--pb-blockquote-border-left-width);
  border-left-style: var(--pb-blockquote-border-left-style);
  padding: var(--pb-blockquote-padding);
}
.bq.bq-info {
  --pb-blockquote-background-color: var(--pb-color-info-100);
  --pb-blockquote-border-left-color: var(--pb-color-info-600);
}
.bq.bq-success {
  --pb-blockquote-background-color: var(--pb-color-success-100);
  --pb-blockquote-border-left-color: var(--pb-color-success-600);
}
.bq.bq-danger {
  --pb-blockquote-background-color: var(--pb-color-danger-100);
  --pb-blockquote-border-left-color: var(--pb-color-danger-600);
}

/* /BLOCKQUOTES */
/* @version 10.0 [rev.02] */
/* BUTTONS */
:root {
  --pb-btn-box-shadow-focus-spread: var(--pb-box-shadow-spread);
  --pb-btn-box-shadow-focus-size: var(--pb-box-shadow-size);
  --pb-btn-box-shadow-focus-color: var(--pb-color-primary-100);
}

.btn {
  --pb-btn-padding-x: 0.75rem;
  --pb-btn-padding-y: 0.375rem;
  --pb-btn-font-family: ;
  --pb-btn-font-size: var(--pb-font-size-btn, 1rem);
  --pb-btn-font-weight: 400;
  --pb-btn-line-height: 1.5;
  --pb-btn-color: var(--pb-body-color);
  --pb-btn-background-color: transparent;
  --pb-btn-border-width: 1px;
  --pb-btn-border-color: transparent;
  --pb-btn-border-radius: inherit;
  --pb-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --pb-btn-disabled-opacity: 0.65;
  --pb-btn-box-shadow-color: transparent;
  --pb-btn-flex-gap: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pb-btn-flex-gap);
  transition: box-shadow 0.25s ease-in-out;
  font-family: var(--pb-btn-font-family), sans-serif;
  font-size: var(--pb-btn-font-size);
  font-weight: var(--pb-btn-font-weight);
  line-height: var(--pb-btn-line-height);
  padding: var(--pb-btn-padding-y) var(--pb-btn-padding-x);
  border-width: var(--pb-btn-border-width);
  border-radius: var(--pb-btn-border-radius);
}
.btn, .btn:hover, .btn:focus, .btn:active, .btn:first-child:active, :not(.btn-check) + .btn:active {
  color: var(--pb-btn-color);
  background-color: var(--pb-btn-background-color);
  border-color: var(--pb-btn-border-color);
}
.btn:focus {
  box-shadow: 0 0 var(--pb-btn-box-shadow-focus-spread) var(--pb-btn-box-shadow-focus-size) var(--pb-btn-box-shadow-color);
}

.btn-primary, .btn-primary:disabled, .btn-outline-primary, .btn-outline-primary:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-primary);
  --pb-btn-border-color: var(--pb-color-primary);
}
.btn-primary:hover, .btn-outline-primary:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-primary-700);
  --pb-btn-border-color: var(--pb-color-primary-700);
}
.btn-primary:focus, .btn-primary:active, .btn-primary:first-child:active, :not(.btn-check) + .btn-primary:active, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:first-child:active, :not(.btn-check) + .btn-outline-primary:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-primary-500);
  --pb-btn-border-color: var(--pb-color-primary-500);
  --pb-btn-box-shadow-color: var(--pb-color-primary-100);
}

.btn-outline-primary {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-secondary, .btn-secondary:disabled, .btn-outline-secondary, .btn-outline-secondary:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-secondary);
  --pb-btn-border-color: var(--pb-color-secondary);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-gray-500);
  --pb-btn-border-color: var(--pb-color-gray-500);
}
.btn-secondary:focus, .btn-secondary:active, .btn-secondary:first-child:active, :not(.btn-check) + .btn-secondary:active, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:first-child:active, :not(.btn-check) + .btn-outline-secondary:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-gray-400);
  --pb-btn-border-color: var(--pb-color-gray-400);
  --pb-btn-box-shadow-color: var(--pb-color-gray-200);
}

.btn-outline-secondary {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-success, .btn-success:disabled, .btn-outline-success, .btn-outline-success:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-success);
  --pb-btn-border-color: var(--pb-color-success);
}
.btn-success:hover, .btn-outline-success:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-success-700);
  --pb-btn-border-color: var(--pb-color-success-700);
}
.btn-success:focus, .btn-success:active, .btn-success:first-child:active, :not(.btn-check) + .btn-success:active, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success:first-child:active, :not(.btn-check) + .btn-outline-success:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-success-500);
  --pb-btn-border-color: var(--pb-color-success-500);
  --pb-btn-box-shadow-color: var(--pb-color-success-100);
}

.btn-outline-success {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-danger, .btn-danger:disabled, .btn-outline-danger, .btn-outline-danger:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-danger);
  --pb-btn-border-color: var(--pb-color-danger);
}
.btn-danger:hover, .btn-outline-danger:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-danger-700);
  --pb-btn-border-color: var(--pb-color-danger-700);
}
.btn-danger:focus, .btn-danger:active, .btn-danger:first-child:active, :not(.btn-check) + .btn-danger:active, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger:first-child:active, :not(.btn-check) + .btn-outline-danger:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-danger-500);
  --pb-btn-border-color: var(--pb-color-danger-500);
  --pb-btn-box-shadow-color: var(--pb-color-danger-100);
}

.btn-outline-danger {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-warning, .btn-warning:disabled, .btn-outline-warning, .btn-outline-warning:disabled {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-warning);
  --pb-btn-border-color: var(--pb-color-warning);
}
.btn-warning:hover, .btn-outline-warning:hover {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-warning-700);
  --pb-btn-border-color: var(--pb-color-warning-700);
}
.btn-warning:focus, .btn-warning:active, .btn-warning:first-child:active, :not(.btn-check) + .btn-warning:active, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning:first-child:active, :not(.btn-check) + .btn-outline-warning:active {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-warning-500);
  --pb-btn-border-color: var(--pb-color-warning-500);
  --pb-btn-box-shadow-color: var(--pb-color-warning-100);
}

.btn-outline-warning {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-info, .btn-info:disabled, .btn-outline-info, .btn-outline-info:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-info);
  --pb-btn-border-color: var(--pb-color-info);
}
.btn-info:hover, .btn-outline-info:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-info);
  --pb-btn-border-color: var(--pb-color-info);
}
.btn-info:focus, .btn-info:active, .btn-info:first-child:active, :not(.btn-check) + .btn-info:active, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info:first-child:active, :not(.btn-check) + .btn-outline-info:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-info);
  --pb-btn-border-color: var(--pb-color-info);
  --pb-btn-box-shadow-color: var(--pb-color-cyan-100);
}

.btn-outline-info {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-light, .btn-light:disabled, .btn-outline-light, .btn-outline-light:disabled {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-light);
  --pb-btn-border-color: var(--pb-color-light);
}
.btn-light:hover, .btn-outline-light:hover {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-gray-200);
  --pb-btn-border-color: var(--pb-color-gray-200);
}
.btn-light:focus, .btn-light:active, .btn-light:first-child:active, :not(.btn-check) + .btn-light:active, .btn-outline-light:focus, .btn-outline-light:active, .btn-outline-light:first-child:active, :not(.btn-check) + .btn-outline-light:active {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-gray-100);
  --pb-btn-border-color: var(--pb-color-gray-100);
  --pb-btn-box-shadow-color: var(--pb-color-gray-200);
}

.btn-outline-light {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-dark, .btn-dark:disabled, .btn-outline-dark, .btn-outline-dark:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-dark);
  --pb-btn-border-color: var(--pb-color-dark);
}
.btn-dark:hover, .btn-outline-dark:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-gray-700);
  --pb-btn-border-color: var(--pb-color-gray-700);
}
.btn-dark:focus, .btn-dark:active, .btn-dark:first-child:active, :not(.btn-check) + .btn-dark:active, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark:first-child:active, :not(.btn-check) + .btn-outline-dark:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-gray-800);
  --pb-btn-border-color: var(--pb-color-gray-800);
  --pb-btn-box-shadow-color: var(--pb-color-gray-400);
}

.btn-outline-dark {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-link, .btn-link:disabled, .btn-outline-link, .btn-outline-link:disabled {
  --pb-btn-color: var(--pb-color-primary);
  --pb-btn-background-color: transparent;
  --pb-btn-border-color: transparent;
}
.btn-link:hover, .btn-outline-link:hover {
  --pb-btn-color: var(--pb-color-primary-700);
  --pb-btn-background-color: transparent;
  --pb-btn-border-color: transparent;
}
.btn-link:focus, .btn-link:active, .btn-link:first-child:active, :not(.btn-check) + .btn-link:active, .btn-outline-link:focus, .btn-outline-link:active, .btn-outline-link:first-child:active, :not(.btn-check) + .btn-outline-link:active {
  --pb-btn-color: var(--pb-color-primary-500);
  --pb-btn-background-color: transparent;
  --pb-btn-border-color: transparent;
  --pb-btn-box-shadow-color: var(--pb-color-primary-100);
}

.btn-outline-link {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-blue, .btn-blue:disabled, .btn-outline-blue, .btn-outline-blue:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #0d6efd;
  --pb-btn-border-color: #0d6efd;
}
.btn-blue:hover, .btn-outline-blue:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #0b5ed7;
  --pb-btn-border-color: #0b5ed7;
}
.btn-blue:focus, .btn-blue:active, .btn-blue:first-child:active, :not(.btn-check) + .btn-blue:active, .btn-outline-blue:focus, .btn-outline-blue:active, .btn-outline-blue:first-child:active, :not(.btn-check) + .btn-outline-blue:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #3d8bfd;
  --pb-btn-border-color: #3d8bfd;
  --pb-btn-box-shadow-color: #b6d4fe;
}

.btn-outline-blue {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-green, .btn-green:disabled, .btn-outline-green, .btn-outline-green:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #00a651;
  --pb-btn-border-color: #00a651;
}
.btn-green:hover, .btn-outline-green:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #008a44;
  --pb-btn-border-color: #008a44;
}
.btn-green:focus, .btn-green:active, .btn-green:first-child:active, :not(.btn-check) + .btn-green:active, .btn-outline-green:focus, .btn-outline-green:active, .btn-outline-green:first-child:active, :not(.btn-check) + .btn-outline-green:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #33b87a;
  --pb-btn-border-color: #33b87a;
  --pb-btn-box-shadow-color: #b2e5cb;
}

.btn-outline-green {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-red, .btn-red:disabled, .btn-outline-red, .btn-outline-red:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #d42020;
  --pb-btn-border-color: #d42020;
}
.btn-red:hover, .btn-outline-red:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #b51b1b;
  --pb-btn-border-color: #b51b1b;
}
.btn-red:focus, .btn-red:active, .btn-red:first-child:active, :not(.btn-check) + .btn-red:active, .btn-outline-red:focus, .btn-outline-red:active, .btn-outline-red:first-child:active, :not(.btn-check) + .btn-outline-red:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #de4d4d;
  --pb-btn-border-color: #de4d4d;
  --pb-btn-box-shadow-color: #f3bcbc;
}

.btn-outline-red {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-gold, .btn-gold:disabled, .btn-outline-gold, .btn-outline-gold:disabled {
  --pb-btn-color: #846e20;
  --pb-btn-background-color: #fcd036;
  --pb-btn-border-color: #fcd036;
}
.btn-gold:hover, .btn-outline-gold:hover {
  --pb-btn-color: #846e20;
  --pb-btn-background-color: #e2bb30;
  --pb-btn-border-color: #e2bb30;
}
.btn-gold:focus, .btn-gold:active, .btn-gold:first-child:active, :not(.btn-check) + .btn-gold:active, .btn-outline-gold:focus, .btn-outline-gold:active, .btn-outline-gold:first-child:active, :not(.btn-check) + .btn-outline-gold:active {
  --pb-btn-color: #846e20;
  --pb-btn-background-color: #fcd95e;
  --pb-btn-border-color: #fcd95e;
  --pb-btn-box-shadow-color: #fdecae;
}

.btn-outline-gold {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-black, .btn-black:disabled, .btn-outline-black, .btn-outline-black:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #303641;
  --pb-btn-border-color: #303641;
}
.btn-black:hover, .btn-outline-black:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #282d36;
  --pb-btn-border-color: #282d36;
}
.btn-black:focus, .btn-black:active, .btn-black:first-child:active, :not(.btn-check) + .btn-black:active, .btn-outline-black:focus, .btn-outline-black:active, .btn-outline-black:first-child:active, :not(.btn-check) + .btn-outline-black:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #595e67;
  --pb-btn-border-color: #595e67;
  --pb-btn-box-shadow-color: #c6c7ca;
}

.btn-outline-black {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-orange, .btn-orange:disabled, .btn-outline-orange, .btn-outline-orange:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #ff9600;
  --pb-btn-border-color: #ff9600;
}
.btn-orange:hover, .btn-outline-orange:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #d97f00;
  --pb-btn-border-color: #d97f00;
}
.btn-orange:focus, .btn-orange:active, .btn-orange:first-child:active, :not(.btn-check) + .btn-orange:active, .btn-outline-orange:focus, .btn-outline-orange:active, .btn-outline-orange:first-child:active, :not(.btn-check) + .btn-outline-orange:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #ffab33;
  --pb-btn-border-color: #ffab33;
  --pb-btn-box-shadow-color: #ffd8a3;
}

.btn-outline-orange {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-default, .btn-default:disabled, .btn-outline-default, .btn-outline-default:disabled {
  --pb-btn-color: var(--pb-color-gray-800);
  --pb-btn-background-color: var(--pb-color-white);
  --pb-btn-border-color: var(--pb-color-gray-300);
}
.btn-default:hover, .btn-outline-default:hover {
  --pb-btn-color: var(--pb-color-gray-800);
  --pb-btn-background-color: var(--pb-color-gray-100);
  --pb-btn-border-color: var(--pb-color-gray-300);
}
.btn-default:focus, .btn-default:active, .btn-default:first-child:active, :not(.btn-check) + .btn-default:active, .btn-outline-default:focus, .btn-outline-default:active, .btn-outline-default:first-child:active, :not(.btn-check) + .btn-outline-default:active {
  --pb-btn-color: var(--pb-color-gray-800);
  --pb-btn-background-color: var(--pb-color-gray-100);
  --pb-btn-border-color: var(--pb-color-gray-50);
  --pb-btn-box-shadow-color: var(--pb-color-gray-200);
}

.btn-outline-default {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-place-bid, .btn-place-bid:disabled, .btn-outline-place-bid, .btn-outline-place-bid:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-success);
  --pb-btn-border-color: var(--pb-color-success);
}
.btn-place-bid:hover, .btn-outline-place-bid:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-success-700);
  --pb-btn-border-color: var(--pb-color-success-700);
}
.btn-place-bid:focus, .btn-place-bid:active, .btn-place-bid:first-child:active, :not(.btn-check) + .btn-place-bid:active, .btn-outline-place-bid:focus, .btn-outline-place-bid:active, .btn-outline-place-bid:first-child:active, :not(.btn-check) + .btn-outline-place-bid:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: var(--pb-color-success-500);
  --pb-btn-border-color: var(--pb-color-success-500);
  --pb-btn-box-shadow-color: var(--pb-color-success-100);
}

.btn-outline-place-bid {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-make-offer, .btn-make-offer:disabled, .btn-outline-make-offer, .btn-outline-make-offer:disabled {
  --pb-btn-color: #846e20;
  --pb-btn-background-color: #fcd036;
  --pb-btn-border-color: #fcd036;
}
.btn-make-offer:hover, .btn-outline-make-offer:hover {
  --pb-btn-color: #846e20;
  --pb-btn-background-color: #e2bb30;
  --pb-btn-border-color: #e2bb30;
}
.btn-make-offer:focus, .btn-make-offer:active, .btn-make-offer:first-child:active, :not(.btn-check) + .btn-make-offer:active, .btn-outline-make-offer:focus, .btn-outline-make-offer:active, .btn-outline-make-offer:first-child:active, :not(.btn-check) + .btn-outline-make-offer:active {
  --pb-btn-color: #846e20;
  --pb-btn-background-color: #fcd95e;
  --pb-btn-border-color: #fcd95e;
  --pb-btn-box-shadow-color: #fdecae;
}

.btn-outline-make-offer {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-buy-out, .btn-buy-out:disabled, .btn-outline-buy-out, .btn-outline-buy-out:disabled {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #0d6efd;
  --pb-btn-border-color: #0d6efd;
}
.btn-buy-out:hover, .btn-outline-buy-out:hover {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #0b5ed7;
  --pb-btn-border-color: #0b5ed7;
}
.btn-buy-out:focus, .btn-buy-out:active, .btn-buy-out:first-child:active, :not(.btn-check) + .btn-buy-out:active, .btn-outline-buy-out:focus, .btn-outline-buy-out:active, .btn-outline-buy-out:first-child:active, :not(.btn-check) + .btn-outline-buy-out:active {
  --pb-btn-color: var(--pb-color-white);
  --pb-btn-background-color: #3d8bfd;
  --pb-btn-border-color: #3d8bfd;
  --pb-btn-box-shadow-color: #b6d4fe;
}

.btn-outline-buy-out {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-wishlist-default, .btn-wishlist-default:disabled, .btn-outline-wishlist-default, .btn-outline-wishlist-default:disabled {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-white);
  --pb-btn-border-color: var(--pb-color-white);
}
.btn-wishlist-default:hover, .btn-outline-wishlist-default:hover {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-gray-200);
  --pb-btn-border-color: var(--pb-color-gray-200);
}
.btn-wishlist-default:focus, .btn-wishlist-default:active, .btn-wishlist-default:first-child:active, :not(.btn-check) + .btn-wishlist-default:active, .btn-outline-wishlist-default:focus, .btn-outline-wishlist-default:active, .btn-outline-wishlist-default:first-child:active, :not(.btn-check) + .btn-outline-wishlist-default:active {
  --pb-btn-color: var(--pb-color-black);
  --pb-btn-background-color: var(--pb-color-gray-100);
  --pb-btn-border-color: var(--pb-color-gray-100);
  --pb-btn-box-shadow-color: var(--pb-color-gray-200);
}

.btn-outline-wishlist-default {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

.btn-wishlist-active, .btn-wishlist-active:disabled, .btn-outline-wishlist-active, .btn-outline-wishlist-active:disabled {
  --pb-btn-color: var(--pb-color-red-600);
  --pb-btn-background-color: var(--pb-color-gray-200);
  --pb-btn-border-color: var(--pb-color-gray-200);
}
.btn-wishlist-active:hover, .btn-outline-wishlist-active:hover {
  --pb-btn-color: var(--pb-color-red-600);
  --pb-btn-background-color: var(--pb-color-red-100);
  --pb-btn-border-color: var(--pb-color-red-100);
}
.btn-wishlist-active:focus, .btn-wishlist-active:active, .btn-wishlist-active:first-child:active, :not(.btn-check) + .btn-wishlist-active:active, .btn-outline-wishlist-active:focus, .btn-outline-wishlist-active:active, .btn-outline-wishlist-active:first-child:active, :not(.btn-check) + .btn-outline-wishlist-active:active {
  --pb-btn-color: var(--pb-color-red-600);
  --pb-btn-background-color: var(--pb-color-red-100);
  --pb-btn-border-color: var(--pb-color-red-100);
  --pb-btn-box-shadow-color: var(--pb-color-red-100);
}

.btn-outline-wishlist-active {
  --pb-btn-color: var(--pb-btn-border-color);
  --pb-btn-background-color: transparent;
}

/* button sizes */
.btn-group-sm > .btn, .btn-sm {
  --pb-btn-padding-y: 0.25rem;
  --pb-btn-padding-x: 0.5rem;
  --pb-btn-font-size: var(--pb-font-size-btn-sm, 0.875rem);
  --pb-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-group-lg > .btn, .btn-lg {
  --pb-btn-padding-y: 0.5rem;
  --pb-btn-padding-x: 1rem;
  --pb-btn-font-size: var(--pb-font-size-btn-lg, 1.25rem);
  --pb-btn-border-radius: var(--bs-border-radius-lg);
}

/* Button Group States */
.btn-group .btn {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --pb-btn-border-color: #d1d5db !important;
}
.btn-group .btn.active {
  --pb-btn-color: #374151;
  --pb-btn-background-color: #e5e7eb;
  --pb-btn-border-color: #d1d5db;
}
.btn-group .btn-filter-title {
  z-index: 2;
  margin-right: -1px;
}
.btn-group .btn-filter-title, .btn-group .btn-filter-title:hover {
  --pb-btn-background-color: #f3f4f6;
  --pb-btn-color: #1f2937;
  --pb-btn-border-color: #d1d5db;
  border-right-color: var(--pb-btn-filter-title-border-right, #f3f4f6);
}
.btn-group .btn-filter-title:after {
  content: ":";
}

.btn-toolbar {
  gap: var(--pb-btn-toolbar-gap, var(--pb-flex-gap));
}

.bootbox-close-button {
  float: right;
}

/* BUTTON LOADING DISABLED */
.btn-loading-disabled {
  opacity: 1 !important;
}

/* /BUTTON LOADING DISABLED */
/* BUTTONS STICKY BOTTOM */
.buttons-sticky-bottom {
  position: sticky;
  background-color: var(--pb-buttons-sticky-bottom-bg, #fff);
  padding: 0.75rem 0;
  margin-bottom: 1rem;
  border-top: 1px solid var(--pb-buttons-sticky-bottom-border-top-color, #d1d5db);
  bottom: 0;
  width: 100%;
  z-index: 15;
}
@media (max-width: 1199.98px) {
  .buttons-sticky-bottom {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .buttons-sticky-bottom button {
    display: inline-block;
  }
}
.form-sticky-buttons .buttons-sticky-bottom {
  display: none;
}
.buttons-sticky-bottom.bg-transparent {
  --pb-buttons-sticky-bottom-border-top-color: #f3f4f6;
  background-color: rgba(255, 255, 255, 0.8) !important;
}

/* /BUTTONS STICKY BOTTOM */
.btn-email {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
.btn-email .btn {
  width: 100%;
  font-size: 1.25rem;
  padding: 0.5rem 1rem;
}

.buttons-grouped {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-buttons-grouped-gap, var(--pb-flex-gap));
}
.buttons-grouped.buttons-icons-only span:not(.feather) {
  display: none;
}
.buttons-grouped .dropdown-item span {
  background-color: transparent;
}
.buttons-grouped.buttons-stacked {
  flex-direction: column;
  align-items: flex-start;
}
.buttons-grouped.buttons-stacked-full-width {
  flex-direction: column;
}

.sidebar .sidebar-close {
  color: var(--pb-header-button-color, #1f2937) !important;
  background-color: transparent;
  border: none;
  font-size: var(--pb-header-button-font-size, 28px);
}

/* @version 10.0 [rev.01] */
.listings-cards,
.stores-cards,
.events-cards {
  --pb-cards-padding-x: 20px;
  --pb-cards-padding-y: 24px;
}
@media (max-width: 767.98px) {
  .listings-cards,
  .stores-cards,
  .events-cards {
    --pb-cards-padding-x: 12px;
    --pb-cards-padding-y: 16px;
  }
}
.listings-cards .heading,
.stores-cards .heading,
.events-cards .heading {
  grid-column: 1/-1;
}
.listings-cards,
.stores-cards,
.events-cards {
  display: grid;
  grid-template-columns: repeat(var(--pb-cards-cols-phone, 1), minmax(0, 1fr));
  gap: var(--pb-cards-gap, 1rem);
}
@media (min-width: 992px) {
  .listings-cards,
  .stores-cards,
  .events-cards {
    grid-template-columns: repeat(var(--pb-cards-cols-desktop, var(--pb-cards-cols-phone, 1)), minmax(0, 1fr));
  }
}
.listings-cards.cards-grid-phone-1,
.stores-cards.cards-grid-phone-1,
.events-cards.cards-grid-phone-1 {
  --pb-cards-cols-phone: 1;
}
@media (min-width: 992px) {
  .listings-cards.cards-grid-desktop-1,
  .stores-cards.cards-grid-desktop-1,
  .events-cards.cards-grid-desktop-1 {
    --pb-cards-cols-desktop: 1;
  }
}
.listings-cards.cards-grid-phone-2,
.stores-cards.cards-grid-phone-2,
.events-cards.cards-grid-phone-2 {
  --pb-cards-cols-phone: 2;
}
@media (min-width: 992px) {
  .listings-cards.cards-grid-desktop-2,
  .stores-cards.cards-grid-desktop-2,
  .events-cards.cards-grid-desktop-2 {
    --pb-cards-cols-desktop: 2;
  }
}
.listings-cards.cards-grid-phone-3,
.stores-cards.cards-grid-phone-3,
.events-cards.cards-grid-phone-3 {
  --pb-cards-cols-phone: 3;
}
@media (min-width: 992px) {
  .listings-cards.cards-grid-desktop-3,
  .stores-cards.cards-grid-desktop-3,
  .events-cards.cards-grid-desktop-3 {
    --pb-cards-cols-desktop: 3;
  }
}
.listings-cards.cards-grid-phone-4,
.stores-cards.cards-grid-phone-4,
.events-cards.cards-grid-phone-4 {
  --pb-cards-cols-phone: 4;
}
@media (min-width: 992px) {
  .listings-cards.cards-grid-desktop-4,
  .stores-cards.cards-grid-desktop-4,
  .events-cards.cards-grid-desktop-4 {
    --pb-cards-cols-desktop: 4;
  }
}
.listings-cards.cards-grid-phone-5,
.stores-cards.cards-grid-phone-5,
.events-cards.cards-grid-phone-5 {
  --pb-cards-cols-phone: 5;
}
@media (min-width: 992px) {
  .listings-cards.cards-grid-desktop-5,
  .stores-cards.cards-grid-desktop-5,
  .events-cards.cards-grid-desktop-5 {
    --pb-cards-cols-desktop: 5;
  }
}
.listings-cards.cards-grid-phone-6,
.stores-cards.cards-grid-phone-6,
.events-cards.cards-grid-phone-6 {
  --pb-cards-cols-phone: 6;
}
@media (min-width: 992px) {
  .listings-cards.cards-grid-desktop-6,
  .stores-cards.cards-grid-desktop-6,
  .events-cards.cards-grid-desktop-6 {
    --pb-cards-cols-desktop: 6;
  }
}
.listings-cards .card,
.stores-cards .card,
.events-cards .card {
  container-type: inline-size;
  background-color: var(--pb-card-background-color, var(--pb-default-box-bg));
  border-color: var(--pb-card-border-color, var(--pb-default-box-border-color));
  border-radius: var(--pb-card-border-radius, 0.375rem);
}
.listings-cards .card .card-img,
.stores-cards .card .card-img,
.events-cards .card .card-img {
  background-color: var(--pb-card-img-background-color, #fff);
  border-radius: var(--pb-card-img-border-radius);
}
.listings-cards .card .card-img .card-img-top,
.stores-cards .card .card-img .card-img-top,
.events-cards .card .card-img .card-img-top {
  border-radius: var(--pb-card-img-border-radius) !important;
  aspect-ratio: var(----pb-media-aspect-ratio, 1/1);
}
.listings-cards .card .card-body,
.stores-cards .card .card-body,
.events-cards .card .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--pb-card-body-gap, 0.25rem);
  padding: 0;
  font-size: var(--pb-card-body-font-size, var(--pb-font-size));
}
.listings-cards .card .card-footer,
.stores-cards .card .card-footer,
.events-cards .card .card-footer {
  gap: var(--pb-card-footer-gap, 0.5rem);
}
.listings-cards .card .card-title,
.stores-cards .card .card-title,
.events-cards .card .card-title {
  font-size: var(--pb-card-title-font-size, 1.1rem);
  font-weight: var(--pb-card-title-font-weight, var(--pb-font-weight-semibold));
  margin-bottom: var(--pb-card-title-margin-bottom, 0.5rem);
}
.listings-cards .card .card-title a,
.stores-cards .card .card-title a,
.events-cards .card .card-title a {
  color: var(--pb-card-title-color, var(--pb-link-color));
}
.listings-cards .card .card-title a:hover,
.stores-cards .card .card-title a:hover,
.events-cards .card .card-title a:hover {
  color: var(--pb-card-title-hover-color, var(--pb-link-hover-color));
}
.listings-cards .card .price,
.stores-cards .card .price,
.events-cards .card .price {
  font-size: var(--pb-card-price-font-size, var(--pb-font-size-lg));
  line-height: var(--pb-card-price-line-height, 1.4);
  font-weight: var(--pb-card-price-font-weight, 500);
}
.listings-cards .card .seller,
.stores-cards .card .seller,
.events-cards .card .seller {
  font-size: var(--pb-card-seller-font-size, var(--pb-font-size-sm));
  color: var(--pb-card-seller-color, #374151);
}
.listings-cards .card .bidding,
.stores-cards .card .bidding,
.events-cards .card .bidding {
  display: flex;
  align-items: center;
  gap: var(--pb-card-bidding-gap, 0.5rem);
  font-size: var(--pb-card-bidding-font-size, var(--pb-font-size-sm));
}
.listings-cards .card .bidding .badge,
.stores-cards .card .bidding .badge,
.events-cards .card .bidding .badge {
  font-size: var(--pb-card-bidding-badge-font-size, var(--pb-font-size-sm));
}
.listings-cards .card .end-time,
.stores-cards .card .end-time,
.events-cards .card .end-time {
  font-size: var(--pb-card-listing-end-time-font-size, var(--pb-font-size-sm));
}
.listings-cards .card:hover .btn-wishlist-async,
.stores-cards .card:hover .btn-wishlist-async,
.events-cards .card:hover .btn-wishlist-async {
  visibility: visible !important;
}
.listings-cards .card-grid,
.stores-cards .card-grid,
.events-cards .card-grid {
  display: flex;
  flex-direction: column;
  gap: var(--pb-card-grid-gap, 1rem);
  padding: var(--pb-cards-padding-y) var(--pb-cards-padding-x);
  width: auto;
}
.listings-cards .card-grid .card-title,
.stores-cards .card-grid .card-title,
.events-cards .card-grid .card-title {
  white-space: normal !important;
  font-size: 1.2rem;
  line-height: 1.25;
  height: calc(1.2rem * 1.25 * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.listings-cards .card-grid .card-short-description,
.stores-cards .card-grid .card-short-description,
.events-cards .card-grid .card-short-description {
  display: none;
}
.listings-cards .card-grid .bidding,
.stores-cards .card-grid .bidding,
.events-cards .card-grid .bidding {
  display: flex;
  align-items: center;
  gap: 4px;
}
.listings-cards .card-grid .card-footer,
.stores-cards .card-grid .card-footer,
.events-cards .card-grid .card-footer {
  border-top: none;
  margin: 0 calc(var(--pb-cards-padding-x) * -1) calc(var(--pb-cards-padding-y) * -1);
  padding: calc(var(--pb-cards-padding-y) / 2) var(--pb-cards-padding-x);
  display: flex;
  justify-content: space-between;
}
.listings-cards .card-grid .card-footer .btn,
.stores-cards .card-grid .card-footer .btn,
.events-cards .card-grid .card-footer .btn {
  flex: 1;
}
.listings-cards .card-grid .btn-wishlist-async,
.stores-cards .card-grid .btn-wishlist-async,
.events-cards .card-grid .btn-wishlist-async {
  position: absolute;
  top: 1rem;
  right: 1rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.listings-cards .card-grid .listing-status,
.stores-cards .card-grid .listing-status,
.events-cards .card-grid .listing-status {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}
.listings-cards .card-list,
.stores-cards .card-list,
.events-cards .card-list {
  --pb-card-list-padding-x: 1rem;
  --pb-card-list-padding-y: 1rem;
  --pb-card-list-gap: 1rem;
}
@media (max-width: 991.98px) {
  .listings-cards .card-list,
  .stores-cards .card-list,
  .events-cards .card-list {
    --pb-card-list-padding-x: 0.5rem;
    --pb-card-list-padding-y: 0.5rem;
    --pb-card-list-gap: 0.5rem;
  }
}
.listings-cards .card-list,
.stores-cards .card-list,
.events-cards .card-list {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 20% 1fr auto;
  grid-template-areas: "img body footer";
  padding: var(--pb-card-list-padding-y) var(--pb-card-list-padding-x);
  gap: var(--pb-card-list-gap);
  width: 100%;
  align-items: center;
}
.listings-cards .card-list .card-img,
.stores-cards .card-list .card-img,
.events-cards .card-list .card-img {
  grid-area: img;
  width: auto;
}
.listings-cards .card-list .card-body,
.stores-cards .card-list .card-body,
.events-cards .card-list .card-body {
  grid-area: body;
}
.listings-cards .card-list .card-body .listing-info, .listings-cards .card-list .card-body .listing-price,
.stores-cards .card-list .card-body .listing-info,
.stores-cards .card-list .card-body .listing-price,
.events-cards .card-list .card-body .listing-info,
.events-cards .card-list .card-body .listing-price {
  display: flex;
  flex-direction: column;
  gap: var(--pb-card-list-body-gap, 0.25rem);
}
.listings-cards .card-list .card-footer,
.stores-cards .card-list .card-footer,
.events-cards .card-list .card-footer {
  grid-area: footer;
  display: flex;
  background-color: transparent;
  border-top: none;
  flex-direction: column;
  padding: 0;
}
.listings-cards .card-list .btn-wishlist-async,
.stores-cards .card-list .btn-wishlist-async,
.events-cards .card-list .btn-wishlist-async {
  position: absolute;
  top: var(--pb-card-list-padding-y);
  right: var(--pb-card-list-padding-x);
}
.listings-cards:not(.no-highlighting) .card-highlighted,
.stores-cards:not(.no-highlighting) .card-highlighted,
.events-cards:not(.no-highlighting) .card-highlighted {
  border-color: var(--pb-card-highlighted-border-color, #b8daff) !important;
  background-color: var(--pb-card-highlighted-background-color, #e6f2ff) !important;
}
.listings-cards:not(.no-highlighting) .card-home-page-featured,
.stores-cards:not(.no-highlighting) .card-home-page-featured,
.events-cards:not(.no-highlighting) .card-home-page-featured {
  border-color: var(--pb-card-home-page-featured-border-color, #ffe7a3) !important;
  background-color: var(--pb-card-home-page-featured-background-color, #fff8e6) !important;
}
.listings-cards:not(.no-highlighting) .card-category-page-featured,
.stores-cards:not(.no-highlighting) .card-category-page-featured,
.events-cards:not(.no-highlighting) .card-category-page-featured {
  border-color: var(--pb-card-category-page-featured-border-color, #f7b5bd) !important;
  background-color: var(--pb-card-home-page-featured-background-color, #fdecef) !important;
}

.stores-cards .card-grid .card-seller {
  font-weight: 500;
  margin-bottom: 0;
}

/* CATEGORIES CARD COLUMNS */
.categories-cards {
  --pb-categories-card-columns-column-count: 1;
}
@media (min-width: 768px) {
  .categories-cards {
    --pb-categories-card-columns-column-count: 2;
  }
}
@media (min-width: 992px) {
  .categories-cards {
    --pb-categories-card-columns-column-count: 3;
  }
}
@media (min-width: 1200px) {
  .categories-cards {
    --pb-categories-card-columns-column-count: 4;
  }
}
.categories-cards {
  column-count: var(--pb-categories-card-columns-column-count);
}
.categories-cards .card {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--pb-categories-cards-card-mb, 1rem);
  border: none;
  background-color: var(--pb-categories-cards-card-bg, #fff);
}
.categories-cards .card .card-title {
  margin-bottom: 0;
}
.categories-cards .card .card-title a {
  color: var(--pb-categories-cards-card-title-link-color, #1f2937);
}
.categories-cards .card .card-text {
  margin-top: 0.75rem;
}

/* /CATEGORIES CARD COLUMNS */
/* EVENTS CARDS */
.events-cards .card {
  --pb-card-background-color: var(--pb-event-card-background-color, var(--pb-default-box-bg));
}
@media (min-width: 992px) {
  .events-cards .card {
    --pb-card-title-font-size: 1.75rem;
    --pb-card-body-font-size: 1rem;
  }
}
.events-cards .card .au-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}
.events-cards .card .card-title {
  font-weight: var(--pb-event-card-title-font-weight, var(--pb-font-weight-semibold));
  margin-bottom: 1rem;
}
.events-cards .card .card-title a {
  color: var(--pb-event-card-title-color, var(--pb-color-gray-800));
}
.events-cards .card .event-details .bi {
  color: var(--pb-event-details-icon-color, var(--pb-color-gray-400));
  margin-right: 0.25rem;
}
.events-cards .card .event-details .event-details-label {
  font-weight: 500;
}
.events-cards .card .event-details .event-details-label::after {
  content: ":";
}
.events-cards .card-list {
  grid-column: auto;
  grid-template-areas: "img body";
  grid-template-columns: 25% 1fr;
  --pb-thumbnail-img-background-color: var(--pb-color-gray-50);
}
.events-cards .card-list .card-body {
  align-self: center;
}
.events-cards .card-list .card-body .card-title {
  order: 0;
}
.events-cards .card-list .lots-in-event {
  display: none;
}
.events-cards .card-list.with-lots .lots-in-event {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.confirm-event-lots .card .card-seller, .confirm-event-lots .card .end-time, .confirm-event-lots .card .bidding, .confirm-event-lots .card .action-buttons {
  display: none !important;
}

.listing-card .btn-lot-start-manually,
.listing-card .btn-lot-close-manually,
.media-body .btn-lot-start-manually,
.media-body .btn-lot-close-manually {
  display: none;
}

/* /EVENTS CARDS */
.listing-list h6, .cart-box h6 {
  font-family: var(--pb-font-primary), sans-serif;
}

.listing-list .price {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: var(--pb-listing-list-price-font-size, var(--pb-font-size-lg));
  font-weight: var(--pb-listing-list-price-font-weight, var(--pb-font-weight-medium));
}
.listing-list .listing-times {
  font-size: var(--pb-listing-list-times-font-size, var(--pb-font-size-90));
}

.listing-list-email {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #f3f4f6;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.sale-email {
  border-top: 1px solid #e5e7eb;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
.sale-email.with-bottom {
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 1.5rem;
}

/* @version 10.0 [rev.01] */
/* LISTINGS CAROUSEL */
.carousel {
  --pb-carousel-control-width: 40px;
}
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  position: relative;
  width: var(--pb-carousel-control-width);
  opacity: 1;
}
.carousel .carousel-control-prev .bi,
.carousel .carousel-control-next .bi {
  width: var(--pb-carousel-control-width);
  height: var(--pb-carousel-control-height, var(--pb-carousel-control-width));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: var(--pb-carousel-control-icon-font-size, calc(1px + var(--pb-carousel-control-width) / 2));
  border-radius: var(--pb-carousel-icon-border-radius, 999px);
  color: var(--pb-carousel-control-icon-color, var(--pb-color-gray-600));
  background-color: var(--pb-carousel-control-icon-background-color, var(--pb-color-white));
  box-shadow: var(--pb-carousel-control-icon-box-shadow, 0 0 0 0.25rem rgba(0, 0, 0, 0.02)) !important;
  border: 1px solid var(--pb-color-rgba-black-20);
}

/* @version 10.0 [rev.01] */
/* SHOPPING CART DROPDOWN (DEFAULT PARTIAL) */
.cart-dropdown .cart-box .feather, .cart-sidebar .cart-box .feather {
  color: #0b0b0b;
  height: 15px;
  width: 15px;
}
.cart-dropdown .cart-box + .cart-box, .cart-sidebar .cart-box + .cart-box {
  border-top: 1px solid #dee2e6;
  margin-top: 1rem;
  padding-top: 1rem;
}
.cart-dropdown .cart-item + .cart-item, .cart-sidebar .cart-item + .cart-item {
  margin-top: 0.5rem;
}
.cart-dropdown .cart-total, .cart-sidebar .cart-total {
  border-top: 1px solid #e7ebef;
  font-size: 1.1rem;
}
.cart-dropdown .media, .cart-sidebar .media {
  font-size: 85%;
}
.cart-summary .cart-dropdown, .cart-summary .cart-sidebar {
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e5e7eb;
}

/* /SHOPPING CART DROPDOWN (DEFAULT PARTIAL) */
/* HEADER CART DROPDOWN BUTTON */
header .cart-sidebar .cart-nb-items {
  font-size: var(--pb-font-size-sm);
  color: #374151 !important;
  background-color: #f3f4f6 !important;
  /* display absolute option */
  line-height: 16px;
  border-radius: 12px;
  width: 24px;
  text-align: center;
  position: absolute;
  left: 32px;
}
header .cart-sidebar .btn {
  border: none !important;
  position: relative;
}

/* /HEADER CART DROPDOWN BUTTON */
/* CART TOTALS BOX (CART / CHECKOUT PAGES) */
.dl-cart-totals {
  margin-bottom: 0;
}
.dl-cart-totals > dd {
  font-size: 0.925rem;
  margin-bottom: 0.25rem;
  text-align: right;
}
.dl-cart-totals > dd a {
  color: #374151;
}
.dl-cart-totals .col-total {
  font-size: 1.4em;
  margin-top: 0.5rem;
}
.dl-cart-totals .calculate-shipping {
  text-align: left;
  margin-top: 0.75rem;
}
.dl-cart-totals .calculate-shipping > div {
  border-top: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  padding: 0.75rem 0;
}
.dl-cart-totals .calculate-shipping dt {
  font-weight: 400;
  font-size: 90%;
}
.dl-cart-totals .form-check {
  padding-top: 0;
}

/* /CART TOTALS BOX (CART / CHECKOUT PAGES) */
/* @version 10.0 [rev.01] */
.cookie-usage {
  --pb-font-size-cookie-usage: var(--pb-font-size-sm);
  --pb-background-color-cookie-usage: var(--pb-color-gray-800);
  --pb-color-cookie-usage: var(--pb-color-white);
  --pb-border-radius-cookie-usage: 4px;
  --pb-padding-cookie-usage: 8px;
  --pb-width-cookie-usage: 350px;
  --pb-box-shadow-cookie-usage: 0 4px 10px rgba(0, 0, 0, .25) !important;
}
@media (max-width: 575.98px) {
  .cookie-usage {
    --pb-width-cookie-usage: calc(100% - 16px);
  }
}
.cookie-usage {
  width: var(--pb-width-cookie-usage);
  bottom: 8px;
  right: 8px;
  position: fixed;
  z-index: 20;
  box-shadow: var(--pb-box-shadow-cookie-usage);
  border-radius: var(--pb-border-radius-cookie-usage);
  padding: var(--pb-padding-cookie-usage);
  background-color: var(--pb-background-color-cookie-usage);
  color: var(--pb-color-cookie-usage);
  font-size: var(--pb-font-size-cookie-usage);
}

/* @version 10.0 [rev.02] */
.custom-fields {
  --pb-custom-fields-label-font-size: 1.05rem;
  --pb-custom-fields-label-padding-bottom: .2rem;
  --pb-custom-fields-label-font-weight: 500;
  --pb-custom-fields-description-padding-bottom: .5rem;
  --pb-custom-fields-subtitle-margin-top: 1rem;
  --pb-custom-fields-margin-top: .5rem;
  --pb-custom-fields-label-separator: ":";
  --pb-custom-fields-description-margin-left: .25rem;
  --pb-custom-fields-description-font-weight: 400;
  --pb-custom-fields-table-font-size: .875rem;
  --pb-custom-fields-offer-font-size: .925rem;
  --pb-custom-fields-bid-font-size: .925rem;
}
.custom-fields .label {
  font-size: var(--pb-custom-fields-label-font-size);
  padding-bottom: var(--pb-custom-fields-label-padding-bottom);
  font-weight: var(--pb-custom-fields-label-font-weight);
}
.custom-fields .description {
  padding-bottom: var(--pb-custom-fields-description-padding-bottom);
}
.custom-fields .subtitle:not(:first-child) {
  margin-top: var(--pb-custom-fields-subtitle-margin-top);
}

.table-sale .custom-fields,
.offer-details .custom-fields,
.bid-details .custom-fields,
.cart-box .custom-fields,
.form-cart .custom-fields {
  margin-top: var(--pb-custom-fields-margin-top);
}
.table-sale .custom-fields .custom-field-divider,
.offer-details .custom-fields .custom-field-divider,
.bid-details .custom-fields .custom-field-divider,
.cart-box .custom-fields .custom-field-divider,
.form-cart .custom-fields .custom-field-divider {
  display: flex;
  flex-wrap: wrap;
}
.table-sale .custom-fields .subtitle,
.offer-details .custom-fields .subtitle,
.bid-details .custom-fields .subtitle,
.cart-box .custom-fields .subtitle,
.form-cart .custom-fields .subtitle {
  display: none;
}
.table-sale .custom-fields .label:after,
.offer-details .custom-fields .label:after,
.bid-details .custom-fields .label:after,
.cart-box .custom-fields .label:after,
.form-cart .custom-fields .label:after {
  content: var(--pb-custom-fields-label-separator);
}
.table-sale .custom-fields .description,
.offer-details .custom-fields .description,
.bid-details .custom-fields .description,
.cart-box .custom-fields .description,
.form-cart .custom-fields .description {
  margin-left: var(--pb-custom-fields-description-margin-left);
  font-weight: var(--pb-custom-fields-description-font-weight);
}

.table-sale .custom-fields .label, .table-sale .custom-fields .description,
.cart-box .custom-fields .label,
.cart-box .custom-fields .description {
  font-size: var(--pb-custom-fields-table-font-size);
  padding: 0;
}

.offer-details .custom-fields .label, .offer-details .custom-fields .description {
  font-size: var(--pb-custom-fields-offer-font-size);
  padding: 0;
}

.bid-details .custom-fields .label, .bid-details .custom-fields .description {
  font-size: var(--pb-custom-fields-bid-font-size);
  padding: 0;
}

/* @version 10.0 [rev.01] */
.dropdown-item span {
  color: var(--pb-dropdown-item-span-color, var(--pb-color-gray-700));
  background-color: var(--pb-dropdown-item-span-bg-color, var(--pb-color-gray-200));
}
.dropdown-item:hover {
  color: var(--pb-dropdown-item-hover-color, var(--pb-color-gray-900));
  background-color: var(--pb-dropdown-item-hover-bg-color, var(--pb-color-gray-100));
}

.language-dropdown .btn,
.user-dropdown .btn {
  font-size: var(--pb-custom-dropdown-btn-font-size, var(--pb-font-size)) !important;
}
.language-dropdown .btn:hover, .language-dropdown .btn:focus, .language-dropdown .btn:active,
.user-dropdown .btn:hover,
.user-dropdown .btn:focus,
.user-dropdown .btn:active {
  background-color: var(--pb-custom-dropdown-btn-hover-bg-color, var(--pb-color-gray-100));
  border-color: var(--pb-custom-dropdown-btn-active-color, var(--pb-color-gray-100));
  box-shadow: none;
}
.language-dropdown .dropdown-item,
.user-dropdown .dropdown-item {
  padding: var(--pb-custom-dropdown-padding-y, 0.125rem) var(--pb-custom-dropdown-padding-x, 1rem);
}
.language-dropdown .dropdown-menu-end,
.user-dropdown .dropdown-menu-end {
  position: absolute;
  right: 0;
}

/* ----- header categories menu ----- */
.categories-menu {
  position: relative;
}
.categories-menu .nav-item:first-child .nav-link {
  padding-left: 0;
}
.categories-menu {
  /* FS-DROPDOWN */
}
.categories-menu .fs-dropdown {
  position: static !important;
}
.categories-menu .fs-dropdown > .fs-dropdown-menu {
  margin-top: -0.25rem;
  padding-top: 20px;
  font-weight: 400;
  left: 0;
  width: 100%;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--pb-categories-menu-dropdown-bg, var(--pb-color-white));
  display: block;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
  transition-delay: 0.4s; /* delay before fade-out */
  border: 1px solid var(--pb-categories-menu-dropdown-border, var(--pb-color-gray-300));
  border-radius: 3px;
  z-index: 20;
}
.categories-menu .fs-dropdown:hover > .fs-dropdown-menu {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s; /* delay before fade-in */
}
.categories-menu {
  /* /FS-DROPDOWN */
}
.categories-menu .masonry-layout {
  column-count: 4;
  column-gap: 0;
}
.categories-menu .masonry-layout__panel {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  padding-left: 1rem;
}
.categories-menu .subcategory-header {
  color: var(--pb-categories-menu-dropdown-subcategory-header-color, var(--pb-color-gray-800));
  font-weight: 600;
  font-size: 1.1rem;
}
.categories-menu .subcategory-header a {
  color: var(--pb-categories-menu-dropdown-subcategory-header-link-color, var(--pb-color-gray-800));
  text-shadow: none;
}
.categories-menu .dropdown-toggle::after {
  display: none;
}

/** @version 10.0 [rev.02] */
.form-control,
.form-select {
  --pb-form-control-font-family: inherit;
  --pb-form-control-font-size: inherit;
  --pb-form-element-border-radius: 0.375rem;
  font-size: var(--pb-form-control-font-size);
  border-radius: var(--pb-form-element-border-radius);
  font-weight: var(--pb-form-element-font-weight, 300);
  background-color: var(--pb-form-element-background-color, #fff);
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  outline: none;
}
.form-control:focus,
.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(45, 129, 246, 0.1);
  outline: none;
}
.form-control::placeholder,
.form-select::placeholder {
  color: #9ca3af;
}

.table .form-control, .table .form-select {
  padding: 0.375rem 0.75rem;
}

.form-subtitle {
  font-size: 1.2rem !important;
  margin-bottom: 12px !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #e5e7eb;
}

.form-check-label {
  color: #111827;
  font-size: 95%;
  margin-left: 2px;
}

.form-check-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 0.25rem rgba(45, 129, 246, 0.1) !important;
}

.form-check-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.form-group {
  margin-bottom: 1rem;
}
.form-inline .form-group {
  margin-bottom: 0;
}

.form-check {
  padding-top: calc(0.375rem + 1px);
}
.form-vertical .form-check {
  padding-top: 0;
}

@media (min-width: 1400px) {
  .col-form-label {
    flex: 0 1 var(--pb-col-form-label-width, var(--pb-flex-label-width));
  }
  .col-form-input {
    flex: 1;
    max-width: 100%;
  }
}
.input-group {
  display: flex !important;
}
.input-group .input-group-text {
  font-size: inherit;
}

.form-inline {
  display: flex;
  flex-flow: wrap;
  gap: 0.25rem;
}
@media (max-width: 575.98px) {
  .form-inline {
    width: 100%;
    flex-flow: column;
  }
}

/* FLOATING LABELS */
.form-label-group {
  --pb-form-label-group-input-padding-x: 0.75rem;
  --pb-form-label-group-input-padding-y: 0.75rem;
  position: relative;
  margin-bottom: 1rem;
}
.form-label-group > input {
  height: auto;
}
.form-label-group > input, .form-label-group > label {
  padding: var(--pb-form-label-group-input-padding-y) var(--pb-form-label-group-input-padding-x);
}
.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #374151;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: all 0.1s ease-in-out;
  pointer-events: none;
}
.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}
.form-label-group input:-ms-input-placeholder {
  color: transparent;
}
.form-label-group input::-ms-input-placeholder {
  color: transparent;
}
.form-label-group input::-moz-placeholder {
  color: transparent;
}
.form-label-group input::placeholder {
  color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--pb-form-label-group-input-padding-y) + var(--pb-form-label-group-input-padding-x) * 0.6666666667);
  padding-bottom: calc(var(--pb-form-label-group-input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--pb-form-label-group-input-padding-y) / 3);
  padding-bottom: calc(var(--pb-form-label-group-input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}
.form-label-group {
  /* Fallback for Edge  */
}
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}
.form-label-group {
  /* Fallback for IE  */
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}

/* /FLOATING LABELS */
/* INPUT FIELDS */
.input-tiny {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-tiny {
    width: 60px;
  }
  .input-group-prefix-suffix.input-tiny {
    width: calc(60px + 90px);
  }
}
.input-mini {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-mini {
    width: 85px;
  }
  .input-group-prefix-suffix.input-mini {
    width: calc(85px + 90px);
  }
}
.input-small {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-small {
    width: 115px;
  }
  .input-group-prefix-suffix.input-small {
    width: calc(115px + 90px);
  }
}
.input-default {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-default {
    width: 190px;
  }
  .input-group-prefix-suffix.input-default {
    width: calc(190px + 90px);
  }
}
.input-medium {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-medium {
    width: 270px;
  }
  .input-group-prefix-suffix.input-medium {
    width: calc(270px + 90px);
  }
}
.input-large {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-large {
    width: 400px;
  }
  .input-group-prefix-suffix.input-large {
    width: calc(400px + 90px);
  }
}
.input-xlarge {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 576px) {
  .input-xlarge {
    width: 500px;
  }
  .input-group-prefix-suffix.input-xlarge {
    width: calc(500px + 90px);
  }
}
/* /INPUT FIELDS */
/* FORM TEXT FIELDS WITH ICONS */
.has-icons {
  --pb-has-icons-icon-size: 16px;
  position: relative;
  display: inline-block;
}
.has-icons.has-icons-block {
  display: block !important;
}
.has-icons .bi {
  color: #1f2937;
}
.has-icons .hidden {
  visibility: hidden;
}
.has-icons .icon-left, .has-icons .icon-right {
  position: absolute;
  width: var(--pb-has-icons-icon-size);
  height: var(--pb-has-icons-icon-size);
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.has-icons .icon-left:hover, .has-icons .icon-right:hover {
  cursor: pointer;
}
.has-icons .icon-left {
  left: calc(var(--pb-has-icons-icon-size) * 0.75);
}
.has-icons .icon-right {
  right: calc(var(--pb-has-icons-icon-size) * 0.75);
}
.has-icons .has-icon-left {
  padding-left: calc(var(--pb-has-icons-icon-size) * 2.25) !important;
}
.has-icons .has-icon-right {
  padding-right: calc(var(--pb-has-icons-icon-size) * 2.25) !important;
}

/* /FORM TEXT FIELDS WITH ICONS */
/* CUSTOM FORMS */
.form-sign-in {
  width: 100%;
  max-width: 450px;
}
.bootbox-body .form-sign-in {
  max-width: 100%;
}

/* /CUSTOM FORMS */
.form-floating label::after {
  background-color: transparent !important;
}

/* FORM FLOATING STANDARD HEIGHT */
.form-floating-standard > .form-control {
  padding: 0.375rem 0.75rem;
  height: inherit;
  min-height: inherit;
  line-height: inherit;
}
.form-floating-standard > .form-control-plaintext:focus, .form-floating-standard > .form-control-plaintext:not(:placeholder-shown), .form-floating-standard > .form-control:focus, .form-floating-standard > .form-control:not(:placeholder-shown) {
  padding: 0.375rem 0.75rem;
}
.form-floating-standard > .form-control-plaintext ~ label, .form-floating-standard > .form-control:focus ~ label, .form-floating-standard > .form-control:not(:placeholder-shown) ~ label, .form-floating-standard > .form-select ~ label {
  padding: 0 4px;
  top: 0;
  left: 7px;
  line-height: 1;
  height: 20px;
  background-color: #fff;
  opacity: 1;
  color: #4b5563;
}
.form-floating-standard > label {
  padding: 0.375rem 0.75rem;
  color: #4b5563;
}

/* .FORM FLOATING STANDARD HEIGHT */
.password-eye {
  position: relative;
  display: inline-block;
}
.password-eye .icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  cursor: pointer;
  color: #4b5563;
}

.form-floating.password-eye {
  display: block;
}

/* VERTICAL FORMS */
.form-vertical .col-form-label {
  font-size: 1.05rem;
  padding: 0;
}
.form-vertical hr {
  border-top-color: #6b7280;
}

.birthdayPicker {
  display: flex;
  gap: 3px;
}

.form-full-width .form-control:not(.input-full-name):not(.input-localized-numeric), .form-full-width .form-select:not(.input-birthdate), .form-full-width .input-group {
  width: 100% !important;
  margin-bottom: 4px;
}
.form-full-width .birthdayPicker {
  width: 100% !important;
}
.form-full-width .btn {
  width: 100%;
}
.form-full-width .password-eye {
  display: block;
}

.form-contact-us,
.form-user {
  max-width: 600px;
}

/* /VERTICAL FORMS */
.form-steps-header-wrapper {
  background-color: #f3f4f6;
  border-radius: 5px;
  margin-top: 30px;
  margin-bottom: 45px;
  padding: 15px 0 7.5px;
  z-index: -2;
  position: relative;
}

#form-steps-header {
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
  padding: 0;
  margin: 0;
}
#form-steps-header li {
  list-style-type: none;
  text-transform: uppercase;
  font-size: 12px;
  float: left;
  position: relative;
  letter-spacing: 0.7px;
  text-align: center;
}
#form-steps-header.steps-2 li {
  width: 50%;
}
#form-steps-header.steps-3 li {
  width: 33.33%;
}
#form-steps-header.steps-4 li {
  width: 25%;
}
#form-steps-header.steps-5 li {
  width: 20%;
}
#form-steps-header.steps-6 li {
  width: 16.65%;
}
#form-steps-header li:before {
  content: counter(step);
  counter-increment: step;
  width: 32px;
  height: 32px;
  line-height: 32px;
  display: block;
  font-size: 14px;
  color: #fff;
  background: #4b5563;
  border-radius: 32px;
  margin: 0 auto 10px auto;
}
#form-steps-header li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #4b5563;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: -1; /*put it behind the numbers*/
}
#form-steps-header li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}
#form-steps-header li.prev:before,
#form-steps-header li.prev:after {
  background: #1673f5;
  color: #fff;
}
#form-steps-header li.active:before,
#form-steps-header li.active:after {
  background: #6bb913;
  color: #fff;
}

@media (min-width: 1200px) {
  .form-install {
    margin-left: 150px;
    margin-right: 150px;
  }
}
.form-install .col-form-label {
  font-size: 1.1rem;
}
.form-install ul:not(.nav) {
  list-style-type: none;
  position: relative;
  padding-left: 25px;
}
.form-install ul:not(.nav) li:before {
  content: "✓";
  position: absolute;
  left: 5px;
}
.form-install ul:not(.nav) li {
  margin-bottom: 0.5rem;
}
.form-install ul:not(.nav) li li:before {
  content: "o";
}

@media (min-width: 1200px) {
  .form-cart,
  .form-checkout,
  .form-payment {
    margin-left: 100px;
    margin-right: 100px;
  }
}
.form-cart .col-form-label,
.form-checkout .col-form-label,
.form-payment .col-form-label {
  padding-bottom: 0;
}

.form-checkout .form-group {
  margin-bottom: 0 !important;
}
.form-checkout .form-group .subtitle {
  padding-top: 1.2rem;
  margin-bottom: 0.4rem;
}

.form-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
@media (max-width: 991.98px) {
  .form-buttons {
    flex-direction: column;
  }
}
@media (min-width: 992px) {
  .form-buttons .btn:last-child {
    margin-left: auto;
  }
}

.form-check small, .form-group small {
  font-size: 95%;
  color: #4d5358 !important;
}

.input-group {
  display: flex !important;
}
.input-group .input-group-text {
  font-size: inherit;
}

.invalid-pill {
  color: #dc3545;
}
.invalid-pill.active {
  background-color: #dc3545 !important;
  color: #fff;
}

#purchaseForm > div:last-child {
  margin-bottom: 0 !important;
}

.sidebar-row {
  gap: 0.625rem; /* space between icon and text */
}

.is-invalid .input-group-text {
  border-color: #dc3545;
  color: #bd2130;
}

.form-listing {
  --pb-form-listing-setup-sidebar-sticky-top: 30px;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
  position: relative;
}
@media (max-width: 991.98px) {
  .form-listing {
    display: block;
  }
  .form-listing .left-sidebar {
    display: none;
  }
}
.form-listing .elements {
  background-color: var(--pb-form-listing-elements-background-color, #fff);
}
.form-listing .elements .form-group:not(:first-child) .subtitle {
  margin-top: 1rem;
}
.form-listing .setup-sidebar {
  position: sticky;
  top: var(--pb-form-listing-setup-sidebar-sticky-top);
  align-self: start;
  overflow: hidden;
  margin-top: 20px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .form-listing .setup-sidebar {
    display: none;
  }
}
.form-listing .setup-sidebar .section-errors,
.form-listing .setup-sidebar .section-errors a {
  color: #dc3545 !important;
}
.form-listing .setup-sidebar .section-errors .setup-sidebar-icon {
  background-color: #bd2130 !important;
  color: #fff !important;
}
.form-listing .setup-sidebar .nav-item {
  position: relative;
  padding-bottom: 1.5rem;
}
.form-listing .setup-sidebar .nav-item .setup-sidebar-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem; /* prevents shrinking in flex */
  border-radius: 999px; /* fully rounded */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6; /* chip background */
  color: #1f2937; /* icon color */
  line-height: 1;
  z-index: 2;
}
.form-listing .setup-sidebar .nav-item .setup-sidebar-icon i {
  font-size: 1.15rem;
  line-height: 1;
}
.form-listing .setup-sidebar .nav-item .vertical-line {
  position: absolute;
  background-color: #d1d5db;
  width: 1px;
  height: 100%;
  margin-left: -1px;
  top: 1.5rem;
  left: 1.25rem;
}
.form-listing .setup-sidebar .nav-item .circle {
  background-color: #fff;
  border: 0.125rem solid #d1d5db;
  border-radius: 9999px;
  width: 1.5rem;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2;
}
.form-listing .setup-sidebar .nav-item.listing-active .setup-sidebar-icon {
  background: #e5e7eb;
}
.form-listing .setup-sidebar .nav-item.listing-active .sidebar-link {
  font-weight: 600;
}
.form-listing .setup-sidebar .nav-item:last-child {
  padding-bottom: 0;
}
.form-listing .setup-sidebar .nav-link {
  margin-left: 0.5rem;
  color: rgba(33, 37, 41, 0.65);
  padding: 0;
  line-height: 1.2;
  font-size: 0.9rem;
}
.form-listing .setup-sidebar .nav-link.active {
  font-weight: 600;
}
@media (min-width: 992px) {
  .form-listing .section-title {
    margin: 0 20px 10px;
  }
  .form-listing .elements {
    padding: 10px 20px 20px 20px;
    border-radius: 10px;
  }
  .form-listing .form-buttons {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.form-listing .listing-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border: 2px dotted #374151;
  border-radius: 5px;
}
.form-listing .listing-uploader .fileinput-button span {
  text-wrap: nowrap;
}
.form-listing .listing-uploader .fileinput-desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.form-listing .listing-uploader-thumbs {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 5px;
}
.form-listing .listing-uploader-thumbs .alert {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}
.form-listing .listing-uploader-thumbs .jq-thumbs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-listing .listing-uploader-thumbs .jq-thumbs .jq-thumb {
  margin: 0 !important;
  padding: 0 0 0.5rem;
}
.form-listing .listing-uploader-thumbs .jq-thumbs .jq-thumb .img-md {
  width: 128px !important;
  height: 128px !important;
}
.form-listing .listing-uploader-thumbs .click-and-drag {
  color: #4b5563;
  margin-top: 0.25rem;
  font-size: 0.825rem;
}
.form-listing .location-group {
  border-radius: 4px;
  background-color: #fefefe;
}
.form-listing :target {
  scroll-margin-top: var(--pb-form-listing-setup-sidebar-sticky-top);
}

.location-group h6 {
  font-size: 1.05rem;
}
.location-group {
  margin: 0 -8px 8px -8px;
  padding: 8px;
}

/* Subsection toggle styles */
.toggle-subsection {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}
.toggle-subsection:hover {
  opacity: 0.7;
}
.toggle-subsection i {
  font-size: 1.2rem;
}

.subsection-minimized {
  color: #495057;
  font-style: italic;
  margin-left: 0.5rem;
}

.subsection-expanded {
  display: none;
}

/* @version 10.0 [rev.01] */
.sidebar-layout {
  display: grid;
  --pb-grid-gap: 1rem;
  --pb-grid-sidebar-width: var(--pb-sidebar-width, 250px);
  --pb-grid-main-width: 1fr;
  --pb-grid-column-padding: 1rem;
  --pb-grid-padding: 0;
  --pb-grid-align-items: auto;
  --pb-grid-background-color: transparent;
  grid-template-columns: var(--pb-grid-sidebar-width) var(--pb-grid-main-width);
  grid-template-rows: auto 1fr;
  grid-template-areas: "sidebar content";
  gap: var(--pb-grid-gap);
  align-items: var(--pb-grid-align-items);
}
@media (max-width: 991.98px) {
  .sidebar-layout {
    display: block;
  }
}
.sidebar-layout .sidebar {
  grid-area: sidebar;
  --pb-grid-sidebar-padding-x: var(--pb-grid-padding);
  --pb-grid-sidebar-padding-y: var(--pb-grid-padding);
  --pb-grid-sidebar-background-color: var(--pb-grid-background-color);
  --pb-grid-sidebar-border-radius: var(--pb-border-radius);
  --pb-grid-sidebar-z-index: 1;
  padding: var(--pb-grid-sidebar-padding-y) var(--pb-grid-sidebar-padding-x);
  background-color: var(--pb-grid-sidebar-background-color);
  border-radius: var(--pb-grid-sidebar-border-radius);
  z-index: var(--pb-grid-sidebar-z-index);
}
.sidebar-layout .main {
  grid-area: content;
  --pb-grid-main-padding-x: var(--pb-grid-padding);
  --pb-grid-main-padding-y: var(--pb-grid-padding);
  --pb-grid-main-background-color: var(--pb-grid-background-color);
  --pb-grid-main-border-radius: var(--pb-grid-border-radius);
  --pb-grid-main-z-index: 1;
  padding: var(--pb-grid-main-padding-y) var(--pb-grid-main-padding-x);
  background-color: var(--pb-grid-main-background-color);
  border-radius: var(--pb-border-radius);
  z-index: var(--pb-grid-main-z-index);
}

/** @version 10.0 [rev.01] */
/* GLYPHICONS */
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../../fonts/glyphicons-halflings-regular.eot");
  src: url("../../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-asterisk:before {
  content: "*";
}

.glyphicon-plus:before {
  content: "+";
}

.glyphicon-euro:before,
.glyphicon-eur:before {
  content: "€";
}

.glyphicon-minus:before {
  content: "−";
}

.glyphicon-cloud:before {
  content: "☁";
}

.glyphicon-envelope:before {
  content: "✉";
}

.glyphicon-pencil:before {
  content: "✏";
}

.glyphicon-glass:before {
  content: "\e001";
}

.glyphicon-music:before {
  content: "\e002";
}

.glyphicon-search:before {
  content: "\e003";
}

.glyphicon-heart:before {
  content: "\e005";
}

.glyphicon-star:before {
  content: "\e006";
}

.glyphicon-star-empty:before {
  content: "\e007";
}

.glyphicon-user:before {
  content: "\e008";
}

.glyphicon-film:before {
  content: "\e009";
}

.glyphicon-th-large:before {
  content: "\e010";
}

.glyphicon-th:before {
  content: "\e011";
}

.glyphicon-th-list:before {
  content: "\e012";
}

.glyphicon-ok:before {
  content: "\e013";
}

.glyphicon-remove:before {
  content: "\e014";
}

.glyphicon-zoom-in:before {
  content: "\e015";
}

.glyphicon-zoom-out:before {
  content: "\e016";
}

.glyphicon-off:before {
  content: "\e017";
}

.glyphicon-signal:before {
  content: "\e018";
}

.glyphicon-cog:before {
  content: "\e019";
}

.glyphicon-trash:before {
  content: "\e020";
}

.glyphicon-home:before {
  content: "\e021";
}

.glyphicon-file:before {
  content: "\e022";
}

.glyphicon-time:before {
  content: "\e023";
}

.glyphicon-road:before {
  content: "\e024";
}

.glyphicon-download-alt:before {
  content: "\e025";
}

.glyphicon-download:before {
  content: "\e026";
}

.glyphicon-upload:before {
  content: "\e027";
}

.glyphicon-inbox:before {
  content: "\e028";
}

.glyphicon-play-circle:before {
  content: "\e029";
}

.glyphicon-repeat:before {
  content: "\e030";
}

.glyphicon-refresh:before {
  content: "\e031";
}

.glyphicon-list-alt:before {
  content: "\e032";
}

.glyphicon-lock:before {
  content: "\e033";
}

.glyphicon-flag:before {
  content: "\e034";
}

.glyphicon-headphones:before {
  content: "\e035";
}

.glyphicon-volume-off:before {
  content: "\e036";
}

.glyphicon-volume-down:before {
  content: "\e037";
}

.glyphicon-volume-up:before {
  content: "\e038";
}

.glyphicon-qrcode:before {
  content: "\e039";
}

.glyphicon-barcode:before {
  content: "\e040";
}

.glyphicon-tag:before {
  content: "\e041";
}

.glyphicon-tags:before {
  content: "\e042";
}

.glyphicon-book:before {
  content: "\e043";
}

.glyphicon-bookmark:before {
  content: "\e044";
}

.glyphicon-print:before {
  content: "\e045";
}

.glyphicon-camera:before {
  content: "\e046";
}

.glyphicon-font:before {
  content: "\e047";
}

.glyphicon-bold:before {
  content: "\e048";
}

.glyphicon-italic:before {
  content: "\e049";
}

.glyphicon-text-height:before {
  content: "\e050";
}

.glyphicon-text-width:before {
  content: "\e051";
}

.glyphicon-align-left:before {
  content: "\e052";
}

.glyphicon-align-center:before {
  content: "\e053";
}

.glyphicon-align-right:before {
  content: "\e054";
}

.glyphicon-align-justify:before {
  content: "\e055";
}

.glyphicon-list:before {
  content: "\e056";
}

.glyphicon-indent-left:before {
  content: "\e057";
}

.glyphicon-indent-right:before {
  content: "\e058";
}

.glyphicon-facetime-video:before {
  content: "\e059";
}

.glyphicon-picture:before {
  content: "\e060";
}

.glyphicon-map-marker:before {
  content: "\e062";
}

.glyphicon-adjust:before {
  content: "\e063";
}

.glyphicon-tint:before {
  content: "\e064";
}

.glyphicon-edit:before {
  content: "\e065";
}

.glyphicon-share:before {
  content: "\e066";
}

.glyphicon-check:before {
  content: "\e067";
}

.glyphicon-move:before {
  content: "\e068";
}

.glyphicon-step-backward:before {
  content: "\e069";
}

.glyphicon-fast-backward:before {
  content: "\e070";
}

.glyphicon-backward:before {
  content: "\e071";
}

.glyphicon-play:before {
  content: "\e072";
}

.glyphicon-pause:before {
  content: "\e073";
}

.glyphicon-stop:before {
  content: "\e074";
}

.glyphicon-forward:before {
  content: "\e075";
}

.glyphicon-fast-forward:before {
  content: "\e076";
}

.glyphicon-step-forward:before {
  content: "\e077";
}

.glyphicon-eject:before {
  content: "\e078";
}

.glyphicon-chevron-left:before {
  content: "\e079";
}

.glyphicon-chevron-right:before {
  content: "\e080";
}

.glyphicon-plus-sign:before {
  content: "\e081";
}

.glyphicon-minus-sign:before {
  content: "\e082";
}

.glyphicon-remove-sign:before {
  content: "\e083";
}

.glyphicon-ok-sign:before {
  content: "\e084";
}

.glyphicon-question-sign:before {
  content: "\e085";
}

.glyphicon-info-sign:before {
  content: "\e086";
}

.glyphicon-screenshot:before {
  content: "\e087";
}

.glyphicon-remove-circle:before {
  content: "\e088";
}

.glyphicon-ok-circle:before {
  content: "\e089";
}

.glyphicon-ban-circle:before {
  content: "\e090";
}

.glyphicon-arrow-left:before {
  content: "\e091";
}

.glyphicon-arrow-right:before {
  content: "\e092";
}

.glyphicon-arrow-up:before {
  content: "\e093";
}

.glyphicon-arrow-down:before {
  content: "\e094";
}

.glyphicon-share-alt:before {
  content: "\e095";
}

.glyphicon-resize-full:before {
  content: "\e096";
}

.glyphicon-resize-small:before {
  content: "\e097";
}

.glyphicon-exclamation-sign:before {
  content: "\e101";
}

.glyphicon-gift:before {
  content: "\e102";
}

.glyphicon-leaf:before {
  content: "\e103";
}

.glyphicon-fire:before {
  content: "\e104";
}

.glyphicon-eye-open:before {
  content: "\e105";
}

.glyphicon-eye-close:before {
  content: "\e106";
}

.glyphicon-warning-sign:before {
  content: "\e107";
}

.glyphicon-plane:before {
  content: "\e108";
}

.glyphicon-calendar:before {
  content: "\e109";
}

.glyphicon-random:before {
  content: "\e110";
}

.glyphicon-comment:before {
  content: "\e111";
}

.glyphicon-magnet:before {
  content: "\e112";
}

.glyphicon-chevron-up:before {
  content: "\e113";
}

.glyphicon-chevron-down:before {
  content: "\e114";
}

.glyphicon-retweet:before {
  content: "\e115";
}

.glyphicon-shopping-cart:before {
  content: "\e116";
}

.glyphicon-folder-close:before {
  content: "\e117";
}

.glyphicon-folder-open:before {
  content: "\e118";
}

.glyphicon-resize-vertical:before {
  content: "\e119";
}

.glyphicon-resize-horizontal:before {
  content: "\e120";
}

.glyphicon-hdd:before {
  content: "\e121";
}

.glyphicon-bullhorn:before {
  content: "\e122";
}

.glyphicon-bell:before {
  content: "\e123";
}

.glyphicon-certificate:before {
  content: "\e124";
}

.glyphicon-thumbs-up:before {
  content: "\e125";
}

.glyphicon-thumbs-down:before {
  content: "\e126";
}

.glyphicon-hand-right:before {
  content: "\e127";
}

.glyphicon-hand-left:before {
  content: "\e128";
}

.glyphicon-hand-up:before {
  content: "\e129";
}

.glyphicon-hand-down:before {
  content: "\e130";
}

.glyphicon-circle-arrow-right:before {
  content: "\e131";
}

.glyphicon-circle-arrow-left:before {
  content: "\e132";
}

.glyphicon-circle-arrow-up:before {
  content: "\e133";
}

.glyphicon-circle-arrow-down:before {
  content: "\e134";
}

.glyphicon-globe:before {
  content: "\e135";
}

.glyphicon-wrench:before {
  content: "\e136";
}

.glyphicon-tasks:before {
  content: "\e137";
}

.glyphicon-filter:before {
  content: "\e138";
}

.glyphicon-briefcase:before {
  content: "\e139";
}

.glyphicon-fullscreen:before {
  content: "\e140";
}

.glyphicon-dashboard:before {
  content: "\e141";
}

.glyphicon-paperclip:before {
  content: "\e142";
}

.glyphicon-heart-empty:before {
  content: "\e143";
}

.glyphicon-link:before {
  content: "\e144";
}

.glyphicon-phone:before {
  content: "\e145";
}

.glyphicon-pushpin:before {
  content: "\e146";
}

.glyphicon-usd:before {
  content: "\e148";
}

.glyphicon-gbp:before {
  content: "\e149";
}

.glyphicon-sort:before {
  content: "\e150";
}

.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}

.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}

.glyphicon-sort-by-order:before {
  content: "\e153";
}

.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}

.glyphicon-sort-by-attributes:before {
  content: "\e155";
}

.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}

.glyphicon-unchecked:before {
  content: "\e157";
}

.glyphicon-expand:before {
  content: "\e158";
}

.glyphicon-collapse-down:before {
  content: "\e159";
}

.glyphicon-collapse-up:before {
  content: "\e160";
}

.glyphicon-log-in:before {
  content: "\e161";
}

.glyphicon-flash:before {
  content: "\e162";
}

.glyphicon-log-out:before {
  content: "\e163";
}

.glyphicon-new-window:before {
  content: "\e164";
}

.glyphicon-record:before {
  content: "\e165";
}

.glyphicon-save:before {
  content: "\e166";
}

.glyphicon-open:before {
  content: "\e167";
}

.glyphicon-saved:before {
  content: "\e168";
}

.glyphicon-import:before {
  content: "\e169";
}

.glyphicon-export:before {
  content: "\e170";
}

.glyphicon-send:before {
  content: "\e171";
}

.glyphicon-floppy-disk:before {
  content: "\e172";
}

.glyphicon-floppy-saved:before {
  content: "\e173";
}

.glyphicon-floppy-remove:before {
  content: "\e174";
}

.glyphicon-floppy-save:before {
  content: "\e175";
}

.glyphicon-floppy-open:before {
  content: "\e176";
}

.glyphicon-credit-card:before {
  content: "\e177";
}

.glyphicon-transfer:before {
  content: "\e178";
}

.glyphicon-cutlery:before {
  content: "\e179";
}

.glyphicon-header:before {
  content: "\e180";
}

.glyphicon-compressed:before {
  content: "\e181";
}

.glyphicon-earphone:before {
  content: "\e182";
}

.glyphicon-phone-alt:before {
  content: "\e183";
}

.glyphicon-tower:before {
  content: "\e184";
}

.glyphicon-stats:before {
  content: "\e185";
}

.glyphicon-sd-video:before {
  content: "\e186";
}

.glyphicon-hd-video:before {
  content: "\e187";
}

.glyphicon-subtitles:before {
  content: "\e188";
}

.glyphicon-sound-stereo:before {
  content: "\e189";
}

.glyphicon-sound-dolby:before {
  content: "\e190";
}

.glyphicon-sound-5-1:before {
  content: "\e191";
}

.glyphicon-sound-6-1:before {
  content: "\e192";
}

.glyphicon-sound-7-1:before {
  content: "\e193";
}

.glyphicon-copyright-mark:before {
  content: "\e194";
}

.glyphicon-registration-mark:before {
  content: "\e195";
}

.glyphicon-cloud-download:before {
  content: "\e197";
}

.glyphicon-cloud-upload:before {
  content: "\e198";
}

.glyphicon-tree-conifer:before {
  content: "\e199";
}

.glyphicon-tree-deciduous:before {
  content: "\e200";
}

.glyphicon-cd:before {
  content: "\e201";
}

.glyphicon-save-file:before {
  content: "\e202";
}

.glyphicon-open-file:before {
  content: "\e203";
}

.glyphicon-level-up:before {
  content: "\e204";
}

.glyphicon-copy:before {
  content: "\e205";
}

.glyphicon-paste:before {
  content: "\e206";
}

.glyphicon-alert:before {
  content: "\e209";
}

.glyphicon-equalizer:before {
  content: "\e210";
}

.glyphicon-king:before {
  content: "\e211";
}

.glyphicon-queen:before {
  content: "\e212";
}

.glyphicon-pawn:before {
  content: "\e213";
}

.glyphicon-bishop:before {
  content: "\e214";
}

.glyphicon-knight:before {
  content: "\e215";
}

.glyphicon-baby-formula:before {
  content: "\e216";
}

.glyphicon-tent:before {
  content: "⛺";
}

.glyphicon-blackboard:before {
  content: "\e218";
}

.glyphicon-bed:before {
  content: "\e219";
}

.glyphicon-apple:before {
  content: "\f8ff";
}

.glyphicon-erase:before {
  content: "\e221";
}

.glyphicon-hourglass:before {
  content: "⌛";
}

.glyphicon-lamp:before {
  content: "\e223";
}

.glyphicon-duplicate:before {
  content: "\e224";
}

.glyphicon-piggy-bank:before {
  content: "\e225";
}

.glyphicon-scissors:before {
  content: "\e226";
}

.glyphicon-bitcoin:before {
  content: "\e227";
}

.glyphicon-btc:before {
  content: "\e227";
}

.glyphicon-xbt:before {
  content: "\e227";
}

.glyphicon-yen:before {
  content: "¥";
}

.glyphicon-jpy:before {
  content: "¥";
}

.glyphicon-ruble:before {
  content: "₽";
}

.glyphicon-rub:before {
  content: "₽";
}

.glyphicon-scale:before {
  content: "\e230";
}

.glyphicon-ice-lolly:before {
  content: "\e231";
}

.glyphicon-ice-lolly-tasted:before {
  content: "\e232";
}

.glyphicon-education:before {
  content: "\e233";
}

.glyphicon-option-horizontal:before {
  content: "\e234";
}

.glyphicon-option-vertical:before {
  content: "\e235";
}

.glyphicon-menu-hamburger:before {
  content: "\e236";
}

.glyphicon-modal-window:before {
  content: "\e237";
}

.glyphicon-oil:before {
  content: "\e238";
}

.glyphicon-grain:before {
  content: "\e239";
}

.glyphicon-sunglasses:before {
  content: "\e240";
}

.glyphicon-text-size:before {
  content: "\e241";
}

.glyphicon-text-color:before {
  content: "\e242";
}

.glyphicon-text-background:before {
  content: "\e243";
}

.glyphicon-object-align-top:before {
  content: "\e244";
}

.glyphicon-object-align-bottom:before {
  content: "\e245";
}

.glyphicon-object-align-horizontal:before {
  content: "\e246";
}

.glyphicon-object-align-left:before {
  content: "\e247";
}

.glyphicon-object-align-vertical:before {
  content: "\e248";
}

.glyphicon-object-align-right:before {
  content: "\e249";
}

.glyphicon-triangle-right:before {
  content: "\e250";
}

.glyphicon-triangle-left:before {
  content: "\e251";
}

.glyphicon-triangle-bottom:before {
  content: "\e252";
}

.glyphicon-triangle-top:before {
  content: "\e253";
}

.glyphicon-console:before {
  content: "\e254";
}

.glyphicon-superscript:before {
  content: "\e255";
}

.glyphicon-subscript:before {
  content: "\e256";
}

.glyphicon-menu-left:before {
  content: "\e257";
}

.glyphicon-menu-right:before {
  content: "\e258";
}

.glyphicon-menu-down:before {
  content: "\e259";
}

.glyphicon-menu-up:before {
  content: "\e260";
}

/* @version 10.0 [rev.01] */
:root {
  --pb-icon-size-md: 1rem;
  --pb-icon-size-sm: 0.875rem;
  --pb-icon-size-lg: 1.5rem;
}

/* FEATHER */
.feather {
  width: var(--pb-icon-size-md);
  height: var(--pb-icon-size-md);
  vertical-align: middle;
}
.feather.feather-lg {
  width: var(--pb-icon-size-lg);
  height: var(--pb-icon-size-lg);
}
.feather.feather-sm, small .feather, .btn-sm .feather {
  width: var(--pb-icon-size-sm);
  height: var(--pb-icon-size-sm);
}

/* /FEATHER */
/* BI */
.btn .bi {
  font-size: var(--pb-icon-size-md);
  line-height: 1;
}
.btn.btn-sm .bi, dt .bi {
  font-size: var(--pb-icon-size-sm);
  line-height: 1;
}

/* /BI */
/* USER REPUTATION STARS */
.star-yellow {
  color: var(--pb-color-yellow);
}
.star-green {
  color: var(--pb-color-green);
}
.star-blue {
  color: var(--pb-color-blue);
}
.star-red {
  color: var(--pb-color-red);
}
.star-gold {
  color: var(--pb-color-gold-600);
}

/* /USER REPUTATION STARS */
/* @version 10.0 [rev.01] */
:root {
  --pb-thumbnail-img-background-color: var(--pb-color-white);
  --pb-img-xs-width: 24px;
  --pb-img-xs-height: 24px;
  --pb-img-sm-width: 64px;
  --pb-img-sm-height: 64px;
  --pb-img-md-width: 96px;
  --pb-img-md-height: 96px;
  --pb-img-lg-width: 128px;
  --pb-img-lg-height: 128px;
  --pb-jq-thumb-gap: 0.5rem;
  --pb-jq-thumb-padding: 0.5rem;
  --pb-jq-thumb-border-radius: 0.25rem;
  --pb-jq-thumb-delete-offset: 1rem;
  --pb-jq-thumb-border-color: var(--pb-color-gray-100);
  --pb-media-aspect-ratio: 1 / 1;
}

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

/* IMAGE RETINA DISPLAY CLASSES */
.img-xs {
  width: var(--pb-img-xs-width) !important;
  height: var(--pb-img-xs-height) !important;
}

.img-sm {
  width: var(--pb-img-sm-width) !important;
  height: var(--pb-img-sm-height) !important;
}

.img-md {
  width: var(--pb-img-md-width) !important;
  height: var(--pb-img-md-height) !important;
}

.img-lg {
  width: var(--pb-img-lg-width) !important;
  height: var(--pb-img-lg-height) !important;
}

/* /IMAGE RETINA DISPLAY CLASSES */
/* MEDIA THUMBNAIL DIVS */
.jq-thumbs {
  overflow: hidden;
  gap: var(--pb-jq-thumbs-gap);
}
.jq-thumbs.ui-sortable .jq-thumb {
  cursor: move;
}

.jq-thumb {
  overflow: hidden;
  float: left;
  padding: var(--pb-jq-thumb-padding);
  border: 1px solid var(--pb-jq-thumb-border-color);
  border-radius: var(--pb-jq-thumb-border-radius);
  text-align: center;
}
.jq-thumb .jq-thumb-delete {
  margin-top: var(--pb-jq-thumb-delete-offset);
  text-align: center;
  cursor: pointer;
  display: block;
}

/* /MEDIA THUMBNAIL DIVS */
.listing-details .carousel-item, .listing-details .card-img, .listing-card .carousel-item, .listing-card .card-img, .store-card .carousel-item, .store-card .card-img, .listing-list .carousel-item, .listing-list .card-img, .event-card .carousel-item, .event-card .card-img {
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--pb-media-aspect-ratio); /* aspect ratio */
}
.listing-details img, .listing-card img, .store-card img, .listing-list img, .event-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
  background-color: var(--pb-thumbnail-img-background-color);
}

/* @version 10.0 [rev.01] */
/* LISTS RESET */
ul {
  display: block;
  list-style-type: disc;
  margin: 0 0 1em;
  padding-left: 40px;
}

ol {
  display: block;
  list-style-type: decimal;
  margin: 0 0 1em;
  padding-left: 40px;
}

ul ul, ol ul {
  list-style-type: circle;
  padding-left: 20px;
  margin-top: 1em;
  margin-bottom: 1em;
}

ol ol, ul ol {
  list-style-type: lower-roman;
  padding-left: 20px;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* /LISTS RESET */
/* DEFINITION LISTS */
/* definition list with variable title width */
.dl-variable {
  max-width: 500px;
  overflow: auto;
  margin: 0;
}
.dl-variable dt {
  float: left;
  clear: left;
  line-height: 1.4;
  font-weight: 500;
}
.dl-variable dt .feather {
  width: 14px;
  height: 14px;
}
.dl-variable dt span:after {
  content: ":";
}
.dl-variable dd {
  display: table-cell;
  padding-left: 0.5rem;
  padding-bottom: 0.25rem;
  line-height: 1.4;
}

.dl-condensed {
  margin-bottom: 0;
}
.dl-condensed dt {
  padding-right: 0.25rem;
}
.dl-condensed dd {
  display: inherit;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* large definition list */
.dl-lg dt .feather,
.dt-lg dt .feather {
  width: 24px;
  height: 24px;
}

.dl-lg dd {
  font-size: 1rem;
}

/* /large definition list */
.dl-indented dd {
  margin-left: 0.25rem;
  margin-bottom: 0.5rem;
}

dl dt {
  font-weight: 700;
}

@media (min-width: 992px) {
  .dl-flex dt {
    flex: 0 1 var(--pb-dl-flex-dt-width, var(--pb-flex-label-width));
  }
  .dl-flex dd {
    flex: 1;
    max-width: 100%;
  }
}
/* @version 10.0 [rev.02] */
/* SIDEBAR (GLOBAL) */
.sidebar {
  --pb-sidebar-height: calc(100vh - var(--pb-navbar-height));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform: translateX(-100%);
  box-shadow: none;
  position: var(--pb-sidebar-position, fixed);
  top: var(--pb-sidebar-top, 0);
  left: var(--pb-siderbar-left, 0);
  width: var(--pb-sidebar-width);
  height: var(--pb-sidebar-height);
  overflow-x: hidden;
  overflow-y: hidden;
}
.sidebar.border-right {
  border-right: var(--pb-sidebar-border-right, 1px solid var(--pb-color-rgba-black-10));
}
.sidebar {
  color: var(--pb-sidebar-color, #000);
  background-color: var(--pb-sidebar-bg, var(--pb-color-white));
  z-index: 1010;
}
.sidebar.sidebar-right {
  right: 0;
  left: auto;
  transform: translateX(100%);
}
.sidebar:not(.show) {
  --pb-sidebar-height: 0;
}
.sidebar.show {
  transform: translateX(0) !important;
  box-shadow: 1px 0 15px 1px rgba(0, 0, 0, 0.1);
}
.sidebar.sidebar-fixed-desktop > .heading, .sidebar.sidebar-fixed-mobile > .heading {
  padding-top: 0.5rem;
  position: sticky;
  top: 0;
  background-color: var(--pb-sidebar-bg, var(--pb-color-rgba-white-80));
  z-index: 1;
}
.sidebar.sidebar-fixed-desktop, .sidebar.sidebar-fixed-mobile {
  --pb-sidebar-top: 0;
  --pb-sidebar-height: 0;
  --pb-sidebar-position: fixed;
}
.sidebar.sidebar-fixed-desktop .sidebar-menu > .heading, .sidebar.sidebar-fixed-mobile .sidebar-menu > .heading {
  display: none;
}
.sidebar.sidebar-fixed-desktop, .sidebar.sidebar-fixed-mobile {
  overflow-y: auto;
}
.sidebar.sidebar-fixed-desktop.show, .sidebar.sidebar-fixed-mobile.show {
  --pb-sidebar-height: 100vh;
}
@media (min-width: 992px) {
  .sidebar.sidebar-fixed-desktop.show, .sidebar.sidebar-fixed-mobile.show {
    --pb-sidebar-width: 400px;
    box-shadow: 1px 0 5px 1px var(--pb-color-rgba-black-10);
    padding-right: 1.5rem;
  }
}
@media (max-width: 991.98px) {
  .sidebar.sidebar-fixed-desktop.show, .sidebar.sidebar-fixed-mobile.show {
    --pb-sidebar-width: 85vw;
  }
}
@media (max-width: 991.98px) {
  .sidebar.sidebar-fixed-mobile {
    position: fixed;
    z-index: 1020;
    background-color: var(--pb-color-white);
    border-radius: 0;
  }
  .sidebar.sidebar-fixed-mobile.show {
    padding: 0 1rem 1rem;
  }
}
@media (min-width: 992px) {
  .sidebar.sidebar-fixed-desktop {
    position: fixed;
    padding: 0 1rem 1rem;
    z-index: 1020;
  }
  .sidebar.sidebar-visible-desktop {
    transform: translateX(0);
    --pb-sidebar-height: auto;
  }
}
.sidebar .sidebar-heading {
  cursor: pointer;
  font-size: var(--pb-sidebar-heading-font-size);
  font-weight: var(--pb-sidebar-heading-font-weight, var(--pb-font-weight-medium));
  padding: var(--pb-sidebar-heading-padding-y, 0.25rem) var(--pb-sidebar-heading-padding-x, 0.5rem);
  margin-bottom: var(--pb-sidebar-heading-margin-bottom, 0.25rem);
  color: var(--pb-sidebar-heading-color, var(--pb-color-gray-800));
  gap: var(--pb-sidebar-heading-gap, 0.5rem);
}
.sidebar .sidebar-heading .bi {
  color: var(--pb-sidebar-heading-icon-color, var(--pb-color-gray-400));
  font-size: var(--pb-sidebar-heading-icon-font-size, 1rem);
}
.sidebar .sidebar-heading.open .bi {
  color: var(--pb-sidebar-heading-open-icon-color, var(--pb-color-primary));
}
.sidebar .sidebar-heading .icon-animate .bi {
  transition: 0.25s linear;
  transform: rotate(0deg);
}
.sidebar .sidebar-heading.open .icon-animate .bi {
  transform: rotate(-90deg);
}
.sidebar .sidebar-heading .sidebar-heading-label {
  flex-grow: 2;
}
.sidebar ul {
  padding: 0;
  list-style: none;
}
.sidebar .sidebar-menu > ul {
  padding-left: var(--pb-sidebar-menu-ul-padding-left, 0);
  margin-bottom: var(--pb-sidebar-menu-ul-margin-bottom, 0.5rem);
}
.sidebar .sidebar-menu li > ul {
  margin: 0 0 0 var(--pb-sidebar-menu-li-ul-margin-left, -0.25rem);
  padding-left: var(--pb-sidebar-menu-li-ul-padding-left, 0.25rem);
}
.sidebar .nav-item.open > a,
.sidebar .nav-item > a:hover {
  color: var(--pb-sidebar-menu-link-color-hover, var(--pb-color-primary));
}
.sidebar .nav-link {
  padding: var(--pb-sidebar-nav-link-padding, 0.4rem);
  line-height: var(--pb-sidebar-nav-link-line-height, 1.2);
  font-size: var(--pb-sidebar-nav-link-font-size);
  font-weight: var(--pb-sidebar-nav-link-font-weight, var(--pb-font-weight-light));
  color: var(--pb-sidebar-nav-link-color, var(--pb-color-gray-700));
}
.sidebar .nav-link.active {
  color: var(--pb-sidebar-nav-link-active-color, var(--pb-color-primary));
  background-color: var(--pb-sidebar-nav-link-active-bg);
  border-radius: var(--pb-sidebar-nav-link-active-border-radius, 0.25rem);
}
.sidebar .nav-link .bi {
  color: var(--pb-sidebar-chevron-icon-color, var(--pb-color-gray-400));
  margin-right: var(--pb-sidebar-chevron-icon-margin-right, 0.25rem);
  transition: 0.25s linear;
  transform: rotate(0deg);
}
.sidebar .nav-link.open .bi {
  transform: rotate(-90deg);
}
.sidebar .nav-dropdown > .nav-link {
  color: var(--pb-sidebar-submenu-nav-link-color, var(--pb-color-gray-800));
  font-weight: var(--pb-sidebar-submenu-nav-link-font-weight, 400);
}

/* /SIDEBAR */
.navbar-inline-filter {
  display: flex;
  justify-content: end;
  padding: 0;
  margin-bottom: var(--pb-navbar-inline-filter-mb, 1rem);
}
.navbar-inline-filter .form-inline {
  justify-content: flex-end !important;
}
.navbar-inline-filter.navbar-inline-filter-hidden-mobile .btn-filter {
  display: none;
}
@media (max-width: 575.98px) {
  .navbar-inline-filter.navbar-inline-filter-hidden-mobile .form-inline {
    opacity: 0;
    height: 0;
    z-index: -1;
  }
  .navbar-inline-filter.navbar-inline-filter-hidden-mobile .form-inline-visible {
    opacity: 1;
    height: auto;
    z-index: 1;
    transition-timing-function: ease-in;
    transition: 0.5s;
  }
  .navbar-inline-filter.navbar-inline-filter-hidden-mobile .btn-filter {
    display: inline-flex;
    width: 100%;
    margin-bottom: 1rem;
    box-shadow: 0 1px 1px rgba(226, 226, 230, 0.5);
    border-color: #e5e7eb;
  }
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--pb-nav-pills-active-bg, var(--pb-color-primary));
}

.nav-link, .nav-link:focus, .nav-link:hover {
  color: var(--pb-nav-link-color, var(--pb-color-primary));
}

/* SIDEBAR SEARCH */
.sidebar-search .nav-item > .label {
  display: block;
  font-weight: var(--pb-sidebar-search-nav-item-label-font-weight, var(--pb-font-weight-medium));
  color: var(--pb-sidebar-search-nav-item-label-color, var(--pb-color-gray-700));
  margin-bottom: var(--pb-sidebar-search-nav-item-label-margin-bottom, 0.15rem);
}
.sidebar-search .nav-item:not(:last-child) {
  margin-bottom: var(--pb-sidebar-search-nav-item-margin-bottom, 0.75rem);
}
.sidebar-search .nav-item > div {
  padding: 0;
  max-height: 30rem;
  overflow-y: auto;
}
.sidebar-search .form-check {
  padding-top: 0;
}

/* /SIDEBAR SEARCH */
/* SIDEBAR BACKDROP (MOBILE) */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  opacity: 0;
}
@media (max-width: 575.98px) {
  .sidebar-backdrop.show {
    opacity: 0.5;
    background-color: var(--pb-sidebar-backdrop-bg, #000);
    z-index: 10;
    transition: opacity 0.25s;
  }
}

/* SIDEBAR BACKDROP (MOBILE) */
.filtered-by {
  display: inline-block;
  padding: 3px 5px;
  background-color: #fafafa;
  color: var(--pb-filtered-by-color, var(--pb-color-gray-800));
  margin-bottom: 0.25rem;
  font-size: var(--pb-filtered-by-font-size, var(--pb-font-size-90));
  border-radius: 3px;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}

.categories-breadcrumb {
  --pb-categories-breadcrumb-font-size: var(--pb-font-size-sm);
  font-size: var(--pb-categories-breadcrumb-font-size);
  background-color: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
}
.categories-breadcrumb .breadcrumb-item {
  color: var(--pb-categories-breadcrumb-breadcrumb-item-color, var(--pb-color-gray-500));
}
.categories-breadcrumb .breadcrumb-item a {
  color: var(--pb-categories-breadcrumb-breadcrumb-item-link-color, var(--pb-color-gray-700)) !important;
}
.categories-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--pb-categories-breadcrumbs-breadcrumb-item-separator-color, var(--pb-color-gray-400));
}

/* @version 10.0 [rev.01] */
/* CODE TEXTAREA */
textarea.textarea-code {
  font-family: Monaco, Consolas, monospace !important;
  font-size: 12px;
  line-height: 1.2;
  background-color: #FAF8CC;
}

/* /CODE TEXTAREA */
/* SCROLLABLE WELL */
.well-scrollable {
  max-height: 300px;
  overflow-y: scroll;
}

/* /SCROLLABLE WELL */
/* ALERT */
.alert .feather {
  vertical-align: text-top;
  width: 24px;
  height: 24px;
}

/* /ALERT */
/* LOADING MODAL */
body.loading {
  overflow: hidden;
}

.loading-modal {
  display: none;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url("../../images/svg-loaders/oval.svg");
  background-size: 75px 75px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
body.loading .loading-modal {
  display: block;
}

/* /LOADING MODAL */
/* DATE & DATETIME FORM ELEMENTS */
.element-date,
.datetimepicker-input {
  cursor: pointer;
  background-color: #fafafa !important;
}

/* /DATE & DATETIME FORM ELEMENTS */
/* VIDEO.JS CONTAINER */
.video-js {
  width: 100%;
}

/* /VIDEO.JS CONTAINER */
/* PRODUCT ATTRIBUTES PARTIAL */
.product-attribute-element .col-form-label {
  padding-top: 0;
  padding-bottom: 0.25rem;
}

/* /PRODUCT ATTRIBUTES PARTIAL */
/* INVOICE DESIGN */
.invoice-billing-headline {
  padding: 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 1px solid #dee2e6;
}
.invoice-billing-headline .badge {
  font-weight: 400;
  font-size: 1.25rem;
  margin-right: 0.5rem;
}
.invoice-billing-content {
  padding: 0.5rem;
}
.invoice-billing-content strong {
  font-weight: 500 !important;
}
.invoice-billing-logo {
  max-width: 200px;
  max-height: 50px;
}

/* /INVOICE DESIGN */
/* SELECTIZE CONTAINER */
.loading .selectize-input::after {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("../../images/svg-loaders/tail-spin.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 4px;
}

/* /SELECTIZE CONTAINER */
/* MAINTENANCE MODE */
.maintenance-mode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
  min-height: 100vh;
  margin: auto;
}
.maintenance-mode .content {
  text-align: center;
}
.maintenance-mode .content img {
  width: 150px;
}
@media (max-width: 767.98px) {
  .maintenance-mode {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* /MAINTENANCE MODE */
/* FEES TOTAL */
.fees-total {
  padding-top: 0.5rem;
  font-size: 1.4rem !important;
}

/* /FEES TOTAL */
/* HONEYPOT FIELDS */
.hpt {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

/* /HONEYPOT FIELDS */
.text-all-categories {
  font-weight: 500;
}
.text-all-categories a {
  color: #B81D2C !important;
}

.currency-code {
  margin-left: var(--bs-currency-code-margin-left, 0.15em);
  font-size: var(--bs-currency-code-font-size, 85%);
  font-weight: var(--bs-currency-code-font-weight, 400);
}

.original-price {
  font-size: 85%;
  color: #777;
  font-weight: 300;
  font-style: italic;
  text-decoration: line-through;
}

.reputation-score {
  font-size: 0.875em;
}

/* AUTOCOMPLETE SPINNER (PLACEHOLDER) */
.autocomplete-spinner {
  position: absolute;
  top: 0;
  right: 0;
}
.autocomplete-spinner.hidden {
  visibility: hidden;
}

/* /AUTOCOMPLETE SPINNER (PLACEHOLDER) */
.d-flex .form-check:not(:last-child):after {
  margin-left: 10px;
  margin-right: 10px;
  color: #ccc;
  content: "∶";
}

.accordion.accordion-sm button {
  font-size: 100%;
  padding: 0;
}
.accordion.accordion-sm .accordion-body {
  padding: 10px 0;
}
.accordion.accordion-sm .accordion-button {
  align-items: flex-start;
}

.site-logo-email {
  max-width: 250px;
}

.trumbowyg-editor {
  background-color: #fff;
}

/* @version 10.0 [rev.01] */
.pagination .page-item .page-link {
  color: var(--pb-pagination-link-color, var(--pb-color-primary));
}
.pagination .page-item .page-link:focus, .pagination .page-item .page-link:active {
  background-color: var(--pb-pagination-link-focus-bg, var(--pb-color-primary-500));
  border-color: var(--pb-pagination-link-focus-border-color, var(--pb-color-primary-500));
  box-shadow: 0 0 var(--pb-box-shadow-spread) var(--pb-box-shadow-focus-size) var(--pb-pagination-link-focus-shadow, var(--pb-color-primary-100)) !important;
}
.pagination .page-item.active .page-link {
  color: var(--pb-pagination-active-link-color, var(--pb-color-white));
  background-color: var(--pb-pagination-active-link-bg, var(--pb-color-primary));
  border-color: var(--pb-pagination-active-link-border-color, var(--pb-color-primary));
}
.pagination .page-item.active .page-link:hover {
  background-color: var(--pb-pagination-active-link-hover-bg, var(--pb-color-primary-500));
  border-color: var(--pb-pagination-active-link-hover-border-color, var(--pb-color-primary-500));
}

/* @version 10.0 [rev.01] */
/* PAYMENT BOX */
.payment-box {
  --pb-payment-box-margin-y: .75rem;
  display: block;
  margin-bottom: var(--pb-payment-box-margin-y);
}
.payment-box .payment-logo {
  max-width: var(--pb-payment-box-logo-max-width, 150px);
}
.payment-box {
  cursor: pointer;
}

.payment-box + .payment-box {
  margin-top: var(--pb-payment-box-margin-y);
}

/* /PAYMENT BOX */
.form-payment .cart-summary {
  position: sticky;
  top: 25px;
}
.form-payment .payment-description {
  font-size: var(--pb-form-payment-payment-description-font-size, 1rem);
}

.Stripe {
  --body-color: rgb(247, 250, 252);
  --button-color: #0062cc;
  --accent-color: #0069d9;
  --link-color: #ffffff;
  --font-color: rgb(105, 115, 134);
  --radius: 6px;
  --form-width: 400px;
  /* Layout */
}
.Stripe .sr-root {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-content: center;
  justify-content: center;
  margin: 0 auto;
}
.Stripe .sr-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  align-self: center;
  padding: 15px 20px;
  background: var(--body-color);
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
}
.Stripe .sr-field-error {
  color: #cd0000;
  text-align: left;
  font-size: 13px;
  line-height: 17px;
  margin-top: 12px;
}
.Stripe {
  /* Inputs */
}
.Stripe .sr-input,
.Stripe input[type=text] {
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  padding: 5px 12px;
  height: 44px;
  width: 100%;
  transition: box-shadow 0.2s ease;
  background: white;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.Stripe .sr-input:focus,
.Stripe input[type=text]:focus,
.Stripe button:focus,
.Stripe .focused {
  box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3);
  outline: none;
  z-index: 9;
}
.Stripe .sr-input::placeholder,
.Stripe input[type=text]::placeholder {
  color: var(--gray-light);
}
.Stripe .sr-result {
  height: 44px;
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
  color: var(--font-color);
  overflow: auto;
}
.Stripe .sr-result code {
  overflow: scroll;
}
.Stripe .sr-result.expand {
  height: 350px;
}
.Stripe .sr-combo-inputs-row {
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
}
.Stripe {
  /* Buttons and links */
}
.Stripe button {
  background: var(--accent-color);
  border-radius: var(--radius);
  color: white;
  border: 0;
  padding: 12px 16px;
  margin-top: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
.Stripe button:hover {
  filter: contrast(115%);
}
.Stripe button:active {
  transform: translateY(0px) scale(0.98);
  filter: brightness(0.9);
}
.Stripe button:disabled {
  opacity: 0.5;
  cursor: none;
}
.Stripe a {
  color: var(--link-color);
  text-decoration: none;
  transition: all 0.2s ease;
}
.Stripe a:hover {
  filter: brightness(0.8);
}
.Stripe a:active {
  filter: brightness(0.5);
}
.Stripe {
  /* Code block */
}
.Stripe code,
.Stripe pre {
  font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
  font-size: 12px;
}
.Stripe {
  /* Stripe Element placeholder */
}
.Stripe .sr-card-element {
  padding-top: 15px;
}
.Stripe {
  /* Responsiveness */
}
@media (max-width: 720px) {
  .Stripe .sr-root {
    flex-direction: column;
    justify-content: flex-start;
    padding: 48px 20px;
    min-width: 320px;
  }
  .Stripe .sr-header__logo {
    background-position: center;
  }
  .Stripe .sr-payment-summary {
    text-align: center;
  }
  .Stripe .sr-content {
    display: none;
  }
  .Stripe .sr-main {
    width: 100%;
    height: 305px;
    background: rgb(247, 250, 252);
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 6px;
  }
}
.Stripe {
  /* todo: spinner/processing state, errors, animations */
}
.Stripe .spinner,
.Stripe .spinner:before,
.Stripe .spinner:after {
  border-radius: 50%;
}
.Stripe .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);
}
.Stripe .spinner:before,
.Stripe .spinner:after {
  position: absolute;
  content: "";
}
.Stripe .spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: var(--accent-color);
  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;
}
.Stripe .spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: var(--accent-color);
  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);
  }
}
.Stripe {
  /* Animated form */
}
.Stripe .sr-root {
  animation: 0.4s form-in;
  animation-fill-mode: both;
  animation-timing-function: ease;
}
.Stripe .hidden {
  display: none;
}
@keyframes field-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
@keyframes form-in {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* @version 10.0 [rev.01] */
@media print {
  body {
    width: 1024px !important;
    margin: 0 auto !important;
  }
}
.mobile-title {
  display: none;
}

.invoice-sale .table {
  table-layout: fixed;
}

@media screen and (max-width: 768px) {
  .invoice-sale .mobile-title {
    display: inline;
  }
  .invoice-sale .mobile-title:after {
    content: ":";
  }
  .invoice-sale .table th {
    display: none;
  }
  .invoice-sale .table tr {
    display: flex;
    flex-direction: column;
  }
  .invoice-sale .table tr td {
    padding-top: 0.1rem;
    padding-bottom: 0;
    border-bottom: none;
  }
  .invoice-sale .table tr td:first-child {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    border-top: 1px solid #d1d5db;
  }
  .invoice-sale .table tr td:last-child {
    padding-bottom: 0.5rem;
  }
  .invoice-sale .table tr td:not(:first-child) {
    font-size: 0.9em;
  }
  .invoice-sale .table tr:not(.line-item) {
    flex-direction: row;
    justify-content: end;
  }
  .invoice-sale .table tr:not(.line-item) td {
    font-size: 1rem;
    padding: 0.5rem;
  }
  .invoice-sale .table .colspan {
    display: none;
  }
}
/* @version 10.0 [rev.01] */
.text-xs {
  font-size: var(--pb-font-size-xs) !important;
}

.text-sm {
  font-size: var(--pb-font-size-sm) !important;
}

.text-lg {
  font-size: var(--pb-font-size-lg) !important;
}

.text-light {
  font-weight: var(--pb-font-weight-light) !important;
}

.text-normal {
  font-weight: var(--pb-font-weight-normal) !important;
}

.text-medium {
  font-weight: var(--pb-font-weight-medium) !important;
}

.text-semibold {
  font-weight: var(--pb-font-weight-semibold) !important;
}

.text-bold {
  font-weight: var(--pb-font-weight-bold) !important;
}

.text-buyout {
  color: var(--pb-text-color-buyout, var(--pb-color-blue-600)) !important;
}

.text-product {
  color: var(--pb-text-color-product, var(--pb-color-gray-800)) !important;
}

.text-classified {
  color: var(--pb-text-color-classified, var(--pb-color-orange-600)) !important;
}

.text-under-reserve {
  color: var(--pb-text-color-under-reserve, var(--pb-color-red-600)) !important;
}

.text-over-reserve {
  color: var(--pb-text-color-over-reserve, var(--pb-color-green-600)) !important;
}

.text-disabled {
  color: var(--pb-text-color-disabled, var(--pb-color-gray-400)) !important;
}

/* @version 10.0 [rev.01] */
.table {
  --bs-table-bg: none;
  --pb-table-responsive-min-width: 1200px;
}
.table caption {
  padding: var(--pb-table-caption-padding-y, 0.75rem) var(--pb-table-caption-padding-x, 0.5rem);
  caption-side: top;
}
.table.table-sm th, .table.table-sm td {
  font-size: var(--pb-table-sm-font-size, var(--pb-font-size-sm));
}
.table.table-sm th {
  font-weight: var(--pb-table-sm-th-font-weight, var(--pb-font-weight-medium));
}
.table .size-40 {
  width: var(--pb-table-size-40-width, 40px);
}
.table .size-min-40 {
  min-width: var(--pb-table-size-min-40-width, 40px);
}
.table .size-60 {
  width: var(--pb-table-size-60-width, 60px);
}
.table .size-min-60 {
  min-width: var(--pb-table-size-min-60-width, 60px);
}
.table .size-70 {
  width: var(--pb-table-size-70-width, 70px);
}
.table .size-min-70 {
  min-width: var(--pb-table-size-min-70-width, 70px);
}
.table .size-80 {
  width: var(--pb-table-size-80-width, 80px);
}
.table .size-min-80 {
  min-width: var(--pb-table-size-min-80-width, 80px);
}
.table .size-90 {
  width: var(--pb-table-size-90-width, 90px);
}
.table .size-min-90 {
  min-width: var(--pb-table-size-min-90-width, 90px);
}
.table .size-100 {
  width: var(--pb-table-size-100-width, 100px);
}
.table .size-min-100 {
  min-width: var(--pb-table-size-min-100-width, 100px);
}
.table .size-120 {
  width: var(--pb-table-size-120-width, 120px);
}
.table .size-min-120 {
  min-width: var(--pb-table-size-min-120-width, 120px);
}
.table .size-140 {
  width: var(--pb-table-size-140-width, 140px);
}
.table .size-min-140 {
  min-width: var(--pb-table-size-min-140-width, 140px);
}
.table .size-160 {
  width: var(--pb-table-size-160-width, 160px);
}
.table .size-min-160 {
  min-width: var(--pb-table-size-min-160-width, 160px);
}
.table .size-180 {
  width: var(--pb-table-size-180-width, 180px);
}
.table .size-min-180 {
  min-width: var(--pb-table-size-min-180-width, 180px);
}
.table .size-200 {
  width: var(--pb-table-size-200-width, 200px);
}
.table .size-min-200 {
  min-width: var(--pb-table-size-min-200-width, 200px);
}
.table .size-250 {
  width: var(--pb-table-size-250-width, 250px);
}
.table .size-min-250 {
  min-width: var(--pb-table-size-min-250-width, 250px);
}
.table .size-300 {
  width: var(--pb-table-size-300-width, 300px);
}
.table .size-min-300 {
  min-width: var(--pb-table-size-min-300-width, 300px);
}
.table .size-tiny {
  width: var(--pb-table-size-tiny-width, 40px);
}
.table .size-min-tiny {
  min-width: var(--pb-table-size-min-tiny-width, 40px);
}
.table .size-mini {
  width: var(--pb-table-size-mini-width, 80px);
}
.table .size-min-mini {
  min-width: var(--pb-table-size-min-mini-width, 80px);
}
.table .size-small {
  width: var(--pb-table-size-small-width, 140px);
}
.table .size-min-small {
  min-width: var(--pb-table-size-min-small-width, 140px);
}
.table .size-medium {
  width: var(--pb-table-size-medium-width, 240px);
}
.table .size-min-medium {
  min-width: var(--pb-table-size-min-medium-width, 240px);
}
.table .size-large {
  width: var(--pb-table-size-large-width, 360px);
}
.table .size-min-large {
  min-width: var(--pb-table-size-min-large-width, 360px);
}
.table .size-actions {
  width: var(--pb-table-size-actions-width, 180px);
}
.table .size-min-actions {
  min-width: var(--pb-table-size-min-actions-width, 180px);
}
.table .h-100 {
  height: 100%;
}
@media (max-width: 1199.98px) {
  .table-responsive .table {
    min-width: var(--pb-table-responsive-min-width);
  }
}
.table .border-top-thick {
  border-top-width: 4px !important;
}
.table .no-border-bottom {
  border-bottom: none !important;
}
.table .no-border {
  border: none !important;
}

.table-sale {
  table-layout: fixed;
}
.table-sale > caption {
  margin-bottom: 0;
  padding: 1px 0 5px;
}
.table-sale > thead > tr > th {
  border-bottom: 1px dotted #ddd;
  padding: 5px 5px 5px 0;
}
.table-sale > tbody > tr > td {
  border-top: 0 none;
  padding: 5px 5px 5px 0;
}

/* @version 10.0 [rev.01] */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .headline {
  font-family: var(--pb-headline-font-family, var(--pb-font-heading)), sans-serif;
}

.heading {
  --pb-heading-display: flex;
  display: var(--pb-heading-display);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pb-heading-margin-bottom, 1rem);
  padding-bottom: var(--pb-heading-padding-bottom, 0.5rem);
  border-bottom-width: var(--pb-heading-border-bottom-width, 1px);
  border-bottom-style: var(--pb-heading-border-bottom-style, solid);
  border-bottom-color: var(--pb-heading-border-bottom-color, var(--pb-color-rgba-black-10));
  gap: var(--pb-heading-gap, 0.25rem);
  font-weight: var(--pb-heading-font-weight, var(--pb-font-weight-medium));
}
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5, .heading h6, .heading .h1, .heading .h2, .heading .h3, .heading .h4, .heading .h5, .heading .h6 {
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .heading {
    overflow-x: auto;
  }
}
.heading.heading-secondary h1, .heading.heading-secondary h2, .heading.heading-secondary h3, .heading.heading-secondary h4, .heading.heading-secondary h5, .heading.heading-secondary h6, .heading.heading-secondary .h1, .heading.heading-secondary .h2, .heading.heading-secondary .h3, .heading.heading-secondary .h4, .heading.heading-secondary .h5, .heading.heading-secondary .h6 {
  font-family: var(--pb-heading-secondary-font-family, var(--pb-font-heading)), sans-serif;
  font-weight: var(--pb-heading-secondary-font-weight, var(--pb-font-weight-medium));
}

.subtitle {
  display: var(--pb-subtitle-display, flex);
  align-items: center;
  margin-bottom: var(--pb-subtitle-margin-bottom, 0.75rem);
  padding-bottom: var(--pb-subtitle-padding-bottom, 0.375rem);
  border-bottom-width: var(--pb-subtitle-border-bottom-width, 1px);
  border-bottom-style: var(--pb-subtitle-border-bottom-style, solid);
  border-bottom-color: var(--pb-subtitle-border-bottom-color, var(--pb-color-gray-200));
  font-weight: var(--pb-subtitle-font-weight, 400);
  gap: var(--pb-subtitle-gap, 0.25rem);
}

@media (max-width: 991.98px) {
  .listings-browse .sidebar,
  .stores-browse .sidebar {
    --pb-sidebar-height: 100vh;
    overflow-y: auto;
  }
}
@media (min-width: 992px) {
  .listings-browse .sidebar,
  .stores-browse .sidebar {
    --pb-sidebar-position: flex;
    --pb-sidebar-width: auto;
    --pb-sidebar-height: auto;
  }
  .listings-browse .sidebar-toggler, .listings-browse .heading,
  .stores-browse .sidebar-toggler,
  .stores-browse .heading {
    display: none;
  }
}
.listings-browse .sidebar-menu,
.stores-browse .sidebar-menu {
  --pb-sidebar-menu-li-ul-padding-left: 0.25rem;
}
.listings-browse .sidebar-menu li > ul,
.stores-browse .sidebar-menu li > ul {
  margin-top: 0.15rem;
  margin-bottom: 0.75rem;
}
.listings-browse .sidebar-menu .nav-item a,
.stores-browse .sidebar-menu .nav-item a {
  font-size: var(--pb-font-size-sm);
}
.listings-browse .headline,
.stores-browse .headline {
  --pb-browse-page-headline-font-size: 1.75rem;
  font-size: var(--pb-browse-page-headline-font-size);
}
.listings-browse .active-filters,
.stores-browse .active-filters {
  --pb-active-filters-padding-x: 0;
  --pb-active-filters-padding-y: 0;
  --pb-active-filters-margin-bottom: 0.25rem;
  padding: var(--pb-sorting-and-filters-padding-y) var(--pb-sorting-and-filters-padding-x);
  margin-bottom: var(--pb-active-filters-margin-bottom);
}
.listings-browse .sorting-and-filters,
.stores-browse .sorting-and-filters {
  --pb-sorting-and-filters-padding-x: 0;
  --pb-sorting-and-filters-padding-y: 0;
  --pb-sorting-and-filters-margin-bottom: 1rem;
  padding: var(--pb-sorting-and-filters-padding-y) var(--pb-sorting-and-filters-padding-x);
  margin-bottom: var(--pb-sorting-and-filters-margin-bottom);
}

/* @version 10.0 [rev.01] */
.listing-details {
  --pb-listing-video-width: 100%;
  --pb-listing-video-height: 420px;
  --pb-carousel-indicators-margin-top: 1rem;
  --pb-carousel-indicators-gap: 5px;
  --pb-carousel-thumb-width: 120px;
  --pb-carousel-thumb-height: 120px;
  --pb-carousel-thumb-opacity-inactive: 0.75;
  --pb-carousel-thumb-border-color: var(--pb-color-rgba-gray-20);
}
.listing-details .video-js {
  width: var(--pb-listing-video-width);
  height: var(--pb-listing-video-height);
}
.listing-details {
  /* TITLE & SHORT DESCRIPTION */
  --pb-listing-details-title-font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  --pb-listing-details-title-margin-bottom: 1rem;
  --pb-listing-details-short-description-font-size: var(--pb-font-size);
  --pb-listing-details-short-description-margin-bottom: 1rem;
  --pb-listing-details-short-description-color: var(--pb-color-gray-600);
}
.listing-details .title {
  font-size: var(--pb-listing-details-title-font-size);
  margin-bottom: var(--pb-listing-details-title-margin-bottom);
}
.listing-details .short-description {
  font-size: var(--pb-listing-details-short-description-font-size);
  margin-bottom: var(--pb-listing-details-short-description-margin-bottom);
  color: var(--pb-listing-details-short-description-color);
}
.listing-details {
  /* /TITLE & SHORT DESCRIPTION */
  /* BOOTSTRAP CAROUSEL */
}
.listing-details .carousel-indicators {
  display: block;
  white-space: nowrap;
  position: relative;
  bottom: auto;
  margin: var(--pb-carousel-indicators-margin-top) 0 0;
  gap: var(--pb-carousel-indicators-gap);
  overflow-x: auto;
}
.listing-details .carousel-indicators [data-bs-target] {
  background-color: transparent;
  width: var(--pb-carousel-thumb-width);
  height: var(--pb-carousel-thumb-height);
  border-top: none;
  border-bottom: none;
  margin: 0;
}
.listing-details .carousel-indicators [data-bs-target] img {
  border-color: var(--pb-carousel-thumb-border-color);
}
.listing-details .carousel-indicators [data-bs-target]:not(.active) {
  opacity: var(--pb-carousel-thumb-opacity-inactive);
}
.listing-details {
  /* /BOOTSTRAP CAROUSEL */
}
.listing-details .accordion-postage-rates {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pb-color-rgba-gray-30);
}
.listing-details .event-lots-section .categories-breadcrumb, .listing-details .event-lots-section .card-seller {
  display: none;
}

.members-area {
  --pb-grid-background-color: var(--pb-default-box-bg);
  --pb-grid-padding: 0.75rem;
}
@media (min-width: 992px) {
  .members-area .main {
    --pb-grid-main-padding-x: 1rem;
  }
}
.members-area {
  --pb-table-size-actions-width: 50px;
}

.badge-programmer {
  --pb-badge-bg: var(--pb-color-blue-700) !important;
  --pb-badge-color: #fff !important;
}

#post-message {
  scroll-margin-top: 182px;
}

.badge-quoted {
  --pb-badge-color: #fff;
  --pb-badge-bg: #2B60DE;
}

.badge-paid {
  --pb-badge-color: #fff;
  --pb-badge-bg: #728C00;
}

svg.w-5 {
  width: 16px;
}

section.general ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
section.general .flex {
  display: flex;
}
section.general .gap-x-3 {
  gap: 0.5rem;
}
section.general .text-gray-500 {
  color: #6b7280;
}

.form-sign-in .form-check {
  padding-top: 0;
}
.form-sign-in .form-check .form-check-label {
  font-size: var(--pb-font-size-sm) !important;
}
.form-sign-in .form-check::after {
  content: "" !important;
}

.price-before-discount {
  margin-top: -6px;
  color: var(--pb-color-gray-400);
  font-weight: var(--pb-font-weight-normal);
  text-decoration: line-through;
  text-decoration-color: var(--pb-color-gray-400);
}

.discount-description {
  font-size: 0.7rem;
  color: var(--pb-color-red-700);
  margin-bottom: 6px;
}

/* ── config & base ─────────────────────────────────────── */
/* ── CSS VARIABLES (canonical set) ───────────────────────── */
:root {
  --ink: #1e2d4d;
  --ink2: #162440;
  --ink3: #2d5cbf;
  --mid: #5a6a82;
  --light: #8fa8c8;
  --pale: #e8f0fc;
  --pale2: #d4e4fa;
  --bg: #f4f7fd;
  --white: #FFFFFF;
  --blue: #3b7de8;
  --blue2: #5a94ef;
  --gold: #3b7de8;
  --gold2: #5a94ef;
  --green: #1a4d8f;
  --red: #C0392B;
  --blue-pale: #e8f0fc;
  --green-pale: #e8f5ee;
  --amber: #c8962a;
  --amber-pale: #fdf8e8;
  --grass: #1a6b45;
  --grass-pale: #e8f5ee;
  --max: 1200px;
  --compact: 720px;
  --header-h: 68px;
  /*--serif:  'Geist Sans', 'Geist', sans-serif;*/
  /*--sans:   'Switzer', system-ui, sans-serif;*/
  /*--mono:   'Geist Mono', monospace;*/
  --serif: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Plus Jakarta Sans', 'Inter', sans-serif;
  /*--mono:  "IBM Plex Mono", monospace;*/
  --sticky-top: 88px;
  --pb-headline-font-family: var(--serif);
  --pb-font-size: 0.95rem;
}

/* ── BASE RESET ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 14px;
}

ol, ul {
  padding-left: 0;
}

/* ── REVEAL ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal {
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
}

.reveal.d1 {
  animation-delay: 0.05s;
}

.reveal.d2 {
  animation-delay: 0.1s;
}

.reveal.d3 {
  animation-delay: 0.15s;
}

.reveal.d4 {
  animation-delay: 0.2s;
}

.float-icon {
  font-size: 1.1rem;
}

/* ── layout chrome (every page) ────────────────────────── */
/* ── HEADER ───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 45, 77, 0.08);
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(30, 45, 77, 0.1);
}
@media (max-width: 900px) {
  .site-header {
    padding: 0 24px;
  }
}
@media (max-width: 600px) {
  .site-header {
    padding: 0 16px;
  }
}
@media (max-width: 991.98px) {
  .site-header {
    display: none;
  }
}

.logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo img {
  max-width: 200px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.header-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.header-nav a:hover {
  color: var(--ink);
  background: var(--pale);
}
.header-nav a.active {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 600px) {
  .header-nav {
    display: none;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-login {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 6px;
  border: 1px solid rgba(30, 45, 77, 0.15);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.header-login:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--pale);
}

.header-cta {
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .header-cta .desktop {
    display: none;
  }
}
@media (min-width: 992px) {
  .header-cta .desktop {
    display: inline-block;
  }
}
@media (min-width: 992px) {
  .header-cta .mobile {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .header-cta .mobile {
    display: inline-block;
  }
}
.header-cta.complete {
  background: var(--ink3);
}
.header-cta:hover {
  background: var(--ink2);
  transform: translateY(-1px);
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  background: #080F18;
  padding: 60px 40px 40px;
  color: var(--light);
}
@media (max-width: 900px) {
  footer {
    padding: 48px 24px 32px;
  }
}
@media (max-width: 600px) {
  footer {
    padding: 40px 16px 28px;
  }
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
  }
  .footer-top .footer-brand {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 24px;
  }
  .footer-top .footer-brand .footer-logo {
    margin-bottom: 0;
  }
}
@media (max-width: 900px) and (max-width: 560px) {
  .footer-top .footer-brand {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

.footer-logo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-logo img {
  max-width: 150px;
}

.footer-logo-mark {
  width: 34px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.5;
  max-width: 240px;
}

.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 0.875rem;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--mid);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-bottom-links a {
  color: var(--mid);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s;
}
.footer-bottom-links a:hover {
  color: var(--white);
}
.footer-bottom-links a[aria-label] {
  color: var(--mid);
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
}
.footer-bottom-links a[aria-label]:hover {
  color: var(--white);
}

.footer-version {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.footer-version-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  text-decoration: none;
}
.footer-version-link:hover {
  color: var(--white);
}
.footer-version-link:hover .footer-release-badge {
  background: var(--white);
  color: var(--ink, #1e2d4d);
  border-color: var(--white);
}

.footer-release-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 999px;
  padding: 1px 4px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-left: 2px;
}

.footer-link-featured {
  color: var(--gold) !important;
  font-weight: 500;
}
.footer-link-featured:hover {
  color: var(--white) !important;
}

.footer-demo-btn {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 125, 232, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.footer-demo-btn:hover {
  color: var(--white);
  border-color: var(--white);
}

/* ---- MOBILE MENU -> VERSION 10 ---- */
/* mobile */
.mobile__navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 45, 77, 0.08);
  padding: 0.5rem 1rem;
}
@media (min-width: 992px) {
  .mobile__navbar {
    display: none;
  }
}
.mobile__navbar {
  --pb-sidebar-nav-link-font-weight: 400;
}
.mobile__navbar .logo {
  width: 100%;
  max-width: var(--pb-navbar-logo-img-width, 150px);
  max-height: var(--pb-navbar-logo-img-height, 60px);
}
.mobile__navbar .search-field {
  display: block;
}
.mobile__navbar .search-field input {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  border-radius: 5px;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
.mobile__navbar button, .mobile__navbar .button, .mobile__navbar .feather, .mobile__navbar .btn .bi {
  color: var(--pb-header-button-color, #1f2937) !important;
  background-color: transparent;
  border: none;
  font-size: var(--pb-header-button-font-size, 28px);
}

.au-links-mobile .sidebar-container {
  margin-left: 1.5rem;
}
.au-links-mobile .sidebar-container > .sidebar-menu > ul {
  margin-top: 0;
}

/* SIDEBAR BACKDROP (MOBILE) */
@media (max-width: 560px) {
  .sidebar-backdrop.show {
    z-index: 50;
  }
}
/* ── reusable components ──────────────────────────────── */
/* ── BREADCRUMBS ──────────────────────────────────────────── */
/*
 * .breadcrumb-wrap is the top spacer that also clears the fixed .site-header
 * (68px). Use it as the first element after <body> on any page that has a
 * breadcrumb trail.
 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--light);
}
.breadcrumb > a {
  color: var(--light);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb > a:hover {
  color: var(--mid);
}
.breadcrumb > a:not(:last-child):after {
  padding-left: 4px;
  content: " / ";
  opacity: 0.5;
}
.breadcrumb span {
  opacity: 0.7;
}

/* ── HERO ─────────────────────────────────────────────────────
 * Three hero variants. Pages opt in by adding the right class:
 *
 *   .hero-split    — 2-column, left-aligned. Landing-style heroes
 *                    with a media slot on the right.
 *   .hero-centered — 1-column, centered. Used by pricing, about,
 *                    feature explainer pages.
 *   .page-hero     — slim text-only header for utility pages
 *                    (contact, articles index, support).
 *
 * Shared building blocks (.hero-eyebrow, .hero-lead, .accent) work
 * inside any of the three.
 * ──────────────────────────────────────────────────────────── */
/* shared building blocks ─────────────────────────────────── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--gold);
  display: inline-block;
}

.intro {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 560px;
}

.accent {
  color: var(--blue);
}

/* hero-split — 2-col, left aligned ─────────────────────────── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.hero-split.align-start {
  align-items: start;
}
.hero-split h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 28px;
}
.hero-split h1 .accent {
  font-style: normal;
  color: var(--gold);
}
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
    padding: 120px 24px 60px;
  }
}
@media (max-width: 600px) {
  .hero-split {
    padding: 110px 24px 70px;
  }
}

/* hero-centered — 1-col centered ─────────────────────────── */
.hero {
  max-width: 720px;
}
.hero.hero-centered {
  margin: 0 auto;
  padding: 32px 40px 56px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 800;
  color: var(--ink2);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 16px;
}
.hero h1 em {
  font-style: italic;
  color: var(--blue);
}
.hero h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 16px;
}
.hero h2 em {
  font-style: italic;
  color: var(--blue);
}
@media (max-width: 900px) {
  .hero {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 600px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* hero-small — slim text-only ─────────────────────────────── */
.hero.hero-secondary, .hero-split.hero-secondary {
  padding-top: 24px;
  padding-bottom: 48px;
}
.hero.hero-secondary h1, .hero-split.hero-secondary h1 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
}
.hero.hero-centered, .hero-split.hero-centered {
  text-align: center;
}
.hero.hero-centered .hero-eyebrow, .hero-split.hero-centered .hero-eyebrow {
  justify-content: center;
}

/* hero-grid — 2-col grid with stats sidebar (about, info pages) ─── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: center;
}
.hero-grid h1, .hero-grid h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 20px;
}
.hero-grid h1 .accent, .hero-grid h2 .accent {
  color: var(--blue);
}
section.ink .hero-grid h1, section.ink .hero-grid h2 {
  color: var(--white);
}
section.ink .hero-grid p {
  color: var(--light) !important;
}
.hero-grid .entity-desc {
  font-size: 0.8rem;
  color: var(--light);
  line-height: 1.7;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(30, 45, 77, 0.08);
}
.hero-grid {
  /* stats sidebar — scoped to .hero-grid so generic .stat-item on
     other pages stays unaffected */
}
.hero-grid .hero-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-grid .stat-item {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
}
.hero-grid .stat-item:first-child {
  background: var(--ink);
  border-radius: 12px 12px 0 0;
  padding: 28px;
}
.hero-grid .stat-item:first-child .stat-num {
  color: var(--white);
}
.hero-grid .stat-item:first-child .stat-label {
  color: rgba(255, 255, 255, 0.55);
}
.hero-grid .stat-item:last-child {
  border-bottom: none;
  border-radius: 0 0 12px 12px;
  border: 1px solid rgba(30, 45, 77, 0.08);
  border-top: none;
}
.hero-grid .stat-item:not(:first-child) {
  border-left: 1px solid rgba(30, 45, 77, 0.08);
  border-right: 1px solid rgba(30, 45, 77, 0.08);
}
.hero-grid .stat-item:not(:first-child) .stat-num {
  color: var(--ink);
}
.hero-grid .stat-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.hero-grid .stat-label {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.4;
}
@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-grid .hero-stats {
    flex-direction: row;
  }
  .hero-grid .stat-item {
    flex: 1;
  }
}
@media (max-width: 560px) {
  .hero-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-grid .hero-stats {
    flex-direction: column;
  }
}

/* ── HERO CTA + NOTE (inside .page-hero) ───────────────── */
.hero-note {
  display: block;
  font-size: 0.76rem;
  color: var(--light);
}

/* ── HERO ADDITIONS (.hero-centered base lives in _hero.scss) ── */
.hero-lead {
  font-size: 1.05rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--pale);
  /* scoped — home's .proof-bar .proof-item has white text on
     dark bg; this version is mid-gray on light bg inside the
     hero strip */
}
.hero-proof .proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--mid);
}
.hero-proof .proof-item i[data-lucide] {
  flex-shrink: 0;
  color: var(--blue);
}
.hero-proof .proof-divider {
  width: 1px;
  height: 18px;
  background: var(--pale);
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-trust .trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--light);
}
.hero-trust .trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mid);
  flex-shrink: 0;
}

body > section {
  padding: 80px 0;
  scroll-margin-top: var(--sticky-top);
}

section.top {
  padding-top: 120px;
  padding-bottom: 0;
}
@media (max-width: 560px) {
  section.top {
    padding-top: 80px;
  }
}

section.general {
  padding: 120px 0 80px;
  scroll-margin-top: var(--sticky-top);
}
@media (max-width: 560px) {
  section.general {
    padding-top: 80px;
  }
}

section.compact-top {
  padding-top: 20px;
}

section.compact {
  padding-top: 20px;
  padding-bottom: 20px;
}

section.no-padding {
  padding: 0;
}

section.bg {
  background: var(--bg);
}

section.bg-2 {
  background: var(--pale);
}

section.ink {
  background: var(--ink);
  color: var(--white);
}

section.bg-bordered {
  background: var(--bg);
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
}
@media (max-width: 560px) {
  section.bg-bordered {
    padding-left: 20px;
    padding-right: 20px;
  }
}

section.bordered {
  border-top: 1px solid rgba(30, 45, 77, 0.07);
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
}

section.internal-links {
  background: var(--bg);
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}
.container.compact {
  max-width: var(--compact);
}
@media (max-width: 560px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── BUTTONS ──────────────────────────────────────────────────
 * Generic button classes — work on <a> and <button>.
 *
 *   .btn-primary       — solid ink CTA with lift on hover
 *   .btn-secondary     — outline button on light backgrounds
 *   .btn-secondary-inv — outline button on dark backgrounds (footer / dark CTA)
 *
 * Plan-card CTAs (with their own visual treatment) live in _plan-cards.scss.
 *
 * NOTE: styles are guarded so they do NOT apply to buttons rendered inside
 * <section class="general"> (which uses its own default form/button styling).
 * The guard uses a Selectors-4 complex :not() — the older `:not(section.general)`
 * wrapper was a no-op because ancestor-level negation cannot exclude a subtree.
 * ──────────────────────────────────────────────────────────── */
.btn-primary:not(section.general *) {
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(30, 45, 77, 0.18);
}
.btn-primary:not(section.general *):hover {
  background: var(--ink2);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(30, 45, 77, 0.22);
}
.btn-primary:not(section.general *) i[data-lucide] {
  transition: transform 0.2s;
}
.btn-primary:not(section.general *):hover i[data-lucide] {
  transform: translateX(4px);
}

/* ── BUTTONS used inside .final-cta (white on dark) ────── */
.btn-primary-inv:not(section.general *) {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.btn-primary-inv:not(section.general *):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.btn-secondary:not(section.general *) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: 1.5px solid rgba(30, 45, 77, 0.2);
  background: transparent;
  transition: border-color 0.2s, background 0.2s, color 0.15s;
}
.btn-secondary:not(section.general *):hover {
  border-color: var(--ink);
  background: var(--pale);
}

.btn-secondary-inv:not(section.general *) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
}
.btn-secondary-inv:not(section.general *):hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn-light:not(section.general *) {
  background: var(--blue);
  color: var(--white);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
  box-shadow: 0 4px 16px rgba(59, 125, 232, 0.3);
}
.btn-light:not(section.general *):hover {
  background: var(--blue2);
}

.btn-ghost:not(section.general *) {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:not(section.general *):hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

/* ── FAQ ──────────────────────────────────────────────────────
 * Standard accordion FAQ used across every marketing page.
 *
 * JS toggles .open on .faq-item to expand the .faq-a.
 * ──────────────────────────────────────────────────────────── */
.faq-sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 125, 232, 0.3);
  padding-bottom: 2px;
}

/* From here down — pricing-style accordion items. All scoped under
   .faq-section so home's grouped .faq accordion (in pages/_home.scss)
   keeps its own bg / borderless design. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-item {
  background: var(--white);
  border: 1px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-item:hover {
  border-color: var(--blue);
}
.faq-item.open {
  border-color: var(--blue);
  box-shadow: 0 4px 16px rgba(59, 125, 232, 0.08);
}
.faq-item {
  /* the question button — also collapses to flat row */
}
.faq-item .faq-q {
  background: transparent;
  border: none;
  width: 100%;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.faq-item .faq-q i[data-lucide] {
  color: var(--mid);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.faq-item .faq-q svg {
  width: 11px;
  height: 11px;
}
.faq-item.open .faq-q i[data-lucide] {
  transform: rotate(45deg);
  color: var(--blue);
}
.faq-item {
  /* the answer — collapsed by default, expands when .open */
}
.faq-item .faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 22px;
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.7;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
}
.faq-item .faq-a a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}
.faq-item .faq-a a:hover {
  text-decoration: underline;
}
.faq-item .faq-a ul {
  margin: 10px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-item .faq-a ul li {
  font-size: 0.83rem;
}
.faq-item.open .faq-a {
  max-height: 800px;
  opacity: 1;
  padding: 0 22px 20px;
}
.faq-item.open .faq-chevron {
  background: var(--pale);
  transform: rotate(-180deg);
}
.faq-item h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.faq-item p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.65;
}

.faq-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 860px) {
  .faq-grid .section-header {
    position: sticky;
    top: var(--sticky-top);
  }
}

/* sticky category sidebar ──────────────────────── */
.faq-cat-nav {
  position: sticky;
  top: var(--sticky-top);
}
@media (max-width: 860px) {
  .faq-cat-nav {
    position: static;
  }
}
.faq-cat-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 0;
}
@media (max-width: 860px) {
  .faq-cat-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.faq-cat-nav li a {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.faq-cat-nav li a:hover {
  color: var(--ink);
  background: var(--bg);
}
.faq-cat-nav li a.active {
  color: var(--blue);
  border-left-color: var(--blue);
  background: var(--pale);
  font-weight: 600;
}

/* grouped FAQ items ────────────────────────────── */
.faq-groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.faq-groups .faq-group {
  scroll-margin-top: var(--sticky-top);
}

.faq-group-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
}

.faq-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.25s;
  color: var(--mid);
}

.faq-toggle {
  width: 24px;
  height: 24px;
  background: var(--pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--ink);
  transition: background 0.15s, transform 0.2s;
}

.faq-2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(30, 45, 77, 0.07);
  border-radius: 12px;
  overflow: hidden;
}
.faq-2-cols .faq-item {
  padding: 24px;
  border-radius: 0;
  border: none;
}
.faq-2-cols .faq-item p:last-child {
  margin-bottom: 0;
}
.faq-2-cols.no-padding .faq-item {
  padding: 0;
}
@media (max-width: 560px) {
  .faq-2-cols {
    grid-template-columns: 1fr;
  }
}

/* ── BILLING TOGGLE ───────────────────────────────────────────
 * Annual ⇄ monthly switch used on the pricing page, and reusable
 * anywhere the same yearly/monthly pricing pattern is needed.
 *
 * Markup:
 *   <div class="toggle-wrap">
 *     <span class="toggle-label active" id="lbl-annual">Billed yearly</span>
 *     <label class="toggle">
 *       <input type="checkbox" id="billing-toggle">
 *       <div class="toggle-track"></div>
 *       <div class="toggle-thumb"></div>
 *     </label>
 *     <span class="toggle-label" id="lbl-monthly">Billed monthly</span>
 *     <span class="save-pill">Save £192/yr</span>
 *   </div>
 *
 * JS swaps .active between the two labels and toggles body.show-monthly,
 * which flips .price-yearly / .price-monthly inside each plan-card.
 * ──────────────────────────────────────────────────────────── */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 48px;
}

.toggle-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--mid);
}
.toggle-label.active {
  color: var(--ink);
  font-weight: 600;
}

.toggle {
  position: relative;
  width: 48px;
  height: 26px;
  cursor: pointer;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle .toggle-track {
  position: absolute;
  inset: 0;
  background: #d0d8e8;
  border-radius: 13px;
  transition: background 0.2s;
}
.toggle .toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.toggle input:checked ~ .toggle-track {
  background: var(--blue);
}
.toggle input:checked ~ .toggle-track ~ .toggle-thumb {
  transform: translateX(22px);
}

.save-pill {
  background: var(--green-pale);
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid #a8d9bc;
}

/* ── PLAN CARDS ───────────────────────────────────────────────
 * 3-up pricing card grid. Outer two cards share a border with the
 * middle card, which lifts via negative margin and inverts to a
 * dark "ink2" background with white text.
 *
 *   .pricing-grid                  — 3-col grid container
 *   .plan-card                     — base card (light bg)
 *   .plan-card.is-featured         — elevated dark middle card
 *   .popular-badge                 — pill above the featured card
 *   .plan-name / .plan-title / .plan-tagline — header block
 *   .price-block                   — wraps yearly + monthly variants
 *   .price-yearly / .price-monthly — toggled by body.show-monthly
 *   .price-main / .price-currency / .price-amount / .price-period
 *   .price-note / .price-save / .price-annual / .price-monthly-equiv
 *   .plan-cta (.cta-default | .cta-featured | .cta-outline) — CTA
 *   .plan-features                 — vertical feature list
 *   .feature-group-label           — small uppercase divider
 *   .feature-row                   — single feature with .check or .cross icon
 *   .tag                           — inline label inside a feature row
 *
 * All "white on dark" overrides for the featured card are nested
 * under `&.is-featured` (or descend from .is-featured) so the
 * inversion lives next to its base rule.
 * ──────────────────────────────────────────────────────────── */
.pricing-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px 10px;
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 20px 10px;
  }
}

/* ── card shells ───────────────────────────────────────── */
.plan-card {
  background: var(--bg);
  border: 1.5px solid var(--pale);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s;
}
.plan-card:first-child {
  border-radius: 16px 0 0 16px;
  border-right: none;
}
.plan-card:last-child {
  border-radius: 0 16px 16px 0;
  border-left: none;
}
.plan-card.is-featured {
  background: var(--ink2);
  border-color: var(--blue);
  border-width: 2px;
  border-radius: 16px;
  z-index: 2;
  box-shadow: 0 20px 60px rgba(26, 38, 64, 0.25);
  margin-top: -12px;
  margin-bottom: -12px;
  padding-top: 44px;
  padding-bottom: 40px;
}
.plan-card.is-featured:hover {
  box-shadow: 0 28px 72px rgba(26, 38, 64, 0.35);
}
@media (max-width: 860px) {
  .plan-card:first-child, .plan-card:last-child {
    border-radius: 12px;
    border: 1.5px solid var(--pale);
  }
  .plan-card.is-featured {
    margin: 0;
    border-radius: 12px;
  }
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(45, 107, 228, 0.4);
}

/* ── header block (name / title / tagline) ─────────────── */
.plan-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 8px;
}
.is-featured .plan-name {
  color: rgba(255, 255, 255, 0.4);
}

.plan-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.is-featured .plan-title {
  color: var(--white);
}

.plan-tagline {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.4;
  margin-bottom: 24px;
  min-height: 36px;
}
.is-featured .plan-tagline {
  color: rgba(255, 255, 255, 0.5);
}

/* ── price block ───────────────────────────────────────── */
.price-block {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pale);
}
.is-featured .price-block {
  border-color: rgba(255, 255, 255, 0.1);
}

.price-yearly {
  display: block;
}

.price-monthly {
  display: none;
}

body.show-monthly .price-yearly {
  display: none;
}
body.show-monthly .price-monthly {
  display: block;
}

.price-main {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
}

.price-currency {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 4px;
}
.is-featured .price-currency {
  color: rgba(255, 255, 255, 0.5);
}

.price-amount {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: -0.03em;
}
.is-featured .price-amount {
  color: var(--white);
}

.price-period {
  font-size: 0.78rem;
  color: var(--mid);
  margin-bottom: 6px;
  margin-left: 2px;
}
.is-featured .price-period {
  color: rgba(255, 255, 255, 0.4);
}

.price-note {
  font-size: 0.72rem;
  color: var(--light);
  margin-top: 6px;
  line-height: 1.4;
}
.is-featured .price-note {
  color: rgba(255, 255, 255, 0.35);
}

.price-annual {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
  margin-top: 4px;
}

.price-monthly-equiv {
  font-size: 0.72rem;
  color: var(--mid);
  margin-top: 2px;
}
.is-featured .price-monthly-equiv {
  color: rgba(255, 255, 255, 0.35);
}

.price-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(26, 200, 100, 0.12);
  color: #1ac864;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 8px;
}

/* ── CTA button ────────────────────────────────────────── */
.plan-cta {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 24px;
  transition: all 0.15s;
}
.plan-cta.cta-default {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--pale);
}
.plan-cta.cta-default:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.plan-cta.cta-featured {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(45, 107, 228, 0.4);
}
.plan-cta.cta-featured:hover {
  background: var(--blue2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45, 107, 228, 0.5);
}
.plan-cta.cta-outline {
  background: var(--ink);
  color: var(--white);
  border: 1.5px solid var(--ink);
}
.plan-cta.cta-outline:hover {
  background: var(--blue2);
  border-color: var(--blue2);
  transform: translateY(-1px);
}

/* ── feature list inside a card ────────────────────────── */
.plan-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feature-group-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin: 16px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--pale);
}
.is-featured .feature-group-label {
  color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.4;
}
.is-featured .feature-row {
  color: rgba(255, 255, 255, 0.55);
}
.feature-row i[data-lucide].check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blue);
}
.is-featured .feature-row i[data-lucide].check {
  color: #4da8ff;
}
.feature-row i[data-lucide].cross {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ccd4e0;
}
.feature-row strong {
  color: var(--ink);
  font-weight: 600;
}
.is-featured .feature-row strong {
  color: var(--white);
}
.feature-row .tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--blue-pale);
  color: var(--blue);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  white-space: nowrap;
}
.is-featured .feature-row .tag {
  background: rgba(45, 107, 228, 0.25);
  color: #90b8ff;
}

/* ── COMPARE TABLE ────────────────────────────────────────────
 * Feature-vs-plan comparison table used below the pricing cards.
 * Collapsed by default; expanded by toggling .visible on
 * .compare-table-wrap.
 *
 *   .compare-section     — outer width-constrained wrapper
 *   .compare-toggle      — centered row holding the open/close button
 *   .compare-toggle-btn  — the button itself
 *   .compare-table-wrap  — collapsed by default, .visible expands
 *   .compare-table       — the table
 *     th.col-featured    — header cell for the featured (Cloud) column
 *     td.col-featured-cell — body cell for the featured column
 *     .group-header td   — full-width section divider row
 *     .check-yes / .check-no — icon colors inside cells
 * ──────────────────────────────────────────────────────────── */
.compare-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 40px 80px;
}
@media (max-width: 860px) {
  .compare-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.compare-toggle-btn {
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1.5px solid var(--pale);
  border-radius: 8px;
  transition: all 0.15s;
}
.compare-toggle-btn:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
}

.compare-table-wrap {
  display: none;
}
.compare-table-wrap.visible {
  display: block;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.compare-table th {
  padding: 14px 18px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
  border-bottom: 2px solid var(--pale);
}
.compare-table th:not(:first-child) {
  text-align: center;
  width: 20%;
}
.compare-table th.col-featured {
  color: var(--blue);
}
.compare-table td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--pale);
  color: var(--mid);
  vertical-align: middle;
}
.compare-table td:not(:first-child) {
  text-align: center;
}
.compare-table tr:last-child td {
  border-bottom: none;
}
.compare-table .group-header td {
  background: var(--bg);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  padding: 10px 18px 6px;
}
.compare-table .check-yes {
  color: var(--blue);
}
.compare-table .check-no {
  color: #ccd4e0;
}
.compare-table .col-featured-cell {
  background: rgba(45, 107, 228, 0.04);
  font-weight: 600;
  color: var(--ink);
}

/* ── TRUST STRIP ──────────────────────────────────────────────
 * Horizontal row of icon + short text items, used as a "what's
 * always included" reinforcement below pricing cards.
 *
 *   .trust-strip    — flex container
 *   .trust-item     — single item (icon + label)
 *   .trust-divider  — thin vertical separator between items
 * ──────────────────────────────────────────────────────────── */
.trust-strip {
  max-width: var(--max);
  margin: 50px auto 0;
  padding: 56px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--pale);
}
@media (max-width: 860px) {
  .trust-strip {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--mid);
}
.trust-item i[data-lucide] {
  color: var(--blue);
  flex-shrink: 0;
}

.trust-divider {
  width: 1px;
  height: 20px;
  background: var(--pale);
}

/* ── PROOF STRIP (horizontal metric row) ───────────────── */
.proof-strip-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.proof-strip-metric .proof-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.proof-strip-metric .proof-strip-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink2);
  line-height: 1;
}
.proof-strip-metric .proof-strip-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--light);
  letter-spacing: 0.04em;
  text-align: center;
}
@media (max-width: 560px) {
  .proof-strip-metric {
    flex-direction: column;
  }
}

/* ── PROOF STRIP ─────────────────────────────────── */
.proof-strip {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.proof-strip .proof-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  white-space: nowrap;
  flex-shrink: 0;
}
.proof-strip .proof-items {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.proof-strip .proof-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--mid);
}
.proof-strip .proof-item i {
  color: var(--blue);
  flex-shrink: 0;
}
.proof-strip .proof-div {
  width: 1px;
  height: 16px;
  background: rgba(30, 45, 77, 0.12);
}

/* ── STATS STRIP (top metric band) ─────────────────────── */
.stats-strip {
  display: flex;
  gap: 0;
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .stats-strip {
    flex-wrap: wrap;
  }
}
.stats-strip {
  /* scoped under .stats-strip so it doesn't collide with the
     generic .stat / .stat-num / .stat-label used by about's
     .hero-grid and the features pages */
}
.stats-strip .stat {
  flex: 1;
  padding: 20px 24px;
  border-right: 1px solid rgba(30, 45, 77, 0.08);
}
.stats-strip .stat:last-child {
  border-right: none;
}
.stats-strip .stat-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3px;
}
.stats-strip .stat-label {
  font-size: 0.72rem;
  color: var(--mid);
}

/* ── FEES GRID ────────────────────────────────────────────────
 * Two-column "zero transaction fees" callout used on pricing.
 * Base styles are inline on the element; only the responsive
 * collapse lives here.
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .fees-grid {
    grid-template-columns: 1fr !important;
  }
}

.il-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 28px;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.il-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 28px;
}

.il-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

/* ── INTERNAL LINKS ──────────────────────────────── */
.internal-links .il-label, .internal-links .il-grid {
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 560px) {
  .internal-links .il-label, .internal-links .il-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.internal-links .il-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 560px) {
  .internal-links .il-grid {
    grid-template-columns: 1fr;
  }
}
.internal-links .il-grid .il-card {
  background: var(--white);
  border-radius: 12px;
  padding: 28px 24px;
  text-decoration: none;
  border: 1px solid rgba(30, 45, 77, 0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.internal-links .il-grid .il-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(30, 45, 77, 0.08);
  border-color: var(--blue);
}
.internal-links .il-grid .il-card:hover .il-arrow {
  margin-left: 4px;
}
.internal-links .il-grid .il-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.internal-links .il-grid .il-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.55;
  flex: 1;
}
.internal-links .il-grid .il-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.internal-links .il-grid .il-arrow {
  font-size: 0.8rem;
  color: var(--blue);
  font-weight: 600;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s;
}
.internal-links .il-grid .il-card:hover .il-arrow {
  gap: 8px;
}

.internal-links-compact {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 560px) {
  .internal-links-compact {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.internal-links-compact .il-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 900px) {
  .internal-links-compact .il-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.internal-links-compact .il-grid .il-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  display: block;
}
.internal-links-compact .il-grid .il-card:hover {
  border-color: var(--blue);
  background: var(--pale);
}
.internal-links-compact .il-grid .il-card-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 6px;
}
.internal-links-compact .il-grid .il-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.internal-links-compact .il-grid .il-card-sub {
  font-size: 0.78rem;
  color: var(--mid);
}

/* ── RELATED LINKS [UNUSED] ── */
.related-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 40px;
}
.related-section .related-heading {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.related-section .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-section .related-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 10px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.related-section .related-card:hover {
  border-color: rgba(59, 125, 232, 0.25);
  background: var(--pale);
  transform: translateY(-2px);
}
.related-section .related-card:hover .related-arrow {
  transform: translateX(4px);
  color: var(--blue);
}
.related-section .related-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.related-section .related-text {
  flex: 1;
}
.related-section .related-text h4 {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.related-section .related-text p {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.4;
}
.related-section .related-arrow {
  color: var(--light);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}

.il-section {
  padding: 72px 40px;
  background: var(--white);
}
.il-section .il-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.il-section .il-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.il-section .il-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--pale);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.il-section .il-card:hover {
  box-shadow: 0 4px 16px rgba(30, 45, 77, 0.09);
  border-color: var(--blue2);
}
.il-section .il-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.il-section .il-card-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.il-section .il-card-text span {
  font-size: 0.8rem;
  color: var(--mid);
}

/* ── BOTTOM CTA BAND ──────────────────────────────────────────
 * Dark band at the bottom of a marketing page with a centered
 * heading, lead, and one or two CTAs.
 * ──────────────────────────────────────────────────────────── */
.bottom-cta {
  background: var(--ink2);
  text-align: center;
}
.bottom-cta h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.bottom-cta h2.large {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
}
.bottom-cta p {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 28px;
  line-height: 1.7;
}
.bottom-cta h2, .bottom-cta p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.bottom-cta .cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .bottom-cta {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 600px) {
  .bottom-cta {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* scoped inside .demo-explore so it doesn't collide with the
       category page's .section-header */
.section-header {
  margin-bottom: 40px;
}
.section-header.centered {
  text-align: center;
}
.section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.section-header .eyebrow:not(.no-line)::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--blue);
}
.section-header h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.section-header h2.secondary {
  font-size: 1.5rem;
}
.section-header h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.section-header p {
  font-size: 0.92rem;
  color: var(--mid);
}

/* scoped variant of .section-title — adds underline + icon row
           so it doesn't conflict with the generic .section-title from
           components/_section.scss */
.section-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid rgba(30, 45, 77, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title i[data-lucide] {
  color: var(--blue);
  flex-shrink: 0;
}

/* ── page-specific component partials ─────────────────── */
/* ── ABOUT PAGE COMPONENTS ────────────────────────────────────
 * Generic class selectors for the sections that currently appear
 * only on the about page. No body.p-* scoping — if any of these
 * sections ever get reused elsewhere they're already portable.
 *
 * (The about hero + stats sidebar lives in components/_hero.scss
 *  under .hero-grid, so it can be reused by other 2-col-with-
 *  stats pages without colliding with the generic .stat-* on
 *  features / clients pages.)
 *
 *   .story-section, .story-inner, .story-label, .story-nav,
 *   .story-nav-item, .story-content, .story-block, .timeline,
 *   .tl-item, .tl-left, .tl-dot, .tl-line, .tl-year, .tl-text
 *   .principles-section, .principles-grid, .principle-card,
 *   .principle-num
 *   .explore-section, .explore-inner, .explore-grid,
 *   .explore-card, .explore-icon, .explore-arrow
 *   .consulting-section, .consulting-text, .consulting-points,
 *   .consulting-point, .cp-dot, .cp-text, .consulting-form-card,
 *   .form-sub, .field, .field-row, .select-wrap, .form-submit,
 *   .form-note, .form-success, .success-icon, .req
 *   .btn-cta-primary, .btn-cta-ghost
 * ──────────────────────────────────────────────────────────── */
.p-about {
  /* ── STORY SECTION (sticky-nav narrative) ──────────────── */
}
.p-about .about-story .story-sidebar {
  position: sticky;
  top: var(--sticky-top);
}
.p-about .about-story .story-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: start;
}
@media (max-width: 960px) {
  .p-about .about-story .story-inner {
    grid-template-columns: 1fr;
  }
}
.p-about .about-story .story-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-about .about-story .story-label::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--blue);
}
.p-about .about-story .story-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: var(--sticky-top);
}
@media (max-width: 960px) {
  .p-about .about-story .story-nav {
    display: none;
  }
}
.p-about .about-story .story-nav-item {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--light);
  padding: 12px 0;
  border-left: 2px solid rgba(30, 45, 77, 0.08);
  padding-left: 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
  display: block;
}
.p-about .about-story .story-nav-item:hover, .p-about .about-story .story-nav-item.active {
  color: var(--ink);
  border-left-color: var(--blue);
}
.p-about .about-story .story-content {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.p-about .about-story .story-block {
  scroll-margin-top: var(--sticky-top);
}
.p-about .about-story .story-block h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.p-about .about-story .story-block p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 14px;
}
.p-about .about-story .story-block p:last-child {
  margin-bottom: 0;
}
.p-about .about-story .story-block strong {
  color: var(--ink);
  font-weight: 600;
}
.p-about {
  /* ── TIMELINE ──────────────────────────────────────────── */
}
.p-about .timeline {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.p-about .tl-item {
  display: flex;
  gap: 20px;
  padding-bottom: 28px;
  position: relative;
}
.p-about .tl-item:last-child {
  padding-bottom: 0;
}
.p-about .tl-item:last-child .tl-line {
  display: none;
}
.p-about .tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
}
.p-about .tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--blue);
  flex-shrink: 0;
  margin-top: 4px;
}
.p-about .tl-line {
  flex: 1;
  width: 1.5px;
  background: rgba(30, 45, 77, 0.1);
  margin-top: 6px;
}
.p-about .tl-year {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--light);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.p-about .tl-text h4 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.p-about .tl-text p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-about {
  /* ── PRINCIPLES ────────────────────────────────────────── */
}
.p-about .principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 960px) {
  .p-about .principles-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .p-about .principles-grid {
    grid-template-columns: 1fr;
  }
}
.p-about .principle-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-about .principle-card:hover {
  border-color: rgba(59, 125, 232, 0.25);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.07);
  transform: translateY(-2px);
}
.p-about .principle-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.p-about .principle-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.65;
}
.p-about .principle-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--pale);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
}
.p-about {
  /* ── EXPLORE ───────────────────────────────────────────── */
}
.p-about .explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 960px) {
  .p-about .explore-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .p-about .explore-grid {
    grid-template-columns: 1fr;
  }
}
.p-about .explore-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-about .explore-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 4px 20px rgba(30, 45, 77, 0.07);
  transform: translateY(-2px);
}
.p-about .explore-card:hover .explore-arrow i[data-lucide] {
  transform: translateX(4px);
}
.p-about .explore-card h3 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.p-about .explore-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
}
.p-about .explore-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--pale);
  border: 1px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.p-about .explore-arrow {
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}
.p-about .explore-arrow i[data-lucide] {
  transition: transform 0.2s;
}
.p-about {
  /* ── CONSULTING SECTION + FORM CARD ────────────────────── */
}
.p-about .about-consulting {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 72px;
  align-items: start;
}
@media (max-width: 960px) {
  .p-about .about-consulting {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 560px) {
  .p-about .about-consulting {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-about .about-consulting .consulting-points {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-about .about-consulting .consulting-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.p-about .about-consulting .cp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 7px;
}
.p-about .about-consulting .cp-text {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-about .about-consulting .cp-text strong {
  color: var(--ink);
  font-weight: 600;
}
.p-about .about-consulting .consulting-form-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 32px rgba(30, 45, 77, 0.07);
  position: sticky;
  top: var(--sticky-top);
}
.p-about .about-consulting .consulting-form-card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
@media (max-width: 960px) {
  .p-about .about-consulting .consulting-form-card {
    position: static;
  }
}
.p-about .about-consulting .form-sub {
  font-size: 0.8rem;
  color: var(--mid);
  margin-bottom: 24px;
  line-height: 1.5;
}
.p-about .about-consulting .field {
  margin-bottom: 16px;
}
.p-about .about-consulting .field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 5px;
}
.p-about .about-consulting .field label .req {
  color: var(--blue);
}
.p-about .about-consulting .field input,
.p-about .about-consulting .field textarea,
.p-about .about-consulting .field select {
  width: 100%;
  padding: 10px 13px;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.12);
  border-radius: 7px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  appearance: none;
}
.p-about .about-consulting .field input:focus,
.p-about .about-consulting .field textarea:focus,
.p-about .about-consulting .field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 125, 232, 0.1);
  background: var(--white);
}
.p-about .about-consulting .field input::placeholder,
.p-about .about-consulting .field textarea::placeholder {
  color: var(--light);
}
.p-about .about-consulting .field textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}
.p-about .about-consulting .select-wrap {
  position: relative;
}
.p-about .about-consulting .select-wrap::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--light);
  pointer-events: none;
}
.p-about .about-consulting .select-wrap select {
  padding-right: 34px;
  cursor: pointer;
}
.p-about .about-consulting .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .p-about .about-consulting .field-row {
    grid-template-columns: 1fr;
  }
}
.p-about .about-consulting .form-submit {
  width: 100%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 20px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
}
.p-about .about-consulting .form-submit:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.p-about .about-consulting .form-note {
  font-size: 0.7rem;
  color: var(--light);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.p-about .about-consulting .form-note a {
  color: var(--light);
  text-decoration: underline;
}
.p-about .about-consulting .form-success {
  display: none;
  text-align: center;
  padding: 32px 16px;
}
.p-about .about-consulting .form-success h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.p-about .about-consulting .form-success p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-about .about-consulting .success-icon {
  width: 52px;
  height: 52px;
  background: var(--pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--blue);
}

/* ── DEMO PAGE COMPONENTS ─────────────────────────────────────
 * Generic class selectors for the demo page. No body.p-* scoping.
 *
 * The hero itself uses the shared .page-hero variant from
 * _hero.scss. Demo-specific CTA inside the hero (.hero-cta,
 * .hero-note) and all the role / explore / panel sections live
 * here.
 *
 *   .hero-cta, .hero-note  — call-to-action button + caption inside .page-hero
 *   .roles, .roles-label, .roles-grid, .role-card,
 *     .role-card.featured, .role-tag, .role-best
 *   .demo-explore (was .explore — renamed so it doesn't collide
 *     with about's .explore-section/.explore-card/.explore-grid)
 *     contains: .section-header, .exp-grid, .exp-card,
 *     .exp-card.dark, .exp-tag, .exp-steps, .sn
 *   .demo-panel (was .panel — renamed to avoid colliding with
 *     order-software/.marketplace .panel) contains: .panel-box,
 *     .panel-icon, .panel-list, .panel-badge, .panel-badge-label,
 *     .panel-badge-text
 *   .cta-row, .btn-light, .btn-ghost — bottom-cta buttons (shared
 *     with other pages; currently kept here, will be promoted to
 *     _buttons.scss once those pages are migrated and we know the
 *     designs match)
 * ──────────────────────────────────────────────────────────── */
.p-demo {
  /* ── ROLE CARDS ────────────────────────────────────────── */
}
.p-demo .roles-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 20px;
}
.p-demo .roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 800px) {
  .p-demo .roles-grid {
    grid-template-columns: 1fr;
  }
}
.p-demo .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  padding: 15px 34px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 4px 18px rgba(59, 125, 232, 0.28);
  margin-bottom: 12px;
}
.p-demo .role-card {
  background: var(--white);
  border-radius: 12px;
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.p-demo .role-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 4px 20px rgba(59, 125, 232, 0.08);
}
.p-demo .role-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  border-radius: 12px 12px 0 0;
  opacity: 0.4;
}
.p-demo .role-card.featured::before {
  opacity: 1;
}
.p-demo .role-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.p-demo .role-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-demo .role-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
  display: block;
}
.p-demo .role-best {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--pale);
  padding: 3px 9px;
  border-radius: 4px;
}
.p-demo {
  /* ── DEMO EXPLORE SECTION ──────────────────────────────── */
}
.p-demo .exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) {
  .p-demo .exp-grid {
    grid-template-columns: 1fr;
  }
}
.p-demo .exp-card {
  border-radius: 12px;
  padding: 28px;
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  background: var(--bg);
}
.p-demo .exp-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.p-demo .exp-card p {
  font-size: 0.82rem;
  line-height: 1.6;
}
.p-demo .exp-card:not(.dark) h3 {
  color: var(--ink2);
}
.p-demo .exp-card:not(.dark) p {
  color: var(--mid);
}
.p-demo .exp-card:not(.dark) .exp-tag {
  background: var(--pale);
  color: var(--blue);
}
.p-demo .exp-card:not(.dark) .exp-steps li {
  color: var(--mid);
}
.p-demo .exp-card:not(.dark) .exp-steps li strong {
  color: var(--ink);
}
.p-demo .exp-card:not(.dark) .sn {
  background: var(--pale);
  color: var(--blue);
}
.p-demo .exp-card.dark {
  background: var(--ink2);
  border-color: transparent;
  grid-column: span 2;
}
.p-demo .exp-card.dark h3 {
  color: var(--white);
  font-size: 1.1rem;
}
.p-demo .exp-card.dark p {
  color: rgba(255, 255, 255, 0.45);
}
.p-demo .exp-card.dark .exp-tag {
  background: rgba(59, 125, 232, 0.2);
  color: #7fb3ff;
}
.p-demo .exp-card.dark .exp-steps li {
  color: rgba(255, 255, 255, 0.55);
}
.p-demo .exp-card.dark .exp-steps li strong {
  color: rgba(255, 255, 255, 0.85);
}
.p-demo .exp-card.dark .sn {
  background: rgba(59, 125, 232, 0.25);
  color: #7fb3ff;
}
@media (max-width: 800px) {
  .p-demo .exp-card.dark {
    grid-column: span 1;
  }
}
.p-demo .exp-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.p-demo .exp-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}
.p-demo .exp-steps li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.p-demo .exp-steps li strong {
  font-weight: 600;
}
.p-demo .sn {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  margin-top: 1px;
}
.p-demo {
  /* ── DEMO PANEL CALLOUT ────────────────────────────────── */
}
.p-demo .panel-box {
  background: var(--white);
  border-radius: 14px;
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .p-demo .panel-box {
    grid-template-columns: 1fr;
  }
}
.p-demo .panel-box h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink2);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.p-demo .panel-box > div > p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 520px;
}
.p-demo .panel-icon {
  width: 46px;
  height: 46px;
  background: var(--pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.p-demo .panel-icon i[data-lucide] {
  color: var(--blue);
}
.p-demo .panel-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.p-demo .panel-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--mid);
}
.p-demo .panel-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.p-demo .panel-badge {
  background: var(--ink2);
  border-radius: 10px;
  padding: 24px 28px;
  min-width: 210px;
  text-align: center;
  flex-shrink: 0;
}
.p-demo .panel-badge-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 10px;
}
.p-demo .panel-badge-text {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.6;
}
.p-demo .panel-badge-text em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
  display: block;
  margin-top: 4px;
}

/* ── SUPPORT PAGE COMPONENTS ──────────────────────────────────
 * Generic class selectors for the support page. No body.p-* scoping.
 *
 * Two FAQ designs coexist in the project:
 *   • pricing-style "card accordion" lives in components/_faq.scss
 *     (.faq-section with bg, .faq-item bordered card)
 *   • support's "grouped + sidebar nav" variant lives below,
 *     scoped under .support-faq so its different .faq-item /
 *     .faq-q / .faq-a styles don't bleed into the pricing pattern
 *
 * Same idea for .section-title: a tighter "with underline + icon"
 * variant is scoped under .customer-section so it doesn't fight
 * the generic .section-title in components/_section.scss.
 *
 *   .fork (+ .fork-card.customer / .fork-card.presale, .fork-icon,
 *     .fork-label, .fork-action)
 *   .customer-section (+ scoped .section-title, .selfserve-grid,
 *     .selfserve-card, .selfserve-arrow, .ticket-callout,
 *     .ticket-callout-left, .ticket-btn)
 *   .support-faq (+ scoped .faq-intro, .faq-layout, .faq-cat-nav,
 *     .faq-groups, .faq-group, .faq-group-title, .faq-list,
 *     .faq-item, .faq-q, .faq-chevron, .faq-a, .faq-a-inner)
 * ──────────────────────────────────────────────────────────── */
.p-support {
  /* ── FORK CARDS (top of page: ticket vs customer support) ── */
}
.p-support .fork {
  max-width: 860px;
  margin: 0 auto 72px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .p-support .fork {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .p-support .fork {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-support .fork-card {
  border-radius: 14px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration: none;
  color: inherit;
}
.p-support .fork-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}
.p-support .fork-card h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.p-support .fork-card p {
  font-size: 0.83rem;
  line-height: 1.6;
  flex: 1;
}
.p-support .fork-card {
  /* light "presale" variant ─────────────────────────── */
}
.p-support .fork-card.presale {
  background: var(--bg);
}
.p-support .fork-card.presale .fork-icon {
  background: var(--pale);
  color: var(--blue);
}
.p-support .fork-card.presale .fork-label {
  color: var(--blue);
}
.p-support .fork-card.presale h2 {
  color: var(--ink);
}
.p-support .fork-card.presale p {
  color: var(--mid);
}
.p-support .fork-card.presale .fork-action {
  background: var(--ink);
  color: var(--white);
}
.p-support .fork-card.presale .fork-action:hover {
  background: var(--blue);
}
.p-support .fork-card {
  /* dark "customer" variant ─────────────────────────── */
}
.p-support .fork-card.customer {
  background: var(--ink);
  border-color: var(--ink);
}
.p-support .fork-card.customer .fork-icon {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.p-support .fork-card.customer .fork-label {
  color: rgba(255, 255, 255, 0.5);
}
.p-support .fork-card.customer h2 {
  color: var(--white);
}
.p-support .fork-card.customer p {
  color: rgba(255, 255, 255, 0.55);
}
.p-support .fork-card.customer .fork-action {
  background: var(--white);
  color: var(--ink);
}
.p-support .fork-card.customer .fork-action:hover {
  background: var(--pale);
}
.p-support .fork-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-support .fork-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.p-support .fork-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
  align-self: flex-start;
}
.p-support {
  /* ── CUSTOMER SUPPORT SECTION (self-serve grid + ticket CTA) ── */
}
.p-support .selfserve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .p-support .selfserve-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .p-support .selfserve-grid {
    grid-template-columns: 1fr;
  }
}
.p-support .selfserve-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 20px 22px;
  border: 1px solid rgba(30, 45, 77, 0.07);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.p-support .selfserve-card:hover {
  border-color: rgba(59, 125, 232, 0.25);
  background: var(--pale);
  transform: translateY(-1px);
}
.p-support .selfserve-card i[data-lucide] {
  color: var(--blue);
}
.p-support .selfserve-card h4 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}
.p-support .selfserve-card p {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-support .selfserve-arrow {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-support .ticket-callout {
  background: var(--ink);
  border-radius: 12px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 860px) {
  .p-support .ticket-callout {
    flex-direction: column;
  }
}
.p-support .ticket-callout-left h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.p-support .ticket-callout-left p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
  max-width: 420px;
}
.p-support .ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.p-support .ticket-btn:hover {
  background: var(--pale);
  transform: translateY(-1px);
}

/* ── CLIENTS PAGE COMPONENTS ──────────────────────────────────
 * Generic class selectors for the clients page. No body.p-* scoping.
 *
 * Naming conflicts with other pages are resolved by scoping
 * everything under a unique parent (.stats-strip, .filter-wrap,
 * .testimonials, .cta-banner) so shared classes like .stat-num,
 * .filter-btn, .cta-inner, .testimonial-card don't leak.
 *
 *   .stats-strip (+ scoped .stat, .stat-num, .stat-label)
 *   .filter-wrap (+ scoped .filter-bar, .filter-btn,
 *     .filter-btn.active)
 *   .clients-wrap (+ scoped .clients-grid)
 *   .client-card (+ .client-thumb, .client-thumb-inner,
 *     .client-initial, .client-thumb-domain, .thumb-* gradient
 *     variants, .client-body, .client-top, .client-name,
 *     .client-cat, .cat-* color variants, .client-desc,
 *     .client-footer, .client-location, .client-link,
 *     .client-no-link)
 *   .testimonials (+ scoped .testimonials-label,
 *     .testimonials-grid, .testimonial-card, .testimonial-quote,
 *     .testimonial-attr)
 *   .cta-banner (+ scoped .cta-inner, .cta-text)
 * ──────────────────────────────────────────────────────────── */
.p-clients {
  /* ── FILTER BAR (category pills) ───────────────────────── */
  /* scoped so it doesn't collide with .filter-bar / .filter-btn
     on articles and category pages */
}
.p-clients .filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.p-clients .filter-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(30, 45, 77, 0.12);
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.15s;
}
.p-clients .filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.p-clients .filter-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.p-clients {
  /* ── CLIENTS GRID + CARDS ──────────────────────────────── */
}
.p-clients .clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .p-clients .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .p-clients .clients-grid {
    grid-template-columns: 1fr;
  }
}
.p-clients .client-card {
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  background: var(--white);
}
.p-clients .client-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}
.p-clients .client-card.hidden {
  display: none;
}
.p-clients .client-thumb {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.p-clients .client-thumb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.p-clients .client-initial {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.p-clients .client-thumb-domain {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.5;
}
.p-clients {
  /* thumb category color variants — each sets the gradient bg
     plus the initial + domain text color via descendant selectors */
}
.p-clients .thumb-auction {
  background: linear-gradient(135deg, #e8f0fc 0%, #d4e4fa 100%);
}
.p-clients .thumb-auction .client-initial,
.p-clients .thumb-auction .client-thumb-domain {
  color: #1a3a7a;
}
.p-clients .thumb-charity {
  background: linear-gradient(135deg, #e6f5ed 0%, #c8ecd8 100%);
}
.p-clients .thumb-charity .client-initial,
.p-clients .thumb-charity .client-thumb-domain {
  color: #1a5c38;
}
.p-clients .thumb-niche {
  background: linear-gradient(135deg, #fdf5e8 0%, #fae8cc 100%);
}
.p-clients .thumb-niche .client-initial,
.p-clients .thumb-niche .client-thumb-domain {
  color: #7a4a00;
}
.p-clients .thumb-marketplace {
  background: linear-gradient(135deg, #f5e8fc 0%, #e8cef5 100%);
}
.p-clients .thumb-marketplace .client-initial,
.p-clients .thumb-marketplace .client-thumb-domain {
  color: #5a1a6e;
}
.p-clients .thumb-events {
  background: linear-gradient(135deg, #f0fce8 0%, #d8f5c0 100%);
}
.p-clients .thumb-events .client-initial,
.p-clients .thumb-events .client-thumb-domain {
  color: #2a5a10;
}
.p-clients .thumb-mobile {
  background: linear-gradient(135deg, #e8f8fc 0%, #c8edf5 100%);
}
.p-clients .thumb-mobile .client-initial,
.p-clients .thumb-mobile .client-thumb-domain {
  color: #0a4a5a;
}
.p-clients .client-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.p-clients .client-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.p-clients .client-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.p-clients .client-cat {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.p-clients {
  /* category tag color variants */
}
.p-clients .cat-auction {
  background: var(--pale);
  color: #1a3a7a;
  border: 1px solid rgba(59, 125, 232, 0.2);
}
.p-clients .cat-charity {
  background: #e6f5ed;
  color: #1a5c38;
  border: 1px solid #a8d9bc;
}
.p-clients .cat-niche {
  background: #fff3e0;
  color: #7a4a00;
  border: 1px solid #ffc57d;
}
.p-clients .cat-marketplace {
  background: #f5e8fc;
  color: #5a1a6e;
  border: 1px solid #c990f5;
}
.p-clients .cat-events {
  background: #f0fce8;
  color: #2a5a10;
  border: 1px solid #a0d870;
}
.p-clients .cat-mobile {
  background: #e8f8fc;
  color: #0a4a5a;
  border: 1px solid #70c8d8;
}
.p-clients .client-desc {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
}
.p-clients .client-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--pale);
  margin-top: auto;
}
.p-clients .client-location {
  font-size: 0.7rem;
  color: var(--light);
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-clients .client-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.p-clients .client-link:hover {
  color: var(--ink);
}
.p-clients .client-link:hover i[data-lucide] {
  transform: translate(1px, -1px);
}
.p-clients .client-link i[data-lucide] {
  transition: transform 0.15s;
}
.p-clients .client-no-link {
  font-size: 0.72rem;
  color: var(--light);
  font-style: italic;
}
.p-clients {
  /* ── TESTIMONIALS ──────────────────────────────────────── */
  /* scoped so it doesn't collide with home's .testimonial-card */
}
.p-clients .testimonials-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 20px;
}
.p-clients .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .p-clients .testimonials-grid {
    grid-template-columns: 1fr;
  }
}
.p-clients .testimonial-card {
  background: var(--bg);
  border: 1px solid rgba(30, 45, 77, 0.07);
  border-radius: 12px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-clients .testimonial-quote {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.7;
  font-style: italic;
}
.p-clients .testimonial-quote::before {
  content: "“";
}
.p-clients .testimonial-quote::after {
  content: "”";
}
.p-clients .testimonial-attr {
  font-size: 0.72rem;
  color: var(--light);
}
.p-clients {
  /* ── CTA BANNER (bottom) ───────────────────────────────── */
}
.p-clients .cta-banner {
  max-width: var(--max);
  margin: 56px auto 80px;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .p-clients .cta-banner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-clients .cta-banner {
  /* scoped — .cta-inner and .cta-text are also used by many
     other pages with different designs */
}
.p-clients .cta-banner .cta-inner {
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 14px;
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 900px) {
  .p-clients .cta-banner .cta-inner {
    flex-direction: column;
  }
}
.p-clients .cta-banner .cta-text h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.p-clients .cta-banner .cta-text p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  max-width: 480px;
}

/* ── CONTACT PAGE COMPONENTS ──────────────────────────────────
 * Generic class selectors for the contact page. No body.p-* scoping.
 *
 * Form classes (.field, .field-row, .form-submit, .form-success,
 * .success-icon, .form-sub, .select-wrap) collide with the about
 * page's consulting form which uses the same class names with
 * different padding/colors. Resolution: scope every form child
 * inside .form-card so contact's design only applies inside
 * contact's form card. About's at-root form rules still win
 * inside its own .consulting-form-card without conflict.
 *
 *   .page-wrap (two-column outer)
 *   .left-col (left column wrapper — context only, no rules)
 *   .reason-cards, .reason-card (+ .selected), .reason-icon,
 *     .reason-title, .reason-desc
 *   .response-promise, .promise-icon, .promise-title, .promise-sub
 *   .quick-links, .quick-links-label, .quick-link-list, .quick-link,
 *     .quick-link-arrow
 *   .form-col (sticky right column)
 *   .form-card (+ scoped .form-sub, .form-context, .field,
 *     .field-row, .field-hint, .select-wrap, .form-submit,
 *     .form-privacy, .form-success, .success-icon)
 *
 * NOTE: the calendar booking widget (.consult-section / .cb-*
 * classes) has no CSS source rules anywhere; it's left unstyled
 * until a design lands.
 * ──────────────────────────────────────────────────────────── */
.p-contact {
  /* ── TWO-COLUMN LAYOUT ─────────────────────────────────── */
}
.p-contact .page-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px 80px;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 72px;
  align-items: start;
}
@media (max-width: 900px) {
  .p-contact .page-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 560px) {
  .p-contact .page-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-contact {
  /* ── REASON CARDS (left column) ────────────────────────── */
}
.p-contact .reason-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 44px;
}
.p-contact .reason-card {
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: pointer;
}
.p-contact .reason-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  background: var(--pale);
  transform: translateY(-1px);
}
.p-contact .reason-card.selected {
  border-color: var(--blue);
  background: var(--pale);
}
.p-contact .reason-card.selected .reason-icon {
  background: var(--blue);
  border-color: var(--blue);
}
.p-contact .reason-card.selected .reason-icon i[data-lucide] {
  color: var(--white);
}
.p-contact .reason-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.p-contact .reason-icon i[data-lucide] {
  color: var(--blue);
  transition: color 0.2s;
}
.p-contact .reason-title {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.3;
}
.p-contact .reason-desc {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-contact {
  /* ── RESPONSE PROMISE (badge) ──────────────────────────── */
}
.p-contact .response-promise {
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.p-contact .promise-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-contact .promise-icon i[data-lucide] {
  color: var(--blue);
}
.p-contact .promise-title {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.p-contact .promise-sub {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-contact {
  /* ── QUICK LINKS (below promise) ───────────────────────── */
}
.p-contact .quick-links {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(30, 45, 77, 0.07);
}
.p-contact .quick-links-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 14px;
}
.p-contact .quick-link-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-contact .quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--mid);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.p-contact .quick-link:hover {
  color: var(--ink);
  background: var(--bg);
}
.p-contact .quick-link:hover .quick-link-arrow {
  transform: translateX(3px);
}
.p-contact .quick-link:hover .quick-link-arrow i[data-lucide] {
  color: var(--blue);
}
.p-contact .quick-link i[data-lucide] {
  color: var(--blue);
  flex-shrink: 0;
}
.p-contact .quick-link-arrow {
  margin-left: auto;
  transition: transform 0.15s;
}
.p-contact .quick-link-arrow i[data-lucide] {
  color: var(--light);
}
.p-contact {
  /* ── RIGHT COLUMN — FORM ───────────────────────────────── */
}
.p-contact .form-col {
  position: sticky;
  top: var(--sticky-top);
}
@media (max-width: 900px) {
  .p-contact .form-col {
    position: static;
  }
}
.p-contact {
  /* All form children are scoped inside .form-card so they don't
     collide with .field / .field-row / .form-submit / .form-success
     / .success-icon used by about's consulting form. */
}
.p-contact .form-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 32px rgba(30, 45, 77, 0.07);
}
.p-contact .form-card h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.p-contact .form-card .form-sub {
  font-size: 0.8rem;
  color: var(--mid);
  margin-bottom: 28px;
  line-height: 1.5;
}
.p-contact .form-card .form-context {
  background: var(--pale);
  border: 1px solid rgba(59, 125, 232, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 600;
  transition: opacity 0.2s;
}
.p-contact .form-card .form-context svg {
  flex-shrink: 0;
}
.p-contact .form-card .form-context span {
  flex: 1;
}
.p-contact .form-card .field {
  margin-bottom: 18px;
}
.p-contact .form-card .field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.p-contact .form-card .field label .req {
  color: var(--blue);
  margin-left: 2px;
}
.p-contact .form-card .field input,
.p-contact .form-card .field textarea,
.p-contact .form-card .field select {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.15);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.p-contact .form-card .field input:focus,
.p-contact .form-card .field textarea:focus,
.p-contact .form-card .field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 125, 232, 0.1);
}
.p-contact .form-card .field input::placeholder,
.p-contact .form-card .field textarea::placeholder {
  color: var(--light);
}
.p-contact .form-card .field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.p-contact .form-card .select-wrap {
  position: relative;
}
.p-contact .form-card .select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--light);
  pointer-events: none;
}
.p-contact .form-card .select-wrap select {
  padding-right: 36px;
  cursor: pointer;
}
.p-contact .form-card .field-hint {
  font-size: 0.72rem;
  color: var(--light);
  margin-top: 5px;
  line-height: 1.4;
}
.p-contact .form-card .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .p-contact .form-card .field-row {
    grid-template-columns: 1fr;
  }
}
.p-contact .form-card .form-submit {
  width: 100%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
  margin-top: 8px;
}
.p-contact .form-card .form-submit:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.p-contact .form-card .form-submit:hover i[data-lucide] {
  transform: translateX(4px);
}
.p-contact .form-card .form-submit i[data-lucide] {
  transition: transform 0.2s;
}
.p-contact .form-card .form-privacy {
  font-size: 0.72rem;
  color: var(--light);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}
.p-contact .form-card .form-privacy a {
  color: var(--light);
  text-decoration: underline;
  transition: color 0.15s;
}
.p-contact .form-card .form-privacy a:hover {
  color: var(--mid);
}
.p-contact .form-card .form-success {
  text-align: center;
  padding: 40px 20px;
}
.p-contact .form-card .form-success h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}
.p-contact .form-card .form-success p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
}
.p-contact .form-card .success-icon {
  width: 56px;
  height: 56px;
  background: #e6f5ed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.p-contact .form-card .success-icon i[data-lucide] {
  color: #1a5c38;
}

/* ── ARTICLES LISTING PAGE COMPONENTS ─────────────────────────
 * Generic class selectors for the articles index. No body.p-* scoping.
 *
 * The per-article page (how-to-start-an-online-auction-business)
 * has its own partial: pages/_how-to-start.scss — still pending
 * migration to generic selectors.
 *
 * Conflict resolution:
 *   • .filter-wrap / .filter-bar / .filter-btn collide with the
 *     clients page's filter (different design). Articles's outer
 *     wrapper is renamed to .articles-filter so the two pages'
 *     filter styles can't cross-contaminate.
 *   • .card-title collides with online-auction-software. Scoped
 *     under .article-card so the article-listing version only
 *     applies inside article cards.
 *
 *   .featured-wrap (+ .featured-article, .featured-img, .featured-badge,
 *     .featured-img-label, .featured-category-tag, .featured-img-title,
 *     .featured-body, .featured-meta, .read-link)
 *   .article-cat, .article-read-time
 *   .articles-filter (+ scoped .filter-bar, .filter-label,
 *     .filter-btn, .filter-btn.active)
 *   .grid-wrap, .article-grid
 *   .article-card (+ scoped .card-img, .card-img-cat, .card-body,
 *     .card-meta, .card-tag, .card-time, .card-title, .card-excerpt,
 *     .card-footer, .card-link), .article-card.coming-soon
 *   .cat-guide / .cat-strategy / .cat-technical / .cat-business /
 *     .cat-feature / .cat-coming — gradient backgrounds for .card-img
 *   .coming-badge
 *   .coming-section (+ .coming-inner, .coming-header, .coming-list,
 *     .coming-item, .coming-dot, .coming-item-title, .coming-item-cat)
 * ──────────────────────────────────────────────────────────── */
.p-article {
  background: var(--bg);
}

.p-articles, .p-article {
  /* ── FEATURED ARTICLE ──────────────────────────────────── */
}
.p-articles .featured-article, .p-article .featured-article {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  box-shadow: 0 4px 32px rgba(30, 45, 77, 0.07);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.15s;
}
.p-articles .featured-article:hover, .p-article .featured-article:hover {
  box-shadow: 0 8px 48px rgba(30, 45, 77, 0.12);
  transform: translateY(-2px);
}
.p-articles .featured-article:hover .read-link, .p-article .featured-article:hover .read-link {
  gap: 10px;
}
.p-articles .featured-article:hover .read-link svg, .p-article .featured-article:hover .read-link svg {
  transform: translateX(4px);
}
@media (max-width: 960px) {
  .p-articles .featured-article, .p-article .featured-article {
    grid-template-columns: 1fr;
  }
}
.p-articles .featured-img, .p-article .featured-img {
  background: linear-gradient(135deg, var(--ink) 0%, #2a4a8f 60%, var(--blue) 100%);
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 32px;
}
.p-articles .featured-img::before, .p-article .featured-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 960px) {
  .p-articles .featured-img, .p-article .featured-img {
    min-height: 220px;
  }
}
.p-articles .featured-badge, .p-article .featured-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--blue);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.p-articles .featured-img-label, .p-article .featured-img-label {
  position: relative;
  z-index: 1;
}
.p-articles .featured-category-tag, .p-article .featured-category-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.p-articles .featured-img-title, .p-article .featured-img-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.p-articles .featured-body, .p-article .featured-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--white);
}
.p-articles .featured-body h2, .p-article .featured-body h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.p-articles .featured-body p, .p-article .featured-body p {
  font-size: 0.87rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 24px;
  flex: 1;
}
.p-articles .featured-meta, .p-article .featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.p-articles .article-cat, .p-article .article-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--pale);
  padding: 3px 9px;
  border-radius: 4px;
}
.p-articles .article-read-time, .p-article .article-read-time {
  font-size: 0.75rem;
  color: var(--light);
}
.p-articles .read-link, .p-article .read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.2s;
}
.p-articles .read-link svg, .p-article .read-link svg {
  transition: transform 0.2s;
}
.p-articles, .p-article {
  /* ── FILTER BAR (renamed wrapper from .filter-wrap so it doesn't
     collide with clients's .filter-wrap design) ─────────────── */
}
.p-articles .articles-filter .filter-bar, .p-article .articles-filter .filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(30, 45, 77, 0.08);
  padding-bottom: 20px;
}
.p-articles .articles-filter .filter-label, .p-article .articles-filter .filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
  margin-right: 4px;
}
.p-articles .articles-filter .filter-btn, .p-article .articles-filter .filter-btn {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mid);
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.p-articles .articles-filter .filter-btn:hover, .p-article .articles-filter .filter-btn:hover {
  color: var(--ink);
  border-color: rgba(30, 45, 77, 0.2);
}
.p-articles .articles-filter .filter-btn.active, .p-article .articles-filter .filter-btn.active {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}
.p-articles, .p-article {
  /* ── ARTICLE GRID + CARDS ──────────────────────────────── */
}
.p-articles .article-grid, .p-article .article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) {
  .p-articles .article-grid, .p-article .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .p-articles .article-grid, .p-article .article-grid {
    grid-template-columns: 1fr;
  }
}
.p-articles .article-card, .p-article .article-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-articles .article-card:hover, .p-article .article-card:hover {
  border-color: rgba(59, 125, 232, 0.25);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}
.p-articles .article-card:hover .card-link, .p-article .article-card:hover .card-link {
  gap: 9px;
}
.p-articles .article-card.coming-soon, .p-article .article-card.coming-soon {
  opacity: 0.65;
  pointer-events: none;
}
.p-articles .article-card, .p-article .article-card {
  /* scoped under .article-card so it doesn't collide with
     .card-title used by online-auction-software pages */
}
.p-articles .article-card .card-img, .p-article .article-card .card-img {
  height: 160px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.p-articles .article-card .card-img-cat, .p-article .article-card .card-img-cat {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 8px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.p-articles .article-card .card-body, .p-article .article-card .card-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-articles .article-card .card-meta, .p-article .article-card .card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-articles .article-card .card-tag, .p-article .article-card .card-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
}
.p-articles .article-card .card-time, .p-article .article-card .card-time {
  font-size: 0.72rem;
  color: var(--light);
}
.p-articles .article-card .card-title, .p-article .article-card .card-title {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.3;
  flex: 1;
}
.p-articles .article-card .card-excerpt, .p-article .article-card .card-excerpt {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-articles .article-card .card-footer, .p-article .article-card .card-footer {
  padding: 0 22px 20px;
  margin-top: auto;
}
.p-articles .article-card .card-link, .p-article .article-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  transition: gap 0.15s;
}
.p-articles, .p-article {
  /* card-img gradient category variants */
}
.p-articles .cat-guide, .p-article .cat-guide {
  background: linear-gradient(135deg, #1e2d4d, #3b7de8);
}
.p-articles .cat-strategy, .p-article .cat-strategy {
  background: linear-gradient(135deg, #1a3a2a, #057642);
}
.p-articles .cat-technical, .p-article .cat-technical {
  background: linear-gradient(135deg, #2d1e4d, #7c3aed);
}
.p-articles .cat-business, .p-article .cat-business {
  background: linear-gradient(135deg, #4d2a1e, #c2410c);
}
.p-articles .cat-feature, .p-article .cat-feature {
  background: linear-gradient(135deg, #1e3a4d, #0369a1);
}
.p-articles .cat-coming, .p-article .cat-coming {
  background: linear-gradient(135deg, #2d2d2d, #555);
}
.p-articles .coming-badge, .p-article .coming-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--light);
  background: var(--bg);
  border: 1px solid rgba(30, 45, 77, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}
.p-articles, .p-article {
  /* ── COMING-SOON STRIP (below the grid) ────────────────── */
}
.p-articles .coming-section, .p-article .coming-section {
  background: var(--bg);
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
  padding: 56px 40px;
}
@media (max-width: 600px) {
  .p-articles .coming-section, .p-article .coming-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-articles .coming-inner, .p-article .coming-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.p-articles .coming-header, .p-article .coming-header {
  margin-bottom: 32px;
}
.p-articles .coming-header h2, .p-article .coming-header h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.p-articles .coming-header p, .p-article .coming-header p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-articles .coming-list, .p-article .coming-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-articles .coming-item, .p-article .coming-item {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-articles .coming-dot, .p-article .coming-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(30, 45, 77, 0.15);
  flex-shrink: 0;
}
.p-articles .coming-item-title, .p-article .coming-item-title {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mid);
  flex: 1;
  letter-spacing: -0.01em;
}
.p-articles .coming-item-cat, .p-article .coming-item-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
  background: var(--bg);
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.p-articles body.p-article, .p-article body.p-article {
  background: var(--bg);
}
.p-articles .art-wrap, .p-article .art-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
}
.p-articles .art-bc, .p-article .art-bc {
  font-size: 12.5px;
  color: var(--mid);
  padding: 26px 0 0;
}
.p-articles .art-bc a, .p-article .art-bc a {
  color: var(--blue);
  text-decoration: none;
}
.p-articles .art-bc span, .p-article .art-bc span {
  color: var(--light);
  margin: 0 6px;
}
.p-articles .art-head, .p-article .art-head {
  padding: 18px 0 28px;
  border-bottom: 1px solid #e4eaf4;
  margin-bottom: 30px;
}
.p-articles .art-cat, .p-article .art-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--pale);
  padding: 5px 12px;
  border-radius: 99px;
}
.p-articles .art-head h1, .p-article .art-head h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 12px;
}
.p-articles .art-meta, .p-article .art-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--mid);
  align-items: center;
}
.p-articles .art-meta i, .p-article .art-meta i {
  vertical-align: -2px;
}
.p-articles .art-body, .p-article .art-body {
  font-size: 17px;
  line-height: 1.75;
  color: #2c3a52;
}
.p-articles .art-body h2, .p-article .art-body h2 {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 36px 0 12px;
}
.p-articles .art-body h2 .n, .p-article .art-body h2 .n {
  color: var(--blue);
}
.p-articles .art-body p, .p-article .art-body p {
  margin-bottom: 18px;
}
.p-articles .art-body a, .p-article .art-body a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-articles .art-body strong, .p-article .art-body strong {
  color: var(--ink);
}
.p-articles .art-cta, .p-article .art-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 34px;
  margin: 44px 0 10px;
  text-align: center;
}
.p-articles .art-cta h3, .p-article .art-cta h3 {
  font-size: 22px;
  font-weight: 800;
}
.p-articles .art-cta p, .p-article .art-cta p {
  color: #aebfd9;
  margin: 8px auto 18px;
  max-width: 440px;
  font-size: 15px;
}
.p-articles .art-cta a, .p-article .art-cta a {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
}
.p-articles .art-related, .p-article .art-related {
  border-top: 1px solid #e4eaf4;
  margin-top: 40px;
  padding: 32px 0 60px;
}
.p-articles .art-related .lbl, .p-article .art-related .lbl {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-bottom: 16px;
}
.p-articles .art-related a, .p-article .art-related a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #eef2f8;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.p-articles .art-related a:hover, .p-article .art-related a:hover {
  color: var(--blue);
}
.p-articles .art-related a span.t, .p-article .art-related a span.t {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--light);
  letter-spacing: 0.05em;
}
.p-articles .art-fig, .p-article .art-fig {
  margin: 30px 0;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 14px;
  padding: 20px 22px 16px;
}
.p-articles .art-fig .fig-t, .p-article .art-fig .fig-t {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.p-articles .art-fig svg, .p-article .art-fig svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.p-articles .art-fig figcaption, .p-article .art-fig figcaption {
  font-size: 13px;
  color: var(--mid);
  margin-top: 14px;
  line-height: 1.55;
}
.p-articles .art-fig figcaption .src, .p-article .art-fig figcaption .src {
  color: var(--light);
}
.p-articles .art-src, .p-article .art-src {
  font-size: 13px;
  color: var(--mid);
  border-top: 1px solid #e4eaf4;
  margin-top: 30px;
  padding-top: 14px;
}
.p-articles .art-src a, .p-article .art-src a {
  color: var(--mid);
}
.p-articles .art-faq, .p-article .art-faq {
  margin-top: 10px;
  border-top: 1px solid #e4eaf4;
}
.p-articles .art-faq details, .p-article .art-faq details {
  border-bottom: 1px solid #e4eaf4;
}
.p-articles .art-faq summary, .p-article .art-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 34px 15px 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 16.5px;
  position: relative;
}
.p-articles .art-faq summary::-webkit-details-marker, .p-article .art-faq summary::-webkit-details-marker {
  display: none;
}
.p-articles .art-faq summary::after, .p-article .art-faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 11px;
  font-size: 23px;
  font-weight: 400;
  color: var(--blue);
  line-height: 1;
}
.p-articles .art-faq details[open] summary, .p-article .art-faq details[open] summary {
  color: var(--blue);
}
.p-articles .art-faq details[open] summary::after, .p-article .art-faq details[open] summary::after {
  content: "−";
}
.p-articles .art-faq details > p, .p-article .art-faq details > p {
  margin: -2px 0 16px;
  color: #2c3a52;
}

/* ── HOME PAGE COMPONENTS ─────────────────────────────────────
 * Generic class selectors for the home page. No body.p-* scoping.
 *
 * Home's hero is the .hero-split variant (lives in components/
 * _hero.scss); home-specific children (hero-left, hero-right,
 * hero-visual, hero-float-1/2, cta-group, cta-micro) are scoped
 * under .hero-split here so they don't leak.
 *
 * Each marketing section (.use-cases, .options, .features, etc.)
 * gets explicit 100px 40px padding — no global section padding
 * rule, since pages share the <section> element.
 *
 *   .hero-split { .hero-left, .hero-right, .hero-visual,
 *     .hero-float-1, .hero-float-2, .cta-group, .cta-micro,
 *     .accent }
 *   .proof-bar (+ .proof-inner, .proof-item, .proof-icon,
 *     .proof-divider, .stars)
 *   .use-cases (+ .use-case-grid, .use-case-card, .uc-top,
 *     .use-case-icon, .uc-badge, .uc-bullets, .uc-bullet, .uc-link)
 *   .options (+ .options-grid, .option-card.featured, .option-tag,
 *     .option-desc, .option-best-for, .option-cta, .option-popular)
 *   .fees-callout (+ .fees-compare, .fees-card.fees-bad/.fees-good,
 *     .fees-figure, .fees-label, .fees-arrow)
 *   .features (+ .features-layout, .features-sticky, .feature-list,
 *     .feature-item, .feature-icon, .feature-text)
 *   .entrepreneur (+ .entrepreneur-inner, .steps, .step, .step-num,
 *     .step-text)
 *   .ae-spotlight (+ scoped section-label/heading/sub overrides for
 *     dark bg, .ae-intro, .ae-cta-box, .ae-demo-link)
 *   .why-ppb (+ .why-ppb-grid, .why-ppb-item)
 *   .testimonials (+ scoped .testimonial-grid, .testimonial-card,
 *     .testimonial-quote, .testimonial-author)
 *   .faq (+ scoped .faq-grid, .faq-item, .faq-q, .faq-a, .faq-toggle)
 *   .final-cta (+ .final-cta-inner, .final-cta-buttons)
 *   .btn-primary-inv, .btn-secondary-inv (used in final-cta)
 *
 * Conflict notes:
 *   • .testimonials collides with clients.phtml — both are scoped to
 *     .testimonials parent so each page's design stays put.
 *   • .faq collides with several still-unmigrated landing pages.
 *     Home's variant is scoped under .faq so when those pages migrate
 *     they can adopt either home's grid design or pricing's
 *     accordion (.faq-section).
 *   • .testimonial-card, .testimonial-quote, .testimonial-author —
 *     scoped under .testimonials so the clients page's same-named
 *     scoped versions don't bleed.
 * ──────────────────────────────────────────────────────────── */
.p-home {
  /* ── MONO ACCENTS (used inside several home sections) ──── */
}
.p-home .uc-badge,
.p-home .option-tag,
.p-home .step-num,
.p-home .home-mono {
  font-family: var(--mono);
}
.p-home > section.top {
  padding-top: 140px;
  padding-bottom: 100px;
}
@media (max-width: 560px) {
  .p-home > section.top {
    padding-top: 0;
    padding-bottom: 50px;
  }
}
.p-home {
  /* ── HERO (the .hero-split base lives in components/_hero.scss) ── */
}
.p-home .hero-split .hero-left {
  animation: fadeUp 0.7s ease both;
}
.p-home .hero-split .hero-right {
  animation: fadeUp 0.7s 0.15s ease both;
}
.p-home .hero-split .hero-visual {
  position: relative;
}
.p-home .hero-split .hero-float-1,
.p-home .hero-split .hero-float-2 {
  position: absolute;
  background: var(--white);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(30, 45, 77, 0.15);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: float 3s ease-in-out infinite;
}
@media (max-width: 900px) {
  .p-home .hero-split .hero-float-1,
  .p-home .hero-split .hero-float-2 {
    display: none;
  }
}
.p-home .hero-split .hero-float-1 {
  bottom: -20px;
  left: -30px;
  color: var(--green);
  animation-delay: 0s;
}
.p-home .hero-split .hero-float-2 {
  top: -16px;
  right: -20px;
  color: var(--ink3);
  animation-delay: 1.5s;
}
.p-home .hero-split .cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.p-home .hero-split .cta-micro {
  font-size: 0.8rem;
  color: var(--light);
  padding-left: 4px;
}
.p-home {
  /* ── SOCIAL PROOF BAR (dark band below hero) ───────────── */
}
.p-home .proof-bar {
  background: var(--ink);
  padding: 28px 40px;
}
@media (max-width: 600px) {
  .p-home .proof-bar {
    padding: 24px;
  }
}
.p-home .proof-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
@media (max-width: 600px) {
  .p-home .proof-inner {
    gap: 16px;
  }
}
.p-home .proof-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
}
.p-home .proof-item strong {
  font-size: 1.1rem;
  font-family: var(--serif);
  font-weight: 700;
}
.p-home .proof-item span {
  font-size: 0.8rem;
  color: var(--light);
  display: block;
}
.p-home .proof-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  opacity: 0.9;
}
.p-home .proof-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 900px) {
  .p-home .proof-divider {
    display: none;
  }
}
.p-home .stars {
  color: #f5a623;
  font-size: 0.9rem;
  letter-spacing: 2px;
}
.p-home {
  /* ── USE CASES ─────────────────────────────────────────── */
}
.p-home .use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .p-home .use-case-grid {
    grid-template-columns: 1fr;
  }
}
.p-home .use-case-card {
  background: var(--white);
  border-radius: 16px;
  padding: 36px 32px 32px;
  border: 1px solid rgba(30, 45, 77, 0.07);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.p-home .use-case-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ink) 0%, var(--blue) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.p-home .use-case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(30, 45, 77, 0.11);
  border-color: transparent;
}
.p-home .use-case-card:hover::after {
  transform: scaleX(1);
}
.p-home .use-case-card:hover .uc-badge {
  background: var(--ink);
  color: var(--white);
}
.p-home .use-case-card:hover .uc-link {
  gap: 10px;
}
.p-home .use-case-card h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.p-home .use-case-card p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.65;
  flex: 0 0 auto;
  top: var(--sticky-top);
}
.p-home .uc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.p-home .use-case-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 125, 232, 0.08);
  border-radius: 11px;
}
.p-home .uc-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--pale);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.p-home .uc-bullets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--pale);
}
.p-home .uc-bullet {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.4;
}
.p-home .uc-bullet i[data-lucide] {
  flex-shrink: 0;
  margin-top: 1px;
}
.p-home .uc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: gap 0.2s;
}
.p-home {
  /* ── PRODUCT OPTIONS (3 plan teasers) ──────────────────── */
}
.p-home .options {
  background: var(--white);
  padding: 100px 40px;
}
@media (max-width: 600px) {
  .p-home .options {
    padding: 70px 24px;
  }
}
.p-home .options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(30, 45, 77, 0.15);
}
@media (max-width: 900px) {
  .p-home .options-grid {
    grid-template-columns: 1fr;
  }
}
.p-home .option-card {
  background: var(--white);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.2s;
  position: relative;
}
.p-home .option-card:hover {
  background: var(--bg);
}
.p-home .option-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.2;
}
.p-home .option-card {
  /* ── featured dark variant ──────────────────────── */
}
.p-home .option-card.featured {
  background: var(--ink);
  color: var(--white);
}
.p-home .option-card.featured:hover {
  background: var(--ink2);
}
.p-home .option-card.featured h3 {
  color: var(--white);
}
.p-home .option-card.featured .option-tag {
  color: var(--light);
}
.p-home .option-card.featured .option-desc {
  color: var(--light);
}
.p-home .option-card.featured .option-best-for {
  color: var(--light);
  border-top-color: rgba(255, 255, 255, 0.1);
}
.p-home .option-card.featured .option-cta {
  color: var(--gold2);
  border-bottom-color: var(--gold2);
}
.p-home .option-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.p-home .option-desc {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
}
.p-home .option-best-for {
  font-size: 0.8rem;
  color: var(--ink3);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--pale);
}
.p-home .option-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 2px solid var(--ink);
  transition: gap 0.2s;
  width: fit-content;
  margin-top: 8px;
}
.p-home .option-cta:hover {
  gap: 12px;
}
.p-home .option-popular {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 0 0 8px 8px;
}
.p-home {
  /* ── ZERO FEES CALLOUT ─────────────────────────────────── */
}
.p-home .fees-callout {
  background: var(--pale);
  padding: 100px 40px;
}
@media (max-width: 600px) {
  .p-home .fees-callout {
    padding: 70px 24px;
  }
}
.p-home .fees-compare {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .p-home .fees-compare {
    flex-direction: column;
  }
}
.p-home .fees-card {
  background: var(--white);
  border-radius: 12px;
  padding: 24px 36px;
  border: 1px solid rgba(30, 45, 77, 0.1);
  text-align: center;
  min-width: 200px;
}
.p-home .fees-card .fees-figure {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 900;
  font-family: var(--serif);
}
.p-home .fees-card.fees-bad .fees-figure {
  color: #C0392B;
}
.p-home .fees-card.fees-good {
  background: var(--ink);
}
.p-home .fees-card.fees-good .fees-figure {
  color: var(--gold2);
}
.p-home .fees-card.fees-good .fees-label {
  color: var(--light);
}
.p-home .fees-label {
  font-size: 0.85rem;
  color: var(--mid);
  margin-top: 6px;
  line-height: 1.5;
}
.p-home .fees-arrow {
  font-size: 1.5rem;
  color: var(--light);
}
@media (max-width: 600px) {
  .p-home .fees-arrow {
    transform: rotate(90deg);
  }
}
.p-home {
  /* ── FEATURES (sticky two-column layout) ───────────────── */
}
.p-home .features {
  background: var(--bg);
  padding: 100px 40px;
}
@media (max-width: 600px) {
  .p-home .features {
    padding: 70px 24px;
  }
}
.p-home .features-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .p-home .features-layout {
    grid-template-columns: 1fr;
  }
}
.p-home .features-sticky {
  position: sticky;
  top: var(--sticky-top);
}
@media (max-width: 900px) {
  .p-home .features-sticky {
    position: static;
  }
}
.p-home .feature-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-home .feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
  transition: padding 0.2s;
}
.p-home .feature-item:last-child {
  border-bottom: none;
}
.p-home .feature-item:hover {
  padding-left: 6px;
}
.p-home .feature-item:hover .feature-icon {
  background: var(--ink);
}
.p-home .feature-item:hover .feature-icon i[data-lucide] {
  color: var(--white);
}
.p-home .feature-icon {
  width: 40px;
  height: 40px;
  background: var(--pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.p-home .feature-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.p-home .feature-text p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-home .feature-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.p-home {
  /* ── ENTREPRENEUR + STEPS ──────────────────────────────── */
}
.p-home .entrepreneur-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) {
  .p-home .entrepreneur-inner {
    grid-template-columns: 1fr;
  }
}
.p-home .steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.p-home .step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 32px;
}
.p-home .step:last-child {
  padding-bottom: 0;
}
.p-home .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  width: 2px;
  height: calc(100% - 40px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--pale) 100%);
}
.p-home .step-num {
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  z-index: 1;
}
.p-home .step-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.p-home .step-text p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.55;
}
.p-home {
  /* ── AUCTION EVENTS SPOTLIGHT (dark section) ───────────── */
}
.p-home .ae-spotlight {
  background: var(--ink);
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
}
.p-home .ae-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(59, 125, 232, 0.12), transparent), radial-gradient(ellipse 40% 40% at 0% 100%, rgba(59, 125, 232, 0.07), transparent);
}
.p-home .ae-spotlight .section-inner {
  position: relative;
  z-index: 1;
}
.p-home .ae-spotlight {
  /* dark-bg overrides for shared section-label / section-heading
     / section-sub — scoped here so other pages aren't affected */
}
.p-home .ae-spotlight .section-label {
  color: var(--blue2);
}
.p-home .ae-spotlight .section-label::before {
  background: var(--blue2);
}
.p-home .ae-spotlight .section-heading {
  color: var(--white);
}
.p-home .ae-spotlight .section-heading .accent {
  color: var(--blue2);
}
.p-home .ae-spotlight .section-sub {
  color: var(--light);
}
@media (max-width: 600px) {
  .p-home .ae-spotlight {
    padding: 60px 24px;
  }
}
.p-home .ae-intro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
  margin-bottom: 64px;
}
@media (max-width: 1000px) {
  .p-home .ae-intro {
    grid-template-columns: 1fr;
  }
}
.p-home .ae-cta-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 28px;
}
.p-home .ae-cta-box p {
  font-size: 0.875rem;
  color: var(--light);
  line-height: 1.6;
  margin-bottom: 20px;
}
.p-home .ae-demo-link {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  transition: color 0.15s, border-color 0.15s;
}
.p-home .ae-demo-link:hover {
  color: var(--white);
  border-color: var(--white);
}
.p-home {
  /* ── WHY PPB ────────────────────────────────────────────── */
}
.p-home .why-ppb {
  background: var(--white);
  padding: 100px 40px;
}
@media (max-width: 600px) {
  .p-home .why-ppb {
    padding: 70px 24px;
  }
}
.p-home .why-ppb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
  max-width: 860px;
}
@media (max-width: 900px) {
  .p-home .why-ppb-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.p-home .why-ppb-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.p-home .why-ppb-item p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.65;
}
.p-home {
  /* ── TESTIMONIALS (scoped so it doesn't collide with clients's
     .testimonials .testimonial-card design) ─────────────────── */
}
.p-home .testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .p-home .testimonial-grid {
    grid-template-columns: 1fr;
  }
}
.p-home .testimonial-card {
  background: var(--white);
  border: 1px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 24px;
}
.p-home .testimonial-quote {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 16px;
  font-style: italic;
}
.p-home .testimonial-author {
  font-size: 0.8rem;
  line-height: 1.5;
}
.p-home .testimonial-author strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}
.p-home .testimonial-author span {
  color: var(--light);
  font-size: 0.75rem;
}

/* ── FEATURES PAGE COMPONENTS ─────────────────────────────────
 * Generic class selectors for the features index. No body.p-* scoping.
 *
 * Hero uses the shared .hero-centered variant from _hero.scss.
 *
 * Heavy use of parent-scoped nesting because many features-page
 * class names (.stat-item, .stat-num, .stat-label, .sidebar,
 * .sidebar-nav, .section-title, .section-sub, .section-head,
 * .section-icon, .cta-row, .callout) collide with other pages:
 *
 *   .stat-* — scoped under .stats-bar (about uses them inside
 *     .hero-grid, clients under .stats-strip, online-auction
 *     pages still in shared.css)
 *   .sidebar / .sidebar-nav / .snav-link — scoped under
 *     .page-outer (how-to-start and online-timed-auctions also use
 *     .sidebar)
 *   .section-title / .section-sub / .section-head / .section-icon /
 *     .section-meta / .section-tags — scoped under .feat-section so
 *     the generic .section-title from components/_section.scss
 *     (used by other pages) keeps its own design
 *   .cta-row / .btn-p / .btn-g — scoped under .callout (demo also
 *     defines .cta-row with slightly different gap)
 *
 *   .persona-wrap, .persona-label, .persona-tabs (+ .ptab)
 *   .stats-bar (+ scoped .stats-inner, .stat-item, .stat-num,
 *     .stat-label)
 *   .page-outer (+ scoped .sidebar, .sidebar-label, .sidebar-nav,
 *     .snav-link)
 *   .feat-section (+ .feat-section.hidden, scoped .section-head,
 *     .section-icon, .ic-blue/orange/green/purple/red/teal,
 *     .section-meta, .section-title, .section-sub, .section-tags,
 *     .stag, .stag-blue/orange/green/purple/gold)
 *   .feat-grid (+ .g2, .g3, .g4)
 *   .feat-card (+ .feat-card.hl, .card-top, .fname, .fbadge,
 *     .b-core/key/unique/rev, .fdesc, .fwhy, .fdoc)
 *   .callout (+ .callout-dark/gold/green/blue, .callout-icon,
 *     .callout-body, .ctitle, .ctext, .ccta, .ccta-blue/green/gold,
 *     scoped .cta-row, .btn-p, .btn-g)
 * ──────────────────────────────────────────────────────────── */
.p-features {
  /* ── PERSONA TABS (filter by role: buyer/seller/admin) ── */
}
.p-features .persona-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 40px 0;
}
@media (max-width: 960px) {
  .p-features .persona-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-features .persona-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 10px;
}
.p-features .persona-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 580px) {
  .p-features .persona-tabs {
    flex-direction: column;
  }
}
.p-features .ptab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--pale);
  background: var(--white);
  color: var(--mid);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.p-features .ptab:hover {
  border-color: var(--blue);
  color: var(--ink);
  background: #e8f0fc;
}
.p-features .ptab.active {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}
.p-features {
  /* ── STATS BAR (above the persona tabs) ────────────────── */
  /* ── PAGE LAYOUT (sidebar + content grid) ──────────────── */
}
.p-features .page-outer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) {
  .p-features .page-outer {
    grid-template-columns: 1fr;
    padding: 24px 20px 60px;
  }
  .p-features .page-outer .features-sidebar {
    display: none;
  }
}
.p-features .page-outer {
  /* scoped under .page-outer so other pages that also use
     .sidebar / .sidebar-nav (how-to, online-timed-auctions)
     are unaffected */
}
.p-features .page-outer .features-sidebar {
  position: sticky;
  top: var(--sticky-top);
}
.p-features .page-outer .features-sidebar .sidebar-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  padding: 0 10px 6px;
}
.p-features .page-outer .features-sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.p-features .page-outer .snav-link {
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 6px;
  transition: all 0.15s;
  display: block;
  border-left: 2px solid transparent;
}
.p-features .page-outer .snav-link:hover {
  color: var(--ink);
  background: var(--bg);
}
.p-features .page-outer .snav-link.active {
  color: var(--blue);
  background: #e8f0fc;
  border-left-color: var(--blue);
  font-weight: 600;
}
.p-features {
  /* ── FEATURE SECTIONS ──────────────────────────────────── */
}
.p-features .feat-section {
  margin-bottom: 52px;
  scroll-margin-top: var(--sticky-top);
}
.p-features .feat-section.hidden {
  display: none;
}
.p-features .feat-section {
  /* scoped under .feat-section so the generic .section-title /
     .section-sub from components/_section.scss aren't replaced */
}
.p-features .feat-section .section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--pale);
}
.p-features .feat-section .section-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.p-features .feat-section {
  /* section-icon color variants */
}
.p-features .feat-section .ic-blue {
  background: #eef3ff;
  color: var(--blue);
}
.p-features .feat-section .ic-orange {
  background: #fdf3e8;
  color: #c8720a;
}
.p-features .feat-section .ic-green {
  background: #e8f5ee;
  color: #1a5c38;
}
.p-features .feat-section .ic-purple {
  background: #f0eeff;
  color: #6b4de8;
}
.p-features .feat-section .ic-red {
  background: #fff0f0;
  color: #c82030;
}
.p-features .feat-section .ic-teal {
  background: #e8faff;
  color: #0a8dad;
}
.p-features .feat-section .section-meta {
  flex: 1;
}
.p-features .feat-section .section-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink2);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.p-features .feat-section .section-sub {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.55;
}
.p-features .feat-section .section-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.p-features .feat-section {
  /* small tag pills used in section-tags */
}
.p-features .feat-section .stag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
}
.p-features .feat-section .stag-blue {
  color: var(--blue);
  background: #e8f0fc;
  border-color: #b3cdf5;
}
.p-features .feat-section .stag-orange {
  color: #c8720a;
  background: #fdf3e8;
  border-color: #f5c87a;
}
.p-features .feat-section .stag-green {
  color: #1a5c38;
  background: #e8f5ee;
  border-color: #a8d9bc;
}
.p-features .feat-section .stag-purple {
  color: #6b4de8;
  background: #f0eeff;
  border-color: #c5b8f5;
}
.p-features .feat-section .stag-gold {
  color: #8a5200;
  background: #fff0d6;
  border-color: #f5c87a;
}
.p-features {
  /* ── FEATURE GRID + CARDS ──────────────────────────────── */
}
.p-features .feat-grid {
  display: grid;
  gap: 12px;
}
.p-features .g3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .p-features .g3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .p-features .g3 {
    grid-template-columns: 1fr;
  }
}
.p-features .g2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 580px) {
  .p-features .g2 {
    grid-template-columns: 1fr;
  }
}
.p-features .g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) {
  .p-features .g4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .p-features .g4 {
    grid-template-columns: 1fr;
  }
}
.p-features .feat-card {
  background: var(--bg);
  border: 1px solid var(--pale);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.p-features .feat-card:hover {
  border-color: #c5d8f5;
  box-shadow: 0 3px 12px rgba(45, 107, 228, 0.07);
}
.p-features .feat-card {
  /* highlighted variant (e.g. a feature this persona uses most) */
}
.p-features .feat-card.hl {
  background: #e8f0fc;
  border-color: #b3cdf5;
}
.p-features .feat-card.hl .fname {
  color: var(--blue2);
}
.p-features .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.p-features .fname {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.p-features .fbadge {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
}
.p-features {
  /* feature-badge color variants */
}
.p-features .b-core {
  background: var(--pale);
  color: var(--mid);
  border-color: #d5dff0;
}
.p-features .b-key {
  background: #ddeeff;
  color: var(--blue2);
  border-color: #b3cdf5;
}
.p-features .b-unique {
  background: #fff0d6;
  color: #8a5200;
  border-color: #f5c87a;
}
.p-features .b-rev {
  background: #e8f5ee;
  color: #1a5c38;
  border-color: #a8d9bc;
}
.p-features .fdesc {
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-features .fwhy {
  font-size: 0.73rem;
  color: var(--blue2);
  font-weight: 500;
  line-height: 1.4;
  padding-top: 5px;
  border-top: 1px solid rgba(45, 107, 228, 0.1);
  margin-top: 2px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.p-features .fwhy::before {
  content: "→";
  font-size: 0.68rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.p-features .fdoc {
  font-size: 0.68rem;
  color: var(--light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  transition: color 0.15s;
  width: fit-content;
}
.p-features .fdoc:hover {
  color: var(--blue);
}
.p-features {
  /* ── CALLOUT BANNERS ───────────────────────────────────── */
}
.p-features .callout {
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 52px;
  display: flex;
  align-items: center;
  gap: 18px;
}
@media (max-width: 580px) {
  .p-features .callout {
    flex-direction: column;
    align-items: flex-start;
  }
}
.p-features .callout {
  /* dark variant (with white text + inverted CTAs) */
}
.p-features .callout.callout-dark {
  background: var(--ink2);
}
.p-features .callout.callout-dark .callout-icon {
  background: rgba(255, 255, 255, 0.08);
}
.p-features .callout.callout-dark .ctitle {
  color: var(--white);
}
.p-features .callout.callout-dark .ctext {
  color: rgba(255, 255, 255, 0.45);
}
.p-features .callout.callout-dark .ccta {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.2);
}
.p-features .callout.callout-dark .ccta:hover {
  background: rgba(255, 255, 255, 0.08);
}
.p-features .callout {
  /* light variants */
}
.p-features .callout.callout-gold {
  background: #e8f0fc;
  border: 1px solid #f5d9a0;
}
.p-features .callout.callout-green {
  background: #e8f5ee;
  border: 1px solid #a8d9bc;
}
.p-features .callout.callout-blue {
  background: #e8f0fc;
  border: 1px solid #b3cdf5;
}
.p-features .callout {
  /* scoped under .callout so they don't collide with demo's
     .cta-row (different gap) or .btn-p / .btn-g elsewhere */
}
.p-features .callout .cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.p-features .callout-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-features .callout-body {
  flex: 1;
}
.p-features .ctitle {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.p-features .ctext {
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-features .ccta {
  font-size: 0.77rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1.5px solid;
  transition: all 0.15s;
  flex-shrink: 0;
}
.p-features {
  /* ccta color variants */
}
.p-features .ccta-blue {
  color: var(--blue);
  border-color: var(--blue);
}
.p-features .ccta-blue:hover {
  background: var(--blue);
  color: var(--white);
}
.p-features .ccta-green {
  color: #1a5c38;
  border-color: #1a5c38;
}
.p-features .ccta-green:hover {
  background: #1a5c38;
  color: var(--white);
}
.p-features .ccta-gold {
  color: var(--blue);
  border-color: var(--blue);
}
.p-features .ccta-gold:hover {
  background: var(--blue);
  color: var(--white);
}
.p-features {
  /* ── Marquee feature blocks (visual showcase) ── */
}
.p-features .marquee {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 56px;
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid #e4eaf4;
}
.p-features .marquee:first-child {
  border-top: none;
}
.p-features .marquee.flip .mq-text {
  order: 2;
}
.p-features .mq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--pale);
  padding: 5px 11px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.p-features .mq-text h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 13px;
  color: var(--ink);
}
.p-features .mq-text h2 em {
  font-style: normal;
  color: var(--blue);
}
.p-features .mq-text p {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.65;
  max-width: 440px;
}
.p-features .mq-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 22px;
}
.p-features .mq-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 99px;
  padding: 5px 12px;
}
.p-features .mq-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.p-features .shot {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(30, 45, 77, 0.32), 0 6px 18px -8px rgba(30, 45, 77, 0.16);
  border: 1px solid #e4eaf4;
  background: #fff;
}
.p-features .shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: #f3f6fc;
  border-bottom: 1px solid #e4eaf4;
}
.p-features .shot-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d6deec;
  display: block;
}
.p-features .shot-bar .url {
  margin-left: 10px;
  font-size: 11px;
  color: var(--light);
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 6px;
  padding: 3px 12px;
  flex: 1;
  max-width: 260px;
}
.p-features .shot img {
  display: block;
  width: 100%;
  height: auto;
}
.p-features .shot.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: repeating-linear-gradient(45deg, #f4f7fd, #f4f7fd 12px, #eef3fb 12px, #eef3fb 24px);
  text-align: center;
}
.p-features .shot.ph div {
  color: var(--light);
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px;
}
.p-features .shot.ph div b {
  display: block;
  color: var(--mid);
  font-size: 14px;
  margin-bottom: 4px;
}
@media (max-width: 860px) {
  .p-features .marquee {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
  }
  .p-features .marquee.flip .mq-text {
    order: 0;
  }
}

/* ── ONLINE-AUCTION-SOFTWARE LANDING PAGE ───────────────────── */
.p-online-auction-software {
  /* ── INTRO EDITORIAL (2-col: body + sticky aside card) ─── */
}
.p-online-auction-software .editorial {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .p-online-auction-software .editorial {
    grid-template-columns: 1fr;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-online-auction-software .editorial .editorial-aside {
  position: sticky;
  top: 86px;
}
@media (max-width: 900px) {
  .p-online-auction-software .editorial .editorial-aside {
    position: static;
  }
}
.p-online-auction-software {
  /* aside card — dark ink2 background with light text + stats list +
     pricing table + CTA */
}
.p-online-auction-software .aside-card {
  background: var(--ink2);
  border-radius: 14px;
  padding: 28px;
  color: rgba(255, 255, 255, 0.85);
}
.p-online-auction-software .aside-card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}
.p-online-auction-software .aside-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.p-online-auction-software .aside-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-online-auction-software .aside-stat-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  min-width: 52px;
}
.p-online-auction-software .aside-stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}
.p-online-auction-software .aside-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 18px 0;
}
.p-online-auction-software .aside-pricing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-online-auction-software .aside-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}
.p-online-auction-software .aside-price-row .label {
  color: rgba(255, 255, 255, 0.5);
}
.p-online-auction-software .aside-price-row .val {
  color: var(--white);
  font-weight: 600;
}
.p-online-auction-software .aside-cta {
  display: block;
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 20px;
  transition: background 0.15s;
}
.p-online-auction-software .aside-cta:hover {
  background: var(--blue2);
}
.p-online-auction-software {
  /* ── FORMATS (numbered horizontal rows: timed / events / marketplace) ── */
}
.p-online-auction-software .format-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.p-online-auction-software .format-item {
  background: var(--white);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.p-online-auction-software .format-item:first-child {
  border-radius: 12px 12px 0 0;
}
.p-online-auction-software .format-item:last-child {
  border-radius: 0 0 12px 12px;
}
.p-online-auction-software .format-item:hover {
  box-shadow: 0 4px 24px rgba(26, 38, 64, 0.08);
  z-index: 1;
  position: relative;
}
.p-online-auction-software .format-row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr auto;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 900px) {
  .p-online-auction-software .format-row {
    grid-template-columns: 40px 1fr;
  }
}
.p-online-auction-software .format-num {
  background: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  padding: 32px 0;
  width: 56px;
}
.p-online-auction-software .format-content {
  padding: 28px 32px;
  border-right: 1px solid var(--pale);
}
.p-online-auction-software .format-content h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.p-online-auction-software .format-content p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-online-auction-software .format-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
  border: 1px solid;
}
.p-online-auction-software {
  /* format-tag color variants */
}
.p-online-auction-software .ft-popular {
  color: var(--blue);
  background: var(--pale);
  border-color: #90b3f5;
}
.p-online-auction-software .ft-reinvented {
  color: var(--ink3);
  background: #eef2fc;
  border-color: #b8c8ef;
}
.p-online-auction-software .ft-marketplace {
  color: var(--green);
  background: #eaf0fc;
  border-color: #9db5e8;
}
.p-online-auction-software .format-details {
  padding: 28px 32px;
  border-right: 1px solid var(--pale);
  align-content: center;
}
@media (max-width: 900px) {
  .p-online-auction-software .format-details {
    display: none;
  }
}
.p-online-auction-software .format-details ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.p-online-auction-software .format-details li {
  font-size: 0.82rem;
  color: var(--mid);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.4;
}
.p-online-auction-software .format-details li i[data-lucide] {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blue);
}
.p-online-auction-software .format-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
  min-width: 160px;
}
@media (max-width: 900px) {
  .p-online-auction-software .format-cta {
    display: none;
  }
}
.p-online-auction-software .format-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.15s;
}
.p-online-auction-software .format-link:hover {
  gap: 10px;
}
.p-online-auction-software {
  /* ── ONE PLATFORM (2-col: copy left, dark visual right) ── */
}
.p-online-auction-software .op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .p-online-auction-software .op-grid {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software .op-visual {
  background: var(--ink2);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.p-online-auction-software .op-visual::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(45, 107, 228, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.p-online-auction-software .op-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.p-online-auction-software .op-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.p-online-auction-software .op-row:last-child {
  border-bottom: none;
}
.p-online-auction-software .op-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-online-auction-software .op-row-icon i[data-lucide] {
  color: #5a94ef;
}
.p-online-auction-software .op-row-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1px;
}
.p-online-auction-software .op-row-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}
.p-online-auction-software .op-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.p-online-auction-software {
  /* ── OWNERSHIP (dark band with 3 cards) ────────────────── */
}
.p-online-auction-software .ownership {
  background: var(--ink2);
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.p-online-auction-software .ownership::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(45, 107, 228, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .p-online-auction-software .ownership {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-online-auction-software .ownership-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  /* dark-bg colour overrides — scoped here so other pages aren't
     affected */
}
.p-online-auction-software .ownership-inner .section-eyebrow {
  color: rgba(255, 255, 255, 0.4);
}
.p-online-auction-software .ownership-inner .section-heading {
  color: var(--white);
}
.p-online-auction-software .ownership-inner .section-sub {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 48px;
  max-width: 560px;
}
.p-online-auction-software .own-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
@media (max-width: 900px) {
  .p-online-auction-software .own-grid {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software .own-card {
  background: rgba(255, 255, 255, 0.04);
  padding: 28px;
  transition: background 0.2s;
}
.p-online-auction-software .own-card:first-child {
  border-radius: 12px 0 0 12px;
}
.p-online-auction-software .own-card:last-child {
  border-radius: 0 12px 12px 0;
}
@media (max-width: 900px) {
  .p-online-auction-software .own-card {
    border-radius: 10px !important;
  }
}
.p-online-auction-software .own-card:hover {
  background: rgba(255, 255, 255, 0.07);
}
.p-online-auction-software .own-card h3 {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}
.p-online-auction-software .own-card p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}
.p-online-auction-software .own-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(45, 107, 228, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.p-online-auction-software .own-card-icon i[data-lucide] {
  color: #5a94ef;
}
.p-online-auction-software {
  /* ── PRICING ANCHOR (2-col card: copy + 3 plan options) ── */
}
.p-online-auction-software .pa-inner {
  background: var(--bg);
  border-radius: 16px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .p-online-auction-software .pa-inner {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software .pa-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.p-online-auction-software .pa-left h2 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink2);
  margin-bottom: 14px;
}
.p-online-auction-software .pa-left p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.65;
}
.p-online-auction-software .pa-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-online-auction-software .pa-option {
  background: var(--white);
  border-radius: 10px;
  padding: 20px 22px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: border-color 0.15s;
}
.p-online-auction-software .pa-option:hover {
  border-color: var(--blue);
}
.p-online-auction-software .pa-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* three plan icon variants — all share blue-on-pale */
}
.p-online-auction-software .pa-option-icon.licence, .p-online-auction-software .pa-option-icon.subscription, .p-online-auction-software .pa-option-icon.managed {
  background: var(--pale);
}
.p-online-auction-software .pa-option-icon.licence i[data-lucide], .p-online-auction-software .pa-option-icon.subscription i[data-lucide], .p-online-auction-software .pa-option-icon.managed i[data-lucide] {
  color: var(--blue);
}
.p-online-auction-software .pa-option-text h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.p-online-auction-software .pa-option-text p {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.35;
}
.p-online-auction-software .pa-option-price {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
}
.p-online-auction-software .pa-cta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  align-items: center;
}

/* ── OAS: AUCTION EVENTS SUBPAGE ──────────────────────────────
 * Generic class selectors for the /online-auction-software/auction-events
 * subpage. No body.p-* scoping.
 *
 * Many helper classes used by this subpage (.proof-strip,
 * .editorial, .editorial-body, .aside-card, .il-card, .feat-card,
 * .pc-inner, .stagger-header, .steps-grid, .event-grid, etc.)
 * are still at root level inside shared.css because the other 5
 * unmigrated OAS subpages also use them. They'll be promoted to
 * components when those subpages migrate.
 *
 * What this file covers — strictly the body.p-X-scoped rules that
 * were specific to auction-events:
 *   .event-hero    — 2-col split hero (renamed from .hero so it
 *                    doesn't collide with .hero-split / .hero-centered
 *                    in components/_hero.scss). Scopes its own h1 /
 *                    .hero-lead / .hero-cta-group / .cta-micro /
 *                    .hero-timeline / .tl-* (timeline widget with
 *                    .tl-lot.closing / .closed states + pulse anim).
 * ──────────────────────────────────────────────────────────── */
.p-online-auction-software__auction-events .editorial {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: start;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .editorial {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software__auction-events .editorial-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.p-online-auction-software__auction-events .p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.p-online-auction-software__auction-events .p:last-child {
  margin-bottom: 0;
}
.p-online-auction-software__auction-events .strong {
  color: var(--ink);
  font-weight: 600;
}
.p-online-auction-software__auction-events .aside-card {
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  border: 1px solid rgba(30, 45, 77, 0.08);
  box-shadow: 0 4px 24px rgba(30, 45, 77, 0.05);
}
.p-online-auction-software__auction-events .aside-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
}
.p-online-auction-software__auction-events .aside-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-online-auction-software__auction-events .aside-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.45;
}
.p-online-auction-software__auction-events .aside-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 6px;
}
.p-online-auction-software__auction-events .aside-divider {
  height: 1px;
  background: rgba(30, 45, 77, 0.07);
  margin: 20px 0;
}
.p-online-auction-software__auction-events .aside-no-fee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--pale);
  border-radius: 8px;
}
.p-online-auction-software__auction-events .aside-no-fee-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}
.p-online-auction-software__auction-events .aside-no-fee-text {
  font-size: 0.8rem;
  color: var(--green);
  line-height: 1.4;
  font-weight: 500;
}
.p-online-auction-software__auction-events .stagger-demo .stagger-header {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .stagger-demo .stagger-header {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software__auction-events .stagger-demo .stagger-diagram {
  background: var(--ink);
  border-radius: 16px;
  padding: 28px;
}
.p-online-auction-software__auction-events .stagger-demo .sd-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 20px;
}
.p-online-auction-software__auction-events .stagger-demo .sd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.p-online-auction-software__auction-events .stagger-demo .sd-row:last-of-type {
  margin-bottom: 0;
}
.p-online-auction-software__auction-events .stagger-demo .sd-lot-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  width: 88px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-online-auction-software__auction-events .stagger-demo .sd-bar-track {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.p-online-auction-software__auction-events .stagger-demo .sd-bar {
  height: 100%;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}
.p-online-auction-software__auction-events .stagger-demo .sd-bar-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.p-online-auction-software__auction-events .stagger-demo .sd-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  width: 52px;
  text-align: right;
  flex-shrink: 0;
}
.p-online-auction-software__auction-events .stagger-demo .sd-closing {
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 16px;
  font-size: 0.7rem;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 7px;
}
.p-online-auction-software__auction-events .stagger-demo .sd-closing::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.p-online-auction-software__auction-events .stagger-demo .steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .stagger-demo .steps-grid {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software__auction-events .stagger-demo .step-card {
  padding: 28px 24px;
  border-radius: 14px;
  border: 1px solid rgba(30, 45, 77, 0.08);
  background: var(--white);
  position: relative;
}
.p-online-auction-software__auction-events .stagger-demo .step-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--pale);
  line-height: 1;
  margin-bottom: 16px;
}
.p-online-auction-software__auction-events .stagger-demo .step-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.p-online-auction-software__auction-events .stagger-demo .step-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 0;
}
.p-online-auction-software__auction-events .stagger-demo .step-connector {
  position: absolute;
  top: 42px;
  right: -26px;
  width: 26px;
  height: 2px;
  background: var(--pale);
  z-index: 1;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .stagger-demo .step-connector {
    background: transparent;
  }
}
.p-online-auction-software__auction-events .stagger-demo .steps-grid .step-card:last-child .step-connector {
  display: none;
}
.p-online-auction-software__auction-events .event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .event-grid {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software__auction-events .event-grid .event-card {
  background: var(--white);
  border-radius: 14px;
  padding: 28px 26px;
  border: 1px solid rgba(30, 45, 77, 0.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.p-online-auction-software__auction-events .event-grid .event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(30, 45, 77, 0.08);
  border-color: var(--blue);
}
.p-online-auction-software__auction-events .event-grid .event-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-online-auction-software__auction-events .event-grid .event-card h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.p-online-auction-software__auction-events .event-grid .event-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
}
.p-online-auction-software__auction-events .event-grid .event-card-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.p-online-auction-software__auction-events .event-grid .event-kw {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--pale);
  padding: 3px 8px;
  border-radius: 4px;
}
.p-online-auction-software__auction-events .event-grid .event-card-typical {
  font-size: 0.72rem;
  color: var(--light);
  margin-top: 2px;
}
.p-online-auction-software__auction-events .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .features-grid {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software__auction-events .features-grid .feat-card {
  padding: 26px 24px;
  border-radius: 12px;
  border: 1px solid rgba(30, 45, 77, 0.08);
  background: var(--bg);
}
.p-online-auction-software__auction-events .features-grid .feat-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.p-online-auction-software__auction-events .features-grid .feat-card h3 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}
.p-online-auction-software__auction-events .features-grid .feat-card p {
  font-size: 0.81rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-online-auction-software__auction-events .features-grid .feat-card .unique-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-pale);
  padding: 3px 7px;
  border-radius: 4px;
  margin-top: 8px;
}
.p-online-auction-software__auction-events .pricing-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 560px) {
  .p-online-auction-software__auction-events .pricing-callout {
    grid-template-columns: 1fr;
  }
}
.p-online-auction-software__auction-events .pricing-callout .pc-left h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.15;
}
.p-online-auction-software__auction-events .pricing-callout .pc-left p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 28px;
}
.p-online-auction-software__auction-events .pricing-callout .pc-comparison {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-online-auction-software__auction-events .pricing-callout .pc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  gap: 16px;
}
.p-online-auction-software__auction-events .pricing-callout .pc-row-label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.p-online-auction-software__auction-events .pricing-callout .pc-row-val {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.p-online-auction-software__auction-events .pricing-callout .pc-row-val.good {
  color: #4ade80;
}
.p-online-auction-software__auction-events .pricing-callout .pc-row-val.bad {
  color: #f87171;
  text-decoration: line-through;
  font-size: 0.82rem;
  font-family: var(--sans);
  font-weight: 400;
}
.p-online-auction-software__auction-events .pricing-callout .pc-row-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}
.p-online-auction-software__auction-events .pricing-callout .pc-disclaimer {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 14px;
  line-height: 1.5;
}
.p-online-auction-software__auction-events .pricing-callout .pc-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.p-online-auction-software__auction-events .pricing-callout .btn-white {
  background: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}
.p-online-auction-software__auction-events .pricing-callout .btn-white:hover {
  background: var(--pale);
}
.p-online-auction-software__auction-events .pricing-callout .btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, color 0.2s;
}
.p-online-auction-software__auction-events .pricing-callout .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 125, 232, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(59, 125, 232, 0.2);
  }
}
/* ── OAS: CHARITY AUCTIONS SUBPAGE ────────────────────────────
 * All rules scoped under body.p-online-auction-software__charity-auctions.
 * Migrated as-is from shared.css; class collisions with sibling
 * subpages are kept isolated by the body-class scope.
 * ──────────────────────────────────────────────────────────── */
.p-online-auction-software__charity-auctions .hero-lead {
  font-size: 1.05rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}
.p-online-auction-software__charity-auctions .hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.p-online-auction-software__charity-auctions .btn-ghost {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 7px;
  border: 1px solid rgba(30, 45, 77, 0.18);
  transition: all 0.15s;
  white-space: nowrap;
}
.p-online-auction-software__charity-auctions .btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.p-online-auction-software__charity-auctions .hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.p-online-auction-software__charity-auctions .trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mid);
}
.p-online-auction-software__charity-auctions .trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.p-online-auction-software__charity-auctions {
  /* Cost card */
}
.p-online-auction-software__charity-auctions .cost-card {
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
}
.p-online-auction-software__charity-auctions .cost-card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.p-online-auction-software__charity-auctions .cost-card-header h3 {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}
.p-online-auction-software__charity-auctions .cost-card-header p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}
.p-online-auction-software__charity-auctions .cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
}
.p-online-auction-software__charity-auctions .cost-row:last-child {
  border-bottom: none;
}
.p-online-auction-software__charity-auctions .cost-row.ppb {
  background: rgba(59, 125, 232, 0.2);
}
.p-online-auction-software__charity-auctions .cost-row.ppb .cost-row-label {
  color: #7db8f7;
  font-weight: 600;
}
.p-online-auction-software__charity-auctions .cost-row.ppb .cost-row-sub {
  color: rgba(125, 184, 247, 0.6);
}
.p-online-auction-software__charity-auctions .cost-row.ppb .cost-row-price {
  color: #7db8f7;
}
.p-online-auction-software__charity-auctions .cost-row-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}
.p-online-auction-software__charity-auctions .cost-row-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}
.p-online-auction-software__charity-auctions .cost-row-price {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.p-online-auction-software__charity-auctions .cost-card-footer {
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.p-online-auction-software__charity-auctions {
  /* ── AUCTION TYPES ── */
}
.p-online-auction-software__charity-auctions .types-section {
  background: var(--bg);
}
.p-online-auction-software__charity-auctions .types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.p-online-auction-software__charity-auctions .type-card {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.p-online-auction-software__charity-auctions .type-card:hover {
  box-shadow: 0 4px 20px rgba(30, 45, 77, 0.08);
  border-color: #c8daf8;
}
.p-online-auction-software__charity-auctions .type-card h3 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.p-online-auction-software__charity-auctions .type-card p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.55;
  flex: 1;
}
.p-online-auction-software__charity-auctions .type-card p:last-child {
  margin-bottom: 0;
}
.p-online-auction-software__charity-auctions .type-icon {
  font-size: 1.4rem;
}
.p-online-auction-software__charity-auctions .type-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--pale);
}
.p-online-auction-software__charity-auctions .type-kw {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--light);
  background: var(--bg);
  border: 1px solid var(--pale);
  border-radius: 4px;
  padding: 2px 7px;
}
.p-online-auction-software__charity-auctions {
  /* ── FEATURES ── */
}
.p-online-auction-software__charity-auctions .features-section {
  background: var(--white);
}
.p-online-auction-software__charity-auctions .features-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.p-online-auction-software__charity-auctions .features-copy h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 16px;
}
.p-online-auction-software__charity-auctions .features-copy > p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 28px;
}
.p-online-auction-software__charity-auctions .feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-online-auction-software__charity-auctions .feat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.p-online-auction-software__charity-auctions .feat-item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.p-online-auction-software__charity-auctions .feat-item span {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-online-auction-software__charity-auctions .feat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 6px;
}
.p-online-auction-software__charity-auctions .features-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-online-auction-software__charity-auctions .feat-card {
  background: var(--bg);
  border: 1px solid var(--pale);
  border-radius: 10px;
  padding: 18px 20px;
}
.p-online-auction-software__charity-auctions .feat-card h4 {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.p-online-auction-software__charity-auctions .feat-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.55;
}
.p-online-auction-software__charity-auctions {
  /* ── COST SECTION ── */
}
.p-online-auction-software__charity-auctions .cost-section {
  background: var(--bg);
}
.p-online-auction-software__charity-auctions .cost-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.p-online-auction-software__charity-auctions .cost-copy > p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 18px;
}
.p-online-auction-software__charity-auctions .savings-callout {
  background: var(--pale);
  border: 1px solid #c8daf8;
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 20px;
}
.p-online-auction-software__charity-auctions .savings-callout p {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.6;
}
.p-online-auction-software__charity-auctions .savings-callout strong {
  font-weight: 700;
  color: var(--blue);
}
.p-online-auction-software__charity-auctions .cost-table-wrap {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 14px;
  overflow: hidden;
}
.p-online-auction-software__charity-auctions .cost-table {
  width: 100%;
  border-collapse: collapse;
}
.p-online-auction-software__charity-auctions .cost-table thead tr {
  background: var(--ink);
}
.p-online-auction-software__charity-auctions .cost-table thead th {
  padding: 13px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  text-align: left;
}
.p-online-auction-software__charity-auctions .cost-table thead th:first-child {
  border-radius: 13px 0 0 0;
}
.p-online-auction-software__charity-auctions .cost-table thead th:last-child {
  border-radius: 0 13px 0 0;
}
.p-online-auction-software__charity-auctions .cost-table thead th.ppb-col {
  background: var(--blue);
}
.p-online-auction-software__charity-auctions .cost-table tbody tr {
  border-bottom: 1px solid var(--pale);
}
.p-online-auction-software__charity-auctions .cost-table tbody tr:last-child {
  border-bottom: none;
}
.p-online-auction-software__charity-auctions .cost-table tbody td {
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--mid);
  vertical-align: middle;
}
.p-online-auction-software__charity-auctions .cost-table tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
}
.p-online-auction-software__charity-auctions .cost-table tbody td.ppb-col {
  background: rgba(59, 125, 232, 0.04);
}
.p-online-auction-software__charity-auctions .check-y {
  color: var(--grass);
  font-weight: 700;
}
.p-online-auction-software__charity-auctions .check-n {
  color: #ccc;
}
.p-online-auction-software__charity-auctions .check-p {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 600;
}
.p-online-auction-software__charity-auctions {
  /* ── WHO ── */
}
.p-online-auction-software__charity-auctions .who-section {
  background: var(--white);
}
.p-online-auction-software__charity-auctions .who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.p-online-auction-software__charity-auctions .who-card {
  border: 1px solid var(--pale);
  border-radius: 14px;
  padding: 28px;
  background: var(--bg);
}
.p-online-auction-software__charity-auctions .who-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.p-online-auction-software__charity-auctions .who-card > p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 16px;
}
.p-online-auction-software__charity-auctions .who-uses {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-online-auction-software__charity-auctions .who-uses li {
  font-size: 0.8rem;
  color: var(--mid);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.p-online-auction-software__charity-auctions .who-uses li::before {
  content: "—";
  color: var(--light);
  flex-shrink: 0;
}
.p-online-auction-software__charity-auctions {
  /* ── PRICING ── */
}
.p-online-auction-software__charity-auctions .pricing-section {
  background: var(--bg);
}
.p-online-auction-software__charity-auctions .pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.p-online-auction-software__charity-auctions .price-card {
  border: 1px solid var(--pale);
  border-radius: 14px;
  padding: 28px;
  background: var(--white);
}
.p-online-auction-software__charity-auctions .price-card.featured {
  border-color: var(--blue);
  box-shadow: 0 4px 24px rgba(59, 125, 232, 0.12);
}
.p-online-auction-software__charity-auctions .price-card.featured a {
  background: var(--blue);
  color: var(--white);
}
.p-online-auction-software__charity-auctions .price-card.featured a:hover {
  background: var(--blue2);
}
.p-online-auction-software__charity-auctions .price-card:not(.featured) a {
  background: var(--pale);
  color: var(--blue);
}
.p-online-auction-software__charity-auctions .price-card:not(.featured) a:hover {
  background: var(--blue);
  color: var(--white);
}
.p-online-auction-software__charity-auctions .price-card h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.p-online-auction-software__charity-auctions .price-card a {
  display: block;
  text-align: center;
  padding: 11px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.p-online-auction-software__charity-auctions .price-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.p-online-auction-software__charity-auctions .price-val {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: 12px 0 4px;
}
.p-online-auction-software__charity-auctions .price-val span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mid);
}
.p-online-auction-software__charity-auctions .price-note {
  font-size: 0.78rem;
  color: var(--light);
  margin-bottom: 18px;
}
.p-online-auction-software__charity-auctions .price-desc {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 20px;
}
.p-online-auction-software__charity-auctions .price-note-box {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-online-auction-software__charity-auctions .price-note-box strong {
  color: var(--ink);
}
.p-online-auction-software__charity-auctions {
  /* ── FAQ ── */
  /* ── CTA ── */
}
.p-online-auction-software__charity-auctions .cta-section {
  background: var(--ink);
  padding: 80px 40px;
}
.p-online-auction-software__charity-auctions .cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.p-online-auction-software__charity-auctions .cta-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.p-online-auction-software__charity-auctions .cta-inner p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: 32px;
}
.p-online-auction-software__charity-auctions .cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.p-online-auction-software__charity-auctions .cta-primary {
  background: var(--blue);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s;
}
.p-online-auction-software__charity-auctions .cta-primary:hover {
  background: var(--blue2);
}
.p-online-auction-software__charity-auctions .cta-ghost {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.15s;
}
.p-online-auction-software__charity-auctions .cta-ghost:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.p-online-auction-software__charity-auctions {
  /* ── RESPONSIVE ── */
}
@media (max-width: 1024px) {
  .p-online-auction-software__charity-auctions .hero {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .p-online-auction-software__charity-auctions .types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-online-auction-software__charity-auctions .features-split {
    grid-template-columns: 1fr;
  }
  .p-online-auction-software__charity-auctions .cost-split {
    grid-template-columns: 1fr;
  }
  .p-online-auction-software__charity-auctions .who-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-online-auction-software__charity-auctions .pricing-cards {
    grid-template-columns: 1fr;
  }
  .p-online-auction-software__charity-auctions .faq-grid {
    grid-template-columns: 1fr;
  }
  .p-online-auction-software__charity-auctions .il-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .p-online-auction-software__charity-auctions .hero {
    padding: 32px 20px 60px;
  }
  .p-online-auction-software__charity-auctions .types-grid {
    grid-template-columns: 1fr;
  }
  .p-online-auction-software__charity-auctions .who-grid {
    grid-template-columns: 1fr;
  }
  .p-online-auction-software__charity-auctions .il-grid {
    grid-template-columns: 1fr;
  }
}

/* ── OAS: ESTATE SALES SUBPAGE ────────────────────────────────
 * All rules scoped under body.p-online-auction-software__estate-sales.
 * Migrated as-is from shared.css; class collisions with sibling
 * subpages are kept isolated by the body-class scope.
 * ──────────────────────────────────────────────────────────── */
body.p-online-auction-software__estate-sales {
  /* ── HERO ── */
}
body.p-online-auction-software__estate-sales .hero-split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
}
@media (max-width: 560px) {
  body.p-online-auction-software__estate-sales .hero-split {
    grid-template-columns: 1fr;
  }
}
body.p-online-auction-software__estate-sales {
  /* Cost card */
}
body.p-online-auction-software__estate-sales .cost-card {
  background: var(--ink);
  border-radius: 14px;
  padding: 28px;
  color: white;
}
body.p-online-auction-software__estate-sales .cost-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 20px;
}
body.p-online-auction-software__estate-sales .cost-scenario {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.p-online-auction-software__estate-sales .cost-scenario:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
body.p-online-auction-software__estate-sales .cost-scenario-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
body.p-online-auction-software__estate-sales .cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
body.p-online-auction-software__estate-sales .cost-row-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}
body.p-online-auction-software__estate-sales .cost-row-val {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
}
body.p-online-auction-software__estate-sales .cost-row-val.red {
  color: #f87171;
}
body.p-online-auction-software__estate-sales .cost-row-val.green {
  color: #4ade80;
}
body.p-online-auction-software__estate-sales .cost-row-val.neutral {
  color: rgba(255, 255, 255, 0.8);
}
body.p-online-auction-software__estate-sales .cost-total {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
body.p-online-auction-software__estate-sales .cost-total-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.p-online-auction-software__estate-sales .cost-total-val {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
}
body.p-online-auction-software__estate-sales .cost-total-val.red {
  color: #f87171;
}
body.p-online-auction-software__estate-sales .cost-total-val.green {
  color: #4ade80;
}
body.p-online-auction-software__estate-sales .cost-note {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 14px;
  line-height: 1.5;
}
body.p-online-auction-software__estate-sales {
  /* ── SHARED SECTION ── */
}
body.p-online-auction-software__estate-sales h2.section-h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}
body.p-online-auction-software__estate-sales .section-body {
  font-size: 0.92rem;
  color: var(--mid);
  line-height: 1.8;
}
body.p-online-auction-software__estate-sales .section-body p {
  margin-bottom: 14px;
}
body.p-online-auction-software__estate-sales .section-body p:last-child {
  margin-bottom: 0;
}
body.p-online-auction-software__estate-sales .section-body strong {
  color: var(--ink);
  font-weight: 600;
}
body.p-online-auction-software__estate-sales {
  /* ── PAIN SECTION ── */
}
body.p-online-auction-software__estate-sales .pain-section {
  background: var(--bg);
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
  padding: 72px 40px;
}
body.p-online-auction-software__estate-sales .pain-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 560px) {
  body.p-online-auction-software__estate-sales .pain-inner {
    grid-template-columns: 1fr;
    padding-left: 20px;
    padding-right: 20px;
  }
}
body.p-online-auction-software__estate-sales .pain-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.p-online-auction-software__estate-sales .pain-point {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
body.p-online-auction-software__estate-sales .pain-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fdecea;
  border: 1px solid #f5a8a8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
}
body.p-online-auction-software__estate-sales .pain-text h4 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
body.p-online-auction-software__estate-sales .pain-text p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.55;
}
body.p-online-auction-software__estate-sales {
  /* ── HOW IT WORKS ── */
}
body.p-online-auction-software__estate-sales .how-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 40px;
}
body.p-online-auction-software__estate-sales .how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}
body.p-online-auction-software__estate-sales .how-grid::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 14%;
  right: 14%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--pale) 0%, var(--blue) 50%, var(--pale) 100%);
  z-index: 0;
}
body.p-online-auction-software__estate-sales .how-step {
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
body.p-online-auction-software__estate-sales .how-step:hover .how-num {
  border-color: var(--blue);
  background: var(--pale);
}
body.p-online-auction-software__estate-sales .how-step h4 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
body.p-online-auction-software__estate-sales .how-step p {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.6;
}
body.p-online-auction-software__estate-sales .how-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--blue);
  transition: border-color 0.2s, background 0.2s;
}
body.p-online-auction-software__estate-sales {
  /* ── FEATURES ── */
}
body.p-online-auction-software__estate-sales .features-section {
  background: var(--bg);
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
  padding: 72px 40px;
}
body.p-online-auction-software__estate-sales .features-inner {
  max-width: var(--max);
  margin: 0 auto;
}
body.p-online-auction-software__estate-sales .features-intro {
  max-width: 600px;
  margin-bottom: 48px;
}
body.p-online-auction-software__estate-sales .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
body.p-online-auction-software__estate-sales .feature-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
body.p-online-auction-software__estate-sales .feature-card:hover {
  border-color: rgba(59, 125, 232, 0.25);
  box-shadow: 0 4px 20px rgba(30, 45, 77, 0.07);
  transform: translateY(-2px);
}
body.p-online-auction-software__estate-sales .feature-card h3 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
body.p-online-auction-software__estate-sales .feature-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
}
body.p-online-auction-software__estate-sales .feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--pale);
  border: 1px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
body.p-online-auction-software__estate-sales {
  /* ── Q&A SECTION ── */
}
body.p-online-auction-software__estate-sales .qa-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 40px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
body.p-online-auction-software__estate-sales .qa-nav {
  position: sticky;
  top: 88px;
}
body.p-online-auction-software__estate-sales .qa-nav-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 14px;
}
body.p-online-auction-software__estate-sales .qa-nav-link {
  display: block;
  font-size: 0.82rem;
  color: var(--light);
  padding: 9px 0 9px 16px;
  border-left: 2px solid rgba(30, 45, 77, 0.08);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: 2px;
}
body.p-online-auction-software__estate-sales .qa-nav-link:hover {
  color: var(--mid);
  border-left-color: var(--light);
}
body.p-online-auction-software__estate-sales .qa-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.p-online-auction-software__estate-sales .qa-item {
  padding-top: 0;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
  scroll-margin-top: var(--sticky-top);
}
body.p-online-auction-software__estate-sales .qa-item:first-child {
  padding-top: 0;
}
body.p-online-auction-software__estate-sales .qa-item:last-child {
  border-bottom: none;
}
body.p-online-auction-software__estate-sales .qa-q {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 12px;
}
body.p-online-auction-software__estate-sales .qa-a {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.8;
}
body.p-online-auction-software__estate-sales .qa-a p {
  margin-bottom: 10px;
}
body.p-online-auction-software__estate-sales .qa-a p:last-child {
  margin-bottom: 0;
}
body.p-online-auction-software__estate-sales .qa-a strong {
  color: var(--ink);
  font-weight: 600;
}
body.p-online-auction-software__estate-sales .qa-a ul {
  list-style: none;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.p-online-auction-software__estate-sales .qa-a ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.87rem;
  color: var(--mid);
}
body.p-online-auction-software__estate-sales .qa-a ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
body.p-online-auction-software__estate-sales {
  /* ── CTA SECTION ── */
}
body.p-online-auction-software__estate-sales .cta-section {
  background: var(--ink);
  padding: 72px 40px;
  position: relative;
  overflow: hidden;
}
body.p-online-auction-software__estate-sales .cta-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 125, 232, 0.12), transparent 70%);
}
body.p-online-auction-software__estate-sales .cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
body.p-online-auction-software__estate-sales .cta-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}
body.p-online-auction-software__estate-sales .cta-text p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 8px;
}
body.p-online-auction-software__estate-sales .cta-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 24px;
}
body.p-online-auction-software__estate-sales .cta-plan {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.p-online-auction-software__estate-sales .cta-plan-name {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 3px;
}
body.p-online-auction-software__estate-sales .cta-plan-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}
body.p-online-auction-software__estate-sales .cta-plan-price {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}
body.p-online-auction-software__estate-sales .cta-plan-price span {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  text-align: right;
}
body.p-online-auction-software__estate-sales .cta-btns {
  display: flex;
  gap: 12px;
}
body.p-online-auction-software__estate-sales .cta-btn-primary {
  background: var(--blue);
  color: white;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 13px 28px;
  border-radius: 7px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.15s;
}
body.p-online-auction-software__estate-sales .cta-btn-primary:hover {
  background: var(--blue2);
  transform: translateY(-1px);
}
body.p-online-auction-software__estate-sales .cta-btn-primary svg {
  flex-shrink: 0;
}
body.p-online-auction-software__estate-sales .cta-btn-secondary {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.15s;
}
body.p-online-auction-software__estate-sales .cta-btn-secondary:hover {
  color: white;
}
body.p-online-auction-software__estate-sales .cta-checklist {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 28px;
}
body.p-online-auction-software__estate-sales .cta-checklist-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 20px;
}
body.p-online-auction-software__estate-sales .cta-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
body.p-online-auction-software__estate-sales .cta-check-item:last-child {
  margin-bottom: 0;
}
body.p-online-auction-software__estate-sales .cta-check-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
body.p-online-auction-software__estate-sales .cta-check-item span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}
body.p-online-auction-software__estate-sales {
  /* ── RESPONSIVE ── */
}
@media (max-width: 960px) {
  body.p-online-auction-software__estate-sales .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.p-online-auction-software__estate-sales .pain-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.p-online-auction-software__estate-sales .how-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  body.p-online-auction-software__estate-sales .how-grid::before {
    display: none;
  }
  body.p-online-auction-software__estate-sales .features-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.p-online-auction-software__estate-sales .qa-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.p-online-auction-software__estate-sales .qa-nav {
    display: none;
  }
  body.p-online-auction-software__estate-sales .cta-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.p-online-auction-software__estate-sales .related-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  body.p-online-auction-software__estate-sales .hero,
  body.p-online-auction-software__estate-sales .pain-section,
  body.p-online-auction-software__estate-sales .how-section,
  body.p-online-auction-software__estate-sales .features-section,
  body.p-online-auction-software__estate-sales .cta-section,
  body.p-online-auction-software__estate-sales .related-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.p-online-auction-software__estate-sales .qa-section {
    padding: 60px 20px;
  }
  body.p-online-auction-software__estate-sales .features-grid,
  body.p-online-auction-software__estate-sales .related-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__estate-sales .how-grid {
    grid-template-columns: 1fr;
  }
}

/* ── OAS: MARKETPLACE WEBSTORE SUBPAGE ────────────────────────
 * All rules scoped under body.p-online-auction-software__marketplace-webstore.
 * Migrated as-is from shared.css; class collisions with sibling
 * subpages are kept isolated by the body-class scope.
 * ──────────────────────────────────────────────────────────── */
body.p-online-auction-software__marketplace-webstore {
  /* ── HERO ── */
}
body.p-online-auction-software__marketplace-webstore .btn-ghost {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 7px;
  border: 1px solid rgba(30, 45, 77, 0.18);
  transition: all 0.15s;
  white-space: nowrap;
}
body.p-online-auction-software__marketplace-webstore .btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}
body.p-online-auction-software__marketplace-webstore {
  /* Hero right — mode switcher card */
}
body.p-online-auction-software__marketplace-webstore .hero-card {
  background: var(--bg);
  border: 1px solid var(--pale);
  border-radius: 16px;
  overflow: hidden;
  max-width: 420px;
  margin-left: auto;
}
body.p-online-auction-software__marketplace-webstore .hero-card-tabs {
  display: flex;
  border-bottom: 1px solid var(--pale);
}
body.p-online-auction-software__marketplace-webstore .hero-tab {
  flex: 1;
  padding: 14px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mid);
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
body.p-online-auction-software__marketplace-webstore .hero-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: var(--white);
}
body.p-online-auction-software__marketplace-webstore .hero-tab-panel {
  display: none;
  padding: 24px;
}
body.p-online-auction-software__marketplace-webstore .hero-tab-panel.active {
  display: block;
}
body.p-online-auction-software__marketplace-webstore .hero-tab-panel h3 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
body.p-online-auction-software__marketplace-webstore .use-case-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.p-online-auction-software__marketplace-webstore .use-case-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.45;
}
body.p-online-auction-software__marketplace-webstore .use-case-list li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--grass-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%231a6b45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.p-online-auction-software__marketplace-webstore {
  /* ── WEBSTORE SECTION ── */
}
body.p-online-auction-software__marketplace-webstore .webstore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
body.p-online-auction-software__marketplace-webstore .ws-card {
  background: var(--bg);
  border: 1px solid var(--pale);
  border-radius: 12px;
  padding: 28px;
}
body.p-online-auction-software__marketplace-webstore .ws-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
body.p-online-auction-software__marketplace-webstore .ws-card p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.6;
}
body.p-online-auction-software__marketplace-webstore .ws-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ink);
}
body.p-online-auction-software__marketplace-webstore .ws-card-icon svg {
  width: 22px;
  height: 22px;
}
body.p-online-auction-software__marketplace-webstore .ws-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
body.p-online-auction-software__marketplace-webstore .ws-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--pale);
}
body.p-online-auction-software__marketplace-webstore .ws-feat span {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.45;
}
body.p-online-auction-software__marketplace-webstore .ws-feat strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
body.p-online-auction-software__marketplace-webstore .ws-feat-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--grass-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l4 4 6-6' stroke='%231a6b45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.p-online-auction-software__marketplace-webstore {
  /* ── MARKETPLACE SECTION ── */
}
body.p-online-auction-software__marketplace-webstore .mp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
body.p-online-auction-software__marketplace-webstore .mp-copy p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 20px;
}
body.p-online-auction-software__marketplace-webstore .mp-revenue-box {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}
body.p-online-auction-software__marketplace-webstore .mp-revenue-box h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
body.p-online-auction-software__marketplace-webstore .revenue-stream {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pale);
}
body.p-online-auction-software__marketplace-webstore .revenue-stream:last-child {
  border-bottom: none;
}
body.p-online-auction-software__marketplace-webstore .rs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
body.p-online-auction-software__marketplace-webstore .rs-label {
  font-size: 0.84rem;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
body.p-online-auction-software__marketplace-webstore .rs-note {
  font-size: 0.78rem;
  color: var(--light);
}
body.p-online-auction-software__marketplace-webstore .mp-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.p-online-auction-software__marketplace-webstore .mp-feat-card {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 12px;
  padding: 22px;
}
body.p-online-auction-software__marketplace-webstore .mp-feat-card h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
body.p-online-auction-software__marketplace-webstore .mp-feat-card p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.55;
}
body.p-online-auction-software__marketplace-webstore {
  /* ── COMBINE SECTION ── */
}
body.p-online-auction-software__marketplace-webstore .combine-banner {
  background: linear-gradient(135deg, var(--ink) 0%, #2d4a80 100%);
  border-radius: 16px;
  padding: 52px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
body.p-online-auction-software__marketplace-webstore .combine-banner h2 {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
body.p-online-auction-software__marketplace-webstore .combine-banner p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  max-width: 480px;
}
body.p-online-auction-software__marketplace-webstore .combine-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}
body.p-online-auction-software__marketplace-webstore .combine-eg {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 10px;
}
body.p-online-auction-software__marketplace-webstore .combine-eg-icon {
  font-size: 1.1rem;
}
body.p-online-auction-software__marketplace-webstore {
  /* ── VS SECTION ── */
}
body.p-online-auction-software__marketplace-webstore .vs-section {
  background: var(--bg);
}
body.p-online-auction-software__marketplace-webstore .vs-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--pale);
  background: var(--white);
}
body.p-online-auction-software__marketplace-webstore .vs-table {
  width: 100%;
  border-collapse: collapse;
}
body.p-online-auction-software__marketplace-webstore .vs-table thead tr {
  background: var(--ink);
}
body.p-online-auction-software__marketplace-webstore .vs-table thead th {
  padding: 16px 20px;
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  text-align: left;
}
body.p-online-auction-software__marketplace-webstore .vs-table thead th:first-child {
  border-radius: 13px 0 0 0;
}
body.p-online-auction-software__marketplace-webstore .vs-table thead th:last-child {
  border-radius: 0 13px 0 0;
}
body.p-online-auction-software__marketplace-webstore .vs-table thead th.ppb-col {
  background: var(--blue);
}
body.p-online-auction-software__marketplace-webstore .vs-table tbody tr {
  border-bottom: 1px solid var(--pale);
}
body.p-online-auction-software__marketplace-webstore .vs-table tbody tr:last-child {
  border-bottom: none;
}
body.p-online-auction-software__marketplace-webstore .vs-table tbody tr:hover {
  background: var(--bg);
}
body.p-online-auction-software__marketplace-webstore .vs-table tbody td {
  padding: 14px 20px;
  font-size: 0.875rem;
  color: var(--mid);
  vertical-align: middle;
}
body.p-online-auction-software__marketplace-webstore .vs-table tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
}
body.p-online-auction-software__marketplace-webstore .vs-table tbody td.ppb-col {
  background: rgba(59, 125, 232, 0.04);
}
body.p-online-auction-software__marketplace-webstore .check-y {
  color: var(--grass);
  font-weight: 700;
  font-size: 1rem;
}
body.p-online-auction-software__marketplace-webstore .check-n {
  color: #ccc;
  font-size: 1rem;
}
body.p-online-auction-software__marketplace-webstore .check-p {
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 600;
}
body.p-online-auction-software__marketplace-webstore {
  /* ── PRICING SUMMARY ── */
}
body.p-online-auction-software__marketplace-webstore .pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
body.p-online-auction-software__marketplace-webstore .price-card {
  border: 1px solid var(--pale);
  border-radius: 14px;
  padding: 28px;
  background: var(--bg);
}
body.p-online-auction-software__marketplace-webstore .price-card.featured {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 4px 24px rgba(59, 125, 232, 0.12);
}
body.p-online-auction-software__marketplace-webstore .price-card.featured a {
  background: var(--blue);
  color: var(--white);
}
body.p-online-auction-software__marketplace-webstore .price-card.featured a:hover {
  background: var(--blue2);
}
body.p-online-auction-software__marketplace-webstore .price-card:not(.featured) a {
  background: var(--pale);
  color: var(--blue);
}
body.p-online-auction-software__marketplace-webstore .price-card:not(.featured) a:hover {
  background: var(--blue);
  color: var(--white);
}
body.p-online-auction-software__marketplace-webstore .price-card h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
body.p-online-auction-software__marketplace-webstore .price-card .price {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: 12px 0 4px;
}
body.p-online-auction-software__marketplace-webstore .price-card .price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mid);
}
body.p-online-auction-software__marketplace-webstore .price-card .price-note {
  font-size: 0.78rem;
  color: var(--light);
  margin-bottom: 20px;
}
body.p-online-auction-software__marketplace-webstore .price-card .price-desc {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 20px;
}
body.p-online-auction-software__marketplace-webstore .price-card a {
  display: block;
  text-align: center;
  padding: 11px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
body.p-online-auction-software__marketplace-webstore .price-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
body.p-online-auction-software__marketplace-webstore {
  /* ── CTA ── */
}
body.p-online-auction-software__marketplace-webstore .cta-section {
  background: var(--ink);
  padding: 80px 40px;
}
body.p-online-auction-software__marketplace-webstore .cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
body.p-online-auction-software__marketplace-webstore .cta-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
body.p-online-auction-software__marketplace-webstore .cta-inner p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: 32px;
}
body.p-online-auction-software__marketplace-webstore .cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.p-online-auction-software__marketplace-webstore .cta-primary {
  background: var(--blue);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s;
}
body.p-online-auction-software__marketplace-webstore .cta-primary:hover {
  background: var(--blue2);
}
body.p-online-auction-software__marketplace-webstore .cta-ghost {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.15s;
}
body.p-online-auction-software__marketplace-webstore .cta-ghost:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
body.p-online-auction-software__marketplace-webstore {
  /* ── RESPONSIVE ── */
}
@media (max-width: 1024px) {
  body.p-online-auction-software__marketplace-webstore .hero {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  body.p-online-auction-software__marketplace-webstore .webstore-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__marketplace-webstore .mp-split {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__marketplace-webstore .combine-banner {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__marketplace-webstore .pricing-cards {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__marketplace-webstore .faq-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__marketplace-webstore .il-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  body.p-online-auction-software__marketplace-webstore .hero {
    padding: 32px 20px 60px;
  }
  body.p-online-auction-software__marketplace-webstore .ws-feature-row {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__marketplace-webstore .combine-banner {
    padding: 36px 28px;
  }
  body.p-online-auction-software__marketplace-webstore .il-grid {
    grid-template-columns: 1fr;
  }
}

/* ── OAS: ONLINE TIMED AUCTIONS SUBPAGE ───────────────────────
 * All rules scoped under body.p-online-auction-software__online-timed-auctions.
 * Migrated as-is from shared.css; class collisions with sibling
 * subpages are kept isolated by the body-class scope.
 * Note: .cross / .partial were at root in shared.css but are only
 * used by this subpage's phtml; scoped here.
 * ──────────────────────────────────────────────────────────── */
body.p-online-auction-software__online-timed-auctions {
  /* Hero stats card */
}
body.p-online-auction-software__online-timed-auctions .hero-stats {
  background: var(--ink);
  border-radius: 16px;
  padding: 32px;
  position: sticky;
  top: 88px;
  max-width: 420px;
  margin-left: auto;
}
body.p-online-auction-software__online-timed-auctions .hero-stat {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.p-online-auction-software__online-timed-auctions .hero-stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
body.p-online-auction-software__online-timed-auctions .hero-stat:first-child {
  padding-top: 0;
}
body.p-online-auction-software__online-timed-auctions .stat-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
body.p-online-auction-software__online-timed-auctions .stat-num .accent {
  color: var(--blue2);
}
body.p-online-auction-software__online-timed-auctions .stat-label {
  font-size: 0.8rem;
  color: var(--light);
  line-height: 1.4;
}
body.p-online-auction-software__online-timed-auctions .hero-demo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue2);
  text-decoration: none;
  transition: gap 0.2s;
}
body.p-online-auction-software__online-timed-auctions .hero-demo-link:hover {
  gap: 14px;
}
body.p-online-auction-software__online-timed-auctions {
  /* ── WHAT IS SECTION ── */
}
body.p-online-auction-software__online-timed-auctions .what-is {
  background: var(--bg);
}
body.p-online-auction-software__online-timed-auctions .what-is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
body.p-online-auction-software__online-timed-auctions .what-is-copy p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 20px;
}
body.p-online-auction-software__online-timed-auctions .what-is-copy p:last-child {
  margin-bottom: 0;
}
body.p-online-auction-software__online-timed-auctions .what-is-copy strong {
  color: var(--ink);
  font-weight: 600;
}
body.p-online-auction-software__online-timed-auctions .vs-box {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid rgba(30, 45, 77, 0.08);
  overflow: hidden;
}
body.p-online-auction-software__online-timed-auctions .vs-header {
  background: var(--ink);
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
body.p-online-auction-software__online-timed-auctions .vs-header span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
}
body.p-online-auction-software__online-timed-auctions .vs-header span:last-child {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body.p-online-auction-software__online-timed-auctions .vs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-bottom: 1px solid var(--pale);
}
body.p-online-auction-software__online-timed-auctions .vs-row:last-child {
  border-bottom: none;
}
body.p-online-auction-software__online-timed-auctions .vs-cell {
  padding: 14px 24px;
  font-size: 0.85rem;
  line-height: 1.5;
}
body.p-online-auction-software__online-timed-auctions .vs-cell:last-child {
  border-left: 1px solid var(--pale);
  color: var(--mid);
}
body.p-online-auction-software__online-timed-auctions .vs-cell.positive {
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
body.p-online-auction-software__online-timed-auctions .vs-icon {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
  width: 14px;
  height: 14px;
}
body.p-online-auction-software__online-timed-auctions {
  /* ── HOW IT WORKS (STEPS) ── */
}
body.p-online-auction-software__online-timed-auctions .how-it-works {
  background: var(--white);
}
body.p-online-auction-software__online-timed-auctions .steps-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}
body.p-online-auction-software__online-timed-auctions .steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.p-online-auction-software__online-timed-auctions .step-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding-bottom: 40px;
  position: relative;
  cursor: pointer;
}
body.p-online-auction-software__online-timed-auctions .step-item:last-child {
  padding-bottom: 0;
}
body.p-online-auction-software__online-timed-auctions .step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  width: 2px;
  height: calc(100% - 56px);
  background: linear-gradient(180deg, var(--pale) 0%, transparent 100%);
}
body.p-online-auction-software__online-timed-auctions .step-item.active:not(:last-child)::after {
  background: linear-gradient(180deg, var(--blue) 0%, var(--pale) 100%);
}
body.p-online-auction-software__online-timed-auctions .step-item.active .step-num {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
body.p-online-auction-software__online-timed-auctions .step-item.active .step-content h3 {
  color: var(--ink);
}
body.p-online-auction-software__online-timed-auctions .step-item.active .step-content p {
  max-height: 200px;
  opacity: 1;
}
body.p-online-auction-software__online-timed-auctions .step-item.active .step-doc-link {
  opacity: 1;
}
body.p-online-auction-software__online-timed-auctions .step-num-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.p-online-auction-software__online-timed-auctions .step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pale);
  border: 2px solid var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mid);
  transition: all 0.25s;
  flex-shrink: 0;
}
body.p-online-auction-software__online-timed-auctions .step-content {
  padding-top: 12px;
}
body.p-online-auction-software__online-timed-auctions .step-content h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mid);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
body.p-online-auction-software__online-timed-auctions .step-content p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}
body.p-online-auction-software__online-timed-auctions .step-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.25s;
}
body.p-online-auction-software__online-timed-auctions .step-doc-link:hover {
  text-decoration: underline;
}
body.p-online-auction-software__online-timed-auctions {
  /* Step preview panel */
}
body.p-online-auction-software__online-timed-auctions .step-preview {
  background: var(--ink);
  border-radius: 14px;
  padding: 28px;
  position: sticky;
  top: 88px;
}
body.p-online-auction-software__online-timed-auctions .step-preview-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue2);
  margin-bottom: 16px;
}
body.p-online-auction-software__online-timed-auctions .step-preview-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.2;
}
body.p-online-auction-software__online-timed-auctions .preview-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.p-online-auction-software__online-timed-auctions .preview-field {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  padding: 10px 14px;
}
body.p-online-auction-software__online-timed-auctions .preview-field label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue2);
  display: block;
  margin-bottom: 4px;
}
body.p-online-auction-software__online-timed-auctions .preview-field span {
  font-size: 0.85rem;
  color: var(--white);
}
body.p-online-auction-software__online-timed-auctions .preview-field span.placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
body.p-online-auction-software__online-timed-auctions .preview-submit {
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  width: 100%;
  padding: 12px;
  border-radius: 7px;
  text-align: center;
  margin-top: 16px;
  display: block;
}
body.p-online-auction-software__online-timed-auctions {
  /* ── FEATURES GRID ── */
}
body.p-online-auction-software__online-timed-auctions .features-section {
  background: var(--bg);
}
body.p-online-auction-software__online-timed-auctions .features-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
}
body.p-online-auction-software__online-timed-auctions .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(30, 45, 77, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
body.p-online-auction-software__online-timed-auctions .feature-card {
  background: var(--white);
  padding: 28px 24px;
  transition: background 0.15s;
}
body.p-online-auction-software__online-timed-auctions .feature-card:hover {
  background: var(--pale);
}
body.p-online-auction-software__online-timed-auctions .feature-card:hover .fc-doc {
  opacity: 1;
}
body.p-online-auction-software__online-timed-auctions .feature-card h3 {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
body.p-online-auction-software__online-timed-auctions .feature-card p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.6;
}
body.p-online-auction-software__online-timed-auctions .feature-card .fc-doc {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.15s;
}
body.p-online-auction-software__online-timed-auctions .fc-icon {
  width: 40px;
  height: 40px;
  background: rgba(59, 125, 232, 0.08);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--blue);
}
body.p-online-auction-software__online-timed-auctions {
  /* ── VS COMPETITORS ── */
}
body.p-online-auction-software__online-timed-auctions .vs-section {
  background: var(--white);
}
body.p-online-auction-software__online-timed-auctions .vs-table-wrap {
  overflow-x: auto;
}
body.p-online-auction-software__online-timed-auctions .vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
body.p-online-auction-software__online-timed-auctions .vs-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light);
  background: var(--ink);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
body.p-online-auction-software__online-timed-auctions .vs-table th:first-child {
  border-radius: 10px 0 0 0;
  color: var(--white);
}
body.p-online-auction-software__online-timed-auctions .vs-table th.highlight {
  background: var(--blue);
  color: var(--white);
  border-right: none;
}
body.p-online-auction-software__online-timed-auctions .vs-table th:last-child {
  border-radius: 0 10px 0 0;
}
body.p-online-auction-software__online-timed-auctions .vs-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--pale);
  border-right: 1px solid var(--pale);
  color: var(--mid);
  vertical-align: middle;
}
body.p-online-auction-software__online-timed-auctions .vs-table td:first-child {
  font-weight: 500;
  color: var(--ink);
  border-right-color: rgba(30, 45, 77, 0.08);
}
body.p-online-auction-software__online-timed-auctions .vs-table td.highlight {
  background: rgba(59, 125, 232, 0.04);
  border-right: 1px solid rgba(59, 125, 232, 0.1);
}
body.p-online-auction-software__online-timed-auctions .vs-table tr:last-child td {
  border-bottom: none;
}
body.p-online-auction-software__online-timed-auctions .check {
  color: var(--blue);
}
body.p-online-auction-software__online-timed-auctions .cross {
  color: #c0392b;
}
body.p-online-auction-software__online-timed-auctions .partial {
  color: #e67e22;
}
body.p-online-auction-software__online-timed-auctions .vs-note {
  font-size: 0.78rem;
  color: var(--light);
  margin-top: 16px;
  font-style: italic;
}
body.p-online-auction-software__online-timed-auctions {
  /* ── WHAT YOU NEED ── */
}
body.p-online-auction-software__online-timed-auctions .prereqs {
  background: var(--bg);
}
body.p-online-auction-software__online-timed-auctions .prereqs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
body.p-online-auction-software__online-timed-auctions .prereq-card {
  background: var(--white);
  border-radius: 12px;
  padding: 28px;
  border: 1px solid rgba(30, 45, 77, 0.07);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: transform 0.2s, box-shadow 0.2s;
}
body.p-online-auction-software__online-timed-auctions .prereq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(30, 45, 77, 0.08);
}
body.p-online-auction-software__online-timed-auctions .prereq-icon {
  width: 44px;
  height: 44px;
  background: rgba(59, 125, 232, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
body.p-online-auction-software__online-timed-auctions .prereq-text h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
body.p-online-auction-software__online-timed-auctions .prereq-text p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.6;
}
body.p-online-auction-software__online-timed-auctions .optional-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--pale);
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}
body.p-online-auction-software__online-timed-auctions {
  /* ── FINAL CTA ── */
}
body.p-online-auction-software__online-timed-auctions .final-cta {
  background: var(--ink);
  padding: 100px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.p-online-auction-software__online-timed-auctions .final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59, 125, 232, 0.15), transparent);
}
body.p-online-auction-software__online-timed-auctions .final-cta h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 20px;
}
body.p-online-auction-software__online-timed-auctions .final-cta h2 .accent {
  color: var(--blue2);
}
body.p-online-auction-software__online-timed-auctions .final-cta p {
  font-size: 1rem;
  color: var(--light);
  margin-bottom: 44px;
  line-height: 1.65;
}
body.p-online-auction-software__online-timed-auctions .final-cta-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
body.p-online-auction-software__online-timed-auctions .final-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
body.p-online-auction-software__online-timed-auctions .btn-inv {
  background: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 34px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
body.p-online-auction-software__online-timed-auctions .btn-inv:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.p-online-auction-software__online-timed-auctions .btn-ghost {
  background: transparent;
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
body.p-online-auction-software__online-timed-auctions .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}
body.p-online-auction-software__online-timed-auctions {
  /* ── RESPONSIVE ── */
}
@media (max-width: 1000px) {
  body.p-online-auction-software__online-timed-auctions .hero {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__online-timed-auctions .hero-stats {
    padding: 0;
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
  }
  body.p-online-auction-software__online-timed-auctions .hero-stat {
    padding: 20px !important;
    background: var(--ink);
  }
  body.p-online-auction-software__online-timed-auctions .what-is-grid,
  body.p-online-auction-software__online-timed-auctions .steps-layout,
  body.p-online-auction-software__online-timed-auctions .faq-layout {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__online-timed-auctions .steps-layout .step-preview {
    display: none;
  }
  body.p-online-auction-software__online-timed-auctions .faq-sidebar {
    position: static;
  }
  body.p-online-auction-software__online-timed-auctions .features-intro {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  body.p-online-auction-software__online-timed-auctions .hero {
    padding: 28px 24px 60px;
  }
  body.p-online-auction-software__online-timed-auctions .features-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__online-timed-auctions .prereqs-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__online-timed-auctions .il-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__online-timed-auctions .final-cta-btns {
    flex-direction: column;
    align-items: center;
  }
}

/* ── OAS: SELF-HOSTED SUBPAGE ─────────────────────────────────
 * All rules scoped under body.p-online-auction-software__self-hosted.
 * Migrated as-is from shared.css; class collisions with sibling
 * subpages are kept isolated by the body-class scope.
 * ──────────────────────────────────────────────────────────── */
body.p-online-auction-software__self-hosted .hero-cta-row {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
body.p-online-auction-software__self-hosted {
  /* ── 5-year cost comparison ───────────────────────── */
}
body.p-online-auction-software__self-hosted .cost-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(30, 45, 77, 0.09);
  margin-top: 8px;
}
body.p-online-auction-software__self-hosted .cost-table thead tr th {
  background: var(--ink);
  color: var(--white);
  padding: 14px 20px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.p-online-auction-software__self-hosted .cost-table thead tr th:first-child {
  border-radius: 12px 0 0 0;
}
body.p-online-auction-software__self-hosted .cost-table thead tr th:last-child {
  border-radius: 0 12px 0 0;
}
body.p-online-auction-software__self-hosted .cost-table thead tr th.highlight-col {
  background: var(--blue);
}
body.p-online-auction-software__self-hosted .cost-row td {
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--ink);
  border-bottom: 1px solid var(--pale);
  vertical-align: middle;
}
body.p-online-auction-software__self-hosted .cost-row td.highlight-col {
  background: #eef4fd;
  font-weight: 700;
  color: var(--blue);
}
body.p-online-auction-software__self-hosted .cost-row:last-child td {
  border-bottom: none;
}
body.p-online-auction-software__self-hosted .cost-row:nth-child(even) td {
  background: var(--bg);
}
body.p-online-auction-software__self-hosted .cost-row:nth-child(even) td.highlight-col {
  background: #ddeaf9;
}
body.p-online-auction-software__self-hosted .cost-total td {
  padding: 16px 20px;
  font-weight: 800;
  font-size: 1rem;
  border-top: 2px solid var(--pale);
  background: var(--white) !important;
}
body.p-online-auction-software__self-hosted .cost-total td.highlight-col {
  color: var(--blue);
  background: #eef4fd !important;
}
body.p-online-auction-software__self-hosted .cost-savings-note {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--mid);
}
body.p-online-auction-software__self-hosted .cost-savings-note strong {
  color: var(--ink);
}
body.p-online-auction-software__self-hosted {
  /* ── feature cards ────────────────────────────────── */
}
body.p-online-auction-software__self-hosted .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
body.p-online-auction-software__self-hosted .feature-card {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 12px;
  padding: 28px;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.p-online-auction-software__self-hosted .feature-card:hover {
  box-shadow: 0 6px 24px rgba(30, 45, 77, 0.1);
  transform: translateY(-2px);
}
body.p-online-auction-software__self-hosted .feature-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 8px;
}
body.p-online-auction-software__self-hosted .feature-card p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}
body.p-online-auction-software__self-hosted .feature-icon {
  width: 44px;
  height: 44px;
  background: var(--pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--ink);
}
body.p-online-auction-software__self-hosted {
  /* ── persona cards ────────────────────────────────── */
}
body.p-online-auction-software__self-hosted .persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
body.p-online-auction-software__self-hosted .persona-card {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 14px;
  padding: 30px;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.p-online-auction-software__self-hosted .persona-card:hover {
  box-shadow: 0 6px 24px rgba(30, 45, 77, 0.1);
  transform: translateY(-2px);
}
body.p-online-auction-software__self-hosted .persona-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 8px;
}
body.p-online-auction-software__self-hosted .persona-card p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}
body.p-online-auction-software__self-hosted .persona-icon {
  width: 48px;
  height: 48px;
  background: var(--pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ink);
}
body.p-online-auction-software__self-hosted {
  /* ── install steps ────────────────────────────────── */
}
body.p-online-auction-software__self-hosted .steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
  margin-top: 8px;
  counter-reset: step;
}
body.p-online-auction-software__self-hosted .step-card {
  background: var(--white);
  border: 1px solid var(--pale);
  border-radius: 12px;
  padding: 28px 28px 28px 72px;
  position: relative;
  transition: box-shadow 0.2s;
}
body.p-online-auction-software__self-hosted .step-card:hover {
  box-shadow: 0 4px 20px rgba(30, 45, 77, 0.09);
}
body.p-online-auction-software__self-hosted .step-card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 28px;
  width: 36px;
  height: 36px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.p-online-auction-software__self-hosted .step-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 8px;
}
body.p-online-auction-software__self-hosted .step-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}
body.p-online-auction-software__self-hosted {
  /* ── CTA band ─────────────────────────────────────── */
}
body.p-online-auction-software__self-hosted .cta-band {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 72px 40px;
}
body.p-online-auction-software__self-hosted .cta-band h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 auto 16px;
  max-width: 680px;
}
body.p-online-auction-software__self-hosted .cta-band h2 em {
  color: var(--blue2);
  font-style: normal;
}
body.p-online-auction-software__self-hosted .cta-band p {
  font-size: 1rem;
  color: var(--light);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.65;
}
body.p-online-auction-software__self-hosted .cta-band .btn-primary {
  background: var(--blue);
}
body.p-online-auction-software__self-hosted .cta-band .btn-primary:hover {
  background: var(--blue2);
}
body.p-online-auction-software__self-hosted .cta-checklist {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 32px;
  max-width: 600px;
}
body.p-online-auction-software__self-hosted .cta-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--light);
}
body.p-online-auction-software__self-hosted {
  /* ── responsive ───────────────────────────────────── */
}
@media (max-width: 768px) {
  body.p-online-auction-software__self-hosted .section {
    padding: 52px 20px;
  }
  body.p-online-auction-software__self-hosted .feature-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__self-hosted .persona-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__self-hosted .steps-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.p-online-auction-software__self-hosted .cost-table {
    font-size: 0.8rem;
  }
  body.p-online-auction-software__self-hosted .cost-table thead tr th,
  body.p-online-auction-software__self-hosted .cost-table .cost-row td,
  body.p-online-auction-software__self-hosted .cost-table .cost-total td {
    padding: 10px 12px;
  }
  body.p-online-auction-software__self-hosted .cta-band {
    padding: 52px 20px;
  }
  body.p-online-auction-software__self-hosted .il-section {
    padding: 52px 20px;
  }
  body.p-online-auction-software__self-hosted .il-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  body.p-online-auction-software__self-hosted .steps-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__self-hosted .il-grid {
    grid-template-columns: 1fr;
  }
  body.p-online-auction-software__self-hosted .hero-cta-row {
    flex-direction: column;
    align-items: center;
  }
}

.p-custom-features {
  /* ── WHY US STRIP ── */
}
.p-custom-features .why-strip {
  background: var(--ink);
  padding: 48px 40px;
}
.p-custom-features .why-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.p-custom-features .why-item {
  padding: 0 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.p-custom-features .why-item:first-child {
  padding-left: 0;
}
.p-custom-features .why-item:last-child {
  border-right: none;
}
.p-custom-features .why-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}
.p-custom-features .why-text h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.p-custom-features .why-text p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}
.p-custom-features {
  /* ── WHAT WE BUILD ── */
}
.p-custom-features .what-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 40px;
}
.p-custom-features .builds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.p-custom-features .build-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 14px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-custom-features .build-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}
.p-custom-features .build-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.p-custom-features .build-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.p-custom-features .build-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 0;
  flex: 1;
  padding-top: 2px;
}
.p-custom-features .build-card p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.65;
}
.p-custom-features .build-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.p-custom-features .build-example {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--mid);
  border: 1px solid rgba(30, 45, 77, 0.08);
}
.p-custom-features {
  /* ── THE ADVANTAGE ── */
}
.p-custom-features .advantage-section {
  background: var(--bg);
  padding: 80px 40px;
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
}
.p-custom-features .advantage-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.p-custom-features .advantage-text .section-label {
  margin-bottom: 16px;
}
.p-custom-features .advantage-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.p-custom-features .advantage-text p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.p-custom-features .advantage-text p:last-child {
  margin-bottom: 0;
}
.p-custom-features .advantage-text strong {
  color: var(--ink);
  font-weight: 600;
}
.p-custom-features .advantage-points {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.p-custom-features .advantage-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
}
.p-custom-features .advantage-point:last-child {
  border-bottom: none;
}
.p-custom-features .advantage-num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pale);
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
  letter-spacing: -0.04em;
}
.p-custom-features .advantage-point-text h4 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.p-custom-features .advantage-point-text p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-custom-features {
  /* ── PROCESS ── */
}
.p-custom-features .process-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 40px;
}
.p-custom-features .process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}
.p-custom-features .process-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 14%;
  right: 14%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--pale) 0%, var(--blue) 50%, var(--pale) 100%);
  z-index: 0;
}
.p-custom-features .process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.p-custom-features .step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue);
  transition: border-color 0.2s, background 0.2s;
}
.p-custom-features .process-step:hover .step-num {
  border-color: var(--blue);
  background: var(--pale);
}
.p-custom-features .process-step h4 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.p-custom-features .process-step p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-custom-features {
  /* ── CTA SECTION ── */
}
.p-custom-features .cta-section {
  background: var(--ink);
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.p-custom-features .cta-section::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 125, 232, 0.15), transparent 70%);
}
.p-custom-features .cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.p-custom-features .cta-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.p-custom-features .cta-text p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
}
.p-custom-features .cta-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px;
}
.p-custom-features .cta-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.p-custom-features .cta-card .cta-note {
  font-size: 0.78rem;
  color: var(--mid);
  margin-bottom: 22px;
  line-height: 1.5;
}
.p-custom-features .cta-field {
  margin-bottom: 14px;
}
.p-custom-features .cta-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 5px;
}
.p-custom-features .cta-field input, .p-custom-features .cta-field textarea {
  width: 100%;
  padding: 10px 13px;
  font-family: var(--sans);
  font-size: 0.855rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.12);
  border-radius: 7px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.p-custom-features .cta-field input::placeholder, .p-custom-features .cta-field textarea::placeholder {
  color: var(--light);
}
.p-custom-features .cta-field input:focus, .p-custom-features .cta-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 125, 232, 0.1);
  background: var(--white);
}
.p-custom-features .cta-field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}
.p-custom-features .cta-submit {
  width: 100%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 13px 20px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
}
.p-custom-features .cta-submit:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.p-custom-features .cta-privacy {
  font-size: 0.7rem;
  color: var(--light);
  text-align: center;
  margin-top: 10px;
}
.p-custom-features .cta-privacy a {
  color: var(--light);
  text-decoration: underline;
}
.p-custom-features .cta-success {
  display: none;
  text-align: center;
  padding: 32px 16px;
}
.p-custom-features .cta-success-icon {
  width: 52px;
  height: 52px;
  background: var(--pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--ink);
}
.p-custom-features .cta-success h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.p-custom-features .cta-success p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .p-custom-features .why-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-custom-features .why-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 0 24px;
  }
  .p-custom-features .why-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .p-custom-features .builds-grid {
    grid-template-columns: 1fr;
  }
  .p-custom-features .advantage-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-custom-features .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .p-custom-features .process-steps::before {
    display: none;
  }
  .p-custom-features .cta-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 560px) {
  .p-custom-features .hero, .p-custom-features .what-section, .p-custom-features .advantage-section, .p-custom-features .process-section, .p-custom-features .cta-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .p-custom-features .why-strip {
    padding-left: 20px;
    padding-right: 20px;
  }
  .p-custom-features .process-steps {
    grid-template-columns: 1fr;
  }
}

.p-mobile-apps {
  /* ── HERO ── */
}
.p-mobile-apps .hero-sub {
  font-size: 1.05rem;
  color: var(--mid);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.p-mobile-apps .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.p-mobile-apps .hero-cta:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.p-mobile-apps {
  /* ── CALLOUT (you might not need an app) ── */
}
.p-mobile-apps .callout {
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.18);
  border-radius: 14px;
  padding: 30px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.p-mobile-apps .callout-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--white);
  border: 1.5px solid rgba(59, 125, 232, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.p-mobile-apps .callout h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.p-mobile-apps .callout p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
}
.p-mobile-apps .callout p:last-child {
  margin-bottom: 0;
}
.p-mobile-apps .callout a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.p-mobile-apps .callout a:hover {
  text-decoration: underline;
}
.p-mobile-apps {
  /* ── SECTION SHELL ── */
}
.p-mobile-apps .section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 40px;
}
.p-mobile-apps .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.p-mobile-apps .section-label::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--blue);
}
.p-mobile-apps .section-heading {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.p-mobile-apps .section-sub {
  font-size: 0.97rem;
  color: var(--mid);
  max-width: 600px;
  line-height: 1.65;
  margin-bottom: 48px;
}
.p-mobile-apps .section-sub a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.p-mobile-apps .section-sub a:hover {
  text-decoration: underline;
}
.p-mobile-apps {
  /* ── WHEN IT MAKES SENSE (reason cards) ── */
}
.p-mobile-apps .reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.p-mobile-apps .reason-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 14px;
  padding: 28px 28px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-mobile-apps .reason-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}
.p-mobile-apps .reason-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--ink);
}
.p-mobile-apps .reason-card h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.p-mobile-apps .reason-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
}
.p-mobile-apps {
  /* ── WHAT WE BUILD (feature grid) ── */
}
.p-mobile-apps .build-section {
  background: var(--bg);
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
}
.p-mobile-apps .feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.p-mobile-apps .feat {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 22px 22px;
}
.p-mobile-apps .feat-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.p-mobile-apps .feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.p-mobile-apps .feat h4 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.p-mobile-apps .feat p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-mobile-apps .stack-note {
  margin-top: 32px;
  background: var(--ink);
  border-radius: 14px;
  padding: 26px 32px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.p-mobile-apps .stack-note-text {
  flex: 1;
  min-width: 260px;
}
.p-mobile-apps .stack-note h4 {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.p-mobile-apps .stack-note p {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}
.p-mobile-apps .stack-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-mobile-apps .stack-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  padding: 9px 15px 9px 12px;
  border-radius: 9px;
}
.p-mobile-apps .stack-logo svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
.p-mobile-apps .stack-logo span {
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.p-mobile-apps {
  /* ── HOW IT CONNECTS (two-col advantage) ── */
}
.p-mobile-apps .connect-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.p-mobile-apps .connect-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin-bottom: 18px;
}
.p-mobile-apps .connect-text p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 15px;
}
.p-mobile-apps .connect-text p:last-child {
  margin-bottom: 0;
}
.p-mobile-apps .connect-text strong {
  color: var(--ink);
  font-weight: 600;
}
.p-mobile-apps .connect-text a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.p-mobile-apps .connect-text a:hover {
  text-decoration: underline;
}
.p-mobile-apps .connect-points {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.p-mobile-apps .connect-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(30, 45, 77, 0.07);
}
.p-mobile-apps .connect-point:last-child {
  border-bottom: none;
}
.p-mobile-apps .connect-point .cp-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.p-mobile-apps .connect-point h4 {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.p-mobile-apps .connect-point p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-mobile-apps {
  /* ── PROCESS ── */
}
.p-mobile-apps .process-section {
  background: var(--bg);
  border-top: 1px solid rgba(30, 45, 77, 0.06);
  border-bottom: 1px solid rgba(30, 45, 77, 0.06);
}
.p-mobile-apps .process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}
.p-mobile-apps .process-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--pale) 0%, var(--blue) 50%, var(--pale) 100%);
  z-index: 0;
}
.p-mobile-apps .process-step {
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.p-mobile-apps .step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue);
  transition: border-color 0.2s, background 0.2s;
}
.p-mobile-apps .process-step:hover .step-num {
  border-color: var(--blue);
  background: var(--pale);
}
.p-mobile-apps .process-step h4 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
.p-mobile-apps .process-step p {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.55;
}
.p-mobile-apps {
  /* ── CTA ── */
}
.p-mobile-apps #get-quote {
  scroll-margin-top: var(--sticky-top);
}
.p-mobile-apps .cta-section {
  background: var(--ink);
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.p-mobile-apps .cta-section::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 125, 232, 0.15), transparent 70%);
}
.p-mobile-apps .cta-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.p-mobile-apps .cta-text .section-label {
  color: var(--blue2);
}
.p-mobile-apps .cta-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.p-mobile-apps .cta-text p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 14px;
}
.p-mobile-apps .cta-text p:last-child {
  margin-bottom: 0;
}
.p-mobile-apps .cta-text a {
  color: #cfe0fb;
  font-weight: 600;
  text-decoration: underline;
}
.p-mobile-apps .cta-quote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 8px;
  transition: transform 0.15s, background 0.2s;
}
.p-mobile-apps .cta-quote:hover {
  background: var(--pale);
  transform: translateY(-1px);
}
.p-mobile-apps .cta-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px;
}
.p-mobile-apps .cta-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.p-mobile-apps .cta-card .cta-note {
  font-size: 0.78rem;
  color: var(--mid);
  margin-bottom: 22px;
  line-height: 1.5;
}
.p-mobile-apps .cta-field {
  margin-bottom: 14px;
}
.p-mobile-apps .cta-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 5px;
}
.p-mobile-apps .cta-field input, .p-mobile-apps .cta-field textarea {
  width: 100%;
  padding: 10px 13px;
  font-family: var(--sans);
  font-size: 0.855rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.12);
  border-radius: 7px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.p-mobile-apps .cta-field input::placeholder, .p-mobile-apps .cta-field textarea::placeholder {
  color: var(--light);
}
.p-mobile-apps .cta-field input:focus, .p-mobile-apps .cta-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 125, 232, 0.1);
  background: var(--white);
}
.p-mobile-apps .cta-field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}
.p-mobile-apps .cta-submit {
  width: 100%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 13px 20px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
}
.p-mobile-apps .cta-submit:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.p-mobile-apps .cta-privacy {
  font-size: 0.7rem;
  color: var(--light);
  text-align: center;
  margin-top: 10px;
}
.p-mobile-apps .cta-privacy a {
  color: var(--light);
  text-decoration: underline;
}
.p-mobile-apps .cta-success {
  display: none;
  text-align: center;
  padding: 32px 16px;
}
.p-mobile-apps .cta-success-icon {
  width: 52px;
  height: 52px;
  background: var(--pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--ink);
}
.p-mobile-apps .cta-success h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.p-mobile-apps .cta-success p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .p-mobile-apps .reasons {
    grid-template-columns: 1fr;
  }
  .p-mobile-apps .feat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .p-mobile-apps .connect-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-mobile-apps .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .p-mobile-apps .process-steps::before {
    display: none;
  }
  .p-mobile-apps .cta-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-mobile-apps .callout {
    flex-direction: column;
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .p-mobile-apps .hero, .p-mobile-apps .section, .p-mobile-apps .faq-section, .p-mobile-apps .cta-section, .p-mobile-apps .callout-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .p-mobile-apps .feat-grid {
    grid-template-columns: 1fr;
  }
  .p-mobile-apps .process-steps {
    grid-template-columns: 1fr;
  }
}

.p-addons {
  /* ── CATEGORY NAV ── */
}
.p-addons .cat-nav {
  max-width: var(--max);
  margin: 0 auto 56px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.p-addons .cat-card {
  background: var(--bg);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 24px 28px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.p-addons .cat-card:hover {
  border-color: var(--blue);
  background: var(--pale);
  transform: translateY(-2px);
}
.p-addons .cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--ink);
}
.p-addons .cat-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.p-addons .cat-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.5;
}
.p-addons .cat-count {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--pale);
  color: var(--blue);
  border: 1px solid rgba(59, 125, 232, 0.2);
  margin-top: 10px;
}
.p-addons {
  /* ── SECTION WRAPPER ── */
}
.p-addons .section {
  max-width: var(--max);
  margin: 0 auto 64px;
  padding: 0 40px;
  scroll-margin-top: var(--sticky-top);
}
.p-addons {
  /* ── BUNDLE BANNER ── */
}
.p-addons .bundle-banner {
  max-width: var(--max);
  margin: 0 auto 56px;
  padding: 0 40px;
}
.p-addons .bundle-inner {
  background: var(--ink);
  border-radius: 14px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.p-addons .bundle-inner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(59, 125, 232, 0.15);
}
.p-addons .bundle-left {
  flex: 1;
  position: relative;
  z-index: 1;
}
.p-addons .bundle-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(59, 125, 232, 0.3);
  color: #90b3f5;
  border: 1px solid rgba(59, 125, 232, 0.4);
  margin-bottom: 12px;
}
.p-addons .bundle-inner h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.p-addons .bundle-inner p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
.p-addons .bundle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.p-addons .bundle-tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.p-addons .bundle-right {
  text-align: right;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.p-addons .bundle-price {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1;
}
.p-addons .bundle-was {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.p-addons .bundle-save {
  font-size: 0.75rem;
  font-weight: 700;
  color: #4dc98a;
  margin-bottom: 16px;
}
.p-addons .bundle-cta {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.p-addons .bundle-cta:hover {
  background: var(--blue2);
  transform: translateY(-1px);
}
.p-addons {
  /* ── ADD-ONS GRID ── */
}
.p-addons .filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.p-addons .filter-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(30, 45, 77, 0.12);
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.15s;
}
.p-addons .filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.p-addons .filter-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.p-addons .addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.p-addons .addon-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 12px;
  padding: 20px 22px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-addons .addon-card:hover {
  border-color: rgba(59, 125, 232, 0.35);
  box-shadow: 0 4px 20px rgba(30, 45, 77, 0.07);
  transform: translateY(-2px);
}
.p-addons .addon-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.p-addons .addon-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--pale);
  border: 1px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.p-addons .addon-price {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.p-addons .addon-name {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.p-addons .addon-desc {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.5;
  flex: 1;
}
.p-addons .addon-cat {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.p-addons .cat-payments {
  background: #e8f4fd;
  color: #1a5a8a;
  border: 1px solid #b3d9f5;
}
.p-addons .cat-growth {
  background: #f0fce8;
  color: #2a6a1a;
  border: 1px solid #a8e090;
}
.p-addons .cat-logistics {
  background: #fdf5e8;
  color: #7a4a00;
  border: 1px solid #f5d090;
}
.p-addons .cat-ux {
  background: var(--pale);
  color: #1a3a7a;
  border: 1px solid #90b3f5;
}
.p-addons .cat-tools {
  background: #f5e8fc;
  color: #5a1a6e;
  border: 1px solid #c990f5;
}
.p-addons .addon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--pale);
}
.p-addons .addon-buy {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.p-addons .addon-buy:hover {
  color: var(--ink);
}
.p-addons {
  /* ── THEMES ── */
}
.p-addons .themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.p-addons .theme-card {
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-addons .theme-card:hover {
  border-color: rgba(59, 125, 232, 0.35);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.09);
  transform: translateY(-2px);
}
.p-addons .theme-preview {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  position: relative;
  overflow: hidden;
}
.p-addons .theme-canary {
  background: linear-gradient(135deg, #fef9e7 0%, #fef3cd 50%, #fde68a 100%);
  color: #92400e;
}
.p-addons .theme-vintage {
  background: linear-gradient(135deg, #f5f0eb 0%, #ede0d4 50%, #d4bfab 100%);
  color: #4a3728;
}
.p-addons .theme-preview-label {
  position: relative;
  z-index: 1;
}
.p-addons .theme-preview-dots {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 6px;
}
.p-addons .theme-preview-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.p-addons .theme-canary .theme-preview-dots span:nth-child(1) {
  background: #f59e0b;
}
.p-addons .theme-canary .theme-preview-dots span:nth-child(2) {
  background: #fbbf24;
}
.p-addons .theme-canary .theme-preview-dots span:nth-child(3) {
  background: #fcd34d;
}
.p-addons .theme-vintage .theme-preview-dots span:nth-child(1) {
  background: #92400e;
}
.p-addons .theme-vintage .theme-preview-dots span:nth-child(2) {
  background: #b45309;
}
.p-addons .theme-vintage .theme-preview-dots span:nth-child(3) {
  background: #d97706;
}
.p-addons .theme-mock-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-addons .theme-canary .theme-mock-bar {
  background: rgba(254, 243, 205, 0.8);
}
.p-addons .theme-vintage .theme-mock-bar {
  background: rgba(237, 224, 212, 0.8);
}
.p-addons .theme-mock-tag {
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.2;
}
.p-addons .theme-info {
  padding: 20px 24px;
  background: var(--white);
}
.p-addons .theme-info h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.p-addons .theme-info p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.5;
  margin-bottom: 14px;
}
.p-addons .theme-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-addons .theme-price {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}
.p-addons .theme-buy {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
  padding: 8px 18px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s;
}
.p-addons .theme-buy:hover {
  background: var(--blue);
}
.p-addons {
  /* ── SERVICES ── */
}
.p-addons .services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.p-addons .service-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 14px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.p-addons .service-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}
.p-addons .service-card.featured {
  border-color: var(--blue);
  background: linear-gradient(135deg, #f8fbff 0%, var(--pale) 100%);
}
.p-addons .service-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.p-addons .service-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.p-addons .service-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--pale);
  color: var(--blue);
  border: 1px solid rgba(59, 125, 232, 0.2);
  white-space: nowrap;
}
.p-addons .service-card h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.p-addons .service-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
}
.p-addons .service-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.p-addons .service-includes li {
  font-size: 0.78rem;
  color: var(--mid);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.p-addons .service-includes li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 6px;
}
.p-addons .service-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--pale);
}
.p-addons .service-price {
  font-family: var(--serif);
  font-weight: 800;
  color: var(--ink);
}
.p-addons .service-price span {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}
.p-addons .service-price small {
  font-size: 0.75rem;
  color: var(--mid);
  font-weight: 400;
}
.p-addons .service-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: var(--blue);
  padding: 9px 20px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.p-addons .service-cta:hover {
  background: var(--ink);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .p-addons .cat-nav, .p-addons .addons-grid {
    grid-template-columns: 1fr 1fr;
  }
  .p-addons .services-grid, .p-addons .themes-grid {
    grid-template-columns: 1fr;
  }
  .p-addons .bundle-inner {
    flex-direction: column;
  }
  .p-addons .bundle-right {
    text-align: left;
  }
}
@media (max-width: 600px) {
  .p-addons .cat-nav, .p-addons .addons-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .p-addons .page-hero, .p-addons .section, .p-addons .bundle-banner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── PAGE: how-to-start-an-online-auction-business ──────────────────────────── */
body.p-how-to-start-an-online-auction-business {
  /* ── ARTICLE LAYOUT ─────────────────────────────────────── */
}
body.p-how-to-start-an-online-auction-business .article-wrap {
  display: grid;
  grid-template-columns: 680px 1fr;
  gap: 80px;
  align-items: start;
}
body.p-how-to-start-an-online-auction-business {
  /* ── ARTICLE HEADER ─────────────────────────────────────── */
}
body.p-how-to-start-an-online-auction-business .article-header {
  margin-bottom: 48px;
}
body.p-how-to-start-an-online-auction-business .article-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
body.p-how-to-start-an-online-auction-business .article-category::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--blue);
}
body.p-how-to-start-an-online-auction-business .article-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 20px;
}
body.p-how-to-start-an-online-auction-business .article-intro {
  font-size: 1.1rem;
  color: var(--mid);
  line-height: 1.7;
  border-left: 3px solid var(--blue);
  padding-left: 20px;
  margin-bottom: 28px;
}
body.p-how-to-start-an-online-auction-business .article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.8rem;
  color: var(--light);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--pale);
}
body.p-how-to-start-an-online-auction-business .article-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--light);
}
body.p-how-to-start-an-online-auction-business {
  /* ── ARTICLE BODY ───────────────────────────────────────── */
}
body.p-how-to-start-an-online-auction-business .article-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
}
body.p-how-to-start-an-online-auction-business .article-body h2 {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 56px 0 20px;
  line-height: 1.2;
  scroll-margin-top: var(--sticky-top);
}
body.p-how-to-start-an-online-auction-business .article-body h2:first-child {
  margin-top: 0;
}
body.p-how-to-start-an-online-auction-business .article-body h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 32px 0 12px;
  letter-spacing: -0.015em;
}
body.p-how-to-start-an-online-auction-business .article-body p {
  margin-bottom: 20px;
  color: var(--mid);
}
body.p-how-to-start-an-online-auction-business .article-body p:last-child {
  margin-bottom: 0;
}
body.p-how-to-start-an-online-auction-business .article-body a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 125, 232, 0.3);
  transition: border-color 0.15s;
}
body.p-how-to-start-an-online-auction-business .article-body a:hover {
  border-color: var(--blue);
}
body.p-how-to-start-an-online-auction-business .article-body strong {
  color: var(--ink);
  font-weight: 600;
}
body.p-how-to-start-an-online-auction-business {
  /* Callout box */
}
body.p-how-to-start-an-online-auction-business .callout {
  background: var(--pale);
  border-left: 4px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 32px 0;
}
body.p-how-to-start-an-online-auction-business .callout p {
  margin: 0;
  font-size: 0.95rem;
}
body.p-how-to-start-an-online-auction-business .callout strong {
  color: var(--blue);
}
body.p-how-to-start-an-online-auction-business {
  /* Cost comparison table */
}
body.p-how-to-start-an-online-auction-business .cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 0.9rem;
}
body.p-how-to-start-an-online-auction-business .cost-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 2px solid var(--pale);
}
body.p-how-to-start-an-online-auction-business .cost-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pale);
  color: var(--mid);
  vertical-align: top;
}
body.p-how-to-start-an-online-auction-business .cost-table td:first-child {
  font-weight: 500;
  color: var(--ink);
}
body.p-how-to-start-an-online-auction-business .cost-table tr:last-child td {
  border-bottom: none;
}
body.p-how-to-start-an-online-auction-business .cost-table .total td {
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 8px 8px;
}
body.p-how-to-start-an-online-auction-business .cost-table .total td:first-child {
  color: var(--white);
  border-radius: 0 0 0 8px;
}
body.p-how-to-start-an-online-auction-business .cost-table .total td:last-child {
  border-radius: 0 0 8px 0;
}
body.p-how-to-start-an-online-auction-business {
  /* Step list */
}
body.p-how-to-start-an-online-auction-business .step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 28px 0;
}
body.p-how-to-start-an-online-auction-business .step-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--pale);
  position: relative;
}
body.p-how-to-start-an-online-auction-business .step-item:last-child {
  border-bottom: none;
}
body.p-how-to-start-an-online-auction-business .step-num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 0.9rem;
  margin-top: 2px;
}
body.p-how-to-start-an-online-auction-business .step-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
body.p-how-to-start-an-online-auction-business .step-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.6;
}
body.p-how-to-start-an-online-auction-business {
  /* Niche cards */
}
body.p-how-to-start-an-online-auction-business .niche-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
body.p-how-to-start-an-online-auction-business .niche-card {
  background: var(--bg);
  border: 1px solid rgba(30, 45, 77, 0.07);
  border-radius: 10px;
  padding: 20px;
  transition: border-color 0.2s, background 0.2s;
}
body.p-how-to-start-an-online-auction-business .niche-card:hover {
  background: var(--pale);
  border-color: rgba(59, 125, 232, 0.2);
}
body.p-how-to-start-an-online-auction-business .niche-card h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
body.p-how-to-start-an-online-auction-business .niche-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}
body.p-how-to-start-an-online-auction-business .niche-icon {
  width: 38px;
  height: 38px;
  background: var(--pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--ink);
}
body.p-how-to-start-an-online-auction-business {
  /* Warning box */
}
body.p-how-to-start-an-online-auction-business .warning {
  background: #fffbf0;
  border-left: 4px solid #f5a623;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 32px 0;
}
body.p-how-to-start-an-online-auction-business .warning p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mid);
}
body.p-how-to-start-an-online-auction-business .warning strong {
  color: #b87a00;
}
body.p-how-to-start-an-online-auction-business {
  /* Platform comparison */
}
body.p-how-to-start-an-online-auction-business .platform-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
body.p-how-to-start-an-online-auction-business .platform-card {
  border-radius: 10px;
  padding: 24px;
  border: 1px solid rgba(30, 45, 77, 0.1);
}
body.p-how-to-start-an-online-auction-business .platform-card.them {
  background: var(--bg);
}
body.p-how-to-start-an-online-auction-business .platform-card.them h4 {
  color: var(--mid);
}
body.p-how-to-start-an-online-auction-business .platform-card.them .platform-item {
  color: var(--mid);
}
body.p-how-to-start-an-online-auction-business .platform-card.them .platform-dot {
  background: var(--light);
}
body.p-how-to-start-an-online-auction-business .platform-card.us {
  background: var(--ink);
}
body.p-how-to-start-an-online-auction-business .platform-card.us h4 {
  color: var(--blue2);
}
body.p-how-to-start-an-online-auction-business .platform-card.us .platform-item {
  color: rgba(255, 255, 255, 0.8);
}
body.p-how-to-start-an-online-auction-business .platform-card.us .platform-dot {
  background: var(--blue2);
}
body.p-how-to-start-an-online-auction-business .platform-card h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.p-how-to-start-an-online-auction-business .platform-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.p-how-to-start-an-online-auction-business .platform-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}
body.p-how-to-start-an-online-auction-business .platform-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
body.p-how-to-start-an-online-auction-business {
  /* FAQ */
}
body.p-how-to-start-an-online-auction-business .article-faq {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 2px solid var(--pale);
}
body.p-how-to-start-an-online-auction-business .article-faq h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
body.p-how-to-start-an-online-auction-business {
  /* ── SIDEBAR ─────────────────────────────────────────────── */
}
body.p-how-to-start-an-online-auction-business .article-sidebar {
  position: sticky;
  top: var(--sticky-top);
}
body.p-how-to-start-an-online-auction-business .toc-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
body.p-how-to-start-an-online-auction-business .toc-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 16px;
}
body.p-how-to-start-an-online-auction-business .toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.p-how-to-start-an-online-auction-business .toc-link {
  font-size: 0.85rem;
  color: var(--mid);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
body.p-how-to-start-an-online-auction-business .toc-link:hover {
  background: var(--pale);
  color: var(--ink);
}
body.p-how-to-start-an-online-auction-business .toc-link.active {
  background: var(--pale);
  color: var(--blue);
  font-weight: 600;
}
body.p-how-to-start-an-online-auction-business .toc-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--light);
  width: 18px;
  flex-shrink: 0;
}
body.p-how-to-start-an-online-auction-business .cta-card {
  background: var(--ink);
  border-radius: 12px;
  padding: 28px 24px;
  color: var(--white);
}
body.p-how-to-start-an-online-auction-business .cta-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.25;
}
body.p-how-to-start-an-online-auction-business .cta-card p {
  font-size: 0.85rem;
  color: var(--light);
  line-height: 1.55;
  margin-bottom: 20px;
}
body.p-how-to-start-an-online-auction-business .cta-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue2);
  margin-bottom: 12px;
}
body.p-how-to-start-an-online-auction-business .cta-card-btn {
  display: block;
  text-align: center;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 12px 20px;
  border-radius: 7px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}
body.p-how-to-start-an-online-auction-business .cta-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body.p-how-to-start-an-online-auction-business .cta-card-link {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--blue2);
  text-decoration: none;
  border-bottom: 1px solid rgba(90, 148, 239, 0.3);
  padding-bottom: 2px;
  width: fit-content;
  margin: 0 auto;
  transition: color 0.15s, border-color 0.15s;
}
body.p-how-to-start-an-online-auction-business .cta-card-link:hover {
  color: var(--white);
  border-color: var(--white);
}
body.p-how-to-start-an-online-auction-business {
  /* ── RESPONSIVE ─────────────────────────────────────────── */
}
@media (max-width: 1100px) {
  body.p-how-to-start-an-online-auction-business .article-wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  body.p-how-to-start-an-online-auction-business .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
@media (max-width: 900px) {
  body.p-how-to-start-an-online-auction-business .article-wrap {
    padding: 90px 24px 60px;
  }
  body.p-how-to-start-an-online-auction-business .platform-compare,
  body.p-how-to-start-an-online-auction-business .niche-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  body.p-how-to-start-an-online-auction-business .sidebar {
    grid-template-columns: 1fr;
  }
}

body.p-order-software-v2 {
  background: var(--bg);
}
body.p-order-software-v2 .ob {
  background: #fff8e8;
  border-bottom: 1px solid #f0e0a8;
  color: #7a6320;
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
}
body.p-order-software-v2 .ob a {
  color: #5a4a10;
  font-weight: 700;
}
body.p-order-software-v2 {
  /* progress */
}
body.p-order-software-v2 .progress-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 120px 28px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.p-order-software-v2 .prog-track {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 240px;
}
body.p-order-software-v2 .prog-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fff;
  border: 1.5px solid var(--line, #e4eaf4);
  color: var(--light);
  flex-shrink: 0;
  white-space: nowrap;
  transition: 0.2s;
}
body.p-order-software-v2 .prog-step.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
body.p-order-software-v2 .prog-step.is-done {
  background: var(--pale);
  border-color: var(--blue);
  color: var(--blue);
}
body.p-order-software-v2 .prog-step.is-clickable {
  cursor: pointer;
}
body.p-order-software-v2 .prog-step.is-disabled {
  background: #fff;
  border-color: var(--line, #e4eaf4);
  color: var(--light);
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
body.p-order-software-v2 .prog-line {
  height: 2px;
  flex: 1;
  background: var(--line, #e4eaf4);
  min-width: 14px;
}
body.p-order-software-v2 {
  /* layout */
}
body.p-order-software-v2 .order-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
body.p-order-software-v2 .order-main {
  min-width: 0;
}
body.p-order-software-v2 .step-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
body.p-order-software-v2 .step-title {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 8px;
}
body.p-order-software-v2 .step-sub {
  color: var(--mid);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 560px;
}
body.p-order-software-v2 {
  /* cards */
}
body.p-order-software-v2 .grid {
  display: grid;
  gap: 14px;
}
body.p-order-software-v2 .g3 {
  grid-template-columns: repeat(3, 1fr);
}
body.p-order-software-v2 .g2 {
  grid-template-columns: repeat(2, 1fr);
}
body.p-order-software-v2 .card {
  background: #fff;
  border: 1.5px solid var(--line, #e4eaf4);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  position: relative;
  transition: 0.15s;
}
body.p-order-software-v2 .card:hover {
  border-color: var(--blue2, #5a94ef);
}
body.p-order-software-v2 .card.sel {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--pale);
}
body.p-order-software-v2 .card.sel::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
}
body.p-order-software-v2 .card .rec {
  position: absolute;
  top: -9px;
  left: 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--blue);
  padding: 3px 9px;
  border-radius: 99px;
}
body.p-order-software-v2 .c-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}
body.p-order-software-v2 .c-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 6px 0;
}
body.p-order-software-v2 .c-price small {
  font-size: 12px;
  font-weight: 600;
  color: var(--light);
}
body.p-order-software-v2 .c-desc {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.55;
}
body.p-order-software-v2 .c-feat {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
body.p-order-software-v2 .c-feat li {
  font-size: 12.5px;
  color: var(--mid);
  padding: 3px 0 3px 12px;
  position: relative;
}
body.p-order-software-v2 .c-feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
body.p-order-software-v2 .c-saving {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #1a8f4d;
  background: #e8f5ee;
  padding: 3px 9px;
  border-radius: 99px;
}
body.p-order-software-v2 .badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 9px;
  border-radius: 99px;
  margin-bottom: 10px;
}
body.p-order-software-v2 .b-own {
  background: var(--pale) !important;
  color: var(--blue) !important;
}
body.p-order-software-v2 .b-pop {
  background: #1a8f4d !important;
  color: #fff !important;
}
body.p-order-software-v2 .b-man {
  background: var(--ink) !important;
  color: #fff !important;
}
body.p-order-software-v2 {
  /* checkbox add-on cards */
}
body.p-order-software-v2 .addon {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
body.p-order-software-v2 .addon .c-name strong {
  color: var(--blue);
}
body.p-order-software-v2 {
  /* white-label row */
}
body.p-order-software-v2 .wl {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.5px solid var(--line, #e4eaf4);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 14px;
  cursor: pointer;
}
body.p-order-software-v2 .wl input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
body.p-order-software-v2 .wl-label strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
body.p-order-software-v2 .wl-label span {
  font-size: 0.825rem;
  color: var(--mid);
}
body.p-order-software-v2 .wl-price {
  margin-left: auto;
  font-weight: 800;
  color: var(--ink);
}
body.p-order-software-v2 .wl-included-chip {
  background: #e6f4ec;
  color: #1a6b45;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
body.p-order-software-v2 .plan-footnote {
  font-size: 0.8rem;
  color: var(--light);
  text-align: center;
  margin: 24px 0 0;
}
body.p-order-software-v2 .sub-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.p-order-software-v2 .bundle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1a8f4d;
  background: #e8f5ee;
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 14px;
}
body.p-order-software-v2 .crosssell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mid);
  background: var(--pale);
  border-radius: 10px;
  padding: 11px 16px;
  margin-top: 16px;
}
body.p-order-software-v2 .crosssell a {
  color: var(--blue);
  font-weight: 700;
}
body.p-order-software-v2 {
  /* billing details form */
}
body.p-order-software-v2 .billing-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--line, #e4eaf4);
  border-radius: 14px;
  padding: 22px;
}
body.p-order-software-v2 .bd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.p-order-software-v2 .bd-field.full {
  grid-column: 1/-1;
}
body.p-order-software-v2 .bd-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--mid);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body.p-order-software-v2 .bd-field label .req {
  color: #c0392b;
  margin-left: 2px;
}
body.p-order-software-v2 .bd-field input, body.p-order-software-v2 .bd-field select {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line, #e4eaf4);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
body.p-order-software-v2 .bd-field input:focus, body.p-order-software-v2 .bd-field select:focus {
  outline: none;
  border-color: var(--blue);
}
body.p-order-software-v2 .bd-field input.bd-err, body.p-order-software-v2 .bd-field select.bd-err {
  border-color: #c0392b;
  background: #fdf2f2;
}
body.p-order-software-v2 .signin-hint {
  font-size: 13px;
  color: var(--mid);
  margin-bottom: 18px;
}
body.p-order-software-v2 .signin-hint a {
  color: var(--blue);
  font-weight: 700;
}
body.p-order-software-v2 {
  /* nav */
}
body.p-order-software-v2 .step-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
body.p-order-software-v2 .btn-back, body.p-order-software-v2 .btn-next, body.p-order-software-v2 .btn-skip {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.p-order-software-v2 .btn-next {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  padding: 13px 26px;
  cursor: pointer;
}
body.p-order-software-v2 .btn-next:disabled {
  background: #c4d3ea;
  cursor: not-allowed;
}
body.p-order-software-v2 .btn-back {
  background: none;
  border: none;
  color: var(--mid);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
body.p-order-software-v2 .btn-skip {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
}
body.p-order-software-v2 #plan-note {
  font-size: 13px;
  color: #1a8f4d;
  background: #e8f5ee;
  border-radius: 8px;
  padding: 9px 14px;
  margin-top: 14px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: 0.25s;
}
body.p-order-software-v2 #plan-note.show {
  opacity: 1;
  max-height: 60px;
}
body.p-order-software-v2 {
  /* sticky summary */
}
body.p-order-software-v2 .order-summary {
  position: sticky;
  top: var(--sticky-top);
  background: #fff;
  border: 1px solid var(--line, #e4eaf4);
  border-radius: 16px;
  padding: 20px;
}
body.p-order-software-v2 .sum-h {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid);
  margin-bottom: 14px;
}
body.p-order-software-v2 .sum-empty {
  font-size: 13px;
  color: var(--light);
  padding: 8px 0;
}
body.p-order-software-v2 .sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f0f3f9;
}
body.p-order-software-v2 .sum-row:first-child {
  border-top: none;
}
body.p-order-software-v2 .sum-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
body.p-order-software-v2 .sum-note {
  font-size: 11.5px;
  color: var(--light);
  margin-top: 2px;
}
body.p-order-software-v2 .sum-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
body.p-order-software-v2 .sum-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
body.p-order-software-v2 .sum-trow {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--mid);
  padding: 3px 0;
}
body.p-order-software-v2 .sum-trow strong {
  color: var(--ink);
  font-size: 16px;
}
body.p-order-software-v2 {
  /* review */
}
body.p-order-software-v2 .review-box {
  background: #fff;
  border: 1px solid var(--line, #e4eaf4);
  border-radius: 14px;
  padding: 8px 22px;
}
body.p-order-software-v2 #review-billing {
  background: #fff;
  border: 1px solid var(--line, #e4eaf4);
  border-radius: 14px;
  padding: 8px 22px;
  margin-top: 14px;
  max-width: 560px;
}
body.p-order-software-v2 .trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0;
}
body.p-order-software-v2 .trust-bar div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--mid);
}
body.p-order-software-v2 .btn-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
}
body.p-order-software-v2 .pay-note {
  font-size: 12px;
  color: var(--light);
  margin-top: 10px;
}
body.p-order-software-v2 {
  /* mobile total bar */
}
body.p-order-software-v2 .mbar {
  display: none;
}
@media (max-width: 880px) {
  body.p-order-software-v2 .order-layout {
    grid-template-columns: 1fr;
  }
  body.p-order-software-v2 .order-summary {
    display: none;
  }
  body.p-order-software-v2 .g3, body.p-order-software-v2 .g2 {
    grid-template-columns: 1fr;
  }
  body.p-order-software-v2 .billing-form {
    grid-template-columns: 1fr;
  }
  body.p-order-software-v2 .mbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line, #e4eaf4);
    padding: 12px 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 40;
    box-shadow: 0 -4px 20px rgba(30, 45, 77, 0.08);
  }
  body.p-order-software-v2 .mbar .lbl {
    font-size: 11px;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  body.p-order-software-v2 .mbar strong {
    font-size: 15px;
    color: var(--ink);
  }
  body.p-order-software-v2 .order-layout {
    padding-bottom: 90px;
  }
}
body.p-order-software-v2 .ct-includes {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.825rem;
  color: var(--bs-secondary-color, #5a6a82);
}
body.p-order-software-v2 .ct-includes li strong {
  font-weight: 500;
}
body.p-order-software-v2 .ct-includes li {
  margin-bottom: 0.15rem;
}
body.p-order-software-v2 .ct-postnote {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: var(--pale, #e8f0fc);
  color: var(--ink, #1e2d4d);
  font-size: 0.8rem;
  line-height: 1.5;
}
body.p-order-software-v2 .ct-postnote svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blue, #3b7de8);
}
body.p-order-software-v2 .wl:has(#ct-cb:checked) .ct-postnote {
  display: flex;
}
body.p-order-software-v2 .plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
}
body.p-order-software-v2 .plan-grid .plan-license {
  grid-column: 1;
  grid-row: 1/span 2;
}
body.p-order-software-v2 .plan-grid .plan-billing {
  grid-column: 2/span 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
}
body.p-order-software-v2 .plan-grid .plan-cloud {
  grid-column: 2;
  grid-row: 2;
}
body.p-order-software-v2 .plan-grid .plan-vps {
  grid-column: 3;
  grid-row: 2;
}
body.p-order-software-v2 .billing-inline {
  display: inline-flex;
  padding: 0.2rem;
  background: #eef2fa;
  border-radius: 999px;
  gap: 0.15rem;
}
body.p-order-software-v2 .billing-inline-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  background: transparent;
  color: #5a6a82;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.p-order-software-v2 .billing-inline-opt:hover {
  color: #1e2d4d;
}
body.p-order-software-v2 .billing-inline-opt.is-active {
  background: #fff;
  color: #1e2d4d;
  box-shadow: 0 1px 3px rgba(30, 45, 77, 0.12);
}
body.p-order-software-v2 .billing-inline-save {
  display: inline-block;
  padding: 0 0.45rem;
  background: #e6f4ec;
  color: #1a6b45;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1.4;
}
@media (max-width: 720px) {
  body.p-order-software-v2 .plan-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1rem;
  }
  body.p-order-software-v2 .plan-grid .plan-license,
  body.p-order-software-v2 .plan-grid .plan-billing,
  body.p-order-software-v2 .plan-grid .plan-cloud,
  body.p-order-software-v2 .plan-grid .plan-vps {
    grid-column: 1;
    grid-row: auto;
  }
  body.p-order-software-v2 .plan-grid .plan-billing {
    margin: 0.25rem 0;
  }
}

/* Checkout uses the order-software layout & progress classes.
 * Only checkout-specific bits (voucher, sign-in prompt, OAuth divider, form
 * fields wrapper) live here. Everything structural comes from _order-software.scss
 * via the shared body.p-order-software-v2 scope. */
.checkout-form {
  font-family: var(--sans, "Inter"), system-ui, sans-serif;
  color: var(--ink, #1e2d4d);
  /* Progress track wrapper — the order-software version uses top padding of
   * 120px to sit under the fixed header. Checkout has no such wrapper of
   * its own, so we just make sure the shared .progress-wrap still gets it. */
  /* ── FIELD STACK ─────────────────────────────────────── */
}
.checkout-form .cf-fields {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  margin-top: 1.25rem;
}
.checkout-form .cf-fields > * + * {
  margin-top: 0.25rem;
}
.checkout-form .cf-fields .form-group .subtitle {
  margin-top: 1rem;
}
.checkout-form .cf-fields .form-group .col-form-label {
  margin-bottom: 0 !important;
}
.checkout-form .cf-fields .form-group .mb-3 {
  margin-bottom: 0 !important;
}
.checkout-form .cf-fields .form-group {
  margin-bottom: 0;
}
.checkout-form .cf-fields .form-group .text-muted {
  display: none;
}
.checkout-form .cf-fields, .checkout-form .cf-signin, .checkout-form .cf-oauth {
  max-width: 560px;
}
.checkout-form {
  /* ── VOUCHER ─────────────────────────────────────────── */
}
.checkout-form .cf-voucher {
  margin: 0 0 1.5rem;
}
.checkout-form {
  /* ── SIGN-IN PROMPT & OAUTH ──────────────────────────── */
}
.checkout-form .cf-signin {
  text-align: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pale, #e8f0fc);
  background: var(--white, #f4f7fd);
  border-radius: 12px;
  color: var(--ink, #1e2d4d);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.checkout-form .cf-signin a {
  color: var(--blue, #3b7de8);
  text-decoration: none;
  font-weight: 600;
}
.checkout-form .cf-signin a:hover {
  color: var(--blue2, #5a94ef);
  text-decoration: underline;
}
.checkout-form .cf-oauth {
  margin: 0 0 1.5rem;
}
.checkout-form .cf-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.checkout-form .cf-or hr {
  flex: 1;
  border: 0;
  border-top: 1px solid var(--pale, #e8f0fc);
  margin: 0;
}
.checkout-form .cf-or span {
  font-size: 0.8rem;
  color: var(--mid, #5a6a82);
  letter-spacing: 0.04em;
}

/* Right-align the "Next payment on:" line under a subscription total. */
body.p-order-software-v2 .sum-next-payment {
  text-align: right;
  margin-top: 4px;
}

/* ── CART PAGE ──────────────────────────────────────────────
 * Uses the shared order-software layout. These rules only cover
 * the cart-item cards, the row of secondary actions, and the
 * empty-cart state — everything else comes from _order-software.scss.
 * ─────────────────────────────────────────────────────────── */
body.p-order-software-v2 .cart-item {
  background: #fff;
  border: 1px solid var(--pale, #e8f0fc);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
body.p-order-software-v2 .cart-item:hover {
  border-color: var(--blue2, #5a94ef);
}
body.p-order-software-v2 .cart-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.p-order-software-v2 .cart-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
body.p-order-software-v2 .cart-item-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #1e2d4d);
  text-decoration: none;
}
body.p-order-software-v2 .cart-item-title:hover {
  color: var(--blue, #3b7de8);
}
body.p-order-software-v2 .cart-item-remove {
  color: var(--light, #8fa8c8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
body.p-order-software-v2 .cart-item-remove:hover {
  background: #fdecec;
  color: #c0392b;
}
body.p-order-software-v2 .cart-item-attrs,
body.p-order-software-v2 .cart-item-sub {
  font-size: 13px;
  color: var(--mid, #5a6a82);
}
body.p-order-software-v2 .cart-item-price {
  margin-top: 8px;
  font-weight: 700;
  color: var(--ink, #1e2d4d);
}
body.p-order-software-v2 {
  /* Row of secondary actions above the primary CTA */
}
body.p-order-software-v2 .cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 4px;
  align-items: center;
}
body.p-order-software-v2 .cart-actions .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.p-order-software-v2 {
  /* Update-cart button is triggered by the quantity change script; hidden
   * from view but must stay in the DOM so the JS can click it. */
}
body.p-order-software-v2 .cart-update-btn {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.p-order-software-v2 .cart-expiry-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--light, #8fa8c8);
  text-align: center;
}
body.p-order-software-v2 {
  /* Empty state */
}
body.p-order-software-v2 .cart-empty {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  padding: 40px 24px;
}
body.p-order-software-v2 .cart-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--pale, #e8f0fc);
  color: var(--blue, #3b7de8);
  margin-bottom: 20px;
}
body.p-order-software-v2 .cart-empty .step-title,
body.p-order-software-v2 .cart-empty .step-sub {
  text-align: center;
}
body.p-order-software-v2 .cart-empty .step-sub {
  margin-left: auto;
  margin-right: auto;
}
body.p-order-software-v2 .cart-empty .step-nav {
  justify-content: center;
}

/* ── PAYMENT PAGE ──────────────────────────────────────────
 * Gateway cards (Stripe, PayPal, and any direct-payment options).
 * Each .pay-gateway wraps a radio input that lights the card up when
 * selected; clicking anywhere on the card selects the input.
 * ─────────────────────────────────────────────────────────── */
body.p-order-software-v2 .pay-gateways {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 8px;
}
body.p-order-software-v2 .pay-gateway {
  display: block;
  background: #fff;
  border: 1.5px solid var(--line, #e4eaf4);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.p-order-software-v2 .pay-gateway:hover {
  border-color: var(--blue2, #5a94ef);
}
body.p-order-software-v2 .pay-gateway:has(input[type=radio]:checked) {
  border-color: var(--blue, #3b7de8);
  box-shadow: 0 0 0 3px var(--pale, #e8f0fc);
}
body.p-order-software-v2 .pay-gateway-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
body.p-order-software-v2 .pay-gateway-radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue, #3b7de8);
}
body.p-order-software-v2 .pay-gateway-info {
  flex: 1;
  min-width: 0;
}
body.p-order-software-v2 .pay-gateway-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #1e2d4d);
  margin-bottom: 2px;
}
body.p-order-software-v2 .pay-gateway-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--blue, #3b7de8);
  padding: 2px 8px;
  border-radius: 999px;
}
body.p-order-software-v2 .pay-gateway-desc {
  font-size: 13px;
  color: var(--mid, #5a6a82);
  line-height: 1.5;
}
body.p-order-software-v2 .payment-box {
  margin: 0 !important;
}
body.p-order-software-v2 .pay-gateway-brands {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
body.p-order-software-v2 .pay-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
body.p-order-software-v2 .pay-brand-visa {
  background: #1a1f71;
}
body.p-order-software-v2 .pay-brand-mc {
  background: #eb001b;
}
body.p-order-software-v2 .pay-brand-amex {
  background: #016fd0;
}
body.p-order-software-v2 .pay-brand-paypal {
  background: #003087;
  letter-spacing: 0;
  font-style: italic;
}
body.p-order-software-v2 {
  /* Real gateway logo (from Ppb form partials, when getGatewayLogo() returns a path) */
}
body.p-order-software-v2 .pay-gateway-logo {
  max-height: 26px;
  max-width: 90px;
  object-fit: contain;
  display: block;
}
body.p-order-software-v2 {
  /* Body is hidden until the gateway is selected. */
}
body.p-order-software-v2 .pay-gateway-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin-top 0.25s ease, padding-top 0.25s ease;
  margin-top: 0;
}
body.p-order-software-v2 .pay-gateway:has(input[type=radio]:checked) .pay-gateway-body {
  max-height: 600px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pale, #e8f0fc);
}
body.p-order-software-v2 .pay-field {
  margin-bottom: 12px;
}
body.p-order-software-v2 .pay-field:last-child {
  margin-bottom: 0;
}
body.p-order-software-v2 .pay-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #1e2d4d);
  margin-bottom: 6px;
}
body.p-order-software-v2 .pay-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
body.p-order-software-v2 .pay-gateway-redirect {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  background: var(--bg, #f4f7fd);
  border-radius: 10px;
  font-size: 13px;
  color: var(--mid, #5a6a82);
  line-height: 1.5;
}
body.p-order-software-v2 .pay-gateway-redirect svg {
  flex-shrink: 0;
  color: var(--blue, #3b7de8);
}
body.p-order-software-v2 {
  /* Payment submit — override d-none if a gateway is picked. */
}
body.p-order-software-v2 .pay-submit .btn-next.d-none {
  display: none;
}
body.p-order-software-v2 .pay-submit .btn-next {
  width: 100%;
  margin-top: 8px;
}

/* Anchor pills need to look like the div pills used in order-software.
 * The base .prog-step selector in _order-software.scss only targets divs
 * because that's what the JS builds there. On checkout the "done" pills
 * are <a> tags so they can be links back to the order flow. */
body.p-order-software-v2 a.prog-step {
  text-decoration: none;
  color: inherit;
}

body.p-order-software-v2 a.prog-step.is-done:hover {
  background: var(--blue, #3b7de8);
  border-color: var(--blue, #3b7de8);
  color: #fff;
}

body.p-custom-theme-brief .ctb-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  font-family: var(--sans, "Inter"), system-ui, sans-serif;
  color: var(--ink, #1e2d4d);
}
body.p-custom-theme-brief {
  /* ── HEAD ────────────────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-head {
  text-align: center;
  margin: 0 0 32px;
}
body.p-custom-theme-brief .ctb-eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue, #3b7de8);
}
body.p-custom-theme-brief .ctb-title {
  font-family: var(--serif, "Plus Jakarta Sans"), "Inter", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--ink2, #162440);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
body.p-custom-theme-brief .ctb-lead {
  font-size: 0.95rem;
  color: var(--mid, #5a6a82);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 12px;
}
body.p-custom-theme-brief {
  /* ── SCOPE BOX ───────────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-scope {
  background: var(--bg, #f4f7fd);
  border: 1px solid var(--pale, #e8f0fc);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 0 32px;
  font-size: 0.9rem;
  line-height: 1.6;
}
body.p-custom-theme-brief .ctb-scope-h {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue, #3b7de8);
  margin-bottom: 8px;
}
body.p-custom-theme-brief .ctb-scope-h-out {
  color: var(--mid, #5a6a82);
  margin-top: 14px;
}
body.p-custom-theme-brief .ctb-scope ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink, #1e2d4d);
}
body.p-custom-theme-brief .ctb-scope ul li + li {
  margin-top: 4px;
}
body.p-custom-theme-brief .ctb-scope p {
  margin: 0;
  color: var(--mid, #5a6a82);
}
body.p-custom-theme-brief {
  /* ── FORM ────────────────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-form {
  display: block;
}
body.p-custom-theme-brief .ctb-honey {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}
body.p-custom-theme-brief .ctb-section {
  border: 1px solid var(--pale, #e8f0fc);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 0 20px;
  background: #fff;
}
body.p-custom-theme-brief .ctb-section > legend {
  float: none;
  width: auto;
  padding: 0 6px;
  margin-left: -6px;
  font-family: var(--serif, "Plus Jakarta Sans"), "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink2, #162440);
  letter-spacing: -0.01em;
}
body.p-custom-theme-brief .ctb-section-lead {
  font-size: 0.85rem;
  color: var(--mid, #5a6a82);
  margin: 4px 0 16px;
  line-height: 1.55;
}
body.p-custom-theme-brief .ctb-subhead {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue, #3b7de8);
  margin: 20px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pale, #e8f0fc);
}
body.p-custom-theme-brief .ctb-subhead:first-of-type {
  margin-top: 8px;
}
body.p-custom-theme-brief {
  /* ── FIELD / GRID ────────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.p-custom-theme-brief .ctb-grid-4 {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
}
@media (max-width: 640px) {
  body.p-custom-theme-brief .ctb-grid, body.p-custom-theme-brief .ctb-grid-4 {
    grid-template-columns: 1fr;
  }
}
body.p-custom-theme-brief .ctb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
body.p-custom-theme-brief .ctb-field-full {
  grid-column: 1/-1;
}
body.p-custom-theme-brief .ctb-field > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #1e2d4d);
}
body.p-custom-theme-brief .ctb-field > span em {
  font-style: normal;
  font-weight: 500;
  color: var(--mid, #5a6a82);
}
body.p-custom-theme-brief .ctb-help {
  font-size: 0.78rem;
  color: var(--mid, #5a6a82);
  line-height: 1.5;
  margin-top: 2px;
}
body.p-custom-theme-brief {
  /* ── RADIOS / CHECKBOXES ─────────────────────────────── */
}
body.p-custom-theme-brief .ctb-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
body.p-custom-theme-brief .ctb-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--pale, #e8f0fc);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
body.p-custom-theme-brief .ctb-radio:has(input:checked) {
  border-color: var(--blue, #3b7de8);
  background: var(--pale, #e8f0fc);
}
body.p-custom-theme-brief .ctb-radio input {
  margin-top: 3px;
  flex-shrink: 0;
}
body.p-custom-theme-brief .ctb-radio span {
  font-size: 0.9rem;
  color: var(--ink, #1e2d4d);
}
body.p-custom-theme-brief .ctb-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin: 8px 0 16px;
}
body.p-custom-theme-brief .ctb-checkboxes-label {
  grid-column: 1/-1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #1e2d4d);
  margin-bottom: 4px;
}
body.p-custom-theme-brief .ctb-checkboxes label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink, #1e2d4d);
  cursor: pointer;
}
@media (max-width: 640px) {
  body.p-custom-theme-brief .ctb-checkboxes {
    grid-template-columns: 1fr;
  }
}
body.p-custom-theme-brief .ctb-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 10px 0 14px;
  font-size: 0.88rem;
}
body.p-custom-theme-brief .ctb-inline > span {
  font-weight: 600;
  color: var(--ink, #1e2d4d);
  margin-right: 4px;
}
body.p-custom-theme-brief .ctb-inline label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink, #1e2d4d);
}
body.p-custom-theme-brief {
  /* ── REFERENCE BLOCK ─────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-refblock {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg, #f4f7fd);
  border-radius: 10px;
  margin-bottom: 12px;
}
body.p-custom-theme-brief .ctb-refblock .ctb-field {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  body.p-custom-theme-brief .ctb-refblock {
    grid-template-columns: 1fr;
  }
}
body.p-custom-theme-brief {
  /* ── SUBMIT ──────────────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-submit {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--pale, #e8f0fc);
  text-align: center;
}
body.p-custom-theme-brief .ctb-submit .btn-v10-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  justify-content: center;
}
body.p-custom-theme-brief .ctb-legal {
  margin: 14px auto 0;
  font-size: 0.78rem;
  color: var(--light, #8fa8c8);
  max-width: 480px;
  line-height: 1.5;
}
body.p-custom-theme-brief {
  /* ── SUCCESS / ERROR ─────────────────────────────────── */
}
body.p-custom-theme-brief .ctb-success {
  text-align: center;
  padding: 60px 20px;
}
body.p-custom-theme-brief .ctb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--pale, #e8f0fc);
  color: var(--blue, #3b7de8);
  margin-bottom: 22px;
}
body.p-custom-theme-brief .ctb-check.ctb-warn {
  background: #fdecec;
  color: #c0392b;
}
body.p-custom-theme-brief .ctb-success h1 {
  font-family: var(--serif, "Plus Jakarta Sans"), "Inter", sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--ink2, #162440);
  margin: 0 0 16px;
}
body.p-custom-theme-brief .ctb-success .ctb-lead {
  margin: 0 auto 12px;
  max-width: 520px;
}
body.p-custom-theme-brief .ctb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
}

:root {
  --serif: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --sidebar-w: 272px;
  --doc-top: 62px;
  --role-bar: 0px;
}

.p-documentation {
  /* ── Layout ──────────────────────────────────── */
}
.p-documentation .doc-wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: calc(100vh - var(--doc-top));
}
.p-documentation .doc-topbar {
  display: none;
}
.p-documentation .sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  padding: 6px 10px;
  font: 500 13px/1 var(--sans);
  color: #5a6a82;
  background: none;
  border: none;
  cursor: pointer;
}
.p-documentation .sidebar-toggle-btn i {
  width: 16px;
  height: 16px;
}
.p-documentation {
  /* ── Sidebar ─────────────────────────────────── */
}
.p-documentation #doc-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--doc-top) + var(--role-bar));
  height: calc(100vh - var(--doc-top) - var(--role-bar));
  overflow-y: auto;
  border-right: 1px solid #e4eaf4;
  background: #fafbfd;
  padding: 16px 0 40px;
}
.p-documentation #doc-sidebar::-webkit-scrollbar {
  width: 3px;
}
.p-documentation #doc-sidebar::-webkit-scrollbar-thumb {
  background: #d0daea;
  border-radius: 3px;
}
.p-documentation .doc-search-wrap {
  padding: 0 16px 14px;
  border-bottom: 1px solid #e4eaf4;
  margin-bottom: 10px;
}
.p-documentation .doc-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f4fb;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 7px 10px;
}
.p-documentation .doc-search-box i {
  width: 14px;
  height: 14px;
  color: #8fa8c8;
  flex-shrink: 0;
}
.p-documentation .doc-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font: 400 13px/1 var(--sans);
  color: #1e2d4d;
  outline: none;
}
.p-documentation .doc-search-box input::placeholder {
  color: #aab8cc;
}
.p-documentation .doc-search-shortcut {
  font: 500 10px/1 var(--sans);
  color: #aab8cc;
  background: #e4eaf4;
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
}
.p-documentation .doc-nav-group {
  border-bottom: 1px solid #f0f4fb;
}
.p-documentation .doc-nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6a82;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.p-documentation .doc-nav-group-title i,
.p-documentation .doc-nav-group-title svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.p-documentation .doc-nav-group-title:hover {
  color: #1e2d4d;
}
.p-documentation .doc-nav-group .doc-nav-items {
  display: none;
}
.p-documentation .doc-nav-group.open .doc-nav-items {
  display: block;
}
.p-documentation .doc-nav-group.open .doc-nav-group-title i,
.p-documentation .doc-nav-group.open .doc-nav-group-title svg {
  transform: rotate(90deg);
}
.p-documentation .doc-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 6px 24px;
  font: 400 13px/1.3 var(--sans);
  color: #5a6a82;
  text-decoration: none;
  transition: all 0.12s;
}
.p-documentation .doc-nav-link:hover {
  color: #3b7de8;
  background: #f0f4fb;
}
.p-documentation .doc-nav-link.active {
  color: #3b7de8;
  font-weight: 600;
  background: #eef3fd;
}
.p-documentation .doc-nav-section {
  display: block;
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c5d0e0;
  padding: 18px 16px 6px;
}
.p-documentation .doc-nav-section:first-child {
  padding-top: 6px;
}
.p-documentation {
  /* ── Version selector (bottom of sidebar) ─────── */
}
.p-documentation .doc-nav-version {
  margin-top: 24px;
  padding: 16px 16px 8px;
  border-top: 1px solid #f0f4fb;
}
.p-documentation .doc-nav-version label {
  display: block;
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c5d0e0;
  margin-bottom: 8px;
}
.p-documentation .doc-nav-version select {
  width: 100%;
  font: 400 13px/1.3 var(--sans);
  color: #5a6a82;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.p-documentation .doc-nav-version select:hover,
.p-documentation .doc-nav-version select:focus {
  border-color: #3b7de8;
  outline: none;
}
.p-documentation {
  /* ── Main content ────────────────────────────── */
}
.p-documentation .doc-main {
  flex: 1;
  min-width: 0;
  padding: 40px 56px 80px;
}
.p-documentation .doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font: 400 13px/1 var(--sans);
  color: #8fa8c8;
  margin-bottom: 32px;
}
.p-documentation .doc-breadcrumb a {
  color: #8fa8c8;
  text-decoration: none;
}
.p-documentation .doc-breadcrumb a:hover {
  color: #3b7de8;
}
.p-documentation .doc-breadcrumb i {
  width: 12px;
  height: 12px;
}
.p-documentation .doc-section {
  margin-bottom: 56px;
}
.p-documentation .doc-section h2 {
  font: 700 28px/1.2 var(--serif);
  color: #1e2d4d;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.p-documentation .doc-section > p:first-of-type {
  font-size: 16px;
  color: #5a6a82;
  margin: 0 0 28px;
  line-height: 1.65;
}
.p-documentation .doc-section h3 {
  scroll-margin-top: var(--sticky-top);
  font: 600 18px/1.3 var(--serif);
  color: #1e2d4d;
  margin: 36px 0 12px;
  padding-top: 36px;
  border-top: 1px solid #f0f4fb;
}
.p-documentation .doc-section h3:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.p-documentation .doc-section p {
  font: 400 15px/1.7 var(--sans);
  color: #3d4f68;
  margin: 0 0 16px;
}
.p-documentation .doc-section ul, .p-documentation .doc-section ol {
  font: 400 15px/1.7 var(--sans);
  color: #3d4f68;
  margin: 0 0 20px;
  padding: 0 0 0 20px;
}
.p-documentation .doc-section li {
  margin-bottom: 6px;
}
.p-documentation .doc-steps {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  font: 400 15px/1.7 var(--sans);
  color: #3d4f68;
}
.p-documentation .doc-steps li {
  margin-bottom: 8px;
}
.p-documentation .doc-section code {
  font: 400 13.5px/1.6 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: #1e4a8a;
  background: #e8f0fc;
  padding: 2px 6px;
  border-radius: 4px;
}
.p-documentation .doc-screenshot {
  margin: 20px 0 24px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e4eaf4;
  box-shadow: 0 2px 16px rgba(30, 45, 77, 0.06);
  max-width: 100%;
}
.p-documentation .doc-screenshot img {
  display: block;
  width: 540px;
  max-width: 100%;
  height: auto;
}
.p-documentation .callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  margin: 20px 0;
  font: 400 14px/1.6 var(--sans);
}
.p-documentation .callout i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.p-documentation .callout-info {
  background: #eff6ff;
  color: #1e40af;
}
.p-documentation .callout-info i {
  color: #3b82f6;
}
.p-documentation .callout-warn {
  background: #fffbeb;
  color: #92400e;
}
.p-documentation .callout-warn i {
  color: #f59e0b;
}
.p-documentation .callout-tip {
  background: #f0fdf4;
  color: #166534;
}
.p-documentation .callout-tip i {
  color: #22c55e;
}
.p-documentation .callout-success {
  background: #edfaf3;
  color: #0a2e1a;
}
.p-documentation .callout-success i {
  color: #1a5c38;
}
.p-documentation .doc-field-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font: 400 14px/1.5 var(--sans);
}
.p-documentation .doc-field-table th {
  text-align: left;
  padding: 8px 12px;
  font: 600 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8fa8c8;
  background: #f5f8fd;
  border-bottom: 1px solid #e4eaf4;
}
.p-documentation .doc-field-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f4fb;
  color: #3d4f68;
  vertical-align: top;
}
.p-documentation .doc-field-table tr:last-child td {
  border-bottom: none;
}
.p-documentation .doc-field-table td:first-child {
  font-weight: 500;
  color: #1e2d4d;
  white-space: nowrap;
}
.p-documentation {
  /* ── In-page TOC ─────────────────────────────── */
}
.p-documentation .doc-toc {
  float: right;
  clear: right;
  width: 200px;
  margin: 0 0 24px 32px;
  border: 1px solid #e4eaf4;
  border-radius: 10px;
  background: #fafbfd;
  padding: 14px 16px;
  font: 400 13px/1 var(--sans);
}
.p-documentation .doc-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.p-documentation .doc-toc-title {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8fa8c8;
}
.p-documentation .doc-toc-top {
  font: 500 11px/1 var(--sans);
  color: #8fa8c8;
  text-decoration: none;
  border: 1px solid #e4eaf4;
  border-radius: 5px;
  padding: 3px 8px;
  transition: all 0.15s;
}
.p-documentation .doc-toc-top:hover {
  color: #3b7de8;
  border-color: #3b7de8;
}
.p-documentation .doc-toc a {
  display: block;
  padding: 5px 0;
  color: #5a6a82;
  text-decoration: none;
  border-bottom: 1px solid #f0f4fb;
  font-size: 13px;
  line-height: 1.4;
  transition: color 0.15s;
}
.p-documentation .doc-toc a:last-child {
  border-bottom: none;
}
.p-documentation .doc-toc a:hover {
  color: #3b7de8;
}
.p-documentation {
  /* ── Prev / Next nav ─────────────────────────── */
}
.p-documentation .doc-page-nav {
  display: flex;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid #e4eaf4;
}
.p-documentation .doc-page-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1.5px solid #e4eaf4;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s;
  min-width: 0;
}
.p-documentation .doc-page-nav-btn:hover {
  border-color: #3b7de8;
  box-shadow: 0 2px 12px rgba(59, 125, 232, 0.1);
}
.p-documentation .doc-page-nav-btn.next {
  text-align: right;
}
.p-documentation .doc-page-nav-label {
  font: 500 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8fa8c8;
}
.p-documentation .doc-page-nav-title {
  font: 600 14px/1.3 var(--sans);
  color: #1e2d4d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-documentation {
  /* ── signup-confirmation cards ───────────────── */
}
.p-documentation .confirm-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}
.p-documentation .confirm-mode {
  border: 1.5px solid #e4eaf4;
  border-radius: 10px;
  padding: 18px 16px;
  background: #fafbfd;
}
.p-documentation .confirm-mode-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.p-documentation .confirm-mode-icon i {
  width: 16px;
  height: 16px;
}
.p-documentation .confirm-mode-icon-none {
  background: #e8f0fc;
  color: #3b7de8;
}
.p-documentation .confirm-mode-icon-email {
  background: #e8f5ee;
  color: #1a5c38;
}
.p-documentation .confirm-mode-icon-admin {
  background: #fdf3e8;
  color: #c8720a;
}
.p-documentation .confirm-mode-title {
  font: 600 13px/1.3 var(--sans);
  color: #1e2d4d;
  margin-bottom: 6px;
}
.p-documentation .confirm-mode-desc {
  font: 400 12px/1.5 var(--sans);
  color: #5a6a82;
}
.p-documentation {
  /* ── password-security strength items ───────── */
}
.p-documentation .pw-strength {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}
.p-documentation .pw-strength-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f5f8fd;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  font: 500 13px/1 var(--sans);
  color: #3d4f68;
}
.p-documentation .pw-strength-item i {
  width: 15px;
  height: 15px;
  color: #3b7de8;
  flex-shrink: 0;
}
.p-documentation {
  /* ── Layout shell ────────────────────────────── */
}
.p-documentation .doc-wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: calc(100vh - var(--doc-top));
}
.p-documentation {
  /* Mobile-only topbar */
}
.p-documentation .doc-topbar {
  display: none;
}
.p-documentation .sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  padding: 6px 10px;
  font: 500 13px/1 var(--sans);
  color: #5a6a82;
  background: none;
  border: none;
  cursor: pointer;
}
.p-documentation .sidebar-toggle-btn i {
  width: 16px;
  height: 16px;
}
.p-documentation {
  /* ── Sidebar ─────────────────────────────────── */
}
.p-documentation #doc-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--doc-top) + var(--role-bar));
  height: calc(100vh - var(--doc-top) - var(--role-bar));
  overflow-y: auto;
  border-right: 1px solid #e4eaf4;
  background: #fafbfd;
  padding: 16px 0 40px;
}
.p-documentation #doc-sidebar::-webkit-scrollbar {
  width: 3px;
}
.p-documentation #doc-sidebar::-webkit-scrollbar-thumb {
  background: #d0daea;
  border-radius: 3px;
}
.p-documentation .doc-search-wrap {
  padding: 0 16px 14px;
  border-bottom: 1px solid #e4eaf4;
  margin-bottom: 10px;
}
.p-documentation .doc-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f4fb;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 7px 10px;
  transition: border-color 0.15s;
}
.p-documentation .doc-search-box:focus-within {
  border-color: #3b7de8;
  background: #fff;
}
.p-documentation .doc-search-box i {
  width: 14px;
  height: 14px;
  color: #8fa8c8;
  flex-shrink: 0;
}
.p-documentation .doc-search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font: 400 13px/1 var(--sans);
  color: #1e2d4d;
}
.p-documentation .doc-search-box input::placeholder {
  color: #8fa8c8;
}
.p-documentation .doc-search-shortcut {
  font: 500 11px/1 var(--sans);
  color: #8fa8c8;
  background: #e4eaf4;
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
}
.p-documentation .doc-nav-group {
  margin-bottom: 2px;
}
.p-documentation .doc-nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8fa8c8;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.p-documentation .doc-nav-group-title:hover {
  color: #1e2d4d;
}
.p-documentation .doc-nav-group-title i,
.p-documentation .doc-nav-group-title svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
}
.p-documentation .doc-nav-group.open .doc-nav-group-title i,
.p-documentation .doc-nav-group.open .doc-nav-group-title svg {
  transform: rotate(90deg);
}
.p-documentation .doc-nav-items {
  display: none;
  padding-bottom: 4px;
}
.p-documentation .doc-nav-group.open .doc-nav-items {
  display: block;
}
.p-documentation .doc-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 6px 24px;
  font: 400 13px/1.4 var(--sans);
  color: #5a6a82;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.p-documentation .doc-nav-link:hover {
  color: #1e2d4d;
  background: #f0f4fb;
}
.p-documentation .doc-nav-link.active {
  color: #3b7de8;
  border-left-color: #3b7de8;
  background: #f0f6ff;
  font-weight: 500;
}
.p-documentation {
  /* Sidebar section divider label */
}
.p-documentation .doc-nav-section {
  display: block;
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c5d0e0;
  padding: 18px 16px 6px;
}
.p-documentation .doc-nav-section:first-child {
  padding-top: 6px;
}
.p-documentation {
  /* ── Main content ────────────────────────────── */
}
.p-documentation .doc-main {
  flex: 1;
  min-width: 0;
  padding: 48px 56px 80px;
}
.p-documentation {
  /* ── Index header ────────────────────────────── */
}
.p-documentation .doc-index-eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b7de8;
  margin-bottom: 12px;
}
.p-documentation .doc-index-header {
  margin-bottom: 48px;
}
.p-documentation .doc-index-header h1 {
  font: 800 34px/1.15 var(--serif);
  color: #1e2d4d;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.p-documentation .doc-index-header p {
  font: 400 16px/1.6 var(--sans);
  color: #5a6a82;
  max-width: 520px;
}
.p-documentation {
  /* ── Section label ───────────────────────────── */
}
.p-documentation .doc-section-label {
  display: block;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa8c8;
  margin-bottom: 14px;
}
.p-documentation {
  /* ── Quick-start cards ───────────────────────── */
}
.p-documentation .qs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 48px;
}
.p-documentation .qs-card {
  background: #1e2d4d;
  color: #fff;
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.p-documentation .qs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
}
.p-documentation .qs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 26, 46, 0.25);
}
.p-documentation .qs-card.blue {
  background: #3b7de8;
}
.p-documentation .qs-card.blue:hover {
  box-shadow: 0 12px 32px rgba(59, 125, 232, 0.35);
}
.p-documentation .qs-num {
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.p-documentation .qs-title {
  font: 700 15px/1.3 var(--serif);
}
.p-documentation .qs-desc {
  font: 400 13px/1.55 var(--sans);
  opacity: 0.75;
  flex: 1;
}
.p-documentation .qs-arrow {
  font-size: 17px;
  opacity: 0.6;
}
.p-documentation {
  /* ── Category grid ───────────────────────────── */
}
.p-documentation .cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 48px;
}
.p-documentation .cat-card {
  background: #fff;
  border: 1.5px solid #e4eaf4;
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
}
.p-documentation .cat-card:hover {
  border-color: #3b7de8;
  box-shadow: 0 4px 20px rgba(59, 125, 232, 0.1);
  transform: translateY(-1px);
}
.p-documentation .cat-count {
  position: absolute;
  top: 18px;
  right: 18px;
  font: 500 11px/1 var(--sans);
  color: #8fa8c8;
}
.p-documentation .cat-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.p-documentation .cat-icon i {
  width: 17px;
  height: 17px;
}
.p-documentation .ci-blue {
  background: #e8f0fc;
  color: #3b7de8;
}
.p-documentation .ci-green {
  background: #e8f5ee;
  color: #1a5c38;
}
.p-documentation .ci-gold {
  background: #fdf8ed;
  color: #c8962a;
}
.p-documentation .ci-orange {
  background: #fdf3e8;
  color: #c8720a;
}
.p-documentation .ci-ink {
  background: #edf2fa;
  color: #1e2d4d;
}
.p-documentation .cat-card h3 {
  font: 700 14px/1.3 var(--serif);
  color: #1e2d4d;
  margin-bottom: 5px;
}
.p-documentation .cat-card p {
  font: 400 13px/1.55 var(--sans);
  color: #5a6a82;
  margin-bottom: 12px;
}
.p-documentation .cat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.p-documentation .cat-pill {
  font: 500 11px/1 var(--sans);
  color: #3b7de8;
  background: #e8f0fc;
  padding: 3px 9px;
  border-radius: 20px;
}
.p-documentation {
  /* ── Popular list ────────────────────────────── */
}
.p-documentation .popular-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 48px;
}
.p-documentation .pop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.p-documentation .pop-item:hover {
  background: #f4f7fd;
}
.p-documentation .pop-rank {
  font: 700 11px/1 var(--sans);
  color: #8fa8c8;
  width: 22px;
  flex-shrink: 0;
  text-align: center;
}
.p-documentation .pop-text {
  flex: 1;
  min-width: 0;
}
.p-documentation .pop-title {
  font: 500 14px/1.35 var(--sans);
  color: #1e2d4d;
}
.p-documentation .pop-item:hover .pop-title {
  color: #3b7de8;
}
.p-documentation .pop-meta {
  font: 400 12px/1 var(--sans);
  color: #8fa8c8;
  margin-top: 3px;
}
.p-documentation .pop-arrow {
  font-size: 14px;
  color: #8fa8c8;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.p-documentation .pop-item:hover .pop-arrow {
  transform: translateX(3px);
  color: #3b7de8;
}
.p-documentation {
  /* ── Help strip ──────────────────────────────── */
}
.p-documentation .help-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fafbfd;
  border: 1.5px solid #e4eaf4;
  border-radius: 12px;
  padding: 22px 26px;
}
.p-documentation .help-strip h3 {
  font: 700 15px/1.3 var(--serif);
  color: #1e2d4d;
  margin-bottom: 4px;
}
.p-documentation .help-strip p {
  font: 400 13px/1.55 var(--sans);
  color: #5a6a82;
}
.p-documentation .help-strip p a {
  color: #3b7de8;
  text-decoration: none;
  font-weight: 500;
}
.p-documentation .help-strip p a:hover {
  text-decoration: underline;
}
.p-documentation .help-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.p-documentation .help-btn-primary {
  background: #1e2d4d;
  color: #fff;
  font: 600 13px/1 var(--sans);
  padding: 10px 18px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.p-documentation .help-btn-primary:hover {
  background: #162440;
}
.p-documentation .help-btn-sec {
  font: 500 13px/1 var(--sans);
  color: #5a6a82;
  padding: 10px 18px;
  border-radius: 7px;
  border: 1.5px solid #e4eaf4;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}
.p-documentation .help-btn-sec:hover {
  border-color: #1e2d4d;
  color: #1e2d4d;
}
.p-documentation {
  /* ── Responsive ──────────────────────────────── */
}
@media (max-width: 960px) {
  .p-documentation .doc-main {
    padding: 32px 28px 64px;
  }
  .p-documentation .qs-grid {
    grid-template-columns: 1fr;
  }
  .p-documentation .cat-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .p-documentation .doc-topbar {
    display: flex;
    position: sticky;
    top: var(--doc-top);
    z-index: 90;
    background: #fff;
    border-bottom: 1px solid #e4eaf4;
    padding: 8px 16px;
    align-items: center;
  }
  .p-documentation .sidebar-toggle-btn {
    display: flex;
  }
  .p-documentation #doc-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.25s ease;
    box-shadow: 4px 0 24px rgba(30, 45, 77, 0.15);
  }
  .p-documentation #doc-sidebar.open {
    left: 0;
  }
  .p-documentation .doc-main {
    padding: 24px 16px 56px;
  }
  .p-documentation .help-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .p-documentation .help-actions {
    flex-direction: column;
    width: 100%;
  }
  .p-documentation .help-btn-primary, .p-documentation .help-btn-sec {
    text-align: center;
  }
}
.p-documentation {
  /* ── Responsive ──────────────────────────────── */
}
@media (max-width: 960px) {
  .p-documentation .doc-main {
    padding: 32px 28px 64px;
  }
}
@media (max-width: 720px) {
  .p-documentation .doc-topbar {
    display: flex;
    position: sticky;
    top: var(--doc-top);
    z-index: 90;
    background: #fff;
    border-bottom: 1px solid #e4eaf4;
    padding: 8px 16px;
    align-items: center;
  }
  .p-documentation .sidebar-toggle-btn {
    display: flex;
  }
  .p-documentation #doc-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    z-index: 200;
    transition: left 0.25s ease;
    box-shadow: 4px 0 24px rgba(30, 45, 77, 0.15);
  }
  .p-documentation #doc-sidebar.open {
    left: 0;
  }
  .p-documentation .doc-main {
    padding: 24px 16px 56px;
  }
  .p-documentation .doc-section h2 {
    font-size: 21px;
  }
  .p-documentation .doc-page-nav {
    flex-direction: column;
  }
  .p-documentation .doc-toc {
    float: none;
    width: auto;
    margin: 0 0 24px;
  }
  .p-documentation .confirm-modes {
    grid-template-columns: 1fr;
  }
  .p-documentation .pw-strength {
    flex-direction: column;
  }
}

/* Self-contained styling for this page. The layout reuses component class
       names (callout, feat-grid/feat, reasons, process-steps, cta) that live in
       the stylesheet scoped under other body classes (.p-mobile-apps,
       .p-custom-features), so we re-declare them here under .p-translations-pack.
       Hero, section-header, buttons, FAQ, and section backgrounds are global. */
/* ── Hero button row ─────────────────────── */
.p-translations-pack .hero-btns {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.p-translations-pack .btn-text {
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.p-translations-pack .btn-text:hover {
  text-decoration: underline;
}

/* ── Callout ─────────────────────────────── */
.p-translations-pack .callout {
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.18);
  border-radius: 14px;
  padding: 30px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.p-translations-pack .callout-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--white);
  border: 1.5px solid rgba(59, 125, 232, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}

.p-translations-pack .callout h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.p-translations-pack .callout p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
}

.p-translations-pack .callout p + p {
  margin-top: 10px;
}

.p-translations-pack .callout a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.p-translations-pack .callout a:hover {
  text-decoration: underline;
}

/* Small info variant (icon + text) */
.p-translations-pack .callout.callout-info {
  gap: 12px;
  padding: 16px 18px;
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
}

.p-translations-pack .callout.callout-info i,
.p-translations-pack .callout.callout-info svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--blue);
}

/* ── Language grid (feat cards) ──────────── */
.p-translations-pack .feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.p-translations-pack .feat {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.08);
  border-radius: 12px;
  padding: 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.p-translations-pack .feat:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 24px rgba(30, 45, 77, 0.07);
}

.p-translations-pack .feat-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.p-translations-pack .feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}

.p-translations-pack .feat h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.p-translations-pack .feat p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
}

.p-translations-pack .feat code {
  font-size: 0.78rem;
  color: var(--blue);
}

/* ── Reasons (why it matters) ────────────── */
.p-translations-pack .reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-translations-pack .reason-card {
  background: var(--white);
  border: 1.5px solid rgba(30, 45, 77, 0.09);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.p-translations-pack .reason-card:hover {
  border-color: rgba(59, 125, 232, 0.3);
  box-shadow: 0 6px 28px rgba(30, 45, 77, 0.08);
  transform: translateY(-2px);
}

.p-translations-pack .reason-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--pale);
  border: 1.5px solid rgba(59, 125, 232, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--ink);
}

.p-translations-pack .reason-card h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.p-translations-pack .reason-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
}

/* ── Process steps (how it works) ────────── */
.p-translations-pack .process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}

.p-translations-pack .process-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 16%;
  right: 16%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--pale) 0%, var(--blue) 50%, var(--pale) 100%);
  z-index: 0;
}

.p-translations-pack .process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.p-translations-pack .step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue);
}

.p-translations-pack .process-step h4 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.p-translations-pack .process-step p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}

/* ── CTA (on .ink dark section) ──────────── */
.p-translations-pack .cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.p-translations-pack .cta-inner .section-header {
  margin-bottom: 0;
}

.p-translations-pack .cta-inner h2 {
  color: var(--white);
}

.p-translations-pack .cta-text p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-top: 14px;
}

.p-translations-pack .cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 860px) {
  .p-translations-pack .reasons,
  .p-translations-pack .process-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-translations-pack .process-steps {
    margin-top: 24px;
  }
  .p-translations-pack .process-steps::before {
    display: none;
  }
  .p-translations-pack .cta-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-translations-pack .callout {
    flex-direction: column;
    gap: 14px;
    padding: 22px;
  }
}
.p-release-log .release-log {
  --serif: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 0 24px;
  color: #1e2d4d;
  font-family: var(--sans);
}

/* ── Header ─────────────────────────────────── */
.p-release-log .rl-eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b7de8;
  margin-bottom: 12px;
}

.p-release-log .rl-header h1 {
  font: 800 34px/1.15 var(--serif);
  color: #1e2d4d;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.p-release-log .rl-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13px/1 var(--sans);
  color: #5a6a82;
  border-radius: 999px;
  margin-bottom: 20px;
}

.p-release-log .rl-date i, .p-release-log .rl-date .lucide {
  width: 18px;
  height: 18px;
  color: #3b7de8;
}

.p-release-log .rl-date time {
  color: #1e2d4d;
  font-weight: 700;
}

.p-release-log .rl-header p {
  font: 400 16px/1.6 var(--sans);
  color: #5a6a82;
  max-width: 560px;
  margin-bottom: 24px;
}

/* ── Summary stats ──────────────────────────── */
.p-release-log .rl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 44px;
}

.p-release-log .rl-stat {
  border: 1.5px solid #e4eaf4;
  border-radius: 12px;
  padding: 18px 20px;
  background: #fff;
}

.p-release-log .rl-stat-num {
  font: 800 30px/1 var(--serif);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.p-release-log .rl-stat-label {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8fa8c8;
}

.p-release-log .rl-stat--total .rl-stat-num {
  color: #1e2d4d;
}

.p-release-log .rl-stat--done .rl-stat-num {
  color: #1a5c38;
}

.p-release-log .rl-stat--wf .rl-stat-num {
  color: #c8720a;
}

/* ── Section anchors nav ────────────────────── */
.p-release-log .rl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.p-release-log .rl-jump a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13px/1 var(--sans);
  color: #5a6a82;
  background: #fff;
  border: 1.5px solid #e4eaf4;
  border-radius: 20px;
  padding: 8px 14px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.p-release-log .rl-jump a:hover {
  border-color: #3b7de8;
  color: #3b7de8;
}

.p-release-log .rl-jump a span {
  font: 600 11px/1 var(--sans);
  color: #8fa8c8;
}

/* ── Section ────────────────────────────────── */
.p-release-log .rl-section {
  margin-bottom: 52px;
  scroll-margin-top: 90px;
}

.p-release-log .rl-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid #e4eaf4;
}

.p-release-log .rl-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-release-log .rl-section-icon i {
  width: 18px;
  height: 18px;
}

.p-release-log .ci-blue {
  background: #e8f0fc;
  color: #3b7de8;
}

.p-release-log .ci-gold {
  background: #fdf8ed;
  color: #c8962a;
}

.p-release-log .ci-orange {
  background: #fdf3e8;
  color: #c8720a;
}

.p-release-log .ci-ink {
  background: #edf2fa;
  color: #1e2d4d;
}

.p-release-log .rl-section-titles {
  flex: 1;
  min-width: 0;
}

.p-release-log .rl-section-titles h2 {
  font: 700 20px/1.2 var(--serif);
  color: #1e2d4d;
  margin: 2px 0 4px;
}

.p-release-log .rl-section-titles p {
  font: 400 13px/1.5 var(--sans);
  color: #5a6a82;
  margin: 0;
}

.p-release-log .rl-section-count {
  font: 500 12px/1.4 var(--sans);
  color: #8fa8c8;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  padding-top: 4px;
}

.p-release-log .rl-section-count b {
  color: #1a5c38;
  font-weight: 600;
}

/* ── Items ──────────────────────────────────── */
.p-release-log .rl-list {
  display: flex;
  flex-direction: column;
}

.p-release-log .rl-item {
  display: flex;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid #f0f4fb;
}

.p-release-log .rl-item:last-child {
  border-bottom: none;
}

.p-release-log .rl-item-status {
  flex-shrink: 0;
  padding-top: 2px;
}

.p-release-log .rl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.02em;
  padding: 5px 10px 5px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.p-release-log .rl-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.p-release-log .rl-badge--done {
  color: #1a5c38;
  background: #e8f5ee;
}

.p-release-log .rl-badge--done::before {
  background: #1a9c54;
}

.p-release-log .rl-badge--wontfix {
  color: #8a6410;
  background: #fdf3e8;
}

.p-release-log .rl-badge--wontfix::before {
  background: #c8962a;
}

.p-release-log .rl-item-body {
  flex: 1;
  min-width: 0;
}

.p-release-log .rl-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.p-release-log .rl-tag {
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3b7de8;
  background: #e8f0fc;
  padding: 4px 8px;
  border-radius: 5px;
}

.p-release-log .rl-tag--section {
  color: #5a6a82;
  background: #edf2fa;
}

.p-release-log .rl-item-text {
  font: 400 14px/1.6 var(--sans);
  color: #34435f;
  margin: 0;
}

.p-release-log .rl-note {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fafbfd;
  border: 1px solid #eef2f8;
  border-radius: 8px;
  font: 400 13px/1.55 var(--sans);
  color: #5a6a82;
}

.p-release-log .rl-note b {
  font: 700 10px/2.1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa8c8;
  flex-shrink: 0;
}

/* ── Older release logs link ────────────────── */
.p-release-log .rl-older {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 1.5px solid #e4eaf4;
  border-radius: 12px;
  text-decoration: none;
  color: #1e2d4d;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.p-release-log .rl-older:hover {
  border-color: #3b7de8;
  box-shadow: 0 2px 12px rgba(59, 125, 232, 0.08);
}

.p-release-log .rl-older-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e8f0fc;
  color: #3b7de8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-release-log .rl-older-icon i {
  width: 18px;
  height: 18px;
}

.p-release-log .rl-older-text {
  flex: 1;
  min-width: 0;
  font: 400 13px/1.5 var(--sans);
  color: #5a6a82;
}

.p-release-log .rl-older-text b {
  display: block;
  font: 700 15px/1.3 var(--serif);
  color: #1e2d4d;
  margin-bottom: 2px;
}

.p-release-log .rl-older-arrow {
  width: 18px;
  height: 18px;
  color: #8fa8c8;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.p-release-log .rl-older:hover .rl-older-arrow {
  color: #3b7de8;
  transform: translateX(3px);
}

/* ── Foot note ──────────────────────────────── */
.p-release-log .rl-foot {
  margin-top: 8px;
  padding: 22px 26px;
  background: #fafbfd;
  border: 1.5px solid #e4eaf4;
  border-radius: 12px;
  font: 400 13px/1.6 var(--sans);
  color: #5a6a82;
}

.p-release-log .rl-foot a {
  color: #3b7de8;
  text-decoration: none;
  font-weight: 500;
}

.p-release-log .rl-foot a:hover {
  text-decoration: underline;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 720px) {
  .p-release-log .rl-header h1 {
    font-size: 27px;
  }
  .p-release-log .rl-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .p-release-log .rl-section-count {
    display: none;
  }
  .p-release-log .rl-item {
    flex-direction: column;
    gap: 10px;
  }
}
/* -- custom stuff -- */
@media (min-width: 576px) {
  .members-area .members-headline {
    font-size: 2rem !important;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
  }
  .members-area .members-headline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.members-area .members-navbar {
  background-color: var(--bg);
}
.members-area .members-navbar .border-bottom {
  border-bottom-color: var(--pale) !important;
}
.members-area .members-navbar-link {
  color: var(--bs-body-color);
}
.members-area .members-navbar-link:hover {
  background-color: var(--pale);
  color: var(--bs-body-color);
}
.members-area .members-navbar-link.active {
  background-color: var(--pale);
  color: var(--bs-body-color);
}
.members-area .members-navbar-link--muted {
  color: var(--bs-secondary-color);
}
.members-area .members-navbar-link--muted:hover {
  background-color: var(--bs-light);
  color: var(--bs-body-color);
}
.members-area .btn {
  border-radius: 4px;
}

/* ── catch-all for utilities until they earn their own file ── */
.doc-main section {
  padding: 0;
}

@media (min-width: 720px) {
  .doc-toc {
    position: sticky;
    top: calc(var(--doc-top) + var(--role-bar) + 16px);
  }
}

.feature-list img {
  transition: width 0.3s ease;
}

.feature-list img:hover {
  width: 150% !important;
}

.list-standard {
  padding-left: 15px;
}
.list-standard li {
  margin-bottom: 0.15rem;
}

.form-contact-us,
.form-user,
.form-vertical {
  max-width: 600px;
}

/* ── V10 FORM ELEMENTS (site-wide) ─────────────────────────
 * Global styling applied to the base Bootstrap 5 form classes
 * so any form on the site inherits the v10 look with no extra
 * per-form classes.
 * ─────────────────────────────────────────────────────────── */
.col-form-label {
  display: block;
  font-family: var(--sans, "Inter"), system-ui, sans-serif;
  font-size: 0.8rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink, #1e2d4d);
  margin: 0 0 0.35rem;
}

.form-control, .form-select {
  font-family: var(--sans, "Inter"), system-ui, sans-serif;
  font-size: var(--pb-font-size);
  color: var(--ink2, #162440);
  background-color: var(--white);
  border: 1px solid var(--pale2, #e8f0fc);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder, .form-select::placeholder {
  color: var(--light, #8fa8c8);
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue, #3b7de8);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59, 125, 232, 0.12);
  outline: none;
}
.form-sign-in .form-control, .form-sign-in .form-select {
  padding: 16px 12px;
}

.form-check-input {
  border-color: rgba(30, 45, 77, 0.25);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--blue, #3b7de8);
  border-color: var(--blue, #3b7de8);
}
.form-check-input:focus {
  border-color: var(--blue, #3b7de8);
  box-shadow: 0 0 0 4px rgba(59, 125, 232, 0.15);
}

.form-check-label {
  color: var(--ink, #1e2d4d);
}

/* ── V10 CTAs & LINKS ─────────────────────────────────────
 * Two button flavours + an accent link, usable anywhere on
 * the site. Ink CTA for primary form submits; light CTA for
 * secondary actions on a light surface (Create Account,
 * Google Sign-in, etc.).
 * ─────────────────────────────────────────────────────────── */
.form-vertical .btn-primary, .form-sign-in .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--ink, #1e2d4d);
  color: #fff;
  font-family: var(--serif, "Plus Jakarta Sans"), "Inter", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.95rem 1rem;
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(30, 45, 77, 0.18);
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.form-vertical .btn-primary:hover, .form-sign-in .btn-primary:hover {
  background: var(--ink2, #162440);
  color: #fff;
  box-shadow: 0 10px 26px rgba(30, 45, 77, 0.22);
}
.form-vertical .btn-primary:active, .form-sign-in .btn-primary:active {
  transform: translateY(1px);
}
.form-vertical .btn-primary:focus, .form-sign-in .btn-primary:focus {
  box-shadow: 0 6px 18px rgba(30, 45, 77, 0.18), 0 0 0 4px rgba(59, 125, 232, 0.2);
}
.form-vertical .btn-light, .form-sign-in .btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #fff !important;
  color: var(--ink, #1e2d4d) !important;
  font-family: var(--sans, "Inter"), system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600 !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--pale, #e8f0fc);
  border-radius: 10px !important;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(30, 45, 77, 0.06) !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.form-vertical .btn-light:hover, .form-sign-in .btn-light:hover {
  color: var(--ink, #1e2d4d);
  background: var(--bg, #f4f7fd);
  border-color: var(--blue, #3b7de8);
  box-shadow: 0 6px 16px rgba(30, 45, 77, 0.08);
}
.form-vertical .btn-light:active, .form-sign-in .btn-light:active {
  transform: translateY(1px);
}
.form-vertical .btn-light:focus, .form-sign-in .btn-light:focus {
  box-shadow: 0 4px 12px rgba(30, 45, 77, 0.06), 0 0 0 4px rgba(59, 125, 232, 0.15);
}
.form-vertical .btn-light svg, .form-sign-in .btn-light svg {
  flex-shrink: 0;
}
.form-vertical .link-v10, .form-sign-in .link-v10 {
  color: var(--blue, #3b7de8);
  text-decoration: none;
}
.form-vertical .link-v10:hover, .form-sign-in .link-v10:hover {
  color: var(--blue2, #5a94ef);
  text-decoration: underline;
}
.form-vertical .form-group .text-sm, .form-sign-in .form-group .text-sm {
  font-size: 0.82rem !important;
}
.form-vertical .col-form-label, .form-sign-in .col-form-label {
  padding: 0;
}

.bg-light {
  background-color: var(--bg, #f4f7fd) !important;
}

/* --- V9 --- */
h1.headline {
  font-size: 2.5rem;
}

h2.headline {
  font-size: 2rem;
}

h3.headline {
  font-size: 1.75rem;
}

h4.headline {
  font-size: 1.5rem;
}

h5.headline {
  font-size: 1.25rem;
}

h6.headline {
  font-size: 1.15rem;
}

dl.row {
  margin-bottom: 1rem;
}

.message-board dt {
  font-size: 0.975rem;
  font-weight: 500;
  border-bottom: 1px solid var(--pb-color-gray-100);
  padding-bottom: 4px;
}
.message-board dt .badge {
  font-size: 0.975rem;
  font-weight: 500;
}
.message-board dt small {
  font-size: 0.875rem;
}
.message-board dd {
  font-size: 0.925rem;
  line-height: 1.4;
}

small.short-description {
  font-size: 0.825rem;
}

.ticket-description {
  font-size: 0.95rem;
  line-height: 1.4;
}

.members-dl dt {
  font-size: 0.975rem;
  font-weight: 500;
}
.members-dl dd {
  font-size: 0.95rem;
  line-height: 1.4;
}

/*# sourceMappingURL=style.css.map */