/* Comparison Pages Styling */

/* ===== HERO / INTRO SECTION ===== */
.comparison-hero {
  text-align: center;
  padding: 0;
  padding-top: 3vw;
}

@media only screen and (max-width: 1200px) {
  .comparison-hero .widthL {
    padding: 0;
  }
}

.award-badges {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2rem auto;
}

.award-badge {
  height: 120px;
  width: auto;
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .award-badge {
    filter: invert(1);
    opacity: 0.9;
  }
}

[data-theme="dark"] .award-badge {
  filter: invert(1);
  opacity: 0.9;
}

.comparison-hero .page-tagline {
  font-family: var(--typeface-serif);
  font-size: var(--font-lg);
  color: var(--accent-purple);
  margin: 0 0 1.5rem 0;
  font-weight: 500;
}

.comparison-hero .intro-text {
  font-size: var(--font-md);
  line-height: 1.4;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-dim);
}

.comparison-hero .intro-text strong {
  color: var(--text-bright);
}

/* TL;DR Box */
.tldr-box {
  background: rgba(var(--white-rgb), 0.85);
  border: 2px solid var(--accent-purple);
  border-radius: 13px;
  padding: 2rem 2.5rem;
  margin: 2rem auto;
  text-align: left;
  box-shadow: 0 4px 16px rgba(151, 71, 255, 0.12);
}

.tldr-box h3 {
  font-family: var(--typeface-sans);
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--accent-purple);
  margin: 0 0 1rem 0;
  text-align: left;
}

.tldr-box p {
  font-size: var(--font-base);
  line-height: 1.5;
  margin: 0 0 1rem 0;
  color: var(--text-dim);
}

.tldr-box p:last-child {
  margin-bottom: 0;
}

.tldr-box p strong {
  color: var(--text-bright);
  font-weight: 600;
}

.tldr-box ul {
  margin: 0 0 1.5rem 0;
  padding-left: 1.5rem;
}

.tldr-box li {
  font-size: var(--font-base);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  color: var(--text-dim);
  list-style-type: "✔  ";
}

@media only screen and (max-width: 768px) {
  .tldr-box {
    padding: 1.5rem 1.75rem;
  }

  .tldr-box h3 {
    font-size: var(--font-md);
  }
}

/* ===== STAT CALLOUT ===== */
.stat-callout {
  background: linear-gradient(135deg, var(--accent-purple) 0%, #6B3FA0 100%);
  color: white;
  padding: 2rem 2.5rem;
  border-radius: 13px;
  text-align: center;
  margin: 2rem 0;
  box-shadow: 0 4px 20px rgba(151, 71, 255, 0.3);
  width: 80%;
}

.stat-callout .stat-number {
  font-family: var(--typeface-sans);
  font-size: var(--font-xxl);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-callout .stat-label {
  font-size: var(--font-base);
  opacity: 0.9;
}

.stat-callout.inverted {
  background: white;
  color: var(--accent-purple);
  box-shadow: 0 4px 20px rgba(151, 71, 255, 0.15);
  margin: 0.5rem auto 2rem auto;
  position: relative;
  bottom: 3rem;
  border: 1px solid var(--accent-purple);
}

.stat-callout.inverted .stat-number {
  color: var(--accent-purple);
}

.stat-callout.inverted .stat-label {
  color: var(--accent-purple);
  opacity: 1;
}

/* ===== SECTIONS WITH BACKGROUNDS ===== */
.comparison-section {
  padding: 4vw 0;
}

.comparison-hero + .comparison-section {
  padding-top: 2vw;
}

.comparison-section.bg-light {
  background: var(--bg-white);
}

.comparison-section.bg-beige {
  background: var(--light-beige);
}

.comparison-section.bg-dark {
  background: #272E29;
}

.comparison-section.bg-dark h2,
.comparison-section.bg-dark h3,
.comparison-section.bg-dark p,
.comparison-section.bg-dark li {
  color: rgba(255, 255, 255, 0.9);
}

.comparison-section.bg-dark h2 {
  color: #fff;
}

.comparison-section.bg-purple {
  background: #422B59;
}

.comparison-section.bg-purple h2,
.comparison-section.bg-purple p {
  color: #fff;
}

.comparison-section h2 {
  font-family: var(--typeface-sans);
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 1.5rem;
  color: var(--text-bright);
  text-align: center;
}

.comparison-section h3 {
  font-family: var(--typeface-sans);
  font-size: var(--font-lg);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--text-bright);
  text-align: center;
}

/* ===== FEATURE CARDS / GRID ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.feature-card {
  background: rgba(var(--white-rgb), 0.7);
  border-radius: 13px;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 8px var(--shadow-light);
}

.feature-card h4 {
  font-family: var(--typeface-sans);
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: var(--text-bright);
}

.feature-card p {
  margin: 0;
  color: var(--text-dim);
}

/* Use case cards */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.use-case-card {
  background: rgba(var(--white-rgb), 0.5);
  border: 1px solid var(--shadow-light);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.use-case-card strong {
  display: block;
  color: var(--accent-purple);
  margin-bottom: 0.5rem;
  font-size: var(--font-base);
}

.use-case-card p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-dim);
  line-height: 1.3;
}

