/* ════════════════════════════════════════════════════════════
   Workflow OS — Homepage hero · desktop enhancement (SITE-P5)
   ------------------------------------------------------------
   Scope: HOMEPAGE HERO, desktop / large-tablet only. Adds a calm,
   premium "communication-to-workflow layer" composition with slow
   product motion in place of the static scrolling cockpit.
   Token-only (--wos-* / :root), no new colors, no new fonts, no JS.

   Links AFTER home-v2.css. Everything is gated behind
   .hp-hero--enhanced + a min-width so the existing mobile / iPad
   card stack (home-v2.css) is untouched. All motion lives inside
   @media (prefers-reduced-motion: no-preference); the readable
   end-state is the base style, so no-JS / reduced-motion / print
   all show a coherent static dashboard.
   ════════════════════════════════════════════════════════════ */

/* The enhanced layer rides where the old cockpit sat; hidden on
   mobile so home-v2.css's .hp-cardstack remains the small-screen
   experience verbatim. */
.hp-hero--enhanced .hp-hero__layer { display: none; }

@media (min-width: 861px) {
  .hp-hero--enhanced .hp-hero__product { display: none; }   /* retire static cockpit */
  .hp-hero--enhanced .hp-cardstack     { display: none; }
  .hp-hero--enhanced .hp-hero__layer   { display: block; }
}

/* ── Scene shell — same surface vocabulary as .wos-product ──── */
.hl-scene {
  position: relative;
  background: var(--wos-surface);
  border: 1px solid var(--wos-border);
  border-radius: 20px;
  box-shadow: var(--wos-shadow);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--wos-text-primary);
}
/* soft depth wash behind the body so the composition reads layered */
.hl-scene::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% -10%, var(--wos-accent-subtle) 0%, transparent 46%),
    radial-gradient(90% 70% at 108% 120%, var(--wos-accent-subtle) 0%, transparent 50%);
  opacity: 0.7;
}

.hl-scene__chrome {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--wos-border);
  background: var(--wos-surface);
}
.hl-scene__chrome .wos-prod-brand .name {
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 14px;
  letter-spacing: -0.005em; color: var(--wos-text-primary);
}
.hl-scene__chrome .wos-prod-brand .sep { width: 1px; height: 14px; background: var(--wos-border); }
.hl-scene__chrome .wos-prod-brand .org { color: var(--wos-text-secondary); font-weight: 500; font-size: 13px; }

/* recording / capture indicator */
.hl-rec {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--wos-text-tertiary);
}
.hl-rec__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wos-urgent); flex-shrink: 0;
}

/* ── Body grid: signals → owned queue → closed ─────────────── */
.hl-scene__body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(196px, 232px) minmax(0, 1fr) minmax(176px, 212px);
  background: var(--wos-canvas);
  min-height: 412px;
}
.hl-col { position: relative; padding: 16px 18px; min-width: 0; }
.hl-signals { border-right: 1px solid var(--wos-border); }
.hl-closed  { border-left: 1px solid var(--wos-border); background: color-mix(in srgb, var(--wos-canvas) 88%, var(--wos-accent)); }

/* ── Focal hierarchy: lift the Owned queue, recede the sides ──
   The middle column is the product's value, so it sits forward:
   a faint accent wash, a higher stacking layer, and a stronger side
   shadow give it depth; the flanking columns step further back. */
.hl-queue {
  position: relative; z-index: 2;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--wos-accent) 7%, var(--wos-canvas)),
      var(--wos-canvas) 58%);
  box-shadow:
    -20px 0 40px -26px rgba(16,24,32,0.34),
     20px 0 40px -26px rgba(16,24,32,0.34);
}
.hl-signals, .hl-closed { opacity: 0.85; }

/* connective spine: directional nodes on the two dividers make the flow
   — communication → workflow → closed — legible at a glance, even static. */
