@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   Hero platform demonstration — three acts, 19 s, loops.

   All motion is here. hero-demo.js only sets data-act and .is-on classes;
   every transition, duration and curve is declared below, so the motion
   design can be tuned without touching the clock.

   Coordinate space: the stage is 1100 × 660 (5:3) and every desktop
   position below is in that space, scaled by the container.

   Easing curves measured out of personio.ch's own Lottie — the four they
   actually use across 73 animated properties.
   ═══════════════════════════════════════════════════════════════════════ */

.h2-demo {
  --d-enter:  cubic-bezier(.33, 0, .20, 1);     /* entries, settles (their house curve) */
  --d-exit:   cubic-bezier(.33, 0, .83, .83);   /* recede, fade out */
  --d-travel: cubic-bezier(.17, .17, .83, .83); /* cursor, thread tracing */
  --d-zoom:   cubic-bezier(.33, 0, .67, 1);     /* the act 3 pull-back */

  --d-card:  #FFFFFF;
  --d-ink:   var(--black, #1D1D1F);
  --d-mute:  var(--gray-600, #6E6E73);
  --d-line:  var(--gray-100, #E8E8ED);
  --d-green: var(--accent, #1B4332);

  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;   /* .h2-hero-inner centres everything; the product UI must not be */
}

.h2-demo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  container-type: inline-size;
  font-size: 16px;
  color: var(--d-ink);

  /* ONE unit for the whole demo. Every size and position below is written
     as `calc(N * var(--u))`, where N is the number in the 1100-wide stage
     drawing. On desktop --u scales the whole composition with the container;
     in compact it becomes a real pixel and the layout reflows instead.
     Changing these two lines is how the demo changes scale — nowhere else.
     (cqw resolves per element, so it is the descendants that measure the
     stage; a container cannot query itself.) */
  --u: calc(100cqw / 1100);
}

/* every desktop coordinate is expressed in stage units */
.h2-demo-stage > * { position: absolute; }
.h2-demo-shell,
.h2-demo-fore { inset: 0; }

/* ───────────────────────────────────────────────────────────────────────
   ACT 3 · the shell (present from the start, revealed by the pull-back)
   ─────────────────────────────────────────────────────────────────────── */
.h2-demo-shell {
  opacity: 0;
  transform: scale(1.16);
  transform-origin: 38% 42%;
  transition: opacity .72s var(--d-zoom), transform .9s var(--d-zoom);
  border-radius: calc(20 * var(--u));
  background: var(--d-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 70px rgba(0,0,0,.10);
  overflow: hidden;
}
.h2-demo[data-act="3"] .h2-demo-shell { opacity: 1; transform: scale(1); }

.h2-demo-rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(56 * var(--u));
  background: var(--d-green);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(18 * var(--u));
  padding-top: calc(20 * var(--u));
}
.h2-demo-rail-mark {
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(255,255,255,.92);
}
.h2-demo-rail-dot {
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(255,255,255,.26);
}

.h2-demo-side {
  position: absolute; top: 0; bottom: 0;
  left: calc(56 * var(--u));
  width: calc(200 * var(--u));
  background: var(--off-white, #F5F5F7);
  border-right: 1px solid var(--d-line);
  display: flex; flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(28 * var(--u)) calc(20 * var(--u));
}
.h2-demo-side-bar {
  height: calc(9 * var(--u));
  width: 72%;
  border-radius: 999px;
  background: rgba(0,0,0,.09);
}
.h2-demo-side-bar.is-wide  { width: 88%; background: rgba(27,67,50,.22); }
.h2-demo-side-bar.is-short { width: 54%; }

.h2-demo-record { position: absolute; left: calc(256 * var(--u)); right: 0; top: 0; bottom: 0; }
.h2-demo-record-head {
  position: absolute;
  left: calc(36 * var(--u));
  top: calc(72 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
  transition: opacity .5s var(--d-enter) .25s, transform .5s var(--d-enter) .25s;
}
.h2-demo[data-act="3"] .h2-demo-record-head { opacity: 1; transform: none; }

/* ── the five modules ── */
.h2-demo-widget {
  position: absolute;
  left: calc(660 * var(--u));
  width: calc(380 * var(--u));
  height: calc(76 * var(--u));
  display: grid;
  grid-template-columns: calc(30 * var(--u)) 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  column-gap: calc(4 * var(--u));
  padding: 0 calc(18 * var(--u));
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: calc(14 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  opacity: 0;
  transform: translateY(calc(20 * var(--u)));
  transition: opacity .35s var(--d-enter), transform .35s var(--d-enter);
}
/* four modules, spread to balance the timeline column on the left */
.h2-demo-widget[data-w="1"] { top: calc(130 * var(--u)); }
.h2-demo-widget[data-w="2"] { top: calc(248 * var(--u)); }
.h2-demo-widget[data-w="3"] { top: calc(366 * var(--u)); }
.h2-demo-widget[data-w="4"] { top: calc(484 * var(--u)); }
.h2-demo-widget.is-on { opacity: 1; transform: none; }

.h2-demo-widget-dot {
  grid-row: 1 / 3; align-self: center;
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--d-green);
}
.h2-demo-widget-t { font-size: calc(14.5 * var(--u)); font-weight: 650; letter-spacing: -0.01em; }
.h2-demo-widget-s { font-size: calc(13 * var(--u)); color: var(--d-mute); }
.h2-demo-widget[data-slug="audit"] .h2-demo-widget-dot { background: var(--gray-400, #98989D); }

/* ───────────────────────────────────────────────────────────────────────
   the contact history — the left column under the approved offer
   ─────────────────────────────────────────────────────────────────────── */
.h2-demo-timeline {
  position: absolute;
  left: calc(292 * var(--u));
  top:  calc(300 * var(--u));
  width: calc(300 * var(--u));
}
.h2-demo-tl-head {
  font-size: calc(11.5 * var(--u));
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--d-mute);
  margin-bottom: calc(12 * var(--u));
  opacity: 0;
  transform: translateY(calc(8 * var(--u)));
  transition: opacity .35s var(--d-enter), transform .35s var(--d-enter);
}
.h2-demo-tl-head.is-on { opacity: 1; transform: none; }

.h2-demo-tl-list {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
/* the rail is drawn by the items' own ::before so it cannot outrun them */
.h2-demo-tl-item {
  position: relative;
  padding: 0 0 calc(16 * var(--u)) calc(22 * var(--u));
  display: flex; flex-direction: column; gap: calc(1 * var(--u));
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
  transition: opacity .32s var(--d-enter), transform .32s var(--d-enter);
}
.h2-demo-tl-item::before {
  content: "";
  position: absolute;
  left: calc(4.5 * var(--u)); top: calc(10 * var(--u)); bottom: 0;
  width: 1px;
  background: var(--d-line);
}
.h2-demo-tl-item:last-child { padding-bottom: calc(10 * var(--u)); }
.h2-demo-tl-item:last-child::before { display: none; }
.h2-demo-tl-item.is-on { opacity: 1; transform: none; }

.h2-demo-tl-dot {
  position: absolute;
  left: 0; top: calc(4 * var(--u));
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--d-card);
  border: calc(2 * var(--u)) solid var(--gray-200, #D2D2D7);
}
.h2-demo-tl-t { font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.h2-demo-tl-d { font-size: calc(12 * var(--u)); color: var(--d-mute); }

/* the entry the approval just produced */
.h2-demo-tl-item.is-new .h2-demo-tl-dot { background: var(--d-green); border-color: var(--d-green); }
.h2-demo-tl-item.is-new .h2-demo-tl-t   { color: var(--d-green); font-weight: 700; }

.h2-demo-tl-more {
  padding-left: calc(22 * var(--u));
  font-size: calc(12 * var(--u));
  color: var(--d-mute);
  opacity: 0;
  transition: opacity .3s var(--d-enter);
}
.h2-demo-tl-more.is-on { opacity: 1; }

/* ── one record, not four tools ── */
.h2-demo-threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h2-demo-thread {
  stroke: var(--d-green);
  stroke-width: 1.5;
  opacity: .28;
  /* must exceed the longest path (the fan to widget 5 runs ~360) or the
     thread draws in truncated and never reaches the module */
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.2s var(--d-travel);
}
.h2-demo[data-act="3"] .h2-demo-threads.is-on .h2-demo-thread { stroke-dashoffset: 0; }

/* ───────────────────────────────────────────────────────────────────────
   ACTS 1 + 2 · the foreground
   ─────────────────────────────────────────────────────────────────────── */
.h2-demo-fore {
  transform-origin: 0 0;
  transition: transform .9s var(--d-zoom);
  z-index: 2;
}
/* the pull-back: the approved offer lands inside the record as one entry */
.h2-demo[data-act="3"] .h2-demo-fore {
  transform: translate(calc(167 * var(--u)), calc(100 * var(--u))) scale(.5);
}

.h2-demo-card,
.h2-demo-inbox,
.h2-demo-offer {
  position: absolute;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: calc(16 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 48px rgba(0,0,0,.10);
}

/* ── Act 1 · der Eingang ── */
.h2-demo-inbox {
  left: calc(220 * var(--u));
  top:  calc(55 * var(--u));
  width: calc(660 * var(--u));
  opacity: 0;
  transform: translateY(calc(24 * var(--u)));
  transition: opacity .6s var(--d-enter), transform .6s var(--d-enter);
}
.h2-demo-inbox.is-on { opacity: 1; transform: none; }
/* act 2: it becomes context, not subject */
.h2-demo[data-act="2"] .h2-demo-inbox {
  opacity: .40;
  transform: translateX(calc(-180 * var(--u))) scale(.90);
  transition: opacity .7s var(--d-exit), transform .7s var(--d-exit);
}
/* act 3: gone. The record is the subject now, and a ghost of the inbox
   sliding behind the sidebar reads as a glitch, not as context. */
.h2-demo[data-act="3"] .h2-demo-inbox {
  opacity: 0;
  transform: translateX(calc(-180 * var(--u))) scale(.90);
  transition: opacity .45s var(--d-exit), transform .7s var(--d-exit);
}

.h2-demo-bar {
  display: flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-bottom: 1px solid var(--d-line);
  background: var(--off-white, #F5F5F7);
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
}
.h2-demo-dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; }
.h2-demo-dot-r { background: #FF5F57; } .h2-demo-dot-y { background: #FEBC2E; } .h2-demo-dot-g { background: #28C840; }
.h2-demo-bar-title {
  margin-left: calc(8 * var(--u));
  font-size: calc(12.5 * var(--u)); color: var(--d-mute);
}

.h2-demo-inbox-body { padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); }

.h2-demo-mail {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  opacity: 0; transform: translateY(calc(-16 * var(--u)));
  transition: opacity .45s var(--d-enter), transform .45s var(--d-enter);
}
.h2-demo-mail.is-on { opacity: 1; transform: none; }
.h2-demo-ico {
  display: grid; place-items: center; flex: none;
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--accent-lighter, rgba(27,67,50,.05));
  color: var(--d-green);
}
.h2-demo-ico svg { width: 55%; height: 55%; }
.h2-demo-mail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.h2-demo-l1 { font-size: calc(14.5 * var(--u)); font-weight: 650; letter-spacing: -0.01em; }
.h2-demo-l2 { font-size: calc(13 * var(--u)); color: var(--d-mute); }

.h2-demo-pill {
  flex: none;
  font-size: calc(10.5 * var(--u));
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
}
.h2-demo-pill-in    { background: var(--guard-amber-bg, rgba(180,83,9,.08)); color: var(--guard-amber, #B45309); }
.h2-demo-pill-draft { background: rgba(0,0,0,.05); color: var(--d-mute); }
.h2-demo-pill-ok    { background: var(--accent-light, rgba(27,67,50,.10)); color: var(--d-green); }

.h2-demo-reading {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
  font-size: calc(13 * var(--u)); color: var(--d-mute);
  opacity: 0; transition: opacity .3s var(--d-enter);
}
.h2-demo-reading.is-on { opacity: 1; }
.h2-demo[data-act="2"] .h2-demo-reading,
.h2-demo[data-act="3"] .h2-demo-reading { opacity: 0; }
.h2-demo-dots { display: inline-flex; gap: calc(4 * var(--u)); }
.h2-demo-dots i {
  width: calc(5 * var(--u)); height: calc(5 * var(--u));
  border-radius: 50%; background: currentColor;
  animation: h2DemoDot 1.1s infinite var(--d-travel);
}
.h2-demo-dots i:nth-child(2) { animation-delay: .18s; }
.h2-demo-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes h2DemoDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.h2-demo-chips {
  display: flex; flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
}
.h2-demo-chip {
  font-size: calc(12.5 * var(--u)); font-weight: 600;
  padding: calc(6 * var(--u)) calc(11 * var(--u));
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background: var(--d-card);
  opacity: 0; transform: scale(.92);
  transition: opacity .3s var(--d-enter), transform .3s var(--d-enter);
}
.h2-demo-chip.is-on { opacity: 1; transform: none; }

/* ── Act 2 · der Entwurf ── */
.h2-demo-offer {
  left: calc(250 * var(--u));
  top:  calc(40 * var(--u));
  width: calc(600 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u));
  opacity: 0; transform: translateY(calc(18 * var(--u))) scale(.98);
  transition: opacity .42s var(--d-enter), transform .42s var(--d-enter);
}
.h2-demo-offer.is-on { opacity: 1; transform: none; }

.h2-demo-offer-head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.h2-demo-offer-kind {
  flex: 1;
  font-size: calc(12 * var(--u)); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--d-mute);
}
.h2-demo-pill-ok { opacity: 0; transition: opacity .25s var(--d-enter); position: absolute; right: calc(24 * var(--u)); }
.h2-demo-offer.is-approved .h2-demo-pill-draft { opacity: 0; transition: opacity .25s var(--d-exit); }
.h2-demo-offer.is-approved .h2-demo-pill-ok { opacity: 1; }

.h2-demo-offer-cust {
  margin-top: calc(6 * var(--u));
  font-size: calc(19 * var(--u)); font-weight: 700; letter-spacing: -0.02em;
}
.h2-demo-lines { margin-top: calc(14 * var(--u)); }
.h2-demo-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: calc(9 * var(--u)) 0;
  border-bottom: 1px solid var(--d-line);
  font-size: calc(13.5 * var(--u));
  opacity: 0; transform: translateY(calc(8 * var(--u)));
  transition: opacity .32s var(--d-enter), transform .32s var(--d-enter);
}
.h2-demo-line.is-on { opacity: 1; transform: none; }
.h2-demo-line span:last-child { font-variant-numeric: tabular-nums; color: var(--d-mute); }

.h2-demo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: calc(12 * var(--u)) 0 calc(14 * var(--u));
  opacity: 0; transition: opacity .32s var(--d-enter);
}
.h2-demo-total.is-on { opacity: 1; }
.h2-demo-total-l { font-size: calc(12.5 * var(--u)); color: var(--d-mute); }
.h2-demo-total-v { font-size: calc(19 * var(--u)); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.h2-demo-approve {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--d-line);
  opacity: 0; transform: translateY(calc(20 * var(--u)));
  transition: opacity .4s var(--d-enter), transform .4s var(--d-enter);
}
.h2-demo-approve.is-on { opacity: 1; transform: none; }
.h2-demo-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  font-size: calc(13.5 * var(--u)); font-weight: 650;
  color: #fff; background: var(--d-ink);
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  border-radius: 999px;
  transition: transform .18s var(--d-enter);
}
/* the fill sweeps left to right on the one click in the whole piece */
.h2-demo-btn::after {
  content: ""; position: absolute; inset: 0;
  background: var(--d-green);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--d-enter);
}
.h2-demo-btn > * { position: relative; z-index: 1; }
.h2-demo-btn svg { position: relative; z-index: 1; }
.h2-demo-approve.is-hover .h2-demo-btn { transform: translateY(calc(-1 * var(--u))); }
.h2-demo-approve.is-pressed .h2-demo-btn { transform: scale(.96); }
.h2-demo-approve.is-done .h2-demo-btn::after { transform: scaleX(1); }
.h2-demo-approve-meta { font-size: calc(12.5 * var(--u)); color: var(--d-mute); font-style: italic; }

/* ───────────────────────────────────────────────────────────────────────
   the cursor, and who is holding it
   ─────────────────────────────────────────────────────────────────────── */
.h2-demo-cursor {
  left: 0; top: 0; z-index: 5;
  display: flex; align-items: flex-start;
  color: var(--d-ink);
  opacity: 0;
  transform: translate(calc(820 * var(--u)), calc(520 * var(--u)));
  transition: transform .75s var(--d-travel), opacity .4s var(--d-enter);
  pointer-events: none;
}
.h2-demo-cursor svg { width: calc(20 * var(--u)); height: auto; flex: none; }
.h2-demo-persona {
  margin-left: calc(6 * var(--u));
  margin-top: calc(10 * var(--u));
  font-size: calc(13 * var(--u)); font-weight: 650;
  color: #fff; background: var(--d-ink);
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  white-space: nowrap;
}
.h2-demo-cursor.is-on { opacity: 1; }
/* The cursor approaches from below in both acts, so the persona chip hangs
   clear of the row it is pointing at. Pointing at something you have covered
   up is worse than not pointing at all. */
.h2-demo-cursor[data-at="chips"]   { transform: translate(calc(470 * var(--u)), calc(228 * var(--u))); }
.h2-demo-cursor[data-at="approve"] { transform: translate(calc(352 * var(--u)), calc(330 * var(--u))); }
.h2-demo-cursor[data-at="away"]    { transform: translate(calc(880 * var(--u)), calc(560 * var(--u))); opacity: 0; }

/* ───────────────────────────────────────────────────────────────────────
   COMPACT · a phone gets a different composition, not a smaller one
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .h2-demo-stage {
    aspect-ratio: auto;
    min-height: 420px;
    font-size: 16px;
    display: flex; flex-direction: column; gap: 12px;
    container-type: normal;
    /* the unit stops scaling and becomes a real pixel: every size written as
       calc(N * var(--u)) is now simply N px, so nothing collapses when the
       container query goes away */
    --u: 1px;
  }
  .h2-demo-stage > *,
  .h2-demo-card, .h2-demo-inbox, .h2-demo-offer, .h2-demo-widget { position: static; }

  /* no rail, no sidebar: the real app has none on a phone either */
  .h2-demo-rail, .h2-demo-side, .h2-demo-threads { display: none; }

  .h2-demo-shell {
    order: 2; transform: none; box-shadow: none; background: none;
    display: flex; flex-direction: column; gap: 10px;
    /* the desktop shell clips to its rounded corners; here it has neither
       background nor radius, and the clip was shaving the first glyph of the
       record head, which sits exactly on its left edge */
    overflow: visible;
  }
  .h2-demo[data-act="3"] .h2-demo-shell { transform: none; }
  .h2-demo-record { position: static; }
  .h2-demo-record-head { position: static; font-size: 13px; margin-bottom: 2px; }
  /* what was created first, then the history behind it */
  .h2-demo-widgets { display: flex; flex-direction: column; gap: 10px; order: 1; }
  .h2-demo-timeline { position: static; width: 100%; order: 2; margin-top: 4px; }
  .h2-demo-tl-head { font-size: 11.5px; margin-bottom: 10px; }
  .h2-demo-tl-item { padding-bottom: 14px; }
  .h2-demo-tl-t { font-size: 13.5px; }
  .h2-demo-tl-d { font-size: 12.5px; }
  /* three entries, and then no count is claimed at all — showing "2 weitere"
     next to three of seven would simply be wrong */
  .h2-demo-tl-item[data-tl="4"],
  .h2-demo-tl-item[data-tl="5"],
  .h2-demo-tl-more { display: none; }
  .h2-demo-tl-item[data-tl="3"] { padding-bottom: 10px; }
  .h2-demo-tl-item[data-tl="3"]::before { display: none; }
  .h2-demo-widget {
    width: 100%; height: auto;
    padding: 12px 14px;
    column-gap: 2px;
    border-radius: 14px;
  }
  /* all four modules survive on a phone. The timeline absorbed what used to be
     the fifth, and dropping the audit entry here would throw away the one
     credibility point a Swiss buyer actually checks. */
  .h2-demo-widget-dot { width: 9px; height: 9px; }
  .h2-demo-widget-t { font-size: 14px; }
  .h2-demo-widget-s { font-size: 13px; }

  .h2-demo-fore { order: 1; display: flex; flex-direction: column; gap: 12px; }
  .h2-demo[data-act="3"] .h2-demo-fore { transform: none; }
  .h2-demo-inbox, .h2-demo-offer { width: 100%; }
  .h2-demo[data-act="2"] .h2-demo-inbox,
  .h2-demo[data-act="3"] .h2-demo-inbox { transform: none; opacity: .4; }
  .h2-demo-offer { padding: 16px 16px 14px; }

  /* the line-item table goes; header, total and the approval survive */
  .h2-demo-lines { display: none; }

  .h2-demo-bar-title { font-size: 12px; }
  .h2-demo-l1, .h2-demo-widget-t { font-size: 14px; }
  .h2-demo-l2 { font-size: 13px; }
  .h2-demo-chip { font-size: 12.5px; padding: 5px 10px; }
  .h2-demo-offer-cust { font-size: 17px; }
  .h2-demo-total-v { font-size: 17px; }
  .h2-demo-btn { font-size: 13.5px; padding: 10px 16px; }
  .h2-demo-approve-meta { font-size: 12px; }

  /* no cursor on a touch device — there is no pointer to show */
  .h2-demo-cursor { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   REDUCED MOTION · show the closing frame, never the journey
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .h2-demo *,
  .h2-demo *::after { transition: none !important; animation: none !important; }
}