/*
  Workmates Hero — five scenes, each a bespoke recreation of an audited
  reference screenshot (real HR Cloud product screens, plus a separate
  AI Insights survey chat) — see the per-scene comments below for each
  one's source. Colors are sampled directly from those references, not
  invented.

  Layout composition matches the reference recordings' own asymmetric
  split: product screen | photography panel.
*/

:root {
  --wmh-navy-deep: #060c1c; /* photo panel placeholder background */

  /* Neutrals */
  --wmh-white: #fff;
  --wmh-gray-bg: #f1f2f5;
  --wmh-gray-100: #e9eaee;
  --wmh-gray-300: #d7d9df;
  --wmh-gray-500: #6b7280;
  --wmh-text: #1c1f27;

  --wmh-radius-sm: 8px;
  --wmh-radius-md: 12px;
  --wmh-radius-lg: 18px;
  --wmh-radius-full: 9999px;

  --wmh-shadow: none;
  --wmh-shadow-sm: none;

  --wmh-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wmh-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

.wmh-hero {
  position: relative;
  /* HR Cloud embed (WEB-301): transparent — the embedding hero's navy gradient
     shows through; only the card panels paint their own surface. Overrides the
     reference's dark gradient bg. */
  background: transparent;
  /* Breathing room so reveal-up transitions and the cards/badges that overhang
     the stage vertically are not clipped by the (embedding) iframe viewport. */
  padding: 2rem 0;
  font-family: var(--wmh-font);
  color: var(--wmh-text);
}

.wmh-hero__inner {
  max-width: 80rem;
  margin-inline: auto;
}

/* Equal columns by default, sized so the photo box keeps its original
   width exactly (it was 1fr of a 2.1fr:1fr split) — the stage itself
   is narrowed and centered to match, rather than widening the photo
   box to fill the old product-panel space. A scene can widen its own
   share via --wmh-cols (see workmates-hero.js, SCENES[].columns,
   audited from the source recording — its desktop-dashboard scene
   runs wider); the transition below animates that reflow.

   No viewport media query — tablet and mobile render the exact same
   side-by-side layout as desktop; this is a fixed-width component
   embed, not a responsive reflow. */
.wmh-stage {
  --wmh-cols: minmax(0, 1fr) minmax(0, 1fr);
  display: grid;
  grid-template-columns: var(--wmh-cols);
  transition: grid-template-columns 700ms var(--wmh-ease-out),
    max-width 700ms var(--wmh-ease-out);
  max-width: var(--wmh-stage-max, 50.5rem);
  margin-inline: auto;
  gap: 1.25rem;
  contain: layout paint;
}

.wmh-panel {
  position: relative;
  min-width: 0;
  border-radius: 1.25rem;
  overflow: hidden;
}

/* Transparent, shadowless by default — every scene's own content (each
   .wmh-mock paints its own opaque background, or is a bare cutout image
   like Scene 4's phone mockup) already covers this, so it's only ever
   visible as a fallback. Scene 2 (Survey AI Insights) is the one scene
   that keeps the white card + drop-shadow look, restored via
   .wmh-panel--card (toggled in workmates-hero.js) — left untouched by
   this change. box-shadow (when restored) is applied here rather than as
   a stage-level filter: drop-shadow — the filter forced a full repaint of
   the whole stage on every frame while the grid was also transitioning
   width, causing a stutter at each scene change; box-shadow is far
   cheaper since it doesn't need to read the panel's rendered pixels. */
.wmh-panel--card {
  background: var(--wmh-white);
}

/* Both panels always share the same box dimensions — on every breakpoint,
   not just desktop where they happen to sit side by side. */
.wmh-panel--product,
.wmh-panel--photo {
  height: 34rem;
}

@media (max-width: 67.1875rem) {
  .wmh-panel--product,
  .wmh-panel--photo {
    height: 22rem;
  }
}

/* Scene 4's phone mockup PNG bakes in ~3.3% transparent top/bottom padding
   (visible phone content is 1719/1777 of the full image height), so at the
   shared panel height it reads slightly taller than the phone graphic next
   to it. Shrinks + re-centers the photo panel to that same visible height
   instead — align-self overrides the grid row's default stretch so it
   doesn't just get squashed against the top. */
.wmh-panel--photo-compact {
  height: calc(34rem * 1719 / 1777);
  align-self: center;
}

@media (max-width: 67.1875rem) {
  .wmh-panel--photo-compact {
    height: calc(22rem * 1719 / 1777);
  }
}

/* -- Product panel transition ---------------------------------------------
   Matches the source recording's own scene change exactly: each incoming
   scene is a full-bleed card that slides in from the right and covers the
   previous one, which never itself moves — it just sits underneath,
   instantly hidden once covered. There is no crossfade. The slide is
   driven by JS (workmates-hero.js) toggling an inline transform + a
   one-off transition so the same element can be reset off-panel (no
   transition) and re-enter (with one) every time its turn comes round
   again in the loop; this stylesheet only supplies the "parked
   off-panel" default and the eased duration used for the entrance. */

.wmh-mock {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  background: var(--wmh-white);
  transform: translateX(100%);
  pointer-events: none;
  z-index: 1;
}

.wmh-mock.is-active {
  /* Covers the initial (JS class-only) activation of scene 0, which never
     goes through the slideIn() inline-style path below. */
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

/* Flat scenes — the shared reference screenshot placed as-is, no
   recreated markup. The base .wmh-mock rule paints every scene white
   behind its content; that's wrong for these since every flat image now
   has a transparent margin around its own card (trimmed tight, but still
   transparent, not opaque) — a filled background here would show through
   that margin as a mismatched box behind the card, exactly what
   .wmh-panel--bare removes at the panel level. Transparent so the hero's
   own navy background shows through instead. */
.wmh-mock--flat {
  background: transparent;
}

.wmh-flat-reveal {
  display: block;
  width: 100%;
  height: 100%;
}

.wmh-mock--flat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scene 4's kudos image is a transparent-background phone mockup, not a
   rectangular screenshot — no white card box or rounded-corner clip
   behind it, so its own shape shows through cleanly. */
.wmh-panel--bare {
  background: transparent;
  border-radius: 0;
}

/* Onboard/Recruit/Time Clock's flats are plain rectangular screenshots
   with square corners baked in (no rounding, unlike the kudos phone
   mockup's own shape) — background is transparent same as --bare so the
   hero's navy shows through the image's thin shadow-blur margin instead
   of a mismatched box, but the base .wmh-panel radius is kept so
   overflow:hidden clips the image itself into a rounded card. */
.wmh-panel--flat-rounded {
  background: transparent;
}

/* Per-scene reveal pacing — base delay before the first staggered element
   starts, the step between each subsequent one, and each element's own
   fade duration. Sampled directly from the source recording (see the
   per-scene comments below); every scene keeps its own cadence rather
   than sharing one generic timing. */
.wmh-reveal {
  opacity: 0;
  transform: translateY(10px);
}

.wmh-mock.is-active .wmh-reveal {
  animation: wmh-reveal-up var(--wmh-reveal-dur, 350ms) var(--wmh-ease-out) forwards;
  animation-delay: calc(
    var(--wmh-reveal-base, 300ms) + (var(--wmh-d, 0) * var(--wmh-reveal-step, 300ms))
  );
}

@keyframes wmh-reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------- */
/* Scene 2 — "AI Insights" survey chat                                     */
/* ---------------------------------------------------------------------- */
/* Recreated from the "Summary" tab flow of Perform-AI-Insights.mp4: a
   greeting state (icon/heading/subheading/four topic tabs) collapses once
   the demo clicks "Summary" — a question bubble, then a sequence of four
   short "thinking" steps that each replace the last, a two-paragraph
   answer, a grouped bar chart (Self Review vs Manager Review), and
   Strengths / Areas for Improvement lists. The source clip's own panel
   scrolls to reveal the chart once the answer lands — reproduced here via
   .wmh-ai__scroll + a scrollTop nudge in workmates-hero.js, timed to match.
   Its own accent is a lavender-purple (#8988bc). */

.wmh-ai {
  --wmh-ai-accent: #8988bc;
  --wmh-ai-accent-deep: #6d6ca0;
  --wmh-ai-soft: #eeeef8;
  --wmh-ai-bubble: #d9f0f8;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Soft lavender wash — covers the whole card so it's still visible once
     the greeting collapses and the chat/answer takes over, not just during
     the greeting itself. */
  background: linear-gradient(180deg, var(--wmh-white) 0%, #f8f8fc 45%, var(--wmh-ai-soft) 100%);
}

.wmh-ai__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem 0;
}

.wmh-ai__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wmh-text);
  margin: 0;
}

