:root{
  --brand-primary:#1d4ed8;
  --brand-primary-dark:#1e40af;
  --brand-orange:#f97316;
  --brand-orange-dark:#ea580c;
  --muted:#6b7280;
  --icon:#6b7280;
  --border:#e5e7eb;
  --bg-soft:#f8fafc;
}

/* Base + buttons */
html{ scroll-behavior:smooth; }
body{ color:#111827; }
.lead{ color:var(--muted); }

.btn-primary{ background:var(--brand-primary); border-color:var(--brand-primary); }
.btn-primary:hover,.btn-primary:focus{ background:var(--brand-primary-dark); border-color:var(--brand-primary-dark); }
.btn-outline-secondary{ border-color:#d1d5db; color:#374151; background:#fff; }
.btn-outline-secondary:hover{ background:#f9fafb; color:#111827; border-color:#9ca3af; }
.btn-orange{ background:var(--brand-orange); border-color:var(--brand-orange); color:#fff; }
.btn-orange:hover,.btn-orange:focus{ background:var(--brand-orange-dark); border-color:var(--brand-orange-dark); color:#fff; }

/* Hero */
#hero{ margin-top:0; padding-top:1rem; }
#hero .row{ --bs-gutter-x:0; }
.col-cushion{ padding-left:clamp(16px,2.5vw,36px); padding-right:clamp(16px,2.5vw,36px); }

.hero-title{ font-size:clamp(1.9rem,2.6vw,3rem); line-height:1.12; letter-spacing:-.01em; }
.hero-overline{ letter-spacing:.12em; }
.hero-accent{ height:4px; width:min(96px,12%); background:linear-gradient(90deg,#1d4ed8,#60a5fa); border-radius:2px; }

.stat-chip{
  display:inline-block; padding:.35rem .6rem; border:1px solid var(--border);
  border-radius:.75rem; background:#fff; color:#4b5563; font-size:.875rem;
}
.icon-faint{ color:var(--icon)!important; opacity:.9; }

.dash-stack{ display:grid; grid-template-columns:1fr; gap:16px; align-content:start; }
.mock-card{ width:100%; border-color:var(--border); }
#hero svg{ display:block; }

/* ===== Modern table (desktop only; hidden on mobile via d-none d-lg-block) ===== */
.table-modern{
  border:1px solid var(--border);
  border-radius:.75rem;
  overflow:hidden;
  background:#fff;
}
.table-modern thead th{
  background: linear-gradient(180deg, #f1f5ff 0%, #e7efff 100%);
  color:#111827; font-weight:600;
  border-bottom:1px solid var(--border);
}
.table-modern tbody td{ border-top:1px solid #eef2f7; }
.table-modern tbody tr:hover td{ background:#fafbff; }

/* ===== Full comparison grid (used inline on mobile, and in modal on desktop) ===== */
.compare-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr 1.15fr;
  border-top:1px solid var(--border);
}
.cg-head{ padding:.75rem 1rem; font-size:.9rem; font-weight:600; background:var(--bg-soft); border-bottom:1px solid var(--border); }
.cg-label,.cg-good,.cg-bad{ padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.cg-label{ font-weight:600; color:#111827; }
.cg-good{ background:#fff; }
.cg-bad{ background:#fff; color:#4b5563; }

/* ===== Mobile presentation ===== */
@media (max-width: 991.98px){
  /* Make the full comparison easy to read in a single column */
  .compare-grid{ grid-template-columns: 1fr; }
  .cg-head{ display:none; }
  .cg-label{ background:#f9fafb; border-left:4px solid #1d4ed8; border-radius:6px; }
  .cg-good,.cg-bad{ padding-top:.5rem; padding-bottom:.5rem; }
  .cg-good .badge,.cg-bad .badge{ vertical-align:middle; }
}

/* Logos */
.company-logo{
  height:56px; width:auto; max-width:300px; object-fit:contain;
  opacity:.95; filter:grayscale(12%);
  transition:transform .15s ease, opacity .15s ease, filter .15s ease;
}
.company-logo:hover{ opacity:1; filter:none; transform:translateY(-1px); }
@media (min-width:768px){ .company-logo{ height:64px; } }
@media (min-width:1200px){ .company-logo{ height:72px; } }

/* Sticky Mobile CTA */
#mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0;
  background:#ffffffcc; backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid var(--border); padding:.6rem 0; z-index:1030;
  box-shadow:0 -6px 16px rgba(0,0,0,.06);
}
#mobile-cta-bar .container{ padding-left:16px; padding-right:16px; }
@media (max-width:991.98px){ body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); } }

/* Responsive tweaks */
@media (max-width:991.98px){
  .dash-stack{ display:none; }
  .lead{ font-size:1rem; }
  .btn{ min-height:44px; }
  .hero-copy-inner{ max-width:none; }
}
@media (min-width:992px){
  #hero .row{ --bs-gutter-x:0; }
  .hero-copy-inner{ max-width:58ch; }
}

/* Hide KPI chips on mobile */
@media (max-width: 991.98px){
  .dash-mobile { display: none !important; }
}

/* Tighten the middle gap between hero columns on desktop */
@media (min-width: 992px){
  /* keep outer cushion; shrink the inner edges */
  #hero .col-cushion:first-of-type { padding-right: clamp(6px, 0.8vw, 12px); }  /* right edge of left col */
  #hero .col-cushion:last-of-type  { padding-left:  clamp(6px, 0.8vw, 12px); }  /* left edge of right col */

  /* optionally let copy breathe a bit wider so it fills the column */
  #hero .hero-copy-inner{ max-width: 64ch; }
}

/* Two Link Display */

/* 360° halo shadow — white card that pops */
.tile.card {
  background: #fff;                /* keep it white */
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.04);
  position: relative;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05),     /* crisp ring */
    0 10px 18px rgba(0,0,0,.14),   /* near blur */
    0 0 30px rgba(0,0,0,.16),      /* ambient halo */
    0 0 90px rgba(0,0,0,.18) !important; /* wide halo */
}

.tile.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 16px 28px rgba(0,0,0,.18),
    0 0 44px rgba(0,0,0,.20),
    0 0 120px rgba(0,0,0,.24) !important;
}

/* Tighter corners for the 360° halo card */
.tile.card {
  border-radius: .5rem !important;  /* try .375rem or .25rem for squarer */
}

/* Tighter 360° halo — less blur, no wide glow */
.tile.card {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.035),
    0 8px 16px rgba(0,0,0,.10),
    0 0 18px rgba(0,0,0,.10) !important;
}

.tile.card:hover {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.045),
    0 12px 22px rgba(0,0,0,.14),
    0 0 26px rgba(0,0,0,.14) !important;
}

.icon-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), .12);
  color: rgb(var(--bs-primary-rgb));
  box-shadow: inset 0 0 0 .125rem rgba(var(--bs-primary-rgb), .25);
}

.chev {
  font-size: 3rem;   /* was 2rem */
  line-height: .8;
  margin-left: .25rem;
  color: rgba(var(--bs-primary-rgb), .85);
}
@media (min-width: 992px) {
  .chev { font-size: 3.5rem; }
}


/* Guarantee and Pricing CSS */

/* Consistent bar height & no wrapping inside bars */
.rev-progress { height: 36px; }
.rev-progress .progress-bar { white-space: nowrap; }

/* Floating label for "Additional Revenue" — same size as in-bar text */
.additional-label{
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;   /* match Bootstrap progress-bar text size */
  line-height: 1;
  font-weight: 700;    /* fw-bold */
  color: #fff;         /* always white */
  pointer-events: none;
  white-space: nowrap;
}

/* Mobile: keep it right-aligned and visible */
@media (max-width:575.98px){
  .additional-label{
    right: .5rem;
    text-align: right;
    display: block;
    width: 100%;
  }
}

/* Baseline bar width when shown alone (100%) */
#pricing-guarantee .mb-4:first-child .progress-bar { width: 100%; }

/* Consistent bar height */
.rev-progress { height: 36px; }
.rev-progress .progress-bar { white-space: nowrap; }

/* Floating label for Additional Revenue */
.additional-label {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;   /* match Bootstrap progress-bar text size */
  line-height: 1;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}

/* Mobile: span full width, align right */
@media (max-width:575.98px){
  .additional-label {
    right: .5rem;
    text-align: right;
    display: block;
    width: 100%;
  }
}