/* PalSync case study: the hero, the order-sync scroll, the app illustrations, the icon explorations and the before/after.
   Markup: src/_includes/e2/palsync/*.njk. Real UI (Figma exports) stays crisp images and the dashboard banner and cards are real
   HTML; the worlds and the 3D objects (parcel, sync and check badges, coin, icon) are Higgsfield renders.
   Palette: deep navy #0A1F44, PalSync blue #1F6FD1, sky #4BA3E3, white, cream #FBF6EA. Banner tones are Polaris pairs:
   critical #8E1F0B on #FEE9E8, warning #5E4200 on #FFF1C2, success #0C5132 on #CDFEE1 (all above 7:1).
   The .ps-*--b modifiers are the "Daylight sort" look (a cream and sky world, dark text; the user's pick, the night look a
   was removed). Sizes inside the stage use cqw (the stage is an inline-size container) with a vw
   fallback written first. */

/* ---------- Hero ---------- */
.ps-hero {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; width: 100%; border-radius: 32px;
}
.ps-hero--b { background: linear-gradient(#bfe0fb, #FBF6EA); }
.ps-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* A light vignette keeps the floating window the brightest thing in the frame. */
.ps-hero__shade { position: absolute; inset: 0; z-index: -1; }
.ps-hero--b .ps-hero__shade { background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(31,111,209,.2) 100%); }
.ps-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. */
.ps-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;
}
.ps-hero--b .ps-window { box-shadow: 0 0 0 1px rgba(10,31,68,.12), 0 50px 100px -20px rgba(31,111,209,.4), 0 30px 60px rgba(10,31,68,.16); }
.ps-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. */
.ps-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);
}
.ps-hero--b .ps-float { filter: drop-shadow(0 18px 26px rgba(31,111,209,.32)); }
.ps-float img { display: block; width: 100%; height: auto; animation: ps-bob var(--d) ease-in-out var(--delay) infinite alternate; }
.ps-float--far { z-index: 0; opacity: .92; }
.ps-hero--b .ps-float--far { filter: drop-shadow(0 10px 18px rgba(31,111,209,.26)) blur(.6px); }
@keyframes ps-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) ---------- */
.ps-h { font-weight: 600; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; }

/* ---------- Sync: parcels ride the rail while the dashboard counts ---------- */
.ps-sync {
  --x0: 9.6%; --x1: 90.3%;       /* centres of the left and right platforms (% of the stage width) */
  --halo: rgba(75,163,227,.7);
  position: relative; height: 360vh; height: 360svh;
}
.ps-sync--b { --x0: 8.4%; --x1: 91.7%; --halo: rgba(255,255,255,.95); }
.ps-sync__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;
}
.ps-stage {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; background: #0a2a7a;
  aspect-ratio: 16 / 9; width: min(100%, calc((100svh - var(--header-h) - 48px) * 16 / 9));
  container-type: inline-size;
}
.ps-sync--b .ps-stage { background: #d8ebfb; }
.ps-stage__bg, .ps-finale { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-finale { z-index: 3; opacity: 0; transition: opacity .5s ease; }
.ps-finale.is-on { opacity: 1; }
.ps-stage__glow {
  position: absolute; left: 50%; top: calc(var(--pt) + var(--ph) / 2); height: calc(var(--ph) * 1.7); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
}
.ps-sync--b .ps-stage__glow { mix-blend-mode: soft-light; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.4) 55%, transparent 72%); }
.ps-stage.is-finale .ps-stage__glow { opacity: .75; }
.ps-stage.is-burst .ps-stage__glow { animation: ps-glow .9s ease-out; }
@keyframes ps-glow { 0% { opacity: 1; scale: 1.3; } 100% { opacity: .75; scale: 1; } }

/* The two end platforms only exist on a phone, where the 4:5 frame crops them off the world still: a pad under each end of the rail. */
.ps-pad { display: none; }

