/* LubeServ local draft, proposed 5 November 2026: "Four Litres of Hydraulic Oil Went Into the Gearbox Overnight".
   Loaded after the live LubeServ stylesheets (copied unchanged into assets/site/). Scoped to .viscosity-check-article
   and to the inert preview forms. Everything not named here is the live journal template.
   Tokens: --article-ink #172426, --article-muted #5b686b, --article-green #13594e, --article-amber #c77724,
   --article-wash #f4f7f5, --article-line #d8e1dd, kicker colour #8d4e13 (release-polish.css). */

/* ---------- Masthead ---------- */
body[data-page="insight-article"] .viscosity-check-article .journal-article-kicker { font-size: 12px; }
.viscosity-check-article .journal-article-meta .ls-draft-status { color: #5b4a2a; }
.viscosity-check-article .journal-article-meta .ls-draft-status time { font-weight: inherit; }

/* Hero plate: the genuine LSRT-PV100 catalogue photograph, margin-only crop in CSS on the unchanged file.
   Window 536 x 620 natural px (x 284 to 820 of 1103), shown at 240 / 150 / 120 / 96 CSS px wide.
   Polish pass (sign-off round 2, item 2): 240 px from 851 px up (was 200), so the case no longer sits small in its plate;
   the 536 px window still gives 2.2 source px per CSS px, so nothing is enlarged on 2x screens. Phone plates unchanged. */
.viscosity-check-article .drain-hero-photo.vc-hero-plate {
  padding: 22px 22px 20px;
  background: #ffffff;
  border: 1px solid #d8e1dd;
  box-shadow: none;
}
.viscosity-check-article .vc-hero-crop {
  width: 240px;
  aspect-ratio: 536 / 620;
  margin: 0 auto;
  overflow: hidden;
}
.viscosity-check-article .drain-hero-photo.vc-hero-plate .vc-hero-crop img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
}
.viscosity-check-article .drain-hero-photo.vc-hero-plate figcaption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5e9e7;
  color: #41544a;
  font-size: 14px;
  line-height: 1.55;
  /* QA round 2: balanced lines. At 1440 px the sentence ended on "temperature." alone and the title on "viscometer"
     alone, in both engines; balanced, they read "Times capillary flow at a / controlled temperature." and
     "LSRT-PV100 / portable viscometer". */
  text-wrap: balance;
}
/* The title is the caption's first span; later spans are the build's .nowrap spans inside the text (QA round 2). */
.viscosity-check-article .drain-hero-photo.vc-hero-plate figcaption > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: #153e32;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.viscosity-check-article .drain-hero-photo.vc-hero-plate figcaption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(21, 62, 50, 0.45);
  text-underline-offset: 3px;
}
.viscosity-check-article .drain-hero-photo.vc-hero-plate figcaption a:hover { text-decoration-color: currentColor; }
/* The build's .nowrap spans inside captions stay inline text: drain-bowl.css styles every span in the hero caption as a
   block title ("figcaption span"), so they take the template's own escape, as in its ".route-editorial-photo figcaption
   span.nowrap" rule (QA round 2). */