.wmh-ai__title svg {
  width: 15px;
  height: 15px;
  color: var(--wmh-ai-accent);
}

.wmh-ai__close {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wmh-gray-500);
  border: 1px solid var(--wmh-gray-300);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
}

.wmh-ai__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Scrollable inner wrapper — the source clip's own panel scrolls to
   reveal the chart/strengths/improvements once the answer lands; JS nudges
   scrollTop to the bottom at the same point in the timeline (see
   workmates-hero.js). Scrollbar hidden — this is a passive looping demo,
   not an interactive panel, and the source clip shows no scrollbar either. */
.wmh-ai__scroll {
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 0.5rem 1.1rem 0.75rem;
  scrollbar-width: none;
}

.wmh-ai__scroll::-webkit-scrollbar {
  display: none;
}

/* Greeting — visible immediately on activation, then collapses out of the
   way once "Summary" is clicked. The source clip holds its greeting only
   ~1.3s before that first click and the collapse itself is a quick ~300ms
   — this used to hold 2.2s and animate over 500ms, both measured off a
   different scene's timing, not this clip's. */
.wmh-ai__greeting {
  text-align: center;
  max-height: 16rem;
  opacity: 1;
  overflow: hidden;
  border-radius: 10px;
  padding: 1.1rem 0.5rem 0.75rem;
}

