/* SimpleTix comparison pages (the /simpletix-vs-<competitor>/ folders).
 * Generated from the approved page files: every selector is the original,
 * scoped under .stx-vs (the page's <main>) so it can't leak into or be
 * overridden by the site's global styles. Prototype header/footer rules
 * are dropped because the pages use the real site chrome. */
/* ── Reset ── */
.stx-vs * { margin: 0; padding: 0; box-sizing: border-box; }
.stx-vs { font-family: 'Poppins', sans-serif; background: #fff; color: #434343; font-size: 16px; line-height: 1.6; }
/* ── Site Header ── */
/* ── Hero — must fit one 900px viewport ── */
.stx-vs .hero { text-align: center; padding: 64px 40px 56px; background: linear-gradient(135deg, #fef0f0 0%, #f0f8ff 30%, #f0fff4 70%, #fff 100%); }
.stx-vs .hero-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #4484b3; margin-bottom: 16px; }
.stx-vs .hero h1 { font-size: 46px; font-weight: 800; color: #1b1b20; margin-bottom: 18px; line-height: 1.15; max-width: 880px; margin-left: auto; margin-right: auto; }
.stx-vs .hero h1 .accent { color: #4484b3; }
.stx-vs .hero .hero-sub { font-size: 18px; color: #434343; max-width: 680px; margin: 0 auto 28px; line-height: 1.6; }
.stx-vs .hero-ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stx-vs .hero-proof { font-size: 14px; color: #6b6b6b; }
.stx-vs .hero-proof strong { color: #1b1b20; font-weight: 600; }
/* ── Buttons ── */
.stx-vs .btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; border-radius: 50px; border: none; background: #00d075; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; font-family: 'Poppins', sans-serif; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; }
.stx-vs .btn-cta:hover { background: #00b866; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,208,117,0.35); }
.stx-vs .btn-outline-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; border-radius: 50px; border: 2px solid #1b1b20; background: transparent; color: #1b1b20; font-size: 16px; font-weight: 600; cursor: pointer; font-family: 'Poppins', sans-serif; transition: all 0.2s; text-decoration: none; letter-spacing: 0.5px; }
.stx-vs .btn-outline-cta:hover { background: #1b1b20; color: #fff; }
/* ── Sections ── */
.stx-vs .section { padding: 72px 40px; }
.stx-vs .section-inner { max-width: 1140px; margin: 0 auto; }
.stx-vs .section-label { display: block; text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #4484b3; margin-bottom: 12px; }
.stx-vs .section-title { font-size: 36px; font-weight: 700; color: #1b1b20; text-align: center; margin-bottom: 16px; line-height: 1.2; }
.stx-vs .section-title .accent { color: #4484b3; }
.stx-vs .section-subtitle { font-size: 16px; color: #6b6b6b; text-align: center; max-width: 720px; margin: 0 auto 44px; line-height: 1.6; }
/* ── Scenario cards ── */
.stx-vs .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; max-width: 1140px; margin: 0 auto; }
.stx-vs .value-grid:has(> .value-card:only-child) { max-width: 560px; }
.stx-vs .value-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; padding: 32px 28px; transition: transform 0.2s, box-shadow 0.2s; }
.stx-vs .value-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); }
.stx-vs .value-card .vc-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.stx-vs .value-card .vc-icon.green { background: #effdf4; }
.stx-vs .value-card .vc-icon.blue { background: #e8f4fd; }
.stx-vs .value-card .vc-icon.purple { background: #f9f5fe; }
.stx-vs .value-card h3 { font-size: 19px; font-weight: 700; color: #1b1b20; margin-bottom: 14px; line-height: 1.3; }
.stx-vs .value-card .line { padding: 9px 0; font-size: 14.5px; color: #434343; line-height: 1.6; border-bottom: 1px solid rgba(0,0,0,0.06); }
.stx-vs .value-card .line:last-child { border-bottom: none; }
.stx-vs .value-card .verdict { margin-top: 12px; font-size: 13px; font-weight: 600; color: #4484b3; }
/* ── Head-to-head table ── */
.stx-vs .h2h { width: 100%; border-collapse: collapse; max-width: 980px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.stx-vs .h2h th, .stx-vs .h2h td { padding: 16px 20px; text-align: left; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid #eee; vertical-align: top; }
.stx-vs .h2h thead th { background: #1b1b20; color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.stx-vs .h2h thead th.stix { background: #00b866; }
.stx-vs .h2h tbody th { font-weight: 600; color: #1b1b20; width: 21%; background: #fafafa; }
.stx-vs .h2h td.stix { background: #f4fff8; color: #1b1b20; font-weight: 500; }
.stx-vs .h2h tr:last-child th, .stx-vs .h2h tr:last-child td { border-bottom: none; }
.stx-vs .table-scroll { overflow-x: auto; }
.stx-vs .comparison-footnote { text-align: center; margin-top: 22px; font-size: 12.5px; color: #999; max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.7; }
/* ── FAQ ── */
.stx-vs .faq-section { background: #f0faf5; }
.stx-vs .faq-list { max-width: 780px; margin: 0 auto; }
.stx-vs .faq-item { background: #fff; border-radius: 12px; margin-bottom: 12px; overflow: hidden; border: 1px solid #e8e8e8; }
.stx-vs .faq-question { display: flex; align-items: center; gap: 16px; padding: 20px 28px; cursor: pointer; transition: background 0.15s; list-style: none; }
.stx-vs .faq-question::-webkit-details-marker { display: none; }
.stx-vs .faq-question:hover { background: #fafafa; }
.stx-vs .faq-question .letter { width: 32px; height: 32px; border-radius: 50%; background: #1b1b20; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.stx-vs .faq-question .q-text { flex: 1; font-size: 16px; font-weight: 500; color: #4484b3; }
.stx-vs .faq-question .toggle { font-size: 20px; color: #ccc; flex-shrink: 0; transition: transform 0.2s; }
.stx-vs .faq-item[open] .faq-question .toggle { transform: rotate(45deg); }
.stx-vs .faq-answer { padding: 0 28px 24px 76px; font-size: 15px; color: #6b6b6b; line-height: 1.7; }
/* ── Why SimpleTix ── */
.stx-vs .feat-section { background: #fff; }
.stx-vs .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stx-vs .feat { border: 1px solid #e8e8e8; border-radius: 14px; padding: 24px 24px 22px; border-top: 3px solid #00d075; }
.stx-vs .feat h3 { font-size: 17px; font-weight: 700; color: #1b1b20; margin-bottom: 8px; line-height: 1.3; }
.stx-vs .feat p { font-size: 14.5px; color: #555; line-height: 1.6; }
.stx-vs .feat-more { text-align: center; margin-top: 28px; font-size: 15px; font-weight: 600; }
.stx-vs .feat-more a { color: #4484b3; text-decoration: none; }
.stx-vs .feat-more a:hover { text-decoration: underline; }
/* ── Social proof ── */
.stx-vs .proof-section { background: #fff; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.stx-vs .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stx-vs .review { background: #fafafa; border: 1px solid #ececec; border-radius: 14px; padding: 26px 24px; margin: 0; }
.stx-vs .review h3 { font-size: 17px; font-weight: 700; color: #1b1b20; margin-bottom: 8px; line-height: 1.3; }
.stx-vs .review blockquote { font-size: 14.5px; color: #555; line-height: 1.65; margin: 0 0 14px; }
.stx-vs .review figcaption { font-size: 13px; color: #777; line-height: 1.5; }
.stx-vs .review figcaption strong { color: #1b1b20; }
.stx-vs .review figcaption a { color: #4484b3; text-decoration: none; }
.stx-vs .review figcaption a:hover { text-decoration: underline; }
/* ── Mid CTA ── */
.stx-vs .mid-cta { background: linear-gradient(135deg, #1b1b20 0%, #2d2d35 100%); text-align: center; padding: 56px 40px; }
.stx-vs .mid-cta h2 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.25; }
/* ── Final CTA ── */
.stx-vs .cta-section { background: #f0faf5; padding: 72px 40px; text-align: center; }
.stx-vs .cta-section h2 { font-size: 38px; font-weight: 800; color: #1b1b20; margin-bottom: 14px; line-height: 1.2; }
.stx-vs .cta-section p { font-size: 17px; color: #434343; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }
.stx-vs .cta-section .no-risk { display: flex; justify-content: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.stx-vs .cta-section .no-risk span { font-size: 14px; color: #6b6b6b; display: flex; align-items: center; gap: 6px; }
.stx-vs .cta-section .no-risk span::before { content: '✓'; color: #00d075; font-weight: 700; }
/* ── Disclosure ── */
.stx-vs .disclosure { padding: 32px 40px; background: #f8f9fa; border-top: 1px solid #e0e0e0; }
.stx-vs .disclosure-inner { max-width: 1140px; margin: 0 auto; font-size: 12px; color: #999; line-height: 1.8; }
.stx-vs .disclosure-inner summary { cursor: pointer; font-weight: 600; color: #6b6b6b; font-size: 13px; margin-bottom: 12px; }
.stx-vs .disclosure-inner p { margin-bottom: 12px; }
.stx-vs .disclosure-inner a { color: #4484b3; text-decoration: none; }
.stx-vs .disclosure-inner a:hover { text-decoration: underline; }
.stx-vs .source-list { list-style: none; }
.stx-vs .source-list li { padding: 2px 0; }
/* ── Compare directory ── */
.stx-vs .compare-dir { padding: 44px 40px; border-top: 1px solid #f0f0f0; text-align: center; }
.stx-vs .compare-dir p.links { font-size: 14px; line-height: 2.2; }
.stx-vs .compare-dir p.links a { color: #4484b3; text-decoration: none; margin: 0 10px; white-space: nowrap; }
.stx-vs .compare-dir p.links a:hover { text-decoration: underline; }
/* ── Footer ── */
/* ── Responsive ── */
@media (max-width: 1024px) {
  .stx-vs .value-grid { grid-template-columns: 1fr; }
  .stx-vs .feat-grid { grid-template-columns: 1fr 1fr; }
  .stx-vs .review-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .stx-vs .hero { padding: 48px 20px 44px; }
  .stx-vs .hero h1 { font-size: 30px; }
  .stx-vs .hero .hero-sub { font-size: 16px; }
  .stx-vs .section { padding: 52px 20px; }
  .stx-vs .section-title { font-size: 26px; }
  .stx-vs .h2h th, .stx-vs .h2h td { padding: 12px 14px; font-size: 13.5px; }
  .stx-vs .h2h tbody th { width: auto; }
  .stx-vs .mid-cta h2 { font-size: 24px; }
  .stx-vs .cta-section h2 { font-size: 28px; }
}
@media (max-width: 480px) {
  .stx-vs .hero h1 { font-size: 26px; }
  .stx-vs .feat-grid { grid-template-columns: 1fr; }
  .stx-vs .hero-ctas { flex-direction: column; align-items: center; }
  .stx-vs .cta-section .no-risk { flex-direction: column; align-items: center; gap: 8px; }
}

/* ── Site-style overrides ──
 * general-style.css styles some of the same class names globally. Reset the
 * properties the page CSS above doesn't set, so the page renders as designed. */
.stx-vs .cta-section { border-radius: 0; }
/* general-style.css sets .section-title { font-size: 40px !important } at
 * max-width 767px; restore the page's own 26px (its max-width 768px value). */
@media (max-width: 767px) {
  .stx-vs .section-title { font-size: 26px !important; }
}

/* ── Section backgrounds and the CTA footnote (were inline styles) ── */
.stx-vs .section.section-bg-soft { background: #f8f9fa; }
.stx-vs .section.section-bg-muted { background: #f5f5f5; }
.stx-vs .cta-section .cta-footnote { margin-top: 12px; font-size: 12px; color: #999; }