.hl-spine {
  position: absolute; top: 50%; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  color: var(--wos-accent); box-shadow: var(--wos-shadow-sm);
}
.hl-spine svg { width: 10px; height: 10px; }
.hl-spine--in  { left: 0;  transform: translate(-50%, -50%); }
.hl-spine--out { right: 0; transform: translate(50%, -50%); }
.hl-col__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wos-text-tertiary); margin: 0 0 14px;
}
.hl-col__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--wos-accent); flex-shrink: 0;
}
.hl-closed .hl-col__label::before { background: var(--wos-ok); }
.hl-col__sub {
  margin-left: auto; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  font-size: 10.5px; color: var(--wos-text-tertiary);
}
/* neutral, structural counts — not metrics; reinforce "one queue" */
.hl-col__count {
  font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  font-size: 9.5px; color: var(--wos-text-tertiary);
  padding: 2px 6px; border: 1px solid var(--wos-border); border-radius: 4px;
  background: var(--wos-surface);
}

/* ── A · Signal lanes ──────────────────────────────────────── */
.hl-lanes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.hl-lane {
  display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 9px;
  padding: 7px 2px;
}
.hl-lane__ic { width: 15px; height: 15px; color: var(--wos-text-secondary); flex-shrink: 0; }
.hl-lane__body { min-width: 0; }
.hl-lane__name {
  font-size: 12px; font-weight: 500; color: var(--wos-text-secondary);
  letter-spacing: -0.004em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.hl-lane__track {
  position: relative; height: 2px; border-radius: 2px;
  background: linear-gradient(to right,
    var(--wos-border-strong) 0 22%, var(--wos-border) 22% 100%);
  opacity: 0.7; overflow: visible;
}
.hl-lane__pulse {
  display: none;
  position: absolute; top: 50%; left: 0; width: 16px; height: 2px;
  margin-top: -1px; border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--wos-accent));
}
.hl-lane__pulse::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--wos-accent);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--wos-accent) 60%, transparent);
}

/* ── B · Owned queue ───────────────────────────────────────── */
.hl-cards { display: flex; flex-direction: column; gap: 9px; }
.hl-card {
  position: relative;
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: 10px; padding: 11px 13px 11px 17px;
}
.hl-card::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 2px; background: var(--stripe, var(--wos-accent));
}
.hl-card--due  { --stripe: var(--wos-urgent); }
.hl-card--wait { --stripe: var(--wos-warn); }
.hl-card--new  { --stripe: var(--wos-info); }
.hl-card--lead { border-color: var(--wos-border-strong); box-shadow: var(--wos-shadow); }

/* the prioritized-queue swap pair (Fax ↔ Callback) — equal-height cards, so a
   fixed 104px nudge swaps them cleanly. Callback rides above as it rises. */
.hl-cards { --swap: 104px; }
.hl-cards .hl-card:nth-child(3) { position: relative; z-index: 1; }
.hl-cards .hl-card:nth-child(4) { position: relative; z-index: 2; }
.hl-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.hl-card__title {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--wos-text-primary); letter-spacing: -0.005em;
}
.hl-card__title .hl-lane__ic { width: 14px; height: 14px; }
.hl-card__title .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-card__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--wos-text-tertiary); margin-bottom: 9px;
}
.hl-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* waveform / recording indicator on the voicemail card */
.hl-wave { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.hl-wave i {
  display: block; width: 2.5px; border-radius: 2px;
  background: var(--wos-accent); opacity: 0.85; transform-origin: bottom;
}
.hl-wave i:nth-child(1) { height: 6px; }
.hl-wave i:nth-child(2) { height: 12px; }
.hl-wave i:nth-child(3) { height: 9px; }
.hl-wave i:nth-child(4) { height: 15px; }
.hl-wave i:nth-child(5) { height: 7px; }
.hl-wave i:nth-child(6) { height: 11px; }
.hl-wave i:nth-child(7) { height: 5px; }

/* voicemail mini-player: transport controls make the playback intent explicit */
.hl-player { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hl-pbtn {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wos-border); background: var(--wos-surface);
  color: var(--wos-text-secondary);
}
.hl-pbtn svg { width: 9px; height: 9px; display: block; }
.hl-pbtn--play { background: var(--wos-accent); border-color: var(--wos-accent); color: var(--wos-accent-on); }
.hl-player__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  color: var(--wos-text-tertiary); margin-left: 1px;
}

