/* Rostify v4 subpages under 03 Plan — On-the-job training, Job sharers (29.09.2026).
   Builds on the .v4 tokens in rostify.css; everything here is scoped to .vp. Graphics are HTML/CSS, no images. */
.vp{--k1:light-dark(#1F4F53,#86C3C4);--k2:light-dark(#7FB4B6,#3D7A7E);--k1-ink:light-dark(#FFFFFF,#0A1012);--k2-ink:light-dark(#0E2023,#F2F8F7);
  --office:light-dark(#BFDCDB,#2A5558);--sick:light-dark(#F1D2D7,#5B2B35);--sick-l:light-dark(#C98A95,#9A5663);
  --empty:light-dark(rgba(14,32,35,.035),rgba(230,239,238,.035));--gap:5px}
.vp .v4{scroll-margin-top:72px}

/* ------------------------------------------------ hero */
.vp-hero{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,72px)}
.vp-crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 clamp(30px,4.4vw,64px);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute)}
.vp-crumbs a{color:var(--ink2);text-decoration:none}
.vp-crumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.vp-crumbs [aria-current]{color:var(--ink)}
.vp-hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(32px,5vw,88px);align-items:center}
.vp-h1{margin:clamp(16px,2vw,24px) 0 0;font-stretch:78%;font-weight:700;font-size:clamp(48px,6.2vw,100px);line-height:.9;letter-spacing:-.026em;text-wrap:balance;max-width:11ch}
.vp-lede{margin:clamp(22px,2.4vw,32px) 0 0;max-width:44ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink2)}
.vp-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);margin:clamp(32px,4vw,52px) 0 0;padding:0;list-style:none}
.vp-stats li{min-width:132px;border-top:2px solid var(--ink);padding-top:12px}
.vp-stats b{display:block;font-stretch:78%;font-weight:700;font-size:clamp(46px,4.8vw,76px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-stats span{display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.vp-stats-note{margin:16px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--teal)}
.vp-jump{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-top:clamp(44px,5.6vw,84px);border-top:1px solid var(--rule2)}
.vp-jump a{display:flex;align-items:center;gap:14px;padding:16px 18px 16px 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-decoration:none;color:var(--ink)}
.vp-jump a+a{border-left:1px solid var(--rule);padding-left:18px}
.vp-jump a span{font-weight:600;color:var(--teal)}
.vp-jump a i{margin-left:auto;font-style:normal;color:var(--mute);transition:transform .25s}
.vp-jump a:hover i{transform:translateY(3px);color:var(--ink)}

/* ------------------------------------------------ sections */
.vp-sec-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.vp-sec--flip .vp-sec-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.vp-sec--flip .vp-sec-text{order:2}
.vp-letter{margin:0 0 clamp(14px,1.8vw,22px);font-stretch:78%;font-weight:700;font-size:clamp(72px,8vw,128px);line-height:.78;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px var(--rule2)}
.vp-sec-text .v4-ch,.vp-ov-head .v4-ch{margin:0 0 14px}
.vp-h2{margin:0;font-stretch:78%;font-weight:700;font-size:clamp(36px,4.2vw,64px);line-height:.94;letter-spacing:-.022em;text-wrap:balance}
.v4 h2.vp-h2{font-size:clamp(36px,4.2vw,64px)}
.vp-p{margin:clamp(18px,2vw,26px) 0 0;max-width:44ch;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--ink2)}
.vp-chips-k{margin:clamp(26px,3vw,38px) 0 10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.vp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.vp-chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--rule2);font-size:14px;line-height:1.2;background:var(--paper)}
.vp-foot{margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--mute)}

