/* Guides shell (2026-11-02 redesign): the top bar + left nav on the hub and on every guide, and the theme layer that puts
   all 128 hand-written guides on the brand system (Montserrat, Anton numbers, Vault Yellow as the one accent).
   Injected by scripts/build_guide_hub.py (nav_block + theme_guide). Hub pages carry body[data-vg=hub], guides body[data-vg=guide]. */

:root {
  --vg-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vg-num: "Anton", "Montserrat", sans-serif;
  --vg-vault: #FFD600;
  --vg-mark: rgba(255, 214, 0, .78);
  --vg-ink: #0E0E10;
  --vg-t2: #4F4C46;
  --vg-t3: #706C65;
  --vg-line: rgba(14, 14, 16, .09);
  --vg-paper: #F7F5F0;
  --vg-paper0: #EFECE5;
  --vg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vg-w: 264px;
  --vg-h: 60px;
}

/* ---------- Top bar ---------- */
.vg-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--vg-h); z-index: 100000; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 0 40px; background: rgba(247, 245, 240, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vg-line); font: 500 14px/1.3 var(--vg-font); color: var(--vg-ink); text-align: left; letter-spacing: 0; }
.vg-bar a { color: inherit; text-decoration: none; }
.vg-bar svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-menu { display: none; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--vg-line); background: #fff; color: var(--vg-ink); align-items: center; justify-content: center; cursor: pointer; }
.vg-mbrand { display: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.vg-crumb { color: var(--vg-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vg-crumb a { transition: color .15s var(--vg-ease); }
.vg-crumb a:hover { color: var(--vg-ink); }
.vg-crumb b { font-weight: 500; color: var(--vg-t2); }
.vg-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.vg-try { white-space: nowrap; font-weight: 600; border-bottom: 2px solid var(--vg-vault); padding-bottom: 1px; }
.vg-logo { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--vg-line); display: flex; align-items: center; justify-content: center; flex: none; }
.vg-logo img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* ---------- Left nav ---------- */
.vg-side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--vg-w); z-index: 100001; box-sizing: border-box; overflow-y: auto; background: var(--vg-paper0); border-right: 1px solid var(--vg-line); padding: 18px 14px 32px; display: flex; flex-direction: column; gap: 2px; font: 500 14px/1.35 var(--vg-font); color: var(--vg-ink); text-align: left; letter-spacing: 0; transform: translateX(-105%); transition: transform .2s var(--vg-ease); }
/* Flex column + overflow: without this the browser squashes the search box (38px -> 20px) and the rows when the nav is taller than the screen */
.vg-side > * { flex-shrink: 0; }
.vg-side.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
.vg-side a { color: var(--vg-ink); text-decoration: none; }
.vg-side .vg-brand { display: flex; align-items: center; gap: 10px; margin: 2px 8px 18px; font-weight: 600; font-size: 15px; }
.vg-side .vg-brand img { width: 22px; height: 22px; object-fit: contain; }
.vg-q { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid var(--vg-line); border-radius: 10px; background: #fff; font: 500 14px var(--vg-font); color: var(--vg-ink); margin-bottom: 8px; }
.vg-q::placeholder { color: var(--vg-t3); }
.vg-side .vg-q { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23706C65' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50% / 16px 16px !important; box-shadow: 0 1px 2px rgba(14, 14, 16, .05); transition: border-color .15s var(--vg-ease), box-shadow .15s var(--vg-ease); }
.vg-side .vg-q:focus { outline: none; border-color: var(--vg-ink) !important; box-shadow: 0 0 0 3px var(--vg-mark); }
.vg-res { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.vg-res a { padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--vg-line); font-size: 13px; }
.vg-res a small { display: block; color: var(--vg-t3); font-size: 12px; margin-top: 2px; }
.vg-i { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border-radius: 9px; color: var(--vg-t2) !important; font-weight: 500; transition: background-color .15s var(--vg-ease), color .15s var(--vg-ease); }
.vg-i .n { font-family: var(--vg-num); font-size: 14px; color: var(--vg-t3); }
.vg-i:hover { background: rgba(14, 14, 16, .05); color: var(--vg-ink) !important; }
.vg-i.on { background: #fff; color: var(--vg-ink) !important; box-shadow: inset 0 0 0 1px var(--vg-line); }
.vg-i.top { grid-template-columns: minmax(0, 1fr) auto; }
.vg-i.top::after { content: ""; width: 6px; height: 6px; margin-right: 4px; border-right: 1.5px solid var(--vg-t3); border-top: 1.5px solid var(--vg-t3); transform: rotate(45deg); transition: transform .15s var(--vg-ease); }
.vg-i.top:hover::after { transform: translateX(2px) rotate(45deg); border-color: var(--vg-ink); }
.vg-h { font-size: 12px; font-weight: 500; color: var(--vg-t3); margin: 22px 10px 6px; }
.vg-c summary { display: flex; align-items: center; list-style: none; cursor: pointer; border-radius: 8px; }
.vg-c summary::-webkit-details-marker { display: none; }
.vg-c summary .vg-i { flex: 1; min-width: 0; }
.vg-n { flex: none; min-width: 40px; padding: 9px 8px; text-align: right; font-size: 12px; font-weight: 500; color: var(--vg-t3); border-radius: 8px; font-variant-numeric: tabular-nums; }
.vg-n::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 2px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.vg-c[open] > summary .vg-n::after { transform: rotate(-135deg); margin-bottom: -1px; }
.vg-n:hover { color: var(--vg-ink); background: rgba(14, 14, 16, .05); }
.vg-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 23px; padding-left: 9px; border-left: 1px solid rgba(14, 14, 16, .14); }
.vg-sub a { padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.3; color: var(--vg-t2); }
.vg-sub a:hover { background: rgba(14, 14, 16, .05); color: var(--vg-ink); }
.vg-sub a.on { background: #fff; color: var(--vg-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--vg-line); }
.vg-scrim { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .32); display: none; }
.vg-scrim.open { display: block; }

body[data-vg] { padding-top: var(--vg-h) !important; }
@media (min-width: 1100px) {
  html:not(.vg-deck) .vg-side { transform: none; box-shadow: none; }
  html:not(.vg-deck) body[data-vg] { margin-left: var(--vg-w) !important; }
  html:not(.vg-deck) .vg-bar { left: var(--vg-w); }
  html:not(.vg-deck) .vg-scrim { display: none; }
}
@media (max-width: 1099.98px), print {
  .vg-menu { display: inline-flex; }
}
@media (max-width: 1099.98px) {
  .vg-bar { padding: 0 16px; gap: 12px; }
  .vg-mbrand { display: block; }
  .vg-crumb { display: none; }
}
html.vg-deck .vg-menu { display: inline-flex; }
@media (max-width: 520px) { .vg-try .lg { display: none; } }
@media (max-width: 360px) { .vg-mbrand { font-size: 14px; } .vg-logo { display: none; } }
@media print { .vg-side, .vg-bar, .vg-scrim { display: none !important; } body[data-vg] { margin: 0 !important; padding-top: 0 !important; } }

/* The guides' own fixed top bar, floating badges and pills: the shared bar replaces them */
body[data-vg] > .top-bar { display: none !important; }
body[data-vg]:has(> .top-bar) { padding-top: 0 !important; }
body[data-vg] a[aria-label="USMLE Vault"]:not(.vg-logo) { display: none !important; }
body[data-vg] a.vg-home:not(.vg-crumb-home) { display: none !important; }
body[data-vg] .vf-top, body[data-vg] .vf-bot { display: none !important; }
body[data-vg="guide"] { padding-bottom: 0 !important; }

/* ================= Theme layer for every guide article ================= */
html body[data-vg="guide"] {
  --paper: var(--vg-paper); --bg: var(--vg-paper); --surface: #fff; --card: #fff; --line: var(--vg-line); --border: var(--vg-line);
  --ink: var(--vg-ink); --ink2: var(--vg-t2); --ink3: var(--vg-t3); --ink4: var(--vg-t3); --muted: var(--vg-t2); --text: var(--vg-ink); --text-muted: var(--vg-t2); --text-dim: var(--vg-t3);
  --accent: var(--vg-ink); --accent-soft: var(--vg-paper0); --gold: var(--vg-ink); --gold-bg: var(--vg-paper0); --gold-border: rgba(14, 14, 16, .14); --gold-light: var(--vg-vault); --gold-dim: var(--vg-t2); --gold-glow: transparent;
  --star: var(--vg-ink); --star-soft: rgba(255, 214, 0, .32);
  --green: #178A45; --green-soft: #E9F4EC; --green-bg: #E9F4EC;
  --blue: var(--vg-t2); --blue-soft: var(--vg-paper0); --blue-bg: var(--vg-paper0);
  --shadow: none;
  background: var(--vg-paper) !important; color: var(--vg-ink);
  font-family: var(--vg-font) !important; letter-spacing: 0;
}
html body[data-vg="guide"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--vg-font) !important; font-style: normal; color: var(--vg-ink); }
html body[data-vg="guide"] :is(h1) { font-weight: 700; letter-spacing: -.02em; }
html body[data-vg="guide"] :is(h2, h3) { letter-spacing: -.01em; }
html body[data-vg="guide"] h1 em, html body[data-vg="guide"] h2 em { font-style: normal; }
html body[data-vg="guide"] .eyebrow { color: var(--vg-t3) !important; font-weight: 500 !important; font-size: 14px !important; }

/* The highlighter: one swipe on the key phrase, never a pill */
html body[data-vg="guide"] :is(.hl, mark) { background: linear-gradient(transparent 56%, var(--vg-mark) 56%, var(--vg-mark) 90%, transparent 90%) !important; color: inherit !important; border: 0 !important; border-radius: 0 !important; padding: 0 2px !important; font-weight: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html body[data-vg="guide"] .hook b { color: var(--vg-ink); }

/* Cards and steps: white on paper, hairline, no colour */
html body[data-vg="guide"] :is(.step, .hook, .card) { border-color: var(--vg-line); box-shadow: none; }
html body[data-vg="guide"] .step.big { border: 1px solid var(--vg-ink); background: #fff; }
html body[data-vg="guide"] .num { font-family: var(--vg-num) !important; font-weight: 400 !important; letter-spacing: .01em; background: transparent !important; color: var(--vg-t3) !important; font-size: 22px !important; }
html body[data-vg="guide"] .big .num { color: var(--vg-ink) !important; }
html body[data-vg="guide"] :is(.sc .n, .vt-st .n, .pn, .big-num, .stat-num) { font-family: var(--vg-num) !important; font-weight: 400 !important; letter-spacing: .01em; }
html body[data-vg="guide"] .moststar { background: rgba(255, 214, 0, .32); color: var(--vg-ink); border-radius: 6px; }

/* "The fix" / why boxes: a yellow rule, no green box */
html body[data-vg="guide"] .why { background: transparent !important; border-left: 3px solid var(--vg-vault) !important; border-radius: 0 !important; padding: 4px 0 4px 16px !important; }
html body[data-vg="guide"] .why b { color: var(--vg-ink) !important; }
html body[data-vg="guide"] .example { background: #fff; border-left-color: rgba(14, 14, 16, .2); }
html body[data-vg="guide"] .example b { color: var(--vg-ink); }
html body[data-vg="guide"] .quote { background: transparent; border-left: 2px solid var(--vg-vault); }
html body[data-vg="guide"] .proof { background: #fff; border-color: var(--vg-line); }

/* Links: ink with a yellow underline, never coloured pills */
html body[data-vg="guide"] a.link, html body[data-vg="guide"] .wrap p a:not([class]), html body[data-vg="guide"] main p a:not([class]) { color: var(--vg-ink) !important; text-decoration: none !important; border-bottom: 2px solid var(--vg-vault); font-weight: 600; }
html body[data-vg="guide"] :is(.chips a, .loop span) { border-radius: 8px !important; background: var(--vg-paper0) !important; border-color: transparent !important; color: var(--vg-ink) !important; font-weight: 500 !important; }
html body[data-vg="guide"] :is(.phasejump a, .btngrid a) { border: 1px solid var(--vg-line) !important; background: #fff !important; border-radius: 10px !important; }
html body[data-vg="guide"] :is(.phasejump a, .btngrid a):hover { border-color: rgba(14, 14, 16, .3) !important; color: var(--vg-ink) !important; }
html body[data-vg="guide"] .phasehead { background: transparent; color: var(--vg-t3); font-weight: 500; font-size: 13px; padding: 0 0 12px; border-radius: 0; border-bottom: 1px solid var(--vg-line); }
html body[data-vg="guide"] .video .play { background: var(--vg-ink) !important; }
html body[data-vg="guide"] .toggle button[aria-selected="true"], html body[data-vg="guide"] .scores button[aria-selected="true"] { background: var(--vg-ink); border-color: var(--vg-ink); color: #fff; }

/* Vault CTAs: one ink card, one yellow-on-ink or ink button */
html body[data-vg="guide"] .cta { background: var(--vg-ink); border-radius: 18px; }
html body[data-vg="guide"] .cta a { color: var(--vg-vault); }
html body[data-vg="guide"] .cta .kw { font-family: var(--vg-font) !important; }
html body[data-vg="guide"] .vxcta { background: #fff !important; border: 1px solid var(--vg-line) !important; border-radius: 14px !important; box-shadow: none !important; color: var(--vg-ink) !important; }
html body[data-vg="guide"] .vxcta b { color: var(--vg-ink) !important; }
html body[data-vg="guide"] .vbtn { background: var(--vg-ink) !important; color: #fff !important; border-radius: 10px !important; border: 0 !important; box-shadow: none !important; font-weight: 600 !important; }
html body[data-vg="guide"] [style*="background:#0E0E10"] [style*="color:#0E0E10"], html body[data-vg="guide"] .cta [style*="color:#0E0E10"] { color: var(--vg-vault) !important; }

/* The honest-review carousel: one ink panel, one trial button */
html body[data-vg="guide"] .vt { background: var(--vg-ink) !important; color: #F2F0EA !important; border: 0 !important; border-radius: 18px !important; padding: 24px !important; }
html body[data-vg="guide"] .vt h3 { color: #F2F0EA !important; font: 600 18px/1.3 var(--vg-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body[data-vg="guide"] .vt p.vt-s { color: #ABA8A1; opacity: 1; }
html body[data-vg="guide"] .vt figcaption { color: #F2F0EA; }
html body[data-vg="guide"] .vt figcaption b { font-weight: 600; }
html body[data-vg="guide"] .vt .vt-r { color: #30D158; font-weight: 500; }
html body[data-vg="guide"] .vt .vt-q { color: #8B8880; opacity: 1; font-style: normal; }
html body[data-vg="guide"] .vt-play { width: 64px !important; height: 64px !important; left: 50% !important; top: 50% !important; bottom: auto !important; margin: -32px 0 0 -32px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, .45) !important; transition: transform .15s ease !important; }
html body[data-vg="guide"] .vt-play::after { left: 26px !important; top: 21px !important; border-width: 11px 0 11px 17px !important; border-color: transparent transparent transparent #0e0e10 !important; }
html body[data-vg="guide"] .vt-play:hover { transform: scale(1.06) !important; }
/* native controls only once the video is playing (no double play button over the poster) */
html body[data-vg="guide"] .vt-v:not(.on) video::-webkit-media-controls { display: none !important; }
html body[data-vg="guide"] .vt-v:not(.on) video::-webkit-media-controls-enclosure { display: none !important; }
html body[data-vg="guide"] .vt-v video { background: #1D1D20 !important; }
html body[data-vg="guide"] .vt-btn { border-radius: 10px !important; background: var(--vg-vault) !important; color: var(--vg-ink) !important; font: 600 16px/1.2 var(--vg-font) !important; }
html body[data-vg="guide"] .vtw-yt { border: 0 !important; background: transparent !important; color: #ABA8A1 !important; font: 500 14px/1.3 var(--vg-font) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html body[data-vg="guide"] .vtw-yt small { color: #8B8880; }
html body[data-vg="guide"] .vtw-cnt { color: #ABA8A1 !important; }
html body[data-vg="guide"] .vtw-arr { background: #1D1D20 !important; color: #F2F0EA !important; border-color: rgba(242, 240, 234, .14) !important; box-shadow: none !important; }
html body[data-vg="guide"] .vt-st a { background: #151517 !important; border-color: rgba(242, 240, 234, .09) !important; }
html body[data-vg="guide"] .vt-st .n { color: #30D158 !important; }
html body[data-vg="guide"] .vt-st em { color: var(--vg-vault) !important; }
html body[data-vg="guide"] .vt1 { background: #fff !important; border-color: var(--vg-line) !important; }
html body[data-vg="guide"] .vt1 small { color: var(--vg-t3) !important; }

/* Quick answer (AEO) block */
html body[data-vg="guide"] .aeo-qa { background: #fff !important; border: 1px solid var(--vg-line) !important; border-radius: 14px !important; padding: 20px 22px !important; }
html body[data-vg="guide"] .aeo-q { font: 600 18px/1.35 var(--vg-font) !important; }
html body[data-vg="guide"] .aeo-a { color: var(--vg-t2) !important; }
html body[data-vg="guide"] .aeo-dates { font: 400 13px/1.4 var(--vg-font) !important; color: var(--vg-t3) !important; letter-spacing: 0 !important; }

/* "Back to all guides" at the end of every guide: a quiet secondary button */
body[data-vg="guide"] .vg-home-end a { background: #fff !important; color: var(--vg-ink) !important; border: 1px solid var(--vg-line) !important; box-shadow: none !important; border-radius: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font: 600 15px/1 var(--vg-font) !important; padding: 14px 20px !important; }
body[data-vg="guide"] .vg-home-end a span { color: var(--vg-t3) !important; }

/* The hub pages also load site.css: keep its FAQ details/summary styles out of the left nav */
.vg-side details { border: 0; }
.vg-side summary { padding: 0; font-size: inherit; font-weight: inherit; justify-content: flex-start; gap: 0; }
.vg-side summary::after { content: none; display: none; }
.vg-bar .vg-logo { visibility: visible !important; display: flex !important; }
.vg-side .vg-q { height: 42px !important; border-radius: 12px !important; padding: 0 12px 0 38px !important; font: 500 14px var(--vg-font) !important; border: 1px solid var(--vg-line) !important; }
/* The guides' own old floating "Try free" pills: replaced by the shared phone bar below (#vbar) */
body[data-vg="guide"] > a[href^="https://usmlevault.com"][style*="position:fixed"] { display: none !important; }

/* ================= Floating "Try free" bar (phones only), restored 2026-11-02 =================
   Markup + show/hide script: vbar_block() in scripts/build_guide_hub.py, on every guide and on /guide.
   Slides up after the reader scrolls; steps aside over the page's own CTAs; sits under the nav, scrim and pop-ups. */
#vbar { display: none; }
@media (max-width: 640px) {
  #vbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9000; box-sizing: border-box; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 10px 10px 12px; border: 0; border-radius: 14px; background: var(--vg-ink); color: #F2F0EA; text-decoration: none !important; text-align: left; letter-spacing: 0; font: 500 13px/1.3 var(--vg-font); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); transition: transform .3s var(--vg-ease); pointer-events: none; }
  #vbar.on { transform: none; pointer-events: auto; }
  #vbar img { flex: none; display: block; width: 32px; height: 32px; max-width: none; margin: 0; border-radius: 8px; background: #fff; }
  #vbar .vbar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  #vbar .vbar-t b { font: 600 14px/1.25 var(--vg-font); color: #F2F0EA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #vbar .vbar-t small { font: 500 12px/1.3 var(--vg-font); color: #ABA8A1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #vbar .vbar-n { font-family: var(--vg-num); font-size: 14px; line-height: 1; letter-spacing: .01em; color: var(--vg-vault); }
  #vbar .vbar-go { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--vg-vault); color: var(--vg-ink); font: 600 14px/1 var(--vg-font); white-space: nowrap; }
  html body[data-vg]:has(#vbar) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 340px) { #vbar img { display: none; } }
html.vg-deck #vbar { display: none !important; }
@media print { #vbar { display: none !important; } }

/* ================= Tier-list hub cards (tier-lists guide, "Pick a tier list") — 5 Nov ================= */
html body[data-vg="guide"] .hub { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 16px; }
html body[data-vg="guide"] .hub .hubc { position: relative; display: flex; flex-direction: column; padding: 0 0 14px; border: 1px solid var(--vg-line); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
html body[data-vg="guide"] .hub .hubc:hover { border-color: var(--vg-ink); box-shadow: 0 6px 20px rgba(14, 14, 16, .06); }
html body[data-vg="guide"] .hub .hubh { padding: 16px 120px 12px 18px; }
html body[data-vg="guide"] .hub .n { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--vg-t3); }
html body[data-vg="guide"] .hub .hubh b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0 0; }
html body[data-vg="guide"] .hub .hubgo { position: absolute; top: 14px; right: 14px; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--vg-ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
html body[data-vg="guide"] .hub .hubgo:hover { opacity: .88; }
/* each tier = a band: coloured letter cell + tiles */
html body[data-vg="guide"] .hub .hrow { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0; align-items: stretch; margin: 0 12px 4px; border-radius: 10px; overflow: hidden; background: var(--vg-paper0, #f3f1ec); }
html body[data-vg="guide"] .hub .hrow .tier { display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 24px; line-height: 1; color: #fff; }
html body[data-vg="guide"] .hub .tier.S { background: #E5484D; }
html body[data-vg="guide"] .hub .tier.A { background: #F08C2E; }
html body[data-vg="guide"] .hub .tier.B { background: #E9B308; color: #0e0e10; }
html body[data-vg="guide"] .hub .tier.C { background: #46A758; }
html body[data-vg="guide"] .hub .tier.D { background: #3E8ED0; }
html body[data-vg="guide"] .hub .tier.F { background: #8E4EC6; }
html body[data-vg="guide"] .hub .hitems { gap: 6px; padding: 8px; align-content: center; min-height: 56px; }
html body[data-vg="guide"] .hub .hitems a.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--vg-line); background: #fff; color: var(--vg-ink); font-size: 13.5px; font-weight: 600; line-height: 1.2; box-shadow: 0 1px 0 rgba(14, 14, 16, .04); }
html body[data-vg="guide"] .hub .hitems a.chip:hover { border-color: var(--vg-ink); filter: none; }
html body[data-vg="guide"] .hub .hitems a.chip.vault { background: #ffd600; border-color: #e0bb00; }
html body[data-vg="guide"] .hub .hitems a.chip:not([target])::after { content: none; }
html body[data-vg="guide"] .hub .hitems a.chip[target]::after { content: "\2197"; margin-left: 6px; font-size: 11px; opacity: .5; }
@media (max-width: 420px) {
  html body[data-vg="guide"] .hub .hubh { padding: 14px 16px 10px; }
  html body[data-vg="guide"] .hub .hubgo { position: static; align-self: flex-start; order: 9; margin: 8px 12px 0; }
  html body[data-vg="guide"] .hub .hrow { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ================= Tier-list switcher on every individual tier list (5 Nov) ================= */
html body[data-vg="guide"] .tiernav { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
html body[data-vg="guide"] .tiernav .tn-all, html body[data-vg="guide"] .tiernav-foot .tn-all { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--vg-ink); text-decoration: none; }
html body[data-vg="guide"] .tiernav .tn-all:hover, html body[data-vg="guide"] .tiernav-foot .tn-all:hover { text-decoration: underline; }
html body[data-vg="guide"] .tn-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
html body[data-vg="guide"] .tn-tabs::-webkit-scrollbar { display: none; }
html body[data-vg="guide"] .tn-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--vg-line); background: #fff; color: var(--vg-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
html body[data-vg="guide"] .tn-tabs a:hover { border-color: var(--vg-ink); }
html body[data-vg="guide"] .tn-tabs a.on { background: var(--vg-ink); border-color: var(--vg-ink); color: #fff; }
html body[data-vg="guide"] .tiernav-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 32px 0 8px; padding-top: 18px; border-top: 1px solid var(--vg-line); }
html body[data-vg="guide"] .tiernav-foot .tn-next { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--vg-ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
html body[data-vg="guide"] .tiernav-foot .tn-next:hover { opacity: .88; }

/* ================= Phone reading layer (7 Nov 2026) =================
   Modelled on backlinko.com/skyscraper-technique measured at 390px: 18px Inter body at 1.8, 20px gutters,
   full-width images with soft corners, big section heads, nothing wider than the screen.
   Montserrat runs wider than Inter, so 17px here reads like their 18px. Phones only; desktop is untouched.
   Checked by the mobile audit harness (every guide + hub page at 390px): no sideways scroll, body >= 17px,
   nothing under 14px, every tap target >= 44px. */
html:has(body[data-vg]) { overflow-x: clip; }
html body[data-vg] { overflow-x: clip; overflow-wrap: break-word; }
@media (max-width: 640px) {
  /* Reading text */
  html body[data-vg="guide"] :is(p, li):not(:is(#vgSide *, #vbar *, .vt *, .hub *, table *, figcaption, figcaption *, .aeo-dates, .eyebrow, .toggle-note, .v2-pre, .step-desc, .mini-list li, .disclaim)) { font-size: 17px; line-height: 1.7; }
  html body[data-vg="guide"] p.lead { font-size: 18px; line-height: 1.65; }
  /* Section heads: bigger, so a long page scans in headings */
  html body[data-vg="guide"] h2:not(:is(#vgSide *, .vt *, .hub *, .aeo-q)) { font-size: 24px; line-height: 1.25; }
  html body[data-vg="guide"] h2.aeo-q { font-size: 20px !important; line-height: 1.3 !important; }
  html body[data-vg="guide"] .aeo-dates { font-size: 14px !important; }
  html body[data-vg="guide"] .vtw-arr { width: 44px; height: 44px; }
  html body[data-vg="guide"] h3:not(:is(#vgSide *, .vt *, .hub *)) { font-size: 19px; line-height: 1.3; }
  /* Small print never under 14px */
  html body[data-vg="guide"] :is(.aeo-dates, .toggle-note, .v2-pre, .step-desc, .mini-list li, figcaption, .vt-s, table td, table th) { font-size: max(14px, 1em); line-height: 1.5; }
  html body[data-vg="guide"] :is(.vt-c figcaption, .vt-p figcaption, .shot figcaption) { font-size: 14px; }
  /* Images and video: full column width, soft corners */
  html body[data-vg="guide"] :is(img, video, iframe):not(:is(#vgBar *, #vgSide *, #vbar *, .vg-logo *)) { max-width: 100%; height: auto; }
  html body[data-vg="guide"] .shot img { border-radius: 10px; }
  /* Boxes that used to push the page sideways */
  html body[data-vg="guide"] :is(.callout, .vxcta, .vt, .feat, .rf-step, .card, .step, .head > *) { min-width: 0; max-width: 100%; box-sizing: border-box; }
  html body[data-vg="guide"] a { overflow-wrap: anywhere; }
  /* Wide tables keep scrolling inside their box; an edge shadow shows there is more */
  html body[data-vg="guide"] :is(.tw, .tablewrap, .comparison-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: linear-gradient(90deg, var(--vg-paper) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(270deg, var(--vg-paper) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(14,14,16,.18), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(14,14,16,.18), transparent) right / 12px 100% no-repeat scroll; }
  /* Tap targets: 44px minimum */
  .vg-bar .vg-try { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; padding: 0 4px; text-decoration: underline; text-decoration-color: var(--vg-vault); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .vg-bar .vg-mbrand { display: inline-flex; align-items: center; min-height: 44px; }
  .vg-bar :is(.vg-logo, .vg-menu) { width: 44px; height: 44px; }
  .vg-side .vg-brand { min-height: 44px; }
  .vg-i { min-height: 44px; }
  .vg-sub a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
  html body[data-vg="guide"] :is(.tn-tabs a, .tiernav .tn-all, .hub .hitems a.chip) { min-height: 44px; }
  #vbar .vbar-go { min-height: 44px; }
}

/* ================= Side tab (641px and up), 7 Nov 2026 =================
   Hormozi-style sticky CTA: a Typeform-style tab on the right edge of every guide; tapping it slides in one small panel.
   Markup + script: vbar_block() in scripts/build_guide_hub.py. Phones use #vbar (above) instead. Clicks: data-cta="side_tab". */
.vside-tab, .vside { display: none; }
@media (min-width: 641px) {
  .vside-tab { position: fixed; right: 0; top: 50%; z-index: 8999; display: block; margin: 0; padding: 18px 12px; border: 0; border-radius: 0 10px 10px 0; background: var(--vg-vault); color: var(--vg-ink); font: 600 14px/1 var(--vg-font); letter-spacing: 0; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); box-shadow: 0 4px 16px rgba(14, 14, 16, .16); cursor: pointer; transition: padding .15s var(--vg-ease), opacity .2s var(--vg-ease); }
  .vside-tab:hover { padding-left: 16px; }
  .vside-open .vside-tab, .vg-deck .vside-tab { opacity: 0; pointer-events: none; }
  .vside { position: fixed; right: 16px; top: 50%; z-index: 9001; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-sizing: border-box; width: 340px; padding: 24px; border: 1px solid var(--vg-line); border-radius: 16px; background: #fff; color: var(--vg-ink); box-shadow: 0 16px 48px rgba(14, 14, 16, .18); opacity: 0; transform: translate(24px, -50%); transition: opacity .2s var(--vg-ease), transform .2s var(--vg-ease); }
  .vside[hidden] { display: none; }
  .vside.on { opacity: 1; transform: translate(0, -50%); }
  .vside img { display: block; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--vg-line); margin: 0 0 4px; }
  .vside p { margin: 0; }
  .vside-k { font: 500 13px/1.3 var(--vg-font); color: var(--vg-t3); }
  .vside-h { font: 700 22px/1.25 var(--vg-font); letter-spacing: -.01em; }
  .vside-h .hl { background: linear-gradient(transparent 56%, var(--vg-mark) 56%, var(--vg-mark) 90%, transparent 90%); padding: 0 2px; }
  .vside-d { font: 400 15px/1.55 var(--vg-font); color: var(--vg-t2); }
  .vside-go { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 16px; text-align: center; margin-top: 8px; border-radius: 12px; background: var(--vg-vault); color: var(--vg-ink) !important; font: 600 15px/1 var(--vg-font); text-decoration: none !important; }
  .vside-go:hover { filter: brightness(.96); }
  .vside-go .vbar-n { font-family: var(--vg-num); }
  .vside-s { align-self: center; font: 400 13px/1.3 var(--vg-font); color: var(--vg-t3); }
  .vside-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--vg-t3); cursor: pointer; }
  .vside-x svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
  .vside-x:hover { color: var(--vg-ink); background: rgba(14, 14, 16, .05); }
}
@media print { .vside-tab, .vside { display: none !important; } }