.wmh-mock.is-active .wmh-ai__greeting {
  animation: wmh-ai-collapse 300ms var(--wmh-ease-out) forwards;
  animation-delay: 1300ms;
}

@keyframes wmh-ai-collapse {
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
  }
}

.wmh-ai__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--wmh-white);
  color: var(--wmh-ai-accent);
  margin-bottom: 0.6rem;
}

.wmh-ai__icon svg {
  width: 18px;
  height: 18px;
}

.wmh-ai__greeting h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.4rem;
}

.wmh-ai__greeting p {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wmh-gray-500);
  max-width: 26rem;
  margin: 0 auto 0.9rem;
}

.wmh-ai__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wmh-ai__tabs--big {
  justify-content: center;
}

.wmh-ai__tab {
  background: var(--wmh-white);
  border: 1px solid var(--wmh-gray-300);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wmh-text);
  white-space: nowrap;
}

.wmh-ai__tab.is-active {
  border-color: var(--wmh-ai-accent);
  color: var(--wmh-ai-accent);
}

.wmh-ai__tabs--small {
  opacity: 0;
}

.wmh-mock.is-active .wmh-ai__tabs--small {
  animation: wmh-ai-fade-in 250ms var(--wmh-ease-out) forwards;
  animation-delay: 1650ms;
}

.wmh-ai__tabs--small .wmh-ai__tab {
  padding: 0.3rem 0.6rem;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
}

.wmh-ai__tabs--small .wmh-ai__tab.is-active {
  color: var(--wmh-ai-accent);
}

@keyframes wmh-ai-fade-in {
  to {
    opacity: 1;
  }
}

/* Chat — the question/typing/answer sequence beneath the greeting */
.wmh-ai__chat {
  padding-top: 0.75rem;
}

.wmh-ai__bubble-row {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
}

.wmh-mock.is-active .wmh-ai__bubble-row {
  animation: wmh-ai-fade-in 250ms var(--wmh-ease-out) forwards;
  animation-delay: 1650ms;
}

.wmh-ai__bubble {
  background: var(--wmh-ai-bubble);
  color: var(--wmh-text);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 1rem 1rem 0.2rem 1rem;
  max-width: 80%;
}

/* Generic delayed fade-up — used for every element revealed after the
   question (chart card, Strengths/Areas for Improvement titles and rows),
   each carrying its own --wmh-fd timestamp rather than a dedicated rule
   per element. The chart card also carries a faint border since there's
   no drop-shadow anywhere in this file (see the top-level
   --wmh-shadow: none) — without it it'd have nothing separating it from
   the page background. */
.wmh-ai__fadeup {
  opacity: 0;
}

.wmh-mock.is-active .wmh-ai__fadeup {
  animation: wmh-ai-fade-in 350ms var(--wmh-ease-out) forwards;
  animation-delay: var(--wmh-fd, 0ms);
}

/* Grouped bar chart — Self Review vs Manager Review, Performance vs
   Potential, on a shared 0–5 axis, headed by a title/subtitle (missed in
   an earlier pass of this scene — clearly visible in the source clip).
   Card fades in once scrolled into view (see .wmh-ai__scroll above and
   the JS scrollTop nudge). */
