/* Preview only: the module-page system ("modulsider", prefix ms-). A module page is hero → zig-zag sections, each with
   ONE simplified component on a soft tinted panel → a tabbed panel for tours → the bento row → the CTA band. Cards come
   from kort.css (.vc) flattened to ceramic; only the hero's lead card is glass. Three directions for the board:
   [data-ms-variant=a] the panel (Personio), b the card cloud (HiBob), c one hero move. */
:root{--ms-mint:#E3F2E9;--ms-sand:#F6F3EE;--ms-pale:#F6FAF7;--ms-deep:#0B5A36;--ms-ink:#1A2233;--ms-hair:rgba(8,50,30,.07);
  --ms-card-shadow:0 24px 48px -28px rgba(8,50,30,.35),0 1px 2px rgba(8,50,30,.04);--ms-out:cubic-bezier(.16,1,.3,1);--ms-dur:.4s;--ms-stagger:.08s}
[data-ms-variant=b]{--ms-dur:.3s;--ms-stagger:.06s}

/* ── the panel ── */
.ms-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:32px;min-height:420px;display:grid;align-items:center;justify-items:center;background:var(--ms-mint);opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .5s var(--ms-out)}
.ms-panel.in{opacity:1;transform:none}
.ms-tint-mint{background:var(--ms-mint)}.ms-tint-sand{background:var(--ms-sand)}.ms-tint-pale{background:var(--ms-pale);box-shadow:inset 0 0 0 1px var(--ms-hair)}
.ms-tint-deep{background:var(--ms-deep);color:#fff}.ms-tint-none{background:none;padding:0;min-height:0;overflow:visible}
.ms-panel--wide{min-height:460px;padding:40px}
.ms-panel-in,.ms-pane-in{position:relative;display:flex;flex-wrap:wrap;gap:24px;width:100%;justify-content:center;align-items:flex-start}
.ms-panel .vc,.ms-hero-obj .vc.ms-ceramic,.ms-hero-row .vc.ms-ceramic{position:relative;left:auto;top:auto;width:252px;padding:0;border:0;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--ms-hair),var(--ms-card-shadow);-webkit-backdrop-filter:none;backdrop-filter:none;will-change:auto}
.ms-panel .vc .in,.vc.ms-ceramic .in{border-radius:24px;padding:16px 18px 18px;box-shadow:none}
.ms-panel .vc.w-wide,.vc.ms-ceramic.w-wide{width:296px}
.ms-panel .vc.w-pill,.vc.ms-ceramic.w-pill{width:250px;border-radius:999px}.ms-panel .vc.w-pill .in,.vc.ms-ceramic.w-pill .in{border-radius:999px;padding:10px}
.ms-panel .vc.w-xl,.vc.w-xl{width:min(640px,100%)}
.vc.w-xl .kv-tbl .r{grid-template-columns:2.2fr 1fr 1fr 1.3fr;font-size:14px}.vc.w-xl .kv-kb{grid-template-columns:repeat(3,1fr)}.vc.w-xl .kv-brief p{font-size:16px}
/* layouts: deliberate places, no float */
.ms-lay-two .vc:nth-child(2){margin-top:40px}
.ms-lay-row .vc:nth-child(2){margin-top:-16px}
.ms-lay-stack .vc:nth-child(2){position:absolute;right:-8px;bottom:-8px}
.ms-lay-stack .ms-panel-in{padding-right:72px}
.ms-crop-r .ms-panel-in{margin-right:-72px}.ms-crop-b .ms-panel-in{margin-bottom:-64px}
/* the cards enter one after another */
.ms-panel .vc,.ms-pane-in .vc{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform var(--ms-dur) var(--ms-out);transition-delay:calc(.1s + var(--i,0) * var(--ms-stagger))}
.ms-panel.in .vc,.ms-pane-in.in .vc{opacity:1;transform:none}
.ms-lay-stack.in .vc:nth-child(2){transform:none}

