:root {
  --vm-bg: #ffffff;
  --vm-tile: #f4f5f7;
  --vm-tile-2: #eceef1;
  --vm-line: #dfe2e6;
  --vm-ink: #101114;
  --vm-muted: #565c65;
  --vm-accent: #c2410c;
  --vm-accent-deep: #9a3412;
  --vm-face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --vm-r: 20px;
  --vm-r-s: 12px;
  --vm-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

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

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

h1, h2, h3 {
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 12px;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 650; }
h3 { font-size: 1.08rem; font-weight: 650; }

p { margin: 0 0 14px; }

a { color: var(--vm-accent-deep); }
a:hover { color: var(--vm-accent); }

img { display: block; height: auto; max-width: 100%; }

table { border-collapse: collapse; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 2px; }

.vm-jump {
  background: var(--vm-ink);
  color: #ffffff;
  left: -9999px;
  padding: 12px 20px;
  position: absolute;
  top: 8px;
  z-index: 70;
}
.vm-jump:focus { left: 8px; }

.vm-shell {
  margin: 0 auto;
  max-width: var(--vm-max);
  padding-left: 20px;
  padding-right: 20px;
}

.vm-top { padding-top: 14px; }

.vm-top__bar {
  align-items: center;
  background: var(--vm-tile);
  border-radius: var(--vm-r);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 auto;
  max-width: var(--vm-max);
  padding: 14px 20px;
}

.vm-top__mark {
  color: var(--vm-ink);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.vm-top__mark em { color: var(--vm-accent); font-style: normal; }

.vm-menu { flex: 1 1 100%; }

.vm-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vm-menu a {
  color: var(--vm-muted);
  display: inline-block;
  font-size: 0.92rem;
  min-height: 44px;
  padding: 11px 0;
  text-decoration: none;
}
.vm-menu a:hover, .vm-menu a.is-active { color: var(--vm-accent-deep); }

.vm-top__mail {
  font-size: 0.88rem;
  margin-left: auto;
}

.vm-path {
  color: var(--vm-muted);
  font-size: 0.83rem;
  padding-top: 18px;
}
.vm-path a { color: var(--vm-muted); }

.vm-pill {
  background: var(--vm-tile-2);
  border-radius: 999px;
  color: var(--vm-accent-deep);
  display: inline-block;
  font-size: 0.78rem;
  margin-bottom: 12px;
  padding: 5px 14px;
}

.vm-lead {
  padding-bottom: 26px;
  padding-top: 30px;
}

.vm-lead__text {
  color: var(--vm-muted);
  font-size: 1.1rem;
  max-width: 60ch;
}

.vm-lead__by {
  color: var(--vm-muted);
  font-size: 0.85rem;
  margin-top: 16px;
}

.vm-lead__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.vm-go {
  align-items: center;
  background: var(--vm-accent-deep);
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 14px 26px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}
.vm-go:hover { background: var(--vm-accent); color: #ffffff; transform: translateY(-1px); }

.vm-go--soft {
  background: var(--vm-tile);
  color: var(--vm-ink);
}
.vm-go--soft:hover { background: var(--vm-tile-2); color: var(--vm-ink); }

.vm-part { padding-bottom: 12px; padding-top: 44px; }

.vm-part__title { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

.vm-part__step {
  background: var(--vm-accent);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 11px;
}

.vm-intro { max-width: 66ch; }

.vm-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 22px;
}

.vm-cell {
  background: var(--vm-tile);
  border-radius: var(--vm-r);
  padding: 20px;
}

.vm-cell--big { background: var(--vm-tile-2); }
.vm-cell__big {
  display: block;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.vm-cell p { color: var(--vm-muted); font-size: 0.95rem; margin-bottom: 0; }

.vm-cell img { border-radius: var(--vm-r-s); margin-top: 14px; }

.vm-cell--flag { background: var(--vm-accent-deep); color: #ffffff; }
.vm-cell--flag h3 { color: #ffffff; }
.vm-cell--flag p { color: #f6e6df; }

.vm-board {
  border: 1px solid var(--vm-line);
  border-radius: var(--vm-r);
  margin-bottom: 10px;
  overflow-x: auto;
}

.vm-board table {
  font-size: 0.92rem;
  min-width: 620px;
  width: 100%;
}

.vm-board caption {
  color: var(--vm-muted);
  font-size: 0.83rem;
  padding: 12px 16px;
  text-align: left;
}

.vm-board th, .vm-board td {
  border-top: 1px solid var(--vm-line);
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
}

.vm-board thead th {
  background: var(--vm-tile);
  font-size: 0.83rem;
  font-weight: 650;
}

.vm-board tbody th { font-weight: 650; }

.vm-board td { font-variant-numeric: tabular-nums; }

.vm-note {
  color: var(--vm-muted);
  font-size: 0.86rem;
  font-style: italic;
  margin-bottom: 26px;
}

.vm-app {
  background: var(--vm-tile);
  border-radius: var(--vm-r);
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  padding: 18px;
}

.vm-app__head { align-items: center; display: flex; gap: 14px; }

.vm-app__icon { border-radius: 14px; height: 52px; width: 52px; }

.vm-app__by { color: var(--vm-muted); display: block; font-size: 0.79rem; }

.vm-app p { color: var(--vm-muted); font-size: 0.95rem; }

.vm-app__link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 44px;
  padding: 11px 0;
}

.vm-pair {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}

.vm-pair--swap .vm-pair__shot { order: -1; }

.vm-pair__shot img { border-radius: var(--vm-r); }

.vm-pair__word p { max-width: 60ch; }

.vm-strip {
  padding-bottom: 30px;
  padding-top: 40px;
}

.vm-strip--tint { background: var(--vm-tile); }

.vm-rail { display: grid; gap: 20px; grid-template-columns: 1fr; }

.vm-rail__fix p { color: var(--vm-muted); font-size: 0.95rem; }

.vm-rail__run h3 { margin-top: 20px; }

.vm-ladder { list-style: none; margin: 0 0 24px; padding: 0; }

.vm-ladder li {
  border-left: 2px solid var(--vm-line);
  margin-bottom: 0;
  margin-left: 16px;
  padding-bottom: 20px;
  padding-left: 26px;
  position: relative;
}
.vm-ladder li:last-child { border-left-color: transparent; padding-bottom: 0; }

.vm-ladder__dot {
  align-items: center;
  background: var(--vm-accent-deep);
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  left: -17px;
  position: absolute;
  top: 0;
  width: 32px;
}

.vm-ladder h3 { margin-bottom: 4px; }
.vm-ladder p { color: var(--vm-muted); font-size: 0.95rem; margin-bottom: 0; }

.vm-poster {
  background: var(--vm-tile-2);
  border-radius: var(--vm-r);
  margin-top: 18px;
  padding: 44px 24px;
}
.vm-poster h1 { max-width: 17ch; }
.vm-poster p { color: var(--vm-muted); max-width: 46ch; }

.vm-column { max-width: 720px; }
.vm-column h2 { margin-top: 32px; }

.vm-skew { display: grid; gap: 20px; grid-template-columns: 1fr; }
.vm-skew__one p, .vm-skew__two p { max-width: 60ch; }

.vm-versus { display: grid; gap: 0; grid-template-columns: 1fr; margin-bottom: 24px; }

.vm-versus__row { border-bottom: 1px solid var(--vm-line); padding: 15px 0; }
.vm-versus__row h3 { margin-bottom: 5px; }
.vm-versus__row p { color: var(--vm-muted); font-size: 0.95rem; margin-bottom: 0; }

.vm-steps ol { counter-reset: vms; list-style: none; padding: 0; }

.vm-steps li {
  margin-bottom: 14px;
  max-width: 66ch;
  padding-left: 38px;
  position: relative;
}

.vm-steps li::before {
  color: var(--vm-accent);
  content: counter(vms, decimal-leading-zero);
  counter-increment: vms;
  font-weight: 700;
  left: 0;
  position: absolute;
  top: 0;
}

.vm-code {
  background: var(--vm-tile);
  border-radius: var(--vm-r-s);
  font-family: var(--vm-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  margin: 0 0 14px;
  overflow-x: auto;
  padding: 16px 18px;
  white-space: pre;
}

.vm-terms { display: grid; gap: 0; grid-template-columns: 1fr; margin: 0 0 24px; }

.vm-terms dt { color: var(--vm-accent-deep); font-weight: 650; padding-top: 14px; }

.vm-terms dd {
  border-bottom: 1px solid var(--vm-line);
  color: var(--vm-muted);
  font-size: 0.95rem;
  margin: 0 0 14px;
  padding-bottom: 14px;
}

.vm-nope { list-style: none; margin: 0 0 24px; padding: 0; }

.vm-nope li { max-width: 66ch; padding-left: 28px; position: relative; }

.vm-nope li::before {
  background: var(--vm-accent);
  border-radius: 999px;
  content: "";
  height: 7px;
  left: 2px;
  position: absolute;
  top: 11px;
  width: 7px;
}

.vm-pic { max-width: 320px; border-radius: var(--vm-r-s); }

.vm-frames { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 26px; }

.vm-frames figure { margin: 0; }
.vm-frames img { border-radius: var(--vm-r-s); width: 100%; }
.vm-frames figcaption { color: var(--vm-muted); font-size: 0.87rem; margin-top: 8px; }

.vm-when { margin-bottom: 26px; }

.vm-when__block {
  background: var(--vm-tile);
  border-radius: var(--vm-r-s);
  margin-bottom: 10px;
  padding: 14px 18px;
}

.vm-when__date { color: var(--vm-accent-deep); font-size: 0.82rem; font-weight: 650; margin-bottom: 3px; }
.vm-when p { margin-bottom: 0; }

.vm-vs { margin-bottom: 26px; }

.vm-vs__item { border-top: 1px solid var(--vm-line); padding: 16px 0; }
.vm-vs__claim { color: var(--vm-muted); font-size: 0.92rem; margin-bottom: 6px; }
.vm-vs__fact { margin-bottom: 0; max-width: 66ch; }

.vm-slips { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 26px; }

.vm-slips__one { background: var(--vm-tile); border-radius: var(--vm-r-s); padding: 16px 18px; }
.vm-slips__one h3 { margin-bottom: 5px; }
.vm-slips__one p { color: var(--vm-muted); font-size: 0.94rem; margin-bottom: 0; }

.vm-draw { margin: 0 0 26px; }
.vm-draw svg { background: var(--vm-tile); border-radius: var(--vm-r); max-width: 640px; width: 100%; }
.vm-draw figcaption { color: var(--vm-muted); font-size: 0.87rem; margin-top: 9px; }

.vm-ask { margin-bottom: 28px; }

.vm-ask details { border-bottom: 1px solid var(--vm-line); }
.vm-ask summary { cursor: pointer; font-weight: 650; min-height: 44px; padding: 15px 0; }
.vm-ask p { color: var(--vm-muted); margin-bottom: 15px; max-width: 68ch; }

.vm-call {
  background: var(--vm-accent-deep);
  border-radius: var(--vm-r);
  color: #ffffff;
  margin-bottom: 46px;
  margin-top: 38px;
  padding: 32px 24px;
}
.vm-call h2 { color: #ffffff; }
.vm-call p { color: #f7e7e0; max-width: 56ch; }
.vm-call .vm-go { background: #ffffff; color: var(--vm-accent-deep); }
.vm-call .vm-go:hover { background: #ffeee7; color: var(--vm-accent-deep); }

.vm-end {
  background: var(--vm-tile);
  padding-bottom: 30px;
  padding-top: 34px;
}

.vm-end__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.vm-end h2 { color: var(--vm-muted); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.vm-end ul { list-style: none; margin: 0; padding: 0; }
.vm-end a { display: inline-block; font-size: 0.92rem; min-height: 44px; padding: 12px 0; }
.vm-end p { color: var(--vm-muted); font-size: 0.92rem; }
.vm-end__date { font-size: 0.82rem; }

.vm-bar {
  background: var(--vm-bg);
  border-top: 3px solid var(--vm-accent);
  bottom: 0;
  display: none;
  left: 0;
  padding: 16px 20px;
  position: fixed;
  right: 0;
  z-index: 50;
}
.vm-bar.is-open { display: block; }

.vm-bar__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto;
  max-width: var(--vm-max);
}
.vm-bar p { flex: 1 1 240px; font-size: 0.9rem; margin-bottom: 0; }
.vm-bar .vm-go { flex: 1 1 auto; }

.vm-fade { opacity: 0; transform: translateY(12px); transition: opacity 300ms ease, transform 300ms ease; }
.vm-fade.is-seen { opacity: 1; transform: none; }

.vm-rail__fix,
.vm-rail__run,
.vm-skew__one,
.vm-skew__two,
.vm-pair__word,
.vm-pair__shot,
.vm-cell { min-width: 0; }

@media (min-width: 560px) {
  .vm-bar .vm-go { flex: 0 0 auto; }
  .vm-frames { grid-template-columns: repeat(2, 1fr); }
  .vm-slips { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
   .vm-frames img, .vm-pair__shot img, .vm-cell img, .vm-pic { width: auto; max-width: 100%; max-height: 520px; }
  .vm-grid { grid-template-columns: repeat(4, 1fr); }
  .vm-cell { grid-column: span 2; }
  .vm-cell--big { grid-column: span 4; }
  .vm-app { grid-template-columns: repeat(2, 1fr); }
  .vm-terms { column-gap: 26px; grid-template-columns: 210px 1fr; }
  .vm-terms dd { margin-bottom: 0; }
  .vm-versus { column-gap: 28px; grid-template-columns: repeat(2, 1fr); }
  .vm-end__grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .vm-menu { flex: 0 1 auto; }
}

@media (min-width: 1000px) {
  body { font-size: 16.5px; }
  .vm-pair { align-items: center; column-gap: 36px; grid-template-columns: 1fr 420px; }
  .vm-pair--swap .vm-pair__shot { order: 0; }
  .vm-pair--swap .vm-pair__word { order: 1; }
  .vm-rail { column-gap: 44px; grid-template-columns: 300px 1fr; }
  .vm-skew { column-gap: 24px; grid-template-columns: repeat(12, 1fr); }
  .vm-skew__one { grid-column: 1 / 8; }
  .vm-skew__two { grid-column: 6 / 13; }
  .vm-frames--trio { grid-template-columns: repeat(3, 1fr); }
  .vm-grid--trio .vm-cell { grid-column: span 4; }
  .vm-app--trio { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .vm-fade { opacity: 1; transform: none; transition: none; }
  .vm-go { transition: none; }
}