/* Via Trading — site styles
   Structure-first stylesheet: neutral, brand-adjacent, easy to re-skin later.
   All colour lives in the custom properties below. */

:root {
  --vt-blue: #1656b8;
  --vt-blue-dark: #0f3d85;
  --vt-blue-ink: #0b2f66;
  --vt-blue-tint: #eef4ff;
  --vt-accent: #f2a33c;
  /* Retired pages — the one place the site shouts. */
  --vt-red: #c2262b;
  --vt-red-dark: #94171c;
  --vt-red-line: #f0c4c6;
  --vt-red-soft: #fdf2f2;
  --vt-ink: #16202e;
  --vt-body: #46536a;
  --vt-muted: #77839a;
  --vt-line: #dfe5ef;
  --vt-line-soft: #eef1f7;
  --vt-bg: #ffffff;
  --vt-bg-soft: #f6f8fc;
  --vt-radius: 10px;
  --vt-shadow: 0 1px 2px rgba(16, 32, 61, .06), 0 12px 32px rgba(16, 32, 61, .10);
  --vt-max: 1240px;
  --vt-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--vt-font);
  font-size: 16px;
  line-height: 1.62;
  color: var(--vt-body);
  background: var(--vt-bg);
}

h1, h2, h3, h4 { color: var(--vt-ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); letter-spacing: -.01em; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1rem; }
a { color: var(--vt-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.vt-wrap { max-width: var(--vt-max); margin: 0 auto; padding: 0 24px; }
.vt-skip {
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--vt-blue);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 var(--vt-radius) 0;
}
.vt-skip:focus { left: 0; }

/* ---------- Header ---------- */
.vt-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--vt-line); }
.vt-header > .vt-wrap { position: relative; }

.vt-top { display: flex; align-items: center; gap: 24px; padding: 14px 0 12px; }
.vt-utils { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.vt-util-row { display: flex; align-items: center; gap: 22px; }
.vt-util-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .855rem; color: var(--vt-body); white-space: nowrap;
}
.vt-util-link:hover { color: var(--vt-blue); text-decoration: none; }
.vt-util-link svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px; border-radius: 6px; font-size: .875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.vt-btn-primary { background: var(--vt-blue); color: #fff; }
.vt-btn-primary:hover { background: var(--vt-blue-dark); color: #fff; text-decoration: none; }
.vt-btn-ghost { border-color: var(--vt-line); color: var(--vt-ink); background: #fff; }
.vt-btn-ghost:hover { border-color: var(--vt-blue); color: var(--vt-blue); text-decoration: none; }

.vt-logo { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; letter-spacing: -.03em; }
.vt-logo:hover { text-decoration: none; }
.vt-logo .via { font-size: 1.85rem; color: var(--vt-blue); line-height: 1; }
.vt-logo .trading { font-size: .64rem; letter-spacing: .34em; color: var(--vt-blue-ink); text-transform: uppercase; font-weight: 700; }

.vt-nav { display: flex; align-items: stretch; gap: 2px; }
.vt-nav-item { position: static; display: flex; }
.vt-nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; min-height: 46px;
  font-size: .95rem; font-weight: 600; color: var(--vt-ink); white-space: nowrap;
  background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  font-family: inherit;
}
.vt-nav-item:first-child .vt-nav-link { padding-left: 0; }
.vt-nav-link:hover { color: var(--vt-blue); text-decoration: none; }
.vt-nav-item.is-open > .vt-nav-link,
.vt-nav-link[aria-current="true"] { color: var(--vt-blue); border-bottom-color: var(--vt-blue); }
.vt-nav-link .caret { width: 9px; height: 9px; opacity: .5; transition: transform .15s ease; }
.vt-nav-item.is-open .caret { transform: rotate(180deg); }

/* ---------- Mega menu ---------- */
.vt-mega {
  position: absolute; top: 100%; left: 24px; right: 24px;
  background: #fff; border: 1px solid var(--vt-line); border-radius: 0 0 var(--vt-radius) var(--vt-radius);
  border-top: 0; box-shadow: var(--vt-shadow); padding: 28px 30px 24px;
  display: none;
}
.vt-nav-item.is-open .vt-mega { display: block; }
.vt-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 0; }
.vt-mega-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.vt-mega-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.vt-mega-col { padding: 4px 26px 18px; border-left: 1px solid var(--vt-line-soft); }
.vt-mega-col:first-child { border-left: 0; padding-left: 4px; }
/* A column may stack more than one heading */
.vt-mega-group + .vt-mega-group { margin-top: 22px; }
.vt-mega-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vt-mega-head .ico {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--vt-blue-tint); color: var(--vt-blue); border-radius: 9px;
}
.vt-mega-head .ico svg { width: 18px; height: 18px; }
.vt-mega-head h3 {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--vt-blue);
}
.vt-mega-list { list-style: none; margin: 0; padding: 0; }
.vt-mega-list li { margin-bottom: 1px; }
.vt-mega-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 2px; border-radius: 6px;
  font-size: .95rem; color: var(--vt-ink);
}
.vt-mega-list a .chev { width: 15px; height: 15px; flex: none; color: var(--vt-blue); opacity: .8; }
.vt-mega-list a:hover { background: var(--vt-blue-tint); color: var(--vt-blue); text-decoration: none; }