.wmh-ai__chartcard {
  background: var(--wmh-white);
  border: 1px solid #e1e8e8;
  border-radius: 0.9rem;
  padding: 0.75rem 0.75rem 0.6rem;
  margin-top: 0.6rem;
}

.wmh-ai__chart-title {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--wmh-text);
  margin: 0 0 0.15rem;
}

.wmh-ai__chart-subtitle {
  text-align: center;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
  margin: 0 0 0.75rem;
}

.wmh-ai__chart-plot {
  position: relative;
  margin-left: 3.6rem;
  padding-bottom: 0.85rem;
  min-height: 3.6rem;
}

.wmh-ai__chart-grid {
  position: absolute;
  top: 0;
  bottom: 0.85rem;
  width: 1px;
  background: var(--wmh-gray-100);
}

.wmh-ai__chart-row {
  position: relative;
  height: 1.5rem;
  display: flex;
  align-items: center;
}

.wmh-ai__chart-label {
  position: absolute;
  left: -3.6rem;
  width: 3.3rem;
  text-align: right;
  padding-right: 0.3rem;
  font-size: 0.5625rem;
  color: var(--wmh-gray-500);
  white-space: nowrap;
}

.wmh-ai__chart-bars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wmh-ai__chart-bar {
  height: 5px;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
}

.wmh-mock.is-active .wmh-ai__chart-bar {
  animation: wmh-ai-bar-fill 1650ms var(--wmh-ease-out) forwards;
  animation-delay: 2750ms;
}

@keyframes wmh-ai-bar-fill {
  to {
    transform: scaleX(var(--wmh-w, 0));
  }
}

.wmh-ai__chart-bar--self {
  background: #73b0e2;
}

.wmh-ai__chart-bar--manager {
  background: #3d4448;
}

.wmh-ai__chart-axis {
  position: relative;
  height: 0.75rem;
}

.wmh-ai__chart-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.5rem;
  color: var(--wmh-gray-500);
}

.wmh-ai__chart-xlabel {
  text-align: center;
  font-size: 0.5rem;
  color: var(--wmh-gray-500);
  margin: 0.15rem 0 0;
}

.wmh-ai__chart-legend {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-text);
}

.wmh-ai__legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.wmh-ai__legend-dot--self {
  background: #73b0e2;
}

.wmh-ai__legend-dot--manager {
  background: #3d4448;
}

/* Strengths / Areas for Improvement — soft-tinted pill rows */
.wmh-ai__list-title {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--wmh-text);
  margin: 0.65rem 0 0.35rem;
}

.wmh-ai__list-row {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.3rem;
}

.wmh-ai__list-row--pos {
  background: #e9f3cc;
  color: #767f45;
}

.wmh-ai__list-row--neg {
  background: #fae6e6;
  color: #b8465a;
}

.wmh-ai__inputbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.75rem 1.1rem 0;
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border: 1px solid var(--wmh-gray-300);
  border-radius: 999px;
}

.wmh-ai__inputbar > span:first-child {
  font-size: 0.75rem;
  color: var(--wmh-gray-500);
}

