/* Vibe Marketing service page */
:root { --pk: #FF0A7A; --vi: #7c5cff; }
body { overflow-x: clip; }

/* ---------- hero: the mixing desk ---------- */
.vm-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 70% 45%, #1a0b16 0%, #0b080b 55%, #070607 100%); }
.vm-hero > .wrap { width: 100%; }
.vm-hero-still { position: absolute; inset: 0; z-index: -3; display: block; }
.vm-hero-still img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.has-desk .vm-hero-still { opacity: 0; transition: opacity 1.2s var(--ease); }
.vm-desk3d { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity 1.6s var(--ease); }
.has-desk .vm-desk3d { opacity: 1; }
.vm-desk3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.vm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #070607 0%, rgb(7 6 7 / .9) 24%, rgb(7 6 7 / .45) 42%, transparent 60%),
    linear-gradient(0deg, var(--ink-0) 0%, transparent 22%), linear-gradient(180deg, rgb(7 6 7 / .75) 0%, transparent 20%); }
.vm-hero-in { position: relative; padding-top: calc(var(--hd, 72px) + 40px); padding-bottom: 120px; pointer-events: none; }
.vm-hero-in a, .vm-hero-in nav { pointer-events: auto; }
.vm-hero-in > * { max-width: 600px; }
.vm-h1 { font: 900 var(--t-3xl)/.94 var(--f-display); letter-spacing: -0.04em; text-wrap: balance; text-shadow: 0 2px 30px rgb(7 6 7 / .6); }
.vm-h1 em { font-style: normal; background: linear-gradient(95deg, var(--pk), #c06bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.vm-lede { margin-top: 24px; font-size: var(--t-m); line-height: 1.45; color: var(--fg-2); max-width: 30ch; }
.vm-hero .actions { margin-top: 34px; }

/* the solo readout: channel buttons + what the soloed agent is producing (sample) */
.vm-solo { position: absolute; right: var(--pad); bottom: clamp(24px, 5vh, 56px); width: min(380px, 34vw); padding: 16px 18px 14px; border: 1px solid rgb(255 255 255 / .13); border-radius: 16px; background: rgb(10 8 11 / .66); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); }
.vm-solo-h { display: flex; align-items: center; gap: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 12px; }
.vm-solo-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--pk); animation: vm-ping 1.8s infinite; }
.vm-solo-h em { margin-left: auto; font-style: normal; color: var(--fg-3); border: 1px solid var(--rule); padding: 4px 6px; border-radius: 4px; }
@keyframes vm-ping { 0% { box-shadow: 0 0 0 0 rgb(255 10 122 / .6); } 70%, 100% { box-shadow: 0 0 0 8px rgb(255 10 122 / 0); } }
.vm-chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vm-chan button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .12); border-radius: 8px; background: rgb(255 255 255 / .03); color: var(--fg-2); font: 500 12.5px/1 var(--f-body); cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.vm-chan button i { width: 6px; height: 14px; border-radius: 2px; background: linear-gradient(0deg, var(--vi), var(--pk)); opacity: .35; transition: opacity .3s, box-shadow .3s; }
.vm-chan button:hover { border-color: rgb(255 255 255 / .3); color: var(--fg); }
.vm-chan button:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }
.vm-chan button[aria-pressed="true"] { border-color: var(--pk); background: rgb(255 10 122 / .12); color: var(--fg); }
.vm-chan button[aria-pressed="true"] i { opacity: 1; box-shadow: 0 0 10px var(--pk); }
.vm-out { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.vm-out img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid rgb(255 255 255 / .12); }
.vm-out p { margin: 0; }
.vm-out-k { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.vm-out-k b { font-weight: 600; color: var(--fg); }
.vm-out-now { margin-top: 3px !important; font: 400 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pk); }
.vm-out-line { margin-top: 6px !important; font: 700 1.02rem/1.25 var(--f-display); color: var(--fg); text-wrap: balance; }
.vm-out-line::before { content: "\201C"; } .vm-out-line::after { content: "\201D"; }
.vm-out.swap > * { animation: vm-type .5s var(--ease); }
.vm-out-m { margin: 12px 0 0; font-size: 12px; color: var(--fg-3); }
.vm-out-m span { font: 400 9.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); border: 1px solid var(--rule); border-radius: 4px; padding: 3px 5px; margin-right: 6px; }
.vm-bars-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.vm-bars-mini i { width: 3px; height: 100%; background: linear-gradient(0deg, var(--vi), var(--pk)); transform-origin: bottom; transform: scaleY(.3); }
.motion .vm-bars-mini i { animation: vm-eq .54s ease-in-out infinite alternate; }
.vm-bars-mini i:nth-child(2) { animation-delay: -.2s !important; } .vm-bars-mini i:nth-child(3) { animation-delay: -.4s !important; }
.vm-bars-mini i:nth-child(4) { animation-delay: -.1s !important; } .vm-bars-mini i:nth-child(5) { animation-delay: -.3s !important; }
@keyframes vm-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes vm-type { from { opacity: 0; transform: translateX(-6px); } }

