/* [PPS-V7-LOOK] info: the information pages in the v7 look (COAs + report viewer + report pages, rewards, partner page,
   about, contact, track, calculator, research, compare, policy pages, 404). CSS only, except the partner page
   (templates/v7/affiliate.html, .v7a-*). Pages whose markup has no own classes are picked by their canonical link
   (html:has(link[rel=canonical][href$="/about"])), so nothing here reaches another page. Older page styles use ids and
   !important, hence the "html body #main" prefixes. */

:root {
  --vi-navy: #0B1D4A; --vi-navy2: #12306F; --vi-blue: #2A82D4; --vi-sky: #8FC4F3; --vi-ink: #0E1626; --vi-text: #33415A;
  --vi-mute: #5D6B82; --vi-line: #E3E9F2; --vi-field: #D6DEEA; --vi-bg: #F5F8FC; --vi-soft: #EAF2FB; --vi-green: #11734F;
  --vi-xs: 11px; --vi-hf: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vi-bf: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ================================================================ shared page header (soft blue band) */
:root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header,
html body #main > .page-hero {
  background: var(--vi-bg) !important; background-image: none !important; border-bottom: 1px solid var(--vi-line) !important;
  padding: 44px 0 44px !important; color: var(--vi-ink) !important; }
:root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header > .container,
html body #main > .page-hero > .container { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 0 var(--gutter, 24px); }
:root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header h1,
html body #main > .page-hero h1 {
  margin: 14px 0 10px !important; font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 46px !important;
  line-height: 1.06 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header h1:first-child { margin-top: 0 !important; }
:root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header p,
html body #main > .page-hero p {
  margin: 0 !important; max-width: 640px !important; font-family: var(--vi-bf); font-size: 16px !important; line-height: 1.6 !important; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header .section-eyebrow,
html body #main > .page-hero .section-eyebrow { display: inline-block; font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .18em !important;
  text-transform: uppercase; color: var(--vi-blue) !important; }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header,
  html body #main > .page-hero { padding: 28px 0 30px !important; }
  :root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header > .container,
  html body #main > .page-hero > .container { padding: 0 16px; }
  :root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header h1,
  html body #main > .page-hero h1 { font-size: 32px !important; }
  :root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header p,
  html body #main > .page-hero p { font-size: 15px !important; }
}

/* breadcrumbs on article / comparison pages */
html body #main > nav.breadcrumbs { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 18px var(--gutter, 24px) 0 !important; font: 500 13px/1.5 var(--vi-bf); color: var(--vi-mute); }
html body #main > nav.breadcrumbs ol { gap: 6px !important; flex-wrap: wrap; }
html body #main > nav.breadcrumbs a { color: var(--vi-mute) !important; }
html body #main > nav.breadcrumbs li:last-child span { color: var(--vi-navy) !important; font-weight: 600; }
@media (max-width: 760px) { html body #main > nav.breadcrumbs { padding: 14px 16px 0 !important; }
  html body #main > nav.breadcrumbs a { display: inline-block; padding: 11px 4px; margin: -11px -4px; } }   /* margin = padding: text stays on the 16px grid line */

/* ================================================================ COA library (/coas) */
html body #main .cv2 { --c-ink: var(--vi-navy); --c-ink2: var(--vi-text); --c-ink3: var(--vi-mute); --c-line: var(--vi-line);
  --c-mist: var(--vi-bg); --c-pass: var(--vi-green); --c-disp: var(--vi-hf); font-family: var(--vi-bf); color: var(--vi-ink); }
html body #main .cv2 [hidden] { display: none !important; }
html body #main .cv2-wrap { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 0 var(--gutter, 24px); }
/* header band */
html body #main .cv2 .cv2-head { padding: 44px 0 40px; background: var(--vi-bg); border-bottom: 1px solid var(--vi-line); }
html body #main .cv2-eyebrow { margin: 0; font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .18em; color: var(--vi-blue); }
html body #main .cv2-dot { display: none; }
html body #main .cv2 .cv2-h1 { margin: 14px 0 10px !important; font-family: var(--vi-hf) !important; font-weight: 800 !important; text-transform: none !important;
  letter-spacing: -.02em !important; line-height: 1.06 !important; font-size: 46px !important; color: var(--vi-navy) !important; }
html body #main .cv2-lead { max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--vi-mute); }
html body #main .cv2-lead strong { color: var(--vi-navy); font-weight: 600; }
html body #main .cv2-lead a { color: var(--vi-blue); font-weight: 600; text-decoration: none !important; }
html body #main .cv2-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-top: 24px; }
html body #main .cv2-proof { flex: 1 1 520px; max-width: none; margin: 0; }
html body #main .cv2-facts, html body #main .cv2-proof .cv2-facts { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; margin: 0; border: 0; }
html body #main .cv2-facts li, html body #main .cv2-facts li + li { flex: 0 1 auto; min-width: 170px; padding: 14px 18px; background: #fff;
  border: 1px solid var(--vi-line); border-radius: 16px; gap: 2px; }
html body #main .cv2-facts b { font: 800 24px/1.15 var(--vi-hf); letter-spacing: -.01em; color: var(--vi-navy); }
html body #main .cv2-facts span { font-size: 12.5px; color: var(--vi-mute); }
html body #main .cv2-checks { gap: 8px; margin: 14px 0 0; }
html body #main .cv2-checks li { padding: 7px 12px 7px 10px; border-color: var(--vi-line); font-size: 12.5px; font-weight: 500; color: var(--vi-text); }
html body #main .cv2-checks svg { stroke: var(--vi-blue); }
html body #main .cv2 .cv2-search { flex: 0 1 340px; max-width: 100%; margin: 0; }
html body #main .cv2 .cv2-search input { min-height: 48px; padding: 0 16px 0 44px !important; border: 1px solid var(--vi-line) !important; border-radius: 12px !important;
  background: #fff !important; font-size: 15px; color: var(--vi-ink); box-shadow: none; }
html body #main .cv2 .cv2-search input:focus { border-color: var(--vi-navy) !important; box-shadow: 0 0 0 3px rgba(11,29,74,.10); }
html body #main .cv2-search svg { left: 15px; width: 18px; height: 18px; stroke: var(--vi-mute); }
/* the reports: one bordered table, a row per COA */
html body #main .cv2 .cv2-list { padding: 40px 0 28px; background: #fff; }
html body #main .cv2-grid { display: block; gap: 0; background: #fff; border: 1px solid var(--vi-line); border-radius: 20px; overflow: hidden; }
html body #main .cv2-card { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; align-items: center; gap: 8px 24px; margin: -1px 0 0;
  padding: 14px 22px; border: 0; border-top: 1px solid var(--vi-line); border-radius: 0; background: #fff; box-shadow: none; transform: none; }
html body #main .cv2-card:hover { background: #FAFCFE; border-color: var(--vi-line); box-shadow: none; }
html body #main .cv2-hit { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; border-radius: 12px; }
html body #main .cv2-pic, html body #main .cv2 .cv2-pic { width: 56px; height: 64px; border-radius: 12px; background: linear-gradient(180deg, #F2F6FB, #E6EEF8); }
html body #main .cv2 .cv2-pic img { height: 56px !important; filter: drop-shadow(0 6px 6px rgba(11,29,74,.16)); }
html body #main .cv2 .cv2-pic--photo img { height: 100% !important; }
html body #main .cv2-card:hover .cv2-pic img { transform: none; }
html body #main .cv2-info { display: grid; grid-template-columns: minmax(0, 1fr) 104px 178px; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
html body #main .cv2-name { grid-column: 1; grid-row: 1; font: 700 15.5px/1.3 var(--vi-hf); color: var(--vi-navy); }
html body #main .cv2-sub { grid-column: 1; grid-row: 2; margin-top: 2px; font-size: 12.5px; color: var(--vi-mute); }
html body #main .cv2-pur { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0; }
html body #main .cv2-pur b { font: 800 18px/1.1 var(--vi-hf); letter-spacing: -.01em; color: var(--vi-green); }
html body #main .cv2-pur b i { font-size: 1em; }
html body #main .cv2-pur span { font-size: var(--vi-xs); font-weight: 500; color: var(--vi-mute); }
html body #main .cv2-pur--word b { font-size: 16px; }
html body #main .cv2-date { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 13px; color: var(--vi-mute); }
html body #main .cv2-tests { margin: 0; padding: 0; background: none; border-radius: 0; font-size: 12.5px; color: var(--vi-mute); }
html body #main .cv2-tests svg { stroke: var(--vi-green); }
html body #main .cv2-acts { margin: 0; gap: 8px; }
html body #main .cv2 .cv2-btn { min-height: 40px; padding: 0 14px; border-radius: 10px; font: 600 13px/1 var(--vi-bf); }
html body #main .cv2 .cv2-btn svg { width: 15px; height: 15px; }
html body #main .cv2 .cv2-btn--ink { flex: 0 0 auto; background: var(--vi-navy); border: 1.5px solid var(--vi-navy); color: #fff !important; }
html body #main .cv2 .cv2-btn--ink:hover { background: #13296A; }
html body #main .cv2 .cv2-btn--line { background: #fff; border: 1.5px solid #CBD5E3; color: var(--vi-navy) !important; }
html body #main .cv2 .cv2-btn--line:hover { border-color: var(--vi-navy); }
html body #main .cv2-none { margin: 14px 0 0; border: 1px dashed #CBD5E3; border-radius: 16px; background: var(--vi-bg); color: var(--vi-mute); }
@media (max-width: 1100px) {
  html body #main .cv2-card { grid-template-columns: minmax(0, 1fr) auto; }
  html body #main .cv2-tests { grid-column: 1; grid-row: 2; padding-left: 70px; }
  html body #main .cv2-acts { grid-column: 2; grid-row: 1 / span 2; }
  html body #main .cv2-info { grid-template-columns: minmax(0, 1fr) 110px; grid-template-rows: auto auto auto; }
  html body #main .cv2-pur { grid-row: 1 / span 3; }
  html body #main .cv2-date { grid-column: 1; grid-row: 3; margin-top: 2px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  html body #main .cv2-wrap { padding: 0 16px; }
  html body #main .cv2 .cv2-head { padding: 28px 0 28px; }
  html body #main .cv2 .cv2-h1 { font-size: 32px !important; }
  html body #main .cv2-lead { font-size: 15px; }
  html body #main .cv2-proof { flex-basis: 100%; }
  html body #main .cv2-facts, html body #main .cv2-proof .cv2-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body #main .cv2-facts li, html body #main .cv2-facts li + li { min-width: 0; padding: 12px; border-radius: 14px; }
  html body #main .cv2-facts b { font-size: 18px; }
  html body #main .cv2-facts span { font-size: 12px; }
  html body #main .cv2 .cv2-search { flex-basis: 100%; }
  html body #main .cv2 .cv2-search input { font-size: 16px; }
  html body #main .cv2 .cv2-list { padding: 24px 0 20px; }
  html body #main .cv2-card { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 10px; }
  html body #main .cv2-hit { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  html body #main .cv2-pic, html body #main .cv2 .cv2-pic { width: 48px; height: 56px; }
  html body #main .cv2 .cv2-pic img { height: 48px !important; }
  html body #main .cv2-info { grid-template-columns: minmax(0, 1fr) auto; }
  html body #main .cv2-pur { align-items: flex-end; text-align: right; }
  html body #main .cv2-tests { grid-column: 1; grid-row: auto; padding-left: 0; }
  html body #main .cv2-acts { grid-column: 1; grid-row: auto; }
  html body #main .cv2 .cv2-btn { flex: 1 1 0; min-height: 44px; font-size: 14px; }
}
/* reading a COA */
html body #main .cv2 .cv2-read { padding: 36px 0 64px; background: #fff; }
html body #main .cv2 .cv2-h2 { margin: 0 0 16px !important; font-family: var(--vi-hf) !important; font-weight: 800 !important; text-transform: none !important;
  letter-spacing: -.02em !important; font-size: 28px !important; line-height: 1.15 !important; color: var(--vi-navy) !important; }
