/* ---------- value bar options 1-9 (after the hero) ---------- */
.vb { --r: var(--bn-red, #7d1f1f); --ink: var(--bn-ink, #1a1614); --mut: var(--bn-muted, #5c5652); --ln: var(--bn-line, rgba(26,22,20,.12));
  --k: #fff; position: relative; padding: 2.4rem clamp(1rem, 4vw, 3.5rem) 2.6rem; font-family: var(--bn-sans); color: var(--ink); background: #fff; }
.vb + .vb { border-top: 1px dashed rgba(26,22,20,.18); }
.vb ul, .vb ol { list-style: none; margin: 0; padding: 0; }
.vb-tag { position: absolute; top: .7rem; left: clamp(1rem, 4vw, 3.5rem); margin: 0; z-index: 3; font: 600 11px/1 var(--bn-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.vb-tag b { display: inline-block; padding: .35rem .6rem; margin-right: .45rem; background: #111; color: #fff; border-radius: 99px; letter-spacing: .1em; }
.vb strong { font-weight: 600; }
.vb small { display: block; color: var(--mut); font-size: .86rem; line-height: 1.4; margin-top: .2rem; }
.vb em { font-family: var(--bn-serif); font-style: italic; font-weight: 500; }
.vb-ic { display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #f6eeec; color: var(--r); }
.vb-ic svg { width: 1.15rem; height: 1.15rem; }
.vb-it { display: flex; align-items: center; gap: .8rem; }
.vb-it strong { font-size: 1rem; }

/* the 10-years mark */
.vb-mark { display: block; height: auto; overflow: visible; }
.vb-mark .m1 { fill: var(--r); }
.vb-mark .mk { fill: var(--k); }
.vb-mark .m0 { fill: none; stroke: var(--r); stroke-width: 124; }
.vb-mark .my { font: 700 86px/1 var(--bn-sans); fill: var(--r); letter-spacing: -2px; }
.vb-draw .m0 { stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 472px 280px; transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .2s; }
.vb-draw .m1, .vb-draw .my { opacity: 0; transition: opacity .6s .1s; }
.vb-draw .my { transition-delay: 1.4s; }
.vb-in .vb-draw .m0 { stroke-dashoffset: 0; }
.vb-in .vb-draw .m1, .vb-in .vb-draw .my { opacity: 1; }

/* reveal */
.vb-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--d, 0s), transform .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.vb-rv.vb-in { opacity: 1; transform: none; }

/* 1 classic strip */
.vb1__in { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); max-width: 1380px; margin: 1.2rem auto 0; padding: 1.4rem 0; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.vb1 .vb-mark { width: 104px; }
.vb1__lead { margin: 0; line-height: 1.1; padding-right: clamp(1rem, 2.5vw, 2.5rem); border-right: 1px solid var(--ln); }
.vb1__lead strong { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin-bottom: .35rem; }
.vb1__lead em { font-size: 1.7rem; }
.vb1 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

/* 2 red band */
.vb2 { background: linear-gradient(110deg, #171717 0%, #5d1614 45%, #7d1f1f 100%); color: #fff; }
.vb2 .vb-tag { color: rgba(255,255,255,.7); } .vb2 .vb-tag b { background: #fff; color: #111; }
.vb2__in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); max-width: 1380px; margin: 1rem auto 0; }
.vb2__big { display: flex; align-items: flex-start; font: 500 clamp(5rem, 9vw, 8.5rem)/.82 var(--bn-serif); letter-spacing: -.04em; }
.vb2__big sup { font-size: .45em; margin: .1em .15em 0 .02em; color: #e8b9b4; }
.vb2__yr { align-self: flex-end; font: 500 .82rem/1.35 var(--bn-sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem .6rem; color: rgba(255,255,255,.8); }
.vb2 ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.vb2 .vb-it { padding: .4rem 1.4rem; border-left: 1px solid rgba(255,255,255,.2); }
.vb2 .vb-ic { background: rgba(255,255,255,.12); color: #fff; }
.vb2 small { color: rgba(255,255,255,.7); }

/* 3 ticker */
.vb3 { padding-left: 0; padding-right: 0; background: #1a1614; color: #fff; --k: #1a1614; }
.vb3 .vb-tag { color: rgba(255,255,255,.6); } .vb3 .vb-tag b { background: #fff; color: #111; }
.vb3 { --r: #e3a49c; }
.vb3__in { display: flex; align-items: center; margin-top: 1rem; }
.vb3 .vb-mark { width: 92px; flex: none; margin: 0 1.6rem 0 clamp(1rem, 4vw, 3.5rem); position: relative; z-index: 2; }
.vb3__win { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vb3__track { display: flex; width: max-content; animation: vb3 32s linear infinite; }
.vb3__win:hover .vb3__track { animation-play-state: paused; }
.vb3__track li { display: flex; align-items: center; gap: .75rem; padding: 0 2.4rem; white-space: nowrap; position: relative; }
.vb3__track li::after { content: "\2726"; position: absolute; right: -.4rem; color: #e3a49c; font-size: .8rem; }
.vb3__track strong { font: 500 1.65rem/1 var(--bn-serif); }
.vb3__track small { margin: 0; color: rgba(255,255,255,.6); }
.vb3 .vb-ic { background: rgba(255,255,255,.08); color: #e3a49c; width: 2.3rem; height: 2.3rem; }
@keyframes vb3 { to { transform: translateX(-50%); } }

/* 4 editorial split */
.vb4 { background: #faf6f4; }
.vb4__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; max-width: 1380px; margin: 1rem auto 0; }
.vb4__l { display: flex; align-items: center; gap: 1.2rem; }
.vb4__ten { font: 600 clamp(7rem, 13vw, 12rem)/.78 var(--bn-serif); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--r); background: linear-gradient(180deg, transparent 52%, rgba(125,31,31,.14) 52%); -webkit-background-clip: text; background-clip: text; }
.vb4__l p { margin: 0; font-size: 1.05rem; line-height: 1.3; max-width: 11rem; }
.vb4__l p em { font-size: 1.9rem; color: var(--r); }
.vb4 ol { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.vb4 ol li { padding: 1rem 1.2rem 0 0; }
.vb4 ol li + li { padding-left: 1.2rem; border-left: 1px solid var(--ln); }
.vb4 .n { display: block; font: italic 500 1rem var(--bn-serif); color: var(--r); margin-bottom: .9rem; }
.vb4 ol strong { font: 500 1.5rem/1.1 var(--bn-serif); }

/* 5 floating pill, lifted over the hero's edge */
.vb5 { background: linear-gradient(180deg, #f4ecec 0 50%, #fff 50%); padding-top: 2.8rem; }
.vb5__pill { display: flex; align-items: center; gap: 1.4rem; max-width: 1240px; margin: 0 auto; padding: .9rem .9rem .9rem 1.6rem; background: #fff; border-radius: 999px; box-shadow: 0 24px 60px -24px rgba(26,22,20,.35), 0 0 0 1px var(--ln); }
.vb5 .vb-mark { width: 74px; flex: none; }
.vb5 ul { display: flex; flex: 1; justify-content: space-between; gap: 1rem; }
.vb5 .vb-it { gap: .6rem; } .vb5 .vb-it strong { font-size: .92rem; } .vb5 small { font-size: .78rem; }
.vb5 .vb-ic { width: 2.2rem; height: 2.2rem; }
.vb5 li + li { padding-left: 1rem; border-left: 1px solid var(--ln); }
.vb5__go { flex: none; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--r); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; transition: transform .3s, background .3s; }
.vb5__go:hover { transform: rotate(-8deg) scale(1.06); background: #5d1614; }

/* 6 four cards, red hero card */
.vb6__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 1380px; margin: 1.3rem auto 0; }
.vb6__c { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 13.5rem; padding: 1.4rem; border: 1px solid var(--ln); border-radius: 22px; background: #fff; overflow: hidden; transition: opacity .8s var(--d,0s), transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s; }
.vb6__c:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(125,31,31,.45); border-color: rgba(125,31,31,.3); }
.vb6__c .vb-ic { position: absolute; top: 1.3rem; left: 1.3rem; }
.vb6__c strong { font: 500 1.55rem/1.1 var(--bn-serif); }
.vb6__n { position: absolute; top: 1.1rem; right: 1.3rem; font: italic 500 1.1rem var(--bn-serif); color: #c9b9b4; }
.vb6__c--red { --k: #7d1f1f; --r: #fff; background: radial-gradient(120% 90% at 100% 0%, #a12d2a, #7d1f1f 55%, #4d1210); border: 0; color: #fff; }
.vb6__c--red .vb-mark { position: absolute; top: 1.3rem; left: 1.3rem; width: 96px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.vb6__c--red:hover .vb-mark { transform: scale(1.08) rotate(-4deg); }
.vb6__c--red small { color: rgba(255,255,255,.75); }

/* 7 bento */
.vb7 { background: #faf6f4; }
.vb7__g { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; max-width: 1380px; margin: 1.3rem auto 0; }
.vb7__g article { position: relative; border-radius: 24px; background: #fff; padding: 1.5rem; box-shadow: 0 0 0 1px var(--ln); overflow: hidden; }
.vb7__g h3 { margin: .9rem 0 .35rem; font: 500 1.6rem/1.08 var(--bn-serif); }
.vb7__g p { margin: 0; color: var(--mut); font-size: .92rem; line-height: 1.5; }
.vb7__big { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.vb7__big .vb-mark { width: min(260px, 70%); }
.vb7__big h3 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.vb7__big h3 em { color: var(--r); }
.vb7__k { font-size: .74rem !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--r) !important; }
.vb7__sw { display: flex; gap: .35rem; margin-top: 1rem; }
.vb7__sw i { width: 1.6rem; height: 2.4rem; border-radius: .8rem .8rem .35rem .35rem; background: var(--c); transition: transform .3s; }
.vb7__sw i:nth-child(1) { --c: #7d1f1f; } .vb7__sw i:nth-child(2) { --c: #c98f86; } .vb7__sw i:nth-child(3) { --c: #ead7d1; } .vb7__sw i:nth-child(4) { --c: #1a1614; } .vb7__sw i:nth-child(5) { --c: #b6a49c; }
.vb7__c:hover .vb7__sw i { transform: translateY(-5px); } .vb7__sw i:nth-child(2) { transition-delay: .04s; } .vb7__sw i:nth-child(3) { transition-delay: .08s; } .vb7__sw i:nth-child(4) { transition-delay: .12s; } .vb7__sw i:nth-child(5) { transition-delay: .16s; }
.vb7__q { margin-top: 1rem !important; font: italic 500 1.15rem/1.3 var(--bn-serif) !important; color: var(--ink) !important; }
.vb7__map { grid-column: span 2; background: #1a1614 !important; color: #fff; box-shadow: none !important;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(28deg, transparent 47%, rgba(227,164,156,.18) 47% 49%, transparent 49%), linear-gradient(-62deg, transparent 58%, rgba(255,255,255,.08) 58% 59%, transparent 59%) !important;
  background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100% !important; }
.vb7__map p { color: rgba(255,255,255,.65); }
.vb7__map .vb-ic { background: rgba(255,255,255,.1); color: #e3a49c; }
.vb7__dot { position: absolute; right: 22%; top: 46%; width: 14px; height: 14px; border-radius: 50%; background: #e3a49c; }
.vb7__dot::before, .vb7__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #e3a49c; animation: vb7p 2.4s ease-out infinite; }
.vb7__dot::after { animation-delay: 1.2s; }
@keyframes vb7p { to { transform: scale(5); opacity: 0; } }

/* 8 dark glow cards */
.vb8 { background: #131010; color: #fff; --k: #1d1817; --r: #e3a49c; padding-bottom: 3rem; }
.vb8 .vb-tag { color: rgba(255,255,255,.55); } .vb8 .vb-tag b { background: #fff; color: #111; }
.vb8__head { max-width: 1380px; margin: 1.4rem auto 1.4rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vb8__head p { margin: 0; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: #e3a49c; font-weight: 600; }
.vb8__head h2 { margin: 0; font: 500 clamp(1.8rem, 3vw, 2.7rem)/1.05 var(--bn-serif); }
.vb8__head em { color: #e3a49c; }
.vb8__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 1380px; margin: 0 auto; perspective: 900px; }
.vb8__c { --mx: 50%; --my: 50%; position: relative; min-height: 14rem; padding: 1.5rem; border-radius: 20px; background: #1d1817; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; overflow: hidden; transform-style: preserve-3d; transition: opacity .8s var(--d,0s), transform .25s ease-out; isolation: isolate; }
.vb8__c::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(227,164,156,.9), rgba(255,255,255,.08) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.vb8__c::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(125,31,31,.45), transparent 65%); opacity: 0; transition: opacity .35s; }
.vb8__c:hover::after { opacity: 1; }
.vb8__c .vb-mark { width: 92px; position: absolute; top: 1.4rem; left: 1.4rem; }
.vb8__c .vb-ic { position: absolute; top: 1.4rem; left: 1.4rem; background: rgba(255,255,255,.07); color: #e3a49c; }
.vb8__c strong { font: 500 1.5rem/1.1 var(--bn-serif); }
.vb8 small { color: rgba(255,255,255,.6); }

/* 9 polish swatch cards, fanned */
.vb9 { background: radial-gradient(80% 120% at 85% 50%, #f6e9e6, #fff 70%); overflow: hidden; }
.vb9__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 2rem; align-items: center; max-width: 1380px; margin: 1.2rem auto 0; }
.vb9__k { margin: 0 0 .6rem; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--r); }
.vb9__txt h2 { margin: 0 0 .6rem; font: 500 clamp(2rem, 3.4vw, 3.1rem)/1.02 var(--bn-serif); }
.vb9__txt h2 em { color: var(--r); }
.vb9__txt p:last-child { margin: 0; color: var(--mut); font-size: .92rem; }
.vb9__fan { position: relative; display: flex; justify-content: center; padding: 1.4rem 0 1rem; }
.vb9__c { width: 13.5rem; flex: none; margin-left: -2.2rem; padding: .7rem .7rem 1.1rem; background: #fff; border-radius: 18px; box-shadow: 0 22px 44px -22px rgba(26,22,20,.45), 0 0 0 1px var(--ln); transform: rotate(var(--r)) translateY(calc(var(--x) * 0px)); transform-origin: 50% 120%; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s; opacity: 0; translate: 0 30px; }
.vb9__c:first-child { margin-left: 0; }
.vb9.vb-in .vb9__c { opacity: 1; translate: 0 0; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s, opacity .7s calc(var(--x) * .12s), translate .9s cubic-bezier(.2,.8,.2,1) calc(var(--x) * .12s); }
.vb9__fan:hover .vb9__c { transform: rotate(calc(var(--r) * .5)) translateY(6px); }
.vb9__fan .vb9__c:hover { transform: rotate(0deg) translateY(-22px) scale(1.04); z-index: 5; box-shadow: 0 40px 70px -28px rgba(125,31,31,.55), 0 0 0 1px var(--ln); }
.vb9__sw { display: grid; place-items: center; height: 8.2rem; border-radius: 12px; margin-bottom: .9rem; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); position: relative; overflow: hidden; }
.vb9__sw::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); transform: translateX(-60%); transition: transform .9s; }
.vb9__c:hover .vb9__sw::after { transform: translateX(60%); }
.vb9__sw .vb-mark { width: 104px; --r: #fff; --k: #7d1f1f; }
.vb9__sw .vb-ic { width: 3.4rem; height: 3.4rem; background: rgba(255,255,255,.25); color: #fff; }
.vb9__sw .vb-ic svg { width: 1.5rem; height: 1.5rem; }
.vb9__c strong, .vb9__c small { padding: 0 .35rem; }
.vb9__c strong { display: block; font: 500 1.3rem/1.1 var(--bn-serif); }
.vb9__c small { font-size: .8rem; }
.vb9__c i { display: block; margin: .8rem .35rem 0; padding-top: .6rem; border-top: 1px solid var(--ln); font: italic 500 .95rem var(--bn-serif); color: var(--mut); }

@media (max-width: 1100px) {
  .vb1__in { grid-template-columns: auto 1fr; } .vb1 ul { grid-column: 1 / -1; }
  .vb2__in, .vb4__in, .vb9__in { grid-template-columns: 1fr; }
  .vb5__pill { flex-wrap: wrap; border-radius: 28px; } .vb5 ul { flex-wrap: wrap; } .vb5__go { display: none; }
  .vb6__g, .vb8__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb7__g { grid-template-columns: 1fr 1fr; } .vb7__big { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 640px) {
  .vb { padding-top: 2.6rem; }
  .vb1__in { grid-template-columns: 1fr; } .vb1__lead { border: 0; padding: 0; }
  .vb1 ul, .vb2 ul, .vb4 ol { grid-template-columns: 1fr; gap: .9rem; }
  .vb2 .vb-it { border-left: 0; padding: 0; }
  .vb4 ol li, .vb4 ol li + li { padding: .9rem 0 0; border-left: 0; }
  .vb5 ul { flex-direction: column; } .vb5 li + li { border: 0; padding: 0; }
  .vb6__g, .vb8__g { grid-template-columns: 1fr; }
  .vb7__g { grid-template-columns: 1fr; } .vb7__big, .vb7__map { grid-column: auto; }
  .vb3 .vb-mark { width: 64px; margin-right: .6rem; }
  .vb9__fan { flex-wrap: wrap; gap: 1rem; } .vb9__c { margin-left: 0; width: calc(50% - .5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .vb3__track { animation: none; } .vb-rv, .vb9__c { opacity: 1 !important; transform: none !important; translate: none !important; }
}

/* fixes: lining numerals in the serif, bigger "years", tidy pill, swatch icon contrast */
.vb, .vb * { font-variant-numeric: lining-nums; }
.vb-mark .my { font-size: 104px; letter-spacing: -3px; }
.vb5 .vb-it strong { white-space: nowrap; }
.vb9__sw .vb-ic { background: rgba(26,22,20,.22); }
@media (max-width: 640px) { .vb9__c, .vb9__fan:hover .vb9__c { transform: rotate(calc(var(--r) * .3)); } .vb9__c strong { font-size: 1.15rem; } }

/* ---------- option 7 as a moving bar (live) ---------- */
.vb7--bar { padding: 1.6rem 0 1.8rem; }
.vb7__win { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.vb7__track { display: flex; gap: 1rem; width: max-content; padding: .4rem 0 .6rem; animation: vb7m 46s linear infinite; }
.vb7__win:hover .vb7__track { animation-play-state: paused; }
@keyframes vb7m { to { transform: translateX(calc(-50% - .5rem)); } }
.vb7--bar article { flex: none; width: 340px; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; border-radius: 24px; background: #fff; padding: 1.5rem; box-shadow: 0 0 0 1px var(--ln); overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.vb7--bar article:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(125,31,31,.3), 0 26px 50px -28px rgba(125,31,31,.45); }
.vb7--bar h3 { margin: .9rem 0 .35rem; font: 500 1.6rem/1.08 var(--bn-serif); }
.vb7--bar article p { margin: 0; color: var(--mut); font-size: .92rem; line-height: 1.5; }
.vb7--bar .vb7__big { width: 560px; flex-direction: row; align-items: center; gap: 1.6rem; }
.vb7--bar .vb7__big .vb-mark { width: 190px; flex: none; }
.vb7--bar .vb7__big h3 { font-size: 2.1rem; }
.vb7--bar .vb7__big:hover .vb-mark .m0 { animation: vb7spin 1.1s cubic-bezier(.6,0,.2,1); }
.vb7--bar .vb-mark .m0 { transform-origin: 472px 280px; }
@keyframes vb7spin { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }
.vb7--bar .vb7__map { width: 460px; }
.vb7--bar .vb7__q { font: italic 500 1.15rem/1.3 var(--bn-serif) !important; color: var(--ink) !important; }
@media (max-width: 640px) {
  .vb7--bar article { width: 270px; height: 280px; }
  .vb7--bar .vb7__big { width: 300px; flex-direction: column; align-items: flex-start; gap: .8rem; }
  .vb7--bar .vb7__big .vb-mark { width: 110px; } .vb7--bar .vb7__big h3 { font-size: 1.6rem; }
  .vb7--bar .vb7__map { width: 290px; }
}
@media (prefers-reduced-motion: reduce) { .vb7__track { animation: none; } .vb7__win { overflow-x: auto; } }

/* ---------- live: thin moving value bar (option 7 content) ---------- */
.vbt { --r: var(--bn-red, #7d1f1f); --k: #faf6f4; --mut: var(--bn-muted, #5c5652); position: relative; background: #faf6f4; border-top: 1px solid var(--bn-line); border-bottom: 1px solid var(--bn-line); font-family: var(--bn-sans); color: var(--bn-ink); }
.vbt__win { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.vbt__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.vbt__i { display: flex; align-items: center; gap: .7rem; height: 68px; padding: 0 2.6rem; white-space: nowrap; position: relative; }
.vbt__i::after { content: "\2726"; position: absolute; right: -.35rem; color: #c98f86; font-size: .7rem; }
.vbt__i strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.2; }
.vbt__i small { display: block; font-size: .8rem; color: var(--mut); line-height: 1.3; }
.vbt .vb-ic { width: 2.1rem; height: 2.1rem; background: #fff; box-shadow: 0 0 0 1px var(--bn-line); }
.vbt .vb-ic svg { width: .95rem; height: .95rem; }
.vbt__ten .vb-mark { width: 62px; flex: none; }
.vbt__ten strong { font: 500 1.25rem/1.1 var(--bn-serif); color: var(--r); font-variant-numeric: lining-nums; }
.vbt .vb-draw .m0 { transition-duration: 1.5s; }
.vbt.vb-in .vb-draw .m0 { stroke-dashoffset: 0; }
.vbt.vb-in .vb-draw .m1, .vbt.vb-in .vb-draw .my { opacity: 1; }
/* the logo text fades in with the ring */
.vbt__ten > span { opacity: 0; transform: translateX(-8px); transition: opacity .7s 1.1s, transform .7s 1.1s; }
.vbt.vb-in .vbt__ten > span { opacity: 1; transform: none; }
@media (max-width: 640px) { .vbt__i { height: 60px; padding: 0 1.6rem; } .vbt__ten .vb-mark { width: 52px; } }

/* option 10 wrapper + option 11 tag room */
.vb10 { padding: 2.6rem 0 1.4rem; background: #fff; }
.vb10 .vbt { border-left: 0; border-right: 0; }
.vb7--bar { padding-top: 2.8rem; }