/* Callout strip across the bottom of a mega menu */
.vt-mega-promo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding: 18px 22px;
  background: var(--vt-blue-tint); border-radius: var(--vt-radius);
}
.vt-mega-promo .ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  color: var(--vt-blue); background: #fff; border-radius: 50%;
}
.vt-mega-promo .ico svg { width: 21px; height: 21px; }
.vt-mega-promo .txt { flex: 1 1 260px; }
.vt-mega-promo .txt strong { display: block; color: var(--vt-ink); font-size: 1rem; margin-bottom: 2px; }
.vt-mega-promo .txt p { margin: 0; font-size: .9rem; color: var(--vt-body); }
.vt-mega-promo .acts { display: flex; gap: 12px; flex: none; }
.vt-mega-promo .vt-btn { padding: 10px 20px; }
.vt-mega-promo .vt-btn-ghost { background: #fff; border-color: #c3d6f5; color: var(--vt-blue); }
/* Small "Featured:" line under a menu */
.vt-mega-featured {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vt-line-soft);
  font-size: .855rem; color: var(--vt-muted);
}
.vt-mega-featured a { font-weight: 600; }

.vt-mega-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--vt-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.vt-mega-foot p { margin: 0; font-size: .855rem; color: var(--vt-muted); }

/* ---------- Mobile ---------- */
.vt-burger { display: none; }
.vt-burger svg { width: 20px; height: 20px; }
@media (max-width: 1080px) {
  .vt-burger { display: inline-flex; }
  .vt-top { padding: 12px 0; gap: 14px; }
  .vt-utils { flex-direction: row; align-items: center; gap: 18px; }
  .vt-util-row { gap: 18px; }
  .vt-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-top: 1px solid var(--vt-line); box-shadow: var(--vt-shadow);
    max-height: calc(100vh - 90px); overflow-y: auto; padding: 4px 0 20px;
  }
  .vt-header.nav-open .vt-nav { display: flex; }
  .vt-nav-item { display: block; }
  .vt-nav-link,
  .vt-nav-item:first-child .vt-nav-link {
    width: 100%; min-height: 48px; justify-content: space-between; padding: 0 24px;
    border-bottom: 1px solid var(--vt-line-soft); border-left: 3px solid transparent;
  }
  .vt-nav-item.is-open > .vt-nav-link { background: var(--vt-blue-tint); border-left-color: var(--vt-blue); }
  .vt-mega {
    position: static; width: auto; border: 0; border-radius: 0;
    box-shadow: none; padding: 14px 24px 20px; background: var(--vt-bg-soft);
  }
  .vt-mega-grid, .vt-mega-grid.cols-4, .vt-mega-grid.cols-2 { grid-template-columns: 1fr; gap: 14px; }
  .vt-mega-col, .vt-mega-col:first-child { padding: 0; }
  .vt-mega-group + .vt-mega-group { margin-top: 14px; }
  .vt-mega-promo { margin-top: 14px; padding: 14px 16px; }
  .vt-mega-promo .acts { flex: 1 1 100%; }
  .vt-mega-promo .vt-btn { flex: 1 1 auto; }
  .vt-mega-col { border-left: 0; padding: 0; }
}
@media (max-width: 720px) {
  .vt-wrap { padding: 0 16px; }
  .vt-util-link[data-optional="1"] { display: none; }
  .vt-utils { gap: 10px; }
  .vt-util-row { gap: 14px; }
  .vt-util-link span.txt { display: none; }
  .vt-util-link svg { width: 19px; height: 19px; }
  .vt-top { gap: 10px; flex-wrap: nowrap; }
  .vt-logo .via { font-size: 1.45rem; }
  .vt-logo .trading { font-size: .55rem; letter-spacing: .2em; }
  .vt-btn { padding: 8px 12px; font-size: .82rem; }
  .vt-burger { padding: 8px 10px; }
}

