/* Legal / static content pages (privacy policy, terms, etc.) — additive
   stylesheet, loaded alongside style.css. Wraps raw CMS-builder HTML (with
   its own inline styles + optional per-page <style> block) in a readable,
   theme-matching, mobile-safe container. Uses !important in a few spots
   because the stored content carries inline font-size/font-family that
   would otherwise always win the cascade. */

.legal-page-wrap{
  max-width:1100px;margin:10px auto 60px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:40px 50px;overflow-wrap:break-word;
}

.legal-page-wrap img{max-width:320px !important;width:100%;height:auto !important;border-radius:var(--radius-sm);display:block;margin:0 auto 20px}

.legal-page-wrap h1,.legal-page-wrap h1 *{
  font-family:'Poppins',sans-serif !important;color:var(--ink) !important;font-weight:800 !important;
}
/* Some CMS-builder pages use a loose top-level <span class="text-center flex justify-center">
   as the page title instead of a real <h1> — style it the same as h1 above. It's identifiable
   as a direct child of the wrap: every other span in the document is nested inside a p/div. */
.legal-page-wrap > span{
  font-family:'Poppins',sans-serif !important;color:var(--ink) !important;font-weight:800 !important;
  font-size:32px !important;margin-bottom:8px !important;
}
/* The page builder also leaves empty spacer <div>s between the title and the body
   content, each carrying its own padding — collapse them instead of letting them
   stack up into a large, pointless gap. */
.legal-page-wrap > div:empty{padding:0 !important;margin:0 !important;height:0 !important}
/* Some CMS-builder pages wrap the title as a bold <p><strong><span>title</span></strong></p>
   sitting alone inside its own div — identifiable as the wrap's very first child being a div
   (every other page's first child is either an <h1> or a top-level <img>). Style it like the
   other title patterns above and drop its own padding since .legal-page-wrap already pads —
   stacking both made the title block look like it was floating in empty space. */
.legal-page-wrap > div:first-child{padding:0 !important}
.legal-page-wrap > div:first-child p,
.legal-page-wrap > div:first-child p *{
  font-family:'Poppins',sans-serif !important;color:var(--ink) !important;font-weight:800 !important;
  font-size:26px !important;
}
.legal-page-wrap > div:first-child p{margin-bottom:16px !important}
.legal-page-wrap h2,.legal-page-wrap h2 *,
.legal-page-wrap h3,.legal-page-wrap h3 *,
.legal-page-wrap h4,.legal-page-wrap h4 *{
  font-family:'Poppins',sans-serif !important;color:var(--ink) !important;font-weight:700 !important;
}
.legal-page-wrap h2{font-size:28px !important;margin:0 0 12px !important}
.legal-page-wrap h2 u{text-decoration:none}
/* The page-builder's table-layout "cell" wrapper around a title (.gjs-row > .gjs-cell > div)
   stacks its own padding on top of .legal-page-wrap's — drop it, the wrap already pads. */
.legal-page-wrap .gjs-row{padding:0 !important}
.legal-page-wrap .gjs-cell{padding:0 !important;height:auto !important}
.legal-page-wrap .gjs-cell > div{padding:0 !important}
.legal-page-wrap h4{margin-top:26px}

/* One CMS page pastes its ENTIRE body copy inside a stray <h1><code>...</code></h1> instead
   of real paragraphs — :has(code) singles out just that malformed h1 (a genuine page title
   is never wrapped in <code>) so it renders as normal body copy instead of inheriting the
   big bold black heading treatment above, keeping its <strong> sub-headings bold. */
.legal-page-wrap h1:has(code),
.legal-page-wrap h1:has(code) *{
  font-family:'Inter',sans-serif !important;color:var(--body) !important;font-weight:400 !important;
  font-size:14.5px !important;line-height:1.8 !important;text-align:left !important;
}
.legal-page-wrap h1:has(code){display:block;margin-top:6px}
.legal-page-wrap h1:has(code) strong{font-weight:700 !important;color:var(--ink) !important}

.legal-page-wrap p,.legal-page-wrap li,.legal-page-wrap span{line-height:1.7 !important}
.legal-page-wrap p{margin:0 0 14px !important}
.legal-page-wrap ul,.legal-page-wrap ol{padding-left:22px;margin:14px 0}
.legal-page-wrap li{margin-bottom:6px}
.legal-page-wrap a{color:var(--orange)}

.legal-page-wrap table{max-width:100%;display:block;overflow-x:auto}

@media(max-width:760px){
  .legal-page-wrap{margin:0 auto 30px;padding:20px 16px;border-radius:0;border-left:none;border-right:none}
  .legal-page-wrap img{max-width:200px !important}
  .legal-page-wrap > span{font-size:22px !important;margin-bottom:14px !important}
  .legal-page-wrap > div:first-child p,
  .legal-page-wrap > div:first-child p *{font-size:20px !important}
  .legal-page-wrap > div:first-child p{margin-bottom:10px !important}
  .legal-page-wrap h1,.legal-page-wrap h1 *{font-size:24px !important;line-height:1.3 !important}
  .legal-page-wrap h2,.legal-page-wrap h2 *{font-size:19px !important;line-height:1.35 !important}
  .legal-page-wrap h3,.legal-page-wrap h3 *{font-size:17px !important;line-height:1.35 !important}
  .legal-page-wrap h4,.legal-page-wrap h4 *{font-size:15px !important;line-height:1.35 !important}
  .legal-page-wrap p,.legal-page-wrap li,.legal-page-wrap span{font-size:13.5px !important}
}