/* The sync badge hovers over the centre platform; parcels pass beneath it. It spins only while a parcel is moving. */
.ps-badge {
  position: absolute; left: 50%; top: calc(var(--rail) - 35%); height: 19%; aspect-ratio: 407 / 420; translate: -50% 0; z-index: 2;
  transition: opacity .3s ease, scale .45s var(--ease-out);
}
.ps-badge::before {
  content: ""; position: absolute; inset: -38%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo), transparent);
  opacity: .55;
}
.ps-sync--b .ps-badge::before { opacity: .8; }
.ps-badge__img {
  position: relative; display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 14px 16px rgba(0,8,50,.4));
  animation: ps-spin 3.2s linear infinite paused;
}
.ps-stage.is-moving .ps-badge__img { animation-play-state: running; }
.ps-stage.is-finale .ps-badge { opacity: 0; scale: .3; }
@keyframes ps-spin { to { rotate: 360deg; } }

/* Parcels: JS sets --t (0 = left platform, 1 = right platform) and the pile offsets (--dx, --dy in own widths and heights) from the
   scroll. Their bottom sits on the rail (top: var(--rail)). */
.ps-parcels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }   /* above the finale clip: the stack stays on its platform */
.ps-parcel {
  --t: 0; --dx: 0; --dy: 0; --rot: 0deg; --g: 0;
  position: absolute; left: calc(var(--x0) + (var(--x1) - var(--x0)) * var(--t)); top: var(--rail);
  height: 11%; aspect-ratio: 458 / 420; z-index: calc(var(--k) + 1);
  transform: translate(calc(-50% + var(--dx) * 100%), calc(-100% + var(--dy) * 100%)) rotate(var(--rot));
  transform-origin: 50% 100%; will-change: transform, left;
}
.ps-parcel__img { display: block; width: 100%; height: 100%; filter: brightness(calc(1 + var(--g) * .28)) drop-shadow(0 8px 8px rgba(0,8,50,.4)); }
.ps-sync--b .ps-parcel__img { filter: brightness(calc(1 + var(--g) * .28)) drop-shadow(0 8px 8px rgba(31,111,209,.3)); }
.ps-parcel__check {
  position: absolute; left: var(--cx); top: 56%; width: 44%; height: auto; aspect-ratio: 406 / 420; translate: -50% -50%;
  opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,40,20,.4));
}
.ps-parcel.is-synced .ps-parcel__check { animation: ps-pop .7s var(--ease-out) both; }
.ps-parcel.is-synced .ps-parcel__img { animation: ps-land .45s ease-out; }
@keyframes ps-pop {
  0% { opacity: 0; translate: -50% -230%; scale: .3; }
  45% { opacity: 1; translate: -50% -150%; scale: 1.15; }
  75% { translate: -50% -42%; scale: 1.05; }
  100% { opacity: 1; translate: -50% -50%; scale: 1; }
}
@keyframes ps-land { 0% { transform: scale(1.06, .94); transform-origin: 50% 100%; } 100% { transform: none; } }

/* The icon: placed exactly where the finale clip's first frame has it (top and height come from the look). It rises onto the
   centre platform from below when the finale starts, then idles in a slow hover. */
.ps-piece {
  position: absolute; left: 50%; top: var(--pt); height: var(--ph); width: auto; z-index: 2;
  translate: -50% 0; transform-origin: 50% 100%; transform: translateY(14%) scale(.5); opacity: 0;
  transition: transform .2s ease-in, opacity .16s ease;
  filter: drop-shadow(0 24px 30px rgba(0,8,50,.4));
}
.ps-sync--b .ps-piece { filter: drop-shadow(0 24px 30px rgba(31,111,209,.35)); }
.ps-stage.is-finale .ps-piece {
  opacity: 1; transform: none;
  transition: transform .75s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
  animation: ps-hover 3.2s ease-in-out .85s infinite alternate;
}
@keyframes ps-hover { from { translate: -50% 0; } to { translate: -50% -2.2%; } }
.ps-stage.is-burst .ps-piece { animation: ps-flash .9s ease-out, ps-hover 3.2s ease-in-out .85s infinite alternate; }
@keyframes ps-flash { 0% { filter: brightness(1.7) drop-shadow(0 0 36px rgba(255,255,255,.95)); } 100% { filter: brightness(1) drop-shadow(0 24px 30px rgba(0,8,50,.4)); } }