/* ---------- Page shell ---------- */
.vt-crumbs { font-size: .82rem; color: var(--vt-muted); padding: 16px 0 0; }
.vt-crumbs a { color: var(--vt-muted); }
.vt-crumbs a:hover { color: var(--vt-blue); }
.vt-crumbs span { margin: 0 7px; opacity: .55; }

.vt-hero { padding: 22px 0 30px; border-bottom: 1px solid var(--vt-line-soft); }
.vt-hero .eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vt-blue); margin: 0 0 8px;
}
.vt-hero .lede { font-size: 1.09rem; color: var(--vt-body); max-width: 66ch; margin: 0; }

main { display: block; }
.vt-section { padding: 34px 0; }
.vt-section + .vt-section { border-top: 1px solid var(--vt-line-soft); }

.vt-grid { display: grid; gap: 18px; }
.vt-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vt-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.vt-card {
  border: 1px solid var(--vt-line); border-radius: var(--vt-radius);
  padding: 20px 22px; background: #fff; display: block;
}
a.vt-card:hover { border-color: var(--vt-blue); box-shadow: var(--vt-shadow); text-decoration: none; }
.vt-card h3 { margin: 0 0 6px; color: var(--vt-ink); }
.vt-card p { margin: 0; font-size: .92rem; color: var(--vt-muted); }
.vt-card .more { display: inline-block; margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--vt-blue); }

/* Content placeholder used on every stub page */
.vt-placeholder {
  border: 1px dashed var(--vt-line); border-radius: var(--vt-radius);
  background: var(--vt-bg-soft); padding: 22px 24px;
}
.vt-placeholder h2 { font-size: 1.05rem; margin: 0 0 10px; }
.vt-placeholder ul { margin: 0; padding-left: 20px; }
.vt-placeholder li { margin-bottom: 6px; font-size: .93rem; }
.vt-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8a6a1f; background: #fdf3e2;
  border: 1px solid #f4dcae; border-radius: 999px; padding: 3px 10px; margin-bottom: 12px;
}

