/* Multi Location case study: the hero, the "Route the order" scroll (a parcel follows the dashed road past the four fulfilment rules),
   the app illustrations, the widget's tabs and the before/after. Markup: src/_includes/e2/multiloc/*.njk. Real UI (Figma exports)
   stays crisp images and the rule cards are real HTML; the worlds and the 3D objects (pin, parcel, store, warehouse) are Higgsfield
   renders. Look a (dusk road map): deep navy #0A1F44, route light blue #8CC8F0, white cards, blue #1A5EA8; success green #1A8F5A (the
   delivery check). The shared sections take the look's calm backdrop. Sizes inside the stage use cqw (the frame is an inline-size
   container) with a vw fallback written first.
   Layout: the heading block sits above the stage inside the sticky box; the stage is as wide as the screen's height allows (--head
   is the height of that block). Under 900px the stage keeps its shape and the cards move under it. */

.ml-hero, .ml-route, .ml-ill, .ml-wt, .ml-ba { --ml-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Hero ---------- */
.ml-hero {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; width: 100%; border-radius: 32px;
}
.ml-hero--a { background: #0a1f44; }
.ml-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* The shade keeps the floating window the brightest thing in the frame: a darker navy over the dusk world. */
.ml-hero__shade { position: absolute; inset: 0; z-index: -1; }
.ml-hero--a .ml-hero__shade { background: radial-gradient(120% 90% at 50% 45%, rgba(3,10,34,.4) 35%, rgba(3,10,34,.72) 100%); }
.ml-hero__scene { position: absolute; inset: 0; --px: 0; --py: 0; perspective: 1800px; }

/* The real redesigned dashboard, tilted towards the reader; the pointer leans it a few degrees more. */
.ml-window {
  position: absolute; left: 50%; top: 50%; width: 50%; border-radius: 14px; overflow: hidden; z-index: 1;
  transform: translate(-50%, -50%) rotateX(calc(7deg - var(--py) * 4deg)) rotateY(calc(var(--px) * 6deg));
  transition: transform .2s linear;
}
.ml-hero--a .ml-window { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 50px 100px -20px rgba(0,6,30,.85), 0 30px 60px rgba(0,6,30,.5); }
.ml-window img { display: block; width: 100%; height: auto; }

/* Floating objects: the span carries the pointer parallax (deeper ones move more), the img the slow float. */
.ml-float {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: 2;
  translate: calc(var(--px) * var(--z) * 36px) calc(var(--py) * var(--z) * 24px);
}
.ml-hero--a .ml-float { filter: drop-shadow(0 18px 26px rgba(0,6,30,.55)); }
.ml-float img { display: block; width: 100%; height: auto; animation: ml-bob var(--d) ease-in-out var(--delay) infinite alternate; }
.ml-float--far { z-index: 0; opacity: .92; }
.ml-hero--a .ml-float--far { filter: drop-shadow(0 10px 18px rgba(0,6,30,.5)) blur(.6px); }
@keyframes ml-bob {
  from { transform: translateY(-4%) rotate(calc(var(--r) * -1)); }
  to { transform: translateY(4%) rotate(var(--r)); }
}

/* ---------- Section headings (same scale as the story title) ---------- */
.ml-h { font-weight: 600; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; }

/* ---------- The scroll: a sticky box, the heading block, then the stage ---------- */
.ml-route {
  --head: 100px;                  /* height of the heading block plus its gap: the stage gets the rest of the screen */
  --pad-b: 28px;
  position: relative; height: 360vh; height: 360svh;
}
.ml-sticky {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
}
.ml-col {
  display: flex; flex-direction: column; gap: 14px;
  width: min(100%, calc((100vh - var(--header-h) - var(--head) - var(--pad-b)) * 1920 / 1086));
  width: min(100%, calc((100svh - var(--header-h) - var(--head) - var(--pad-b)) * 1920 / 1086));
}
.ml-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow count" "title title" "note note";
  align-items: center; gap: 4px 16px;
}
.ml-eyebrow { grid-area: eyebrow; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.ml-title { grid-area: title; font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.05em; }
.ml-note { grid-area: note; font-size: 14px; line-height: 1.4; color: var(--text-3); }
/* The live counter: which rule the story is on. */
.ml-count {
  grid-area: count; display: inline-flex; gap: .45em; align-items: baseline; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--text-3); border: 1px solid var(--border-strong);
}
.ml-count b { font-weight: 600; color: #fff; }

/* The frame is the stage's box (and its size container); the world inside it is the clipped picture, the cards sit above it. */
.ml-frame { position: relative; aspect-ratio: 1920 / 1086; width: 100%; container-type: inline-size; }
.ml-world { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 32px; background: #0a2a7a; }
.ml-world__bg, .ml-finale { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-finale { z-index: 4; opacity: 0; transition: opacity .5s ease; }
.ml-finale.is-on { opacity: 1; }

/* The finale pin: placed exactly where the clip's first frame has it (top and height come from the look, centred). It drops onto the
   platform when the finale starts, then idles in a slow hover. A soft glow and one ring mark the landing. */
.ml-piece {
  position: absolute; left: 50%; top: var(--pt); height: var(--ph); width: auto; z-index: 3;
  translate: -50% 0; transform-origin: 50% 100%; transform: translateY(-42%) scale(.88); opacity: 0;
  transition: transform .2s ease-in, opacity .16s ease;
  filter: drop-shadow(0 8px 8px rgba(0,8,50,.3));
}
.ml-frame.is-finale .ml-piece, .is-static .ml-piece {
  opacity: 1; transform: none;
  transition: transform .8s var(--ml-spring), opacity .25s ease;
  animation: ml-hover 3.2s ease-in-out .85s infinite alternate;
}
/* The soft contact shadow under the pin's tip, as the clip's first frame has it. */
.ml-contact {
  position: absolute; left: 50%; top: calc(var(--pt) + var(--ph)); height: calc(var(--ph) * .15); aspect-ratio: 2.7 / 1; z-index: 2; translate: -50% -38%;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(closest-side, rgba(0,6,40,.55), rgba(0,6,40,.22) 62%, transparent);
}
.ml-frame.is-finale .ml-contact, .is-static .ml-contact { opacity: 1; transition: opacity .6s ease .25s; }
@keyframes ml-hover { from { translate: -50% 0; } to { translate: -50% -2.2%; } }
.ml-glow {
  --gw: 30%; --gh: 22%; --gy: 46%;
  position: absolute; left: 50%; top: var(--gy); width: var(--gw); height: var(--gh); translate: -50% -50%; z-index: 1;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(closest-side, rgba(140,200,240,.4), transparent 72%);
}
.ml-glow::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 2px rgba(140,200,240,.95), 0 0 30px 4px rgba(140,200,240,.6);
}
.ml-frame.is-finale .ml-glow { opacity: 1; }
.ml-frame.is-finale .ml-glow::after { animation: ml-ring 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes ml-ring { 0% { opacity: .95; scale: .5; } 100% { opacity: 0; scale: 1.5; } }

/* ---------- Route (a): the parcel follows the dashed road past the four fulfilment rules ---------- */
.ml-routesvg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(140,200,240,.9)); transition: opacity .4s ease;
}
/* The road is drawn dashed and revealed through a solid mask (JS animates its dash offset), so the dashes stay dashes. */
.ml-route__line { fill: none; stroke: #8CC8F0; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 20 17; }
.ml-route__mask { fill: none; stroke: #fff; stroke-width: 46; stroke-linecap: butt; }
.ml-wp { fill: #0a2a7a; stroke: #8CC8F0; stroke-width: 6; opacity: .55; transition: fill .3s ease, opacity .3s ease; }
.ml-wp.is-hit { fill: #fff; opacity: 1; }

.ml-start, .ml-end, .ml-parcel { position: absolute; pointer-events: none; transition: opacity .4s ease; }
.ml-start { width: 3.4%; height: auto; z-index: 2; translate: -50% -100%; filter: drop-shadow(0 6px 6px rgba(0,8,50,.5)); }
.ml-end { width: 9%; z-index: 2; translate: -50% -93%; }
.ml-end__img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 10px 10px rgba(0,8,50,.5)); }
.ml-frame.is-arrived .ml-end__img { animation: ml-land .7s var(--ease-out); }
@keyframes ml-land {
  0% { transform: none; }
  22% { transform: scale(1.07, .91); }
  55% { transform: scale(.97, 1.06) translateY(-5%); }
  100% { transform: none; }
}
.ml-check {
  position: absolute; right: -2%; top: -4%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #1A8F5A; opacity: 0; scale: 0;
  display: grid; place-items: center; box-shadow: 0 0 0 .4cqw #fff, 0 8px 16px rgba(0,40,20,.45);
}
.ml-check svg { width: 64%; height: 64%; }
.ml-frame.is-arrived .ml-check { animation: ml-pop .6s var(--ml-spring) .14s both; }
@keyframes ml-pop { from { opacity: 0; scale: 0; } 40% { opacity: 1; } to { opacity: 1; scale: 1; } }
/* The parcel rides the head of the road (JS sets left and top); its bottom sits on the road. */
.ml-parcel { width: 6%; z-index: 3; translate: -50% -86%; opacity: 0; scale: .5; transition: opacity .3s ease, scale .5s var(--ml-spring); will-change: left, top; }
.ml-parcel.is-on { opacity: 1; scale: 1; }
.ml-parcel img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 8px 8px rgba(0,8,50,.5)); animation: ml-hop .8s ease-in-out infinite alternate paused; }
.ml-frame.is-moving .ml-parcel img { animation-play-state: running; }
@keyframes ml-hop { from { transform: translateY(0) rotate(-2.5deg); } to { transform: translateY(-9%) rotate(2.5deg); } }

/* The cards: a white card pops up beside each waypoint as the parcel reaches it. Only the one reached last is selected, like the
   app's radio list: the others dim and their radio empties; the selected one also shows its note. */
.ml-rules { position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ml-rule {
  --gap: 1.8cqw;
  position: absolute; left: calc(var(--cx) + var(--ox) * 1%); top: var(--cy); width: max(200px, 20%);
  display: flex; align-items: flex-start; gap: .75em; padding: .8em .85em .85em .8em; border-radius: 14px;
  background: #fff; color: #0A1F44; line-height: 1.3;
  font-size: clamp(11px, .95vw, 14px); font-size: clamp(11px, 1.06cqw, 14px);
  translate: -50% calc(-100% - var(--gap)); transform-origin: 50% 100%;
  opacity: 0; transform: translateY(14px) scale(.92);
  box-shadow: 0 0 0 1px rgba(10,31,68,.06), 0 18px 38px -12px rgba(0,8,50,.65);
  transition: opacity .4s ease, transform .6s var(--ml-spring), box-shadow .3s ease;
}
.ml-rule--below { translate: -50% var(--gap); transform-origin: 50% 0; }
/* the leader from the waypoint to the card */
.ml-rule::after {
  content: ""; position: absolute; left: calc(50% - var(--ox) * 1cqw); width: 2px; height: var(--gap); translate: -1px 0;
  background: rgba(255,255,255,.8); border-radius: 1px;
}
.ml-rule--above::after { top: 100%; }
.ml-rule--below::after { bottom: 100%; }
.ml-rule.is-on { opacity: .55; transform: none; }
.ml-rule.is-active { opacity: 1; box-shadow: 0 0 0 2px #8CC8F0, 0 22px 44px -12px rgba(0,8,50,.75); }
.ml-rule__ill { flex: none; width: 3.5em; height: 3.5em; border-radius: .6em; background: #fff; box-shadow: 0 0 0 1px rgba(10,31,68,.08); }
.ml-rule__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-rule__name { font-weight: 600; font-size: 1.02em; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.ml-rule__body {
  display: block; max-height: 0; overflow: hidden; opacity: 0; color: #4a5a78; font-size: .86em; line-height: 1.4; text-wrap: pretty;
  transition: max-height .5s ease, opacity .35s ease, margin .35s ease;
}
.ml-rule.is-active .ml-rule__body { max-height: 12em; opacity: 1; margin-top: .45em; }
.ml-rule__radio { flex: none; position: relative; width: 1.25em; height: 1.25em; margin-top: .05em; border-radius: 50%; border: 2px solid #9fb0cb; background: #fff; transition: border-color .25s ease; }
.ml-rule__radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #1A5EA8; scale: 0; transition: scale .3s var(--ml-spring); }
.ml-rule.is-active .ml-rule__radio { border-color: #1A5EA8; }
.ml-rule.is-active .ml-rule__radio::after { scale: 1; }

/* Finale (a): the cards, the road, the parcel and the end pins fade, so only the platform and the pin remain. */
.ml-frame.is-finale .ml-rule { opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .35s ease, transform .35s ease; }
.ml-frame.is-finale .ml-routesvg, .ml-frame.is-finale .ml-start, .ml-frame.is-finale .ml-end, .ml-frame.is-finale .ml-parcel { opacity: 0; }

/* ---------- App illustrations ---------- */
.ml-ill, .ml-wt { display: flex; flex-direction: column; gap: 32px; }
.ml-ill__panel, .ml-wt__panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; background: #0A1F44;
  padding: clamp(16px, 3vw, 40px);
}
.ml-ill__bg, .ml-wt__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ml-ill__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.ml-card {
  display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.8vw, 22px); border-radius: 24px; background: #fff; color: #0A1F44;
  box-shadow: 0 0 0 1px rgba(10,31,68,.06), 0 28px 50px -30px rgba(0,8,50,.7);
  opacity: 0; translate: 0 44px; transition: opacity .6s ease, translate .9s var(--ease-out);
}
.ml-card.is-in { opacity: 1; translate: 0 0; }
/* The pictures are the real Figma illustrations (56 x 56 units, vector), shown large on their own white tile. */
.ml-card__art { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(10,31,68,.09); margin-bottom: 10px; }
.ml-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-card__where { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #1A5EA8; }
.ml-card__what { font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }

/* ---------- The widget's tabs: three illustrated, six line icons ---------- */
.ml-wt__panel { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.ml-wt__group { display: flex; flex-direction: column; gap: 16px; }
.ml-wt__label {
  align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: rgba(6,18,54,.7); color: #cfe0ff;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
}
.ml-wt__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.6vw, 20px); }
.ml-wt__grid--general, .ml-wt__grid--settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-tile {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 18px 14px 14px; border-radius: 20px; background: #fff; color: #0A1F44;
  box-shadow: 0 0 0 1px rgba(10,31,68,.06), 0 22px 40px -28px rgba(0,8,50,.7);
  opacity: 0; translate: -28px 10px; scale: .8;
  transition: opacity .5s ease, translate .85s var(--ml-spring), scale .85s var(--ml-spring);
}
.ml-tile.is-in { opacity: 1; translate: 0 0; scale: 1; }
.ml-tile__icon { flex: none; width: 56px; height: 56px; border-radius: 12px; }
.ml-tile__name { min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
/* General: the illustrated version large on top, the line icon small beside the name. */
.ml-tile--ill { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; }
.ml-tile__art { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(10,31,68,.09); }
.ml-tile__art img { display: block; width: 100%; height: 100%; }
.ml-tile--ill .ml-tile__name { display: flex; align-items: center; gap: 10px; padding: 0 4px 2px; }
.ml-tile--ill .ml-tile__icon { width: 32px; height: 32px; border-radius: 8px; }

/* ---------- Before and after ---------- */
.ml-ba { display: flex; flex-direction: column; gap: 32px; }
.ml-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border); }
.ml-tab {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-3); background: none; border: 0; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; transition: background-color .2s ease, color .2s ease;
}
.ml-tab:hover { color: #fff; }
.ml-tab[aria-selected="true"] { background: #fff; color: #000; }
.ml-ba__stage { display: flex; justify-content: center; padding: clamp(16px, 4vw, 48px); border-radius: 32px; background: var(--surface-1); }
.ml-ba .e2-slider { aspect-ratio: 1200 / 844; width: min(100%, 920px); }
.ml-ba .e2-slider__img { transition: opacity .25s ease; }
.ml-ba.is-swapping .e2-slider__img { opacity: .2; }

/* ---------- Shorter desktop screens: the heading block shrinks to one line so the stage keeps its width ---------- */
@media (min-width: 900px) and (max-height: 759px) {
  .ml-route { --head: 46px; }
  .ml-head { grid-template-areas: "title count"; }
  .ml-eyebrow, .ml-note { display: none; }
}

/* ---------- Tablets and phones: the stage keeps its shape; the cards go under it ---------- */
@media (max-width: 899px) {
  .ml-col { width: 100%; gap: 12px; }
  .ml-frame { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; }
  .ml-world { position: relative; inset: auto; aspect-ratio: 1920 / 1086; border-radius: 20px; }
  .ml-route { --head: 96px; }

  .ml-routesvg { filter: drop-shadow(0 0 3px rgba(140,200,240,.9)); }
  .ml-route__line { stroke-width: 12; stroke-dasharray: 26 20; }
  .ml-wp { stroke-width: 8; }
  .ml-start { width: 5%; }
  .ml-end { width: 12%; }
  .ml-parcel { width: 8.5%; }

  /* The cards become a compact list in step with the scroll: the ones not reached yet are faint placeholders, so nothing shifts. */
  .ml-rules { position: static; display: grid; grid-template-columns: 1fr; gap: 6px; }
  .ml-rule {
    position: static; translate: none; width: auto; align-items: center; gap: .7em; padding: .6em .75em; border-radius: 12px;
    font-size: 13px; opacity: .2; transform: none; transform-origin: 50% 50%; box-shadow: none;
  }
  .ml-rule::after { display: none; }
  .ml-rule.is-on { opacity: .55; }
  .ml-rule.is-active { opacity: 1; box-shadow: 0 0 0 2px #8CC8F0; }
  .ml-rule__ill { width: 2.7em; height: 2.7em; }
  .ml-rule__radio { margin-top: 0; }
  .ml-frame.is-finale .ml-rule { transform: none; opacity: .2; }   /* the finale fades the list to its placeholders: the stage keeps its company */

}
@media (min-width: 560px) and (max-width: 899px) {
  .ml-rules { grid-template-columns: 1fr 1fr; }
}

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 699px) {
  .ml-hero { aspect-ratio: 4 / 5; border-radius: 20px; }
  .ml-window { width: 88%; top: 48%; }
  /* On a 4:5 phone frame the screen fills the middle band, so the objects sit above and below it. */
  .ml-float { width: calc(var(--w) * 1.9); }
  .ml-float[data-k="1"] { left: 5%; top: 4%; }
  .ml-float[data-k="2"] { left: 74%; top: 3%; }
  .ml-float[data-k="3"] { left: 6%; top: 77%; width: 22%; }
  .ml-float[data-k="4"] { left: 64%; top: 77%; width: 26%; }

  .ml-title { font-size: clamp(24px, 7vw, 30px); }
  .ml-note { font-size: 13px; }
  .ml-world { border-radius: 16px; }

  .ml-ill__panel, .ml-wt__panel { border-radius: 20px; }
  .ml-ill__list { grid-template-columns: 1fr; }
  .ml-card {
    display: grid; grid-template-columns: min(38%, 140px) minmax(0, 1fr); grid-template-areas: "art where" "art what";
    grid-template-rows: 1fr 1fr; align-items: center; column-gap: 16px; row-gap: 4px; padding: 14px; border-radius: 18px;
  }
  .ml-card__art { grid-area: art; margin: 0; }
  .ml-card__where { grid-area: where; align-self: end; }
  .ml-card__what { grid-area: what; align-self: start; font-size: 15px; text-wrap: pretty; }

  .ml-wt__grid--general { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ml-wt__grid--settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ml-tile { gap: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; }
  .ml-tile__icon { width: 44px; height: 44px; border-radius: 10px; }
  .ml-tile__name { font-size: 14px; }
  .ml-tile--ill { padding: 8px; gap: 8px; border-radius: 16px; }
  .ml-tile__art { border-radius: 10px; }
  .ml-tile--ill .ml-tile__name { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; padding: 0 2px 2px; }
  .ml-tile--ill .ml-tile__icon { width: 26px; height: 26px; border-radius: 6px; }

  .ml-tab { padding: 8px 14px; }
  .ml-tabs { border-radius: 20px; }
  .ml-ba__stage { border-radius: 20px; }
}

/* ---------- Still story: reduced motion, or a screen too short to pin on. No scroll story: the last state, everything placed ---------- */
.ml-route.is-static { height: auto; }
.is-static .ml-sticky { position: static; height: auto; padding: 24px 0; }
.is-static .ml-col { width: 100%; }
.is-static .ml-rule.is-on { transition: none; }
.is-static .ml-piece, .is-static .ml-glow, .is-static .ml-contact { transition: none; }
.is-static .ml-glow { opacity: 1; }

/* ---------- Reduced motion: no float, no tilt, no deal-in, nothing springs ---------- */
@media (prefers-reduced-motion: reduce) {
  .ml-float img, .ml-frame.is-finale .ml-piece, .is-static .ml-piece, .ml-parcel img, .ml-frame.is-arrived .ml-end__img, .ml-frame.is-finale .ml-glow::after { animation: none !important; }
  .ml-frame.is-arrived .ml-check { animation: none; opacity: 1; scale: 1; }
  .ml-window { transform: translate(-50%, -50%); transition: none; }
  .ml-float { translate: none; }
  .ml-piece, .ml-contact, .ml-glow, .ml-rule, .ml-parcel, .ml-routesvg { transition: none; }
  .ml-card, .ml-tile { opacity: 1; translate: none; scale: none; transition: none; }
  .ml-route { height: auto; }
  .ml-sticky { position: static; height: auto; padding: 24px 0; }
  .ml-col { width: 100%; }
}