/*
 * RICH TEXT: one stylesheet for everything the client types or pastes into the editor
 * (blog articles = .article-body, About / Terms / Privacy = .cms-page .text-box).
 *
 * Content pasted from Word, Google Docs or another website brings its own inline font-size, font-family, colours, margins,
 * floats and table widths. Those are overridden here per TAG, so every h1, h2, p, list, table... looks the same on every page
 * whatever HTML was pasted. Change a value in the :root block and it changes everywhere.
 */
:root {
    /* headings use the site-wide scale from typography.css, so a heading is the same size in an article as everywhere else */
    --rt-h1: var(--fs-h1);  --rt-h2: 20px;  --rt-h3: 18px;  --rt-h4: 16px;  --rt-h5: 16px;  --rt-h6: var(--fs-small);
    --rt-body: 16px; --rt-small: 14px; --rt-line: 1.85;
    --rt-ink: #14172b; --rt-text: #3b4160; --rt-muted: #6b7190; --rt-border: #eceef5; --rt-soft: #f6f7fb;
}

/* ---------- the container ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) { font-family: var(--font, "DM Sans", sans-serif); font-size: var(--rt-body); line-height: var(--rt-line); color: var(--rt-text); overflow-wrap: anywhere; word-break: normal; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) > :first-child { margin-top: 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) > :last-child { margin-bottom: 0 !important; }

/* ---------- headings ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h1, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h2, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h3, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h4, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h5, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h6 {
    font-family: inherit !important; color: var(--rt-ink) !important; font-weight: 700 !important; letter-spacing: -.005em !important;
    text-transform: none !important; text-align: left !important; text-indent: 0 !important; background: transparent !important;
    border: 0 !important; border-left: 0 !important; padding-left: 0 !important;
    float: none !important; width: auto !important; height: auto !important; scroll-margin-top: 110px;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h1 { font-size: var(--rt-h1) !important; line-height: 1.2 !important; margin: 1.8em 0 .6em !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h2 { font-size: var(--rt-h2) !important; line-height: 1.25 !important; margin: 1.9em 0 .65em !important; padding-left: 0 !important; position: relative; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h3 { font-size: var(--rt-h3) !important; line-height: 1.3 !important; margin: 1.7em 0 .55em !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h4 { font-size: var(--rt-h4) !important; line-height: 1.35 !important; margin: 1.5em 0 .5em !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h5 { font-size: var(--rt-h5) !important; line-height: 1.4 !important; margin: 1.4em 0 .45em !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) h6 { font-size: var(--rt-h6) !important; line-height: 1.4 !important; margin: 1.4em 0 .45em !important; color: var(--rt-muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
/* a heading pasted with spans/fonts/strong inside: the heading's own size, weight and colour win */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(h1, h2, h3, h4, h5, h6) :is(span, font, strong, b, em, i, u, a, mark, small) {
    font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; line-height: inherit !important;
    letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; background: transparent !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(h1, h2, h3, h4, h5, h6):empty { display: none !important; }

/* ---------- paragraphs and inline text ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) p {
    margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: var(--rt-body) !important; line-height: var(--rt-line) !important; font-family: inherit !important;
    color: var(--rt-text) !important; font-weight: 400 !important; text-indent: 0 !important; letter-spacing: normal !important; text-transform: none !important;
    background: transparent !important; white-space: normal !important; float: none !important; width: auto !important; max-width: 100% !important; height: auto !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) p[style*="justify"], :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(li, td, th, div)[style*="justify"] { text-align: left !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) p:empty, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) p:has(> br:only-child) { display: none !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(span, font, label, cite, abbr, time, u, i, em, b, strong) {
    font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: normal !important;
    text-transform: none !important; text-indent: 0 !important; white-space: normal !important; background: transparent !important; color: inherit;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(span, font, label, cite, abbr, time, u)[style] { color: inherit !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(strong, b) { font-weight: 700 !important; color: var(--rt-ink) !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(em, i, cite) { font-style: italic !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) small { font-size: var(--rt-small) !important; color: var(--rt-muted) !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(sub, sup) { font-size: .75em !important; line-height: 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) mark { background: rgba(var(--brand-rgb, 212, 20, 120), .14) !important; color: inherit !important; padding: 0 4px; border-radius: 4px; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) a { font-size: inherit !important; font-family: inherit !important; color: var(--brand, #d41478) !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: rgba(var(--brand-rgb, 212, 20, 120), .35) !important; text-underline-offset: 3px; background: transparent !important; transition: text-decoration-color .2s ease; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) a:hover { text-decoration-color: currentColor !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) a:has(> img) { text-decoration: none !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) hr { margin: 36px 0 !important; border: 0 !important; border-top: 1px solid var(--rt-border) !important; opacity: 1 !important; height: 0 !important; background: none !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) center { display: block; text-align: center; }

/* ---------- lists ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(ul, ol) { margin: 0 0 22px !important; padding: 0 0 0 26px !important; float: none !important; width: auto !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) ul { list-style: disc outside !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) ol { list-style: decimal outside !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(ul, ol) :is(ul, ol) { margin: 10px 0 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) ul ul { list-style-type: circle !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) ul ul ul { list-style-type: square !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) li { display: list-item !important; margin: 0 0 10px !important; padding: 0 0 0 4px !important; font-size: var(--rt-body) !important; line-height: var(--rt-line) !important; color: var(--rt-text) !important; font-family: inherit !important; text-indent: 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) li::marker { color: var(--brand, #d41478); font-weight: 700; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) li > p { margin: 0 !important; display: inline; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) li > p + p { display: block; margin-top: 8px !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) dl { margin: 0 0 22px !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) dt { font-weight: 700 !important; color: var(--rt-ink) !important; margin-top: 12px !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) dd { margin: 4px 0 0 20px !important; }

/* ---------- quotes and code ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) blockquote {
    margin: 30px 0 !important; padding: 20px 26px !important; border: 0 !important; border-left: 5px solid var(--brand, #d41478) !important; border-radius: 0 16px 16px 0 !important;
    background: rgba(var(--brand-rgb, 212, 20, 120), .08) !important; color: var(--rt-ink) !important; font-size: var(--rt-h4) !important; line-height: 1.7 !important;
    font-style: normal !important; font-weight: 500 !important; float: none !important; width: auto !important; max-width: 100% !important; font-family: inherit !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) blockquote :is(p, span, em, i, strong, b) { font-size: inherit !important; font-family: inherit !important; color: inherit !important; margin: 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) blockquote p + p { margin-top: 12px !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) pre {
    margin: 0 0 22px !important; padding: 18px 20px !important; overflow-x: auto !important; border: 0 !important; border-radius: 14px !important; background: #14172b !important; color: #e7e9f5 !important;
    font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; white-space: pre !important; overflow-wrap: normal;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) pre :is(code, span) { background: transparent !important; color: inherit !important; font: inherit !important; padding: 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :not(pre) > code, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) kbd { padding: 2px 7px !important; border-radius: 6px !important; background: #f1f2f8 !important; color: var(--brand, #d41478) !important; font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }

/* ---------- images and embeds ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) img {
    display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 28px auto !important; float: none !important;
    border-radius: 18px !important; border: 0 !important; object-fit: contain !important; box-shadow: 0 10px 30px rgba(20, 23, 43, .1);
    position: static !important; transform: none !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) figure { margin: 28px 0 !important; padding: 0 !important; float: none !important; width: auto !important; max-width: 100% !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) figure img { margin: 0 auto !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) figcaption, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) .wp-caption-text { margin-top: 10px !important; font-size: var(--rt-small) !important; line-height: 1.5 !important; color: var(--rt-muted) !important; text-align: center !important; font-style: normal !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(iframe, video, embed, object) {
    display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; margin: 28px 0 !important;
    border: 0 !important; border-radius: 18px !important; float: none !important;
}

/* ---------- tables ---------- */
/* richText() wraps each table in .rt-table-wrap: the wrapper draws the card and scrolls sideways, the table itself always fills the
   wrapper (so a small table is full width) and grows past it when it has many columns (every cell is at least 140px wide). */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) .rt-table-wrap {
    width: 100% !important; max-width: 100% !important; margin: 28px 0 !important; overflow-x: auto; background: #fff; border: 1px solid var(--rt-border); border-radius: 16px;
    box-shadow: 0 6px 20px rgba(20, 23, 43, .05); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #c3c8dc #f0f2f8;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) .rt-table-wrap::-webkit-scrollbar { height: 9px; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) .rt-table-wrap::-webkit-scrollbar-track { background: #f0f2f8; border-radius: 0 0 16px 16px; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) .rt-table-wrap::-webkit-scrollbar-thumb { background: #c3c8dc; border-radius: 9px; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) .rt-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--brand, #d41478); }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) table {
    display: table !important; width: 100% !important; min-width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; float: none !important;
    table-layout: auto !important; border-collapse: collapse !important; border-spacing: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(colgroup, col) { width: auto !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(thead, tbody, tfoot, tr) { background: transparent !important; border: 0 !important; height: auto !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(th, td) {
    width: auto !important; height: auto !important; min-width: 140px !important; padding: 13px 18px !important; border: 0 !important; border-top: 1px solid var(--rt-border) !important;
    background: transparent !important; color: var(--rt-text) !important; font-family: inherit !important; font-size: var(--rt-body) !important; font-weight: 400 !important;
    line-height: 1.5 !important; text-align: left !important; vertical-align: top !important; white-space: normal !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(th, td) :is(p, span, font, div, strong, b, em, i, a) { margin: 0 !important; font-size: inherit !important; line-height: inherit !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) td strong, :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) td b { color: var(--rt-ink) !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) th {
    background: var(--rt-ink) !important; color: #fff !important; font-size: var(--rt-small) !important; font-weight: 700 !important; letter-spacing: .03em !important;
    white-space: nowrap !important; border-top: 0 !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) th :is(p, span, font, div, strong, b, em, i, a) { color: #fff !important; font-weight: 700 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) tbody tr:nth-child(even) > td { background: #fafbfe !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) tbody tr:hover > td { background: rgba(var(--brand-rgb, 212, 20, 120), .06) !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) tbody tr:first-child > td { border-top: 0 !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) thead + tbody tr:first-child > td { border-top: 1px solid var(--rt-border) !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) td:first-child:not(:only-child) { font-weight: 600 !important; color: var(--rt-ink) !important; }

/* ---------- layout leftovers from pasted wrappers ---------- */
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(div, section, article, aside, header, footer, main, span, a)[style] {
    float: none !important; position: static !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
    transform: none !important; text-indent: 0 !important; letter-spacing: normal !important; white-space: normal !important;
}
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) div[style*="font-size"], :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) div[style*="font-family"], :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) div[style*="line-height"] { font-size: var(--rt-body) !important; line-height: var(--rt-line) !important; font-family: inherit !important; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) div { max-width: 100%; }
:root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(img, svg)[align], :root body :is(.magazine-blog-details .article-body, .cms-page .text-box) :is(img, svg)[style*="float"] { float: none !important; }

/* inside a CMS page the first h1 of the content is just a big heading (the page title is printed above the card) */
:root body .cms-page .text-box h1 { font-size: var(--fs-body) !important; font-weight: 600 !important; color: var(--rt-muted) !important; margin: 0 0 1.2em !important; }
:root body .cms-page .text-box > :first-child { margin-top: 0 !important; }