.wmh-ai__send {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--wmh-ai-accent);
  color: var(--wmh-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wmh-ai__send svg {
  width: 11px;
  height: 11px;
  transform: rotate(-90deg);
}

.wmh-ai__disclaimer {
  flex-shrink: 0;
  text-align: center;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
  margin: 0.4rem 0 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .wmh-ai__scroll {
    scroll-behavior: auto;
  }
  .wmh-ai__greeting {
    animation: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .wmh-ai__tabs--small,
  .wmh-ai__bubble-row,
  .wmh-ai__fadeup {
    animation: none !important;
    opacity: 1 !important;
  }
  .wmh-ai__chart-bar {
    animation: none !important;
    transform: scaleX(var(--wmh-w, 0)) !important;
  }
}

/* ---------------------------------------------------------------------- */
/* HR Cloud scenes — shared chrome (Scenes 1, 3 & 4)                       */
/* ---------------------------------------------------------------------- */
/* Scene 1 ("New York Team"), Scene 3 (Feed — Mandatory Read announcement)
   and Scene 4 (Feed — kudos) all recreate real HR Cloud product screens,
   so they share one sidebar/topbar/card chrome here. Logos and the eight
   app icons are the real brand assets extracted from
   ~/Downloads/dashboard animation copy/homepage-dashboard/img — not
   hand-drawn — so this scene's colors intentionally follow those assets
   (navy chrome, teal accent, HR Cloud's own orange for CTAs/ribbons)
   rather than this file's Vandelay-purple palette. */

.wmh-hrc {
  height: 100%;
  overflow: hidden;
  display: flex;
  background: var(--wmh-white);
}

.wmh-hrc__sidebar {
  flex-shrink: 0;
  width: 1.75rem;
  background: #1e2530;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.4rem;
  overflow: hidden;
}

.wmh-hrc__badge {
  width: 1.05rem;
  height: 1.05rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.wmh-hrc__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wmh-hrc__worklogo {
  width: 1.05rem;
  height: 1.05rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.wmh-hrc__worklogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Nine plain icons (Tasks/Chat/Calendar/… ) — real HR Cloud SVGs, dimmed
   like the reference's own subtle inactive-icon treatment. */
.wmh-hrc__navicons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.wmh-hrc__navicon {
  width: 0.8rem;
  height: 0.8rem;
  color: #6b7684;
  flex-shrink: 0;
}

.wmh-hrc__navicon svg {
  width: 100%;
  height: 100%;
}

/* Colored "Applications" icons — real brand assets, sit below the plain
   icons exactly as in the audited sidebar. */
.wmh-hrc__apps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}

.wmh-hrc__app {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.wmh-hrc__app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.wmh-hrc__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wmh-hrc__topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: #2b3542;
}

.wmh-hrc__search {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #3d4753;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  color: #9aa4b2;
  font-size: 0.5625rem;
}

.wmh-hrc__search svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.wmh-hrc__topbar-icons {
  margin-left: auto;
  color: #9aa4b2;
  display: flex;
  align-items: center;
}

.wmh-hrc__topbar-icons svg {
  width: 11px;
  height: 11px;
}

.wmh-hrc__avatar {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  object-fit: cover;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Banner — photo variant (Scene 1's team header) */
.wmh-hrc__banner {
  position: relative;
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
}

.wmh-hrc__banner--photo {
  height: 4.5rem;
  background-size: cover;
  background-position: center;
}

.wmh-hrc__banner--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00000000 40%, #000000a6 100%);
}

.wmh-hrc__back {
  position: absolute;
  z-index: 1;
  top: 0.4rem;
  left: 0.7rem;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
}

.wmh-hrc__team-name {
  position: absolute;
  z-index: 1;
  bottom: 0.4rem;
  left: 0.7rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
}

.wmh-hrc__banner-actions {
  position: absolute;
  z-index: 1;
  bottom: 0.45rem;
  right: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wmh-hrc__icon-btn {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 4px;
  border: 1px solid #ffffff66;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
}

.wmh-hrc__edit-btn {
  border: 1px solid #ffffff66;
  border-radius: 4px;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

/* Banner — brand variant (Scenes 3 & 4's teal "HR Cloud" header) */
.wmh-hrc__banner--brand {
  height: 2.5rem;
  background: linear-gradient(160deg, #bfe8e4, #4fb6b8);
  align-items: center;
  justify-content: center;
}

.wmh-hrc__banner--brand img {
  height: 1.1rem;
}

.wmh-hrc__navstrip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  background: var(--wmh-white);
  border-bottom: 1px solid var(--wmh-gray-100);
  overflow: hidden;
}

.wmh-hrc__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--wmh-gray-500);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.wmh-hrc__tab svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.wmh-hrc__tab-chevron {
  width: 7px !important;
  height: 7px !important;
  margin-left: -0.1rem;
}

.wmh-hrc__tab.is-active {
  color: var(--wmh-text);
  border-bottom-color: #3fb6b8;
}

.wmh-hrc__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Same soft #32B885 wash used on the Survey AI Insights card, so every
     scene shares that treatment. */
  background: linear-gradient(180deg, var(--wmh-gray-bg) 0%, #f3fbf8 45%, #e3f5ec 100%);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.wmh-hrc__content--split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0.6rem;
  align-items: start;
}

.wmh-hrc__card {
  background: var(--wmh-white);
  border-top: 2px solid #3fb6b8;
  border-radius: 3px;
  padding: 0.55rem 0.65rem;
  min-width: 0;
}

.wmh-hrc__card-title {
  display: flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wmh-text);
  margin: 0 0 0.5rem;
}

.wmh-hrc__view-all {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: none;
  color: #3fb0b6;
}

.wmh-btn-teal {
  display: inline-block;
  background: #3fb6b8;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}

/* -- Scene 1 — Description + Featured Posts ------------------------------ */

.wmh-hrc__desc {
  display: flex;
  gap: 0.6rem;
}

.wmh-hrc__desc-photo {
  flex: 1.3;
  min-width: 0;
  height: 5.5rem;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

.wmh-hrc__desc-text {
  flex: 1;
  min-width: 0;
}

.wmh-hrc__kicker {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wmh-gray-500);
  margin: 0 0 0.2rem;
}

.wmh-hrc__desc-text h3 {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.3rem;
}

.wmh-hrc__desc-text > p:last-child {
  font-size: 0.5625rem;
  line-height: 1.45;
  color: var(--wmh-gray-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wmh-hrc__dots {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.wmh-hrc__dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--wmh-gray-100);
}

.wmh-hrc__dots span.is-active {
  background: #3fb6b8;
}

.wmh-hrc__section-title {
  display: flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--wmh-text);
  margin: 0 0 0.5rem;
}

.wmh-hrc__featured-row {
  display: flex;
  gap: 0.5rem;
}

.wmh-hrc__featured-card {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--wmh-white);
  border: 1px solid var(--wmh-gray-100);
  border-radius: 4px;
  padding: 0.45rem;
}

.wmh-hrc__pin {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.5rem;
}

.wmh-hrc__featured-card img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 0.3rem;
}

.wmh-hrc__featured-card strong {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-text);
}

.wmh-hrc__featured-card span {
  font-size: 0.5rem;
  color: var(--wmh-gray-500);
}

/* -- Scenes 3 & 4 — Feed main post ---------------------------------------- */

.wmh-hrc__post-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.wmh-hrc__post-head img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.wmh-hrc__post-head p {
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
  margin: 0;
}

.wmh-hrc__post-head strong {
  color: var(--wmh-text);
  font-weight: 700;
}

.wmh-hrc__post-photo {
  position: relative;
  height: 7.5rem;
  border-radius: 4px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 0.5rem;
}

.wmh-hrc__ribbon {
  position: absolute;
  top: 0.45rem;
  left: 0;
  background: #f0632c;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
}

.wmh-hrc__post-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.35rem;
}

.wmh-hrc__post-body {
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--wmh-gray-500);
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wmh-hrc__see-more {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-text);
  text-decoration: underline;
  margin-bottom: 0.55rem;
}