/* ---------- Footer ---------- */
.vt-footer { margin-top: 48px; background: var(--vt-blue-ink); color: #c9d6ee; }
.vt-footer a { color: #c9d6ee; }
.vt-footer a:hover { color: #fff; }
.vt-footer-grid {
  display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px;
  padding: 44px 0 34px;
}
.vt-footer h4 {
  color: #fff; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px;
}
.vt-footer ul { list-style: none; margin: 0; padding: 0; }
.vt-footer li { margin-bottom: 8px; font-size: .89rem; }
.vt-footer .about p { font-size: .89rem; max-width: 34ch; }
.vt-footer .vt-logo .via { color: #fff; }
.vt-footer .vt-logo .trading { color: #9fb6dd; }
.vt-footer-base {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0 30px;
  display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: .82rem;
}
.vt-footer-base .spacer { flex: 1 1 auto; }
@media (max-width: 900px) { .vt-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vt-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Menu map page ----------
   All six menus shown open at once, each drawn the way the header draws it. */
.vt-mm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 22px; }
.vt-mm-card {
  border: 1px solid var(--vt-line); border-radius: var(--vt-radius);
  background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 61, .05); overflow: hidden;
}
.vt-mm-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 10px; border-bottom: 1px solid var(--vt-line-soft);
}
.vt-mm-bar .vt-logo { pointer-events: none; }
.vt-mm-bar .vt-logo .via { font-size: 1.3rem; }
.vt-mm-bar .vt-logo .trading { font-size: .5rem; letter-spacing: .26em; }
.vt-mm-count {
  margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--vt-muted);
  background: var(--vt-bg-soft); border: 1px solid var(--vt-line);
  border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums;
}
.vt-mm-tabs {
  display: flex; padding: 0 10px; overflow-x: auto;
  border-bottom: 1px solid var(--vt-line);
}
.vt-mm-tab {
  padding: 9px 7px 7px; font-size: .705rem; font-weight: 600; white-space: nowrap;
  color: var(--vt-muted); border-bottom: 2px solid transparent;
}
.vt-mm-tab:hover { color: var(--vt-blue); text-decoration: none; }
.vt-mm-tab.is-active { color: var(--vt-blue); border-bottom-color: var(--vt-blue); }
.vt-mm-panel { padding: 18px 18px 16px; }
.vt-mm-panel .vt-mega-grid { gap: 4px 10px; }
.vt-mm-panel .vt-mega-col { padding: 0 10px; }
.vt-mm-panel .vt-mega-head { gap: 8px; margin-bottom: 9px; }
.vt-mm-panel .vt-mega-head .ico { width: 24px; height: 24px; border-radius: 6px; }
.vt-mm-panel .vt-mega-head .ico svg { width: 14px; height: 14px; }
.vt-mm-panel .vt-mega-head h3 { font-size: .655rem; letter-spacing: .07em; }
.vt-mm-panel .vt-mega-list { padding-left: 0; }
.vt-mm-panel .vt-mega-list a { font-size: .8rem; padding: 3px 6px; margin-left: -6px; }
@media (max-width: 620px) {
  .vt-mm-grid { grid-template-columns: 1fr; }
  .vt-mm-panel .vt-mega-col { padding: 0; }
}

/* ---------- Sitemap page ---------- */
.vt-map-section { margin-bottom: 30px; }
.vt-map-section > h2 { display: flex; align-items: baseline; gap: 10px; }
.vt-map-section > h2 small { font-weight: 500; font-size: .82rem; color: var(--vt-muted); }
.vt-map-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.vt-map-cols h3 {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-blue);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--vt-line);
}
.vt-map-cols ul { list-style: none; margin: 0; padding: 0; }
.vt-map-cols li { margin-bottom: 5px; font-size: .9rem; }