.viscosity-check-article :is(.vc-hero-plate, .vc-figure) figcaption span.nowrap { display: inline; margin: 0; color: inherit; font: inherit; }
@media (max-width: 850px) {
  .viscosity-check-article .drain-hero-photo.vc-hero-plate {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    max-width: 560px;
    padding: 16px;
  }
  .viscosity-check-article .vc-hero-crop { width: 150px; margin: 0; }
  .viscosity-check-article .drain-hero-photo.vc-hero-plate figcaption { margin: 0; padding: 0; border: 0; }
}
@media (max-width: 600px) {
  .viscosity-check-article .drain-hero-photo.vc-hero-plate { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .viscosity-check-article .vc-hero-crop { width: 120px; }
  .viscosity-check-article .drain-hero-photo.vc-hero-plate figcaption > span:first-child { font-size: 15px; margin-bottom: 4px; }
}
@media (max-width: 380px) {
  /* drain-bowl.css stacks the plate below 380 px; this plate stays side by side. */
  .viscosity-check-article .drain-hero-photo.vc-hero-plate { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 360px) {
  .viscosity-check-article .drain-hero-photo.vc-hero-plate { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .viscosity-check-article .vc-hero-crop { width: 96px; }
}

/* ---------- Contents rail ---------- */
body[data-page="insight-article"] .viscosity-check-article .journal-toc > p { font-size: 12px; }

/* ---------- Prose rhythm ---------- */
body[data-page="insight-article"] .viscosity-check-article .journal-prose > section > h2 { max-width: 32ch; text-wrap: balance; }
.viscosity-check-article .journal-opening > p:first-child strong { color: var(--article-ink, #172426); }
/* QA round 2: the opening's one bold sentence, "It is nearer a sixth." (21 characters, about 180 px), is never split.
   It broke as "It is nearer" / "a sixth." at 320 px and "It is" / "nearer a sixth." at 768 px in both engines. */
.viscosity-check-article .journal-opening > p:first-child strong { white-space: nowrap; }
@media (max-width: 599px) {
  /* WebKit ends lines early with text-wrap: pretty below 600 px (dossier A.8). */
  .viscosity-check-article .journal-prose :is(p, li) { text-wrap: wrap; }
}

/* ---------- The short answer: flat panel with a two-figure strip ---------- */
body[data-page="insight-article"] .viscosity-check-article .release-answer.vc-answer {
  margin: 36px 0 56px;
  padding: 30px 34px 30px;
  border: 0;
  border-radius: 2px;
  background: #123f39;
  box-shadow: none;
}
.viscosity-check-article .release-answer.vc-answer::after { content: none; display: none; }
body[data-page="insight-article"] .viscosity-check-article .vc-answer .release-answer-label {
  margin: 0 0 10px;
  color: #b9ded3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.viscosity-check-article .vc-answer h2 { max-width: 22ch; color: #ffffff; font-size: 1.72rem; line-height: 1.16; text-wrap: balance; }
.viscosity-check-article .vc-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.viscosity-check-article .vc-keys > div { min-width: 0; padding: 20px 28px 4px 0; }
.viscosity-check-article .vc-keys > div + div { padding-left: 28px; padding-right: 0; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.viscosity-check-article .vc-keys dt {
  margin: 0;
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.viscosity-check-article .vc-keys > div:first-child dt { color: #f0a33d; }
.viscosity-check-article .vc-keys dd { margin: 10px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.55; }
body[data-page="insight-article"] .viscosity-check-article .release-answer.vc-answer > p:last-child {
  max-width: 58ch;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: none;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.6;
}
@media (max-width: 780px) {
  body[data-page="insight-article"] .viscosity-check-article .release-answer.vc-answer { padding: 24px 20px; margin: 30px 0 48px; }
  .viscosity-check-article .vc-answer h2 { font-size: 1.42rem; }
}
/* Phones: each key figure sits above its label, which takes the full panel width (QA round 1: beside a 92 px figure
   column the label had 142 px at 320, ran five lines and split "four-" / "litre"). */
@media (max-width: 600px) {
  .viscosity-check-article .vc-keys { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .viscosity-check-article .vc-keys > div,
  .viscosity-check-article .vc-keys > div + div {
    display: block;
    padding: 16px 0 14px;
    border-left: 0;
  }
  .viscosity-check-article .vc-keys > div + div { border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .viscosity-check-article .vc-keys dt { font-size: 34px; }
  .viscosity-check-article .vc-keys dd { margin: 6px 0 0; font-size: 14.5px; }
  body[data-page="insight-article"] .viscosity-check-article .release-answer.vc-answer > p:last-child { margin-top: 6px; padding-top: 16px; }
}

/* ---------- Figures: one frame and one caption style ---------- */
.viscosity-check-article .vc-figure {
  margin: 44px 0;
  padding: 24px 0 0;
  border-top: 1px solid #d8e1dd;
  border-bottom: 1px solid #dce3e0;
  background: none;
}
.viscosity-check-article .vc-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.viscosity-check-article .vc-figure svg.vc-desktop { max-width: 680px; }
.viscosity-check-article .vc-figure svg.vc-phone { display: none; }
.viscosity-check-article .vc-figure svg .vc-num { font-variant-numeric: tabular-nums; }
.viscosity-check-article .vc-figure figcaption {
  margin: 18px 0 0;
  padding: 16px 0 18px;
  border-top: 1px solid #e5e9e7;
  color: #495c60;
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}
/* The title is the caption's first span; later spans are the build's .nowrap spans inside the sentence (QA round 2). */
.viscosity-check-article .vc-figure figcaption > span:first-child {
  display: block;
  margin-bottom: 4px;
  color: #1c3738;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 780px) { .viscosity-check-article .vc-figure { margin: 36px 0; } }
/* The desktop drawing is never scaled below 1:1: below 712 px the column is narrower than 680 px, so the phone composition takes over. */
@media (max-width: 711px) {
  .viscosity-check-article .vc-figure svg.vc-desktop { display: none; }
  .viscosity-check-article .vc-figure svg.vc-phone { display: block; max-width: 380px; margin-inline: auto; }
  .viscosity-check-article .vc-figure { padding-top: 20px; }
}
/* 480 to 711 px: the column is wider than any phone drawing. The drawing is centred in the frame and held at 340 px, so
   14-unit labels render at 15.9 px, under the 16.4 px body text (QA round 1: at 380 px flush left they rendered at
   17.7 px with up to 299 px of empty frame beside them). At 412 px and narrower it still fills the column. */
@media (min-width: 480px) and (max-width: 711px) {
  .viscosity-check-article .vc-figure svg.vc-phone { max-width: 340px; }
}

/* ---------- Key sentence (journal-quote) ---------- */
/* Pull quote: below 768 px the 38ch measure sets the sentence in balanced lines; from 768 px each clause sits on its own
   line (563 and 383 px from 781 px, 518 and 353 px from 768 to 780 px). */
.viscosity-check-article .journal-quote.vc-key-sentence p { max-width: 38ch; text-wrap: balance; }
@media (min-width: 768px) {
  .viscosity-check-article .journal-quote.vc-key-sentence p { max-width: none; }
  .viscosity-check-article .vc-key-sentence .vc-clause { display: block; }
}

/* ---------- Decision panel ---------- */
body[data-page="insight-article"] .viscosity-check-article .journal-prose .journal-field-box > h3 { margin: 0; font-size: 17.3px; line-height: 1.35; }
.viscosity-check-article .vc-decision dl { margin: 16px 0 0; }
.viscosity-check-article .vc-decision dl > div {
  display: grid;
  grid-template-columns: 12.75rem minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0 4px;
  border-top: 1px solid #d8e1dd;
}
.viscosity-check-article .vc-decision dl > div + div { margin-top: 10px; }
.viscosity-check-article .vc-decision dt { margin: 0; color: #172426; font-size: 15px; font-weight: 700; line-height: 1.6; }
.viscosity-check-article .vc-decision dd { margin: 0; color: #344245; font-size: 15px; line-height: 1.6; }
.viscosity-check-article .vc-decision .is-outside dt { color: #8d4e13; }
.viscosity-check-article .vc-decision .is-inside dt { color: #13594e; }
@media (max-width: 600px) {
  .viscosity-check-article .vc-decision dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.viscosity-check-article .vc-checklist .journal-plain-list { margin: 16px 0 0; }
.viscosity-check-article .vc-checklist .journal-plain-list li { font-size: 15.5px; line-height: 1.55; color: #344245; }

/* ---------- CTA: readable copy, no arrow ---------- */
.viscosity-check-article .journal-diagnostic-copy > span { font-size: 12px; letter-spacing: 0.04em; }
.viscosity-check-article .journal-diagnostic-copy p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
/* The sentence runs in even lines (sign-off round 1: beside the long button and with a no-break join it ran five lines in a
   289 px column, the fourth only "check and plan the"). With the short button the column is 361 px and balance gives four
   even lines from 781 px up, four at 390 and six at 320, in Chromium and WebKit. */
.viscosity-check-article .journal-diagnostic-cta .journal-diagnostic-copy p { text-wrap: balance; }
body[data-page="insight-article"] .viscosity-check-article .journal-diagnostic-cta .button { font-size: 14px !important; }

/* ---------- References and related reading ---------- */
body[data-page="insight-article"] .viscosity-check-article .journal-prose > section > p.vc-sources-note { margin: 0 0 16px; color: #4a585b; font-size: 15px; line-height: 1.6; }
.viscosity-check-article .journal-reference-list li { font-size: 14.5px; line-height: 1.6; }
/* The template's global FAQ rules "details a { display: inline-flex; padding: 0 16px 16px }" (styles.css) also reach
   the links in the references disclosure. With a description after each link they turned every title into a padded box
   and pushed the text after it onto its own lines (". Public scope ...", QA round 1). Here they are ordinary inline links. */
body[data-page="insight-article"] .viscosity-check-article .journal-reference-list a { display: inline; margin: 0; padding: 0; }
/* The opened list had no right or bottom padding: lines ran to within 1 to 2 px of the box border and the last entry
   sat 1 px above its bottom edge (QA round 1). */
body[data-page="insight-article"] .viscosity-check-article .journal-references-disclosure[open] > .journal-reference-list { padding: 16px 22px 20px 0; }
@media (max-width: 600px) {
  body[data-page="insight-article"] .viscosity-check-article .journal-references-disclosure[open] > .journal-reference-list { padding: 14px 16px 18px 0; }
}
.viscosity-check-article .vc-continue { margin: 40px 0 0; }
.viscosity-check-article .journal-prose .vc-continue h3 {
  margin: 0 0 6px;
  color: #13594e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viscosity-check-article .vc-continue ul { margin: 0; padding: 0; list-style: none; }
body[data-page="insight-article"] .viscosity-check-article .journal-prose .vc-continue li {
  margin: 0;
  padding: 14px 0 15px;
  border-top: 1px solid #d8e1dd;
  color: #5b686b;
  font-size: 15px;
  line-height: 1.55;
}
.viscosity-check-article .vc-continue li:last-child { border-bottom: 1px solid #d8e1dd; }
.viscosity-check-article .journal-prose .vc-continue li a {
  color: #176052;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(23, 96, 82, 0.4);
  text-underline-offset: 3px;
}
.viscosity-check-article .journal-prose .vc-continue li a:hover { text-decoration-color: currentColor; }
/* Polish pass (sign-off round 2, item 7; art direction 4.2 item 16): the linked title on its own line, then one 14 px line
   of source and reason in the muted ink. */
body[data-page="insight-article"] .viscosity-check-article .journal-prose .vc-continue li > .vc-continue-note {
  display: block;
  margin-top: 3px;
  color: #5b686b;
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Product footer: four links, no paragraph; the heading sits level with the middle of the tiles ---------- */
.viscosity-check-article .journal-article-footer > div { align-self: center; }
.viscosity-check-article .journal-article-footer > div > h2 { margin-bottom: 0; }

/* ---------- Subscribe band (live template text) ---------- */
/* QA round 2: the band's sentence ended on "time." alone at 320, 768 and 1440 px in both engines; balanced lines. */
.viscosity-check-article .journal-subscribe-copy > p:not(.insights-subscribe-label) { text-wrap: balance; }

/* ---------- Inert preview forms: a visible, honest note ---------- */
.ls-preview-form-note { margin: 10px 0 0; font-size: 14px; font-weight: 700; line-height: 1.45; }
.journal-subscribe-band .ls-preview-form-note { color: #ffe2b8; }
.site-footer .footer-subscribe p.ls-preview-form-note { margin-top: 8px; color: #ffd59a; font-size: 13px; line-height: 1.4; }
[data-preview-inert] :is(input, button):disabled { cursor: not-allowed; }
body[data-page="insight-article"] .viscosity-check-article :is(.insights-subscribe-label, .journal-subscribe-form > label, .insights-subscribe-consent, .insights-subscribe-consent span, .journal-article-footer nav a),
body[data-page="insight-article"] .site-footer .footer-subscribe > label,
body[data-page="insight-article"] .site-footer .footer-subscribe button { font-size: 13px !important; line-height: 1.5 !important; }
body[data-page="insight-article"] .viscosity-check-article .journal-subscribe-form button { font-size: 14px !important; min-height: 44px; }
body[data-page="insight-article"] .site-footer .footer-subscribe button { min-height: 44px; }
body[data-page="insight-article"] .viscosity-check-article .journal-subscribe-form input,
body[data-page="insight-article"] .site-footer .footer-subscribe input { font-size: 16px !important; }

/* Anchors land 20 px below the fixed header. The template's html scroll-padding-top (header + 20 px) already clears
   the header, so the article's own targets take no scroll margin (QA round 1: the template's [id] margin and the
   earlier scoped margin added to it, and contents links landed 104 px below the header on desktop, 148 px on phones). */
.viscosity-check-article [id] { scroll-margin-top: 0; }

/* 5 November visual revision: input volumes, not a fictitious viscosity average. */
body[data-page="insight-article"] .viscosity-check-article .vc-answer-revised{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;padding:32px;border-radius:12px;overflow:hidden}
.viscosity-check-article .vc-answer-revised .vc-answer-intro h2{font-size:clamp(1.55rem,2.2vw,2rem);max-width:20ch;margin:0}
.viscosity-check-article .vc-answer-intro>p:last-child{color:#d5e6e0;font-size:15px;line-height:1.6;margin:14px 0 0}
.viscosity-check-article .vc-volume-view{min-width:0;align-self:center}
.viscosity-check-article .vc-volume-caption{display:flex;align-items:baseline;gap:10px;color:#d5e6e0}
.viscosity-check-article .vc-volume-caption strong{color:white;font-size:28px;letter-spacing:-.04em}
.viscosity-check-article .vc-volume-caption span{font-size:12px;line-height:1.5}
.viscosity-check-article .vc-volume-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;height:52px;margin-top:14px}
.viscosity-check-article .vc-volume-strip i{background:linear-gradient(180deg,#95cabc,#4b9d85);border:1px solid #a4d0c4;border-radius:3px}
.viscosity-check-article .vc-volume-strip i.wrong-oil{background:linear-gradient(180deg,#ffd082,#e79e3d);border-color:#ffd595}
.viscosity-check-article .vc-volume-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;color:#e2ede7;font-size:12px}
.viscosity-check-article .vc-volume-legend i{display:inline-block;width:8px;height:8px;background:#95cabc;margin-right:5px;border-radius:2px}
.viscosity-check-article .vc-volume-legend i.wrong-oil{background:#f4b95c}
.viscosity-check-article .vc-result{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid #53766b;margin-top:22px;padding-top:16px}
.viscosity-check-article .vc-result span{display:block;font-size:12px;color:#d5e6e0}
.viscosity-check-article .vc-result strong{display:block;color:#fff;font-size:29px;line-height:1.3;margin-top:4px;font-variant-numeric:tabular-nums}
.viscosity-check-article .vc-result>div:first-child strong{color:#ffd082}
.viscosity-check-article .vc-result small{font-size:12px;font-weight:500}
.viscosity-check-article p.vc-volume-note{font-size:12px!important;line-height:1.55!important;margin:14px 0 0!important;color:#d5e6e0!important}
body[data-page="insight-article"] .viscosity-check-article .vc-answer-revised>p.vc-answer-close{grid-column:1/-1;margin:0;padding-top:20px;font-size:15px;color:#fff;border-top:1px solid #53766b}
.viscosity-check-article .vc-reading-comparison{border:1px solid #d8e1dd;border-radius:12px;background:#f6f8f5;padding:0;overflow:hidden}
.viscosity-check-article .vc-reading-heading{padding:25px 28px;background:#eaf1ec}
.viscosity-check-article .vc-reading-heading>p{font-size:14px;margin:0 0 8px!important;font-weight:600;color:#335249}
.viscosity-check-article .vc-reading-heading>strong{display:block;font-size:42px;line-height:1.15;letter-spacing:-.04em;color:#163f34}
.viscosity-check-article .vc-reading-heading small{font-size:19px;font-weight:500}
.viscosity-check-article .vc-reading-heading>span{display:block;font-size:14px;margin-top:10px;color:#40554d}
.viscosity-check-article .vc-reading-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.viscosity-check-article .vc-reading-case{padding:24px 28px;min-width:0;border-top:1px solid #d8e1dd}
.viscosity-check-article .vc-reading-case:nth-child(even){border-left:1px solid #d8e1dd}
.viscosity-check-article .vc-reading-case>span{font-size:14px;color:#42554b;font-weight:600}
.viscosity-check-article .vc-reading-case>strong{display:block;font-size:28px;line-height:1.4;color:#174e3f;letter-spacing:-.035em}
.viscosity-check-article .vc-reading-case p{font-size:14px!important;line-height:1.55!important;margin:12px 0 0!important;color:#46574f}
.viscosity-check-article .vc-dose-track{height:5px;background:#dce5df;border-radius:3px;margin-top:12px}
.viscosity-check-article .vc-dose-track i{display:block;height:100%;background:#c1812c;border-radius:3px}
.viscosity-check-article .vc-reading-case:last-child .vc-dose-track{background:linear-gradient(90deg,#8fb8a7 0 50%,#daa858 50% 100%)}
.viscosity-check-article .vc-reading-comparison figcaption{padding:18px 28px;margin:0;background:white}
.viscosity-check-article .drain-hero-photo.vc-hero-plate{border-radius:12px;padding:26px;background:linear-gradient(160deg,#fff,#f1f5f1)}
.viscosity-check-article .vc-hero-crop{width:min(100%,270px)}
@media(max-width:780px){body[data-page="insight-article"] .viscosity-check-article .vc-answer-revised{grid-template-columns:1fr;padding:24px;gap:24px}.viscosity-check-article .vc-answer-revised .vc-answer-intro h2{max-width:none}.viscosity-check-article .vc-reading-heading,.viscosity-check-article .vc-reading-case{padding:22px}.viscosity-check-article .vc-reading-comparison figcaption{padding:16px 22px}}
@media(max-width:600px){.viscosity-check-article .vc-reading-grid{grid-template-columns:1fr}.viscosity-check-article .vc-reading-case{display:grid;grid-template-columns:1fr auto;gap:5px 16px}.viscosity-check-article .vc-reading-case:nth-child(even){border-left:0}.viscosity-check-article .vc-reading-case>strong{grid-column:2;grid-row:1/3;font-size:28px}.viscosity-check-article .vc-reading-case .vc-dose-track{grid-column:1;grid-row:2;align-self:center;min-width:0}.viscosity-check-article .vc-reading-case p{grid-column:1/-1}.viscosity-check-article .vc-hero-crop{width:120px}.viscosity-check-article .vc-reading-heading>strong{font-size:36px}}
@media(max-width:360px){.viscosity-check-article .vc-hero-crop{width:96px}.viscosity-check-article .vc-result{gap:12px}.viscosity-check-article .vc-result strong{font-size:26px}}