/* Legacy bridge (11/2026): brings the ~170 pages not yet redesigned in line with the new look (home.css, mkt-page.css)
   without touching their markup or text, so their translations and SEO rows stay valid.
   Loaded after the old bundle (App_Themes/Style.css + Site.css) and site-chrome.css.
   - Type: Playfair headings + Poppins body -> the new pages' Arial stack, tight heading tracking.
   - Hero labels -> bronze kicker; hero sublines -> grey lead; gold pill buttons -> dark buttons; gold/blue tints -> warm grey.
   - Never applies inside the new pages, the footer/CTA, or the sample documents, invoices, forms and price lists that
     templates show as previews (those keep their own fonts on purpose).
   Element rules use `html body` (0,0,3) so they beat the old element rules but lose to any class rule; class rules that
   set Playfair on page design are named below with a higher specificity. */

/* ---- type ---- */
html body {font-family: Arial, Helvetica, sans-serif;}
html body .body-content :is(p, h3, h4, h5, h6):not(:where(.lf-page *, .lf-home *, .footer *, .lf-cta *, .doc-wrapper *, .doc-container *, .doc-document *, .pr-doc *, .preview *, .contract-previews *, .invoice-editor *, .inv *, .price-list *, .page-block *, .mk *)) {font-family: Arial, Helvetica, sans-serif;}
html body .body-content :is(h1, h2):not(:where(.lf-page *, .lf-home *, .footer *, .lf-cta *, .doc-wrapper *, .doc-container *, .doc-document *, .pr-doc *, .preview *, .contract-previews *, .invoice-editor *, .inv *, .price-list *, .page-block *, .mk *)) {font-family: Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: -.03em; line-height: 1.12; color: #171817;}
html body .body-content h1:not(:where(.lf-page *, .lf-home *, .footer *, .lf-cta *, .doc-wrapper *, .doc-container *, .doc-document *, .pr-doc *, .preview *, .contract-previews *, .invoice-editor *, .inv *, .price-list *, .page-block *, .mk *)) {letter-spacing: -.04em; line-height: 1.06;}

/* page-design classes that set Playfair themselves (old Style/Site.css and per-view <style> blocks) */
html body .body-content :is(.page-part h1, .page-part h2, .feature-copy h2, .offer .content > div, .number-features, .cmp-hero h1, .ab-hero h1, .pr-hero h1, .pr .pr-video h3, .mr-section > h2, .mr-article h2, .guide-cta-title, .guide-more-title, .guide-more h2, .guide-stat strong, .guide-calc-price) {font-family: Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: -.03em;}
html body .body-content :is(.guide-stat strong, .guide-calc-price, .guide-cta-title) {font-weight: 700; letter-spacing: -.02em;}

/* ---- heroes ---- */
html body .body-content .big-hero .top h1,
html body .body-content .big-hero-left h1,
html body .body-content .page-banner-text h1 {font-size: clamp(38px, 4.4vw, 60px);}
html body .body-content :is(.big-hero .label, .cmp-eyebrow, .pr-eyebrow, .ab-eyebrow, .pr-dl-eyebrow, .feature-copy h5) {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; color: #857653;}
html body .body-content .big-hero .label {margin-bottom: 18px;}
html body .body-content :is(.big-hero h6, .page-banner h6, .page-banner-text h3, .page-hero .highlight h3, .cmp-lead) {font-size: clamp(17px, 1.25vw, 20px); font-weight: 400; letter-spacing: 0; line-height: 1.55; color: #5d5f5b;}

/* ---- buttons ---- */
html body .body-content .btn-action {background: #191a18; color: #fff; border: 1px solid #191a18; border-radius: 5px; padding: 14px 24px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none; transition: background .2s, transform .2s;}
html body .body-content .btn-action.large {padding: 18px 28px; font-size: 16px;}
html body .body-content .btn-action:hover, html body .body-content .btn-action:focus {background: #000; border-color: #000; color: #fff; transform: translateY(-1px);}
html body .body-content :is(.btn-action.more, .btn-action.white, .btn-action.btn-secondary) {background: #fff; color: #191a18; border-color: #d7d2c8;}
html body .body-content :is(.btn-action.more, .btn-action.white, .btn-action.btn-secondary):hover {background: #f6f4ef; color: #191a18; border-color: #191a18;}

/* ---- section tints: gold, light gold and light blue -> the new warm grey ---- */
html body .body-content :is(.page-banner.light, .top.gold, .page-hero, .feature-grid li > div) {background: #f6f4ef;}
html body .body-content .how-works .icon i {background: #f3ebe0; color: #8a6a3a;}
html body .body-content .big-hero .bottom.gold::after {background: #f6f4ef;}
html body .body-content [style*="233,212,96"], html body .body-content [style*="233, 212, 96"],
html body .body-content [style*="221, 172, 88"], html body .body-content [style*="221,172,88"],
html body .body-content [style*="89, 171, 227"], html body .body-content [style*="89,171,227"] {background: #f6f4ef !important;}

/* ---- FAQs: the new pages' list (mkt-page.css .faq): thin rules, drawn plus/minus, grey answers ---- */
html body .body-content .lf-faq-art {display: none;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) {font-family: Arial, Helvetica, sans-serif; color: #5d5f5b;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) details {background: none; border: 0; border-bottom: 1px solid #e2e3dc; border-radius: 0; padding: 18px 0; margin: 0;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) details:first-child, html body .body-content .pr-faq > div > details:first-child {border-top: 1px solid #e2e3dc;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) details + details {margin-top: 0;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) summary {position: relative; display: block; list-style: none; cursor: pointer; padding: 0 32px 0 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: #171817;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) summary::-webkit-details-marker {display: none;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) summary h3 {display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) summary::before, html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) summary::after {content: ""; position: absolute; right: 2px; top: 12px; width: 12px; height: 1px; background: #171817; color: #171817; transform: none; font-size: 0;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) summary::after {transform: rotate(90deg);}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) details[open] summary::after {transform: rotate(0);}
html body .body-content :is(.lf-faq .lf-plus, .ab-faq .ab-plus) {display: none;}
html body .body-content :is(.lf-faq .lf-answer, .ab-faq details > :not(summary), .pr-faq details > p) {font-size: 14.5px; line-height: 1.65; color: #5d5f5b; margin: 12px 0 0; padding: 0; max-width: 620px;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) details a {color: #171817; font-weight: 400; text-decoration: none; border-bottom: 1px solid #b9b6ad;}
html body .body-content :is(.lf-faq, .ab-faq, .pr-faq) details a:hover {border-color: #171817;}
html body .body-content .pr-faq {gap: 0 56px;}
html body .body-content .accordion.faq {--bs-accordion-border-color: #e2e3dc; --bs-accordion-active-bg: transparent; --bs-accordion-btn-focus-box-shadow: none;}
html body .body-content .accordion.faq .accordion-item {border: 0; border-bottom: 1px solid #e2e3dc; border-radius: 0; background: none;}
html body .body-content .accordion.faq .accordion-item:first-child {border-top: 1px solid #e2e3dc;}
html body .body-content .accordion.faq .accordion-button {background: none; box-shadow: none; padding: 18px 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: #171817;}
html body .body-content .accordion.faq .accordion-body {padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: #5d5f5b;}