/* ── C · Closed ledger ─────────────────────────────────────── */
.hl-closed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hl-closed-row {
  display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 9px;
  padding: 9px 0; border-bottom: 1px solid var(--wos-border);
}
.hl-closed-row:last-child { border-bottom: none; }
.hl-closed-row__check {
  width: 16px; height: 16px; border-radius: 5px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--wos-ok) 16%, transparent);
  color: var(--wos-ok);
}
.hl-closed-row__check svg { width: 10px; height: 10px; }
.hl-closed-row__name {
  font-size: 12px; font-weight: 500; color: var(--wos-text-secondary);
  letter-spacing: -0.004em; line-height: 1.35;
}
.hl-closed-row__sub {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--wos-text-tertiary); margin-top: 3px;
}
/* empty-state honesty: the ledger visibly grows as work closes */
.hl-closed-more {
  margin-top: 10px; padding-top: 11px; border-top: 1px dashed var(--wos-border);
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.02em; color: var(--wos-text-tertiary);
}
.hl-closed-more::before { content: "+"; font-weight: 600; color: var(--wos-ok); }

/* forward-looking: if lanes/cards/controls ever become interactive */
.hl-card:focus-visible, .hl-lane:focus-visible,
.hl-pbtn:focus-visible, .hl-closed-row:focus-visible {
  outline: 2px solid var(--wos-accent); outline-offset: 2px;
}

/* ── Status chips: New · Owned · Waiting · Due · Closed ─────── */
.hl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 10.5px; line-height: 1; letter-spacing: 0.015em;
  padding: 4px 8px; border-radius: 5px; border: 1px solid transparent; white-space: nowrap;
}
.hl-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hl-chip--new     { color: var(--wos-info);   border-color: color-mix(in srgb, var(--wos-info) 50%, transparent); }
.hl-chip--owned   { background: var(--wos-accent); color: var(--wos-accent-on); }
.hl-chip--owned::before { background: var(--wos-accent-on); opacity: 0.85; }
.hl-chip--waiting { color: var(--wos-warn);   border-color: color-mix(in srgb, var(--wos-warn) 55%, transparent); }
.hl-chip--due     { background: var(--wos-urgent); color: #FBFCFD; }
.hl-chip--due::before { background: #FBFCFD; }
.hl-chip--closed  { color: var(--wos-ok); border-color: color-mix(in srgb, var(--wos-ok) 50%, transparent); }

/* lifecycle chip stack (one card rotates state) — static base shows Owned */
.hl-life { position: relative; display: inline-grid; }
.hl-life > .hl-chip { grid-area: 1 / 1; }
.hl-life > .hl-chip:not(.hl-chip--owned) { display: none; }

/* re-sort chip stack: base shows New; Due appears only during the promote gesture */
.hl-resort { position: relative; display: inline-grid; }
.hl-resort > .hl-chip { grid-area: 1 / 1; }
.hl-resort > .hl-chip--due { display: none; }

/* ── Flying card: a signal becoming an owned task ──────────── */
.hl-fly {
  display: none;
  position: absolute; z-index: 4; left: 18px; top: 196px; width: 168px;
  background: var(--wos-surface); border: 1px solid var(--wos-border-strong);
  border-radius: 9px; padding: 9px 11px; box-shadow: var(--wos-shadow-md);
  pointer-events: none;
}
.hl-fly__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--wos-text-primary); margin-bottom: 7px;
}
.hl-fly__title .hl-lane__ic { width: 13px; height: 13px; }