/* Burst: a ring and ten four-point sparkles (blue, sky, white) thrown out from the icon as it lands. */
.ps-burst {
  position: absolute; left: 50%; top: calc(var(--pt) + var(--ph) / 2); height: calc(var(--ph) * 1.1); aspect-ratio: 1;
  translate: -50% -50%; z-index: 2; pointer-events: none;
}
.ps-burst::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 2px rgba(75,163,227,.95), 0 0 36px 6px rgba(255,255,255,.7), inset 0 0 36px 6px rgba(75,163,227,.55);
}
.ps-burst i {
  position: absolute; left: 50%; top: 50%; width: 9%; aspect-ratio: 1; opacity: 0; translate: -50% -50%; background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 5px rgba(10,31,68,.55));
}
.ps-burst i:nth-child(3n + 1) { background: #1F6FD1; }
.ps-burst i:nth-child(3n + 2) { background: #4BA3E3; }
.ps-stage.is-burst .ps-burst::before { animation: ps-ring .9s cubic-bezier(.2,.8,.2,1); }
.ps-stage.is-burst .ps-burst i { animation: ps-spark 1s cubic-bezier(.2,.8,.2,1); }
.ps-stage.is-burst .ps-burst i:nth-child(odd) { animation-duration: 1.2s; }
@keyframes ps-ring { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.7; } }
@keyframes ps-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--dist) * -1)) scale(1); }
}