.wmh-hrc__cta--orange {
  background: #f0632c;
}

.wmh-hrc__like-row {
  margin-top: 0.55rem;
  display: flex;
  gap: 0.8rem;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
}

/* Kudos card (Scene 4) */
.wmh-hrc__kudos-card {
  position: relative;
  background: linear-gradient(160deg, #eafaf3, #f7fdfb);
  border-radius: 6px;
  padding: 1rem 0.7rem 0.7rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.wmh-hrc__kudos-medal {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font-size: 1.4rem;
}

.wmh-hrc__kudos-thanks {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wmh-text);
  margin: 0 0 0.6rem;
}

.wmh-hrc__kudos-recipients {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.wmh-hrc__kudos-recip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.wmh-hrc__kudos-recip img {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
}

.wmh-hrc__kudos-recip span {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--wmh-text);
}

.wmh-hrc__kudos-message {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--wmh-text);
  margin: 0 0 0.4rem;
}

/* Right rail widgets (Scenes 3 & 4) */
.wmh-hrc__rail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wmh-hrc__widget .wmh-hrc__view-all {
  display: block;
  margin: 0.2rem 0 0;
}

.wmh-hrc__ann-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.wmh-hrc__ann-icon {
  width: 0.9rem;
  flex-shrink: 0;
  font-size: 0.5625rem;
  color: #f0632c;
  text-align: center;
}

.wmh-hrc__ann-icon--done {
  color: #1f9d75;
}

.wmh-hrc__skeleton {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--wmh-gray-100);
}

.wmh-hrc__leave-btn {
  display: block;
  text-align: center;
  margin-bottom: 0.4rem;
}

.wmh-hrc__leave-note {
  font-size: 0.5625rem;
  color: var(--wmh-gray-500);
  margin: 0;
}

.wmh-hrc__kudos-icons {
  display: flex;
  gap: 0.55rem;
}

.wmh-hrc__kudos-icons span {
  position: relative;
  font-size: 1.1rem;
}

