/* Design System v2 skin for compare/ pages. Loads after ds2.css.
   Same legacy class names, restyled monochrome on ds2 tokens. */

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* hero */
.compare-hero{position:relative;overflow:hidden;padding:96px 0 64px;text-align:center}
.compare-hero .container{position:relative;z-index:1}
.compare-hero h1{margin-bottom:20px}
.compare-hero p{color:var(--text-2);font-size:1.125rem;max-width:44em;margin:0 auto 30px}
.update-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.8125rem;font-weight:500;color:var(--text-2);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;margin-bottom:22px;
  background:var(--panel-2);
}
.btn-large{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#000;font-weight:500;font-size:1.0625rem;
  border-radius:14px;padding:15px 30px;border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 2px 6px rgba(0,0,0,0.5),0 8px 24px -6px rgba(255,255,255,0.5);
  transition:transform 0.3s var(--spring),box-shadow 0.25s ease;
}
.btn-large:hover{transform:translateY(-2px)}

/* sections */
.content-section{padding:72px 0}
.section-title{text-align:center;margin-bottom:12px}
.section-subtitle{text-align:center;color:var(--text-2);font-size:1.0625rem;max-width:46em;margin:0 auto 44px}

/* quick summary cards */
.quick-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;
  max-width:980px;margin:0 auto;
}
.problems-grid,.testimonials-grid,.faq-grid{display:grid;gap:18px}
.quick-summary .container > div:last-child,
.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.summary-card{
  background:var(--panel);border:1px solid transparent;border-radius:var(--radius);
  box-shadow:var(--shadow-tile);padding:28px;text-align:left;
  transition:transform 0.35s var(--spring),box-shadow 0.3s ease;
}
.summary-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.summary-card.recommended{border-color:rgba(255,255,255,0.35)}
.summary-card .badge{
  display:inline-block;background:#fff;color:#000;border:none;
  font-size:0.66rem;font-weight:700;letter-spacing:0.08em;
  border-radius:999px;padding:4px 11px;margin-bottom:14px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.summary-card h3{font-size:1.1875rem;margin-bottom:4px}
.summary-card .tagline{color:var(--text-3);font-size:0.875rem;margin-bottom:16px}
.summary-card .price{font-size:1.75rem;font-weight:600;letter-spacing:-0.02em}
.summary-card .price-note{color:var(--text-3);font-size:0.8125rem;margin-bottom:16px}
.summary-card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:14px}
.summary-card li{font-size:0.875rem;color:var(--text-2);display:flex;gap:9px;align-items:baseline}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  margin-top:20px;padding:12px 22px;border-radius:12px;
  background:var(--accent);color:#000;font-weight:500;font-size:0.9375rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 2px 6px rgba(0,0,0,0.5);
  transition:transform 0.3s var(--spring);
}
.cta-btn:hover{transform:translateY(-2px)}

/* marks */
.check{color:#fff;font-weight:600}
.cross{color:var(--text-3)}
.partial{color:var(--text-2)}

/* comparison table */
.comparison-table-full{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:16px}
.comparison-table-full table{width:100%;border-collapse:collapse;min-width:640px;font-size:0.9rem}
.comparison-table-full th,.comparison-table-full td{
  padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);color:var(--text-2);
}
.comparison-table-full thead th{
  font-size:0.8125rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--text-3);background:var(--panel);
}
.comparison-table-full tr:last-child td{border-bottom:none}
.comparison-table-full .highlight-col{background:rgba(255,255,255,0.045);color:var(--text)}
.comparison-table-full .category-row td{
  background:var(--panel);color:var(--text);font-weight:600;font-size:0.8125rem;
  letter-spacing:0.05em;text-transform:uppercase;
}

/* problems */
.problems-section{padding:72px 0}
.problems-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.problem-card{
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-tile);
  padding:26px;transition:transform 0.35s var(--spring),box-shadow 0.3s ease;
}
.problem-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.problem-card .icon{font-size:1.25rem;margin-bottom:12px;filter:grayscale(1)}
.problem-card h3{font-size:1.0625rem;margin-bottom:8px}
.problem-card p{color:var(--text-2);font-size:0.9rem;line-height:1.6}

/* testimonials */
.compare-testimonials{padding:72px 0}
.testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.testimonial-card-item{
  border-top:1px solid var(--border-strong);padding:24px 4px 0;
  display:flex;flex-direction:column;gap:16px;
}
.testimonial-quote{font-size:0.9675rem;line-height:1.7;color:var(--text);flex:1}
.testimonial-stars-row{color:#fff;opacity:0.55;font-size:0.8125rem;letter-spacing:2px}
.testimonial-card-author{display:flex;align-items:center;gap:12px}
.testimonial-card-avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--panel-3);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:0.8125rem;font-weight:600;color:var(--text-2);
}
.testimonial-card-name{font-weight:600;font-size:0.9375rem}
.testimonial-card-role,.testimonial-card-meta{font-size:0.8125rem;color:var(--text-3)}

/* pricing compare */
.pricing-compare{padding:72px 0}
.pricing-compare-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

/* FAQ (div accordion, .active toggled by JS) */
.faq-section{padding:72px 0}
.faq-grid{grid-template-columns:1fr;max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;cursor:pointer;font-weight:500;font-size:1.0325rem;color:var(--text);
}
.faq-icon{
  flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,0.04);display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:transform 0.4s var(--spring),border-color 0.25s ease;
}
.faq-item.active .faq-icon{transform:rotate(45deg);border-color:rgba(255,255,255,0.35);color:#fff}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease)}
.faq-item.active .faq-answer{max-height:600px}
.faq-answer-content{padding:0 4px 24px;color:var(--text-2);font-size:0.9675rem;max-width:60em}

/* CTA */
.cta-section{padding:72px 0 110px;text-align:center}
.cta-section h2{margin-bottom:14px}
.cta-section p{color:var(--text-2);font-size:1.125rem;margin-bottom:32px;max-width:34em;margin-left:auto;margin-right:auto}

.bento-link{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,0.3)}
.bento-link:hover{text-decoration-color:#fff}

@media (max-width:768px){
  .compare-hero{padding:64px 0 48px}
  .content-section,.problems-section,.compare-testimonials,.pricing-compare,.faq-section{padding:56px 0}
  .quick-summary{grid-template-columns:1fr}
}