/* ---------- Editable content region ---------- */
[data-content] { min-height: 60px; }
[data-content] > :first-child { margin-top: 0; }
[data-content] > :last-child { margin-bottom: 0; }
[data-content].is-empty::before {
  content: attr(data-empty);
  display: block; color: var(--vt-muted); font-style: italic;
}
[data-content] blockquote {
  margin: 0 0 1rem; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--vt-blue); color: var(--vt-ink);
}
[data-content] hr { border: 0; border-top: 1px solid var(--vt-line); margin: 28px 0; }
[data-content] img { border-radius: var(--vt-radius); }
.vt-table, [data-content] table {
  width: 100%; border-collapse: collapse; margin: 0 0 1rem;
  font-size: .94rem; display: block; overflow-x: auto;
}
.vt-table th, [data-content] th,
.vt-table td, [data-content] td {
  border: 1px solid var(--vt-line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.vt-table th, [data-content] th { background: var(--vt-bg-soft); color: var(--vt-ink); font-weight: 600; }

/* ---------- WYSIWYG editor chrome ---------- */
.vt-edit-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  background: var(--vt-blue); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 22px; font: 600 .9rem var(--vt-font); cursor: pointer;
  box-shadow: 0 6px 20px rgba(11, 47, 102, .3);
}
.vt-edit-launch:hover { background: var(--vt-blue-dark); }
/* The toolbar occupies the same corner while editing */
body.vt-editing .vt-edit-launch { display: none; }

body.vt-editing { padding-bottom: 76px; }
body.vt-editing [data-content] {
  outline: 2px dashed var(--vt-blue); outline-offset: 14px; border-radius: 4px;
}
body.vt-editing [data-content]:focus { outline-style: solid; }

.vt-editbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 310;
  background: #fff; border-top: 1px solid var(--vt-line);
  box-shadow: 0 -6px 24px rgba(16, 32, 61, .12);
}
.vt-editbar-inner {
  max-width: var(--vt-max); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vt-edit-badge {
  background: var(--vt-blue-tint); color: var(--vt-blue); border-radius: 999px;
  padding: 3px 12px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-right: 6px;
}
.vt-edit-btn {
  min-width: 34px; height: 34px; padding: 0 9px; cursor: pointer;
  background: #fff; border: 1px solid var(--vt-line); border-radius: 6px;
  font: 600 .85rem var(--vt-font); color: var(--vt-ink);
}
.vt-edit-btn:hover { border-color: var(--vt-blue); color: var(--vt-blue); background: var(--vt-blue-tint); }
.vt-edit-sep { width: 1px; height: 22px; background: var(--vt-line); margin: 0 5px; }
.vt-edit-spacer { flex: 1 1 auto; }
.vt-edit-status { font-size: .8rem; color: var(--vt-muted); margin-right: 8px; white-space: nowrap; }
@media (max-width: 720px) {
  .vt-editbar-inner { padding: 8px 12px; gap: 4px; }
  .vt-edit-status { width: 100%; order: 99; }
}

/* ---------- Content status on link cards ---------- */
.vt-card h3 { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.vt-status {
  flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 999px; padding: 3px 9px;
  color: var(--vt-muted); background: var(--vt-bg-soft); border: 1px solid var(--vt-line);
}
/* How far a page has got: green once written, then deepening to blue for
   improved and solid for final, so a finished page reads differently from one
   that merely has words on it. */
.vt-status.is-written { color: #17683f; background: #e8f6ee; border-color: #bfe4cd; }
.vt-status.is-improved { color: #0f3d85; background: #e8f0ff; border-color: #c3d6f7; }
.vt-status.is-final { color: #fff; background: var(--vt-blue-ink); border-color: var(--vt-blue-ink); }
.vt-tally-ahead { color: var(--vt-muted); font-weight: 400; }
.vt-edit-stage { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #cfd8e6; }
.vt-edit-stage select {
  font: inherit; font-size: .82rem; padding: 4px 6px; border-radius: 6px;
  border: 1px solid #46536a; background: #1d2635; color: #fff;
}
.vt-card.has-content { border-left: 3px solid #2f9e63; }
.vt-peek {
  margin: 0; font-size: .88rem; color: var(--vt-body);
  border-left: 2px solid var(--vt-line); padding-left: 10px;
}
.vt-tally { font-size: .88rem; color: var(--vt-muted); margin: 0 0 4px; }
.vt-tally strong { color: var(--vt-ink); font-variant-numeric: tabular-nums; }

/* Standing reminder that editor content is local to this browser */
.vt-local-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 290;
  max-width: 340px; padding: 12px 16px; font-size: .8rem; line-height: 1.5;
  color: #7a5b12; background: #fff8e8; border: 1px solid #f0dca8;
  border-radius: var(--vt-radius); box-shadow: 0 6px 20px rgba(16, 32, 61, .12);
}
.vt-local-note strong { display: block; color: #5e460d; margin-bottom: 2px; }
body.vt-editing .vt-local-note { bottom: 76px; }
@media (max-width: 720px) { .vt-local-note { display: none; } }

/* ---------- Move content in and out ---------- */
.vt-transfer {
  position: fixed; inset: 0; z-index: 320; display: grid; place-items: center;
  background: rgba(11, 47, 102, .45); padding: 24px;
}
.vt-transfer-box {
  background: #fff; border-radius: var(--vt-radius); box-shadow: var(--vt-shadow);
  width: min(860px, 100%); max-height: 86vh; overflow: auto; padding: 24px 26px 20px;
}
.vt-transfer-box h2 { margin: 0 0 6px; font-size: 1.2rem; }
.vt-transfer-box p { font-size: .9rem; color: var(--vt-muted); margin: 0 0 14px; }
#vt-transfer-data {
  width: 100%; height: 320px; resize: vertical; padding: 12px 14px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--vt-ink); background: var(--vt-bg-soft);
  border: 1px solid var(--vt-line); border-radius: 8px;
}
.vt-transfer-acts {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.vt-transfer-spacer { flex: 1 1 auto; }
.vt-transfer-status { font-size: .85rem; color: var(--vt-blue); }

/* ---------- Content pasted in from the old site ----------
   Copy taken from viatrading.com arrives carrying Bootstrap grid classes and
   inline pixel widths measured against a 1400px layout (width: 1393.98px and
   the like). Dropped into this narrower column those overflow the page
   sideways. These rules neutralise the imported grid only — they do not touch
   ordinary content — so pasted copy reflows instead of breaking the layout.
   Delete this block once the old markup has been cleaned out of the content. */
[data-content] .container,
[data-content] .container-fluid,
[data-content] .row,
[data-content] [class^="col"],
[data-content] [class*=" col"] {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 1 1 240px !important;
}
[data-content] .row { display: flex !important; flex-wrap: wrap !important; gap: 0 24px; }
[data-content] section { padding-bottom: 0 !important; background: none !important; }
[data-content] table { width: 100% !important; min-width: 520px; }
[data-content] img { width: auto !important; max-width: 100% !important; height: auto; }
[data-content] ul.fa-ul { margin: 0 0 1rem !important; padding-left: 20px !important; list-style: disc !important; }
[data-content] ul.fa-ul li { line-height: 1.6 !important; }
[data-content] .breadcrumb, [data-content] nav[aria-label="breadcrumb"] { display: none !important; }
/* Long unbroken strings — product codes, pasted URLs — wrap rather than push. */
[data-content] { overflow-wrap: break-word; }
/* On a phone the imported markup is still wider than the screen: data tables
   need their width to stay readable, and some blocks carry hard pixel sizes.
   Let the content column scroll inside itself instead of dragging the whole
   page sideways, which would move the header and footer with it. */
@media (max-width: 760px) {
  [data-content] { overflow-x: auto; max-width: 100%; }
  [data-content] table { min-width: 460px; }
}

/* ---------- Retired pages ----------
   Red throughout, so what has fallen out of the menu never reads as part of
   the live structure. Deliberately loud: these are the pages holding content
   that would otherwise be lost. */
.vt-retired {
  margin: 34px 0 8px; padding: 20px 22px;
  border: 1px solid var(--vt-red-line); border-left: 4px solid var(--vt-red);
  border-radius: var(--vt-radius); background: var(--vt-red-soft);
}
.vt-retired-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.vt-retired-head h2 { margin: 0; font-size: 1.12rem; color: var(--vt-red); }
.vt-retired-head .vt-tally { margin: 0; color: var(--vt-red); }
.vt-retired-head .vt-tally strong { color: var(--vt-red); }
.vt-retired-note { margin: 6px 0 16px; font-size: .9rem; color: var(--vt-muted); max-width: 70ch; }
.vt-retired-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vt-retired-row {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px 14px; background: var(--vt-bg);
  border: 1px solid var(--vt-red-line); border-radius: 8px;
}
.vt-retired-main { flex: 1 1 320px; min-width: 0; }
.vt-retired-name { color: var(--vt-red); font-weight: 600; }
.vt-retired-name:hover { color: var(--vt-red-dark); }
.vt-retired-sec { margin-left: 8px; font-size: .78rem; color: var(--vt-muted); }
.vt-retired-row .vt-status { margin-left: 8px; }
.vt-retired-row .vt-status.is-written {
  background: var(--vt-red-soft); color: var(--vt-red-dark); border-color: var(--vt-red-line);
}
.vt-retired-row .vt-peek { margin: 6px 0 0; }
.vt-retired-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vt-retired-move { font-size: .85rem; color: var(--vt-muted); display: flex; align-items: center; gap: 6px; }
.vt-retired-move select {
  max-width: 240px; padding: 6px 8px; font: inherit; font-size: .85rem;
  border: 1px solid var(--vt-line); border-radius: 6px; background: var(--vt-bg); color: var(--vt-ink);
}
.vt-retired-del { background: var(--vt-red); color: #fff; border: 1px solid var(--vt-red); }
.vt-retired-del:hover { background: var(--vt-red-dark); border-color: var(--vt-red-dark); }
.vt-retired-row.is-moved { opacity: .55; }
.vt-retired-banner {
  background: var(--vt-red-soft); border-bottom: 1px solid var(--vt-red-line);
  padding: 12px 0; font-size: .92rem; color: var(--vt-red-dark);
}
.vt-retired-banner strong { color: var(--vt-red); }
.vt-retired-banner a { color: var(--vt-red-dark); text-decoration: underline; }

/* ---------- Home: every section opened out, with progress ---------- */
.vt-home-sec { padding: 26px 0; border-top: 1px solid var(--vt-line-soft); }
.vt-home-sec:first-child { border-top: 0; padding-top: 8px; }
.vt-home-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.vt-home-head h2 { margin: 0; font-size: 1.28rem; }
.vt-home-head h2 a { color: var(--vt-ink); }
.vt-home-head h2 a:hover { color: var(--vt-blue); text-decoration: none; }
.vt-home-head .vt-tally { margin: 0; }
.vt-home-blurb { margin: 4px 0 18px; font-size: .92rem; color: var(--vt-muted); max-width: 70ch; }
.vt-home-col { padding: 0 22px; border-left: 1px solid var(--vt-line-soft); }
.vt-home-col:first-child { border-left: 0; padding-left: 0; }
.vt-home-group + .vt-home-group { margin-top: 20px; }
.vt-home-sec .vt-mega-head { margin-bottom: 10px; }
.vt-home-sec .vt-mega-head .ico { width: 28px; height: 28px; border-radius: 7px; }
.vt-home-sec .vt-mega-head .ico svg { width: 15px; height: 15px; }
.vt-home-sec .vt-mega-head h3 { font-size: .7rem; }
.vt-home-list { list-style: none; margin: 0; padding: 0; }
.vt-home-list li { border-bottom: 1px solid var(--vt-line-soft); }
.vt-home-list li:last-child { border-bottom: 0; }
.vt-home-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 6px 7px 0; font-size: .9rem; color: var(--vt-ink);
}
.vt-home-list a:hover { color: var(--vt-blue); text-decoration: none; }
.vt-home-list .vt-status { flex: none; }
@media (max-width: 720px) {
  .vt-home-col, .vt-home-col:first-child { padding: 0; }
  .vt-home-group + .vt-home-group { margin-top: 16px; }
}
/* status tag trailing a sitemap link */
.vt-map-cols li > a .vt-status { margin-left: 8px; vertical-align: 1px; }