/* ===== TESTIMONIAL STYLING ===== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.testimonial-card {
  background: rgba(var(--white-rgb), 0.8);
  border-radius: 13px;
  padding: 1.5rem 2rem;
  box-shadow: 0 3px 12px var(--shadow-light);
  border: 1px solid var(--shadow-light);
}

.testimonial-card blockquote {
  font-family: var(--typeface-serif);
  font-size: var(--font-md);
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 1rem 0;
  color: var(--text-bright);
}

.testimonial-card .quote-source {
  font-size: var(--font-sm);
  color: var(--accent-purple);
  font-weight: 500;
  margin: 0;
}

/* Featured testimonial (larger, centered) */
.testimonial-featured {
  max-width: 720px;
  margin: 2rem auto;
  text-align: center;
  padding: 2rem 2.5rem;
  background: rgba(var(--white-rgb), 0.9);
  border-radius: 13px;
  box-shadow: 0 4px 16px var(--shadow-light);
}

/* Stacked cards container - two column grid */
.stacked-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin: 2rem auto;
  width: 90%;
  max-width: 1000px;
}

/* Stacked card effect */
.stacked-card {
  border: 1px solid var(--shadow-light);
  margin-top: -80px;
}

.stacked-card:nth-child(1),
.stacked-card:nth-child(2) {
  margin-top: 0;
}

/* Alternate rotation by row in 2-column mode */
.stacked-card:nth-child(4n+1) { transform: rotate(-1deg); } /* row 1 left, row 3 left */
.stacked-card:nth-child(4n+2) { transform: rotate(1deg); }  /* row 1 right, row 3 right */
.stacked-card:nth-child(4n+3) { transform: rotate(1deg); }  /* row 2 left, row 4 left */
.stacked-card:nth-child(4n)   { transform: rotate(-1deg); } /* row 2 right, row 4 right */

.stacked-card:nth-child(1) { z-index: 1; }
.stacked-card:nth-child(2) { z-index: 2; }
.stacked-card:nth-child(3) { z-index: 3; }
.stacked-card:nth-child(4) { z-index: 4; }
.stacked-card:nth-child(5) { z-index: 5; }
.stacked-card:nth-child(6) { z-index: 6; }
.stacked-card:nth-child(7) { z-index: 7; }
.stacked-card:nth-child(8) { z-index: 8; }

/* Responsive: single column on mobile */
@media only screen and (max-width: 768px) {
  .stacked-cards-container {
    grid-template-columns: 1fr;
    width: 95%;
  }

  .stacked-card:nth-child(2) {
    margin-top: -80px;
  }

  /* Single column: revert to simple odd/even rotation */
  .stacked-card:nth-child(odd) { transform: rotate(-1deg); }
  .stacked-card:nth-child(even) { transform: rotate(1deg); }
}

