/* Village Trimlight — shared support / documentation article styling.
   Reusable across every Support article. Site tokens: #0c71c3, square corners. */

#vtl-doc { --b:#0c71c3; --ink:#1a1a1a; --mute:#6d7378; --line:#dadada; --bg:#f4f6f8;
  --or:#f38e31; --warn:#b3261e; --ok:#1f7a3d;
  font-family:inherit; color:var(--ink); }
#vtl-doc *,#vtl-doc *::before,#vtl-doc *::after { box-sizing:border-box; }

/* Divi core applies padding-bottom:1em to every p and li, which lands on top of
   the margins set below and doubles every gap. Zero it once, here, and let the
   margins in this file do the spacing. */
#vtl-doc p, #vtl-doc li, #vtl-doc ul, #vtl-doc ol { padding-bottom:0 !important; }
#vtl-doc h2, #vtl-doc h3, #vtl-doc h4 { padding-bottom:0 !important; }

/* lede */
#vtl-doc .doc-lede { border-left:5px solid var(--b); background:#fff;
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:24px 26px; margin:0 0 36px; }
#vtl-doc .doc-lede p { margin:0; font-size:17px; line-height:1.65; color:#3d444a; }
#vtl-doc .doc-lede p + p { margin-top:12px; }
#vtl-doc .doc-lede strong { color:var(--ink); font-weight:700; }

/* headings */
#vtl-doc h2.doc-h { font-size:25px; font-weight:700; line-height:1.25; letter-spacing:-.015em;
  margin:0 0 14px; color:var(--ink); }
#vtl-doc h3.doc-h3 { font-size:18.5px; font-weight:700; line-height:1.3; margin:24px 0 9px;
  color:var(--ink); }
#vtl-doc .doc-sec { margin:0 0 42px; }
#vtl-doc .doc-sec > p { margin:0 0 14px; font-size:16px; line-height:1.7; color:#4c5257; max-width:74ch; }
#vtl-doc .doc-sec > p:last-child { margin-bottom:0; }
#vtl-doc .doc-sec a { color:var(--b); font-weight:600; }

/* Numbered steps.
   The badge is absolutely positioned at top:0 with a fixed 34px box. The step
   heading is given a 5px top pad so the centre of its FIRST line lands on the
   centre of the badge: badge centre = 17px, heading centre = 5 + (17.5 * 1.35 / 2)
   = 16.8px. Every margin and pad here is declared explicitly because Divi sets
   its own on headings and would otherwise shift the heading out of alignment. */
#vtl-doc ol.doc-steps { margin:20px 0 0; padding:0 !important; counter-reset:dstep;
  list-style:none !important; }
#vtl-doc ol.doc-steps li { list-style:none !important; position:relative;
  padding:0 0 0 50px !important; margin:0 0 24px !important; min-height:34px; }
#vtl-doc ol.doc-steps li:last-child { margin-bottom:0 !important; }
#vtl-doc ol.doc-steps li::before { counter-increment:dstep; content:counter(dstep);
  position:absolute; left:0; top:0; width:34px; height:34px; background:var(--b); color:#fff;
  font-size:16px; font-weight:700; line-height:1; text-align:center;
  display:flex; align-items:center; justify-content:center; }
#vtl-doc ol.doc-steps li h3,
#vtl-doc ol.doc-steps li h3.doc-h3 {
  margin:0 0 9px !important; padding-top:5px !important; padding-bottom:0 !important;
  font-size:17.5px; font-weight:700; line-height:1.35; color:var(--ink); }
#vtl-doc ol.doc-steps li p { margin:0 0 9px !important; padding:0 !important;
  font-size:15.5px; line-height:1.65; color:#4c5257; }
#vtl-doc ol.doc-steps li p:last-child { margin-bottom:0 !important; }
#vtl-doc ol.doc-steps li strong { color:var(--ink); font-weight:700; }

/* plain bullet list */
#vtl-doc ul.doc-list { margin:12px 0 0; padding:0; }
#vtl-doc ul.doc-list li { list-style:none !important; position:relative;
  padding-left:26px !important; margin:0 0 10px !important; font-size:15.5px;
  line-height:1.65; color:#4c5257; }