/* ── hero ── */
.hero.ms-hero{overflow:hidden}
.hero.ms-hero--split .wrap.ms-hero-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center;text-align:left}
.hero.ms-hero--split .ms-hero-copy h1{margin:16px 0 0;max-width:12ch;font-size:clamp(42px,5.2vw,80px)}
.hero.ms-hero--split .ms-hero-copy .lead{margin-inline:0;max-width:44ch}.hero.ms-hero--split .ms-hero-copy .ctas{justify-content:flex-start}
.hero.ms-hero--split .ms-hero-copy .eyebrow{justify-content:flex-start}
.ms-hero-obj{position:relative;height:520px;min-width:0}
.ms-hero-obj .vc{position:absolute;opacity:0;transform:translateY(28px) scale(.97);transition:transform var(--ms-dur) var(--ms-out),opacity .3s ease;transition-delay:calc(.35s + var(--i,0) * var(--ms-stagger))}
.ms-hero-obj.in .vc{opacity:1;transform:none}
.ms-hero-obj .vc.w-xl{width:min(640px,100%)}
.ms-lay-h1 .vc:nth-child(1){left:0;top:40px}.ms-lay-h1 .vc:nth-child(2){left:330px;top:150px}.ms-lay-h1 .vc:nth-child(3){left:24px;top:400px}
.ms-lay-h2 .vc:nth-child(1){left:0;top:60px}.ms-lay-h2 .vc:nth-child(2){left:320px;top:0}
.ms-lay-h3 .vc:nth-child(1){left:0;top:24px}.ms-lay-h3 .vc:nth-child(2){left:min(420px,calc(100% - 296px));top:300px}
.hero.ms-hero--center .ms-hero-row{display:grid;grid-template-columns:252px 296px 252px;justify-content:center;align-items:start;gap:24px;width:min(1180px,100%);margin:clamp(36px,4vw,56px) auto 0;position:relative;z-index:1}
.ms-hero-row .vc{position:relative;left:auto;top:auto;width:auto;opacity:0;transform:translateY(24px) scale(.98);transition:transform var(--ms-dur) var(--ms-out),opacity .3s ease;transition-delay:calc(.35s + var(--i,0) * var(--ms-stagger))}
.ms-hero-row .vc:nth-child(2){margin-top:-16px}.ms-hero-row .vc:nth-child(1),.ms-hero-row .vc:nth-child(3){margin-top:24px}
.ms-hero-row.in .vc{opacity:1;transform:none}
.ms-hero-row .vc.w-wide,.ms-hero-row .vc.w-pill{width:auto}
.hero.ms-hero .wrap.ms-hero-wrap{position:relative;z-index:1}
/* the AI world: deep green, white type, the brief as the only glass */
.hero.ms-hero--ai{position:relative;margin:0 var(--gutter,24px);padding:calc(var(--bar) + 64px) 0 72px;border-radius:28px;background:#0B5A36;background-image:radial-gradient(60% 50% at 50% 0%,#137A47,transparent 70%);color:#fff;text-align:center;min-height:0}
.hero.ms-hero--ai::after{display:none}
.hero.ms-hero--ai .eyebrow{color:rgba(255,255,255,.7)}.hero.ms-hero--ai .eyebrow b{background:rgba(255,255,255,.14);color:#fff}
.hero.ms-hero--ai h1{color:#fff}.hero.ms-hero--ai h1 em.s{color:#BFE0CD}.hero.ms-hero--ai .lead{color:rgba(255,255,255,.82)}
.hero.ms-hero--ai .btn.primary{background:#fff;color:#0B5A36}.hero.ms-hero--ai .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.hero.ms-hero--ai .kp-stage{text-align:left}
.hero.ms-hero--ai .kp-brief{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);box-shadow:none}
.hero.ms-hero--ai .kp-brief>*{background:transparent;color:#fff}.hero.ms-hero--ai .kp-who>b,.hero.ms-hero--ai .kp-msg{color:#fff}.hero.ms-hero--ai .kp-who{color:rgba(255,255,255,.7)}
.hero.ms-hero--ai .kp-k{background:radial-gradient(circle,#0B5A36 0 4px,#fff 5px);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.hero.ms-hero--ai .kp-cnt{background:#fff;color:#0B5A36}
.hero.ms-hero--ai .kp-src{border-top-color:rgba(255,255,255,.14)}.hero.ms-hero--ai .kp-src li{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}.hero.ms-hero--ai .kp-src svg{color:rgba(255,255,255,.6)}
.hero.ms-hero--ai .kp-src li.read{color:#fff}.hero.ms-hero--ai .kp-src li.read svg{color:#7FE0A9}.hero.ms-hero--ai .kp-src li.scan{background:#fff;color:#0B5A36;box-shadow:0 0 0 1.5px #5CC08A}.hero.ms-hero--ai .kp-src li.scan svg{color:#00A550}
.hero.ms-hero--ai .kp-slots{margin-top:64px}.hero.ms-hero--ai .kp-slot[data-s]{margin-top:0}
.hero.ms-hero--ai .kpc{background:#fff;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:20px;box-shadow:0 30px 56px -30px rgba(0,0,0,.45)}.hero.ms-hero--ai .kpc::before{display:none}
.hero.ms-hero--ai .kp-lines path{stroke:#5CC08A}.hero.ms-hero--ai .kp-lines circle{fill:#7FE0A9}
.hero.ms-hero--ai .kp-ex{display:none}
.hero.ms-hero--ai+.field-sec{padding-top:clamp(72px,8vw,120px)}

/* ── pills, tabs, bento, CTA ── */
.kick.ms-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--ms-mint);color:#00693E;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.kick.ms-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#00A550}
.ms-tabrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.ms-tabrow button{height:44px;padding:0 18px;border:1px solid var(--ms-hair);border-radius:999px;background:#fff;color:#1A2233;font:600 14px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.ms-tabrow button[aria-selected="true"]{background:#00693E;color:#fff;border-color:#00693E}
.ms-tabrow button:focus-visible{outline:2px solid #00693E;outline-offset:3px}
.ms-tabpane{width:100%}.ms-tabpane[hidden]{display:none}
.ms-tabcap{margin:0 0 20px;font:500 24px/1.2 var(--serif);color:#1A2233;display:flex;align-items:baseline;gap:14px}.ms-tabcap .kick{margin:0}
.ms-tint-deep .ms-tabcap{color:#fff}.ms-tint-deep .ms-tabcap .kick{color:#BFE0CD}
.ms-tabs .ms-panel{display:block;min-height:0}
.ms-with .cards .card{padding:28px}
.ctaband.ms-cta{border-radius:28px}
.ms-zig,.ms-wide,.ms-tabs{padding-block:clamp(56px,7vw,104px)}
.ms-wide .ms-panel{margin-top:clamp(28px,3vw,40px)}
.ms-zig .sside{min-width:0}

/* ── Karma's pipeline and the big number ── */
.ms-pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;max-width:900px;margin:0 auto 28px;padding:12px 0}
.ms-node{position:relative;z-index:1;display:grid;justify-items:center;gap:10px;text-align:center}
.ms-node i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1.5px #BFE0CD;color:#00693E;transition:box-shadow .3s,background .3s}
.ms-node i svg{width:24px;height:24px}.ms-node b{font:600 14px/1.2 var(--sans)}
.ms-node.on i{background:#00693E;color:#fff;box-shadow:0 0 0 1.5px #00693E}
.ms-pipeline{position:absolute;left:12.5%;right:12.5%;top:40px;height:2px;width:75%;overflow:visible}
.ms-pipeline line{stroke:#BFE0CD;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.ms-pipe.in .ms-pipeline line{animation:msDrawLine 1.2s var(--ms-out) forwards}
.ms-dot{position:absolute;top:36px;left:12.5%;width:10px;height:10px;border-radius:50%;background:#00A550;opacity:0}
.ms-pipe.in .ms-dot{animation:msDot 1.4s .9s cubic-bezier(.45,0,.55,1) forwards}
.ms-bignum{display:flex;align-items:baseline;gap:18px;justify-content:center;margin:0 auto 32px;text-align:left;max-width:900px}
.ms-bignum b{font:500 clamp(64px,8vw,112px)/1 var(--serif);letter-spacing:-.03em;color:#00693E;font-variant-numeric:tabular-nums}
.ms-bignum span{max-width:30ch;font:400 16px/1.4 var(--sans);color:#4F5B54}
@keyframes msDrawLine{to{stroke-dashoffset:0}}
@keyframes msDot{0%{opacity:0;left:12.5%}10%{opacity:1}100%{opacity:1;left:calc(87.5% - 10px)}}

/* ── effects (one per panel, declared with data-ms-fx; triggered once by .in) ── */
.ms-fx-grow.in .v-bar i,.ms-fx-grow.in .v-wk i b,.ms-fx-grow.in .kv-course i b,.ms-fx-grow.in .v-team i b{animation:msGrow .9s .25s var(--ms-out) both;transform-origin:left}
@keyframes msGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ms-fx-draw.in .v-line .ln{stroke-dasharray:420;stroke-dashoffset:420;animation:msDraw 1.2s .3s ease-out forwards}
.ms-fx-draw.in .v-line .ar{opacity:0;animation:msFadeIn .3s 1.3s forwards}.ms-fx-draw.in .v-line i{opacity:0;animation:msFadeIn .2s 1.4s forwards}
@keyframes msDraw{to{stroke-dashoffset:0}}@keyframes msFadeIn{to{opacity:1}}
.ms-fx-steps.in .v-fl li{animation:msStep .4s both}.ms-fx-steps.in .v-fl li:nth-child(2){animation-delay:.35s}.ms-fx-steps.in .v-fl li:nth-child(3){animation-delay:.7s}.ms-fx-steps.in .v-fl li:nth-child(4){animation-delay:1.05s}
@keyframes msStep{from{opacity:.35;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ms-fx-fade.in .v-out{animation:msOut 1.2s .8s forwards}@keyframes msOut{to{opacity:.45}}
.ms-fx-fade.in .v-save{opacity:0;animation:msFadeIn .25s 2s forwards}
.ms-flip{display:inline-block;transition:transform .18s ease-in}.ms-flip.ms-flipping{transform:rotateX(90deg)}
.ms-tick-pop{animation:msPop .25s var(--ms-out)}@keyframes msPop{from{transform:scale(.6)}to{transform:scale(1)}}
.ms-slot-before{opacity:0;transform:translateY(-12px)}.ms-slot-in{transition:opacity .4s ease,transform .4s var(--ms-out);opacity:1;transform:none}
/* c · the table builds itself, then locks */
.ms-fx-build .kv-tbl .r:not(.h){opacity:0;transform:translateY(6px)}.ms-fx-build .kv-tbl .f{opacity:0}
.ms-fx-build.in .kv-tbl .r:not(.h){animation:msRow .35s var(--ms-out) forwards}
.ms-fx-build.in .kv-tbl .r:nth-child(2){animation-delay:.5s}.ms-fx-build.in .kv-tbl .r:nth-child(3){animation-delay:.7s}.ms-fx-build.in .kv-tbl .r:nth-child(4){animation-delay:.9s}.ms-fx-build.in .kv-tbl .r:nth-child(5){animation-delay:1.1s}
.ms-fx-build.in .kv-tbl .f{animation:msFadeIn .3s 1.4s forwards}
@keyframes msRow{to{opacity:1;transform:none}}
.ms-lock{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:10px;border-radius:50%;background:#E3F2E9;color:#00693E;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--ms-out)}.ms-lock svg{width:15px;height:15px}.ms-lock.on{opacity:1;transform:none}
/* ambient life, only on the clock pill */
.ms-panel .live,.ms-hero-obj .live,.ms-hero-row .live{animation:msLive 1.6s ease-in-out infinite}@keyframes msLive{50%{opacity:.4}}

/* ── variants ── */
[data-ms-variant=b] .ms-panel{box-shadow:none}
[data-ms-variant=b] .ms-panel-in,[data-ms-variant=b] .ms-pane-in{gap:20px}
[data-ms-variant=b] .ms-zig .ms-panel .vc,[data-ms-variant=b] .ms-wide .ms-panel .vc{box-shadow:0 0 0 1px var(--ms-hair),0 16px 36px -24px rgba(8,50,30,.35)}
[data-ms-variant=b] .ms-tabs .ms-panel.ms-tint-none{padding:0}
[data-ms-variant=c] .ms-panel.ms-tint-deep .ms-tabcap{color:#fff}

/* ── breakpoints ── */
@media (max-width:1240px){.ms-hero-obj .vc.w-xl{width:min(520px,100%)}.ms-lay-h3 .vc:nth-child(2){left:auto;right:0}}
@media (max-width:1040px){
  .hero.ms-hero--split .wrap.ms-hero-wrap{grid-template-columns:1fr;text-align:center}
  .hero.ms-hero--split .ms-hero-copy h1{margin-inline:auto;max-width:14ch}.hero.ms-hero--split .ms-hero-copy .lead{margin-inline:auto}.hero.ms-hero--split .ms-hero-copy .ctas{justify-content:center}.hero.ms-hero--split .ms-hero-copy .eyebrow{justify-content:center}
  .ms-hero-obj{height:auto;display:grid;gap:14px;justify-items:center;max-width:760px;margin:12px auto 0}
  .ms-hero-obj .vc{position:relative!important;left:auto!important;top:auto!important}
  .hero.ms-hero--center .ms-hero-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}.ms-hero-row .vc:nth-child(3){display:none}
    .ms-lay-two .vc:nth-child(2),.ms-lay-row .vc:nth-child(2){margin-top:0}.ms-lay-row .vc:nth-child(3){display:none}
}
@media (max-width:720px){
  .ms-panel,.ms-panel--wide{min-height:0;padding:20px;border-radius:24px}.ms-tint-none{padding:0}
  .ms-panel-in,.ms-pane-in{display:grid;gap:12px;margin:0!important;padding:0!important}
  .ms-panel .vc,.ms-hero-obj .vc,.ms-hero-row .vc{position:relative!important;width:auto!important;max-width:100%;right:auto!important;bottom:auto!important}
  .ms-lay-stack .vc:nth-child(2){position:relative}
  .ms-panel .vc:nth-child(n+3){display:none}
  .ms-hero-obj .vc:nth-child(3){display:none}
  .hero.ms-hero--center .ms-hero-row{grid-template-columns:1fr;gap:12px;max-width:none}.ms-hero-row .vc{margin-top:0!important}.ms-hero-row .vc:nth-child(3){display:none}
  .ms-tabrow{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:4px}.ms-tabrow::-webkit-scrollbar{display:none}.ms-tabrow button{flex:none;scroll-snap-align:start}
  .ms-tabcap{font-size:20px}
  .hero.ms-hero--ai{margin:0 10px;padding-top:calc(var(--bar) + 28px);border-radius:22px}.hero.ms-hero--ai .kp-slots{grid-template-columns:1fr;margin-top:28px}
  .ms-pipe{grid-template-columns:repeat(2,1fr)}.ms-pipeline,.ms-dot{display:none}.ms-bignum{flex-direction:column;align-items:center;text-align:center;gap:8px}.ms-bignum b{font-size:64px}
  .vc.w-xl .kv-tbl .r{grid-template-columns:1.6fr 1fr 1.2fr;font-size:13px}.vc.w-xl .kv-tbl .r>span:nth-child(3){display:none}
}
@media (hover:hover){.ms-panel .vc:hover{box-shadow:0 0 0 1px var(--ms-hair),0 28px 52px -28px rgba(8,50,30,.45)}}
@media (prefers-reduced-motion:reduce){
  .ms-panel,.ms-panel .vc,.ms-pane-in .vc,.ms-hero-obj .vc,.ms-hero-row .vc{transition:opacity .2s;transform:none!important;opacity:1}
  .ms-fx-grow.in .v-bar i,.ms-fx-grow.in .v-wk i b,.ms-fx-grow.in .kv-course i b,.ms-fx-grow.in .v-team i b,.ms-fx-draw.in .v-line .ln,.ms-fx-draw.in .v-line .ar,.ms-fx-draw.in .v-line i,.ms-fx-steps.in .v-fl li,.ms-fx-fade.in .v-out,.ms-fx-fade.in .v-save,.ms-fx-build.in .kv-tbl .r,.ms-fx-build.in .kv-tbl .f,.ms-pipe.in .ms-pipeline line,.ms-pipe.in .ms-dot,.ms-panel .live{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
  .ms-fx-build .kv-tbl .r:not(.h),.ms-fx-build .kv-tbl .f{opacity:1;transform:none}
}

/* fixes after the first review */
.ms-panel .v-wk.kv-dept li,.ms-hero-obj .v-wk.kv-dept li,.ms-hero-row .v-wk.kv-dept li{grid-template-columns:72px minmax(0,1fr)}.kv-dept span{width:auto}
.hero.ms-hero--center{padding-bottom:clamp(72px,8vw,120px)}
.hero.ms-hero--split{padding-bottom:clamp(48px,6vw,96px)}
.ms-tabs .ms-panel .ms-pane-in{min-height:300px;align-items:center}
/* site.css uses .kc for the cookie dialog (fixed overlay); the kanban's mini cards share the name, so reset them here */
.kv-kb .kc{position:static;inset:auto;z-index:auto;padding:6px;background:#fff;animation:none;overscroll-behavior:auto;justify-content:flex-start}

/* ── tour stops (live pages): the tour keeps its table of contents on the left — site.js pins it on wide screens — and
   each stop's screenshot is replaced by free cards on a soft green glow, the same stage as the front page's tour ── */
.annot.ms-stop{position:relative;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center;align-content:center;min-height:min(520px,calc(100svh - 300px));padding:32px 24px;border-radius:28px;background:radial-gradient(55% 60% at 50% 50%,rgba(92,192,138,.22),rgba(227,242,232,.32) 60%,transparent 80%)}
.ms-stop .vc{position:relative;left:auto;top:auto;width:252px;padding:0;border:0;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--ms-hair),var(--ms-card-shadow);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform var(--ms-dur) var(--ms-out);transition-delay:calc(.1s + var(--i,0) * var(--ms-stagger))}
.ms-stop .vc .in{border-radius:24px;padding:16px 18px 18px;box-shadow:none}
.ms-stop .vc.w-wide{width:296px}.ms-stop .vc.w-xl{width:min(600px,100%)}
.ms-stop .vc.w-pill{width:250px;border-radius:999px}.ms-stop .vc.w-pill .in{border-radius:999px;padding:10px}
.ms-stop.in .vc{opacity:1;transform:none}
.ms-stop.ms-lay-stack{flex-wrap:nowrap}.ms-stop.ms-lay-stack .vc:nth-child(2){position:relative;right:auto;bottom:auto;z-index:2;margin:160px 0 0 -96px}
.ms-stop.ms-lay-row .vc:nth-child(2){margin-top:-24px}
.tour.is-staged .annot.ms-stop{transform-origin:50% 50%}
@media (max-width:1040px){.annot.ms-stop{min-height:0;padding:24px 16px}.ms-stop.ms-lay-stack{flex-wrap:wrap}.ms-stop.ms-lay-stack .vc:nth-child(2){margin:0}.ms-stop .vc:nth-child(n+3){display:none}}
@media (max-width:720px){.annot.ms-stop{display:grid;gap:12px;padding:16px 0}.ms-stop .vc{width:auto!important;max-width:100%}.ms-stop .vc:nth-child(n+2){display:none}.ms-lay-two .vc:nth-child(2){margin-top:0}}
@media (prefers-reduced-motion:reduce){.ms-stop .vc{transition:none;opacity:1;transform:none}}
/* the cards read at the size of the panel: a wide panel and a tour stop show them a size up (zoom keeps the cards' own
   proportions); the hero's satellite sits under the lead card's total, overlapping its foot only */
.ms-panel--wide .ms-panel-in>.vc,.ms-stop>.vc{zoom:1.2}
.ms-panel--wide .ms-panel-in>.vc.w-xl,.ms-stop>.vc.w-xl{zoom:1.1}
.ms-lay-h3 .vc:nth-child(2){top:330px}
@media (max-width:1040px){.ms-panel--wide .ms-panel-in>.vc,.ms-stop>.vc,.ms-panel--wide .ms-panel-in>.vc.w-xl,.ms-stop>.vc.w-xl{zoom:1}}
/* the tour stop always spans its column; on phones its card takes the full width */
.annot.ms-stop{width:100%;box-sizing:border-box}
@media (max-width:720px){.annot.ms-stop{grid-template-columns:minmax(0,1fr);justify-items:stretch}.ms-stop>.vc{width:100%!important;zoom:1}}
/* the AI world starts under the menu bar, so the logo and the links stay on white */
.hero.ms-hero--ai{margin-top:calc(var(--bar) + 12px);padding-top:clamp(56px,6vw,88px)}
@media (max-width:720px){.hero.ms-hero--ai{margin-top:calc(var(--bar) + 8px);padding-top:40px}}
/* Mark 27-10: a tag never touches the heading under it */
.kick.ms-pill{margin:0 0 16px}

/* optical centring (30-10): the pill's text sat .7 px high */
.kick.ms-pill{padding-top:7.4px;padding-bottom:6.6px}