/* The dashboard, in HTML: a Polaris banner (top left) and the three order-count cards (top right). They sit above the finale clip. */
.ps-ui {
  position: absolute; left: 4%; right: 4%; top: 6%; z-index: 5; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw;
}
.ps-banner {
  --bg: #FEE9E8; --ink: #8E1F0B; --ic: #C70A24;
  flex: 0 1 36%; min-width: 0; display: flex; align-items: flex-start; gap: .9cqw; padding: 1.15cqw 1.35cqw 1.3cqw;
  border-radius: 12px; background: var(--bg); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 14px 34px rgba(0,8,50,.3);
  transition: opacity .14s linear, background-color .14s linear;
}
.ps-banner--critical { --bg: #FEE9E8; --ink: #8E1F0B; --ic: #C70A24; }
.ps-banner--warning { --bg: #FFF1C2; --ink: #5E4200; --ic: #946200; }
.ps-banner--success { --bg: #CDFEE1; --ink: #0C5132; --ic: #1B7A4B; }
.ps-banner.is-out { opacity: 0; }
.ps-banner__icon { flex: none; width: 1.7cqw; min-width: 16px; height: auto; margin-top: .1cqw; color: var(--ic); }
.ps-ic { display: none; }
.ps-banner--critical .ps-ic--critical, .ps-banner--warning .ps-ic--warning, .ps-banner--success .ps-ic--success { display: inline; }
.ps-banner__text { display: flex; flex-direction: column; align-items: flex-start; gap: .55cqw; min-width: 0; }
.ps-banner__title { font-weight: 600; line-height: 1.25; letter-spacing: -.01em; font-size: clamp(13px, 1.1vw, 16px); font-size: clamp(13px, 1.2cqw, 17px); }
.ps-banner__body { line-height: 1.4; font-size: clamp(11px, .95vw, 14px); font-size: clamp(11px, 1.02cqw, 14.5px); text-wrap: pretty; }
.ps-btn {
  display: inline-flex; align-items: center; margin-top: .35cqw; padding: .5cqw .95cqw; border-radius: 8px; color: #fff; background: #303030;
  font-weight: 600; line-height: 1.2; white-space: nowrap; font-size: clamp(11px, .92vw, 13px); font-size: clamp(11px, .98cqw, 13.5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.45);
}
.ps-metrics { flex: 0 0 40%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8cqw; }
.ps-metric {
  display: flex; flex-direction: column; gap: .6cqw; padding: 1cqw 1.15cqw 1.1cqw; border-radius: 12px; background: #fff; color: #303030;
  box-shadow: 0 0 0 1px rgba(26,26,26,.06), 0 1px 2px rgba(26,26,26,.1), 0 12px 28px rgba(0,8,50,.22);
}
.ps-metric__label { font-weight: 600; line-height: 1.25; text-wrap: balance; font-size: clamp(11px, .9vw, 13px); font-size: clamp(11px, .95cqw, 13.5px); }
.ps-metric__value {
  font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.3vw, 34px); font-size: clamp(22px, 2.5cqw, 36px); color: #1a1a1a;
}
.ps-metric--synced .ps-metric__value.is-live { color: #0C5132; }

/* ---------- App illustrations ---------- */
.ps-ill { display: flex; flex-direction: column; gap: 32px; }
.ps-ill__panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; background: #0A1F44;
  padding: clamp(16px, 3vw, 40px);
}
.ps-ill--b .ps-ill__panel { background: #FBF6EA; }
.ps-ill__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ps-ill__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.ps-card {
  display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(18px, 2.6vw, 34px) clamp(14px, 2vw, 26px) clamp(16px, 2.2vw, 26px);
  border-radius: 24px; border: 1px solid transparent;
  opacity: 0; translate: 0 44px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity .6s ease, translate .9s var(--ease-out), transform .3s ease-out, box-shadow .3s ease, background-color .3s ease;
}
.ps-ill--b .ps-card { background: rgba(255,255,255,.7); border-color: rgba(31,111,209,.14); color: #0A1F44; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 50px -28px rgba(31,111,209,.5); }
.ps-ill--b .ps-card:hover, .ps-ill--b .ps-card:focus-within { background: rgba(255,255,255,.88); box-shadow: 0 32px 60px -26px rgba(31,111,209,.6), 0 0 0 1px rgba(31,111,209,.3); }
.ps-card.is-in { opacity: 1; translate: 0 0; }
/* The picture is the real Figma SVG on its own white square, so the round stage is white too and just crops the corners. */
.ps-card__stage {
  width: min(100%, 260px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 8px rgba(255,255,255,.16), 0 22px 40px -14px rgba(0,8,50,.55);
}
.ps-ill--b .ps-card__stage { box-shadow: 0 0 0 1px rgba(31,111,209,.14), 0 0 0 9px rgba(75,163,227,.13), 0 22px 40px -16px rgba(31,111,209,.5); }
.ps-card__stage img { display: block; width: 100%; height: 100%; }
.ps-card.is-in .ps-card__stage { animation: ps-float 5.4s ease-in-out calc(.9s + var(--k) * .55s) infinite alternate; }
@keyframes ps-float { from { translate: 0 -2.5%; } to { translate: 0 3%; } }
.ps-card__where { text-align: center; text-wrap: balance; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.ps-ill--b .ps-card__where { color: #3b5278; }

/* ---------- The icon: five explorations, then the final ---------- */
.ps-logo { display: flex; flex-direction: column; gap: 32px; }
.ps-logo__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: clamp(28px, 4.4vw, 64px) clamp(20px, 3.5vw, 56px) clamp(24px, 3.4vw, 44px); }
.ps-logo--b .ps-logo__panel { background: radial-gradient(60% 100% at 88% 50%, rgba(75,163,227,.34), transparent 70%), linear-gradient(160deg, #EAF4FE, #FBF6EA); }
.ps-logo__row {
  --gap: clamp(26px, 4vw, 58px);
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.75fr); gap: var(--gap); align-items: center;
}
.ps-tile {
  display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0;
  opacity: 0; translate: -28px 10px; scale: .8;
  transition: opacity .5s ease, translate .85s cubic-bezier(.34, 1.56, .64, 1), scale .85s cubic-bezier(.34, 1.56, .64, 1);
}
.ps-tile.is-in { opacity: 1; translate: 0 0; scale: 1; }
.ps-tile__art { position: relative; width: 100%; aspect-ratio: 1; }
.ps-tile__art img { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 16px rgba(0,8,50,.4)); }
.ps-logo--b .ps-tile__art img { filter: drop-shadow(0 14px 16px rgba(31,111,209,.3)); }
/* The thread: a thin line with a dot at its end runs from each tile to the next, drawing itself once its tile has arrived. */
.ps-tile:not(.ps-tile--final) .ps-tile__art::after {
  content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: calc(var(--gap) - 12px); height: 8px; translate: 0 -50%;
  background:
    radial-gradient(circle at calc(100% - 3px) 50%, var(--dot, #4BA3E3) 0 3px, transparent 3.6px),
    linear-gradient(var(--line, rgba(75,163,227,.55)), var(--line, rgba(75,163,227,.55))) 0 50% / calc(100% - 4px) 1.5px no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease-out) .3s;
}
.ps-logo--b .ps-tile { --dot: #1F6FD1; --line: rgba(31,111,209,.42); }
.ps-tile.is-in:not(.ps-tile--final) .ps-tile__art::after { clip-path: inset(0); }
.ps-tile:nth-child(5):not(.ps-tile--final) .ps-tile__art::after { --line: rgba(75,163,227,.95); }
.ps-logo--b .ps-tile:nth-child(5) .ps-tile__art::after { --line: rgba(31,111,209,.8); }
.ps-tile__label { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.ps-logo--b .ps-tile__label { color: #3b5278; }
/* The final mark: larger, and a soft glow and ring around it. */
.ps-tile--final .ps-tile__art::before {
  content: ""; position: absolute; inset: -14%; border-radius: 30%; z-index: 0; pointer-events: none; filter: blur(16px);
  background: radial-gradient(closest-side, rgba(75,163,227,.7), rgba(31,111,209,.25) 70%, transparent);
  animation: ps-halo 3.4s ease-in-out infinite alternate;
}
.ps-tile--final .ps-tile__art::after { content: ""; position: absolute; inset: -4.5%; border-radius: 17%; box-shadow: 0 0 0 2px rgba(75,163,227,.8), 0 0 28px 2px rgba(75,163,227,.45); pointer-events: none; }
.ps-logo--b .ps-tile--final .ps-tile__art::after { box-shadow: 0 0 0 2px rgba(31,111,209,.7), 0 0 28px 2px rgba(75,163,227,.5); }
.ps-tile--final .ps-tile__label { font-weight: 600; font-size: 13px; }
.ps-logo--b .ps-tile--final .ps-tile__label { color: #0A1F44; }
@keyframes ps-halo { from { opacity: .7; scale: .96; } to { opacity: 1; scale: 1.04; } }

/* ---------- Before and after ---------- */
.ps-ba { display: flex; flex-direction: column; gap: 32px; }
.ps-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border); }
.ps-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;
}
.ps-tab:hover { color: #fff; }
.ps-tab[aria-selected="true"] { background: #fff; color: #000; }
.ps-ba__stage { display: flex; justify-content: center; padding: clamp(16px, 4vw, 48px); border-radius: 32px; background: var(--surface-1); }
.ps-ba .e2-slider { aspect-ratio: 1200 / 634; width: min(100%, 920px); }
.ps-ba .e2-slider__img { transition: opacity .25s ease; }
.ps-ba.is-swapping .e2-slider__img { opacity: .2; }

/* ---------- Tablets: the stage gets fewer pixels, so the dashboard parts take a bigger share ---------- */
@media (max-width: 899px) {
  .ps-banner { flex-basis: 42%; }
  .ps-metrics { flex-basis: 46%; }
}

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 699px) {
  .ps-sync { --x0: 14%; --x1: 86%; }
  .ps-hero { aspect-ratio: 4 / 5; border-radius: 20px; }
  .ps-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. */
  .ps-float { width: calc(var(--w) * 1.9); }
  .ps-float[data-k="1"] { left: 5%; top: 4%; }
  .ps-float[data-k="2"] { left: 74%; top: 3%; }
  .ps-float[data-k="3"] { left: 6%; top: 77%; width: 20%; }
  .ps-float[data-k="4"] { left: 66%; top: 77%; width: 24%; }

  .ps-stage { aspect-ratio: 4 / 5; width: 100%; border-radius: 20px; }
  .ps-parcel { height: 11%; }
  .ps-badge { height: 11%; top: calc(var(--rail) - 25%); }
  .ps-pad {
    display: block; position: absolute; top: calc(var(--rail) - 1.2%); width: 27%; height: 3.4%; translate: -50% 0; border-radius: 50%; z-index: 1; pointer-events: none;
  }
  .ps-pad--l { left: var(--x0); }
  .ps-pad--r { left: var(--x1); }
  .ps-sync--b .ps-pad { background: #fff; box-shadow: 0 0 0 1.2cqw #4BA3E3, 0 6px 10px rgba(31,111,209,.25); }

  /* The banner stays at the top; the three counts drop to the bottom of the frame, below the rail, so neither covers the pile or the icon. */
  .ps-ui { flex-direction: column; justify-content: space-between; align-items: stretch; left: 4%; right: 4%; top: 4%; bottom: 4%; gap: 2.4cqw; }
  .ps-banner { flex: none; gap: 2.4cqw; padding: 3cqw 3.4cqw 3.2cqw; }
  .ps-banner__icon { width: 5cqw; }
  .ps-banner__text { gap: 1.2cqw; }
  .ps-banner__title { font-size: clamp(12px, 3.7cqw, 15px); }
  .ps-banner__body { font-size: clamp(11px, 3.2cqw, 13px); line-height: 1.35; }
  .ps-btn { margin-top: .6cqw; padding: 1.5cqw 2.8cqw; font-size: clamp(11px, 3.1cqw, 13px); }
  .ps-metrics { flex: none; gap: 2cqw; }
  .ps-metric { gap: 1cqw; padding: 2.2cqw 2.4cqw 2.4cqw; border-radius: 10px; }
  .ps-metric__label { font-size: clamp(10px, 2.85cqw, 12px); line-height: 1.2; }
  .ps-metric__value { font-size: clamp(18px, 5.6cqw, 24px); }

  .ps-ill__panel, .ps-logo__panel { border-radius: 20px; }
  .ps-ill__list { grid-template-columns: 1fr; }
  .ps-card { flex-direction: row; gap: 18px; padding: 16px; }
  .ps-card__stage { flex: none; width: min(38%, 150px); box-shadow: 0 0 0 5px rgba(255,255,255,.16), 0 14px 26px -12px rgba(0,8,50,.55); }
  .ps-ill--b .ps-card__stage { box-shadow: 0 0 0 1px rgba(31,111,209,.14), 0 0 0 5px rgba(75,163,227,.13), 0 14px 26px -12px rgba(31,111,209,.5); }
  .ps-card__where { text-align: left; flex: 1; min-width: 0; }

  /* Five explorations in a 3 + 2 grid, a dotted thread down to the final mark on its own row. */
  .ps-logo__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 12px; }
  .ps-tile { flex: 0 0 calc((100% - 24px) / 3); gap: 10px; translate: 0 22px; }
  .ps-tile__label { font-size: 11px; letter-spacing: .04em; }
  .ps-tile:not(.ps-tile--final) .ps-tile__art::after { display: none; }
  .ps-tile--final { flex: 0 0 100%; margin-top: 20px; position: relative; gap: 18px; }
  .ps-tile--final::before {
    content: ""; position: absolute; left: 50%; top: -34px; width: 2px; height: 30px; translate: -50% 0;
    background: repeating-linear-gradient(180deg, var(--dot, #4BA3E3) 0 3px, transparent 3px 8px);
  }
  .ps-tile--final .ps-tile__art { width: min(54%, 200px); }
  .ps-tab { padding: 8px 14px; }
  .ps-tabs { border-radius: 20px; }
  .ps-ba__stage { border-radius: 20px; }
}

/* ---------- Reduced motion: no float, no tilt, no deal-in; the sync shows its last state (all synced, the icon on the stand) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-float img, .ps-stage.is-finale .ps-piece, .ps-stage.is-burst .ps-piece, .ps-badge__img, .ps-card.is-in .ps-card__stage, .ps-tile--final .ps-tile__art::before { animation: none !important; }
  .ps-parcel.is-synced .ps-parcel__check, .ps-parcel.is-synced .ps-parcel__img { animation: none; }
  .ps-parcel__check { opacity: 1; }
  .ps-parcel:not(.is-synced) .ps-parcel__check { opacity: 0; }
  .ps-window { transform: translate(-50%, -50%); transition: none; }
  .ps-float { translate: none; }
  .ps-piece, .ps-stage.is-finale .ps-piece, .ps-badge { transition: none; }
  .ps-banner { transition: none; }
  .ps-card, .ps-tile { opacity: 1; translate: none; scale: none; transition: none; }
  .ps-tile:not(.ps-tile--final) .ps-tile__art::after { clip-path: none; transition: none; }
  .ps-sync { height: auto; }
  .ps-sync__sticky { position: static; height: auto; padding: 24px 0; }
}