html body #main .cv2-terms div { padding: 18px 20px; background: #fff; border: 1px solid var(--vi-line); border-radius: 16px; }
html body #main .cv2-terms dt { font: 700 15.5px/1.3 var(--vi-hf); color: var(--vi-navy); }
html body #main .cv2-terms dd { font-size: 14px; line-height: 1.6; color: var(--vi-mute); }
html body #main .cv2-note { margin-top: 18px; font-size: 13px; color: var(--vi-mute); }
@media (max-width: 760px) { html body #main .cv2 .cv2-h2 { font-size: 24px !important; } }

/* ================================================================ COA report viewer (pop-up, coa-v2.js; also opens on product pages) */
html body .cvx { --c-ink: var(--vi-navy); --c-ink2: var(--vi-text); --c-ink3: var(--vi-mute); --c-line: var(--vi-line); --c-mist: #EEF3F9;
  --c-pass: var(--vi-green); --c-disp: var(--vi-hf); font-family: var(--vi-bf); }
html body .cvx [hidden] { display: none !important; }
html body .cvx-back { background: rgba(11,29,74,.55); }
@media (min-width: 760px) { html body .cvx-box { border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(11,29,74,.6); } }
html body .cvx-ico { border-radius: 12px; background: var(--vi-soft); }
html body .cvx-ico svg { stroke: var(--vi-blue); }
html body .cvx-t1 { font: 700 15.5px/1.25 var(--vi-hf); color: var(--vi-navy); }
html body .cvx-dl, html body .cvx-x { height: 44px; border-radius: 12px; font: 600 14px var(--vi-bf); }
html body .cvx-dl { border: 1.5px solid #CBD5E3; color: var(--vi-navy); }
html body .cvx-dl:hover { border-color: var(--vi-navy); }
html body .cvx-x { background: #EEF2F7; color: var(--vi-navy); }
html body .cvx-tab { min-height: 40px; border-color: #D3DCE9; font: 600 13px var(--vi-bf); color: var(--vi-text); }
html body .cvx-tab[aria-selected="true"] { background: var(--vi-navy); border-color: var(--vi-navy); color: #fff; }
html body .cvx-arr { border-color: #D3DCE9; color: var(--vi-navy); }
html body .cvx-sum b { font: 800 20px var(--vi-hf); color: var(--vi-green); letter-spacing: -.01em; }
html body .cvx-ver { color: var(--vi-blue); }
html body .cvx-sum .cvx-ver { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 40px tap box for "Verify with the lab"; the line looks the same */
html body .cvx-body { background: #EEF3F9; }
html body .cvx-go { border-radius: 12px; background: var(--vi-navy); font: 700 14.5px var(--vi-hf); text-decoration: none !important; }
html body .cvx-go:hover { background: #13296A; }
html body .cvx-open { border-radius: 18px; border: 1px solid var(--vi-line); }

/* ================================================================ COA report pages (/coas/<report>) and /lab-reports */
html body #cpg { --k-ink: var(--vi-navy); --k-ink2: var(--vi-text); --k-ink3: var(--vi-mute); --k-line: var(--vi-line); --k-mist: var(--vi-bg);
  --k-pass: var(--vi-green); --k-disp: var(--vi-hf); font-family: var(--vi-bf); color: var(--vi-ink); }
html body #cpg .cpg-wrap { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 0 var(--gutter, 24px); }
html body #cpg .cpg-crumbs, html body #cpg .cpg-head { background: var(--vi-bg); box-shadow: 0 0 0 100vmax var(--vi-bg); clip-path: inset(0 -100vmax); }
html body #cpg .cpg-head { margin-bottom: 32px; padding-bottom: 36px; }
html body #cpg > .cpg-wrap > .cpg-head:last-child { margin-bottom: 0; }
html body #cpg .cpg-crumbs ol { font: 500 13px/1.5 var(--vi-bf); letter-spacing: 0; text-transform: none; }
html body #cpg .cpg-crumbs [aria-current], html body #cpg .cpg-crumbs li:last-child { color: var(--vi-navy); font-weight: 600; }
html body #cpg .cpg-eyebrow { font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .18em; color: var(--vi-blue); }
html body #cpg .cpg-dot { display: none; }
html body #cpg h1.cpg-h1.cpg-h1 { font-family: var(--vi-hf) !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.02em !important;
  line-height: 1.08 !important; font-size: 44px !important; color: var(--vi-navy) !important; }
html body #cpg .cpg-h1 .cpg-h1-b { margin-top: 6px; font-size: .48em; font-weight: 700; letter-spacing: -.01em; color: var(--vi-blue); }
html body #cpg .cpg-lead { font-size: 16px; line-height: 1.6; color: var(--vi-mute); }
html body #cpg .cpg-lead strong { color: var(--vi-navy); }
html body #cpg .cpg-card { padding: 24px; border-color: var(--vi-line); border-radius: 22px; box-shadow: none; }
html body #cpg h2.cpg-h2.cpg-h2 { font-family: var(--vi-hf) !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.02em;
  font-size: 26px !important; line-height: 1.15 !important; color: var(--vi-navy) !important; }
html body #cpg h2.cpg-h2.cpg-sm { font-family: var(--vi-bf) !important; font-weight: 600 !important; font-size: var(--vi-xs) !important; letter-spacing: .16em;
  text-transform: uppercase !important; color: var(--vi-mute) !important; }
html body #cpg .cpg-pur b { font: 800 50px/1 var(--vi-hf); letter-spacing: -.02em; color: var(--vi-green); }
html body #cpg .cpg-facts dd { color: var(--vi-navy); }
html body #cpg .cpg-btn { min-height: 48px; border-radius: 12px; font: 700 15px var(--vi-hf); }
html body #cpg .cpg-btn--ink { background: var(--vi-navy); border: 1.5px solid var(--vi-navy); }
html body #cpg .cpg-btn--ink:hover { background: #13296A; }
html body #cpg .cpg-btn--line { border: 1.5px solid #CBD5E3; color: var(--vi-navy) !important; }
html body #cpg .cpg-btn--line:hover { border-color: var(--vi-navy); }
html body #cpg .cpg-verify a, html body #cpg .cpg-all, html body #cpg .cpl-shop { color: var(--vi-blue); }
html body #cpg .cpg-pages { border-radius: 22px; background: #EEF3F9; }
html body #cpg .cpg-prod-pic, html body #cpg .cpl-top .cpg-prod-pic { background: linear-gradient(180deg, #F2F6FB, #E6EEF8); }
html body #cpg .cpg-prod-n { font: 700 16px/1.3 var(--vi-hf); color: var(--vi-navy); }
html body #cpg .cpg-terms div { background: #fff; border: 1px solid var(--vi-line); border-radius: 16px; }
html body #cpg .cpg-terms dt { font: 700 15.5px/1.3 var(--vi-hf); color: var(--vi-navy); }
html body #cpg .cpg-terms dd { color: var(--vi-mute); }
html body #cpg .cpg-more a { border-radius: 16px; border-color: var(--vi-line); }
html body #cpg .cpg-more-t b { font-family: var(--vi-hf); color: var(--vi-navy); }
html body #cpg .cpg-more-p, html body #cpg .cpl-rep-p b { font: 800 20px/1 var(--vi-hf); color: var(--vi-green); }
html body #cpg .cpl-stats b { font: 800 22px/1 var(--vi-hf); color: var(--vi-navy); }
html body #cpg h2.cpl-h.cpl-h { font-family: var(--vi-hf) !important; font-weight: 700 !important; color: var(--vi-navy) !important; }
html body #cpg .cpl-rep { border-radius: 14px; background: var(--vi-bg); border: 1px solid var(--vi-line); }
html body #cpg .cpl-rep:hover { background: var(--vi-soft); }
html body #cpg .cpl-rep-t b { font-family: var(--vi-hf); color: var(--vi-navy); }
html body #cpg .cpl-rep-p span { color: var(--vi-blue); }
@media (max-width: 760px) { html body #cpg .cpg-wrap { padding: 0 16px; } html body #cpg h1.cpg-h1.cpg-h1 { font-size: 32px !important; }
  html body #cpg h2.cpg-h2.cpg-h2 { font-size: 22px !important; } html body #cpg .cpg-pur b { font-size: 42px; } html body #cpg .cpg-card { padding: 18px; } }

/* ================================================================ Prime Rewards (/rewards) */
html body #rw.rl { --rl-ink: var(--vi-navy); --rl-ink2: var(--vi-navy2); --rl-text: var(--vi-ink); --rl-body: var(--vi-mute); --rl-mute: var(--vi-mute);
  --rl-mist: var(--vi-bg); --rl-line: var(--vi-line); --rl-line2: var(--vi-line); --rl-on2: #B7C6E2; --rl-on3: #9FB3D6;
  --rl-blue: var(--vi-blue); --rl-blue-d: #1F6FBF; --rl-blue2: var(--vi-blue); --rl-blue-ink: var(--vi-sky); --rl-navy: var(--vi-navy);
  --rl-display: var(--vi-hf); --rl-sans: var(--vi-bf); --rl-gut: var(--gutter, 24px); background: #fff; }
html body #rw .rl-wrap { max-width: calc(1200px + 2 * var(--gutter, 24px)); }
html body #rw .rl-glow { display: none; }
html body #rw .rl-kicker { font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .18em; color: var(--vi-blue); }
html body #rw .rl-kicker::before { display: none; }
html body #rw .rl-band--ink .rl-kicker { color: var(--vi-sky); }
html body #rw .rl-live { width: 7px; height: 7px; background: var(--vi-sky); animation: none; box-shadow: none; }
/* hero: a navy band, the "how it works" cards below it on white */
html body #rw .rl-top { padding: 0 0 8px; background: #fff; color: var(--vi-ink); overflow: visible; }
html body #rw .rl-top-grid { position: relative; padding: 52px 0 60px; color: #fff; background: var(--vi-navy);
  box-shadow: 0 0 0 100vmax var(--vi-navy); clip-path: inset(-1px -100vmax); }
html body #rw#rw .rl-h1 { font-family: var(--vi-hf) !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.02em !important;
  font-size: 54px !important; line-height: 1.04 !important; color: #fff; }
html body #rw#rw .rl-band--ink .rl-h1 .rl-blue, html body #rw#rw .rl-h1 .rl-blue { color: var(--vi-sky); }
html body #rw#rw .rl-h2, html body #rw#rw .rl-h3 { font-family: var(--vi-hf) !important; font-weight: 800 !important; text-transform: none !important;
  letter-spacing: -.02em !important; color: var(--vi-navy) !important; }
html body #rw#rw .rl-h3 { font-size: 30px !important; line-height: 1.15 !important; }
html body #rw .rl-lead { max-width: 560px; font-size: 16.5px; line-height: 1.6; color: #B7C6E2; }
html body #rw .rl-btn { min-height: 48px; padding: 0 22px; border-radius: 12px; font: 700 15px/1 var(--vi-hf); box-shadow: none; }
html body #rw .rl-btn--blue { background: var(--vi-blue); border-color: var(--vi-blue); }
html body #rw .rl-btn--line { border: 1.5px solid rgba(255,255,255,.3); }
html body #rw .rl-faqs .rl-btn--blue, html body #rw .rl-band--paper .rl-btn--blue { background: var(--vi-navy); border-color: var(--vi-navy); }
/* the member card */
html body #rw .rl-card { border-radius: 22px; border: 1px solid rgba(143,196,243,.22); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
  background: radial-gradient(120% 95% at 105% -5%, rgba(42,130,212,.45) 0%, rgba(42,130,212,0) 55%), linear-gradient(155deg, #17357A 0%, #102760 60%, #0B1D4A 100%); }
html body #rw .rl-card::before { background: linear-gradient(90deg, var(--vi-blue), var(--vi-sky) 60%, rgba(143,196,243,0)); }
html body #rw .rl-card-mark { color: rgba(143,196,243,.08); }
/* how it works: white cards */
html body #rw .rl-top > .rl-wrap > .rl-sr { position: static !important; width: auto; height: auto; margin: 56px 0 26px; overflow: visible; clip: auto; white-space: normal;
  font: 800 38px/1.1 var(--vi-hf) !important; letter-spacing: -.02em; text-transform: none !important; color: var(--vi-navy) !important; }
html body #rw .rl-strip { gap: 16px; margin: 0; padding: 0; border: 0; }
html body #rw .rl-strip li { position: relative; display: block; padding: 24px; background: #fff; border: 1px solid var(--vi-line); border-radius: 20px; }
html body #rw .rl-strip li::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px;
  background: var(--vi-soft) center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.3 11H6.3z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
html body #rw .rl-strip li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
html body #rw .rl-strip li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html body #rw .rl-strip-n { position: absolute; right: 20px; top: 14px; width: auto; height: auto; background: none; border-radius: 0;
  font: 800 44px/1 var(--vi-hf); color: #EEF3F9; -webkit-text-fill-color: #EEF3F9; }
html body #rw .rl-strip-t { position: relative; margin: 0 0 8px !important; font: 700 17px/1.3 var(--vi-hf) !important; text-transform: none !important;
  letter-spacing: -.01em; color: var(--vi-navy) !important; }
html body #rw .rl-strip p { position: relative; font-size: 14px; line-height: 1.6; color: var(--vi-mute); }
/* calculator, facts and rules */
html body #rw .rl-mid { padding: 48px 0 56px; }
html body #rw .rl-calc { padding: 28px; border-radius: 22px; border: 1px solid var(--vi-line); box-shadow: none; }
html body #rw .rl-calc::before { display: none; }
html body #rw .rl-calc-lab { font: 500 14px var(--vi-bf); letter-spacing: 0; text-transform: none; color: var(--vi-mute); }
html body #rw .rl-calc-amt { font: 800 28px/1 var(--vi-hf); letter-spacing: -.01em; color: var(--vi-navy); }
html body #rw .rl-range input[type=range]::-webkit-slider-runnable-track { height: 8px;
  background: linear-gradient(90deg, var(--vi-blue) 0 var(--rw-fill, 0%), var(--vi-line) var(--rw-fill, 0%) 100%); }
html body #rw .rl-range input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -9px; background: #fff; border: 3px solid var(--vi-blue);
  box-shadow: 0 2px 6px rgba(11,29,74,.18); }
html body #rw .rl-range input[type=range]::-moz-range-track { height: 8px; background: var(--vi-line); }
html body #rw .rl-range input[type=range]::-moz-range-progress { height: 8px; background: var(--vi-blue); }
html body #rw .rl-range input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--vi-blue); }
html body #rw .rl-ends { font-size: 12px; color: var(--vi-mute); }
html body #rw .rl-calc-out { border-color: var(--vi-line); }
html body #rw .rl-calc-pts { font: 800 48px/1 var(--vi-hf); letter-spacing: -.02em; color: var(--vi-navy); }
html body #rw .rl-calc-pl { font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .14em; color: var(--vi-mute); }
html body #rw .rl-calc-say { font: 700 16px/1.4 var(--vi-hf); color: var(--vi-navy); }
html body #rw .rl-calc-note { font-size: 12.5px; color: var(--vi-mute); }   /* readable grey (was 2.9:1) */
html body #rw .rl-fact { padding: 22px; border-radius: 20px; border: 1px solid var(--vi-line); box-shadow: none; }
html body #rw .rl-fact-k { font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .14em; color: var(--vi-mute); }
html body #rw .rl-fact-big { font: 800 40px/1.05 var(--vi-hf); letter-spacing: -.02em; color: var(--vi-navy); }
html body #rw .rl-fact-t { font: 700 15px/1.35 var(--vi-hf); color: var(--vi-navy); }
html body #rw .rl-fact--ink { background: linear-gradient(160deg, var(--vi-navy), var(--vi-navy2)); border-color: transparent; }
html body #rw .rl-fact--ink::before, html body #rw .rl-fact--ink::after { display: none; }
html body #rw .rl-fact--ink .rl-fact-k { color: var(--vi-sky); }
html body #rw .rl-fact--ink .rl-fact-big, html body #rw .rl-fact--ink .rl-fact-t { color: #fff; }
html body #rw .rl-rules2 li { padding: 20px; background: #fff; border: 1px solid var(--vi-line); border-radius: 18px; }
html body #rw .rl-r-n { font: 800 15px/1 var(--vi-hf); color: var(--vi-blue); }
html body #rw .rl-r-t { font: 700 16px/1.3 var(--vi-hf) !important; text-transform: none !important; letter-spacing: -.01em; color: var(--vi-navy) !important; }
html body #rw .rl-rules2 p { font-size: 14px; color: var(--vi-mute); }
/* questions: rounded cards */
html body #rw .rl-faqs { padding: 56px 0 64px; background: var(--vi-bg); }
html body #rw .rl-faq2 { gap: 0 16px; }
html body #rw .rl-faq { border: 0; }
html body #rw .rl-q { margin: 0 0 10px; padding: 0 20px; background: #fff; border: 1px solid var(--vi-line); border-radius: 16px; }
html body #rw .rl-q summary, html body #rw .rl-faqs .rl-q summary { min-height: 56px; padding: 16px 0; font: 700 15.5px/1.35 var(--vi-hf); color: var(--vi-navy); }
html body #rw .rl-q-t { color: var(--vi-navy); }
html body #rw .rl-pm, html body #rw .rl-faqs .rl-pm { width: 26px; height: 26px; border: 0; background: none !important; }
html body #rw .rl-pm::before, html body #rw .rl-pm::after { background: var(--vi-blue) !important; }
html body #rw .rl-q p, html body #rw .rl-faqs .rl-q p { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--vi-mute); }
@media (max-width: 760px) {
  html body #rw .rl-top-grid { padding: 32px 0 40px; }
  html body #rw#rw .rl-h1 { font-size: 38px !important; }
  html body #rw .rl-acts .rl-btn { flex: 1 1 auto; }
  html body #rw .rl-top > .rl-wrap > .rl-sr { margin: 40px 0 18px; font-size: 28px !important; }
  html body #rw#rw .rl-h3 { font-size: 24px !important; }
  html body #rw .rl-calc { padding: 20px; }
  html body #rw .rl-mid, html body #rw .rl-faqs { padding: 36px 0 44px; }
  html body #rw .rl-rules2 li { padding: 16px; }
}

/* ================================================================ partner page (/affiliate-program, templates/v7/affiliate.html) */
html body #main .v7a { font-family: var(--vi-bf); color: var(--vi-ink); background: #fff; }
html body #main .v7a [hidden] { display: none !important; }
html body #main .v7a-wrap { max-width: calc(1200px + 2 * var(--gutter, 24px)); margin: 0 auto; padding: 0 var(--gutter, 24px); }
html body #main .v7a-head { padding: 22px 0 56px; background: var(--vi-bg); border-bottom: 1px solid var(--vi-line); }
html body #main .v7a-crumb { margin: 0 0 18px; font: 500 13px/1.5 var(--vi-bf); color: var(--vi-mute); }
html body #main .v7a-crumb a { color: var(--vi-mute); text-decoration: none; }
html body #main .v7a-crumb b { color: var(--vi-navy); font-weight: 600; }
html body #main .v7a-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid #D4DEEC; border-radius: 99px; background: #fff;
  font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .14em; text-transform: uppercase; color: var(--vi-navy); }