/* ------------------------------------------------ graphic card */
.vp-g{margin:0;border-radius:18px;border:1px solid var(--rule);background:var(--paper);box-shadow:0 44px 80px -60px rgba(14,32,35,.5);overflow:hidden}
.v4--paper .vp-g{background:light-dark(#FBFCFC,#0C1517)}
.vp-g-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.vp-g-top b{font-weight:600;color:var(--ink)}
.vp-g-body{padding:clamp(18px,2.2vw,28px) clamp(16px,2.2vw,28px)}
.vp-g-foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:13px 20px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--mute)}
.vp-g-note{flex-basis:100%;color:var(--ink2)}
.vp-g-note b{font-weight:600;color:var(--ink)}
.vp-key{display:inline-flex;align-items:center;gap:7px}
.vp-sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--k1)}
.vp-sw.k2{background:var(--k2)}
.vp-sw.tr{background:transparent;box-shadow:inset 0 0 0 2px var(--k1)}
.vp-sw.office{background:var(--office)}
.vp-sw.sick{background:repeating-linear-gradient(135deg,var(--sick) 0 3px,var(--sick-l) 3px 4px)}
.vp-sw.free{background:var(--empty);box-shadow:inset 0 0 0 1px var(--rule2)}

/* day grid: label column + n day columns */
.vp-board{display:grid;grid-template-columns:var(--lab,92px) repeat(var(--n,14),minmax(0,1fr));column-gap:var(--gap);row-gap:12px;align-items:center}
.vp-board>.vp-d{margin-bottom:-4px}
.vp-d{font-family:var(--mono);font-size:10px;letter-spacing:0;text-align:center;color:var(--mute);font-variant-numeric:tabular-nums}
.vp-corner{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vp-l{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-l em{display:block;font-style:normal;font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.vp-l--tr{display:inline-flex;align-items:center;justify-self:start;max-width:100%;padding:5px 8px;border-radius:6px;background:light-dark(#E3EFEE,#18302F)}
.vp-c{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:5px;background:var(--empty);box-shadow:inset 0 0 0 1px var(--rule);font-family:var(--mono);font-style:normal;font-size:10px;font-weight:600;color:var(--k1-ink)}
.vp-c--on{background:var(--k1);box-shadow:none}
.vp-c--on.k2{background:var(--k2);color:var(--k2-ink)}
.vp-c--office{background:var(--office);box-shadow:none}
.vp-c--sick{background:repeating-linear-gradient(135deg,var(--sick) 0 4px,var(--sick-l) 4px 5px);box-shadow:none}
/* trainee duty: outlined in the trainer's colour, joined to the trainer's cell by a short stem */
.vp-c--tr{background:light-dark(#FFFFFF,#0A1012);box-shadow:inset 0 0 0 2px var(--k1);color:var(--k1)}
.vp-c--tr.k2{background:light-dark(#FFFFFF,#0A1012);box-shadow:inset 0 0 0 2px var(--k2);color:light-dark(#2F6A70,#86C3C4)}
.vp-c--tr::before{content:'';position:absolute;left:50%;width:2px;height:12px;margin-left:-1px;background:var(--k1)}
.vp-c--tr.k1::before{bottom:100%}
.vp-c--tr.k2::before{top:100%;background:var(--k2)}

/* hero board: trainee cells drop onto their trainer's day, left to right */
.vp-match .vp-c--tr{opacity:0;transform:translateY(-10px) scale(.7);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(260ms + var(--i) * 70ms)}
.vp-match .vp-c--tr.k2{transform:translateY(10px) scale(.7)}
.vp-match.in .vp-c--tr{opacity:1;transform:none}
.vp-match .vp-c--tr::before{transform:scaleY(0);transition:transform .3s ease;transition-delay:calc(560ms + var(--i) * 70ms)}
.vp-match .vp-c--tr.k1::before{transform-origin:bottom}
.vp-match .vp-c--tr.k2::before{transform-origin:top}
.vp-match.in .vp-c--tr::before{transform:none}

/* A: lens — the roster above, what the trainee sees below; everything but ops drops out as the scan passes */
.vp-strip{display:grid;grid-template-columns:repeat(var(--n,14),minmax(0,1fr));gap:var(--gap)}
.vp-strip.vp-days{margin-bottom:8px}
.vp-row-k{margin:0 0 9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.vp-filter{position:relative;display:flex;justify-content:center;margin:16px 0 18px;height:34px;align-items:center;overflow:hidden}
.vp-filter::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:repeating-linear-gradient(90deg,var(--rule2) 0 6px,transparent 6px 11px)}
.vp-filter span{position:relative;white-space:nowrap;padding:7px 14px;border-radius:999px;border:1px solid var(--rule2);background:var(--paper);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--teal)}
.v4--paper .vp-filter span{background:light-dark(#FBFCFC,#0C1517)}
.vp-filter::after{content:'';position:absolute;top:0;bottom:0;left:0;width:18%;background:linear-gradient(90deg,transparent,light-dark(rgba(47,106,112,.16),rgba(134,195,196,.2)),transparent);transform:translateX(-120%);opacity:0}
.vp-lens.in .vp-filter::after{animation:vp-scan 1.6s .35s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes vp-scan{0%{transform:translateX(-120%);opacity:1}90%{opacity:1}100%{transform:translateX(620%);opacity:0}}
.vp-c--gone{transition:background .5s ease,box-shadow .5s ease,opacity .5s ease;transition-delay:calc(420ms + var(--i) * 85ms)}
.vp-lens.in .vp-c--gone{background:var(--empty);box-shadow:inset 0 0 0 1px var(--rule)}

/* B: adjust — the duty moves one day to the right, first the trainer's, then the trainee's */
.vp-c--from{box-shadow:inset 0 0 0 1.5px var(--k1);background:var(--k1);transition:background .35s ease,box-shadow .35s ease}
.vp-adjust.in .vp-c--from{background:transparent;box-shadow:inset 0 0 0 1.5px var(--rule2);background-image:repeating-linear-gradient(135deg,transparent 0 4px,var(--rule) 4px 5px)}
.vp-c--to{opacity:0;transform:translateX(calc(-100% - var(--gap)));transition:opacity .2s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.vp-adjust.in .vp-c--to{opacity:1;transform:none}
.vp-adjust .vp-r1{transition-delay:.5s}
.vp-adjust .vp-r2{transition-delay:1.15s}
.vp-adjust.in .vp-c--to.vp-c--tr::before{transform:none}
.vp-adjust .vp-c--to.vp-c--tr::before{transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease 1.7s}
/* job sharing B: the office day moves (office colour instead of ops) */
.vp-c--from.vp-c--office{background:var(--office);box-shadow:none}
.vp-office .vp-c--office.vp-c--from{transition:background .35s ease .9s,box-shadow .35s ease .9s}
.vp-office .vp-c--to{transition-delay:.9s}
.vp-any{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.vp-any::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal)}
.vp-adjust-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-top:clamp(20px,2.4vw,30px);padding-top:16px;border-top:1px solid var(--rule)}
.vp-move{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px dashed var(--rule2);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.03em}
.vp-count{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vp-count b{font-family:inherit;font-stretch:78%;font-size:30px;line-height:1;letter-spacing:-.02em;text-transform:none;color:var(--ink);font-family:Archivo,'Helvetica Neue',Arial,sans-serif}

/* C: overview — head and three role cards */
.vp-ov-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,4vw,72px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.vp-ov-head .vp-p{margin:0 0 6px}
.vp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin:0;padding:0;list-style:none}
.vp-card{display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--rule);background:var(--paper);overflow:hidden}
.vp-card-v{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:188px;padding:22px 22px 20px;border-bottom:1px solid var(--rule);background:light-dark(#F7F9F9,#0C1517)}
.vp-card-b{padding:20px 22px 24px}
.vp-card .vp-card-no{margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--teal)}
.vp-card h3{margin:0 0 8px;font-stretch:84%;font-weight:700;font-size:clamp(22px,1.9vw,27px);line-height:1.05;letter-spacing:-.01em}
.vp-card p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.vp-mini-k,.vp-card .vp-mini-k{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.vp-mini-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 10px;gap:var(--gap);align-items:center}
.vp-mini-strip .vp-c--tr::before{display:none}
.vp-caret{display:block;width:2px;height:24px;background:var(--ink);animation:vp-blink 1.1s steps(1) infinite}
@keyframes vp-blink{50%{opacity:0}}
.vp-pairs{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.vp-pairs li{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;gap:10px;align-items:center;font-family:var(--mono);font-size:11.5px}
.vp-pairs span{padding:5px 8px;border-radius:6px;background:light-dark(#E3EFEE,#18302F);font-weight:600}
.vp-pairs i{height:2px;background:linear-gradient(90deg,var(--k2),var(--k1));border-radius:2px}
.vp-pairs b{padding:5px 8px;border-radius:6px;background:var(--k1);color:var(--k1-ink);font-weight:600}
.vp-hours{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.vp-hours li{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;font-family:var(--mono);font-size:11px}
.vp-hours li>span{font-weight:600;white-space:nowrap}
.vp-hours i{position:relative;height:10px;border-radius:999px;background:var(--empty);box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden}
.vp-hours i b{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--k1);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.vp-hours.in i b{width:var(--p)}
.vp-hours li.gap i b{background:var(--k2)}
.vp-hours em{font-style:normal;white-space:nowrap;display:flex;gap:6px;align-items:center;justify-content:flex-end;color:var(--ink2);font-variant-numeric:tabular-nums}
.vp-hours em s{text-decoration:none;padding:2px 6px;border-radius:5px;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:light-dark(#E3EFEE,#18302F);color:var(--ink)}
.vp-hours li.gap em s{background:light-dark(#FCE9C8,#4A3A17);color:light-dark(#7A4B00,#F2C879)}

/* job sharing: example week */
.vp-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.vp-day{display:flex;flex-direction:column;gap:10px}
.vp-dl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vp-blk{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:clamp(150px,15vw,210px);padding:12px 9px;border-radius:10px;transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease;transition-delay:calc(200ms + var(--i) * 80ms);transform:scaleY(.2);opacity:0}
.vp-weekg.in .vp-blk{transform:none;opacity:1}
.vp-blk b{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em}
.vp-blk em{font-style:normal;font-size:12.5px;line-height:1.25;font-weight:500;hyphens:manual;-webkit-hyphens:manual}
.vp-day--ops .vp-blk{background:var(--k1);color:var(--k1-ink)}
.vp-day--office .vp-blk{background:var(--office);color:light-dark(#0E2023,#F2F8F7)}
.vp-day--free .vp-blk{background:var(--empty);box-shadow:inset 0 0 0 1px var(--rule2);color:var(--mute);background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--rule) 6px 7px)}

/* job sharing: roster excerpt — the job sharer's row is lifted */
.vp-board--team{--lab:118px;row-gap:9px}
.vp-l--js{padding:5px 8px;border-radius:6px;background:light-dark(#E3EFEE,#18302F);justify-self:stretch}
.vp-team .vp-c{opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 40ms)}
.vp-team .vp-c--js{transition-delay:calc(500ms + var(--i) * 60ms)}
.vp-team.in .vp-c{opacity:1;transform:none}
.vp-team .vp-c--js.vp-c--office{box-shadow:0 0 0 2px light-dark(#FFFFFF,#10191B),0 0 0 3px var(--k1)}

/* job sharing: two models -> one roster */
.vp-models-grid{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(150px,.62fr);align-items:center}
.vp-model-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.vp-model{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:baseline;padding:16px 18px;border-radius:14px;border:1px solid var(--rule);background:var(--paper)}
.v4--paper .vp-model{background:light-dark(#FFFFFF,#10191B)}
.vp-model-no{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.vp-model b{font-stretch:84%;font-weight:700;font-size:20px;letter-spacing:-.01em}
.vp-model{grid-template-columns:auto minmax(0,1fr) auto}
.vp-model-v{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vp-model-v strong{font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-stretch:78%;font-weight:700;font-size:34px;line-height:.9;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.vp-ruler{grid-column:1/-1;position:relative;display:block;height:14px;margin-top:6px}
.vp-ruler i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--k1);transition:width 1.2s cubic-bezier(.2,.8,.2,1) .25s;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.vp-model--2 .vp-ruler i{background:var(--office)}
.vp-models.in .vp-ruler i{width:var(--w)}
.vp-model em{grid-column:1/-1;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--mute)}
.vp-join-lines{display:block;height:100%;min-height:150px}
.vp-join-lines svg{display:block;width:100%;height:100%}
.vp-join-lines path{fill:none;stroke:var(--rule2);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 4}
.vp-join-box{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px;border-radius:16px;background:#1F4F53;color:#F2F8F7}
.vp-join-box .v4-mini{width:30px;height:30px}
.vp-join-box .v4-mini path{fill:rgba(242,248,247,.2)}
.vp-join-box .v4-mini path.on{fill:#9FD3D2}
.vp-join-box b{font-stretch:80%;font-weight:700;font-size:24px;line-height:1;letter-spacing:-.01em}
.vp-join-box span{font-size:13.5px;line-height:1.4;color:#C9DBDB}

/* ------------------------------------------------ closing band */
.vp-final-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center}
.vp-final .v4-ch{margin-bottom:clamp(14px,1.8vw,22px)}
.v4 h2.vp-final-h{font-size:clamp(40px,5vw,78px);max-width:16ch}
.vp-final-p{margin-top:clamp(20px,2.2vw,28px)}
.vp-rel-k{margin:0 0 12px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#9FD3D2}
.vp-rel ul{margin:0;padding:0;list-style:none;border-top:1px solid rgba(242,248,247,.2)}
.vp-rel li{border-bottom:1px solid rgba(242,248,247,.14)}
.vp-rel a{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:14px;align-items:center;padding:17px 0;text-decoration:none;color:#F2F8F7}
.vp-rel-no{font-family:var(--mono);font-size:11.5px;font-weight:600;color:#9FD3D2}
.vp-rel-t b{display:block;font-weight:600;font-size:16.5px;line-height:1.25}
.vp-rel-t em{display:block;margin-top:3px;font-style:normal;font-size:14px;line-height:1.4;color:#C9DBDB}
.vp-rel i{font-style:normal;color:#9FD3D2;transition:transform .25s}
.vp-rel a:hover i{transform:translateX(4px)}
.vp-rel a:hover b{text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------ responsive */
@media (max-width:1100px){
  .vp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .vp-hero-g{max-width:760px}
  .vp-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vp-cards li:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .vp-sec-grid,.vp-ov-head,.vp-final-grid{grid-template-columns:minmax(0,1fr)}
  .vp-sec--flip .vp-sec-text{order:0}
  .vp-sec--flip .vp-sec-grid{grid-template-columns:minmax(0,1fr)}
  .vp-models-grid{grid-template-columns:minmax(0,1fr)}
  .vp-join-lines{display:none}
  .vp-join-box{margin-top:14px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .vp-join-box span{flex-basis:100%}
}
@media (max-width:640px){
  .vp-cards{grid-template-columns:minmax(0,1fr)}
  .vp-jump a+a{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .vp{--gap:3px}
  /* day boards: the name moves above its row, the days get the full width */
  .vp-board{grid-template-columns:repeat(var(--n,14),minmax(0,1fr));row-gap:6px}
  .vp-board .vp-corner{display:none}
  .vp-board .vp-l{grid-column:1/-1;margin-top:8px;justify-self:start}
  .vp-board .vp-l--js{justify-self:stretch}
  .vp-c--tr::before{display:none}
  .vp-d{font-size:8.5px}
  .vp-filter span{font-size:9.5px;letter-spacing:.05em;padding:6px 11px}
  .vp-c{font-size:9px;border-radius:4px}
  .vp-week{grid-template-columns:minmax(0,1fr);gap:6px}
  .vp-day{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px}
  .vp-blk{height:auto;min-height:44px;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;transform:scaleX(.2);transform-origin:left}
  .vp-weekg.in .vp-blk{transform:none}
  .vp-hours li{grid-template-columns:68px minmax(0,1fr) auto}
}
@media (prefers-reduced-motion:reduce){
  .vp-g *,.vp-g *::before,.vp-g *::after,.vp-g::after{transition:none!important;animation:none!important}
  .vp-caret{animation:none}
}