/* ============================================================================
   HOME — the software page (index.php only). Prefix: .hm-*
   Kept out of brand.css on purpose: brand.css is one flat file and a class
   shared by two components silently overrides one of them.
   Screens in images/home/ are real screenshots of the demo organisation
   (database/seed-demo-org.php), taken by qa-harnesses/demo-shots-hq.mjs:
   desktop at 2x, phones at 3x on a 393x798 viewport (an iPhone screen minus
   its status bar, which .hm-iphone draws).
   ========================================================================== */

/* ── iPhone ─────────────────────────────────────────────────────────────────
   Everything is sized in cqw of .hm-iphone, so one component is right at any
   width: 393x852 screen, bezel, Dynamic Island, status bar, side buttons. */
.hm-iphone {
  container-type: inline-size;
  width: 100%;
  flex: none;
}
.hm-ip-body {
  position: relative;
  padding: 3.6cqw;
  border-radius: 16cqw;
  background: linear-gradient(150deg, #5d5b66 0%, #26252b 22%, #3c3b43 50%, #1c1b20 78%, #4d4c55 100%);
  box-shadow:
    inset 0 0 0 0.5cqw #0b0b0d,
    inset 0 0 0 1.1cqw #2c2b31,
    0 4cqw 10cqw rgba(12, 6, 30, 0.35),
    0 1.2cqw 2.4cqw rgba(12, 6, 30, 0.25);
}
.hm-ip-btn {
  position: absolute;
  width: 1cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, #1f1e23, #4a4952);
}
.hm-ip-btn.is-action { left: -0.8cqw; top: 18%; height: 7%; }
.hm-ip-btn.is-up { left: -0.8cqw; top: 28%; height: 11%; }
.hm-ip-btn.is-down { left: -0.8cqw; top: 41%; height: 11%; }
.hm-ip-btn.is-power { right: -0.8cqw; top: 31%; height: 16%; }
.hm-ip-screen {
  position: relative;
  aspect-ratio: 393 / 852;
  border-radius: 12.6cqw;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.hm-ip-status {
  flex: 0 0 auto;
  height: 12.6cqw; /* 54pt of a 393pt-wide screen */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8cqw 7.5cqw 0 9.5cqw;
  color: #111;
  background: #fff;
}
.hm-ip-status b {
  font: 600 4.1cqw/1 -apple-system, "SF Pro Text", "Familjen Grotesk", sans-serif;
  letter-spacing: -0.01em;
}
.hm-ip-status span { display: flex; align-items: center; gap: 1.4cqw; }
.hm-ip-status svg { height: 3cqw; width: auto; fill: currentColor; }
.hm-ip-status svg:last-child { height: 3.2cqw; }
.hm-ip-island {
  position: absolute;
  top: 2.6cqw;
  left: 50%;
  width: 30cqw;
  height: 8.6cqw;
  margin-left: -15cqw;
  border-radius: 6cqw;
  background: #000;
  z-index: 2;
}
.hm-ip-screen img {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: top;
}
.hm-ip-home {
  position: absolute;
  bottom: 2cqw;
  left: 50%;
  width: 34cqw;
  height: 1.3cqw;
  margin-left: -17cqw;
  border-radius: 1cqw;
  background: rgba(0, 0, 0, 0.82);
  z-index: 2;
}

/* ── Browser window ─────────────────────────────────────────────────────── */
.hm-browser {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(20, 8, 50, 0.22), 0 0 0 1px rgba(22, 24, 29, 0.07);
}
.hm-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: linear-gradient(#f7f5fb, #efecf6);
  border-bottom: 1px solid #e6e2f0;
}
.hm-browser-bar i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hm-browser-bar i:nth-child(1) { background: #ff5f57; }
.hm-browser-bar i:nth-child(2) { background: #febc2e; }
.hm-browser-bar i:nth-child(3) { background: #28c840; }
.hm-browser-bar span {
  margin: 0 auto;
  width: min(62%, 340px);
  height: 20px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e6e2f0;
  font-size: 11px;
  line-height: 18px;
  color: #7c798d;
  text-align: center;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-browser img { display: block; width: 100%; height: auto; }

/* ── Panels: one desktop component at (up to) its real size ────────────── */
.hm-panel {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(60, 20, 140, 0.16), 0 0 0 1px rgba(22, 24, 29, 0.05);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hm-float-r { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hm-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Hidden only once JS has marked the page (.hm-js), so no script = no hidden content. */
.hm-js .hm-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.hm-js .hm-reveal.is-in { opacity: 1; transform: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hm-hero .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-block: clamp(36px, 6vw, 76px) clamp(48px, 6vw, 92px);
}
.hm-hero-copy > * { animation: hm-in 0.8s ease both; }
.hm-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hm-hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hm-hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hm-hero-copy > :nth-child(5) { animation-delay: 0.32s; }
.hm-hero h1 { max-width: 15ch; }
.hm-h1 .pill {
  display: flex;
  width: max-content;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.hm-h1-main { display: block; }
.hm-hero-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }
.hm-hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hm-hero-note svg { width: 15px; height: 15px; color: #c4f18a; }
.hm-stage-art { position: relative; padding: 0 9% 13% 0; animation: hm-in 1s 0.2s ease both; }
.hm-hero-browser { transform: perspective(1800px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
.hm-hero-phone { position: absolute; right: 0; bottom: 0; width: 27%; max-width: 200px; z-index: 2; animation: hm-float 6s ease-in-out infinite; }
.hm-badge-float {
  position: absolute;
  top: 6%;
  right: 2%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(12, 6, 30, 0.35);
  animation: hm-float 5s 1s ease-in-out infinite;
}
.hm-badge-float img { width: 36px; height: 36px; border-radius: 50%; }
.hm-badge-float small { display: block; color: #65a30d; font-weight: 700; font-size: 11.5px; }

/* ── Use-case marquee ───────────────────────────────────────────────────── */
.hm-marquee {
  overflow: hidden;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hm-marquee-track { display: flex; gap: 12px; width: max-content; animation: hm-marquee 40s linear infinite; }
.hm-marquee-lower { border-top: 1px solid var(--border); background: #fff; }
.hm-marquee:hover .hm-marquee-track { animation-play-state: paused; }
.hm-marquee span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 100px; background: var(--tint); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.hm-marquee span svg { width: 17px; height: 17px; color: var(--violet); }

/* ── Section heads ──────────────────────────────────────────────────────── */
.hm-head { text-align: center; max-width: 760px; margin: 0 auto clamp(24px, 3.4vw, 40px); }
.hm-head .h2 { margin-bottom: 12px; }
.hm-head p { margin: 0; color: var(--gray); font-size: 16.5px; line-height: 1.6; }

/* ── Steps with screenshots ─────────────────────────────────────────────── */
.hm-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hm-step { border-radius: 20px; background: #fff; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.hm-step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(60, 20, 140, 0.12); }
.hm-step-shot { background: linear-gradient(160deg, #f5f1fe, #e9dfff); padding: 16px 16px 0; height: 210px; overflow: hidden; }
.hm-step-shot { display: flex; justify-content: center; align-items: flex-start; }
.hm-step-shot .hm-panel { border-radius: 12px 12px 0 0; }
.hm-step-body { padding: 18px 20px 22px; }
.hm-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--violet); color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.hm-step h3 { font-size: 17px; margin: 0 0 6px; }
.hm-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray); }

/* ── Feature tabs with big screenshot cards ─────────────────────────────── */
.hm-tabs { display: flex; justify-content: center; gap: 6px; padding: 6px; margin: 0 auto 28px; width: max-content; max-width: 100%; border-radius: 100px; background: var(--tint); border: 1px solid var(--border); }
.hm-tab { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--gray); padding: 11px 22px; border-radius: 100px; cursor: pointer; white-space: nowrap; }
.hm-tab[aria-selected="true"] { background: var(--violet); color: #fff; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3); }
.hm-stage + .hm-stage { margin-top: 36px; }
.js-tabs .hm-stage { display: none; margin-top: 0; }
.js-tabs .hm-stage.is-on { display: block; animation: hm-in 0.45s ease both; }
.hm-stage-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 800; margin: 0 0 16px; }
.js-tabs .hm-stage-title { display: none; }
.hm-fgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.hm-fcard { grid-column: span 2; border-radius: 22px; border: 1px solid var(--border); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.hm-fcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(60, 20, 140, 0.12); }
.hm-fcard.is-wide { grid-column: span 3; }
.hm-fcard-shot { position: relative; height: 250px; overflow: hidden; background: linear-gradient(160deg, #f5f1fe 0%, #e6dbff 100%); padding: 22px 22px 0; }
.hm-fcard.is-wide .hm-fcard-shot { height: 300px; }
.hm-fcard-shot > img { display: block; width: 100%; border-radius: 10px 10px 0 0; box-shadow: 0 12px 30px rgba(60, 20, 140, 0.18); transition: transform 0.5s ease; }
.hm-fcard:hover .hm-fcard-shot > img { transform: translateY(-8px); }
/* A phone peeks up from the bottom of its card. */
.hm-fcard-shot.is-phone { display: flex; justify-content: center; padding-top: 26px; }
.hm-fcard-shot.is-phone .hm-iphone { width: 62%; max-width: 230px; transition: transform 0.5s ease; }
.hm-fcard.is-wide .hm-fcard-shot.is-phone .hm-iphone { width: 44%; max-width: 250px; }
.hm-fcard:hover .hm-fcard-shot.is-phone .hm-iphone { transform: translateY(-10px); }
.hm-fcard-shot.is-browser .hm-browser { border-radius: 12px 12px 0 0; transition: transform 0.5s ease; }
.hm-fcard:hover .hm-fcard-shot.is-browser .hm-browser { transform: translateY(-8px); }
.hm-fcard-shot.is-panel { display: flex; justify-content: center; align-items: flex-start; }
.hm-fcard-shot.is-panel .hm-panel { border-radius: 14px 14px 0 0; transition: transform 0.5s ease; }
.hm-fcard:hover .hm-fcard-shot.is-panel .hm-panel { transform: translateY(-8px); }
.hm-fcard-body { padding: 18px 22px 22px; }
.hm-fcard h3 { font-size: 18px; margin: 0 0 6px; line-height: 1.3; }
.hm-fcard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray); }

.hm-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 28px 0 0; }
.hm-more a { font-weight: 700; font-size: 15px; }

/* ── Scroll story (sticky stage) ────────────────────────────────────────── */
.hm-story { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); }
.hm-sstep { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.3; transition: opacity 0.45s ease; }
.hm-sstep:first-child { min-height: 60vh; }
.hm-sstep.is-active { opacity: 1; }
.hm-sstep .h2 { margin-bottom: 14px; }
.hm-sstep-n { display: inline-block; margin-right: 10px; padding: 3px 8px; border-radius: 8px; background: var(--violet); color: #fff; letter-spacing: 0.04em; }
.hm-spot-lede { margin: 0 0 20px; font-size: 16.5px; line-height: 1.65; color: var(--gray); }
.hm-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.hm-ticks li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.5; }
.hm-ticks li svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #65a30d; }
.hm-sstep-art { display: none; }
.hm-story-stage { position: relative; }
.hm-story-panel {
  position: sticky;
  top: 96px;
  height: min(620px, calc(100vh - 130px));
  border-radius: 28px;
  background: linear-gradient(160deg, #f5f1fe 0%, #e3d6ff 100%);
  overflow: hidden;
}
.hm-story-panel::after { content: ""; position: absolute; right: -110px; bottom: -110px; width: 320px; height: 320px; border-radius: 50%; border: 46px solid rgba(124, 58, 237, 0.08); }
.hm-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7%;
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.hm-scene.is-active { opacity: 1; transform: none; }
.hm-story-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 2; }
.hm-story-dots i { width: 8px; height: 8px; border-radius: 8px; background: rgba(124, 58, 237, 0.25); transition: width 0.3s, background 0.3s; }
.hm-story-dots i.is-active { width: 24px; background: var(--violet); }
/* The scenes (shared by the sticky stage and the phone layout). */
.hm-sc { position: relative; width: 100%; }
.hm-sc-ask .hm-browser { width: 86%; }
.hm-sc-ask .hm-sc-chat { position: absolute; right: 0; bottom: -10%; width: 42%; border-radius: 18px; }
.hm-sc-analytics .hm-browser { width: 100%; }
.hm-sc-attendees { display: flex; justify-content: center; align-items: flex-end; gap: 6%; }
.hm-sc-attendees .hm-iphone { width: 36%; max-width: 230px; }
.hm-sc-attendees .hm-sc-front { margin-bottom: 8%; }
.hm-sc-door .hm-browser { width: 86%; }
.hm-sc-door .hm-sc-front { position: absolute; right: 0; bottom: -16%; width: 30%; transform: rotate(4deg); }

/* ── Mobile app ─────────────────────────────────────────────────────────── */
.hm-app { position: relative; overflow: hidden; background: linear-gradient(160deg, #16181d 0%, #2a1650 55%, #5b21b6 100%); color: #fff; }
.hm-app-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hm-app .h2 { color: #fff; }
.hm-app .hm-spot-lede { color: rgba(255, 255, 255, 0.7); }
.hm-app .hm-ticks li { color: rgba(255, 255, 255, 0.9); }
.hm-app .hm-ticks li svg { color: #c4f18a; }
.hm-stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hm-store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 14px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; line-height: 1.1; transition: transform 0.15s, border-color 0.15s; }
.hm-store:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.hm-store svg { width: 24px; height: 24px; flex: none; }
.hm-store small { display: block; font-size: 10.5px; opacity: 0.8; }
.hm-store b { font-size: 17px; font-weight: 700; }
.hm-phones { display: flex; justify-content: center; align-items: center; gap: 4%; }
.hm-phones .hm-iphone { width: 29%; }
.hm-phones .hm-iphone:nth-child(2) { width: 34%; animation: hm-float 6s ease-in-out infinite; }

/* ── Payments / value tiles ─────────────────────────────────────────────── */
.hm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-tile { border-radius: 20px; padding: 24px; background: #fff; border: 1px solid var(--border); }
.hm-tile-big { font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--violet); line-height: 1.05; margin-bottom: 10px; }
.hm-tile h3 { font-size: 16.5px; margin: 0 0 6px; }
.hm-tile p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray); }

/* ── Why switch ─────────────────────────────────────────────────────────── */
.hm-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-why-card { border-radius: 20px; padding: 26px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.hm-why-big { font-family: "Bricolage Grotesque", sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #c4f18a; margin-bottom: 10px; line-height: 1.1; }
.hm-why-card h3 { color: #fff; font-size: 16.5px; margin: 0 0 6px; }
.hm-why-card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }

/* ── Works with ─────────────────────────────────────────────────────────── */
.hm-works { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hm-work { border-radius: 18px; border: 1px solid var(--border); background: #fff; padding: 20px 16px; text-align: center; }
.hm-work .hm-work-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; background: var(--tint); color: var(--violet); display: flex; align-items: center; justify-content: center; }
.hm-work .hm-work-ico svg { width: 24px; height: 24px; }
.hm-work b { display: block; font-size: 14.5px; }
.hm-work span { display: block; font-size: 12.5px; color: var(--gray); margin-top: 3px; line-height: 1.45; }

/* ── Blog ───────────────────────────────────────────────────────────────── */
.hm-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-post { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.hm-post:hover { border-color: var(--violet-pale); transform: translateY(-3px); }
.hm-post-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #ede4ff, #f8f6fd); overflow: hidden; }
.hm-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-post-body { padding: 16px 18px 18px; }
.hm-post-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.hm-post h3 { font-size: 16px; line-height: 1.35; margin: 6px 0 0; }
.hm-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hm-row-head .h2 { margin: 0; }
.hm-row-head a { font-weight: 700; }

/* ── Final CTA with devices ─────────────────────────────────────────────── */
.hm-final { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); color: #fff; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; align-items: center; padding: clamp(28px, 5vw, 56px); }
.hm-final h2 { font-size: clamp(26px, 3.6vw, 40px); margin: 0 0 10px; color: #fff; }
.hm-final p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.6; }
.hm-final .btn { background: #fff; color: var(--violet); }
.hm-final-art { position: relative; padding: 0 10% 0 0; margin-bottom: calc(-1 * clamp(28px, 5vw, 56px) - 30px); }
.hm-final-art .hm-iphone { position: absolute; right: 0; bottom: 30px; width: 26%; max-width: 190px; animation: hm-float 6s ease-in-out infinite; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* ── Features: horizontal track driven by vertical scroll (.hm-hx) ─────────
   Pinned (JS adds .is-pinned on wide screens with motion allowed): the
   section is made as tall as the track's extra width, .hm-hx-sticky sticks
   under the 56px header, and the track is translated by scroll progress.
   Unpinned: a normal section whose row swipes sideways with scroll-snap. */
.hm-hx { padding-block: 0; position: relative; }
.hm-hx-sticky { padding-block: clamp(40px, 6vw, 76px); }
.hm-hx.is-pinned .hm-hx-sticky {
  position: sticky; top: 56px; height: calc(100vh - 56px); box-sizing: border-box;
  padding-block: 26px 18px; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.hm-hx-sticky > .container { width: 100%; box-sizing: border-box; }   /* auto margins in a flex column would shrink it */
.hm-hx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.hm-hx-head .h2 { margin: 0; max-width: 22ch; }
.hm-hx-count { flex: none; font-weight: 700; font-size: 15px; color: var(--gray); font-variant-numeric: tabular-nums; }
.hm-hx-count b { color: var(--violet); font-size: 30px; font-weight: 800; }
.hm-hx-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 20px; scroll-padding-inline: var(--gutter); }
.hm-hx-viewport::-webkit-scrollbar { display: none; }
.hm-hx.is-pinned .hm-hx-viewport { overflow: visible; scroll-snap-type: none; }
.hm-hx-track {
  display: flex; gap: 24px; width: max-content; will-change: transform;
  padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
}
.hm-hx-card {
  flex: 0 0 min(1080px, 84vw); height: clamp(420px, calc(100vh - 290px), 580px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(22px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(60, 20, 140, 0.1); scroll-snap-align: center; overflow: hidden; box-sizing: border-box;
}
.hm-hx-copy h3 { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin: 8px 0 12px; }
.hm-hx-text { margin: 0 0 18px; color: var(--gray); font-size: 16px; line-height: 1.6; }
.hm-hx-link { display: inline-block; margin-top: 20px; font-weight: 700; color: var(--violet); }
.hm-hx-art {
  position: relative; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 20px; background: linear-gradient(160deg, #f5f1fe 0%, #e3d6ff 100%); padding: 22px;
  box-sizing: border-box; overflow: hidden;
}
.hm-hx-art .hm-browser { width: 100%; }
.hm-hx-art.is-browser-phone .hm-browser, .hm-hx-art.is-browser-panel .hm-browser { width: 90%; margin-right: auto; }
.hm-hx-art.is-browser-phone .hm-iphone { position: absolute; right: 16px; bottom: -34px; width: 25%; max-width: 170px; }
.hm-hx-art.is-browser-panel .hm-panel { position: absolute; right: 16px; bottom: 16px; width: 27% !important; max-width: 190px !important; box-shadow: 0 20px 40px rgba(40, 20, 100, 0.28); }
.hm-hx-art.is-phones { gap: 6%; align-items: flex-start; padding-top: 30px; }
.hm-hx-art.is-phones .hm-iphone { width: 34%; max-width: 220px; }
.hm-hx-art.is-phones .hm-iphone:nth-child(2) { margin-top: 44px; }
.hm-hx-foot { display: flex; align-items: center; gap: 24px; }
.hm-hx-foot .hm-more { margin: 0; flex: none; }
.hm-hx-bar { flex: 1; height: 4px; border-radius: 4px; background: #e2dbf5; overflow: hidden; visibility: hidden; }
.hm-hx.is-pinned .hm-hx-bar { visibility: visible; }
.hm-hx-bar i { display: block; height: 100%; background: var(--violet); transform-origin: left center; transform: scaleX(0.06); }
@media (max-width: 900px) {
  .hm-hx-head { align-items: flex-start; }
  .hm-hx-count { display: none; }
  .hm-hx-card { flex-basis: 86vw; height: auto; grid-template-columns: 1fr; gap: 18px; padding: 22px; border-radius: 22px; }
  .hm-hx-copy .hm-ticks { display: none; }
  .hm-hx-link { margin-top: 4px; }
  .hm-hx-art { height: 250px; order: -1; padding: 16px; }
  .hm-hx-art.is-phones { padding-top: 18px; }
  .hm-hx-foot { flex-direction: column; align-items: flex-start; }
  .hm-hx-foot .hm-more { flex: initial; }
}

/* ── Integrations (.ig-*): homepage logo rows + /integrations page ──────── */
.ig-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ig-mark svg { display: block; }
.ig-ini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.02em; }
.ig-ed { display: inline-flex; }
.ig-rows { display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 6px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ig-row-track { display: flex; gap: 14px; width: max-content; animation: ig-drift 46s linear infinite; }
.ig-row.is-rev .ig-row-track { animation-direction: reverse; animation-duration: 52s; }
.ig-rows:hover .ig-row-track { animation-play-state: paused; }
@keyframes ig-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ig-tile {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--border); color: var(--ink); font-weight: 700; font-size: 15px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(60, 20, 140, 0.06); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ig-tile:hover { transform: translateY(-2px); border-color: #d9ccfb; box-shadow: 0 12px 26px rgba(60, 20, 140, 0.12); }
.ig-home .hm-more { margin-top: 26px; }
/* The page */
.ig-cloud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 460px; margin-left: auto; }
.ig-cloud-tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 20px;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); animation: hm-float 6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.ig-group { padding-block: clamp(18px, 2.6vw, 30px); }
.ig-group + .ig-group { border-top: 1px solid var(--border); }
.ig-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.ig-group-head .h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.ig-group-head p { margin: 0; color: var(--gray); }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ig-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); scroll-margin-top: 90px; }
.ig-card:target { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.ig-card-top { display: flex; align-items: center; gap: 12px; }
.ig-card-top .ig-mark { width: 46px; height: 46px; border-radius: 12px; background: #f6f4fb; }
.ig-card h3 { margin: 0; font-size: 17px; }
.ig-card p { margin: 0; color: var(--gray); font-size: 14.5px; line-height: 1.55; flex: 1; }
.ig-card-link { font-weight: 700; font-size: 14px; color: var(--violet); }

/* ── Built for conferences (.cf-*) ─────────────────────────────────────── */
.cf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cf-card {
  display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--border); overflow: hidden;
  color: inherit; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
}
.cf-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(60, 20, 140, 0.12); }
.cf-card.is-big { grid-column: span 2; }
.cf-copy { padding: 22px 24px 16px; }
.cf-copy h3 { margin: 0 0 6px; font-size: 19px; }
.cf-copy p { margin: 0; color: var(--gray); font-size: 14.5px; line-height: 1.55; }
.cf-shot { flex: 1; min-height: 210px; max-height: 300px; overflow: hidden; padding: 0 22px; background: linear-gradient(160deg, #f5f1fe 0%, #e6dbff 100%); padding-top: 20px; }
.cf-card.is-big .cf-shot { max-height: 340px; }
.cf-shot .hm-browser { border-radius: 12px 12px 0 0; transition: transform 0.5s ease; }
.cf-card:hover .cf-shot .hm-browser { transform: translateY(-8px); }
@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-cloud { max-width: 420px; margin: 8px auto 0; }
  .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ig-grid, .cf-grid { grid-template-columns: 1fr; }
  .cf-card.is-big { grid-column: auto; }
  /* Five tall cards stacked was a long scroll on a phone: swipe them instead. */
  .cf-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .cf-grid::-webkit-scrollbar { display: none; }
  .cf-grid > .cf-card { flex: 0 0 84%; scroll-snap-align: start; }
  .cf-card:hover { transform: none; }
  .ig-cloud { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 300px; }
  .ig-cloud-tile:nth-child(n+9) { display: none; }
  .ig-cloud-tile { border-radius: 14px; }
  .ig-tile { padding: 11px 16px 11px 12px; font-size: 14px; }
  .cf-shot { min-height: 0; max-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-row-track { animation: none; }
  .ig-rows { -webkit-mask-image: none; mask-image: none; }
  .ig-row { overflow-x: auto; scrollbar-width: none; }
  .ig-cloud-tile { animation: none; }
}

/* ── /features pages (features.php) — .fp-* ─────────────────────────────── */
.fp-hero h1 { max-width: 22ch; }
.fp-h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; }
.fp-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.62); margin-bottom: 16px; }
.fp-crumb a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.fp-crumb a:hover { color: #fff; }
.fp-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(28px, 4vw, 52px);
}
.fp-row + .fp-row { border-top: 1px solid var(--border); }
.fp-row.is-flip .fp-row-copy { order: 2; }
/* A whole screen needs the width; a phone does not. */
.fp-row:has(.fp-art-browser) { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.fp-row.is-flip:has(.fp-art-browser) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.fp-row .h2 { margin: 6px 0 14px; }
.fp-row-art {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 3vw, 34px); border-radius: 24px;
  background: linear-gradient(160deg, #f5f1fe 0%, #e7dcff 100%); min-height: 280px;
}
.fp-row-art .hm-panel { margin: 0 auto; }
.fp-row-art .hm-browser { width: 100%; }
.fp-art-phone .hm-iphone { width: min(260px, 64%); }
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-card, .fp-hub-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px;
  background: #fff; border: 1px solid var(--border); color: inherit; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fp-card:hover, .fp-hub-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(60, 20, 140, 0.12); border-color: #d9ccfb; }
.fp-card strong, .fp-hub-card strong { font-size: 17px; color: var(--ink); line-height: 1.3; }
.fp-card > span:last-child, .fp-hub-body > span:not(.fp-card-ico) { color: var(--gray); font-size: 14.5px; line-height: 1.55; }
.fp-card-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--tint, #f3eefe); color: var(--violet);
}
.fp-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.fp-hub-card { padding: 0; overflow: hidden; gap: 0; }
.fp-hub-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(160deg, #f5f1fe 0%, #e7dcff 100%); padding: 18px 18px 0; }
.fp-hub-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 12px 12px 0 0; box-shadow: 0 10px 30px rgba(60, 20, 140, 0.16); }
.fp-hub-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.fp-hub-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fp-hub-card:last-child:nth-child(odd) .fp-hub-shot { aspect-ratio: 21 / 8; }
.fp-hub-body em { font-style: normal; font-weight: 700; color: var(--violet); font-size: 14.5px; margin-top: 4px; }
@media (max-width: 900px) {
  .fp-row, .fp-row:has(.fp-art-browser), .fp-row.is-flip:has(.fp-art-browser) { grid-template-columns: 1fr; }
  .fp-row.is-flip .fp-row-copy { order: 0; }
  .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-hub { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fp-grid { grid-template-columns: 1fr; }
  .fp-row-art { min-height: 0; padding: 16px; border-radius: 18px; }
  .fp-art-phone .hm-iphone { width: 62%; }
}

@media (max-width: 1100px) {
  .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-tiles, .hm-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hm-hero .hero-inner, .hm-app-inner, .hm-final { grid-template-columns: 1fr; }
  .hm-stage-art { max-width: 620px; margin: 8px auto 0; width: 100%; }
  .hm-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-fcard, .hm-fcard.is-wide { grid-column: span 1; }
  .hm-fcard.is-wide .hm-fcard-shot.is-phone .hm-iphone { width: 62%; }
  .hm-posts { grid-template-columns: 1fr; }
  .hm-final-art { margin-bottom: -30px; }
  /* The scroll story becomes a plain sequence: each step with its own picture. */
  .hm-story { grid-template-columns: 1fr; }
  .hm-story-stage { display: none; }
  .hm-sstep, .hm-sstep:first-child { min-height: 0; opacity: 1; margin-bottom: 56px; }
  .hm-sstep:last-child { margin-bottom: 0; }
  .hm-sstep-art {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 26px 20px 34px;
    border-radius: 24px;
    background: linear-gradient(160deg, #f5f1fe 0%, #e3d6ff 100%);
    overflow: hidden;
  }
  .hm-phones { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hm-tiles, .hm-why { grid-template-columns: 1fr; }
  .hm-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-fcard-shot, .hm-fcard.is-wide .hm-fcard-shot { height: 240px; }
  .hm-tab { padding: 10px 14px; font-size: 13.5px; }
  .hm-stage-art { padding: 0 6% 16% 0; }
  .hm-hero-phone { width: 32%; }
  .hm-sc-ask .hm-sc-chat { width: 48%; }
  .hm-sc-door .hm-sc-front { width: 34%; }
  .hm-badge-float { right: 0; top: 0; font-size: 12px; padding: 8px 12px 8px 8px; }
  .hm-badge-float img { width: 30px; height: 30px; }
  .hm-sc-attendees .hm-iphone { width: 44%; }

  /* Steps and feature cards swipe instead of stacking. */
  .hm-steps, .hm-fgrid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    scrollbar-width: none;
  }
  .hm-steps::-webkit-scrollbar, .hm-fgrid::-webkit-scrollbar { display: none; }
  /* The blog cards too: three full-width posts stacked was a long scroll. */
  .hm-posts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .hm-posts::-webkit-scrollbar { display: none; }
  .hm-posts > * { flex: 0 0 84%; scroll-snap-align: start; }
  /* Snap aligns to the scroller edge, not its padding: without scroll-padding
     the first card was pulled flush against the screen edge. */
  .hm-steps, .hm-fgrid, .cf-grid, .hm-posts { scroll-padding-inline: var(--gutter); }
  .hm-steps > *, .hm-fgrid > * { flex: 0 0 84%; scroll-snap-align: start; }
  .hm-fcard:hover, .hm-step:hover { transform: none; }
  .hm-phones .hm-iphone { width: 30%; }
  .hm-phones .hm-iphone:nth-child(2) { width: 36%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-js .hm-reveal { opacity: 1; transform: none; transition: none; }
  .hm-marquee-track, .hm-hero-phone, .hm-stage-art .hm-poster-float, .hm-badge-float,
  .hm-phones .hm-iphone, .hm-final-art .hm-iphone, .hm-hero-copy > *, .hm-stage-art { animation: none !important; }
  .hm-scene { transition: none; }
}

/* ══ Hero: centred showcase with a LIVE dashboard (owner 2026-10-05) ═════════
   includes/home-live-dashboard.php. The copy is centred; the dashboard sits
   full width under it and runs out of the bottom of the hero. */
.hm-hero.is-centred .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; padding-bottom: 0; gap: 0; }
.hm-hero.is-centred h1 { max-width: none; }
.hm-hero.is-centred .hm-h1 .pill { margin-inline: auto; }
.hm-hero.is-centred .hm-hero-copy p { margin-inline: auto; max-width: 60ch; }
.hm-hero.is-centred .hero-ctas, .hm-hero.is-centred .hm-hero-note { justify-content: center; }
.hm-stage-live { position: relative; width: 100%; max-width: 1080px; margin: clamp(30px, 4vw, 48px) auto 0; padding: 0 5%; animation: hm-in 1s 0.25s ease both; }
.hm-stage-live .ld { border-radius: 14px 14px 0 0; box-shadow: 0 -12px 70px -12px rgba(159, 103, 255, 0.5); }
.hm-stage-live .hm-hero-phone { position: absolute; right: 0; bottom: -2px; width: 18%; max-width: 190px; z-index: 3; }
.hm-stage-live .hm-badge-float { left: 0; right: auto; top: 26%; text-align: left; }
.hm-badge-float.is-pop { animation: ld-badge 0.6s ease; }
@keyframes ld-badge { 0% { transform: scale(0.94); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ── The replica. Laid out at the admin's own size and scaled as a whole by
   the script, so proportions match admin/events/event-analytics.php. Values
   are the admin's (css/admin.css): app bg #F4F2F8, border #EBE7F3, 16px cards,
   gradient KPI tiles, 13.5px sidebar items. ── */
.ld { background: #fff; text-align: left; }
.ld-viewport { position: relative; overflow: hidden; height: 520px; }
.ld-canvas {
  position: absolute; left: 0; top: 0; width: 1240px; height: 860px; transform-origin: 0 0;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); background: #F4F2F8;
  font-family: "Familjen Grotesk", system-ui, sans-serif; color: #16181D; -webkit-font-smoothing: antialiased;
}
.ld-side { background: #fff; border-right: 1px solid #EBE7F3; display: flex; flex-direction: column; }
.ld-logo { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; border-bottom: 1px solid #EBE7F3; }
.ld-ring { width: 22px; height: 22px; border-radius: 50%; border: 5px solid #7C3AED; border-top-color: #9F67FF; }
.ld-logo b { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.ld-logo em { font-style: normal; color: #7C3AED; }
.ld-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.ld-group { padding: 0 11px; margin: 18px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #6B7280; opacity: 0.55; }
.ld-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: #6B7280; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.ld-item.is-on { background: #F5F1FE; color: #7C3AED; font-weight: 600; }
.ld-item svg { flex: none; }
.ld-body { min-width: 0; display: flex; flex-direction: column; }
.ld-topbar { display: flex; align-items: center; gap: 16px; padding: 12px 28px; background: #fff; border-bottom: 1px solid #EBE7F3; }
.ld-iconbtn { width: 34px; height: 34px; border: 1px solid #E4E0EF; border-radius: 8px; display: grid; place-items: center; color: #6B7280; flex: none; }
.ld-iconbtn.is-bell { color: #7C3AED; }
.ld-crumb { font-size: 12.5px; color: #9CA3AF; }
.ld-crumb i { font-style: normal; opacity: 0.5; margin: 0 2px; }
.ld-crumb b { color: #16181D; font-weight: 600; }
.ld-spacer { flex: 1; }
.ld-user { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border: 1px solid #E4E0EF; border-radius: 100px; font-size: 12.5px; color: #9CA3AF; }
.ld-user b { color: #16181D; font-weight: 600; }
.ld-avatar { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; background: #F5F1FE; }
.ld-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-content { padding: 22px 28px; display: grid; gap: 18px; align-content: start; }
.ld-actions { display: flex; gap: 10px; }
.ld-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; }
.ld-btn.is-soft { background: #F5F1FE; color: #7C3AED; }
.ld-btn.is-primary { background: #7C3AED; color: #fff; }
.ld-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ld-kpi { position: relative; background: #fff; border: 1px solid #EBE7F3; border-radius: 16px; padding: 20px; min-height: 150px; overflow: hidden; }
.ld-kpi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ld-kpi-l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9CA3AF; font-weight: 600; padding-top: 4px; }
.ld-kpi-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--a); background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 65%, #16181D)); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18); }
.ld-kpi-v { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-kpi-n { font-size: 11.5px; color: #9CA3AF; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-spark { display: block; width: 100%; height: 34px; margin-top: 12px; overflow: visible; }
.ld-spark path { fill: none; stroke: #7C3AED; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ld-spark.is-pink path { stroke: #EC4899; }
.ld-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ld-card { background: #fff; border: 1px solid #EBE7F3; border-radius: 16px; padding: 20px 22px 14px; min-width: 0; overflow: hidden; }
.ld-card-h { font-size: 13px; color: #6B7280; margin-bottom: 4px; }
.ld-bars, .ld-line { display: block; width: 100%; height: auto; overflow: visible; }
.ld-gl { stroke: #F1EEF7; stroke-width: 1; }
.ld-ax { font-size: 12px; fill: #6B7280; font-family: "Familjen Grotesk", system-ui, sans-serif; }
.ld-bar rect { fill: #EC4899; transition: y 0.45s ease, height 0.45s ease; }
.ld-bar text { font-size: 11px; font-weight: 600; fill: #16181D; font-family: "Familjen Grotesk", system-ui, sans-serif; }
.ld-bar.is-today rect { fill: #DB2777; }
.ld-bar.is-pop rect { animation: ld-bump 0.6s ease; }
@keyframes ld-bump { 50% { filter: brightness(1.2); } }
.ld-path { fill: none; stroke: #7C3AED; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ld-area { fill: url(#ldFill); }
.ld-end { font-size: 12px; font-weight: 700; fill: #7C3AED; font-family: "Familjen Grotesk", system-ui, sans-serif; }
.ld-who b { display: block; font-size: 15px; }
.ld-who small { display: block; font-size: 12.5px; color: #9CA3AF; margin-top: 2px; }
.ld-who-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ld-mini { border: 1px solid #EBE7F3; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; gap: 12px; }
.ld-donut { width: 90px; height: 90px; border-radius: 50%; background: conic-gradient(#7C3AED 0 38%, #F59E0B 38% 62%, #EC4899 62% 82%, #10B981 82%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.ld-hbars { display: grid; gap: 8px; }
.ld-hbars i { display: block; height: 10px; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #9F67FF, #7C3AED); }

/* Intro: bars rise in turn once the script marks it ready (no JS: shown). */
.hm-js .ld:not(.is-ready) .ld-bar rect { transform: scaleY(0); }
.ld-bar rect { transform-box: fill-box; transform-origin: bottom; }
.ld.is-ready .ld-bar rect { transform: scaleY(1); transition: transform 0.7s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 25ms), y 0.45s ease, height 0.45s ease; }
.hm-js .ld:not(.is-ready) .ld-bar text { opacity: 0; }
.ld.is-ready .ld-bar text { opacity: 1; transition: opacity 0.4s ease calc(0.5s + var(--i) * 25ms); }

/* The admin's own compact layout for narrow frames (phones): no sidebar,
   2x2 cards, charts stacked. Still scaled as a whole. */
.ld.is-compact .ld-canvas { width: 680px; height: 1080px; grid-template-columns: 1fr; }
.ld.is-compact .ld-side, .ld.is-compact .ld-crumb, .ld.is-compact .ld-user b { display: none; }
.ld.is-compact .ld-topbar { padding: 12px 18px; }
.ld.is-compact .ld-content { padding: 18px; }
.ld.is-compact .ld-kpis { grid-template-columns: 1fr 1fr; }
.ld.is-compact .ld-charts { grid-template-columns: 1fr; }
.ld.is-compact .ld-charts .ld-card:last-child, .ld.is-compact .ld-who { display: none; }

@media (max-width: 760px) {
  .hm-stage-live { padding: 0 8% 0 0; }
  .hm-stage-live .hm-hero-phone { width: 28%; bottom: -2px; }
  .hm-stage-live .hm-badge-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-bar rect, .ld-bar text, .hm-stage-live { animation: none !important; transition: none !important; }
  .hm-js .ld:not(.is-ready) .ld-bar rect { transform: none; }
  .hm-js .ld:not(.is-ready) .ld-bar text { opacity: 1; }
}

/* ── Features row: arrows when it is a swipe row (phones, and desktops with
   reduced motion, where the scroll-driven track is off and a mouse had no way
   to move a row whose scrollbar was hidden). ── */
.hm-hx-nav { display: none; gap: 8px; }
.hm-hx:not(.is-pinned) .hm-hx-nav { display: flex; }
.hm-hx-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1;
}
.hm-hx-nav button:hover { border-color: var(--violet); color: var(--violet); }
.hm-hx-nav button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.hm-hx-nav button:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  /* A desktop that gets the swipe row can see and drag its scrollbar. */
  .hm-hx:not(.is-pinned) .hm-hx-viewport { scrollbar-width: thin; }
  .hm-hx:not(.is-pinned) .hm-hx-viewport::-webkit-scrollbar { display: block; height: 8px; }
  .hm-hx:not(.is-pinned) .hm-hx-viewport::-webkit-scrollbar-thumb { background: #d8cff0; border-radius: 8px; }
}

/* ── Hero tightened + glass frame that straightens on scroll (2026-10-05) ── */
.hm-hero.is-centred .hm-hero-lede { font-size: clamp(16px, 1.6vw, 18.5px); max-width: 52ch; margin-top: 4px; color: rgba(255, 255, 255, 0.78); }
.hm-hero.is-centred .hero-ctas { margin-top: 24px; }
.hm-hero.is-centred .hm-hero-note { margin-top: 14px; font-size: 12.5px; gap: 6px 16px; color: rgba(255, 255, 255, 0.58); }
.hm-hero.is-centred .hm-hero-note svg { width: 13px; height: 13px; }
.hm-stage-live { margin-top: clamp(26px, 3.4vw, 40px); perspective: 1600px; }
.ld-frame {
  padding: 10px 10px 0; border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 0;
  box-shadow: 0 -20px 80px -20px rgba(159, 103, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  /* Pivot on the TOP edge: tilting away from the bottom edge left a tall
     empty gap above the frame. This way the top stays under the buttons and
     the bottom swings towards the viewer (and out of the hero). */
  transform-origin: 50% 0;
}
.hm-stage-live.is-tilting .ld-frame { transform: rotateX(var(--tilt, 22deg)) scale(var(--lift, 0.94)); will-change: transform; }
.hm-stage-live .ld-frame .ld { box-shadow: none; }
@media (max-width: 760px) {
  .ld-frame { padding: 6px 6px 0; border-radius: 16px 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-stage-live.is-tilting .ld-frame { transform: none; }
}
/* ── Hero dashboard: wider, and three scenes (2026-10-05) ─────────────────────
   The stage breaks out of the text column to use the screen (owner: "the hero
   section is not using the width"), so the 1240px admin canvas shows near 1:1. */
.hm-stage-live {
  justify-self: start; max-width: none;
  width: min(1320px, calc(100vw - 32px));
  margin-left: calc((100% - min(1320px, 100vw - 32px)) / 2);
  padding: 0 4%;
}
.hm-stage-live .hm-hero-phone { width: 15%; max-width: 205px; right: 0; }
.hm-stage-live .hm-badge-float { left: 0; top: 30%; }

/* Scenes cross-fade inside the admin body; the tallest sets the height. */
.ld-scenes { position: relative; flex: 1; min-height: 0; }
.ld-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; }
.ld-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s; }
.ld-item[data-for].is-on { background: #F5F1FE; color: #7C3AED; font-weight: 600; }

/* Bookings — admin/events/event-bookings.php */
.ld-table-card { padding: 0; }
.ld-table-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.ld-table-head b { font-size: 16px; margin-right: auto; }
.ld-search { display: inline-flex; align-items: center; gap: 8px; width: 270px; padding: 9px 12px; border: 1px solid #E4E0EF; border-radius: 9px; font-size: 13px; color: #9CA3AF; }
.ld-ghost { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #4B5060; padding: 8px 10px; border-radius: 9px; }
.ld-ghost.is-box { border: 1px solid #E4E0EF; }
.ld-th, .ld-tr { display: grid; grid-template-columns: 1.15fr 2.2fr 0.9fr 1fr 1fr 0.85fr 0.95fr 1.05fr; align-items: center; gap: 10px; padding: 0 22px; }
.ld-th { background: #FAF9FC; border-top: 1px solid #EBE7F3; border-bottom: 1px solid #EBE7F3; padding-block: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9CA3AF; }
.ld-tr { padding-block: 13px; border-bottom: 1px solid #F3F0FA; font-size: 13.5px; }
.ld-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; }
.ld-att { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ld-att b { display: block; font-weight: 600; }
.ld-att small { display: block; color: #9CA3AF; font-size: 12px; }
.ld-ini { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11.5px; color: #fff; background: var(--c, #7C3AED); }
.ld-amt { font-weight: 700; }
.ld-dim { color: #8A8E9A; font-size: 12.5px; line-height: 1.35; }
.ld-badge { font-style: normal; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 100px; white-space: nowrap; transition: background 0.4s, color 0.4s; }
.ld-badge.is-ok { background: #DCFCE7; color: #15803D; }
.ld-badge.is-warn { background: #FEF3C7; color: #B45309; }
.ld-tr.is-new { animation: ld-row 0.6s ease; background: linear-gradient(90deg, #F5F1FE, transparent 70%); }
.ld-tr.is-flash { animation: ld-flash 1.2s ease; }
@keyframes ld-row { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes ld-flash { 0% { background: #ECFDF5; } 100% { background: transparent; } }

/* Check-in — admin/events/check-in.php */
.ld-ci-card { padding: 0; }
.ld-ci-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid #EBE7F3; }
.ld-ci-head b { font-size: 16px; margin-right: auto; }
.ld-select { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #E4E0EF; border-radius: 9px; font-size: 13.5px; }
.ld-ci-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; padding: 22px; }
.ld-cam { height: 300px; border-radius: 14px; background: #0F1015; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #C9CBD6; font-size: 13px; }
.ld-cam-frame { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.ld-cam-frame > i { position: absolute; width: 28px; height: 28px; border: 3px solid #9F67FF; }
.ld-cam-frame > i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.ld-cam-frame > i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.ld-cam-frame > i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.ld-cam-frame > i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.ld-qr { width: 96px; height: 96px; fill: #fff; background: #fff; padding: 6px; border-radius: 6px; }
.ld-qr path { fill: #0F1015; }
.ld-scan { position: absolute; left: 10px; right: 10px; height: 2px; background: linear-gradient(90deg, transparent, #C4B5FD, transparent); box-shadow: 0 0 12px #9F67FF; animation: ld-scan 1.8s ease-in-out infinite alternate; }
@keyframes ld-scan { from { top: 14px; } to { top: 134px; } }
.ld-status { border: 1px solid #EBE7F3; background: #FAF9FC; border-radius: 14px; padding: 16px 18px; transition: background 0.35s, border-color 0.35s; }
.ld-status[data-state="ok"] { background: #ECFDF5; border-color: #A7F3D0; }
.ld-status[data-state="scanning"] { background: #F5F1FE; border-color: #DDD6FE; }
.ld-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: #EEEAF7; color: #6B7280; }
.ld-status[data-state="ok"] .ld-pill { background: #10B981; color: #fff; }
.ld-status[data-state="scanning"] .ld-pill { background: #7C3AED; color: #fff; }
.ld-status-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.ld-status-ph { width: 58px; height: 58px; border-radius: 12px; background: #EEEAF7; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #7C3AED; }
.ld-status[data-state="ok"] .ld-status-ph { background: #10B981; color: #fff; }
.ld-status b { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.ld-status small { display: block; font-size: 12.5px; color: #4B5060; margin-top: 2px; }
.ld-prog { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; font-size: 13.5px; }
.ld-prog b { font-size: 22px; font-family: "Bricolage Grotesque", system-ui, sans-serif; }
.ld-prog b small { font-size: 13.5px; font-family: "Familjen Grotesk", system-ui, sans-serif; font-weight: 500; }
.ld-bar-track { height: 9px; border-radius: 9px; background: #EEEAF7; margin: 8px 0 8px; overflow: hidden; }
.ld-bar-track i { display: block; height: 100%; border-radius: 9px; background: #15803D; transition: width 0.6s ease; }
.ld-door { padding: 18px 22px; }
.ld-door > b { font-size: 15px; }
.ld-door-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.ld-door-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #F3F0FA; font-size: 13.5px; }
.ld-door-list li:first-child { border-top: 0; }
.ld-door-list b { display: block; font-weight: 600; }
.ld-door-list small { display: block; color: #8A8E9A; font-size: 12px; }
.ld-door-list em { font-style: normal; color: #8A8E9A; font-size: 12.5px; }
.ld-door-list li.is-new { animation: ld-row 0.6s ease; }

/* Compact (phones): the same scenes, fewer columns. */
.ld.is-compact .ld-th, .ld.is-compact .ld-tr { grid-template-columns: 1.6fr 1fr 0.9fr; }
.ld.is-compact .ld-th span:nth-child(1), .ld.is-compact .ld-tr > span:nth-child(1),
.ld.is-compact .ld-th span:nth-child(3), .ld.is-compact .ld-tr > span:nth-child(3),
.ld.is-compact .ld-th span:nth-child(5), .ld.is-compact .ld-tr > span:nth-child(5),
.ld.is-compact .ld-th span:nth-child(6), .ld.is-compact .ld-tr > span:nth-child(6),
.ld.is-compact .ld-th span:nth-child(8), .ld.is-compact .ld-tr > span:nth-child(8) { display: none; }
.ld.is-compact .ld-search, .ld.is-compact .ld-ghost { display: none; }
.ld.is-compact .ld-ci-body { grid-template-columns: 1fr; }
.ld.is-compact .ld-select:last-child { display: none; }
@media (max-width: 760px) {
  .hm-stage-live { padding: 0 8% 0 0; }
  .hm-stage-live .hm-hero-phone { width: 28%; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-scene { transition: none; }
  .ld-scan { animation: none; top: 74px; }
}

/* The check-in card sits over the EMPTY bottom of the sidebar, not its menu. */
.hm-stage-live .hm-badge-float { top: auto; bottom: 12%; left: 1%; }

/* ── Hero dashboard pages: tabs, pointer, phone sizing (2026-10-05) ─────────── */
.ld-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 auto 10px; padding: 5px; width: max-content; max-width: 100%;
  border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.ld-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, 0.72); font: 600 13.5px "Familjen Grotesk", system-ui, sans-serif; cursor: pointer; }
.ld-tab:hover { color: #fff; }
.ld-tab:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 2px; }
.ld-tab.is-on { background: #fff; color: #16181D; }
.ld-tab i { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(124, 58, 237, 0.18); }
.ld-tab i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #7C3AED; transform: scaleX(0); transform-origin: left; }
.ld-tab.is-on i::after { animation: ld-progress var(--dur, 6000ms) linear forwards; }
.ld.is-still ~ * .ld-tab i, .ld-tabs:has(+ .ld.is-still) .ld-tab i { display: none; }
@keyframes ld-progress { to { transform: scaleX(1); } }
/* The pointer moves in canvas pixels, so it scales with the replica. */
.ld-cursor { position: absolute; left: 640px; top: 420px; z-index: 30; opacity: 0; pointer-events: none;
  transition: left 0.8s cubic-bezier(.45, 0, .2, 1), top 0.8s cubic-bezier(.45, 0, .2, 1), opacity 0.3s; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)); }
.ld-cursor.is-shown { opacity: 1; }
.ld-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7C3AED; opacity: 0; }
.ld-cursor.is-click::after { animation: ld-click 0.45s ease-out; }
@keyframes ld-click { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }
.ld-item.is-press { background: #EDE6FD; transform: scale(0.98); transition: transform 0.12s; }
.ld-scene { transform: translateX(16px); }
.ld-scene.is-on { transform: none; }

/* Phones: buttons keep their size side by side (brand.css stretched them to
   full width), and the replica is a short landscape, not a tall portrait. */
@media (max-width: 760px) {
  .hm-hero.is-centred .hero-ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
  .hm-hero.is-centred .hero-ctas .btn { width: auto; flex: 0 0 auto; padding: 12px 18px; font-size: 15px; }
  .ld-tabs { gap: 2px; padding: 4px; }
  .ld-tab { padding: 7px 11px; font-size: 12.5px; gap: 5px; }
  .ld-tab svg { display: none; }
}
.ld.is-compact .ld-canvas { height: 640px; }
.ld.is-compact .ld-cam { height: 190px; }
.ld.is-compact .ld-cam-frame { transform: scale(0.75); }
.ld.is-compact .ld-who { display: none; }
.ld.is-compact .ld-tr { padding-block: 10px; }
@media (max-width: 760px) {
  /* The app phone covered half the replica on a phone screen: smaller, further out. */
  .hm-stage-live { padding: 0 4% 0 0; }
  .hm-stage-live .hm-hero-phone { width: 21%; right: -1%; bottom: -2px; }
}

/* "Your Event, Your Way" on ONE line where it fits (owner 2026-10-05); the
   break after the comma stays on phones, where one line would not fit and a
   natural wrap could strand "Way" on its own. */
@media (min-width: 761px) {
  .hm-hero.is-centred .hm-h1-br { display: none; }
}

/* ── Page entrance: every component arrives in turn (2026-10-05) ──────────── */
.ld-scene.is-on .ld-in { animation: ld-arrive 0.6s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) both; }
@keyframes ld-arrive { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.ld-tabs { display: none; }
@media (prefers-reduced-motion: reduce) { .ld-scene.is-on .ld-in { animation: none; } }
/* Phones: the full desktop replica (no compact layout), and the check-in card
   shown like on desktop, just smaller (owner 2026-10-05). */
@media (max-width: 760px) {
  .hm-stage-live .hm-badge-float { display: inline-flex; left: 0; bottom: 8%; top: auto; transform-origin: left bottom; scale: 0.72; }
  .hm-stage-live .hm-hero-phone { width: 20%; }
}

/* The hero phone's extra screens sit exactly over the first and cross-fade
   with the dashboard's pages (index.php, 2026-10-05). */
.hm-hero-phone .hm-ip-screen { position: relative; }
.hm-hero-phone .hm-ip-alt { position: absolute; left: 0; width: 100%; object-fit: cover; object-position: top; opacity: 0; transform: translateX(10%); transition: opacity 0.55s ease, transform 0.55s ease; }
.hm-hero-phone .hm-ip-alt.is-on { opacity: 1; transform: none; }
.hm-hero-phone .hm-ip-base { transition: opacity 0.55s ease, transform 0.55s ease; }
.hm-hero-phone .hm-ip-base:not(.is-on) { opacity: 0; transform: translateX(-10%); }
.hm-hero-phone .hm-ip-base.is-on, .hm-hero-phone:not(:has(.hm-ip-alt.is-on)) .hm-ip-base { opacity: 1; transform: none; }
/* ── First load: the dashboard builds itself (2026-10-05) ──────────────────
   Until the intro runs, the shell and the page are empty (JS only); each piece
   then arrives via .ld-in (ld-arrive), the shell faster than the content. */
.hm-js .ld.is-building .ld-logo, .hm-js .ld.is-building .ld-group, .hm-js .ld.is-building .ld-item,
.hm-js .ld.is-building .ld-topbar > *, .hm-js .ld.is-building .ld-scene.is-on .ld-actions,
.hm-js .ld.is-building .ld-scene.is-on .ld-kpi, .hm-js .ld.is-building .ld-scene.is-on .ld-card { opacity: 0; }
.ld .ld-in-shell { animation: ld-arrive-side 0.45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) both; }
@keyframes ld-arrive-side { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.ld-topbar > .ld-in-shell { animation-name: ld-arrive; }
.ld-logo svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .ld .ld-in-shell { animation: none; } }