.testimonial-featured blockquote {
  font-family: var(--typeface-serif);
  font-size: var(--font-lg);
  line-height: 1.3;
  margin: 0 0 1rem 0;
  color: var(--text-bright);
  font-style: normal;
}

.testimonial-featured .quote-source {
  color: var(--accent-purple);
  font-weight: 500;
}

/* ===== COMPARISON TABLE ===== */
.feature-table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  background: rgba(var(--white-rgb), 0.9);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow-light);
}

.feature-table th,
.feature-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--shadow-light);
}

.feature-table th {
  font-weight: 600;
  background: var(--light-beige);
  color: var(--text-bright);
}

.feature-table th:first-child {
  width: 40%;
}

.feature-table th:nth-child(2),
.feature-table th:nth-child(3) {
  text-align: center;
  width: 30%;
}

.feature-table td:nth-child(2),
.feature-table td:nth-child(3) {
  text-align: center;
  font-size: var(--font-base);
}

.feature-table tbody tr:last-child td {
  border-bottom: none;
}

.feature-table tbody tr:hover {
  background: rgba(var(--black-rgb), 0.02);
}

/* Table legend */
.table-legend {
  font-size: var(--font-sm);
  color: var(--white-rgb);
  text-align: center;
  margin-top: 1rem;
}

.table-legend * {
  color: var(--white-rgb);
}

/* ===== COMPETITOR ISSUES LIST ===== */
.issues-list {
  background: rgba(255, 200, 200, 0.15);
  border-left: 4px solid #D64545;
  border-radius: 0 10px 10px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.issues-list ul {
  margin: 0;
  padding-left: 1.25rem;
}

.issues-list li {
  margin-bottom: 0.5rem;
  color: var(--text-dim);
}

.issues-list li strong {
  color: #D64545;
}

/* ===== MUSE ADVANTAGES LIST ===== */
.advantages-list {
  background: rgba(38, 177, 78, 0.08);
  border-left: 4px solid #26B14E;
  border-radius: 0 10px 10px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.advantages-list ul {
  margin: 0;
  padding-left: 1.25rem;
}

.advantages-list li {
  margin-bottom: 0.5rem;
  color: var(--text-dim);
}

.advantages-list li strong {
  color: #26B14E;
}

/* ===== VALUE GRID ===== */
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.value-grid>div {
  background: rgba(var(--white-rgb), 0.6);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--shadow-light);
}

.value-grid strong {
  display: block;
  color: var(--text-bright);
  margin-bottom: 0.5rem;
}

.value-grid p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-dim);
}

@media only screen and (max-width: 600px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CTA SECTION ===== */
.comparison-cta {
  background: var(--pricing-purple-bg);
  padding: 3vw 0;
  text-align: center;
}

.comparison-cta h2 {
  color: #fff;
  margin-bottom: 1rem;
}

.comparison-cta p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 500px;
  margin: 0 auto 2rem auto;
}

