/* Hobby Horse Academy: VIP Club (/vip/), the VIP card on the home and the weekly gift box in My Stable.
   Made for kids: big picture tiles, real course photos, one short line per thing. Same tokens as the rest of the app. */
.vp, .vb, .hx-vip { --vp-ease: cubic-bezier(0.23, 1, 0.32, 1); --vp-card: #121214; --vp-raise: #1c1c1e; --vp-gold: #ffcf5a; --vp-green: #ff8fc8; --vp-bubble: linear-gradient(150deg, #ffa8d5, #ff5cae); --vp-berry: linear-gradient(150deg, #d6247f, #7d0d4e); --vp-pink: #d4148a; }

/* shared bits */
.vp-ico { width: 20px; height: 20px; flex: none; }
.vp-mini { width: 14px; height: 14px; }
.vp-kicker { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 14px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #ff5aa8 !important; }
.vp-kicker .vp-ico { width: 18px; height: 18px; }
.vp-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font: 600 12px / 1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.02em; text-transform: none; color: #f5f5f7; }
.vp-kicker .vp-chip { margin-left: auto; }
.vp-title { margin: 0; font: 700 clamp(24px, 7vw, 30px) / 1.05 Oswald, "Arial Narrow", sans-serif !important; letter-spacing: 0.02em !important; text-transform: uppercase; color: #fff; text-wrap: balance; }
.vp-text { margin: 0; font-size: 16px; line-height: 1.45; color: #d1d1d6 !important; text-wrap: pretty; }
.vp-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vp-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--vp-pink); color: #fff !important; font: 700 18px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: transform 140ms var(--vp-ease); }
.vp-btn:active { transform: scale(0.97); }
.vp-btn--ghost { background: rgba(255, 255, 255, 0.1); }
.vp-btn--sm { min-height: 40px; padding: 0 20px; font-size: 15.5px; justify-self: start; }
.vp [hidden] { display: none !important; }

/* the 4 perks at a glance */
.vp-hero { display: grid; gap: 14px; }
.vp-hero-hi { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 22px / 1.1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.vp-hero-crown { width: 30px; height: 30px; color: var(--vp-gold); }
.vp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vp-tile { position: relative; display: grid; align-content: center; justify-items: center; text-align: center; gap: 4px; min-height: 124px; padding: 16px; border-radius: 22px; color: #fff !important; text-decoration: none !important; overflow: hidden; }
.vp-tile b { font: 700 21px / 1.05 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; }
.vp-tile small { font-size: 13.5px; font-weight: 600; opacity: 0.9; }
.vp-tile-ico { width: 40px; height: 40px; margin-bottom: 8px; }
.vp-tile--tip { background: linear-gradient(150deg, #ff3d9a, #b0106f); }
.vp-tile--plan { background: var(--vp-bubble); color: #4a0628 !important; }
.vp-tile--box { background: linear-gradient(150deg, #ffdd77, #f0b92a); color: #3a2400 !important; }
.vp-tile--deal { background: var(--vp-berry); }
.vp-tile.is-new::after { content: ""; position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18); }
.vp-tiles--lock { width: 100%; max-width: 380px; }
.vp-tiles--lock .vp-tile { min-height: 104px; }

/* cards with a real photo on top */
.vp-card { display: grid; border-radius: 24px; background: var(--vp-card); overflow: hidden; min-width: 0; scroll-margin-top: 90px; }
.vp-card-body { display: grid; gap: 12px; padding: 18px 18px 20px; min-width: 0; }
.vp-photo { position: relative; aspect-ratio: 16 / 7; background: #161618; overflow: hidden; }
.vp-photo-img, .vp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* tip */
.vp-try { margin: 0; display: grid; gap: 6px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(255, 61, 154, 0.12); font-size: 15.5px; line-height: 1.45; color: #f5f5f7 !important; text-wrap: pretty; }
.vp-try > b { font: 700 13px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #ff5aa8; }
.vp-did { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font: 700 15.5px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--vp-ease); }
.vp-did .vp-ico { width: 20px; height: 20px; }
.vp-did[aria-pressed="true"] { background: var(--vp-pink); color: #fff; }
.vp-did:active { transform: scale(0.96); }

/* earlier tips */
.vp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(46vw, 180px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.vp-rail::-webkit-scrollbar { display: none; }
.vp-old { scroll-snap-align: start; display: grid; align-content: start; gap: 0; padding: 0; border: 0; border-radius: 18px; background: var(--vp-card); color: #fff; text-align: left; cursor: pointer; overflow: hidden; }
.vp-old-pic { display: block; aspect-ratio: 4 / 3; background: #161618; }
.vp-old-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-old-t { display: grid; gap: 4px; padding: 10px 12px 14px; }
.vp-old-t small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ff5aa8; }
.vp-old-t b { font-size: 15px; line-height: 1.25; font-weight: 650; text-wrap: pretty; }

/* plan */
.vp-ring { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.62); }
.vp-ring svg { position: absolute; inset: 4px; width: 56px; height: 56px; transform: rotate(-90deg); }
.vp-ring circle { fill: none; stroke-width: 4.5; }
.vp-ring-bg { stroke: rgba(255, 255, 255, 0.18); }
.vp-ring-fg { stroke: var(--vp-green); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--p, 0))); transition: stroke-dashoffset 300ms var(--vp-ease); }
.vp-ring b { position: relative; font: 700 22px / 1 Oswald, "Arial Narrow", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.vp-progress-t { margin: 0; font-size: 14px; line-height: 1.4; color: #98989f !important; }
.vp-progress-t b { color: #fff; }
.vp-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--vp-raise); }
.vp-wk { min-height: 42px; border: 0; border-radius: 12px; background: transparent; color: #98989f; font: 700 14.5px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.vp-wk[aria-selected="true"] { background: #fff; color: #000; }
.vp-wk.is-done::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--vp-green); vertical-align: middle; }
.vp-wpanel { display: grid; gap: 8px; }
.vp-wfocus { margin: 2px 0; font: 700 17px / 1.2 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: #fff !important; }
.vp-ses { border-radius: 18px; background: var(--vp-raise); }
.vp-ses summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 10px 14px 10px 10px; list-style: none; cursor: pointer; }
.vp-ses summary::-webkit-details-marker { display: none; }
.vp-ses-t { display: grid; gap: 4px; min-width: 0; }
.vp-ses-t b { font-size: 16.5px; line-height: 1.2; font-weight: 700; color: #fff; }
.vp-ses-t small { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #98989f; }
.vp-ses-go { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: #98989f; }
.vp-ses-chev { width: 18px; height: 18px; transition: transform 200ms var(--vp-ease); }
.vp-ses[open] .vp-ses-chev { transform: rotate(90deg); }
.vp-tick { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2.5px #55555b; color: transparent; cursor: pointer; transition: background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--vp-ease); }
.vp-tick .vp-ico { width: 24px; height: 24px; }
.vp-tick:active { transform: scale(0.92); }
.vp-ses.is-done .vp-tick { background: var(--vp-pink); box-shadow: none; color: #fff; }
.vp-ses.is-done .vp-ses-t b { color: #98989f; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.vp-steps { list-style: none; margin: 0; padding: 0 14px 16px; display: grid; gap: 8px; counter-reset: st; }
.vp-steps li { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #262629; font-size: 15px; line-height: 1.45; color: #e5e5ea; text-wrap: pretty; }
.vp-steps li em { justify-self: start; padding: 4px 10px; border-radius: 999px; font: 700 12px / 1 Oswald, "Arial Narrow", sans-serif; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 207, 90, 0.16); color: var(--vp-gold); }
.vp-steps li.is-cool-down-5-min em { background: rgba(255, 143, 200, 0.16); color: #ff8fc8; }
.vp-steps li:not([class]) { counter-increment: st; grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
.vp-steps li:not([class])::before { content: counter(st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vp-pink); color: #fff; font: 700 14px / 1 Oswald, "Arial Narrow", sans-serif; }
.vp-safe { margin: 0; font-size: 13px; line-height: 1.45; color: #8e8e93 !important; text-wrap: pretty; }
.vp-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 18px; background: var(--vp-raise); color: #fff !important; text-decoration: none !important; }
.vp-row span { display: grid; gap: 2px; min-width: 0; }
.vp-row small { font-size: 12.5px; color: #98989f; }
.vp-row b { font-size: 15.5px; font-weight: 650; line-height: 1.25; }
.vp-row > .vp-ico:first-child { color: #ff5aa8; }
.vp-row > .vp-ico:last-child { color: #98989f; }

/* gift box card (links to My Stable) */
.vp-boxcard { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 18px 16px 14px; background: radial-gradient(110% 120% at 0% 50%, rgba(255, 207, 90, 0.2), rgba(255, 207, 90, 0) 60%), var(--vp-card); box-shadow: inset 0 0 0 1.5px rgba(255, 207, 90, 0.45); color: #fff !important; text-decoration: none !important; }
.vp-boxart { cursor: inherit; }
.vp-boxcard-t { display: grid; gap: 6px; min-width: 0; }
.vp-boxcard-t b { font: 700 21px / 1.1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.vp-boxcard-t small { font-size: 14px; line-height: 1.4; color: #c7c7cc; text-wrap: pretty; }

/* shop deal: a ticket */
.vp-deal { background: transparent; }
.vp-ticket { position: relative; display: grid; justify-items: center; gap: 10px; padding: 22px 20px 24px; border-radius: 24px; text-align: center; background: var(--vp-berry); color: #fff; }
.vp-ticket::before, .vp-ticket::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--hha-bg, #000); }
.vp-ticket::before { left: -13px; }
.vp-ticket::after { right: -13px; }
.vp-ticket .vp-kicker { color: #ffc2e0 !important; }
.vp-ticket .vp-text { color: #ffe3f1 !important; max-width: 300px; }
.vp-big { margin: 0; font: 700 clamp(40px, 13vw, 56px) / 1 Oswald, "Arial Narrow", sans-serif !important; letter-spacing: 0.01em !important; text-transform: uppercase; color: #fff; }
.vp-deal.is-wait .vp-ticket { background: linear-gradient(150deg, #3b1029, #22091a); color: #fff; }
.vp-deal.is-wait .vp-big { font-size: clamp(30px, 9vw, 40px) !important; color: #fff; }
.vp-deal.is-wait .vp-kicker { color: #ff8fc8 !important; }
.vp-deal.is-wait .vp-text { color: #c7c7cc !important; }
.vp-code { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; min-height: 58px; padding: 0 16px; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 16px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.vp-code span { font: 700 22px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.08em; overflow-wrap: anywhere; text-align: left; }
.vp-code .vp-ico { margin-left: auto; }
.vp-code em { font-style: normal; font-size: 13px; font-weight: 700; min-width: 6ch; text-align: right; }
.vp-ticket .vp-btn { background: #fff; color: #7d0d4e !important; }

/* not VIP */
.vp-lock { display: grid; justify-items: center; gap: 14px; padding: 28px 20px 24px; border-radius: 24px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(212, 20, 138, 0.24), rgba(212, 20, 138, 0) 60%), var(--vp-card); }
.vp-lock-crown { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 207, 90, 0.14); color: var(--vp-gold); }
.vp-lock-crown .vp-ico { width: 34px; height: 34px; }
.vp-lock-title { margin: 0; font: 700 26px / 1.1 Oswald, "Arial Narrow", sans-serif !important; text-transform: uppercase; letter-spacing: 0.02em !important; color: #fff; }

/* earlier-tip sheet */
.vp-sheet { box-sizing: border-box; width: 100%; max-width: 520px; max-height: 86svh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #161618; color: #fff; overflow: auto; }
.vp-sheet[open] { animation: vp-sheet-in 240ms var(--vp-ease); }
@keyframes vp-sheet-in { from { opacity: 0; transform: translateY(24px); } }
.vp-sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.vp-sheet-in { display: grid; gap: 12px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
.vp-sheet .vp-try { display: grid; }
.vp-sheet .vp-btn { justify-self: stretch; margin-top: 4px; }
@media (min-width: 768px) { .vp-sheet { margin: auto; border-radius: 24px; } .vp-tiles:not(.vp-tiles--lock) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the VIP card on the home, right under the stories */
.hx-vip { display: grid; gap: 10px; padding: 14px; border-radius: 24px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 207, 90, 0.18), rgba(255, 207, 90, 0) 55%), #121214; box-shadow: inset 0 0 0 1.5px rgba(255, 207, 90, 0.4); color: #fff !important; text-decoration: none !important; }
.hx-vip-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.hx-vip-head .vp-ico { width: 26px; height: 26px; color: var(--vp-gold); }
.hx-vip-head b { font: 700 20px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.hx-vip-head span { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 600; color: #c7c7cc; }
.hx-vip .vp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hx-vip .vp-tile { min-height: 0; padding: 12px 6px 10px; justify-items: center; text-align: center; border-radius: 16px; gap: 2px; }
.hx-vip .vp-tile-ico { width: 30px; height: 30px; margin-bottom: 4px; }
.hx-vip .vp-tile b { font-size: 14px; letter-spacing: 0.02em; }
.hx-vip .vp-tile small { font-size: 11px; line-height: 1.2; }
.hx-vip .vp-tile.is-new::after { top: 8px; right: 8px; width: 9px; height: 9px; }

/* ---------- the weekly gift box in My Stable ---------- */
.vb { scroll-margin-top: 90px; }
.vb [hidden] { display: none !important; }
.vb-body { z-index: 1; }
.vb-lid { z-index: 2; }
.vb-coin { z-index: 3; }
.vb-sub, .vb-lockrow small { text-wrap: pretty; }

.vb-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 18px 16px 14px; border-radius: 22px; background: radial-gradient(110% 120% at 0% 50%, rgba(255, 207, 90, 0.18), rgba(255, 207, 90, 0) 60%), #121214; box-shadow: inset 0 0 0 1.5px rgba(255, 207, 90, 0.45); }
.vb-stage { position: relative; width: 96px; height: 96px; border: 0; padding: 0; background: none; cursor: pointer; }
.vb.is-open .vb-stage, .vb.is-busy .vb-stage { cursor: default; }
.vb-body, .vb-lid, .vb-coin { position: absolute; left: 50%; }
.vb-body { bottom: 8px; width: 66px; height: 48px; margin-left: -33px; border-radius: 6px 6px 10px 10px; background: linear-gradient(90deg, transparent 27px, #ffcf5a 27px 39px, transparent 39px), #d4148a; }
.vb-lid { bottom: 54px; width: 76px; height: 18px; margin-left: -38px; border-radius: 6px; background: linear-gradient(90deg, transparent 32px, #ffcf5a 32px 44px, transparent 44px), #ff3d9a; transform-origin: 12% 100%;
  transition: transform 320ms var(--vp-ease); }
.vb-lid::before, .vb-lid::after { content: ""; position: absolute; bottom: 16px; width: 18px; height: 14px; border: 4px solid #ffcf5a; border-radius: 50% 50% 0 50%; }
.vb-lid::before { left: 18px; transform: rotate(-20deg); }
.vb-lid::after { right: 18px; transform: scaleX(-1) rotate(-20deg); }
.vb-coin { bottom: 30px; width: 34px; height: 34px; margin-left: -17px; opacity: 0; transform: translateY(0) scale(0.9); transition: opacity 200ms var(--vp-ease) 120ms, transform 380ms var(--vp-ease) 120ms; }
.vb-coin svg { width: 100%; height: 100%; display: block; }
.vb.is-open .vb-lid, .vp-boxart.is-open .vb-lid { transform: translate(-16px, -2px) rotate(-30deg); }
.vb.is-open .vb-coin { opacity: 1; transform: translate(10px, -30px) scale(1); }
.vb.is-busy .vb-stage { animation: vb-wiggle 420ms var(--vp-ease) infinite; }
@keyframes vb-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.vb.is-still .vb-lid, .vb.is-still .vb-coin { transition: none; }
.vb-text { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.vb-kicker { margin: 0; font: 700 13.5px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-gold) !important; }
.vb-title { margin: 0; font: 700 21px / 1.1 Oswald, "Arial Narrow", sans-serif !important; letter-spacing: 0.02em !important; text-transform: uppercase; color: #fff; }
.vb-title b { color: var(--vp-gold); font-variant-numeric: tabular-nums; }
.vb-sub { margin: 0; font-size: 13.5px; line-height: 1.4; color: #c7c7cc !important; }
.vb-text .vp-btn { min-height: 42px; padding: 0 20px; font-size: 15.5px; margin-top: 2px; }
.vb-lockrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-radius: 18px; background: #121214; color: #fff !important; text-decoration: none !important; }
.vb-lockrow .vp-ico:first-child { color: var(--vp-gold); }
.vb-lockrow .vp-ico:last-child { color: #98989f; }
.vb-lockrow span { display: grid; gap: 2px; }
.vb-lockrow b { font-size: 15px; font-weight: 650; }
.vb-lockrow small { font-size: 12.5px; color: #98989f; }

@media (hover: hover) and (pointer: fine) {
  .vp-old, .vp-row { transition: background-color 160ms ease; }
  .vp-old:hover, .vp-row:hover { background: #222225; }
  .vp-tile { transition: transform 200ms var(--vp-ease); }
  .vp-tile:hover { transform: translateY(-2px); }
  .vb:not(.is-open):not(.is-busy) .vb-stage:hover .vb-lid { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .vb-lid, .vb-coin, .vp-ring-fg, .vp-ses-chev, .vp-tile { transition: opacity 200ms ease !important; }
  .vb.is-open .vb-lid { transform: none; opacity: 0; }
  .vb.is-open .vb-coin { transform: translateY(-20px); }
  .vb.is-busy .vb-stage { animation: none; }
  .vp-sheet[open] { animation: vp-fade 200ms ease; }
  @keyframes vp-fade { from { opacity: 0; } }
}

/* topic colour bands (instead of photos) */
.vp-band { display: grid; place-items: center; aspect-ratio: 16 / 6; color: #fff; overflow: hidden; }
.vp-band-ico { position: relative; z-index: 1; width: 64px; height: 64px; }
.vp-band-bg { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; opacity: 0.12; }
.vp-band--jumping { background: linear-gradient(150deg, #ff3d9a, #b0106f); }
.vp-band--dressage { background: var(--vp-bubble); color: #4a0628; }
.vp-band--rules { background: var(--vp-berry); color: #fff; }
.vp-band--body, .vp-band--fitness { background: linear-gradient(150deg, #ff5f9e, #c2185b); }
.vp-band--gear { background: linear-gradient(150deg, #ff9cc8, #e2468f); color: #4a0628; }
.vp-band--mind, .vp-band--all-round { background: linear-gradient(150deg, #ffc2e0, #ff86c0); color: #4a0628; }
.vp-band--western { background: linear-gradient(150deg, #f06bb0, #9c1c6b); }
.vp-old-pic.vp-band { aspect-ratio: 16 / 9; }
.vp-old-pic .vp-band-ico { width: 44px; height: 44px; }

/* every heading in Oswald */
.vp h1, .vp h2, .vp h3, .vb h2, .hx-vip h2, .vp-old-t b, .vp-ses-t b, .vp-row b, .vb-lockrow b { font-family: Oswald, "Arial Narrow", sans-serif !important; letter-spacing: 0.02em; }
.vp-old-t b, .vp-ses-t b, .vp-row b, .vb-lockrow b { font-weight: 600; text-transform: uppercase; }

/* tip and plan titles are full sentences now: sentence case reads easier than caps */
.vp-tip .vp-title, .vp-plan .vp-title, .vp-sheet .vp-title { font-size: clamp(22px, 6vw, 27px) !important; line-height: 1.15; text-transform: none; }
.vp-old-t b { text-transform: none; }
.vp-tile small { text-wrap: balance; line-height: 1.25; }