#vtl-doc ul.doc-list li::before { content:""; position:absolute; left:5px; top:9px;
  width:7px; height:7px; background:var(--b); }
#vtl-doc ul.doc-list li strong { color:var(--ink); font-weight:700; }

/* callouts */
#vtl-doc .doc-note { padding:18px 20px; background:var(--bg); border-left:4px solid var(--or);
  font-size:15px; line-height:1.65; color:#42484d; margin:20px 0 0; }
#vtl-doc .doc-note strong { color:var(--ink); }
#vtl-doc .doc-warn { padding:18px 20px; background:#fdf3f2; border-left:4px solid var(--warn);
  font-size:15px; line-height:1.65; color:#42484d; margin:20px 0 0; }
#vtl-doc .doc-warn strong { color:var(--warn); }
#vtl-doc .doc-note p, #vtl-doc .doc-warn p { margin:0 0 9px; }
#vtl-doc .doc-note p:last-child, #vtl-doc .doc-warn p:last-child { margin:0; }

/* two-mode compare */
#vtl-doc .doc-modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:20px 0 0; }
#vtl-doc .doc-mode { background:#fff; padding:22px 22px 24px; }
#vtl-doc .doc-mode h3 { margin:0 0 4px; font-size:17.5px; font-weight:700; color:var(--ink); }
#vtl-doc .doc-mode .doc-eyebrow { font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b); display:block; margin-bottom:6px; }
#vtl-doc .doc-mode p { margin:0 0 10px; font-size:14.5px; line-height:1.6; color:#4c5257; }
#vtl-doc .doc-mode ul { margin:0; padding:0; }
#vtl-doc .doc-mode li { list-style:none !important; padding-left:20px !important;
  margin:0 0 6px !important; position:relative; font-size:14px; line-height:1.55; color:#4c5257; }
#vtl-doc .doc-mode li::before { content:""; position:absolute; left:3px; top:8px;
  width:6px; height:6px; background:var(--mute); }
#vtl-doc .doc-mode.is-best { box-shadow:inset 0 3px 0 var(--b); }

/* troubleshooting rows */
#vtl-doc .doc-fix { border:1px solid var(--line); border-left:4px solid var(--b);
  background:#fff; padding:20px 22px; margin:0 0 14px; }
#vtl-doc .doc-fix h3 { margin:0 0 7px; font-size:17px; font-weight:700; color:var(--ink); }
#vtl-doc .doc-fix p { margin:0 0 9px; font-size:15px; line-height:1.65; color:#4c5257; }
#vtl-doc .doc-fix p:last-child { margin:0; }
#vtl-doc .doc-fix .doc-cause { font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mute); display:block; margin-bottom:5px; }

/* CTA */
#vtl-doc .doc-cta { margin:42px 0 0; padding:28px 26px; background:var(--b); color:#fff;
  display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
#vtl-doc .doc-cta h2 { margin:0; font-size:24px; font-weight:700; line-height:1.28; color:#fff; }
#vtl-doc .doc-cta p { margin:0; font-size:16px; line-height:1.6; color:#e6f1fa; max-width:64ch; }
#vtl-doc .doc-btn { display:inline-block; margin-top:6px; padding:14px 34px; background:#fff;
  color:var(--b); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:2px solid #fff; transition:background .15s,color .15s; }
#vtl-doc .doc-btn:hover { background:transparent; color:#fff; }
#vtl-doc .doc-btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
#vtl-doc .doc-cta-phone { font-size:15px; color:#cfe4f6; }
#vtl-doc .doc-cta-phone a { color:#fff; font-weight:700; text-decoration:none; }

@media (max-width:600px) {
  #vtl-doc h2.doc-h { font-size:21px; }
  #vtl-doc .doc-lede { padding:18px; }
  #vtl-doc .doc-lede p { font-size:16px; }
  #vtl-doc ol.doc-steps li { padding-left:44px !important; }
  #vtl-doc ol.doc-steps li::before { width:31px; height:31px; font-size:15px; }
  #vtl-doc .doc-cta { padding:22px 18px; }
}

/* A theme rule outside this file adds top padding to some grid containers, and
   the 1px-gap grid background shows through it as a gray strip. Lock it. */
#vtl-doc .doc-modes, #vtl-doc .doc-grid { padding:0 !important; }