html body #main .v7a-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--vi-blue); }
html body #main .v7a .v7a-h1 { margin: 20px 0 16px !important; font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 56px !important;
  line-height: 1.04 !important; letter-spacing: -.025em !important; text-transform: none !important; color: var(--vi-navy) !important; }
html body #main .v7a-h1 span { color: var(--vi-blue); }
html body #main .v7a-lead { max-width: 620px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--vi-mute); }
html body #main .v7a-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
html body #main .v7a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px;
  font: 700 15px/1.2 var(--vi-hf); text-decoration: none !important; transition: background .15s, border-color .15s; }
html body #main .v7a-btn--dark { background: var(--vi-navy); border: 1.5px solid var(--vi-navy); color: #fff !important; }
html body #main .v7a-btn--dark:hover { background: #13296A; }
html body #main .v7a-btn--line { background: #fff; border: 1.5px solid #CBD5E3; color: var(--vi-navy) !important; }
html body #main .v7a-btn--line:hover { border-color: var(--vi-navy); }
html body #main .v7a-btn:focus-visible { outline: 3px solid var(--vi-blue); outline-offset: 2px; }
html body #main .v7a-body { padding: 60px 0 72px; }
html body #main .v7a-eyebrow { margin: 0; font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .18em; text-transform: uppercase; color: var(--vi-blue); }
html body #main .v7a .v7a-h2 { margin: 8px 0 6px !important; font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 30px !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
html body #main .v7a .v7a-h2--big { font-size: 42px !important; margin-top: 10px !important; }
html body #main .v7a-sub { max-width: 760px; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--vi-mute); }
html body #main .v7a-sub b { color: var(--vi-navy); }
html body #main .v7a-fine { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: #6E7B90; }
html body #main .v7a-fine a { color: var(--vi-blue); font-weight: 600; text-decoration: none; }
/* earnings example */
html body #main .v7a-calc { scroll-margin-top: 110px; padding: 28px; background: #fff; border: 1px solid var(--vi-line); border-radius: 22px; }
html body #main .v7a-calc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; }
html body #main .v7a-calc-top label { font-size: 14px; color: var(--vi-mute); }
html body #main .v7a-calc-top output { font: 800 28px/1 var(--vi-hf); letter-spacing: -.01em; color: var(--vi-navy); }
html body #main .v7a-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 8px 0 0; padding: 0; background: none; border: 0; cursor: pointer; }
html body #main .v7a-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--vi-blue) 0 var(--v7a-fill, 0%), var(--vi-line) var(--v7a-fill, 0%) 100%); }
html body #main .v7a-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 3px solid var(--vi-blue); box-shadow: 0 2px 6px rgba(11,29,74,.18); }
html body #main .v7a-range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--vi-line); }
html body #main .v7a-range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--vi-blue); }
html body #main .v7a-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--vi-blue); }
html body #main .v7a-range:focus { outline: none; }
html body #main .v7a-range:focus-visible { outline: 3px solid var(--vi-blue); outline-offset: 4px; border-radius: 8px; }
html body #main .v7a-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--vi-mute); }
html body #main .v7a-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
html body #main .v7a-out { padding: 16px; border: 1px solid var(--vi-line); border-radius: 16px; text-align: center; }
html body #main .v7a-out small { display: block; font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .14em; text-transform: uppercase; color: var(--vi-mute); }
html body #main .v7a-out b { display: block; margin-top: 6px; font: 800 26px/1.15 var(--vi-hf); letter-spacing: -.01em; color: var(--vi-navy); }
html body #main .v7a-out span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--vi-mute); }
/* how it works */
html body #main .v7a-shead { margin: 64px 0 28px; }
html body #main .v7a-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body #main .v7a-hw { position: relative; padding: 24px; background: #fff; border: 1px solid var(--vi-line); border-radius: 20px; }
html body #main .v7a-n { position: absolute; right: 20px; top: 14px; font: 800 44px/1 var(--vi-hf); color: #EEF3F9; -webkit-text-fill-color: #EEF3F9; }
html body #main .v7a-ib { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--vi-soft); }
html body #main .v7a-ib svg { width: 20px; height: 20px; fill: none; stroke: var(--vi-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body #main .v7a-hw h3 { position: relative; margin: 0 0 8px; font: 700 17px/1.3 var(--vi-hf); letter-spacing: -.01em; text-transform: none; color: var(--vi-navy); }
html body #main .v7a-hw p { position: relative; margin: 0; font-size: 14px; line-height: 1.6; color: var(--vi-mute); }
/* apply panel */
html body #main .v7a-panel { scroll-margin-top: 110px; margin-top: 40px; padding: 34px; background: #fff; border: 1px solid var(--vi-line); border-radius: 22px; }
html body #main .v7a-panel.is-pending { background: var(--vi-soft); border-color: #CFE2F6; }
html body #main .v7a-panel .v7a-cta { margin-top: 22px; }
html body #main .v7a-code { font: 700 .95em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--vi-navy); }
html body #main .v7a-link { overflow-wrap: anywhere; color: var(--vi-text); }
/* questions */
html body #main .v7a-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
html body #main .v7a-q { padding: 0 20px; background: #fff; border: 1px solid var(--vi-line); border-radius: 16px; }
html body #main .v7a-q summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: 16px 30px 16px 0; cursor: pointer; list-style: none;
  font: 700 15.5px/1.35 var(--vi-hf); color: var(--vi-navy); }
