:root {
  --white: #fff;
  --gray-50: #f5f5f7;
  --gray-100: #e8e8ed;
  --gray-200: #d2d2d7;
  --gray-700: #48484a;
  --ink: #1d1d1f;
  --red: #e3121b;
  --red-dark: #b30e15;
  --shadow-sm: 0 1px 2px #0000000a, 0 1px 1px #00000008;
  --shadow-md: 0 12px 30px #00000014;
  --r-lg: 28px;
  --r-pill: 999px;
  --ease: cubic-bezier(.5, 0, .15, 1);
  --brand-red: #e3121b;
  --brand-dark: #1c1512;
  --brand-muted: #7d716c;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --engage: #0d3a8a !important;
  --comply: #427e72 !important;
  --probaw: #170645 !important;
  --probaa: #365b6d !important;
  --verdict: #0a3b34 !important;
  --orcaa: #70459b !important;
}

.tab-content .btn-outline-danger, .tab-content .btn-danger { 
  background-color: var(--red); 
  border-color: var(--red); color: var(--white); 
}

.tab-content .btn-outline-danger:hover, .tab-content .btn-danger:hover { 
  background-color: var(--red-dark); 
  border-color: var(--red-dark); 
  color: var(--white); 
}

.apple-nav-pills { 
  gap: 2px; 
  padding: 4px; 
  background-color: var(--gray-50); 
  border: 1px solid var(--gray-100); 
  border-radius: var(--r-pill); 
}

.apple-nav-pills .nav-item { 
  margin: 0; 
}

.apple-nav-pills .nav-link { 
  padding: 10px 20px; 
  border: 0; 
  border-radius: var(--r-pill); 
  background: transparent; 
  color: var(--gray-700); 
  font-size: 14px; 
  transition: all .25s var(--ease); 
}

.apple-nav-pills .nav-link:hover { 
  color: var(--ink); 
}

.apple-nav-pills .nav-link.active, .apple-nav-pills .show > .nav-link { 
  background-color: var(--white); 
  color: var(--ink); 
  box-shadow: var(--shadow-sm); 
}

@media (width < 760px) {
  .pricing-tabs-scroll { 
    display: block !important; 
    overflow-x: auto; 
    padding: 0 24px; 
    -webkit-overflow-scrolling: touch; 
  }

  .pricing-tabs-scroll .apple-nav-pills { 
    flex-wrap: nowrap !important; 
    width: max-content; 
  }

  .pricing-tabs-scroll .nav-item { 
    flex: 0 0 auto; 
  }
}

@media (prefers-reduced-motion: reduce) {
  * { 
    animation-duration: .001ms !important; 
    transition-duration: .001ms !important; 
  }

  html { 
    scroll-behavior: auto; 
  }
}

.nav-pills .nav-link.active, 
.nav-link.active {
    background-color: #fff !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 8px #15151547;
}

.nav-link {
    color: #6c757d;
}

body {
  color: var(--brand-dark);
}

.text-brand-red { 
    color: var(--brand-red) !important; 
}

.text-brand-engage{
    color: var(--engage) !important;
}

.text-brand-comply{
    color: var(--comply) !important;
}

.text-brand-probaw{
    color: var(--probaw) !important;
}

.text-brand-probaa{
    color: var(--probaa) !important;
}

.text-brand-verdict{
    color: var(--verdict) !important;
}

.text-brand-orcaa{
    color: var(--orcaa) !important;
}

.text-brand-muted { 
    color: var(--brand-muted) !important; 
}

.ls-wide { 
    letter-spacing: 0.12em; 
}

.ls-tight { 
    letter-spacing: -0.02em; 
}

.fs-7 { 
    font-size: 0.85rem; 
}

.fs-8 { 
    font-size: 0.65rem; 
}

.apple-card {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  background: #fff;
  border: 1px solid #0000000d;
  box-shadow: 0 4px 12px #00000005;
  z-index: 1;
}

.apple-card.dark-card {
  background: var(--brand-dark);
  color: #fff;
}

.apple-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px #00000014;
  z-index: 2;
}

.apple-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, -20%), #e2244a0f, transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.apple-card.dark-card::after {
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, -20%), #e2244a26, transparent 40%);
}

.apple-card:hover::after {
  opacity: 1;
}

.card-body, .card-visual {
  position: relative;
  z-index: 2;
}

.visit-link {
  gap: 6px;
  font-weight: 500;
  color: inherit;
  transition: color 0.2s ease;
}

.visit-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}

.visit-link:hover { 
    color: var(--brand-red); 
}

.visit-link:hover svg { 
    transform: translate(3px, -3px); 
}

.viz { 
    overflow: visible; 
}