/* ---------- promise ---------- */
.vm-promise { position: relative; padding-block: clamp(90px, 14vh, 160px); background: var(--ink-0); overflow: hidden; isolation: isolate; }
.vm-promise > .wrap { width: 100%; }
.vm-promise-bg { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.vm-promise-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.vm-promise-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink-0), rgb(13 11 12 / .5) 40%, transparent 75%), linear-gradient(0deg, var(--ink-0), transparent 30%), linear-gradient(180deg, var(--ink-0), transparent 30%); }
@media (max-width: 900px) { .vm-promise-bg { inset: 0; opacity: .45; } }
.vm-prob { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.vm-big { margin-top: 22px; font: 800 var(--t-2xl)/1.02 var(--f-display); letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.vm-big span { color: var(--pk); }
.vm-chips { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vm-chips li { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--rule); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.vm-chips li:nth-child(2) { border-color: var(--pk); color: #fff; }

/* shared row head + note */
.vm-row-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vh, 56px); }
.vm-note { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- team carousel ---------- */
.vm-team { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; }
.vm-nav { display: flex; gap: 10px; }
.vm-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--fg); font-size: 20px; cursor: pointer; transition: background-color .3s, border-color .3s; }
.vm-btn:hover { background: var(--pk); border-color: var(--pk); }
.vm-track { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad) 8px; scroll-padding-inline: var(--pad); cursor: grab; }
.vm-track::-webkit-scrollbar { display: none; }
.vm-track.drag { cursor: grabbing; scroll-snap-type: none; }
.vm-track.drag .vm-card { pointer-events: none; }
.vm-card { position: relative; flex: 0 0 clamp(260px, 28vw, 430px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--rule-soft); background: var(--ink-1); }
.vm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; user-select: none; }
.vm-card:hover img { transform: scale(1.06); }
.vm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .1) 48%, transparent 66%); }
.vm-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 30px); }
.vm-card span { display: inline-block; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pk); }
.vm-card h3 { font: 700 var(--t-xl)/1 var(--f-display); letter-spacing: -0.02em; margin: 12px 0 10px; }
.vm-card p { color: var(--fg-2); line-height: 1.45; max-width: 28ch; }
.vm-card.is-human { border-color: var(--pk); box-shadow: 0 0 0 1px var(--pk), 0 30px 80px -30px rgb(255 10 122 / .5); }
.vm-card.is-human span { padding: 6px 9px; border-radius: 4px; background: var(--pk); color: #fff; }

/* ---------- try it: the approval desk ---------- */
.vm-try { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); background: radial-gradient(60% 70% at 20% 30%, oklch(0.2 0.07 340 / .55), transparent 70%), var(--ink-0); }
.vm-try .wrap { width: 100%; }
.vm-desk { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; }
.vm-queue-wrap { min-width: 0; padding: clamp(16px, 2vw, 24px); border-radius: 18px; border: 1px solid var(--rule-soft); background: rgb(255 255 255 / .02); }
.vm-desk-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vm-desk-bar p { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.vm-desk-bar p b { color: #fff; margin-right: 8px; font-weight: 400; padding: 5px 8px; border-radius: 4px; background: var(--pk); }
.vm-days { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.vm-days li { width: 26px; height: 26px; display: grid; place-items: center; font: 400 10px/1 var(--f-mono); color: var(--fg-3); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgb(255 255 255 / .06); transition: background-color .4s, color .4s; }
.vm-days li.on { background: var(--pk); color: #fff; }
.vm-queue { display: grid; gap: 12px; min-height: 420px; align-content: start; }
.vm-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 12px; border-radius: 14px; border: 1px solid var(--rule); background: linear-gradient(160deg, var(--ink-1), var(--ink-0)); animation: vm-drop .55s cubic-bezier(.16, 1, .3, 1) both; transition: opacity .45s var(--ease), transform .5s var(--ease), border-color .3s; }
.vm-item.rev { border-color: var(--vi); }
@keyframes vm-drop { from { opacity: 0; transform: translateY(-18px) scale(.97); } }
.vm-item.out-ok { opacity: 0; transform: translateX(40px); border-color: var(--pk); }
.vm-item.out-back { opacity: 0; transform: translateX(-40px); }
.vm-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.vm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vm-thumb span { position: absolute; left: 6px; bottom: 6px; padding: 4px 6px; border-radius: 4px; background: rgb(0 0 0 / .7); font: 400 9px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.vm-ib { display: grid; align-content: center; gap: 8px; min-width: 0; }
.vm-meta { display: flex; gap: 10px; flex-wrap: wrap; font: 400 10px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.vm-meta b { color: var(--pk); font-weight: 400; }
.vm-item h3 { font: 700 var(--t-l)/1.12 var(--f-display); letter-spacing: -0.015em; }
.vm-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vm-acts button { min-height: 40px; padding: 0 16px; border-radius: 99px; font: 600 14px/1 var(--f-body); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease); }
.vm-ok { border: 1px solid var(--pk); background: var(--pk); color: #fff; }
.vm-ok:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgb(255 10 122 / .7); }
.vm-back { border: 1px solid var(--rule); background: none; color: var(--fg-2); }
.vm-back:hover { color: var(--fg); border-color: var(--fg-3); }
.vm-acts button:focus-visible, .vm-reset:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }
.vm-acts button:disabled { opacity: .5; cursor: default; }
.vm-final { grid-template-columns: 1fr; border-color: var(--pk); }
.vm-bars { display: grid; gap: 10px; margin: 6px 0; }
.vm-bars div { display: grid; grid-template-columns: 180px 1fr 36px; gap: 12px; align-items: center; font-size: 13px; color: var(--fg-2); }
.vm-bars i { height: 10px; border-radius: 6px; background: rgb(255 255 255 / .08); position: relative; overflow: hidden; }
.vm-bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--vi), var(--pk)); transform-origin: left; animation: vm-grow .9s var(--ease) both .2s; }
.vm-bars b { font: 400 12px/1 var(--f-mono); color: #fff; text-align: right; }
@keyframes vm-grow { from { transform: scaleX(0); } }
.vm-side { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-width: 0; }
.vm-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vm-tally div { padding: 14px 12px; border-radius: 12px; border: 1px solid var(--rule-soft); background: rgb(255 255 255 / .02); }
.vm-tally b { display: block; font: 800 var(--t-xl)/1 var(--f-display); }
.vm-tally div:first-child b { color: var(--pk); }
.vm-tally span { display: block; margin-top: 6px; font: 400 9.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.vm-tally .pop b { animation: vm-pop .45s var(--ease); }
@keyframes vm-pop { 40% { transform: scale(1.25); } }
.vm-log { list-style: none; margin: 0; padding: 16px; border-radius: 12px; border: 1px solid var(--rule-soft); display: grid; gap: 10px; align-content: start; min-height: 220px; }
.vm-log li { display: grid; gap: 2px; font-size: 13px; color: var(--fg-2); animation: vm-type .4s var(--ease) both; }
.vm-log li b { font: 400 10px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.vm-log li.is-you b { color: var(--pk); }
.vm-log li:nth-child(n+3) { opacity: .55; } .vm-log li:nth-child(n+5) { opacity: .3; }
.vm-reset { min-height: 48px; border-radius: 99px; border: 1px solid var(--rule); background: none; color: var(--fg); font: 600 15px/1 var(--f-body); cursor: pointer; transition: border-color .3s, background-color .3s; }
.vm-reset:hover { border-color: var(--pk); background: rgb(255 10 122 / .1); }

/* ---------- covers: image bento ---------- */
.vm-covers { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.vm-bento { list-style: none; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 30vw, 380px); gap: clamp(12px, 1.4vw, 20px); }
.vm-bento li { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule-soft); background: var(--ink-1); }
.vm-bento .b1 { grid-column: span 7; } .vm-bento .b2 { grid-column: span 5; } .vm-bento .b3 { grid-column: span 5; } .vm-bento .b4 { grid-column: span 7; }
.vm-bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.vm-bento .b2 img { object-position: 60% 50%; }
.vm-bento li:hover img { transform: scale(1.05); }
.vm-bento li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .88), rgb(0 0 0 / .1) 55%, transparent 75%); }
.vm-bento .b2::after { background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .35) 50%, transparent 80%); }
.vm-bento li > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2.2vw, 32px); }
.vm-bento span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.vm-bento h3 { font: 700 var(--t-xl)/1.02 var(--f-display); letter-spacing: -0.02em; margin: 10px 0 8px; }
.vm-bento p { color: var(--fg-2); line-height: 1.45; max-width: 36ch; }