html body #main .v7a-q summary::-webkit-details-marker { display: none; }
html body #main .v7a-q summary::before, html body #main .v7a-q summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 13px; height: 2px;
  margin-top: -1px; border-radius: 2px; background: var(--vi-blue); transition: transform .2s; }
html body #main .v7a-q summary::after { transform: rotate(90deg); }
html body #main .v7a-q[open] summary::after { transform: rotate(0); }
html body #main .v7a-q summary:focus-visible { outline: 3px solid var(--vi-blue); outline-offset: 2px; border-radius: 8px; }
html body #main .v7a-q p { margin: 0; padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--vi-mute); }
html body #main .v7a-fine--end { margin-top: 28px; }
@media (max-width: 860px) {
  html body #main .v7a-how, html body #main .v7a-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html body #main .v7a-wrap { padding: 0 16px; }
  html body #main .v7a-head { padding: 16px 0 36px; }
  html body #main .v7a-crumb a { display: inline-block; padding: 10px 0; }
  html body #main .v7a-crumb { margin-bottom: 8px; }
  html body #main .v7a .v7a-h1 { font-size: 40px !important; margin: 16px 0 12px !important; }
  html body #main .v7a-lead { font-size: 15.5px; }
  html body #main .v7a-cta .v7a-btn { flex: 1 1 auto; padding: 0 16px; }
  html body #main .v7a-body { padding: 36px 0 52px; }
  html body #main .v7a-calc, html body #main .v7a-panel { padding: 22px; }
  html body #main .v7a .v7a-h2 { font-size: 26px !important; }
  html body #main .v7a .v7a-h2--big { font-size: 30px !important; }
  html body #main .v7a-outs { grid-template-columns: minmax(0, 1fr); }
  html body #main .v7a-shead { margin: 44px 0 20px; }
}