.bar { 
    transform-box: fill-box; 
    transform-origin: bottom; 
    animation: grow-bar 0.9s var(--ease) both; 
}

.bar-muted { 
    fill: #438197; 
}

.bar-brand { 
    fill: var(--probaa); 
}

.delay-1 { 
    animation-delay: 0.05s; 
}

.delay-2 { 
    animation-delay: 0.15s; 
}

.delay-3 { 
    animation-delay: 0.25s; 
}

.delay-4 { 
    animation-delay: 0.35s; 
}

.delay-5 { 
    animation-delay: 0.45s; 
}

@keyframes grow-bar { 
    from { 
        transform: scaleY(0); 
        opacity: 0; 
    } 
    
    to { 
        transform: scaleY(1); 
        opacity: 1; 
    } 
}

.viz-trend { 
    stroke: #2d404c; 
    stroke-width: 1.6; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-dasharray: 220; 
    stroke-dashoffset: 220; 
    animation: draw-line 1.4s 0.5s var(--ease) both; 
    fill: none; 
}

.viz-dot { 
    fill: #438197; 
    animation: pulse-dot 2.2s 1.6s ease-in-out infinite; 
}

@keyframes pulse-dot { 
    0%, 100% { 
        r: 3; 
    } 
    
    50% { 
        r: 4.5; 
    } 
}

@keyframes draw-line { 
    to { 
        stroke-dashoffset: 0; 
    } 
}

.shield-ping { 
    fill: none; 
    stroke: var(--comply); 
    stroke-width: 1.5; 
    opacity: 0; 
    transform-box: fill-box; 
    transform-origin: center; 
    animation: ping 2.6s ease-out infinite; 
}

.shield-body { 
    fill: #b5dacf; 
    stroke: var(--comply); 
    stroke-width: 2; 
    stroke-linejoin: round; 
}

.shield-check { 
    stroke: var(--comply); 
    stroke-width: 4; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-dasharray: 40; 
    stroke-dashoffset: 40; 
    animation: draw-line 1s 0.4s var(--ease) both; 
    fill: none;
}

@keyframes ping { 
    0% { 
        transform: scale(0.6); 
        opacity: 0.55; 
    } 
    
    100% { 
        transform: scale(1.25); 
        opacity: 0; 
    } 
}

.rank-bar { 
    transform-box: fill-box; 
    transform-origin: left; 
    animation: grow-bar-x 0.8s var(--ease) both; 
}

.rb1 { 
    fill: var(--verdict); 
}

.rb2 { 
    fill: #0e574b; 
}

.rb3 { 
    fill: #0e6e5e; 
}

.rb4 { 
    fill: #118a73; 
}

@keyframes grow-bar-x { 
    from { 
        transform: scaleX(0); 
        opacity: 0; 
    } 
    
    to { 
        transform: scaleX(1); 
        opacity: 1; 
    } 
}

.bg-comply{
    background-color: var(--comply);
}

.notify-bubble { 
    gap: 8px; 
    width: 168px; 
    background: #fff; 
    border: 1px solid #ece1da; 
    border-radius: 12px; 
    padding: 9px 11px; 
    box-shadow: 0 8px 18px -10px #00000026; 
}

.notify-1 { 
    top: 0; 
    left: 0; 
    transform: rotate(-2.5deg); 
}

.notify-2 { 
    top: 34px; 
    left: 14px; 
    transform: rotate(2deg); 
}

.notify-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    margin-top: 4px; 
    flex: 0 0 auto; 
    background: var(--brand-muted); 
}

.notify-dot-alert { 
    background: var(--engage); 
    animation: pulse-alert 1.8s ease-in-out infinite; 
}

@keyframes pulse-alert { 
    0%, 100% { 
        box-shadow: 0 0 0 0 #84caff; 
    } 
    
    50% { 
        box-shadow: 0 0 0 5px #e2244a00; 
    } 
}

.gauge-track { 
    stroke: #e9dff5; 
    stroke-width: 8; 
    fill: none; 
}

.gauge-fill { 
    stroke: var(--orcaa); 
    stroke-width: 8; 
    stroke-linecap: round; 
    stroke-dasharray: 238.7; 
    stroke-dashoffset: 238.7; 
    animation: gauge-fill 1.3s 0.2s var(--ease) both; 
    fill: none; 
}

@keyframes gauge-fill { 
    to { 
        stroke-dashoffset: 67; 
    } 
}

.flow-path { 
    stroke: #b2b1ff; 
    stroke-width: 2; 
    fill: none; 
}

.flow-node { 
    fill: #fff; 
    stroke: var(--probaw); 
    stroke-width: 2; 
}

.flow-pulse { 
    fill: var(--probaw); 
}