/* =====================================================
   Skyline v3 — Adapted 21st.dev component styles
   All re-skinned to Skyline tokens. Loaded after v3.css.
   ===================================================== */

/* 1. Hero */
.cmp-hero { padding: var(--v-section-pad) 0; }
.cmp-hero .editorial-body { margin: var(--space-6) 0 var(--space-8); }

/* 2. Spec / feature grid (bento) */
.cmp-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cmp-spec-cell {
  background: var(--ink-900);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: background var(--dur-quick) var(--ease-luke);
}
.cmp-spec-cell:hover { background: var(--ink-850); }
.cmp-spec-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-400); }
.cmp-spec-value { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1; letter-spacing: -0.02em; color: var(--ink-100); }
.is-firefighting .cmp-spec-value { color: var(--ink-100); }
.cmp-spec-note { font-size: 13px; color: var(--ink-300); line-height: 1.5; }

/* 3. Pricing tiers */
.cmp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.cmp-tier {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--glass-tint);
  transition: border-color var(--dur-quick) var(--ease-luke), transform var(--dur-quick) var(--ease-luke);
}
.cmp-tier:hover { transform: translateY(-4px); }
.cmp-tier[data-featured] { border-color: var(--border-gold); background: rgba(232,184,75,0.04); }
.cmp-tier-amount { font-family: var(--font-display); font-size: var(--text-h4); color: var(--gold-400); letter-spacing: -0.01em; }
.cmp-tier .btn { margin-top: auto; }

/* 4. FAQ accordion (native details) */
.cmp-faq { display: grid; gap: var(--space-3); max-width: 820px; }
.cmp-faq-item { border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; background: var(--glass-tint); }
.cmp-faq-item summary {
  list-style: none; cursor: pointer;
  padding: var(--space-6);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.005em;
  font-size: var(--text-h5); color: var(--ink-100);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.cmp-faq-item summary::-webkit-details-marker { display: none; }
.cmp-faq-icon { width: 16px; height: 16px; position: relative; flex: none; }
.cmp-faq-icon::before, .cmp-faq-icon::after { content:""; position:absolute; background: var(--gold-400); transition: transform var(--dur-quick) var(--ease-luke); }
.cmp-faq-icon::before { left:0; right:0; top:50%; height:2px; transform: translateY(-50%); }
.cmp-faq-icon::after { top:0; bottom:0; left:50%; width:2px; transform: translateX(-50%); }
.cmp-faq-item[open] .cmp-faq-icon::after { transform: translateX(-50%) scaleY(0); }
.is-firefighting .cmp-faq-icon::before, .is-firefighting .cmp-faq-icon::after { background: var(--ember-300); }
.cmp-faq-body { padding: 0 var(--space-6) var(--space-6); }
.cmp-faq-body p { color: var(--ink-300); font-size: var(--text-body); line-height: 1.6; margin: 0; }

/* 5. Trust band */
.cmp-trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
}
.cmp-trust-item { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-300); }
.cmp-trust-dot { width: 14px; height: 14px; color: var(--gold-400); opacity: 0.8; }
.is-firefighting .cmp-trust-dot { color: var(--ember-300); }

/* 6. Footer mark */
.cmp-footer-mark { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-footer-mark .rotor-mark { width: 28px; height: 28px; color: var(--gold-400); }

/* 7. Testimonial / editorial quote */
.cmp-quote { max-width: 900px; margin: 0 auto; text-align: center; display: grid; gap: var(--space-6); justify-items: center; }
.cmp-quote-mark { width: 40px; height: 40px; color: var(--gold-400); opacity: 0.85; }
.cmp-quote blockquote {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--text-h3); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink-100);
}
.cmp-quote figcaption { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); }
.is-firefighting .cmp-quote-mark { color: var(--ember-300); }
.section-paper .cmp-quote blockquote { color: var(--paper-ink); }
.section-paper .cmp-quote figcaption { color: var(--paper-ink-soft); }
.section-paper .cmp-quote-mark { color: var(--gold-600); }

/* 8. Stat counter band */
.cmp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--space-8); }

/* v3.8: centered variant for uniform 4-up stat bands (Cleaning + Painting parity) */
.cmp-stats.is-centered { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); text-align: center; }
.cmp-stats.is-centered .cmp-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-4); border-left: 1px solid var(--border-faint); }
.cmp-stats.is-centered .cmp-stat:first-child { border-left: 0; }
.cmp-stats.is-centered .cmp-stat-num { font-size: clamp(48px, 6vw, 88px); line-height: 1; }
.cmp-stats.is-centered .cmp-stat-label { max-width: 22ch; text-align: center; line-height: 1.4; }
@media (max-width: 900px) {
  .cmp-stats.is-centered { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .cmp-stats.is-centered .cmp-stat { border-left: 0; border-top: 1px solid var(--border-faint); padding-top: var(--space-8); }
  .cmp-stats.is-centered .cmp-stat:first-child,
  .cmp-stats.is-centered .cmp-stat:nth-child(2) { border-top: 0; padding-top: 0; }
}
.cmp-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.cmp-stat-num { font-family: var(--font-display); font-size: var(--text-h1); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink-100); }
.cmp-stat-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-400); }
.is-firefighting .cmp-stat-num em { color: var(--ember-300); }