/*
 * Comparison pages (/compare/vs-*): unify width, spacing and type with the
 * redesigned pages. Loaded with legacy.css (hero, headings, buttons) from
 * header.php on the page-compare template; scoped to body.dsx-compare.
 */

/* Even section rhythm: 96px between sections (the shared parts keep their own). */
body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq) { padding-top: 96px !important; padding-bottom: 0 !important; }
body.dsx-compare :is(main, #page) > section.py-6 { padding-top: 32px !important; }
body.dsx-compare :is(main, #page) > section:not(.mt-24) .text-center.mb-6,
body.dsx-compare :is(main, #page) > section:not(.mt-24) .text-center.mb-8 { margin-bottom: 40px !important; }

/* Section intros: same subtitle size as the other pages. */
body.dsx-compare :is(main, #page) > section:not(.mt-24) h2 + p,
body.dsx-compare :is(main, #page) > section:not(.mt-24) h3 + p { max-width: 680px; margin-left: auto; margin-right: auto; font-size: 17.5px !important; line-height: 1.65 !important; color: #52525b !important; }

/* Big tinted panels: one radius and padding. */
body.dsx-compare :is(main, #page > section) .rounded-3xl.relative.isolate,
body.dsx-compare :is(main, #page > section) .compare-pricing-panel { border-radius: 28px !important; }
@media (min-width: 1024px) {
	body.dsx-compare :is(main, #page > section) .rounded-3xl.relative.isolate,
	body.dsx-compare :is(main, #page > section) .compare-pricing-panel { padding: 56px !important; }
}

/* Feature table: card frame, calm header, readable rows. */
body.dsx-compare :is(main, #page > section) table { border: 0 !important; }
body.dsx-compare :is(main, #page > section) .rounded-\[16px\].border,
body.dsx-compare :is(main, #page > section) .rounded-\[20px\].border { border-color: #eceef3 !important; border-radius: 22px !important; box-shadow: 0 1px 2px rgba(16, 16, 40, 0.04); }
body.dsx-compare :is(main, #page > section) table thead { background: #f7f7fb !important; }
body.dsx-compare :is(main, #page > section) table th { font: 600 15px/1.3 Inter, sans-serif !important; color: #09090b; }
body.dsx-compare :is(main, #page > section) table td { font-size: 15px !important; line-height: 1.5; }
body.dsx-compare :is(main, #page > section) table tbody tr { border-color: #f0f0f4 !important; }
body.dsx-compare :is(main, #page > section) table tbody tr:hover { background: #fafafd; }

/* Small helper text in cards stays readable. */
body.dsx-compare :is(main, #page) > section .text-xs { font-size: 12.5px !important; line-height: 1.5 !important; }

/* FAQ: the same cards as the shared FAQ section. */
body.dsx-compare :is(main, #page > section) .faq-item { border: 1px solid #eceef3 !important; border-radius: 18px !important; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 40, 0.04); transition: border-color 0.25s, box-shadow 0.25s; }
body.dsx-compare :is(main, #page > section) .faq-item:hover { border-color: rgba(58, 58, 153, 0.22) !important; }
body.dsx-compare :is(main, #page > section) .faq-trigger { padding: 18px 22px !important; background: #fff !important; }
body.dsx-compare :is(main, #page > section) .faq-trigger span { font: 600 16.5px/1.4 Sora, Inter, sans-serif !important; color: #09090b !important; }
body.dsx-compare :is(main, #page > section) .faq-icon { width: 28px !important; height: 28px !important; padding: 5px; border-radius: 50%; background: #f4f4f8; color: #3a3a99 !important; }
body.dsx-compare :is(main, #page > section) .faq-content { padding: 0 22px 20px !important; }
body.dsx-compare :is(main, #page > section) .faq-content p { font-size: 15.5px !important; line-height: 1.7 !important; color: #52525b !important; }
body.dsx-compare :is(main, #page > section) .space-y-4 > .faq-item + .faq-item { margin-top: 12px !important; }

/* The closing panel ends the page with the same spacing as other pages. */
body.dsx-compare :is(main, #page) > section.pb-14 { padding-bottom: 104px !important; }

@media (max-width: 767px) {
	body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq) { padding-top: 64px !important; }
	body.dsx-compare :is(main, #page) > section.pb-14 { padding-bottom: 72px !important; }
}

/* Space before the shared testimonials and below the closing panel. */
body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq):has(+ .dst),
body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq):has(+ * > .dst) { padding-bottom: 104px !important; }
body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq).pb-14 { padding-bottom: 104px !important; }
@media (max-width: 767px) {
	body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq).pb-14 { padding-bottom: 72px !important; }
}
/* The FAQ is followed by a script tag, so match it by content. The feature table sits right under its heading. */
body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq):has(.faq-item) { padding-bottom: 104px !important; }
body.dsx-compare :is(main, #page) > section:not(.mt-24):not(.dst):not(.dsfree):not(.dsfaq).py-6 { padding-top: 32px !important; }
/* Comparison headlines are long: a slightly smaller hero size keeps them to two or three lines. */
body.dsx-compare main h1:not([class*="ds"]) { font-size: clamp(30px, 3.6vw, 46px) !important; }