/* ---------- month board ---------- */
.vm-month { position: relative; padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; isolation: isolate; }
.vm-month > .wrap { width: 100%; }
.vm-month-bg { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.vm-month-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.vm-month-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink-0), rgb(13 11 12 / .6) 30%, rgb(13 11 12 / .75) 70%, var(--ink-0)); }
.vm-board { margin: 0; padding: clamp(18px, 2.4vw, 32px); border-radius: 18px; border: 1px solid rgb(255 255 255 / .12); background: rgb(13 11 12 / .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.vm-grid { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(4, minmax(0, 1fr)); grid-template-rows: auto repeat(5, 54px); column-gap: 8px; }
.vm-grid .wk { grid-row: 1; padding: 0 0 14px 10px; border-left: 1px solid var(--rule); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.w1 { grid-column: 2; } .w2 { grid-column: 3; } .w3 { grid-column: 4; } .w4 { grid-column: 5; }
.vm-grid .ln { grid-column: 1; display: flex; align-items: center; border-top: 1px solid var(--rule-soft); font: 500 .9375rem/1.2 var(--f-body); color: var(--fg-2); }
.l1 { grid-row: 2; } .l2 { grid-row: 3; } .l3 { grid-row: 4; } .l4 { grid-row: 5; } .l5 { grid-row: 6; opacity: .3; transition: opacity .5s var(--ease); }
.bk { align-self: center; height: 18px; border-radius: 5px; background: rgb(255 255 255 / .28); transition: transform .7s var(--ease), opacity .5s var(--ease), background-color .5s var(--ease); }
.k-c1 { grid-row: 2; grid-column: 2; } .k-c2 { grid-row: 2; grid-column: 3; } .k-c3 { grid-row: 2; grid-column: 4; } .k-c4 { grid-row: 2; grid-column: 5; }
.k-c1, .k-c2, .k-c3, .k-c4 { width: 46%; background: var(--vi); opacity: .8; }
.k-o { grid-row: 3; grid-column: 2 / 6; height: 8px; background: rgb(255 255 255 / .4); }
.k-i { grid-row: 4; grid-column: 3 / 5; background: #fff; }
.k-r { grid-row: 5; grid-column: 5; width: 46%; justify-self: end; background: rgb(255 255 255 / .55); }
.k-x { grid-row: 6; grid-column: 3 / 5; background: transparent; border: 1px dashed var(--rule); opacity: 0; }
.k-u { grid-row: 2; grid-column: 3; width: 46%; justify-self: end; background: var(--pk); box-shadow: 0 0 20px rgb(255 10 122 / .7); opacity: 0; transform: translateY(-14px); }
.vm-board[data-mode="replace"] .k-u { opacity: 1; transform: none; grid-column: 4; justify-self: start; }
.vm-board[data-mode="replace"] .k-c3 { opacity: 0; transform: scaleX(.3); }
.vm-board[data-mode="move"] .k-u { opacity: 1; transform: none; grid-row: 4; grid-column: 3; justify-self: start; }
.vm-board[data-mode="move"] .k-i { transform: translateX(calc(50% + 4px)); }
.vm-board[data-mode="scope"] .k-u { opacity: 1; transform: none; grid-row: 6; grid-column: 3; justify-self: start; }
.vm-board[data-mode="scope"] .k-x { opacity: 1; }
.vm-board[data-mode="scope"] .l5 { opacity: 1; color: var(--fg); }
.vm-board-ui { display: grid; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule-soft); }
.vm-board-q { font: 700 var(--t-m)/1.2 var(--f-display); }
.vm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-opts button { min-height: 44px; padding: 0 16px; border-radius: 99px; background: none; border: 1px solid var(--rule); color: var(--fg-2); font: 600 .9375rem/1 var(--f-body); cursor: pointer; transition: border-color .3s, color .3s, background-color .3s; }
.vm-opts button:hover { color: var(--fg); border-color: var(--fg-3); }
.vm-opts button[aria-checked="true"] { color: #fff; border-color: var(--pk); background: rgb(255 10 122 / .16); }
.vm-opts button:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }
.vm-board-note { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.vm-foot { margin-top: 20px; color: var(--fg-2); }

/* ---------- how we work ---------- */
.vm-steps { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.vm-steps-list { list-style: none; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); counter-reset: s; }
.vm-steps-list li { position: relative; padding: 28px 24px 30px; border-radius: 16px; border: 1px solid var(--rule-soft); background: linear-gradient(170deg, var(--ink-1), var(--ink-0)); overflow: hidden; }
.vm-steps-list li::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, rgb(255 10 122 / .35), rgb(124 92 255 / .1)); transition: transform .8s var(--ease); }
.vm-steps-list li:hover::before { transform: rotate(30deg) scale(1.15); }
.vm-steps-list span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.vm-steps-list h3 { font: 700 var(--t-xl)/1 var(--f-display); letter-spacing: -0.02em; margin: 40px 0 10px; }
.vm-steps-list p { color: var(--fg-2); line-height: 1.45; }

/* ---------- faq + close (as software development) ---------- */
.sv-faq { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sv-faq .faq { margin-top: 32px; }
.sv-faq details { border-top: 1px solid var(--rule-soft); padding: 18px 0; }
.sv-faq summary { cursor: pointer; font: 700 var(--t-m)/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; color: var(--pk); font-size: 1.4em; line-height: 1; transition: transform .3s; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { margin-top: 12px; max-width: 70ch; color: var(--fg-2); line-height: 1.65; }
.close-alt { display: flex; flex-wrap: wrap; gap: 0 32px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .vm-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .vm-hero { align-items: end; grid-template-rows: 1fr auto; }
  .vm-hero::before { background: linear-gradient(0deg, var(--ink-0) 0%, rgb(7 6 7 / .96) 52%, rgb(7 6 7 / .3) 66%, transparent 74%), linear-gradient(180deg, rgb(7 6 7 / .85) 0%, transparent 10%); }
  .vm-hero-still { bottom: auto; height: calc(var(--hd, 72px) + 46svh); }
  .vm-hero-still img { object-position: 50% 50%; }
  .vm-hero-in { padding-top: calc(var(--hd, 72px) + 40svh); padding-bottom: 28px; }
  .vm-desk3d { bottom: auto; height: calc(var(--hd, 72px) + 46svh); }
  .vm-solo { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--pad) 48px; }
  .vm-desk { grid-template-columns: 100%; }
  .vm-queue { min-height: 0; }
  .vm-log { min-height: 0; }
  .vm-card { flex-basis: 78vw; }
  .vm-bento { grid-auto-rows: 300px; }
  .vm-bento li { grid-column: 1 / -1 !important; }
  .vm-grid { grid-template-columns: 88px repeat(4, minmax(0, 1fr)); grid-template-rows: auto repeat(5, 48px); column-gap: 4px; }
  .vm-grid .ln { font-size: 12px; }
  .vm-grid .wk { padding-left: 4px; font-size: 9px; letter-spacing: .04em; }
}
@media (max-width: 560px) {
  .vm-item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .vm-item h3 { font-size: 1.1rem; }
  .vm-acts button { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .vm-bars div { grid-template-columns: 1fr 60px 24px; font-size: 12px; }
  .vm-steps-list { grid-template-columns: 100%; }
  .vm-steps-list h3 { margin-top: 26px; }
  .vm-days li { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vm-item, .vm-log li, .vm-out > *, .vm-bars-mini i, .bk, .vm-bars i::after { animation: none !important; transition: none !important; }
}

/* ---------- polish pass 24 Oct: no numbering, phone legibility, tap targets ---------- */
.vm-px { display: block; width: 10px; height: 10px; background: var(--pk); }
.vm-bento .vm-px { width: 8px; height: 8px; }
.vm-bento p, .vm-steps-list p { max-width: 40ch; }
.l5 { opacity: .5; }
.vm-btn:focus-visible, .vm-chan button:focus-visible, .vm-opts button:focus-visible, .vm-reset:focus-visible, .vm-acts button:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }
.crumb a { display: inline-block; padding-block: 14px; margin-block: -14px; }
.ft a { display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (max-width: 900px) {
  .closing-stage::after { background: linear-gradient(0deg, oklch(0.135 0.006 358 / .94) 0%, oklch(0.135 0.006 358 / .74) 55%, oklch(0.135 0.006 358 / .2) 85%); }
  .closing-copy .body { color: var(--fg); }
}
@media (max-width: 560px) {
  .vm-acts button { min-height: 44px; }
}

/* design fix 25 Oct: no gradient text, solid magenta */
.vm-h1 em { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #FF0A7A !important; -webkit-text-fill-color: currentColor !important; }