/* ================================================================ about (/about: inline-styled markup) */
:root:has(link[rel="canonical"][href$="/about"]) #main > section { padding: 72px 0 !important; background: #fff !important; color: var(--vi-ink) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section > .container { max-width: calc(1200px + 2 * var(--gutter, 24px)) !important; padding: 0 var(--gutter, 24px); }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(odd):not(:first-child) { background: var(--vi-bg) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section div[style*="font-mono"] { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .18em !important;
  text-transform: uppercase; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section h2 { font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 38px !important;
  line-height: 1.12 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section p { color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section p a { color: var(--vi-blue) !important; }
/* hero: soft band, navy headline, product vials on the right */
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child { padding: 64px 0 72px !important; background: var(--vi-bg) !important;
  border-bottom: 1px solid var(--vi-line); overflow: hidden; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child > .container { position: relative; display: flex; flex-direction: column; justify-content: center; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child > .container > * { position: relative; z-index: 1; max-width: 560px !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child div[style*="font-mono"] { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px !important; padding: 7px 14px; background: #fff; border: 1px solid #D4DEEC; border-radius: 99px; letter-spacing: .14em !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child div[style*="font-mono"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vi-blue); }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child h1 { margin: 0 0 18px !important; font-family: var(--vi-hf) !important; font-weight: 800 !important;
  font-size: 52px !important; line-height: 1.05 !important; letter-spacing: -.025em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child h1 span { color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child p { margin: 0 !important; font-size: 17px !important; line-height: 1.65 !important; }
@media (min-width: 900px) {
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child > .container { min-height: 400px; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child > .container::before { content: ""; position: absolute; z-index: 0; right: var(--gutter, 24px); top: 0; bottom: 0;
    width: 44%; border-radius: 24px; border: 1px solid var(--vi-line); background: linear-gradient(180deg, #fff, #E7EFF9); }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child > .container::after { content: ""; position: absolute; z-index: 0; right: var(--gutter, 24px); top: 0; bottom: 0;
    width: 44%; filter: drop-shadow(0 22px 26px rgba(11,29,74,.18));
    background: url("/static/img/v5/ghk-cu.webp") 18% 82% / auto 56% no-repeat, url("/static/img/v5/wolverine.webp") 82% 82% / auto 56% no-repeat,
      url("/static/img/v5/glp-3-rt.webp") 50% 78% / auto 74% no-repeat; }
}
/* mission + figures */
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(2) div[style*="grid-template-columns: 1fr 1fr"] > div { background: #fff !important;
  border: 1px solid var(--vi-line) !important; border-radius: 18px !important; padding: 22px !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(2) div[style*="grid-template-columns: 1fr 1fr"] > div > div:first-child {
  font: 800 32px/1.1 var(--vi-hf) !important; letter-spacing: -.02em; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(2) div[style*="grid-template-columns: 1fr 1fr"] > div > div + div { font-size: 13px !important; color: var(--vi-mute) !important; }
/* the three figures share one row (site-v2 makes 3 columns, but the third tile's inline "span 2" left a hole) */
@media (min-width: 640px) { :root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(2) div[style*="grid-template-columns: 1fr 1fr"] > div[style*="span 2"] { grid-column: auto !important; } }
/* values + location cards */
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(3) div[style*="auto-fit"] > div,
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: white"] { background: #fff !important;
  border: 1px solid var(--vi-line) !important; border-radius: 20px !important; padding: 24px !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(3) div[style*="auto-fit"] > div > div[style*="font-display"] {
  font: 700 17px/1.3 var(--vi-hf) !important; letter-spacing: -.01em; text-transform: none !important; color: var(--vi-navy) !important; margin-bottom: 8px !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(3) div[style*="auto-fit"] p { font-size: 14px !important; line-height: 1.6 !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) li div[style*="font-size: 15px"],
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) li a { font: 700 15px/1.45 var(--vi-hf) !important; color: var(--vi-navy) !important; text-decoration: none !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) li div[style*="#c44"] { font-size: 12.5px !important; color: var(--vi-mute) !important; }
/* the navy "100% domestic" card */
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] { background: linear-gradient(160deg, var(--vi-navy), var(--vi-navy2)) !important;
  border-radius: 24px !important; color: #fff !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] div[style*="font-display"] { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important;
  letter-spacing: .18em !important; color: var(--vi-sky) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] h3 { font-family: var(--vi-hf) !important; font-weight: 800 !important;
  letter-spacing: -.02em !important; text-transform: none !important; color: #fff !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] p,
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] li { color: #C9D6EC !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] li span[style*="accent"] { color: var(--vi-sky) !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) a[href="/products"] { display: inline-flex !important; align-items: center; min-height: 48px;
  padding: 0 22px !important; border-radius: 12px !important; background: #fff !important; color: var(--vi-navy) !important; font: 700 15px var(--vi-hf) !important; text-decoration: none !important; }
:root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) a[href="/contact"] { display: inline-flex !important; align-items: center; min-height: 48px;
  padding: 0 22px !important; border: 1.5px solid rgba(255,255,255,.3); border-radius: 12px; color: #fff !important; font: 700 15px var(--vi-hf) !important; text-decoration: none !important; }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"][href$="/about"]) #main > section { padding: 48px 0 !important; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section > .container { padding: 0 16px; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child { padding: 36px 0 44px !important; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child h1 { font-size: 38px !important; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:first-child p { font-size: 15.5px !important; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section h2 { font-size: 28px !important; }
  :root:has(link[rel="canonical"][href$="/about"]) #main > section:nth-of-type(4) div[style*="background: var(--ink)"] { padding: 28px 22px !important; }
}

/* ================================================================ FAQ lists (about + contact): rounded cards */
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main > section > .container > div:has(> details.faq-item),
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main > section > .container > div:has(+ div > details.faq-item) { padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main > section > .container > div:has(+ div > details.faq-item) { max-width: none !important; margin: 0 0 32px !important; text-align: center !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main > section > .container > div:has(> details.faq-item) { max-width: 880px !important; margin: 0 auto !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item { margin: 0 0 10px !important; padding: 0 20px !important; background: #fff !important;
  border: 1px solid var(--vi-line) !important; border-radius: 16px !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item summary { position: relative; display: flex !important; align-items: center; gap: 16px; min-height: 56px; margin: 0 !important;
  padding: 16px 30px 16px 0 !important; font: 700 15.5px/1.4 var(--vi-hf) !important; letter-spacing: -.005em; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item summary::after { content: "+" !important; position: absolute; right: 0; top: 50%; transform: translateY(-50%) !important;
  font: 500 22px/1 var(--vi-bf) !important; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item[open] > summary::after { content: "\2212" !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item p { margin: 0 !important; padding: 0 0 18px !important; font: 400 14.5px/1.65 var(--vi-bf) !important; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item p + p { margin-top: -6px !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item p a { color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"])) #main details.faq-item p a[href="/calculator"] { display: inline-flex !important; align-items: center;
  min-height: 44px; padding: 0 18px !important; border-radius: 12px !important; background: var(--vi-navy) !important; color: #fff !important;
  font: 700 14px var(--vi-hf) !important; text-decoration: none !important; }

/* ================================================================ contact (/contact) */
:root:has(link[rel="canonical"][href$="/contact"]) #main > section { padding: 48px 0 64px !important; background: #fff !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main > section:last-child { padding: 56px 0 72px !important; background: var(--vi-bg) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main > section > .container { max-width: calc(1200px + 2 * var(--gutter, 24px)) !important; padding: 0 var(--gutter, 24px); }
:root:has(link[rel="canonical"][href$="/contact"]) #main .two-col-page-grid.contact-variant { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant h2 { margin: 0 0 16px !important; font: 800 22px/1.2 var(--vi-hf) !important;
  letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul { gap: 12px !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li { position: relative; padding: 16px 18px 16px 72px; background: #fff;
  border: 1px solid var(--vi-line); border-radius: 16px; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li::before { content: ""; position: absolute; left: 18px; top: 16px; width: 40px; height: 40px;
  border-radius: 12px; background-color: var(--vi-soft); background-position: center; background-repeat: no-repeat; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E"); }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li > div[style*="font-mono"] { margin: 0 0 4px !important; font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important;
  letter-spacing: .14em !important; text-transform: uppercase; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li > div[style*="font-size: 15px"],
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li > a { font: 700 15px/1.45 var(--vi-hf) !important; color: var(--vi-navy) !important;
  text-decoration: none !important; overflow-wrap: anywhere; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant ul > li > div[style*="#c44"] { font-size: 13px !important; color: var(--vi-mute) !important; }
/* the form panel */
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant form { padding: 34px; background: #fff; border: 1px solid var(--vi-line); border-radius: 22px; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-grid { gap: 0 16px; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-row { gap: 7px; margin-bottom: 16px; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-row label,
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card .form-row label { font: 600 13px/1.3 var(--vi-bf) !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-row :is(input, textarea),
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card .form-row input { width: 100%; min-height: 48px; padding: 12px 14px !important;
  border: 1px solid var(--vi-field) !important; border-radius: 12px !important; background: #fff !important; font: 400 15px/1.4 var(--vi-bf) !important;
  color: var(--vi-ink) !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-row textarea { min-height: 140px; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-row :is(input, textarea):focus,
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card .form-row input:focus { outline: none; border-color: var(--vi-navy) !important;
  box-shadow: 0 0 0 3px rgba(11,29,74,.12) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant form button.btn,
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card form button.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px;
  margin-top: 4px; padding: 0 22px !important; border: 0 !important; border-radius: 14px !important; background: var(--vi-navy) !important; color: #fff !important;
  font: 800 16px/1 var(--vi-hf) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transform: none !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant form button.btn:hover,
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card form button.btn:hover { background: #13296A !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main > section:last-child h2 { font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 36px !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main > section:last-child div[style*="font-mono"] { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .18em !important;
  text-transform: uppercase; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href$="/contact"]) #main .alert { border-radius: 14px; }
@media (max-width: 900px) { :root:has(link[rel="canonical"][href$="/contact"]) #main .two-col-page-grid.contact-variant { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"][href$="/contact"]) #main > section, :root:has(link[rel="canonical"][href$="/contact"]) #main > section:last-child { padding: 32px 0 44px !important; }
  :root:has(link[rel="canonical"][href$="/contact"]) #main > section > .container { padding: 0 16px; }
  :root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant form { padding: 22px; }
  :root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-grid { grid-template-columns: minmax(0, 1fr); }
  :root:has(link[rel="canonical"][href$="/contact"]) #main .contact-variant .form-row :is(input, textarea) { font-size: 16px !important; }
  :root:has(link[rel="canonical"][href$="/contact"]) #main > section:last-child h2 { font-size: 28px !important; }
}

/* ================================================================ track (/track: lookup form + result) */
:root:has(link[rel="canonical"][href$="/track"]) #main > section { padding: 48px 0 72px !important; background: #fff; }
:root:has(link[rel="canonical"][href$="/track"]) #main > section > .container { padding: 0 24px; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card { padding: 36px !important; background: #fff !important; color: var(--vi-ink) !important;
  border: 1px solid var(--vi-line) !important; border-radius: 22px !important; box-shadow: none !important; animation: none; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card::before, :root:has(link[rel="canonical"][href$="/track"]) #main .admin-card::after { display: none !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card .form-row input::placeholder { color: #97A3B6; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card small { font-size: 12.5px !important; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="border-top: 1px solid var(--line)"] { border-top-color: var(--vi-line) !important; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card a[style*="2563eb"] { color: var(--vi-blue) !important; font-weight: 700; text-decoration: none; }
/* result: order number, status pill, timeline, tracking box, items, total */
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="font-mono"][style*="11px"] { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .14em !important;
  color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="font-display"] { font-family: var(--vi-hf) !important; font-weight: 800 !important;
  letter-spacing: -.01em; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card span[style*="text-transform: uppercase"] { display: inline-block; padding: 6px 12px !important;
  border-radius: 99px !important; font: 700 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .04em !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card span[style*="#0f7a3a"], :root:has(link[rel="canonical"][href$="/track"]) #main .admin-card span[style*="#d4edda"] {
  background: #E8F7F0 !important; color: var(--vi-green) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card span[style*="#fff3cd"] { background: #FFF4E0 !important; color: #9A6200 !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card span[style*="#e9ecef"] { background: var(--vi-soft) !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-line { margin: 8px 0 30px; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-track { height: 4px; background: var(--vi-line) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-fill { background: var(--vi-blue) !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-node i { width: 16px; height: 16px; margin-top: -10px; background: #fff !important; border: 3px solid var(--vi-line) !important;
  box-shadow: none !important; animation: none !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-node.on i { background: var(--vi-blue) !important; border-color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-node span { font: 600 12px/1.2 var(--vi-bf) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-node.on span { font-family: var(--vi-hf) !important; font-weight: 700 !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card div[style*="paper-2"] { background: var(--vi-soft) !important; border: 1px solid #CFE2F6 !important; border-radius: 14px !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card div[style*="paper-2"] div { color: var(--vi-mute) !important; text-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card div[style*="paper-2"] div[style*="16px"] { color: var(--vi-navy) !important; font-size: 17px !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-copy { min-height: 40px; padding: 0 14px; border: 1.5px solid #CBD5E3; border-radius: 10px; background: #fff;
  font: 600 12.5px/1 var(--vi-bf); letter-spacing: 0; text-transform: none; color: var(--vi-navy); }
:root:has(link[rel="canonical"][href$="/track"]) #main .tx-copy:hover { border-color: var(--vi-navy); background: #fff; color: var(--vi-navy); }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="fff8e1"] { background: #FFF8EB !important; border-left: 0 !important; border: 1px solid #F3DDB0 !important;
  border-radius: 14px !important; color: #6B4A00 !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="border-bottom: 1px solid var(--line)"] { border-bottom-color: var(--vi-line) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="border-top: 2px solid var(--ink)"] { border-top: 1px solid var(--vi-line) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card [style*="white-space: nowrap"] { color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card a.btn { min-height: 48px; padding: 0 22px; border-radius: 12px !important; font: 700 15px var(--vi-hf) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card a.btn.btn-secondary:first-child { background: var(--vi-navy) !important; border: 1.5px solid var(--vi-navy) !important; color: #fff !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card a.btn.btn-secondary + a.btn.btn-secondary { background: #fff !important; border: 1.5px solid #CBD5E3 !important;
  color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card a.btn.btn-secondary + a.btn.btn-secondary:hover { border-color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/track"]) #main .admin-card .alert-error { border-radius: 14px; }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"][href$="/track"]) #main > section { padding: 28px 0 48px !important; }
  :root:has(link[rel="canonical"][href$="/track"]) #main > section > .container { padding: 0 16px; }
  :root:has(link[rel="canonical"][href$="/track"]) #main .admin-card { padding: 22px !important; }
  :root:has(link[rel="canonical"][href$="/track"]) #main .admin-card .form-row input { font-size: 16px !important; }
  :root:has(link[rel="canonical"][href$="/track"]) #main .tx-node span { font-size: var(--vi-xs) !important; }
}

/* ================================================================ policy pages (/page/*) */
:root:has(link[rel="canonical"][href*="/page/"]) #main > section { padding: 44px 0 72px !important; background: #fff; }
:root:has(link[rel="canonical"][href*="/page/"]) #main > section > .container { max-width: calc(1200px + 2 * var(--gutter, 24px)) !important; margin: 0 auto !important; padding: 0 var(--gutter, 24px); }
:root:has(link[rel="canonical"][href*="/page/"]) #main > section > .container > * { max-width: 860px; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content { padding: 40px 44px; background: #fff; border: 1px solid var(--vi-line); border-radius: 22px;
  font: 400 15.5px/1.75 var(--vi-bf); color: var(--vi-text); overflow-wrap: break-word; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content :is(h1, h2, h3, h4) { margin: 1.8em 0 .6em; font-family: var(--vi-hf) !important; font-weight: 800 !important;
  letter-spacing: -.015em !important; line-height: 1.25 !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content > :first-child { margin-top: 0; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content h2 { font-size: 24px !important; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content h3 { font-size: 18px !important; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content h4 { font-size: 16px !important; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content :is(h2, h3, h4) strong { font-weight: inherit; color: inherit; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content p { margin: 0 0 1em; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content strong { color: var(--vi-navy); font-weight: 700; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content a { color: var(--vi-blue) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* links in the policy text flow with the sentence (home-v2.css made them unbreakable inline-blocks: a long address pushed the 360px page sideways) */
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content p a { display: inline; padding: 0; margin: 0; overflow-wrap: anywhere; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.3em; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content li { margin: 0 0 .45em; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content li::marker { color: var(--vi-blue); }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 14px; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content :is(th, td) { padding: 10px 12px; border: 1px solid var(--vi-line); text-align: left; vertical-align: top; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content th { background: var(--vi-bg); color: var(--vi-navy); }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content hr { border: 0; border-top: 1px solid var(--vi-line); margin: 2em 0; }
:root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content blockquote { margin: 0 0 1em; padding: 14px 18px; background: var(--vi-soft); border-radius: 14px; border: 0; }
:root:has(link[rel="canonical"][href*="/page/"]) #main > section p[style*="font-mono"] { font: 500 12.5px/1.5 var(--vi-bf) !important; letter-spacing: 0 !important; color: var(--vi-mute) !important; }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"][href*="/page/"]) #main > section { padding: 24px 0 48px !important; }
  :root:has(link[rel="canonical"][href*="/page/"]) #main > section > .container { padding: 0 16px; }
  :root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content { padding: 22px 18px; font-size: 15px; }
  :root:has(link[rel="canonical"][href*="/page/"]) #main .rich-content table { display: block; overflow-x: auto; }
}

/* ================================================================ 404 */
html body #main > section[style^="padding: 100px 0 80px"] { padding: 80px 0 88px !important; background: var(--vi-bg); border-bottom: 1px solid var(--vi-line); }
html body #main > section[style^="padding: 100px 0 80px"] > .container > div[style*="font-mono"]:first-child { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .18em !important;
  color: var(--vi-blue) !important; }
html body #main > section[style^="padding: 100px 0 80px"] h1 { font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 56px !important; line-height: 1.05 !important;
  letter-spacing: -.025em !important; text-transform: none !important; color: var(--vi-navy) !important; }
html body #main > section[style^="padding: 100px 0 80px"] p { color: var(--vi-mute) !important; font-size: 16.5px !important; }
html body #main > section[style^="padding: 100px 0 80px"] a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px !important;
  border-radius: 12px !important; font: 700 15px/1 var(--vi-hf) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; }
html body #main > section[style^="padding: 100px 0 80px"] a.btn:not(.btn-secondary) { background: var(--vi-navy) !important; border: 1.5px solid var(--vi-navy) !important; color: #fff !important; }
html body #main > section[style^="padding: 100px 0 80px"] a.btn.btn-secondary { background: #fff !important; border: 1.5px solid #CBD5E3 !important; color: var(--vi-navy) !important; }
html body #main > section[style^="padding: 100px 0 80px"] div[style*="border-top"] { border-top-color: var(--vi-line) !important; }
html body #main > section[style^="padding: 100px 0 80px"] div[style*="border-top"] > div:first-child { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .16em !important; color: var(--vi-mute) !important; }
html body #main > section[style^="padding: 100px 0 80px"] div[style*="gap: 28px"] { gap: 10px !important; }
html body #main > section[style^="padding: 100px 0 80px"] div[style*="gap: 28px"] a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  background: #fff; border: 1px solid var(--vi-line); border-radius: 99px; font: 600 14px var(--vi-bf); color: var(--vi-navy) !important; text-decoration: none !important; }
html body #main > section[style^="padding: 100px 0 80px"] div[style*="gap: 28px"] a:hover { border-color: var(--vi-navy); }
@media (max-width: 760px) {
  html body #main > section[style^="padding: 100px 0 80px"] { padding: 48px 0 56px !important; }
  html body #main > section[style^="padding: 100px 0 80px"] > .container { padding: 0 16px; }
  html body #main > section[style^="padding: 100px 0 80px"] h1 { font-size: 40px !important; }
}

/* ================================================================ calculator (/calculator) */
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-wrapper > * { min-width: 0; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-wrapper { max-width: calc(1200px + 2 * var(--gutter, 24px)); margin-left: auto; margin-right: auto; padding-left: var(--gutter, 24px); padding-right: var(--gutter, 24px); gap: 24px; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-card { padding: 28px !important; background: #fff !important; border: 1px solid var(--vi-line) !important; border-radius: 22px !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-input-box { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-input-box label { display: block; margin: 0 0 7px; padding: 0; background: none; border: 0;
  font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .12em; color: var(--vi-navy); }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-input-box :is(input, select) { width: 100%; height: 48px !important; padding: 0 14px !important; border: 1px solid var(--vi-field) !important;
  border-radius: 12px !important; background-color: #fff !important; font: 500 15px var(--vi-bf) !important; color: var(--vi-ink) !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-input-box :is(input, select):focus { outline: none; border-color: var(--vi-navy) !important; box-shadow: 0 0 0 3px rgba(11,29,74,.12) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-result { border-radius: 18px !important; border: 0 !important; background: linear-gradient(160deg, var(--vi-navy), var(--vi-navy2)) !important; color: #fff; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-result h2 { font-family: var(--vi-hf) !important; font-weight: 800 !important; font-size: 36px !important;
  letter-spacing: -.02em !important; text-transform: none !important; color: #fff !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-details { color: #B7C6E2; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-good { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #fff; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-track { background: rgba(255,255,255,.06); border-radius: 10px; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-fill-bar { background: rgba(42,130,212,.45) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-needle { background: var(--vi-sky); }
/* the "what you'll need" side panel: stays navy; its product cards are styled in shop.css */
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shop { border: 0 !important; border-radius: 22px !important; background: linear-gradient(160deg, var(--vi-navy), var(--vi-navy2)) !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shop-h { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .16em !important; color: var(--vi-sky) !important; border-color: rgba(255,255,255,.12) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #calc-recs-k { color: var(--vi-sky) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-rec-row { border-radius: 12px !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-rec-name { font-family: var(--vi-hf) !important; font-weight: 700 !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-bundle-p { font-family: var(--vi-hf) !important; font-weight: 800 !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-trust-i { border-radius: 12px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #B7C6E2 !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-trust-i b { font-family: var(--vi-hf) !important; color: #fff !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shop .calc-add:not(:disabled) { min-height: 44px; border-radius: 12px !important; background: var(--vi-navy) !important; border-color: var(--vi-navy) !important; color: #fff !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main :is(.calc-copy, .calc-browse) { min-height: 44px; border-radius: 12px !important; font-family: var(--vi-hf) !important; font-weight: 700 !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-browse, :root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-browse span { color: #fff !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-browse span { margin-left: 6px; }
/* water strip and the 10% email box inside the card */
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cb-strip { border: 1px solid #CFE2F6 !important; border-radius: 16px !important; background: var(--vi-soft) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cb-strip .cb-n { font-family: var(--vi-hf) !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cb-strip #cb-btn, :root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-ec #cs-ec-b, :root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-both #cs-both-btn { min-height: 48px; border-radius: 12px !important; background: var(--vi-navy) !important;
  border-color: var(--vi-navy) !important; color: #fff !important; font-family: var(--vi-hf) !important; font-weight: 700 !important; box-shadow: none !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cb-strip #cb-btn:hover, :root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-ec #cs-ec-b:hover, :root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-both #cs-both-btn:hover { background: #13296A !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-ec { border: 1px solid var(--vi-line) !important; border-radius: 18px !important; background: var(--vi-bg) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-ec .cs-ec-t { font-family: var(--vi-hf) !important; font-weight: 800 !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-ec #cs-ec-e { min-height: 48px; border: 1px solid var(--vi-field) !important; border-radius: 12px !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main #cs-both { border-radius: 16px !important; }
/* peptide links + the how-to guide */
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shoplinks, :root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding-left: var(--gutter, 24px) !important; padding-right: var(--gutter, 24px) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shoplinks h2, :root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg h2 { font-family: var(--vi-hf) !important;
  font-weight: 800 !important; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg h3 { font-family: var(--vi-hf) !important; font-weight: 700 !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shoplinks a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: #fff;
  border: 1px solid var(--vi-line); border-radius: 99px; font: 600 13px var(--vi-bf); color: var(--vi-text) !important; text-decoration: none !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shoplinks a:hover { border-color: var(--vi-navy); color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg :is(p, li) { color: var(--vi-text); }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg a { color: var(--vi-blue); }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg-formula { background: var(--vi-soft); border: 1px solid #CFE2F6; border-radius: 14px; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg-tablewrap { border: 1px solid var(--vi-line); border-radius: 16px; overflow: auto; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg th { background: var(--vi-bg); color: var(--vi-navy); }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg-links a { border-color: var(--vi-line); border-radius: 14px; color: var(--vi-navy); }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg-faq details { margin: 0 0 10px; padding: 0 20px; background: #fff; border: 1px solid var(--vi-line); border-radius: 16px; }
:root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg-faq summary { min-height: 52px; font: 700 15px/1.35 var(--vi-hf); color: var(--vi-navy); }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-wrapper { padding-left: 16px; padding-right: 16px; }
  :root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-card { padding: 18px; }
  :root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-input-box :is(input, select) { font-size: 16px; }
  :root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shoplinks, :root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg { padding-left: 16px; padding-right: 16px; }
  :root:has(link[rel="canonical"][href$="/calculator"]) #main .calc-shoplinks h2, :root:has(link[rel="canonical"][href$="/calculator"]) #main .pcg h2 { font-size: 24px !important; }
}

/* ================================================================ research (/research) and articles (/research/<post>) */
:root:has(link[rel="canonical"][href$="/research"]) #main > div.container { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 18px var(--gutter, 24px) !important; border-bottom: 0 !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main > div.container span[style*="font-mono"] { font: 600 var(--vi-xs)/1.2 var(--vi-bf) !important; letter-spacing: .16em !important; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main .cat-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: #fff; border: 1px solid var(--vi-line); border-radius: 99px;
  font: 600 13px var(--vi-bf); color: var(--vi-text); text-decoration: none; }
:root:has(link[rel="canonical"][href$="/research"]) #main .cat-pill:hover { border-color: var(--vi-navy); color: var(--vi-navy); }
:root:has(link[rel="canonical"][href$="/research"]) #main .cat-pill.active { background: var(--vi-navy); border-color: var(--vi-navy); color: #fff; }
:root:has(link[rel="canonical"][href$="/research"]) #main > section:not(.page-hero) { padding: 20px 0 72px !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main > section:not(.page-hero) > .container { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 0 var(--gutter, 24px); }
:root:has(link[rel="canonical"][href$="/research"]) #main > section:not(.page-hero) div[style*="auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 20px !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main article { padding: 12px 12px 20px; background: #fff; border: 1px solid var(--vi-line); border-radius: 20px; transition: box-shadow .2s, transform .2s; }
:root:has(link[rel="canonical"][href$="/research"]) #main article:hover { box-shadow: 0 14px 34px rgba(11,29,74,.10); transform: translateY(-2px); }
:root:has(link[rel="canonical"][href$="/research"]) #main article a > div:first-child { margin-bottom: 16px !important; border-radius: 14px !important; background: var(--vi-bg) !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main article div[style*="font-mono"] { margin: 0 8px 8px !important; font: 600 var(--vi-xs)/1.3 var(--vi-bf) !important; letter-spacing: .12em !important; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main article h2 { margin: 0 8px 8px !important; font-family: var(--vi-hf) !important; font-weight: 700 !important; font-size: 18px !important;
  line-height: 1.35 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href$="/research"]) #main article p { margin: 0 8px !important; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--vi-mute) !important; }
/* an article */
:root:has(link[rel="canonical"][href*="/research/"]) #main > article.container,
:root:has(link[rel="canonical"][href*="/compare/"]) #main > article.container { padding-top: 28px !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main > article header div[style*="font-mono"] { font: 600 var(--vi-xs)/1.4 var(--vi-bf) !important;
  letter-spacing: .14em !important; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main > article header h1 { font-family: var(--vi-hf) !important; font-weight: 800 !important;
  font-size: 42px !important; line-height: 1.1 !important; letter-spacing: -.025em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main > article header p { font-size: 18px !important; line-height: 1.6 !important; color: var(--vi-mute) !important; }
:root:has(link[rel="canonical"][href*="/research/"]) #main > article > div[style*="border-radius: 4px"] { border-radius: 20px !important; border: 1px solid var(--vi-line); }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) { font-family: var(--vi-bf); color: var(--vi-text) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) h2 { margin: 1.7em 0 .55em; font-family: var(--vi-hf) !important;
  font-weight: 800 !important; font-size: 27px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) h3 { margin: 1.5em 0 .5em; font-family: var(--vi-hf) !important;
  font-weight: 700 !important; font-size: 19px !important; line-height: 1.3 !important; letter-spacing: -.01em; text-transform: none !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) strong { color: var(--vi-navy); }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) a:not(.btn):not([class*="pab"]) { color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) code { padding: 2px 6px; border-radius: 6px; background: var(--vi-soft);
  font-size: .88em; color: var(--vi-navy); overflow-wrap: anywhere; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) blockquote { margin: 1.4em 0; padding: 16px 20px; border: 0;
  border-radius: 16px; background: var(--vi-soft); color: #1B3A6B; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) table:not(.comparison-table) { border-collapse: collapse; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) :is(th, td) { border-color: var(--vi-line); }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) th { background: var(--vi-bg); color: var(--vi-navy); }
/* product boxes inside articles */
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab { border: 1px solid var(--vi-line); border-radius: 18px; background: #fff; box-shadow: none; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-img { border-radius: 12px; background: linear-gradient(180deg, #F2F6FB, #E6EEF8); }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.pab-n, .pab-h) { font-family: var(--vi-hf) !important; font-weight: 700 !important; text-transform: none !important; color: var(--vi-navy) !important; letter-spacing: -.01em; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-sz { color: var(--vi-mute); }
/* comparison pages: the "Shop these products" box sits outside the prose, so it got the page-wide 38px h2; same size as on articles */
:root:has(link[rel="canonical"][href*="/compare/"]) #main .pab h2.pab-h { font-size: 27px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
@media (max-width: 760px) { :root:has(link[rel="canonical"][href*="/compare/"]) #main .pab h2.pab-h { font-size: 23px !important; } }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-p b { font-family: var(--vi-hf); font-weight: 800; color: var(--vi-navy); }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-btn { min-height: 44px; border: 0; border-radius: 12px; background: var(--vi-navy); color: #fff; font: 700 14px var(--vi-hf); letter-spacing: 0; text-transform: none; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-btn:hover { background: #13296A; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.pab-l, .pab-coa-in, .pab-g) { color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.pab-ruo, .pab-checks) { color: var(--vi-mute); }
@media (max-width: 760px) { :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-checks a.pab-g { display: inline-flex; align-items: center; min-height: 40px; } }   /* phone tap height */
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) > :first-child, :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab h2, :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .compare-section > h2:first-child,
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .compare-section > h3:first-child { margin-top: 0 !important; }
:root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-coa-in, :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main .pab-l { display: inline-flex; align-items: center; min-height: 32px; }
/* "related reading" at the end of an article */
:root:has(link[rel="canonical"][href*="/research/"]) #main .section-title { max-width: none !important; margin: 0 auto !important; text-align: center !important; font-family: var(--vi-hf) !important; font-weight: 800 !important;
  text-transform: none !important; letter-spacing: -.02em !important; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href*="/research/"]) #main .section-title em { font: inherit !important; font-style: normal !important; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href*="/research/"]) #main > section[style*="paper-2"] { background: var(--vi-bg) !important; }
:root:has(link[rel="canonical"][href*="/research/"]) #main > section[style*="paper-2"] a[style*="padding: 20px"] { padding: 22px !important; background: #fff !important; border: 1px solid var(--vi-line); border-radius: 18px !important;
  transition: box-shadow .2s, transform .2s; }
:root:has(link[rel="canonical"][href*="/research/"]) #main > section[style*="paper-2"] a[style*="padding: 20px"]:hover { box-shadow: 0 14px 34px rgba(11,29,74,.10); transform: translateY(-2px); }
:root:has(link[rel="canonical"][href*="/research/"]) #main > section[style*="paper-2"] a[style*="padding: 20px"] > div { font: 600 12px/1.3 var(--vi-bf) !important; letter-spacing: .12em !important; color: var(--vi-blue) !important; }
:root:has(link[rel="canonical"][href*="/research/"]) #main > section[style*="paper-2"] a[style*="padding: 20px"] h3 { font: 700 17px/1.35 var(--vi-hf) !important; letter-spacing: -.01em; color: var(--vi-navy) !important; }
:root:has(link[rel="canonical"][href*="/research/"]) #main > section[style*="paper-2"] a[style*="padding: 20px"] p { font-size: 13.5px !important; color: var(--vi-mute) !important; }
@media (max-width: 760px) {
  :root:has(link[rel="canonical"][href$="/research"]) #main > div.container, :root:has(link[rel="canonical"][href$="/research"]) #main > section:not(.page-hero) > .container { padding-left: 16px !important; padding-right: 16px !important; }
  :root:has(link[rel="canonical"][href$="/research"]) #main > section:not(.page-hero) div[style*="auto-fill"] { grid-template-columns: minmax(0, 1fr) !important; }
  :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main > article header h1 { font-size: 30px !important; }
  :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main > article header p { font-size: 16px !important; }
  :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.article-content, .compare-section) h2 { font-size: 23px !important; }
}

/* ================================================================ compare (/compare and /compare/<a>-vs-<b>) */
html body #main > section.container:has(> .compare-grid) { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 36px var(--gutter, 24px) 72px !important; }
html body #main .compare-grid { gap: 20px; }
html body #main .compare-card { padding: 24px; background: #fff; border: 1px solid var(--vi-line); border-radius: 20px; box-shadow: none; text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s; }
html body #main .compare-card:hover { border-color: var(--vi-line); box-shadow: 0 14px 34px rgba(11,29,74,.10); transform: translateY(-2px); }
html body #main .compare-card-eyebrow { font: 600 var(--vi-xs)/1.2 var(--vi-bf); letter-spacing: .14em; color: var(--vi-blue); }
html body #main .compare-card .compare-card-title { margin: 10px 0 8px; font-family: var(--vi-hf) !important; font-weight: 700 !important; font-size: 19px !important; line-height: 1.3 !important;
  letter-spacing: -.01em !important; text-transform: none !important; color: var(--vi-navy) !important; }
html body #main .compare-card-desc { font-size: 13.5px; line-height: 1.55; color: var(--vi-mute); }
html body #main .compare-card-cta { font: 700 14px var(--vi-hf); letter-spacing: 0; text-transform: none; color: var(--vi-blue); }
html body #main .comparison-table-wrap { border: 1px solid var(--vi-line); border-radius: 18px; overflow-x: auto; background: #fff; }
html body #main .comparison-table { border-collapse: collapse; font-size: 14px; }
html body #main .comparison-table :is(th, td) { border-color: var(--vi-line) !important; color: var(--vi-text); }
html body #main .comparison-table thead th { background: var(--vi-bg) !important; color: var(--vi-navy) !important; font-family: var(--vi-hf); font-weight: 700; }
html body #main .comparison-table td:first-child { color: var(--vi-mute); font-weight: 600; }
/* comparison page: "Other Comparisons" on the 1200px grid; the research-use note in the soft panel style (was cream, square) */
html body #main > section.container:has(> .compare-related-grid) { max-width: calc(1200px + 2 * var(--gutter, 24px)); padding: 24px var(--gutter, 24px) 80px !important; }
html body #main .compare-section[style*="bg-soft"] { background: var(--vi-bg) !important; border: 1px solid var(--vi-line); border-radius: 16px !important; color: var(--vi-mute) !important; }
@media (max-width: 760px) { html body #main > section.container:has(> .compare-grid) { padding: 24px 16px 52px !important; } }

/* ================================================================ phones: no text under 12px on these pages */
@media (max-width: 760px) {
  :root { --vi-xs: 12px; }
  html body #main :is(.v7a-pill, .v7a-eyebrow, .v7a-out small, .cv2-eyebrow, .cv2-pur span, .compare-card-eyebrow),
  html body #rw :is(.rl-kicker, .rl-calc-pl, .rl-fact-k),
  html body #cpg :is(.cpg-eyebrow, h2.cpg-h2.cpg-sm),
  html body #main > .page-hero .section-eyebrow,
  :root:has(link[rel="canonical"]:is([href$="/contact"], [href$="/track"], [href*="/page/"], [href$="/calculator"])) #main > .page-header .section-eyebrow { font-size: 12px !important; }
  :root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"], [href$="/research"], [href$="/track"])) #main div[style*="font-mono"],
  :root:has(link[rel="canonical"]:is([href$="/about"], [href$="/contact"], [href$="/research"], [href$="/track"])) #main span[style*="font-mono"],
  html body #main > section[style^="padding: 100px 0 80px"] div[style*="font-mono"],
  :root:has(link[rel="canonical"][href$="/calculator"]) #main :is(.calc-input-box label, .calc-shop-h, #calc-recs-k) { font-size: 12px !important; }
  :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main > article header div[style*="font-mono"],
  :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.pab-ruo, code) { font-size: 12px !important; }
  :root:has(link[rel="canonical"]:is([href*="/research/"], [href*="/compare/"])) #main :is(.pab-coa-in, .pab-l) { min-height: 40px; }
  html body #cpg .cpl-shop { min-height: 40px; }
}
@media (max-width: 480px) { html body #rw .rl-rules2 { grid-template-columns: minmax(0, 1fr); } }