.bg-hell{
  background-color: #F00;
}
.bg-poo{
  background-color: #F0F;
}
.gjs-row{
  display:table;padding:10px;width:100%;
}
.gjs-cell{
  width:8%;display:table-cell;height:75px;
}

@media (max-width: 768px){
  .gjs-cell{width:100%;display:block;}
}

#ifvi{
  text-align:center;
  color:white;
  font-size:66px;
  line-height:100%;
}
#ixqt{
  color:#7a1d1d;
  text-align:center;
  font-size:32px;
}
#i6jy{
  width:500px;
  border:1px solid white;
}
#iwsx{
  text-align:center;
}
/* =========================================================================
   Index page — competitive landing (added 2026-05) ========================= */

/* Hero reassurance line */
.hero-reassurance {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Section background tint helper */
section.features[style*="--bg-soft"],
section[style*="bg-soft"] {
  /* fallback if --bg-soft isn't defined in the theme */
}

/* "Replaces your stack" grid */
.replaces-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.replaces-card {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.replaces-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.replaces-card strong {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.replaces-card span {
  font-size: 0.8rem;
  opacity: 0.65;
  line-height: 1.35;
}
.stats-savings {
  margin-top: 2rem;
  font-size: 1.05rem;
}

/* Comparison table */
.compare-table-wrap {
  overflow-x: auto;
  margin: 2rem 0 1rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 720px;
}
.compare-table thead th {
  padding: 0.9rem 0.75rem;
  background: rgba(0,0,0,0.04);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid rgba(0,0,0,0.08);
}
.compare-table thead th.compare-feature-col {
  text-align: left;
}
.compare-table thead th.compare-us {
  background: var(--accent, #2563eb);
  color: #fff;
}
.compare-table tbody td {
  padding: 0.7rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  vertical-align: middle;
}
.compare-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
}
.compare-table tbody td.compare-us {
  background: rgba(37, 99, 235, 0.06);
  color: var(--accent, #2563eb);
  font-weight: 600;
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table .fa-check {
  color: #16a34a;
  font-size: 1.05rem;
}
.compare-fineprint {
  font-size: 0.78rem;
  opacity: 0.55;
  margin-top: 0.5rem;
}

/* =========================================================================
   Readability bump — second-section + matrix surrounds (added 2026-05) ===== */

/* Section paragraph copy — make sure section intros aren't dimmed by theme */
section.stats-bar .container > p,
section.features .container > p,
section.how-it-works .container > p {
  color: inherit;
  opacity: 1;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow lines — keep them visible, not ghost-faint */
.hero-eyebrow {
  opacity: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* Replaces band — cards: lift card text out of low-contrast haze */
.replaces-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
}
.replaces-card strong {
  font-size: 1rem;
  color: inherit;
}
.replaces-card span {
  font-size: 0.88rem;
  opacity: 0.85;
  color: inherit;
}
.stats-savings {
  opacity: 1;
  font-size: 1.1rem;
}

/* Comparison matrix surrounds — intro paragraph and fineprint */
section#compare > .container > p {
  opacity: 1;
  font-size: 1.05rem;
  color: inherit;
}
.compare-fineprint {
  opacity: 0.85;
  font-size: 0.85rem;
  color: inherit;
}

/* Differentiator section — body copy inside cards shouldn't be greyed out */
section#why-us .feature-card p,
section#community .step p {
  opacity: 1;
  color: inherit;
}

/* =========================================================================
   Replaces band — dark backdrop, near-white heading copy ==================== */

section#replaces {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f5f7fa;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
section#replaces .hero-eyebrow {
  color: #f5f7fa;
  opacity: 0.95;
}
section#replaces .section-title {
  color: #f5f7fa;
}
section#replaces .container > p {
  color: rgba(245, 247, 250, 0.92);
}
section#replaces .stats-savings {
  color: #f5f7fa;
}
section#replaces .stats-savings strong {
  color: #fff;
}

/* Cards stay light against the dark backdrop */
section#replaces .replaces-card {
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(255,255,255,0.1);
}
section#replaces .replaces-card strong {
  color: #0f172a;
}
section#replaces .replaces-card span {
  color: #475569;
  opacity: 1;
}

/* =========================================================================
   Contrast fixes — eyebrows on light sections, CTA outline button ========== */

/* Eyebrow lines on light-background sections — accent blue, not theme-default white */
#capabilities .hero-eyebrow,
#why-us .hero-eyebrow,
#community .hero-eyebrow,
#compare .hero-eyebrow {
  color: #2563eb;
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* CTA outline button — was blue text/border on blue gradient backdrop */
section.cta .btn-outline,
section.cta a.btn-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
section.cta .btn-outline:hover,
section.cta a.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: #fff;
}

/* CTA primary button — make sure it pops against the gradient */
section.cta .btn-primary,
section.cta a.btn-primary {
  background: #fff;
  color: #1e40af;
  border: 2px solid #fff;
}
section.cta .btn-primary:hover,
section.cta a.btn-primary:hover {
  background: rgba(255,255,255,0.92);
  color: #1e40af;
}

/* CTA heading + paragraph — guarantee white on gradient */
section.cta h2 {
  color: #fff;
}
section.cta > .container > p {
  color: rgba(255,255,255,0.92);
}