/* ============================================================
   AKARSH DIGITAL — Services page specific styles
   ============================================================ */

/* Comparison strip — LSA vs Facebook vs HomeAdvisor CPL */
.comparison-strip {
  display: flex;
  align-items: stretch;
  background: var(--charcoal);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 56px;
}

.cs-strip-item {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.cs-strip-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--gold-border);
}

.cs-strip-val {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}
.cs-strip-val--red {
  background: none;
  -webkit-text-fill-color: #C0392B;
  color: #C0392B;
}

.cs-strip-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,237,228,0.52);
  margin-bottom: 10px;
}

.cs-strip-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.cs-strip-badge--gold {
  background: rgba(218,154,63,0.12);
  border: 1px solid rgba(218,154,63,0.3);
  color: var(--gold-bright);
}
.cs-strip-badge--red {
  background: rgba(192,57,43,0.1);
  border: 1px solid rgba(192,57,43,0.25);
  color: #e74c3c;
}

/* Ad spend note */
.ad-spend-note {
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(242,237,228,0.35);
}

@media(max-width:640px){
  .comparison-strip { flex-direction: column; }
  .cs-strip-item::after { display: none; }
  .cs-strip-item:not(:last-child) { border-bottom: 1px solid var(--gold-border); }
}