/* Public guides are plain HTML. Scope rules so the learning app is untouched. */
.vb-guide { margin:0; background:#fff8e8; color:#2b2340; font:400 18px/1.75 system-ui,-apple-system,"Segoe UI",sans-serif; }
.vb-guide *, .vb-public-guides * { box-sizing:border-box; }
.vb-guide a, .vb-public-guides a { color:#5432bb; text-underline-offset:4px; }
.vb-guide a:hover, .vb-public-guides a:hover { color:#362079; }
.vb-guide a:focus-visible, .vb-public-guides a:focus-visible, .vb-guide [tabindex]:focus-visible { outline:3px solid #5432bb; outline-offset:5px; border-radius:3px; }
.vb-guide .skip { position:absolute; inset-inline-start:16px; top:-100px; padding:8px 18px; background:white; z-index:10; }
.vb-guide .skip:focus { top:12px; }
.vb-guide .site-header { max-width:1220px; padding:18px 32px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #e9dfc8; }
.vb-guide .site-header img { display:block; object-fit:contain; width:190px; height:80px; }
.vb-guide nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.vb-guide nav a { font-size:15px; font-weight:650; }
.vb-guide nav a[aria-current] { color:#2b2340; text-decoration-thickness:3px; }
.vb-guide main { max-width:1100px; margin:auto; padding:32px 32px 60px; }
.vb-guide .breadcrumbs { font-size:13px; color:#675c77; margin:0 0 50px; }
.vb-guide .eyebrow, .vb-public-guides .eyebrow { color:#6746b4; text-transform:uppercase; letter-spacing:.09em; font-size:12px; font-weight:750; margin-bottom:14px; }
.vb-guide h1 { font-size:clamp(32px,4.5vw,56px); letter-spacing:-.035em; line-height:1.13; max-width:900px; margin:0 0 24px; text-wrap:balance; }
.vb-guide h2 { font-size:27px; line-height:1.25; letter-spacing:-.02em; margin:40px 0 16px; text-wrap:balance; }
.vb-guide .lead { max-width:850px; font-size:21px; line-height:1.65; }
.vb-guide .byline { font-size:13px; color:#675c77; margin:20px 0 42px; }
.vb-guide .article-body { max-width:820px; }
.vb-guide .contents { display:block; padding:20px 24px; margin-bottom:30px; border:1px solid #e9dfc8; border-radius:16px; background:#fff; }
.vb-guide .contents strong { font-size:15px; }
.vb-guide .contents ul { margin:10px 0 0; padding-inline-start:20px; }
.vb-guide .contents li { margin:6px 0; line-height:1.5; }
.vb-guide section[id] { scroll-margin-top:24px; }
.vb-guide p { margin:0 0 20px; }
.vb-guide li { margin:12px 0; padding-inline-start:4px; }
.vb-guide .example { background:#f1eaff; border-left:4px solid #7250d7; border-radius:0 12px 12px 0; padding:22px; font-size:22px; margin-bottom:20px; }
.vb-guide .table-scroll { max-width:100%; overflow:auto; background:white; border:1px solid #e9dfc8; border-radius:16px; }
.vb-guide table { width:100%; border-collapse:collapse; font-size:15px; text-align:start; }
.vb-guide caption { text-align:start; padding:16px; font-size:13px; }
.vb-guide th { background:#f1eaff; color:#392165; }
.vb-guide td, .vb-guide th { border-top:1px solid #e9dfc8; padding:12px 16px; }
.vb-guide dt { font-size:14px; font-weight:700; color:#675c77; }
.vb-guide dd { margin:0 0 18px; }
.vb-guide .cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.vb-guide .card { display:block; padding:28px; border:1px solid #e9dfc8; border-bottom:4px solid #e9dfc8; border-radius:20px; background:#fff; color:#2b2340; text-decoration:none; }
.vb-guide .card:nth-child(3n+2) { background:#f1eaff; }
.vb-guide .card:nth-child(3n) { background:#fff0bb; }
.vb-guide .card h2, .vb-guide .card h3 { margin:0 0 15px; font-size:23px; line-height:1.25; letter-spacing:-.02em; }
.vb-guide .card p { font-size:16px; line-height:1.6; color:#5a5069; }
.vb-guide .card span { display:block; font-size:24px; text-align:end; }
.vb-guide .card:hover { border-color:#7250d7; }
.vb-guide .button, .vb-public-guides .button { display:inline-flex; gap:12px; align-items:center; justify-content:center; padding:14px 22px; min-height:48px; background:#ffc64b; color:#392611; border-radius:12px; border:1px solid #d8a229; border-bottom-width:4px; text-decoration:none; font-size:16px; font-weight:750; }
.vb-guide .button.small { font-size:14px; white-space:nowrap; }
.vb-public-guides .button.secondary { background:#f1eaff; color:#5432bb; border-color:#c6b4ee; }
.vb-guide .actions, .vb-public-guides .actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.vb-guide .next { background:#35204f; color:#fff8e8; padding:32px; border-radius:20px; margin-top:50px; }
.vb-guide .next h2 { margin-top:0; }
.vb-guide .next p { max-width:650px; }
.vb-guide .next a:not(.button) { color:#ffe49c; }
.vb-guide .related { margin-top:30px; }
.vb-guide .references { font-size:14px; border-top:1px solid #e9dfc8; margin-top:40px; }
.vb-guide footer { max-width:1100px; margin:auto; padding:28px 32px; border-top:1px solid #e9dfc8; font-size:13px; display:flex; flex-wrap:wrap; gap:16px 28px; }
.vb-guide footer p { flex-basis:100%; color:#675c77; }
/* The app keeps its viewport. The visible guide section follows it on the front door only. */
body[data-vb-resources="visible"], body:has(#vb-public-guides:not([hidden])) { overflow-y:auto!important; }
.vb-public-guides { background:#fff8e8; color:#2b2340; font:400 17px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif; margin:0; padding:55px max(24px,calc((100vw - 1040px)/2)); border-top:1px solid #e9dfc8; }
.vb-public-guides[hidden] { display:none!important; }
.vb-public-guides h2 { font-size:clamp(26px,4vw,40px); line-height:1.2; letter-spacing:-.025em; margin:0 0 20px; }
.vb-public-guides p { max-width:850px; }
.vb-public-guides nav { margin:28px 0; display:flex; flex-wrap:wrap; gap:15px 24px; }
.vb-public-guides .small-note { color:#675c77; font-size:13px; }
@media(max-width:760px) {
  .vb-guide .site-header { padding:12px 20px 20px; flex-wrap:wrap; gap:14px; }
  .vb-guide .site-header img { width:145px; height:58px; }
  .vb-guide .site-header nav { order:3; flex-basis:100%; gap:12px 20px; }
  .vb-guide main { padding:24px 22px 40px; }
  .vb-guide .breadcrumbs { margin-bottom:32px; }
  .vb-guide .lead { font-size:19px; }
  .vb-guide .cards { grid-template-columns:1fr; }
  .vb-guide .next { padding:25px; }
  .vb-guide td, .vb-guide th { padding:10px; }
  .vb-guide .table-scroll { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .vb-guide *, .vb-public-guides * { scroll-behavior:auto!important; } }
.vb-guide .ad-slot { margin-top:40px; padding-top:12px; border-top:1px solid #eadfca; min-height:120px; }
.vb-guide .ad-slot .ad-label { margin:0 0 8px; color:#675c77; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
/* Course pages: facts from the catalog, the list of native languages, and right-to-left text (Arabic, Urdu). */
.vb-guide .facts { display:grid; grid-template-columns:auto 1fr; gap:8px 28px; margin:0 0 28px; padding:20px 24px; border:1px solid #e9dfc8; border-radius:16px; background:#fff; }
.vb-guide .facts dd { margin:0; font-weight:700; }
.vb-guide .languages { margin-top:44px; padding-top:24px; border-top:1px solid #e9dfc8; }
.vb-guide .languages strong { flex-basis:100%; font-size:15px; }
.vb-guide .languages span { font-size:15px; font-weight:650; }
.vb-public-guides h3 { font-size:19px; margin:28px 0 0; }
.vb-public-guides h3 + nav { margin-top:12px; }
.vb-guide .byline a, .vb-guide .byline time { unicode-bidi:isolate; }
.vb-guide .table-scroll + p { margin-top:20px; }