.comparison-cta strong {
  color: rgba(255, 255, 255, 1);
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons a {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-buttons a.primary {
  background: var(--accent-purple);
  color: #fff;
  border: 2px solid var(--accent-purple);
}

.cta-buttons a.primary:hover {
  background: #803EDE;
}

.cta-buttons a.secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.cta-buttons a.secondary:hover {
  border-color: #fff;
}

/* ===== FAQ SECTION ===== */
.faq-section {
  margin: 2rem 0;
}

.faq-item {
  margin-bottom: 1.5rem;
}

.faq-item strong {
  display: block;
  color: var(--text-bright);
  margin-bottom: 0.5rem;
}

.faq-item p {
  margin: 0;
  color: var(--text-dim);
}

/* ===== WHAT PEOPLE SAY ===== */
.what-people-say {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.what-people-say:before {
  content: "\201C";
  font-family: var(--typeface-serif);
  font-size: 1000pt;
  font-weight: 600;
  color: var(--email-bg-dark-purple);
  position: absolute;
  top: -300pt;
  left: 0;
  opacity: 0.3;
  height: 100pt;
}

.what-people-say:after {
  content: "\201D";
  font-family: var(--typeface-serif);
  font-size: 1000pt;
  font-weight: 600;
  color: var(--email-bg-dark-purple);
  position: absolute;
  bottom: 350pt;
  right: 0;
  opacity: 0.3;
  height: 100pt;
}

.what-people-say h3 {
  position: relative;
  z-index: 1;
}

/* ===== MOBILE RESPONSIVE ===== */
@media only screen and (max-width: 768px) {
  .award-badges {
    gap: 1rem;
  }

  .award-badge {
    height: 55px;
  }

  .comparison-hero .page-tagline {
    font-size: var(--font-md);
  }

  .stat-callout {
    padding: 1.5rem;
  }

  .stat-callout .stat-number {
    font-size: var(--font-xl);
  }

  .comparison-section {
    padding: 6vw 0;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .feature-table {
    font-size: var(--font-sm);
  }

  .feature-table th,
  .feature-table td {
    padding: 0.75rem 1rem;
  }

  .use-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 480px) {
  .use-case-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== LEGACY SUPPORT (from original file) ===== */
.compare-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 32px 0;
}

.compare-column {
  flex: 1;
  min-width: 280px;
}

.compare-column.middle-right {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.compare-column h3 {
  margin-top: 0;
}

@media only screen and (max-width: 768px) {
  .compare-columns {
    flex-direction: column;
    gap: 24px;
  }

  .compare-column {
    min-width: 100%;
  }
}

/* User quote shortcode styling */
.userquote {
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  background: rgba(var(--white-rgb), 0.8);
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--shadow-light);
  max-width: 600px;
  border: 1px solid var(--shadow-light);
}

.stacked-card .userquote {
  border: none;
}

/* Remove card styling when inside another card to avoid "double-card" look */
.testimonial-card .userquote,
.use-case-card .userquote,
.testimonial-featured .userquote {
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.userquote blockquote {
  font-family: var(--typeface-serif);
  font-size: var(--font-base);
  line-height: 1.4;
  margin: 0 0 0.75rem 0;
  color: var(--text-bright);
  text-align: left;
}

.userquote .quote-source {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--accent-purple);
  font-weight: 500;
  text-align: right;
}

.userquote .quote-source::before {
  content: "— ";
}

/* Product columns layout from home.css */
.product-columns {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
  margin-bottom: 50px;
}

.tldr-box .product-columns {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 0;
  gap: 60px;
}

.product-feature {
  flex: 10;
  min-width: 300px;
  max-width: 600px;
}

/* Video container styling from home.css */
.video-container {
  margin: 2rem 2rem;
  max-width: 600px;
  /* Match homepage video width */
  display: flex;
  align-items: center;
  aspect-ratio: 4/3;
}

.video-container video {
  display: block;
  width: 100%;
  height: auto;
  border: 7px solid white;
  box-shadow: 0 2px 6px 0 rgba(var(--black-rgb), 0.2);
  box-sizing: content-box;
  border-radius: 13px;
  rotate: 2deg;
}

.rotate-left {
  rotate: -2deg;
}

.rotate-right {
  rotate: 2deg;
}

.nudge-right {
  position: relative;
  left: 15px;
}

@media only screen and (min-width: 1150px) {
  .video-container video {
    margin: -50px -50px -50px 36px;
  }
}

.bump-up {
  margin-top: -4rem;
}

.bump-left {
  margin-left: -8rem;
}

.knowledge-synthesis .userquote {
  rotate: -2deg;
}

.knowledge-synthesis .advantages-list,
.knowledge-synthesis .issues-list {
  text-align: left;
}

.hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.hero-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-btn p {
  font-size: var(--font-sm);
  margin-top: 0;
}