.wmh-hrc__kudos-icons b {
  position: absolute;
  bottom: -3px;
  right: -6px;
  background: #3fb6b8;
  color: #fff;
  font-size: 0.4375rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0 3px;
}

/* ---------------------------------------------------------------------- */
/* Scene 5 — "Sunrise Hotel" HR Cloud Feed page                            */
/* ---------------------------------------------------------------------- */
/* Same sidebar/topbar chrome as Scenes 1/3/4 (reused per request — real
   extracted assets). Its own blue banner blends in an exact photo crop
   with nav tabs sitting directly on the banner (no separate white nav
   row), filter pills above the feed, an "Acknowledged" post, and a right
   rail of real (non-skeleton) announcement rows plus a Channels list —
   all audited from the reference screenshot. */

.wmh-hrc__banner--sunrise {
  height: 5.5rem;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  background-size: cover;
  background-position: right center;
  background-color: #2255e0;
}

.wmh-hrc__banner--sunrise::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1c4be0 0%, #2f65f0 55%, transparent 100%);
}

.wmh-hrc__sunrise-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.7rem 0.3rem;
}

.wmh-hrc__sunrise-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.wmh-hrc__sunrise-brand img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  object-fit: contain;
}

.wmh-hrc__banner--sunrise .wmh-hrc__banner-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  bottom: auto;
}

.wmh-hrc__navstrip--onbanner {
  position: relative;
  z-index: 1;
  background: transparent;
  border-bottom: none;
  padding: 0.2rem 0.7rem 0.4rem;
}

.wmh-hrc__navstrip--onbanner .wmh-hrc__tab {
  color: #ffffffcc;
}

.wmh-hrc__navstrip--onbanner .wmh-hrc__tab.is-active {
  color: #fff;
  border-bottom-color: #fff;
}

.wmh-hrc__filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.wmh-hrc__filter-pill {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  border: 1px solid var(--wmh-gray-300);
  color: var(--wmh-text);
  white-space: nowrap;
}

.wmh-hrc__filter-pill.is-active {
  background: #3fb6b8;
  border-color: #3fb6b8;
  color: #fff;
}

.wmh-hrc__filter-clear {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-gray-500);
  white-space: nowrap;
}

.wmh-hrc__ribbon--ack {
  background: #3fb6b8;
}

/* Real (non-skeleton) announcement rows */
.wmh-hrc__ann-real {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wmh-gray-100);
}

.wmh-hrc__ann-real:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wmh-hrc__ann-real-title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.35rem;
}

.wmh-hrc__ann-real-title svg {
  width: 11px;
  height: 11px;
  color: #1f9d75;
  flex-shrink: 0;
}

.wmh-hrc__ann-real-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wmh-hrc__ann-real-row img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.wmh-hrc__ann-real-row div {
  flex: 1;
  min-width: 0;
}

.wmh-hrc__ann-real-row strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--wmh-gray-500);
}

.wmh-hrc__ann-real-row span {
  font-size: 0.5625rem;
  color: var(--wmh-gray-500);
}

.wmh-hrc__ann-real-row svg {
  width: 10px;
  height: 10px;
  color: var(--wmh-gray-300);
  flex-shrink: 0;
}

.wmh-hrc__channel-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.wmh-hrc__channel-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
}

.wmh-hrc__channel-row span:last-child {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--wmh-text);
}

/* ---------------------------------------------------------------------- */
/* Photography panel                                                       */
/* ---------------------------------------------------------------------- */

/* Transparent by default (every scene's photo is an opaque cover-fit
   image, so this is only ever a fallback); Scene 2 keeps its navy
   fallback via .wmh-panel--card, same as the product panel above. */
.wmh-panel--photo.wmh-panel--card {
  background: var(--wmh-navy-deep);
}

.wmh-photo {
  /* Same slide-in-covers-the-previous mechanic as .wmh-mock — the
     reference's photography panel changes in lockstep with the product
     panel, not on its own crossfade. */
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  z-index: 1;
}

.wmh-photo.is-active {
  transform: translateX(0);
  z-index: 2;
}

.wmh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------- */
/* Screen-reader-only live region + reduced motion                        */
/* ---------------------------------------------------------------------- */

.wmh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wmh-mock,
  .wmh-photo {
    transition-duration: 1ms !important;
    transform: none !important;
  }
  .wmh-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .wmh-mock.is-active .wmh-reveal {
    animation: none !important;
  }
}