/* ════════════════════════════════════════════════════════════
   MOTION — calm, slow, gated. Everything above is the readable
   end-state; only this block animates, and only when the user
   has not asked to reduce motion.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* lane pulses drift toward the queue */
  .hl-lane__pulse { display: block; animation: hlLane 4.8s linear infinite; opacity: 0; }
  .hl-lane:nth-child(1) .hl-lane__pulse { animation-delay: 0s;    }
  /* voicemail lane is the demonstrator: its pulse triggers the capture below */
  .hl-lane:nth-child(2) .hl-lane__pulse { animation: hlTrigger 9s ease-in-out infinite; animation-delay: 0s; }
  .hl-lane:nth-child(3) .hl-lane__pulse { animation-delay: 2.9s;  }
  .hl-lane:nth-child(4) .hl-lane__pulse { animation-delay: 0.7s;  }
  .hl-lane:nth-child(5) .hl-lane__pulse { animation-delay: 3.6s;  }
  .hl-lane:nth-child(6) .hl-lane__pulse { animation-delay: 2.1s;  }
  .hl-lane:nth-child(7) .hl-lane__pulse { animation-delay: 4.2s;  }

  @keyframes hlLane {
    0%   { left: -16px; opacity: 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
  }

  /* the demonstrator pulse crosses its lane, reaches the queue edge, and is
     absorbed — timed to the 9s capture cycle so the flying card appears just
     after, reading as cause → effect (signal becomes an owned task). */
  @keyframes hlTrigger {
    0%   { left: -16px; opacity: 0; }
    3%   { opacity: 1; }
    10%  { left: calc(100% - 2px); opacity: 1; }
    13%  { left: calc(100% - 2px); opacity: 0; }
    100% { left: calc(100% - 2px); opacity: 0; }
  }

  /* waveform breathes */
  .hl-wave i { animation: hlWave 1.7s ease-in-out infinite; }
  .hl-wave i:nth-child(1) { animation-delay: 0s;    }
  .hl-wave i:nth-child(2) { animation-delay: 0.18s; }
  .hl-wave i:nth-child(3) { animation-delay: 0.36s; }
  .hl-wave i:nth-child(4) { animation-delay: 0.10s; }
  .hl-wave i:nth-child(5) { animation-delay: 0.42s; }
  .hl-wave i:nth-child(6) { animation-delay: 0.24s; }
  .hl-wave i:nth-child(7) { animation-delay: 0.50s; }
  @keyframes hlWave { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

  /* capture dot */
  .hl-rec__dot { animation: hlRec 2.2s ease-in-out infinite; }
  @keyframes hlRec {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--wos-urgent) 55%, transparent); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 5px color-mix(in srgb, var(--wos-urgent) 0%, transparent); }
  }

  /* lifecycle chip: New → Owned → Waiting → Due → Closed */
  .hl-life > .hl-chip { display: inline-flex; opacity: 0; animation: hlChip 17s ease-in-out infinite; }
  .hl-life > .hl-chip:nth-child(1) { animation-delay: 0s;    } /* New     */
  .hl-life > .hl-chip:nth-child(2) { animation-delay: 3.4s;  } /* Owned   */
  .hl-life > .hl-chip:nth-child(3) { animation-delay: 6.8s;  } /* Waiting */
  .hl-life > .hl-chip:nth-child(4) { animation-delay: 10.2s; } /* Due     */
  .hl-life > .hl-chip:nth-child(5) { animation-delay: 13.6s; } /* Closed  */
  @keyframes hlChip {
    0%    { opacity: 0; }
    1%    { opacity: 1; }
    20%   { opacity: 1; }
    22%   { opacity: 0; }
    100%  { opacity: 0; }
  }
  /* lead card stripe tracks the lifecycle softly */
  .hl-card--lead { animation: hlLead 17s ease-in-out infinite; }
  @keyframes hlLead {
    0%, 21%   { --stripe: var(--wos-info); }
    24%, 42%  { --stripe: var(--wos-accent); }
    45%, 63%  { --stripe: var(--wos-warn); }
    66%, 83%  { --stripe: var(--wos-urgent); }
    86%, 100% { --stripe: var(--wos-ok); }
  }

  /* a signal flies in and lands in the owned queue */
  .hl-fly { display: block; animation: hlFly 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  @keyframes hlFly {
    0%, 11% { opacity: 0; transform: translate(0, 0) scale(0.94); }   /* wait for the pulse to arrive */
    15%     { opacity: 1; transform: translate(0, 0) scale(1); }       /* materialize where it landed */
    60%     { opacity: 1; transform: translate(0, 0) scale(1); }
    82%     { opacity: 0; transform: translate(264px, -8px) scale(0.99); } /* settle into the owned queue */
    100%    { opacity: 0; transform: translate(264px, -8px) scale(0.99); }
  }

  /* newest closed row settles in */
  .hl-closed-row:first-child { animation: hlSettle 9s ease-in-out infinite; }
  @keyframes hlSettle {
    0%, 80%   { opacity: 0.0; transform: translateY(-4px); }
    88%       { opacity: 1; transform: translateY(0); }
    100%      { opacity: 1; transform: translateY(0); }
  }

  /* one-time entrance: the three columns rise in sequence (signals → queue →
     closed), then settle — the "system coming alive" beat. fill-mode backwards
     holds the hidden state through the stagger delay and reverts to the natural
     style afterward, so the focal-hierarchy opacities are preserved. Runs once. */
  .hl-signals { animation: hlEnterA 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .hl-queue   { animation: hlEnterB 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .hl-closed  { animation: hlEnterC 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  /* No fill-mode: the resting state is always the visible base style, so print,
     export, and any context that freezes/doesn't run the animation still show a
     readable column. The stagger is baked into each keyframe's opening hold (not
     animation-delay), and opacity floors at 0.5 so a frozen first frame is never
     blank. */
  @keyframes hlEnterA {
    0%        { opacity: 0.5; transform: translateY(14px); }
    60%, 100% { opacity: 1;   transform: translateY(0); }
  }
  @keyframes hlEnterB {
    0%, 15%   { opacity: 0.5; transform: translateY(14px); }
    72%, 100% { opacity: 1;   transform: translateY(0); }
  }
  @keyframes hlEnterC {
    0%, 28%   { opacity: 0.5; transform: translateY(14px); }
    84%, 100% { opacity: 1;   transform: translateY(0); }
  }

  /* prioritized-queue re-sort: the Callback card becomes Due and rises above the
     Fax card, the two swap slots, then the list settles — reinforcing the core
     "one prioritized queue" claim. Calm 12s cycle, independent of the 9s scene. */
  .hl-cards .hl-card:nth-child(4) { animation: hlResortUp 12s ease-in-out infinite; }
  .hl-cards .hl-card:nth-child(3) { animation: hlResortDown 12s ease-in-out infinite; }
  @keyframes hlResortUp {
    0%, 55% { transform: translateY(0); --stripe: var(--wos-info); }
    61%     { --stripe: var(--wos-urgent); }
    68%     { transform: translateY(calc(var(--swap) * -1)); }
    86%     { transform: translateY(calc(var(--swap) * -1)); --stripe: var(--wos-urgent); }
    93%     { --stripe: var(--wos-info); }
    100%    { transform: translateY(0); }
  }
  @keyframes hlResortDown {
    0%, 55% { transform: translateY(0); }
    68%     { transform: translateY(var(--swap)); }
    86%     { transform: translateY(var(--swap)); }
    100%    { transform: translateY(0); }
  }
  /* Due chip crossfades in on the rising card during the gesture */
  .hl-resort > .hl-chip--new { animation: hlResortChipNew 12s ease-in-out infinite; }
  .hl-resort > .hl-chip--due { display: inline-flex; opacity: 0; animation: hlResortChipDue 12s ease-in-out infinite; }
  @keyframes hlResortChipNew {
    0%, 56% { opacity: 1; } 62% { opacity: 0; } 86% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 1; }
  }
  @keyframes hlResortChipDue {
    0%, 56% { opacity: 0; } 62% { opacity: 1; } 86% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; }
  }
}

/* ── Reduced-motion: a deliberately composed static frame ──────
   Not just "animation removed" — the scene freezes at a meaningful
   beat: the demonstrator pulse resting at the queue edge (implying
   flow), the lead card mid-lifecycle on Owned, and the newest
   closed row already settled. */
@media (prefers-reduced-motion: reduce) {
  .hl-closed-row:first-child { opacity: 1; }
  .hl-lane:nth-child(2) .hl-lane__pulse {
    display: block; left: auto; right: 0; opacity: 1; animation: none;
  }
  .hl-card--lead { --stripe: var(--wos-accent); }
  /* hold the queue in its natural priority order; the spine + counts carry
     the flow story so the frozen frame still looks deliberately composed. */
  .hl-cards .hl-card:nth-child(3),
  .hl-cards .hl-card:nth-child(4) { transform: none; }
}

/* ── Tablet-large: slightly tighter columns ────────────────── */
@media (min-width: 861px) and (max-width: 1040px) {
  .hl-scene__body { grid-template-columns: minmax(176px, 200px) minmax(0, 1fr) minmax(0, 188px); min-height: 392px; }
  .hl-col { padding: 14px 14px; }
  .hl-fly { top: 188px; }
}