/* Shift menu feature pages (recruitment-and-retention.html, automate-hr-admin.html, staff-management.html, forms.html, hr-compliance.html). Converted once on 2026-11-05 from the design exports sense-shift-{recruitment-and-retention,automate-hr-admin,staff-management,forms,hr-compliance}-share.html (the Recruitment and retention export's tokens, base, sections, agents, product, minis, feature and shift, with automate.css from the Automate HR admin export and industry.css from the HR compliance export; nav.css is left to nav-footer-new.css), scoped to main.shift-hr and trimmed to the rules these pages can match. Each page's own body classes from its export (rnr-page, au-page, sm-page, fm-page, hc-page and their companions) are on its <main>, and the rules that lead with them are scoped to main.shift-hr.<class>. Maintained by hand from here on. */

/* ===== PAGE-LEVEL RULES (html, body, the shared header): START: every other rule is scoped to main.shift-hr */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #F4F4F7; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { scroll-padding-top: 96px; }   /* focus and #anchor scrolling stop clear of the fixed overlay header (about 80 px tall) */
/* Light hero (body.hero-light): the overlay header starts with dark text and frosts on scroll as usual (as hr-feature.css). */
body.hero-light .nav.nav--overlay:not(.is-scrolled) { color: var(--text); }
body.hero-light .nav.nav--overlay:not(.is-scrolled) .logo { color: var(--brand); }
body.hero-light .nav.nav--overlay:not(.is-scrolled) .nav-link:hover,
body.hero-light .nav.nav--overlay:not(.is-scrolled) .nav-item.is-open > .nav-link { background: rgba(11, 10, 20, .06); }

/* ===== PAGE-LEVEL RULES: END */

/* css/tokens.css */
/* ==========================================================================
   Sense HR website — design tokens
   Layout/motion language recreated from the Zyntexa reference; colour + type
   are Sense's own (Satoshi display, Inter body, brand #634AFC).
   ========================================================================== */
.shift-hr {
  /* Brand */
  --brand: #634AFC;
  --brand-hover: #4931DC;
  --brand-soft: #B8ADFF;
  --brand-10: #EFF1FF;
  --brand-20: #E5E7FF;
  --brand-glow: rgba(99, 74, 252, .35);

  /* Primary button — the ONE definition used by every primary CTA (nav, mobile menu, sections) */
  --btn-primary-bg: #634AFC;
  --btn-primary-bg-hover: #4931DC;
  --btn-primary-fg: #FFFFFF;          /* 5.4:1 on #634AFC — passes WCAG AA */
  --btn-radius: 10px;

  /* Neutrals */
  --ink: #0B0A14;                     /* dark panels */
  --ink-2: #15132A;
  --ink-3: #1C1A35;
  --page: #F4F4F7;                    /* off-white page, like the reference */
  --card: #FFFFFF;
  --text: #0B0A14;
  --text-2: #54536B;
  --text-3: #8B899E;
  --line: rgba(11, 10, 20, .08);
  --line-strong: rgba(11, 10, 20, .14);
  --line-dash: rgba(11, 10, 20, .18);
  --text-inv: #FFFFFF;
  --text-inv-2: rgba(255, 255, 255, .72);
  --text-inv-3: rgba(255, 255, 255, .5);
  --line-inv: rgba(255, 255, 255, .14);
  --live: #22B573;
  --live-bg: #E4FFE9;

  /* Type */
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: clamp(40px, 5.2vw, 68px);
  --fs-h2: clamp(30px, 3.4vw, 46px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-h4: 19px;
  --fs-lede: clamp(16px, 1.25vw, 18px);
  --fs-body: 16px;
  --fs-small: 14px;
  --ls-display: -0.035em;

  /* Layout */
  --container: 1320px;
  --container-wide: 1470px;
  --gutter: 24px;
  --frame-inset: 20px;
  --section-y: clamp(80px, 9vw, 128px);

  /* Radii (reference: 100 pill · 40 panel · 30/24/20 card · 15 dropdown · 10 small) */
  --r-panel: 40px;
  --r-card-lg: 30px;
  --r-card: 24px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Shadows — soft, wide blurs */
  --shadow-sm: 0 1px 2px rgba(11, 10, 20, .06), 0 0 0 1px rgba(11, 10, 20, .05);
  --shadow-md: 0 24px 56px -12px rgba(11, 10, 20, .15);
  --shadow-lg: 0 57px 70px -20px rgba(11, 10, 20, .12), 0 0 0 1px rgba(11, 10, 20, .04);
  --shadow-float: 0 18px 40px -8px rgba(20, 12, 70, .28), 0 0 0 1px rgba(11, 10, 20, .05);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-reveal: .8s;
  --reveal-y: 40px;
}

@media (max-width: 767px) {
  .shift-hr {
    --gutter: 16px;
    --frame-inset: 8px;
    --r-panel: 24px;
    --r-card-lg: 22px;
    --r-card: 20px;
  }
}

/* css/base.css */
/* ==========================================================================
   Base: reset, type, layout primitives, buttons, reveal + odometer motion
   ========================================================================== */
.shift-hr *, .shift-hr *::before, .shift-hr *::after { box-sizing: border-box; }
.shift-hr {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 var(--fs-body)/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.shift-hr img, .shift-hr picture, .shift-hr svg { display: block; max-width: 100%; }
.shift-hr img { height: auto; }
.shift-hr a { color: inherit; text-decoration: none; }
.shift-hr button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.shift-hr ul { list-style: none; margin: 0; padding: 0; }
.shift-hr p { margin: 0; }
.shift-hr h1, .shift-hr h2, .shift-hr h3, .shift-hr h4, .shift-hr h5 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-display); color: inherit; }
.shift-hr h1 { font-size: var(--fs-h1); line-height: 1.06; }
.shift-hr h2 { font-size: var(--fs-h2); line-height: 1.12; }
.shift-hr h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.025em; }
.shift-hr h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }
.shift-hr h5 { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
.shift-hr b, .shift-hr strong { font-weight: 600; }

.shift-hr :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.shift-hr .on-dark :focus-visible { outline-color: var(--brand-soft); }

.shift-hr .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.shift-hr .section { padding-block: var(--section-y); }

/* Eyebrow pill */
.shift-hr .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font-body); letter-spacing: .01em;
  padding: 8px 14px; border-radius: 100px;
  background: var(--card); color: var(--brand-hover);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.shift-hr .eyebrow.on-dark { background: rgba(255, 255, 255, .08); color: #DCD6FF; box-shadow: inset 0 0 0 1px var(--line-inv); }

.shift-hr .lede { font-size: var(--fs-lede); color: var(--text-2); line-height: 1.62; }

/* ---------- Buttons ---------- */
.shift-hr .btn {
  --btn-h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 20px;
  border-radius: var(--btn-radius);
  font: 500 15px/1 var(--font-body); white-space: nowrap;
  transition: transform .2s var(--ease-out), background-color .2s, color .2s, box-shadow .2s, border-color .2s;
}
.shift-hr .btn:hover { transform: scale(.97); }            /* standing rule: every button scales to .97 */
.shift-hr .btn:active { transform: scale(.95); }
.shift-hr .btn-lg { --btn-h: 52px; padding: 0 26px; font-size: 16px; }
.shift-hr .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: 0 8px 24px -8px rgba(99, 74, 252, .6), inset 0 1px 0 rgba(255, 255, 255, .18); }
.shift-hr .btn-primary:hover { background: var(--btn-primary-bg-hover); }
.shift-hr .btn-secondary { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.shift-hr .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-hover); }
.shift-hr .btn-secondary-dark { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
.shift-hr .btn-secondary-dark:hover { background: rgba(255, 255, 255, .12); }

.shift-hr .cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Icon tile ---------- */
.shift-hr .icon-tile {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(99, 74, 252, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.shift-hr .icon-tile svg { width: 20px; height: 20px; }

/* ---------- Scroll reveal (fade-up, staggered by JS via --i) ---------- */
.js .shift-hr .reveal { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .shift-hr .reveal.in { opacity: 1; transform: none; }

/* ---------- Reduced motion: everything final, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  .shift-hr *, .shift-hr *::before, .shift-hr *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .shift-hr .reveal { opacity: 1 !important; transform: none !important; }
  .shift-hr .btn:hover, .shift-hr .btn:active { transform: none; }
}

/* css/sections.css */
/* ==========================================================================
   Sections (in page order)
   ========================================================================== */

/* ---------- shared heads ---------- */
.shift-hr .center-head { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.shift-hr .center-head p { color: var(--text-2); font-size: var(--fs-lede); max-width: 640px; margin-top: 20px; }

/* ==========================================================================
   01 HERO — dark inset frame, centred copy, dashboard + floating cards
   ========================================================================== */

.js .shift-hr .hero-anim { opacity: 0; transform: translateY(16px); animation: heroIn .9s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ==========================================================================
   05 AI AGENTS — integration diagram (AMI hub, curved connectors, nodes on lines)
   ========================================================================== */
.shift-hr #ai-agents { overflow: hidden; }

/* ==========================================================================
   06 TIME & ATTENDANCE — home-three "We simplify…" layout:
   head + icon list with a progress bar on the left, tall gradient card on the right
   (stacked card of devices on top, product screenshot below). DOM keeps live order.
   ========================================================================== */
.shift-hr .ta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head devices" "steps shot" "cta shot"; grid-template-rows: auto auto 1fr; column-gap: 88px; }
.shift-hr .ta-card-bg { grid-column: 2; grid-row: 1 / 4; border-radius: var(--r-card-lg); background: radial-gradient(70% 55% at 90% 95%, #fff 0%, transparent 70%), linear-gradient(155deg, #5238E8 0%, #8B78FF 42%, #D9D2FF 78%, #F3F0FF 100%); }
.shift-hr .method { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 10px; text-align: center; font: 500 14px/1.3 var(--font-body); color: var(--text); }
.shift-hr .method + .method { border-left: 1px solid var(--line); }
.shift-hr .ta-steps { grid-area: steps; position: relative; margin-top: 56px; padding-left: 64px; }
.shift-hr .ta-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 30px; background: rgba(99, 74, 252, .1); overflow: hidden; }
.shift-hr .ta-bar-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% / 3); border-radius: 30px; background: var(--brand); transform: translateY(calc(var(--ta-i, 0) * 100%)); transition: transform .6s var(--ease-out); }
.shift-hr .ta-list { display: flex; flex-direction: column; }
.shift-hr .ta-list li { display: flex; align-items: center; gap: 20px; padding: 22px 0; font: 500 clamp(19px, 1.6vw, 22px)/1.35 var(--font-display); letter-spacing: -0.015em; color: var(--text-2); transition: color .4s; }
.shift-hr .ta-list li:first-child { padding-top: 0; }
.shift-hr .ta-list li.is-active { color: var(--text); }
.shift-hr .ta-ic { flex-shrink: 0; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: #EFF1FF; color: #634AFC; }
.shift-hr .ta-ic svg { width: 24px; height: 24px; }
.shift-hr .ta-shot { grid-area: shot; position: relative; margin: 32px 44px 44px; aspect-ratio: 1 / .86; align-self: start; }
.shift-hr .ta-frame { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.shift-hr .ta-frame.is-active { opacity: 1; transform: none; }
.shift-hr .ta-frame:nth-child(1) img { max-width: 80%; max-height: 80%; }
.shift-hr .ta-frame:nth-child(2) img { box-shadow: none; border-radius: 0; }
.shift-hr .ta-frame img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-card); box-shadow: 0 30px 60px -28px rgba(33, 18, 140, .55); }
@media (max-width: 900px) {
  .shift-hr .ta { grid-template-columns: 1fr; grid-template-areas: "head" "steps" "cta" "devices" "shot"; grid-template-rows: none; }
  .shift-hr .ta-card-bg { grid-column: 1; grid-row: 4 / 6; margin-top: 40px; }
  .shift-hr .ta-steps { margin-top: 40px; padding-left: 40px; }
  .shift-hr .method { font-size: 12.5px; padding: 2px 6px; }
  .shift-hr .ta-shot { margin: 20px 16px 16px; }
}

/* ==========================================================================
   13 FOOTER — full-bleed black (oma-melon layout): brand + copyright left,
   link columns right, oversized fading wordmark at the bottom
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .shift-hr .hero-anim { opacity: 1; transform: none; }
}

/* css/agents.css */
/* ==========================================================================
   Agent pages — AMI hub page (sense-agent-ami.html)
   Builds on tokens/base/nav/sections from the home page; only page-specific
   patterns live here.
   ========================================================================== */

/* toast restyled as the agent pages' floating purple prompt card */
@keyframes qzFloat { from { translate: 0 -14px; rotate: -1.5deg; } to { translate: 0 22px; rotate: 1deg; } }

/* ---------- 05 MEET AMI IN PERSON — pay-co "Network of passionate users" layout ----------
   striped lavender card · centred copy · product shot cropped by the card's bottom edge
   inside the home page's glass frame · form bar under the copy */
.shift-hr .ami-meet-wrap { position: relative; }
.shift-hr .ami-meet { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); padding: clamp(56px, 7vw, 96px) var(--gutter) 0;
  background: linear-gradient(180deg, #F7F6FF 0%, #EFEDFF 55%, #E4E0FF 100%); box-shadow: inset 0 0 0 1px rgba(99, 74, 252, .08); text-align: center; }
.shift-hr .ami-meet::before { /* vertical column stripes, fading in towards the bottom (reference texture, in Sense purple) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(99, 74, 252, .09) 0 72px, transparent 72px 89px) center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 95%); mask-image: linear-gradient(180deg, transparent 5%, #000 95%); }
.shift-hr .ami-meet::after { /* purple haze rising from the lower corners */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(38% 60% at 0% 100%, rgba(99, 74, 252, .38), transparent 70%), radial-gradient(38% 60% at 100% 100%, rgba(99, 74, 252, .38), transparent 70%); }
.shift-hr .ami-meet-copy { max-width: 720px; margin: 0 auto; }
.shift-hr .ami-meet-copy h2 { color: var(--text); }
.shift-hr .ami-meet-copy p { margin: 18px auto 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 620px; }
.shift-hr .ami-meet-shot { position: relative; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; height: clamp(240px, 33vw, 470px); overflow: hidden; }
/* same glass outline as the home page's dashboard frame (.hero-window), tuned for a light background */
.shift-hr .ami-meet-window { padding: 8px 8px 0; border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .28));
  box-shadow: 0 40px 100px -30px rgba(33, 18, 140, .35), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(99, 74, 252, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.shift-hr .ami-meet-window img { width: 100%; border-radius: 19px 19px 0 0; }

/* form bar: Name · Email · button, directly under the copy */
@media (max-width: 767px) {
  .shift-hr .ami-meet-shot { height: 220px; }
}

/* ---------- 06 FAQ — single rounded container with square toggles ---------- */
.shift-hr .ami-faq { max-width: 1070px; margin: 56px auto 0; border-radius: var(--r-card-lg); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.shift-hr .ami-faq-item + .ami-faq-item { border-top: 1px solid var(--line); }
.shift-hr .ami-faq-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 40px; cursor: pointer; font: 500 clamp(17px, 1.4vw, 20px)/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--text); transition: background-color .2s; }
.shift-hr .ami-faq-q::-webkit-details-marker { display: none; }
.shift-hr .ami-faq-q:hover { background: var(--page); }
.shift-hr .ami-faq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: 12px; }
.shift-hr .ami-faq-ic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background-color .3s; }
.shift-hr .ami-faq-ic svg { width: 14px; height: 14px; }
.shift-hr .ami-faq-ic svg { transition: transform .35s var(--ease-out); }
.shift-hr .ami-faq-item[open] .ami-faq-ic { background: var(--brand); }
.shift-hr .ami-faq-item[open] .ami-faq-ic svg { transform: rotate(45deg); }
.shift-hr .ami-faq-a { padding: 0 104px 26px 40px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
@supports (interpolate-size: allow-keywords) {
  .shift-hr .ami-faq { interpolate-size: allow-keywords; }
  .shift-hr .ami-faq-item::details-content { height: 0; overflow: hidden; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
  .shift-hr .ami-faq-item[open]::details-content { height: auto; }
}
@media (max-width: 767px) { .shift-hr .ami-faq { margin-top: 40px; } .shift-hr .ami-faq-q { padding: 20px; } .shift-hr .ami-faq-a { padding: 0 20px 20px; font-size: 15px; } }

/* css/product.css */
/* ==========================================================================
   HR product pages (sense-hr-*.html). HR overview first: tools/product/gen_hr_overview.py
   Builds on the home hero (.hero), stats strip (.stats), AMI Meet card + FAQ (agents.css).
   ========================================================================== */

/* floating purple card, as the AMI page header chip (agents.css .ami-chip + qzFloat) */
.shift-hr .pd-play { position: absolute; left: 50%; top: 42%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 8px; border-radius: 100px;
  background: rgba(11, 10, 20, .72); color: #fff; font: 500 15px/1 var(--font-body); box-shadow: 0 20px 40px -12px rgba(11, 10, 20, .5), inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s var(--ease-out), background-color .25s; }
.shift-hr .pd-play:hover { transform: translate(-50%, -50%) scale(.97); background: rgba(11, 10, 20, .85); }
.shift-hr .pd-play-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); box-shadow: 0 0 0 6px rgba(99, 74, 252, .25); animation: pdRing 2s ease-out infinite; }
.shift-hr .pd-play-ic svg { width: 16px; height: 16px; margin-left: 2px; }
@keyframes pdRing { 0% { box-shadow: 0 0 0 0 rgba(123, 92, 255, .6); } 100% { box-shadow: 0 0 0 14px rgba(123, 92, 255, 0); } }
@media (max-width: 767px) {
  .shift-hr .pd-play { height: 44px; padding: 0 16px 0 6px; font-size: 13px; gap: 8px; top: 50%; }
  .shift-hr .pd-play-ic { width: 32px; height: 32px; }
}

/* ---------- 04 CHAPTERS — shared head + module label + "Learn more" ---------- */
.shift-hr .pd-more { display: inline-block; margin-top: 24px; font: 500 15px/1.4 var(--font-body); color: var(--brand-hover); transition: color .2s; }
.shift-hr .pd-more svg { display: inline-block; width: 16px; height: 16px; margin-left: 5px; vertical-align: -3px; transition: transform .25s var(--ease-out); }   /* arrow stays after the last word when the label wraps */
.shift-hr .pd-more:hover { color: var(--brand); }
.shift-hr .pd-more:hover svg { transform: translate(2px, -2px); }

/* 04a stacking panels — pay-co "Digital wallets → Next-gen technology": panels stick below the nav and pile up;
   the one underneath shrinks + dims as the next slides over it (js/product.js sets --p per card) */
.shift-hr .pd-stack { position: relative; margin-top: clamp(48px, 5vw, 72px); }
.shift-hr .pd-stack-card { --p: 0; position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 36px; }
.shift-hr .pd-stack-card:last-child { margin-bottom: 0; }
.shift-hr .pd-stack-inner { position: relative; overflow: hidden; isolation: isolate; min-height: 560px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4vw, 60px); border-radius: var(--r-panel); transform-origin: 50% 0; transform: scale(calc(1 - var(--p) * .05)); box-shadow: 0 -20px 60px -30px rgba(11, 10, 20, .35); }
.shift-hr .pd-stack-inner::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #0B0A14; opacity: calc(var(--p) * .28); border-radius: inherit; }   /* dims as it's covered */
.shift-hr .pd-stack-copy { position: relative; z-index: 1; max-width: 500px; }
.shift-hr .pd-stack-copy h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.shift-hr .pd-stack-copy p { margin-top: 18px; font-size: 17px; line-height: 1.65; }
.shift-hr .pd-stack-visual { position: relative; z-index: 1; }
.shift-hr .pd-stack-visual .pd-frame { aspect-ratio: 1.2; }
.shift-hr .pd-stack-card .pd-stack-visual .pd-frame:has(> .mi) { background: #0A0916 url("/assets/images/pages/homepage/ta-card-bg.webp") center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }   /* Cards-image-bg.png */
.shift-hr .pd-stack-card .pd-stack-visual .pd-frame:has(> .mi)::before { display: none; }
/* themes */
.shift-hr .pd-stack-card.is-purple .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(160deg, #7A63FF 0%, #634AFC 45%, #4A31E6 100%); color: #fff; }
.shift-hr .pd-stack-card.is-dark .pd-stack-inner { background: radial-gradient(70% 80% at 100% 0%, rgba(99, 74, 252, .38), transparent 60%), #0B0A14; color: #fff; }
.shift-hr .pd-stack-card.is-light .pd-stack-inner { background: #fff; color: var(--text); box-shadow: var(--shadow-sm), 0 -20px 60px -30px rgba(11, 10, 20, .25); }
.shift-hr .pd-stack-card.is-purple p, .shift-hr .pd-stack-card.is-dark p { color: rgba(255, 255, 255, .78); }
.shift-hr .pd-stack-card.is-light p { color: var(--text-2); }

.shift-hr .pd-stack-card.is-purple .pd-bullets li, .shift-hr .pd-stack-card.is-dark .pd-bullets li { color: #fff; }
.shift-hr .pd-stack-card.is-purple .pd-bullets svg { background: rgba(255, 255, 255, .18); color: #fff; }
.shift-hr .pd-stack-card.is-dark .pd-bullets svg { background: rgba(123, 92, 255, .22); color: var(--brand-soft); }
.shift-hr .pd-stack-card.is-purple .pd-more, .shift-hr .pd-stack-card.is-dark .pd-more { color: #fff; }
.shift-hr .pd-stack-card.is-purple .pd-frame { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.shift-hr .pd-stack-card.is-purple .pd-frame::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 56px, transparent 56px 70px); }
.shift-hr .pd-stack-card.is-dark .pd-frame { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.shift-hr .pd-stack-card.is-dark .pd-frame::before { background: repeating-linear-gradient(90deg, rgba(184, 173, 255, .07) 0 56px, transparent 56px 70px); }
@media (max-width: 900px) {   /* panels taller than the screen can't stick: plain stacked cards */
  .shift-hr .pd-stack-card { position: relative; top: auto; margin-bottom: 20px; }
  .shift-hr .pd-stack-inner { grid-template-columns: 1fr; min-height: 0; transform: none; }
  .shift-hr .pd-stack-inner::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shift-hr .pd-stack-inner { transform: none; } .shift-hr .pd-stack-inner::after { display: none; } }

/* 04b time & performance — home .ta layout; the active step opens its paragraph + link */
.shift-hr .pd-ta { grid-template-areas: "head shot" "steps shot"; grid-template-rows: auto 1fr; }   /* no device strip: the visual spans the whole right column */
.shift-hr .pd-ta .ta-card-bg { grid-row: 1 / 3; background: #0A0916 url("/assets/images/pages/homepage/ta-card-bg.webp") center / cover no-repeat; }
.shift-hr .pd-ta .ta-shot { align-self: stretch; justify-self: stretch; margin: 36px; aspect-ratio: auto; display: grid; place-items: center; }
.shift-hr .pd-ta .ta-list li { align-items: flex-start; }
.shift-hr .pd-ta .ta-txt { display: flex; flex-direction: column; padding-top: 14px; }
.shift-hr .pd-ta-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.shift-hr .pd-ta-more-in { overflow: hidden; min-height: 0; }
.shift-hr .pd-ta .ta-list li.is-active .pd-ta-more { grid-template-rows: 1fr; }
.shift-hr .pd-ta-p { display: block; margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); letter-spacing: 0; color: var(--text-2); }
.shift-hr .pd-ta .pd-more { margin-top: 12px; font-size: 14.5px; }
.shift-hr .pd-ta .ta-list li { cursor: default; }
.shift-hr .pd-ta .ta-bar-fill { top: 0; height: var(--ta-h, calc(100% / 3)); transform: translateY(var(--ta-top, 0px)); transition: transform .5s var(--ease-out), height .5s var(--ease-out); }
.shift-hr .pd-ta .method { transition: opacity .35s; opacity: .55; }
.shift-hr .pd-ta .method.is-active { opacity: 1; }
.shift-hr .pd-ta-frame { display: grid; place-items: center; }
.shift-hr .pd-ta-frame picture { display: contents; }
.shift-hr .pd-ta .ta-frame:nth-child(1) img { max-width: 100%; max-height: 100%; }
.shift-hr .pd-ta .ta-frame:nth-child(2) img { box-shadow: 0 30px 60px -28px rgba(33, 18, 140, .55); border-radius: var(--r-card); }

/* 04a spotlight rows — text + bullets | framed visual, alternating */
.shift-hr .pd-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.shift-hr .pd-bullets li { display: flex; align-items: center; gap: 12px; font: 500 15px/1.3 var(--font-body); color: var(--text); }
.shift-hr .pd-bullets svg { width: 22px; height: 22px; flex-shrink: 0; padding: 4px; border-radius: 7px; background: var(--brand-10); color: var(--brand); }
.shift-hr .pd-frame { position: relative; aspect-ratio: 1.18; padding: clamp(18px, 2.6vw, 36px); border-radius: var(--r-card-lg); overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #EEEBFF 0%, #E4DFFF 100%); box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.shift-hr .pd-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(99, 74, 252, .07) 0 56px, transparent 56px 70px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.shift-hr .pd-frame picture { display: block; width: 100%; height: 100%; }
.shift-hr .pd-frame img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(49, 30, 160, .18)); }

/* ---------- 05 CTA — two buttons in the AMI Meet card ---------- */
.shift-hr .pd-meet-cta { justify-content: center; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .shift-hr .pd-play-ic { animation: none; }
}

/* time & performance, stacked (mobile/tablet): visual below the steps, on the card background */
@media (max-width: 900px) {
  .shift-hr .pd-ta { grid-template-areas: "head" "steps" "shot"; grid-template-rows: none; }
  .shift-hr .pd-ta .ta-card-bg { grid-column: 1; grid-row: 3; margin-top: 40px; }
  .shift-hr .pd-ta .ta-shot { grid-row: 3; margin: 64px 20px 24px; }
}

/* css/minis.css */
/* ==========================================================================
   Animated product mini-UIs (tools/product/minis.py · js/minis.js), rebuilt from the exported designs.
   States are toggled by classes; with reduced motion / no JS they show the designed end state.
   ========================================================================== */
.shift-hr .mi { position: relative; font-family: var(--font-body); color: #2C2853; text-align: left; background: #fff; box-shadow: 0 40px 70px -30px rgba(33, 18, 140, .45), 0 0 0 1px rgba(11, 10, 20, .04); }
.shift-hr .mi svg { display: block; }
.shift-hr .pd-frame .mi { margin: auto; }
.shift-hr .pd-frame .mi img { filter: none; }   /* not the frame's product-screenshot image rules */

/* cursor (moved by js/minis.js) */
.shift-hr .mi-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none; opacity: 0;
  transform: translate(var(--cx, 60%), var(--cy, 110%)); transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .3s; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25)); }
.shift-hr .mi.is-cursor .mi-cursor { opacity: 1; }
.shift-hr .mi-cursor.is-press svg { transform: scale(.82); transition: transform .12s; }
.shift-hr .mi-cursor svg { width: 22px; height: 22px; transition: transform .2s; transform-origin: 20% 15%; }

/* toast */
.shift-hr .mi-toast { position: absolute; left: 50%; bottom: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 12px; background: #fff; white-space: nowrap;
  font: 500 12.5px/1 var(--font-body); color: var(--text); box-shadow: 0 16px 34px -12px rgba(33, 18, 140, .45), 0 0 0 1px rgba(11, 10, 20, .05);
  opacity: 0; transform: translate(-50%, 10px) scale(.96); transition: opacity .35s, transform .45s var(--ease-out); }
.shift-hr .mi-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.shift-hr .mi-toast-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E5FDF0; color: #007C66; }
.shift-hr .mi-toast-ic svg { width: 12px; height: 12px; }

/* ---------- Employee records (230×338 export, shown ~1.3×) ---------- */
.shift-hr .mi-er { width: min(300px, 100%); padding: 20px 20px 10px; border-radius: 16px; }
.shift-hr .mi-er-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 14px; }
.shift-hr .mi-er-status { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: #E5FDF0; color: #007C66; font: 500 12px/1 var(--font-body); }
.shift-hr .mi-er-status i { width: 6px; height: 6px; border-radius: 50%; background: #1BCAA7; box-shadow: 0 0 0 0 rgba(27, 202, 167, .6); animation: miPulse 1.8s ease-out infinite; }
@keyframes miPulse { to { box-shadow: 0 0 0 7px rgba(27, 202, 167, 0); } }
.shift-hr .mi-er-av { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #D7F3FD; margin-bottom: 8px; }
.shift-hr .mi-er-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-er-name { font: 500 19px/1.2 var(--font-body); color: #2C2853; }
.shift-hr .mi-er-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.35; color: #2C2853; }
.shift-hr .mi-er-meta svg { width: 14px; height: 14px; color: #A3A2B1; }
.shift-hr .mi-er-rows { list-style: none; margin: 0; padding: 0; }
.shift-hr .mi-er-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid #F5F5F5; font-size: 14px; transition: background-color .35s; border-radius: 8px; }
.shift-hr .mi-er-k { font-weight: 600; color: #46516A; }
.shift-hr .mi-er-v { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #5F6C87; }
.shift-hr .mi-er-val { display: inline-block; transition: transform .35s var(--ease-out), opacity .35s; }
.shift-hr .mi-er-val.is-flip { transform: translateY(-8px); opacity: 0; }
.shift-hr .mi-er-row.is-hot { background: #F8F9FF; box-shadow: inset 0 0 0 1px rgba(99, 74, 252, .18); }
.shift-hr .mi-er-upd { position: absolute; right: calc(100% + 8px); top: 50%; margin-top: -8.5px; white-space: nowrap; padding: 3px 6px; border-radius: 6px; background: #E5FDF0; color: #007C66; font: 500 10.5px/1 var(--font-body); opacity: 0; transform: scale(.8) translateX(6px); transition: opacity .3s, transform .3s var(--ease-out); }
.shift-hr .mi-er-row.is-updated .mi-er-upd { opacity: 1; transform: none; }
.shift-hr .mi-er-rtw .mi-tick { width: 14px; height: 14px; color: #007C66; }
.shift-hr .mi-er-rtw .mi-tick path { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out); }
.shift-hr .mi-er.is-pre .mi-er-rtw .mi-tick path { stroke-dashoffset: 16; }
.shift-hr .mi-er.is-pre .mi-er-row { opacity: 0; transform: translateY(8px); }
.shift-hr .mi-er .mi-er-row { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), background-color .35s; }

/* ---------- AMI assistant (291×329 export) ---------- */
.shift-hr .mi-ami { width: min(390px, 100%); border-radius: 18px; overflow: hidden; }
.shift-hr .mi-ami-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #EFEFEF; }
.shift-hr .mi-ami-head b { font: 600 17px/1 var(--font-body); color: #393940; }
.shift-hr .mi .mi-ami-orb { width: 34px; height: auto; flex-shrink: 0; margin: -4px -2px -8px; }   /* assets/images/Chatbot.png (has its own soft shadow) */
.shift-hr .mi-ami-x { margin-left: auto; color: #B0B0B0; }
.shift-hr .mi-ami-x svg { width: 16px; height: 16px; }
.shift-hr .mi-ami-body { display: flex; flex-direction: column; gap: 14px; min-height: 330px; margin: 10px; padding: 14px; border-radius: 14px; background: #FBFBFD; box-shadow: inset 0 0 0 1px #ECEEF3; }
.shift-hr .mi-ami-q { display: flex; align-items: center; gap: 10px; }
.shift-hr .mi .mi-ami-q p { flex: 1; min-height: 3.1em; padding: 10px 12px; border-radius: 12px; background: #F2F4FA; box-shadow: inset 0 0 0 1px #E9EDF4; font-size: 13.5px; line-height: 1.45; color: #3F4147; }
.shift-hr .mi-ami-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.shift-hr .mi-ami-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi .mi-ami-a p { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E4E7F0; font-size: 13.5px; line-height: 1.55; color: #3F4147; min-height: 7.7em; }
.shift-hr .mi-ami-dots { display: none; gap: 5px; padding: 12px 14px; align-self: flex-start; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E4E7F0; }
.shift-hr .mi-ami-dots i { width: 6px; height: 6px; border-radius: 50%; background: #A3A2B1; animation: miDot 1s ease-in-out infinite; }
.shift-hr .mi-ami-dots i:nth-child(2) { animation-delay: .15s; } .shift-hr .mi-ami-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes miDot { 50% { transform: translateY(-4px); background: #894AFF; } }
.shift-hr .mi-ami.is-thinking .mi-ami-dots { display: flex; }
.shift-hr .mi-ami.is-thinking .mi-ami-a, .shift-hr .mi-ami.is-asking .mi-ami-a { display: none; }
.shift-hr .mi-ami-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px; border-radius: 10px; background: #F2F4FA; box-shadow: inset 0 0 0 1px #E4E7F0;
  font: 500 13.5px/1 var(--font-body); color: #393940; transition: background-color .3s, color .3s, box-shadow .3s, transform .15s, opacity .4s; }
.shift-hr .mi-ami-btn-ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: #393940; color: #fff; transition: background-color .3s; }
.shift-hr .mi-ami-btn-ic svg { width: 12px; height: 12px; }
.shift-hr .mi-ami.is-asking .mi-ami-btn, .shift-hr .mi-ami.is-thinking .mi-ami-btn, .shift-hr .mi-ami.is-streaming .mi-ami-btn { opacity: 0; }
.shift-hr .mi-ami-btn.is-hover { background: #EFD6FF; box-shadow: inset 0 0 0 1px #DBCBFF; }
.shift-hr .mi-ami-btn.is-press { transform: scale(.96); }
.shift-hr .mi-ami-btn.is-done { background: #E5FDF0; color: #007C66; box-shadow: inset 0 0 0 1px #C8F2DC; }
.shift-hr .mi-ami-btn.is-done .mi-ami-btn-ic { background: #1BCAA7; }
.shift-hr .mi-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #894AFF; animation: miBlink .8s steps(1) infinite; }
@keyframes miBlink { 50% { opacity: 0; } }

@media (max-width: 600px) {
  .shift-hr .mi-ami-body { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .shift-hr .mi-er-status i { animation: none; }
}

/* frames holding a mini-UI size to it (the fixed aspect ratio would crop the taller widgets) */
.shift-hr .pd-frame:has(> .mi) { aspect-ratio: auto; padding: clamp(24px, 3vw, 40px); }

/* translucent glass border on the card animations — same treatment as the hero product window */
.shift-hr .pd-stack-visual .mi { border: 8px solid rgba(255, 255, 255, .16); background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(0, 0, 0, .6); }
.shift-hr .pd-stack-visual .mi-er { border-radius: 24px; }
.shift-hr .pd-stack-visual .mi-ami { border-radius: 26px; }
/* transparent stages (.mi-b: a card floating in a see-through mini) — the glass border moves onto the card so it hugs the asset, not the frame */
.shift-hr .pd-stack-visual .mi-b { border: 0; overflow: visible; }   /* visible: the card's shadow isn't cropped by the stage */

/* frames that hold the new minis */
.shift-hr .pd-ta-frame .mi { margin: auto; }
.shift-hr .pd-ta .mi { border: 8px solid rgba(255, 255, 255, .16); background-clip: padding-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(0, 0, 0, .6); }

/* inside the time & performance frames: undo the home .ta-frame screenshot rules for the minis' own images,
   and stack the frames in one grid cell so the area sizes to the tallest mini (no fixed ratio cropping) */
.shift-hr .pd-ta .ta-shot { display: grid; aspect-ratio: auto; }
.shift-hr .pd-ta .pd-ta-frame { position: relative; inset: auto; grid-area: 1 / 1; }
.shift-hr .pd-ta .ta-frame .mi img { position: static; inset: auto; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; }

/* time & performance visuals a touch bigger on desktop */
@media (min-width: 1101px) { .shift-hr .pd-ta .mi { zoom: 1.14; } }

/* ---------- Home T&A: timesheet verification (scan timesheets.svg 453×250) ---------- */
.shift-hr .mi-vf { width: min(440px, 100%); padding: 0 0 14px; border-radius: 16px; background: #F4F3FF; }
.shift-hr .mi-vf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px 16px 0 0; background: #EEEDFD; }
.shift-hr .mi-vf-head b { font: 600 14px/1 var(--font-body); color: #4931DC; white-space: nowrap; }
.shift-hr .mi-vf-key { display: flex; gap: 10px; font-size: 10.5px; color: #495066; white-space: nowrap; }
.shift-hr .mi-vf-key span { display: inline-flex; align-items: center; gap: 4px; }
.shift-hr .mi-vf-key i { width: 8px; height: 8px; border-radius: 2px; }
.shift-hr .z-w { background: #3CC98A; } .shift-hr .z-b { background: #FFAA4C; } .shift-hr .z-o { background: #FF6B6B; }
.shift-hr .mi-vf-card { margin: 14px 14px 0; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #EEF0F6; transition: background-color .4s, box-shadow .4s; }
.shift-hr .mi-vf-card.is-flag.is-lit { background: #FFF5F5; box-shadow: 0 0 0 1px #FBC6C6; }
.shift-hr .mi-vf-top { display: flex; align-items: center; gap: 12px; }
.shift-hr .mi-vf-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.shift-hr .mi-vf-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-vf-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shift-hr .mi-vf-txt b { font: 500 14.5px/1.2 var(--font-body); color: #3F4147; }
.shift-hr .mi-vf-txt span { font-size: 11.5px; line-height: 1.35; color: #6C7597; }
.shift-hr .mi-vf-card.is-flag .mi-vf-txt span { color: #6C7597; transition: color .4s; }
.shift-hr .mi-vf-card.is-flag.is-lit .mi-vf-txt span { color: #C9111C; }
.shift-hr .mi-vf-tag { padding: 5px 8px; border-radius: 7px; background: #E5FDF0; color: #007C66; font: 500 11.5px/1 var(--font-body); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-vf-card:not(.is-done) .mi-vf-tag { opacity: 0; transform: scale(.7); }
.shift-hr .mi-vf-bar { display: flex; height: 7px; margin-top: 12px; border-radius: 4px; background: #E3E5EA; overflow: hidden; }
.shift-hr .mi-vf-bar i { width: var(--w); height: 100%; transition: width .9s var(--ease-out); }
.shift-hr .mi-vf-card:not(.is-scanned) .mi-vf-bar i { width: 0; }
.shift-hr .mi-vf-bar i + i { transition-delay: .35s; } .shift-hr .mi-vf-bar i + i + i { transition-delay: .7s; }

/* ---------- inside the home T&A frames: undo the screenshot rules, centre, glass border ---------- */
.shift-hr .ta-frame:has(> .mi) { display: grid; place-items: center; }
.shift-hr .ta-frame .mi img { position: static; inset: auto; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; }
.shift-hr .ta-shot .mi { border: 8px solid rgba(255, 255, 255, .16); background-clip: padding-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(0, 0, 0, .6); }
.shift-hr .ta-shot .mi-vf { border-radius: 24px; }
.shift-hr .ta-shot .mi-vf-head { border-radius: 16px 16px 0 0; }
.shift-hr .ta-shot .mi { max-width: 100%; }
@media (max-width: 520px) {
  .shift-hr .mi-vf-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .shift-hr .mi-vf-key { gap: 8px; flex-wrap: wrap; }
}

/* ---------- Worker types (Worker type.svg) ---------- */
.shift-hr .mi-wt { width: min(480px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; background: none; box-shadow: none; }
.shift-hr .mi-wt-card { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 18px 18px 16px; border-radius: 12px; background: #fff;
  box-shadow: 0 30px 50px -30px rgba(33, 18, 140, .45); transition: transform .45s var(--ease-out), box-shadow .45s, opacity .45s; }
.shift-hr .mi-wt-card b { font: 500 14.5px/1.2 var(--font-body); color: #634AFC; }
.shift-hr .mi-wt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shift-hr .mi-wt-avs { display: flex; }
.shift-hr .mi-wt-av { width: 24px; height: 24px; margin-right: -6px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff; transition: opacity .35s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-wt-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-wt-more { display: grid; place-items: center; background: #634AFC; color: #fff; font: 600 8.5px/1 var(--font-body); }
.shift-hr .mi-wt-count { font-size: 13px; color: #2C2853; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shift-hr .mi-wt.is-pre .mi-wt-card { opacity: 0; transform: translateY(12px); }
.shift-hr .mi-wt.is-pre .mi-wt-av { opacity: 0; transform: scale(.4); }
.shift-hr .mi-wt-card.is-hot { transform: translateY(-4px); box-shadow: 0 0 0 1.5px #8C7BFF, 0 30px 50px -26px rgba(33, 18, 140, .55); }
.shift-hr .pd-frame .mi-wt { box-shadow: none; }

/* ---------- Automate anything (Automate anything.svg) ---------- */
.shift-hr .mi-au { width: min(420px, 100%); padding: 20px 40px 34px; border-radius: 14px; display: flex; flex-direction: column; align-items: center;
  background: #FAFAFB radial-gradient(circle, #D9DBE3 1px, transparent 1.3px) 0 0 / 22px 22px; }
.shift-hr .mi-au-node { position: relative; width: 100%; max-width: 280px; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px #E4E7F0; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .35s; }
.shift-hr .mi-au-ic { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: #E7FBF3; color: #11C48F; }
.shift-hr .mi-au-ic.is-blue { background: #E8F3FF; color: #3897F0; }
.shift-hr .mi-au-ic svg { width: 18px; height: 18px; }
.shift-hr .mi-au-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shift-hr .mi-au-txt em { font-style: normal; font-size: 10.5px; color: #8A8FA3; }
.shift-hr .mi-au-txt b { font: 500 13px/1.2 var(--font-body); color: #2C2853; }
.shift-hr .mi-au-dots { display: grid; gap: 2px; align-self: start; padding-top: 4px; }
.shift-hr .mi-au-dots i { width: 3px; height: 3px; border-radius: 50%; background: #6C7597; }
.shift-hr .mi-au-tag { grid-column: 1 / -1; justify-self: start; padding: 4px 8px; border-radius: 5px; background: #EFF0F4; font-size: 10.5px; color: #495066; }
.shift-hr .mi-au-link { width: 1px; height: 22px; background: #D5D8E2; transform-origin: top; transition: transform .35s var(--ease-out); }
.shift-hr .mi-au-end { width: 18px; height: 18px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #11C48F; box-shadow: 0 0 0 1px #C8F2DC; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-au-end svg { width: 11px; height: 11px; }
.shift-hr .mi-au-node.is-live { box-shadow: 0 0 0 1.5px #1BCAA7, 0 14px 28px -16px rgba(17, 196, 143, .6); }
.shift-hr .mi-au.is-pre [data-node]:not(.is-on) { opacity: 0; transform: translateY(10px); }
.shift-hr .mi-au.is-pre [data-link]:not(.is-on) { transform: scaleY(0); }
.shift-hr .mi-au.is-pre [data-end]:not(.is-on) { opacity: 0; transform: scale(.5); }
.shift-hr .mi-au-end.is-on { animation: miPulse 1.8s ease-out infinite; }

/* ---------- AI-powered search (AI powered.svg) ---------- */
.shift-hr .pd-stack-visual .mi-wt { border: 0; box-shadow: none; background: none; }   /* four separate cards: no single glass frame */

/* ---------- Compliance overview (Iso.svg) ---------- */
.shift-hr .mi-co { width: min(420px, 100%); border-radius: 16px; overflow: hidden; }
.shift-hr .mi-co-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: #F0EFFF; font: 600 14px/1 var(--font-body); color: #4931DC; }
.shift-hr .mi-co-score { padding: 4px 8px; border-radius: 6px; background: #fff; color: #007C66; font: 500 11px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.shift-hr .mi-co-list { list-style: none; margin: 0; padding: 2px 18px 6px; }
.shift-hr .mi-co-row { display: grid; grid-template-columns: 36px 1fr 20px; gap: 12px; align-items: center; padding: 12px 0; }
.shift-hr .mi-co-row + .mi-co-row { border-top: 1px solid #F1F2F6; }
.shift-hr .mi-co-ic { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #E5FDF0; color: #0A8F6A; }
.shift-hr .mi-co-ic svg { width: 17px; height: 17px; }
.shift-hr .mi-co-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shift-hr .mi-co-txt b { font: 500 13.5px/1.2 var(--font-body); color: #3F4147; }
.shift-hr .mi-co-txt span { font-size: 11px; color: #6C7597; }
.shift-hr .mi-co-ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1BCAA7; color: #fff; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-co-ok svg { width: 11px; height: 11px; }
.shift-hr .mi-co.is-pre .mi-co-row:not(.is-on) .mi-co-ok { opacity: 0; transform: scale(.4); }
.shift-hr .mi-co-row.is-scan { background: linear-gradient(90deg, transparent, #EEFFF6, transparent); }
/* worker types: one panel like the other visuals (glass border, light surface), taller cards */
.shift-hr .pd-stack-visual .mi-wt { width: min(470px, 100%); padding: 22px; gap: 18px; border-radius: 26px; background: #F4F3FF; background-clip: padding-box;
  border: 8px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(0, 0, 0, .6); }
.shift-hr .pd-stack-visual .mi-wt-card { min-height: 158px; padding: 20px; box-shadow: 0 16px 32px -22px rgba(33, 18, 140, .4), 0 0 0 1px #ECEBFA; }
.shift-hr .pd-stack-visual .mi-wt-card b { font-size: 15.5px; }
.shift-hr .pd-stack-visual .mi-wt-av { width: 28px; height: 28px; }
.shift-hr .pd-stack-visual .mi-wt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shift-hr .pd-stack-visual .mi-wt-row { flex-wrap: wrap; row-gap: 8px; }

/* permissions: bigger */

.shift-hr .pd-ta .mi { max-width: 100%; }
@media (max-width: 1100px) { .shift-hr .pd-ta .mi { zoom: 1; } }
/* bigger documents, permissions and compliance panels on desktop */
@media (min-width: 1101px) { .shift-hr .pd-ta .mi-co { zoom: 1.3; } }

/* ---------- Mobile documents (Mobile documents.svg) ---------- */
.shift-hr .mi-md { width: min(300px, 100%); height: 360px; padding: 18px 18px 0; border-radius: 22px; overflow: hidden; }
.shift-hr .mi-md-status { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 11px; color: #2C2853; }
.shift-hr .mi-md-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; } .shift-hr .mi-md-sig i { width: 2.5px; background: #2C2853; border-radius: 1px; }
.shift-hr .mi-md-sig i:nth-child(1) { height: 3px; } .shift-hr .mi-md-sig i:nth-child(2) { height: 5px; } .shift-hr .mi-md-sig i:nth-child(3) { height: 7px; } .shift-hr .mi-md-sig i:nth-child(4) { height: 9px; opacity: .3; }
.shift-hr .mi-md-bat { width: 20px; height: 10px; border-radius: 3px; background: #2C2853; box-shadow: 0 0 0 1px #2C2853; }
.shift-hr .mi-md-screens { position: relative; margin-top: 18px; }
.shift-hr .mi-md-screen { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 10px; transition: transform .5s var(--ease-out), opacity .4s; }
.shift-hr .mi-md-screen[data-screen="list"] { transform: translateX(105%); opacity: 0; }
.shift-hr .mi-md.is-list .mi-md-screen[data-screen="home"] { transform: translateX(-30%); opacity: 0; }
.shift-hr .mi-md.is-list .mi-md-screen[data-screen="list"] { transform: none; opacity: 1; }
.shift-hr .mi-md-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font: 500 20px/1.2 var(--font-body); color: #2C2853; }
.shift-hr .mi-md-h svg { width: 16px; height: 16px; color: #46516A; }
.shift-hr .mi-md-row, .shift-hr .mi-md-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: #F4F5F8; font-size: 14px; color: #2C2853; transition: background-color .3s, transform .15s; }
.shift-hr .mi-md-row.is-press { background: #EEEBFF; transform: scale(.98); }
.shift-hr .mi-md-ic { width: 24px; height: 24px; color: #3E7BF6; flex-shrink: 0; } .shift-hr .mi-md-ic svg { width: 100%; height: 100%; }
.shift-hr .mi-md-chev { margin-left: auto; width: 16px; height: 16px; color: #46516A; } .shift-hr .mi-md-chev svg { width: 100%; height: 100%; }
.shift-hr .mi-md-t { display: flex; flex-direction: column; gap: 2px; } .shift-hr .mi-md-t b { font: 500 13px/1.2 var(--font-body); } .shift-hr .mi-md-t span { font-size: 11px; color: #6C7597; }
.shift-hr .mi-md-doc.is-new { box-shadow: inset 0 0 0 1.5px #8C7BFF; background: #F4F2FF; }

/* ---------- Counsel (Counsel.svg) ---------- */

.shift-hr .pd-stack-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 900px) { .shift-hr .pd-stack-inner { grid-template-columns: minmax(0, 1fr); } }
/* done buttons stay purple; a green toast confirms instead */
.shift-hr .mi-toast.is-green { background: #1BCAA7; color: #fff; box-shadow: 0 16px 34px -12px rgba(10, 143, 106, .55); }
.shift-hr .mi-toast.is-green .mi-toast-ic { background: rgba(255, 255, 255, .25); color: #fff; }

/* ===== every animation panel: 16px visible corners (user, 1 Oct). Where a panel has the 8px glass border, the outer
   radius is 24px so the white panel inside it reads as 16px. ===== */
.shift-hr .mi { border-radius: 16px !important; }
.shift-hr .pd-stack-visual .mi, .shift-hr .pd-ta .mi, .shift-hr .ft-stage .mi, .shift-hr .ta-shot .mi { border-radius: 24px !important; }
.shift-hr .pd-stack-visual .mi-wt { border-radius: 24px !important; }
.shift-hr .mi-vf-head, .shift-hr .mi-co-head { border-top-left-radius: 16px; border-top-right-radius: 16px; }

/* ===================== Lifecycle v3 — continuous journey with depth (user brief, 1 Oct) ===================== */

/* ---------- ATS → Sense HR (ATS HR.svg), with an animated connection ---------- */

@media (max-width: 600px) {

  .shift-hr .pd-ta .mi-wt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .shift-hr .pd-ta .mi-wt-card { min-height: 0; padding: 12px; gap: 16px; } .shift-hr .pd-ta .mi-wt-card b { font-size: 12.5px; }
  .shift-hr .pd-ta .mi-wt-row { flex-wrap: wrap; row-gap: 6px; } .shift-hr .pd-ta .mi-wt-av { width: 20px; height: 20px; } .shift-hr .pd-ta .mi-wt-count { font-size: 11px; }
}
.shift-hr .pd-ta .mi-wt { width: min(470px, 100%); padding: 22px; gap: 18px; border-radius: 24px !important; background: #F4F3FF; background-clip: padding-box; border: 8px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(0, 0, 0, .6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shift-hr .pd-ta .mi-wt-card { box-shadow: 0 16px 32px -22px rgba(33, 18, 140, .4), 0 0 0 1px #ECEBFA; }
@media (max-width: 600px) { .shift-hr .pd-ta .mi-wt { padding: 12px; gap: 10px; } }

/* ===== onboarding fixes (user, 1 Oct) ===== */

/* create your own templates (deep-dive panel): just the cards, no panel behind them */
.shift-hr .pd-ta .mi-wt { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.shift-hr .pd-ta .mi-wt-card { box-shadow: 0 0 0 1px #ECEBFA, 0 24px 44px -26px rgba(0, 0, 0, .55); }
/* worker types: the people count never touches the card edge */
.shift-hr .mi-wt-card { padding-right: 18px; }
.shift-hr .mi-wt-row { flex-wrap: wrap; row-gap: 8px; }
.shift-hr .mi-wt-av { margin-right: -7px; }
.shift-hr .mi-wt-count { margin-left: auto; padding-left: 10px; }

/* ===================== Performance (page 5) ===================== */

.shift-hr .pd-ta .ta-frame .mi .mi-ami-orb { width: 34px; height: auto; object-fit: contain; }

/* ==========================================================================
   Reporting quick-benefit cards — animations on the card stage (Flow Suite feature-card style). Fixed stage height; nothing reflows.
   ========================================================================== */
.shift-hr .mi-b { position: relative; width: 100%; height: 100%; padding: 16px; background: none !important; box-shadow: none !important; container-type: inline-size; overflow: hidden; }
.shift-hr .b-lbl { font: 600 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #8A8DA0; white-space: nowrap; }

/* ==========================================================================
   Customisation (page 9) — Screen details.svg (660×620) + custom-data workflow (new graphic)
   ========================================================================== */

/* frames */
@media (max-width: 600px) {   /* phones: ~80px cards — labels wrap between words only, 3 avatars + the "+n" chip */
  .shift-hr .pd-stack-visual .mi-wt { padding: 10px; gap: 8px; }
  .shift-hr .pd-stack-visual .mi-wt-card { min-height: 0; padding: 12px 10px; gap: 18px; }
  .shift-hr .pd-stack-visual .mi-wt-card b { font-size: 12px; line-height: 1.25; min-height: 2.5em; }
  .shift-hr .pd-stack-visual .mi-wt-av { width: 22px; height: 22px; }
  .shift-hr .pd-stack-visual .mi-wt-av:nth-child(n+4):not(.mi-wt-more) { display: none; }
  .shift-hr .pd-stack-visual .mi-wt-count { font-size: 12px; }
}
@media (max-width: 360px) {   /* narrowest phones: one row per worker type — label left, avatars right */
  .shift-hr .pd-stack-visual .mi-wt { grid-template-columns: minmax(0, 1fr); }
  .shift-hr .pd-stack-visual .mi-wt-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .shift-hr .pd-stack-visual .mi-wt-card b { min-height: 0; flex: 1; min-width: 0; font-size: 11.5px; }
  .shift-hr .pd-stack-visual .mi-wt-row { flex-wrap: nowrap; flex-shrink: 0; }
  .shift-hr .pd-stack-visual .mi-wt-count { display: none; }
  .shift-hr .pd-stack-visual .mi-wt-av:nth-child(n+3):not(.mi-wt-more) { display: none; }   /* 2 avatars + the "+n" chip */
}

/* payslip assistant (Payslip.svg 451×301) */



/* published vacancy page (publish.svg 460×328) */
.shift-hr .mi-jp { width: min(500px, 100%); border-radius: 16px; overflow: hidden; }
.shift-hr .mi-jp-top { position: relative; padding: 18px 22px 20px; background: #FAF1FB; overflow: hidden; }
.shift-hr .mi-jp-deco { position: absolute; right: 0; top: 0; width: 140px; height: 100%; }
.shift-hr .mi-jp-deco i { position: absolute; width: 46px; height: 46px; }
.shift-hr .mi-jp-deco i:nth-child(1) { right: 46px; top: -1px; border-radius: 0 0 23px 23px; background: #FEEBFF; } .shift-hr .mi-jp-deco i:nth-child(2) { right: 0; top: -1px; border-radius: 0 0 0 46px; background: #FEF3FF; }
.shift-hr .mi-jp-deco i:nth-child(3) { right: 92px; top: -1px; border-radius: 0 0 46px 0; background: #FEF3FF; } .shift-hr .mi-jp-deco i:nth-child(4) { right: 0; top: 45px; border-radius: 50%; background: #F9E8FA; }
.shift-hr .mi-jp-back { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #9802A0; } .shift-hr .mi-jp-back svg { width: 10px; height: 10px; }
.shift-hr .mi-jp-h { position: relative; display: block; margin-top: 8px; font: 600 20px/1.2 var(--font-body); letter-spacing: -.01em; color: #9802A0; }
.shift-hr .mi-jp-body { display: grid; grid-template-columns: 150px 1fr; gap: 18px; height: 232px; padding: 18px 22px 0; overflow: hidden; }
.shift-hr .mi-jp-info { list-style: none; margin: 0; padding: 4px 12px; align-self: start; border-radius: 9px; background: #F8F8F8; }
.shift-hr .mi-jp-info li { display: flex; gap: 8px; padding: 9px 0; border-bottom: 1px solid #EFEEF3; } .shift-hr .mi-jp-info li:last-child { border-bottom: 0; }
.shift-hr .mi-jp-ic { flex-shrink: 0; width: 12px; height: 12px; margin-top: 1px; color: #6B6D80; } .shift-hr .mi-jp-ic svg { width: 100%; height: 100%; }
.shift-hr .mi-jp-info li > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-hr .mi-jp-info small { font-size: 9.5px; color: #6B6D80; } .shift-hr .mi-jp-info b { font: 500 11.5px/1.2 var(--font-body); color: #393940; }
.shift-hr .mi-jp-main { min-width: 0; display: flex; flex-direction: column; }
.shift-hr .mi-jp-tabs { display: flex; gap: 18px; box-shadow: inset 0 -1px 0 #EFEEF3; font-size: 11.5px; color: #6B6D80; } .shift-hr .mi-jp-tabs span { padding: 2px 3px 9px; }
.shift-hr .mi-jp-tabs .is-on { color: #9802A0; box-shadow: inset 0 -2px 0 #9802A0; }
.shift-hr .mi-jp-scroll { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.shift-hr .mi-jp-doc { padding-top: 14px; transition: transform 4.5s cubic-bezier(.45, 0, .55, 1); }
.shift-hr .mi-jp-doc b { display: block; margin: 4px 0 8px; font: 600 11.5px/1.2 var(--font-body); color: #393940; } .shift-hr .mi-jp-doc b.is-gap { height: 4px; margin: 0; }
.shift-hr .mi-jp-doc i { display: block; width: var(--w); height: 6px; margin-bottom: 7px; border-radius: 3px; background: #EEEEF2; }
.shift-hr .mi-jp-doc i + b { margin-top: 14px; }
@media (max-width: 600px) { .shift-hr .mi-jp-top { padding: 14px 16px 16px; } .shift-hr .mi-jp-h { font-size: 16px; } .shift-hr .mi-jp-body { grid-template-columns: 1fr; padding: 14px 16px 0; height: 200px; } .shift-hr .mi-jp-info { display: none; } }

/* vacancy board (Post and track.svg 506×341) */

.shift-hr .pd-stack-visual :is(.mi-jp) { border-radius: 22px; }
@media (max-width: 600px) {   /* phones: thinner frame and glass border around the vacancy panels, more room for the UI */
  .shift-hr .pd-frame:has(> .mi-jp) { padding: 14px; }
  .shift-hr .pd-stack-visual :is(.mi-jp) { border-width: 5px; border-radius: 18px; }

}

/* ==========================================================================
   Sense Automate — Workflow Builder value cards (tools/product/minis.py au_*). Same stage as the reporting cards (.mi-b);
   Automate green marks live / connected states, Sense purple marks what the cursor clicks.
   ========================================================================== */
.shift-hr .mi-au2 { display: flex; flex-direction: column; justify-content: center; }

/* 2 · Integrate third-party services */
.shift-hr .au2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.shift-hr .au2-count { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 7px; background: #E2FBF2; color: #007A5C; font: 500 11.5px/1 var(--font-body); }
.shift-hr .au2-count b { font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-hr .au2-map { position: relative; padding-left: 56px; }
.shift-hr .au2-hub { position: absolute; left: 0; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 12px; box-shadow: 0 0 0 5px #E2FBF2, 0 12px 24px -10px rgba(0, 163, 124, .6); }
.shift-hr .au2-hub img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.shift-hr .au2-map::before { content: ""; position: absolute; left: 42px; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: #D5D8E2; }   /* hub → bus */
.shift-hr .au2-bus { position: absolute; left: 54px; top: 23px; bottom: 23px; width: 2px; background: #D5D8E2; border-radius: 1px; }
.shift-hr .au2-apps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shift-hr .au2-app { display: flex; align-items: center; height: 46px; }
.shift-hr .au2-line { position: relative; flex: 1; min-width: 18px; height: 2px; background: #D5D8E2; transition: background-color .3s; }   /* grey lines (user, 6 Oct); not connected = dashed */
.shift-hr .au2-app:not(.is-on) .au2-line { background: repeating-linear-gradient(90deg, #C9CCD8 0 4px, transparent 4px 7px); }
.shift-hr .au2-pkt { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #00CD9C; box-shadow: 0 0 0 4px rgba(0, 205, 156, .22), 0 0 12px rgba(0, 205, 156, .9); opacity: 0; }
.shift-hr .au2-app.is-out .au2-pkt { animation: au2Out .8s cubic-bezier(.5, 0, .3, 1) forwards; }
.shift-hr .au2-app.is-in .au2-pkt { animation: au2In .8s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes au2Out { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes au2In { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.shift-hr .au2-card { position: relative; flex: 0 0 auto; width: min(200px, 66%); height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 11px; background: #fff;
  box-shadow: inset 0 0 0 1px #E6E8F0, 0 6px 14px -10px rgba(33, 18, 140, .3); transition: box-shadow .3s; }
.shift-hr .au2-app.is-flash .au2-card { box-shadow: inset 0 0 0 1.5px #00CD9C, 0 8px 18px -10px rgba(0, 163, 124, .5); }
.shift-hr .au2-ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: #F2F3F8; color: #495066; }
.shift-hr .au2-ic svg { width: 15px; height: 15px; }
.shift-hr .au2-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.shift-hr .au2-txt b { font: 500 12.5px/1.2 var(--font-body); color: #2C2853; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-hr .au2-st { position: relative; height: 13px; font-size: 11px; line-height: 13px; color: #6B6D80; white-space: nowrap; }
.shift-hr .au2-st > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; transition: opacity .3s, transform .35s var(--ease-out); }
.shift-hr .au2-st svg { width: 11px; height: 11px; }
.shift-hr .au2-st [data-done] { color: #007A5C; font-weight: 500; opacity: 0; transform: translateY(5px); }
.shift-hr .au2-app.is-done .au2-st [data-idle] { opacity: 0; transform: translateY(-5px); } .shift-hr .au2-app.is-done .au2-st [data-done] { opacity: 1; transform: none; }
.shift-hr .au2-btn { display: inline-block; margin-top: -1px; padding: 2px 8px; border-radius: 5px; background: #634AFC; color: #fff; font: 500 10.5px/11px var(--font-body); white-space: nowrap; transition: transform .15s; }
.shift-hr .au2-btn.is-press { transform: scale(.92); }
@container (max-width: 300px) { .shift-hr .au2-card { width: 70%; padding: 0 8px; gap: 7px; } .shift-hr .au2-ic { width: 24px; height: 24px; } .shift-hr .au2-map { padding-left: 50px; } .shift-hr .au2-hub { width: 36px; height: 36px; margin-top: -18px; } .shift-hr .au2-map::before { left: 36px; } .shift-hr .au2-bus { left: 48px; } }

/* ---------- Sense Automate — Active workflows (Different rules.svg): rows load, then each workflow runs step by step ---------- */
.shift-hr .mi-auwf { width: min(490px, 100%); padding: 0; overflow: hidden; border-radius: 18px; container-type: inline-size; }
.shift-hr .pd-stack-visual .mi-auwf { border-radius: 26px; }
.shift-hr .aw-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #EBFFF7; border-bottom: 1px solid #EFF2F8; color: #00A37C; }
.shift-hr .aw-hic svg { width: 18px; height: 18px; }
.shift-hr .aw-head b { font: 600 14px/1 var(--font-body); color: #00A37C; }
.shift-hr .aw-rows { list-style: none; margin: 0; padding: 4px 14px 8px; }
.shift-hr .aw-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; transition: background-color .35s, opacity .4s, transform .5s var(--ease-out); }
.shift-hr .aw-row + .aw-row::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 1px; background: #EFF2F8; }
.shift-hr .aw-row.is-hot { background: #F6FFFB; }
.shift-hr .aw-row.is-hot::before, .shift-hr .aw-row.is-hot + .aw-row::before { opacity: 0; }
.shift-hr .mi-auwf.is-pre .aw-row { opacity: 0; transform: translateY(8px); }
.shift-hr .aw-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; }
.shift-hr .aw-ic svg { width: 18px; height: 18px; }
.shift-hr .aw-ic.is-green { background: #E5FBEF; color: #1FA463; } .shift-hr .aw-ic.is-purple { background: #EDEAFF; color: #7358F8; } .shift-hr .aw-ic.is-blue { background: #E6F1FF; color: #2F80ED; }
.shift-hr .aw-ic.is-orange { background: #FFF1E5; color: #E8772E; } .shift-hr .aw-ic.is-red { background: #FFECEC; color: #E5484D; }
.shift-hr .aw-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.shift-hr .aw-txt b { font: 500 13.5px/1.2 var(--font-body); color: #2C2853; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-hr .aw-path { font-size: 11px; line-height: 1.2; color: #8A8DA0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-hr .aw-path i, .shift-hr .aw-path em { font-style: normal; transition: color .3s; }
.shift-hr .aw-path em { margin: 0 4px; }
.shift-hr .aw-path i.is-on { color: #007A5C; font-weight: 500; } .shift-hr .aw-path em.is-on { color: #00CD9C; }
.shift-hr .aw-run { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 5px 8px; border-radius: 7px; background: #E2FBF2; color: #0A9B72; font: 500 11px/1 var(--font-body); transition: background-color .3s, color .3s, box-shadow .3s; }
.shift-hr .aw-run svg { width: 11px; height: 11px; }
.shift-hr .aw-row.is-hot .aw-run { background: #00CD9C; color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 163, 124, .7); }
.shift-hr .aw-row.is-hot .aw-run svg { animation: awBolt .5s ease-in-out infinite alternate; }
@keyframes awBolt { to { transform: scale(1.25); } }
@container (max-width: 400px) {   /* narrow: the Running badge keeps just its bolt so the workflow names have room */
  .shift-hr .aw-rows { padding: 2px 8px 6px; } .shift-hr .aw-row { gap: 10px; padding: 9px 4px; } .shift-hr .aw-ic { width: 30px; height: 30px; } .shift-hr .aw-ic svg { width: 16px; height: 16px; }
  .shift-hr .aw-txt b { font-size: 12.5px; } .shift-hr .aw-path { font-size: 10.5px; } .shift-hr .aw-run { padding: 6px; font-size: 0; gap: 0; } .shift-hr .aw-run svg { width: 12px; height: 12px; } .shift-hr .aw-head { padding: 12px 14px; } }

/* ==========================================================================
   Recruitment: Pipelines page exports (user, 6 Oct) — tools/product/minis.py pipeline_board … benefit_roles.
   Same palette as the vacancies minis (#393940 text, #6B6D80 grey, #9802A0 / #B000BA magenta); stage colours from Pipeline.svg / Define.svg.
   ========================================================================== */
.shift-hr .pl-sub { --st-bg: #FFF7D8; --st-fg: #965509; --st-chip: #FFF0B6; --st-line: #E2B23A; }
.shift-hr .pl-rev { --st-bg: #F8E7F9; --st-fg: #9802A0; --st-chip: #F2CAF4; --st-line: #D27ADA; }
.shift-hr .pl-scr { --st-bg: #E5FDF0; --st-fg: #007C66; --st-chip: #C0FFDD; --st-line: #2DB383; }
.shift-hr .pl-n { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; background: var(--st-chip); color: var(--st-fg); font: 500 11.5px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.shift-hr .pl-n svg { width: 12px; height: 12px; } .shift-hr .pl-n i { font-style: normal; }
.shift-hr .pl-cb { flex-shrink: 0; width: 13px; height: 13px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px #E2E1E6; }
.shift-hr .pl-card { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 11px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #EFEEF3; }
.shift-hr .pl-card b { flex: 1; min-width: 0; font: 400 12.5px/1.2 var(--font-body); color: #393940; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-hr .pl-dots { flex-shrink: 0; width: 16px; height: 16px; color: #4E4D54; }
.shift-hr .pl-col { flex: 0 0 214px; display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #EFEEF3; overflow: hidden; }
.shift-hr .pl-col-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 7px 8px; padding: 12px 11px 12px 13px; background: var(--st-bg); color: var(--st-fg); }
.shift-hr .pl-col-h b { font: 600 13px/1.25 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-hr .pl-col-x { width: 12px; height: 12px; margin-top: 2px; }
.shift-hr .pl-col-h > span:not(.pl-n) { font-size: 11px; line-height: 1.4; }
.shift-hr .pl-col-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.shift-hr .pl-slot { display: block; flex-shrink: 0; height: 0; margin-top: -8px; transition: height .55s var(--ease-out), margin-top .55s var(--ease-out); }   /* closed: takes back its gap */
.shift-hr .pl-slot.is-open { height: 38px; margin-top: 0; }
.shift-hr .pl-card.is-float { position: absolute; left: 0; top: 0; z-index: 4; width: var(--w); transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 0deg));
  transition: transform .9s cubic-bezier(.5, 0, .2, 1), box-shadow .3s, opacity .4s; }
.shift-hr .pl-card.is-float.is-lift { --rot: -4deg; box-shadow: inset 0 0 0 1px #EFEEF3, 0 18px 30px -12px rgba(33, 18, 60, .35); }
.shift-hr .pl-card.is-float.is-gone { opacity: 0; }
.shift-hr .pl-card.is-snap { transition: none; }

/* the export's grab hand replaces the arrow while dragging */
.shift-hr .mi-cursor .mi-hand { display: none; width: 22px; height: 22px; color: #0B0A14; }
.shift-hr .mi-cursor.is-grab > svg:first-child { display: none; } .shift-hr .mi-cursor.is-grab .mi-hand { display: block; }

/* hero board (Pipeline.svg 450×474) */
.shift-hr .mi-pb { width: min(520px, 100%); border-radius: 18px; overflow: hidden; background: #FBFBFB; }
.shift-hr .mi-pb-head { padding: 22px 22px 0; } .shift-hr .mi-pb-h { display: block; font: 600 21px/1.2 var(--font-body); color: #393940; letter-spacing: -.01em; }
.shift-hr .mi-pb-loc { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: #6B6D80; } .shift-hr .mi-pb-loc svg { width: 13px; height: 13px; }
.shift-hr .mi-pb-tabs { display: flex; gap: 20px; margin: 16px 22px 0; border-bottom: 1px solid #EFEEF3; white-space: nowrap; overflow: hidden; font-size: 12.5px; color: #6B6D80; }
.shift-hr .mi-pb-tabs span { position: relative; padding-bottom: 10px; } .shift-hr .mi-pb-tabs .is-on { color: #9802A0; } .shift-hr .mi-pb-tabs .is-on::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -1px; height: 2px; background: #9802A0; }
.shift-hr .mi-pb-board { display: flex; gap: 14px; height: 340px; padding: 18px 20px 22px; overflow: hidden; }   /* 4 cards fit in a column */
.shift-hr .mi-pb .pl-col { height: 100%; }
@media (max-width: 600px) { .shift-hr .mi-pb-head { padding: 18px 16px 0; } .shift-hr .mi-pb-h { font-size: 18px; } .shift-hr .mi-pb-tabs { margin: 14px 16px 0; gap: 16px; font-size: 12px; }
  .shift-hr .mi-pb-board { padding: 16px; gap: 12px; height: 324px; } .shift-hr .mi-pb .pl-col { flex-basis: 184px; } }

/* ==========================================================================
   Recruitment: Integrations page (tools/product/minis.py integrations_hub … benefit_email). ATS palette; connected / synced states in the exports' mint
   ========================================================================== */

.shift-hr .is-sense { background: #B000BA; color: #fff; } .shift-hr .is-sense svg { width: 100%; height: 100%; }
.shift-hr .is-site { background: #FAF1FB; color: #9802A0; } .shift-hr .is-site svg { width: 100%; height: 100%; }

/* ==========================================================================
   Recruitment: ATS Workflows page (minis.py workflow_journey … applicant_hired) — new graphics, no UI supplied (user, 6 Oct):
   the ATS features style — stage colours, white cards on #FBFBFB, magenta for Sense actions, mint for sent / done
   ========================================================================== */
.shift-hr .pl-swap { display: grid; } .shift-hr .pl-swap > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: opacity .3s; } .shift-hr .pl-swap > .is-on { opacity: 0; } .shift-hr .pl-swap svg { width: 11px; height: 11px; }

/* ATS Pipeline Notifications (b15): moved to Interview, the email goes out, its merge tags fill in */
@keyframes plStagePop { 45% { transform: scale(1.1); } }

/* ==========================================================================
   Recruitment: Right-to-work page (minis.py rtw_hero … rtw_result) — new graphics in the ATS style: magenta / pinks, mint for passes
   ========================================================================== */
.shift-hr :is(.rr-av) img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* shared: the phone, its screens, the passport and the selfie oval */
.shift-hr .rw-phone { position: relative; z-index: 2; flex-shrink: 0; width: 190px; height: 340px; padding: 8px; border-radius: 32px; background: #1C1B22; box-shadow: 0 30px 50px -24px rgba(30, 10, 40, .55), inset 0 0 0 2px #34333C; }
.shift-hr .rw-scr { position: relative; height: 100%; border-radius: 25px; background: #fff; overflow: hidden; }
.shift-hr .rw-s { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 14px 16px; text-align: center; opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .5s var(--ease-out); }
.shift-hr .rw-s small { font-size: 10px; color: #8A8DA0; } .shift-hr .rw-s b { font: 600 13.5px/1.25 var(--font-body); color: #393940; }
.shift-hr .rw-s.is-end { justify-content: center; } .shift-hr .rw-s.is-end > span:last-child { font-size: 11px; color: #6B6D80; }
.shift-hr :is(.is-s0 [data-s="0"], .is-s1 [data-s="1"], .is-s2 [data-s="2"], .is-s3 [data-s="3"]).rw-s { opacity: 1; transform: none; }
.shift-hr .rw-ok { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: #E3FDF0; color: #007C66; } .shift-hr .rw-ok svg { width: 100%; height: 100%; }

/* step 3 · the result back in Sense HR, the evidence pack stored */
.shift-hr .mi-rr { width: min(440px, 100%); border-radius: 16px; overflow: hidden; background: #FBFBFB; }
.shift-hr .rr-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: #FAF1FB; border-bottom: 1px solid #F3E2F4; } .shift-hr .rr-av { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.shift-hr .rr-head > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .shift-hr .rr-head b { font: 600 14px/1.2 var(--font-body); color: #393940; } .shift-hr .rr-head > span:nth-child(2) > span { font-size: 11.5px; color: #6B6D80; }
.shift-hr .rr-res > span { padding: 6px 10px; border-radius: 7px; font: 600 12px/1 var(--font-body); white-space: nowrap; } .shift-hr .rr-res > .is-off { background: #F3F3F7; color: #6B6D80; } .shift-hr .rr-res > .is-on { background: #E3FDF0; color: #007C66; }
.shift-hr .mi-rr.is-pass .rr-res > .is-off { opacity: 0; } .shift-hr .mi-rr.is-pass .rr-res > .is-on { opacity: 1; animation: plStagePop .5s var(--ease-out); }
.shift-hr .rr-pack { padding: 14px 16px 16px; }
.shift-hr .rr-pt { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .shift-hr .rr-pt b { font: 600 13.5px/1.2 var(--font-body); color: #393940; }
.shift-hr .rr-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #007C66; transition: opacity .3s; } .shift-hr .rr-auto svg { width: 12px; height: 12px; }
.shift-hr .rr-fs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.shift-hr .rr-f { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #EFEEF3; transition: opacity .35s, transform .45s var(--ease-out); transition-delay: calc(var(--k) * 200ms); }
.shift-hr .rr-fi { flex-shrink: 0; width: 28px; height: 28px; padding: 7px; border-radius: 8px; background: #FAF1FB; color: #B000BA; } .shift-hr .rr-fi svg { width: 100%; height: 100%; }
.shift-hr .rr-f b { flex: 1; min-width: 0; font: 500 12.5px/1.2 var(--font-body); color: #393940; } .shift-hr .rr-f > span:last-child { font-size: 11px; color: #6B6D80; }
.shift-hr .mi-rr:not(.is-stored) .rr-f { opacity: 0; transform: translateY(6px); transition-delay: 0s; } .shift-hr .mi-rr:not(.is-stored) .rr-auto { opacity: 0; }

/* ==========================================================================
   Recruitment: Pre-boarding (tools/product/minis.py) — new graphics in the ATS style; Aisha Malik is the new starter throughout.
   The hero and three feature panels reuse the onboarding page's minis (new_starters, welcome_lounge, ats_to_hr, automate_flow).
   ========================================================================== */
.shift-hr :is(.pe-av) img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes pbLive { 50% { box-shadow: 0 0 0 4px rgba(27, 202, 167, .18); } }

/* feature panel · Keep Pre-Starters Engaged: the ATS Expert window (.ax-* as the deep dive's pb_agent) — the agent's reminder, then the signature chaser;
   the contract is signed, Aisha replies, the run's progress fills */
.shift-hr .mi-pe { width: min(480px, 100%); padding: 20px 20px 14px; background: #fff; }
.shift-hr .mi-pe .pe-m { margin-top: 12px; } .shift-hr .mi-pe .ax-head + .pe-m { margin-top: 16px; }
.shift-hr .pe-bub { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #ECECF1; transition: opacity .35s, transform .45s var(--ease-out); }
.shift-hr .mi-pe .pe-bub p { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 400 13px/1.45 var(--font-body); color: #393940; }   /* one bubble: not the .ax-bot p bubble again inside */
.shift-hr .pe-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; font: 600 10.5px/1 var(--font-body); color: #9802A0; } .shift-hr .pe-tag svg { width: 12px; height: 12px; }
.shift-hr .pe-doc { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 7px 8px; border-radius: 9px; background: #FBFBFB; box-shadow: inset 0 0 0 1px #EFEEF3; }
.shift-hr .pe-di { flex-shrink: 0; width: 24px; height: 24px; padding: 5px; border-radius: 6px; background: #FAF1FB; color: #B000BA; } .shift-hr .pe-di svg { width: 100%; height: 100%; }
.shift-hr .pe-doc b { flex: 1; min-width: 0; font: 500 11.5px/1.2 var(--font-body); color: #393940; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-hr .pe-st > span { padding: 4px 8px; border-radius: 6px; font: 600 10.5px/1 var(--font-body); white-space: nowrap; } .shift-hr .pe-st > .is-off { background: #FFF4E0; color: #9A5B00; } .shift-hr .pe-st > .is-on { background: #E3FDF0; color: #007C66; }
.shift-hr .mi-pe.is-signed .pe-st > .is-off { opacity: 0; } .shift-hr .mi-pe.is-signed .pe-st > .is-on { opacity: 1; animation: plStagePop .5s var(--ease-out); }
.shift-hr .mi-pe .ax-me { position: relative; } .shift-hr .mi-pe .ax-me p { min-height: 0; transition: opacity .35s, transform .45s var(--ease-out); }
.shift-hr .mi-pe .ax-me .ax-dots { left: auto; right: 40px; background: #F2F3F8; box-shadow: inset 0 0 0 1px #E6E8F0; }
.shift-hr .pe-av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; transition: opacity .3s; }
.shift-hr .mi-pe .ax-r { transition: opacity .3s; }
.shift-hr .mi-pe:not(.is-m1) [data-m="1"] .pe-bub, .shift-hr .mi-pe:not(.is-m2) [data-m="2"] .pe-bub, .shift-hr .mi-pe:not(.is-reply) [data-m="3"] p { opacity: 0; transform: translateY(8px); }
.shift-hr .mi-pe:not(.is-t1):not(.is-m1) [data-m="1"] .ax-r, .shift-hr .mi-pe:not(.is-t2):not(.is-m2) [data-m="2"] .ax-r, .shift-hr .mi-pe:not(.is-t3):not(.is-reply) .pe-av { opacity: 0; }
.shift-hr .mi-pe.is-t1 [data-m="1"] .ax-dots, .shift-hr .mi-pe.is-t2 [data-m="2"] .ax-dots, .shift-hr .mi-pe.is-t3 [data-m="3"] .ax-dots { opacity: 1; }
.shift-hr .mi-pe .ax-foot { margin-top: 14px; }
@media (max-width: 600px) { .shift-hr .mi-pe { padding: 16px 14px 12px; } .shift-hr .mi-pe .pe-bub p { font-size: 12px; } .shift-hr .mi-pe .ax-foot { font-size: 11px; } }

/* ATS Expert deep dive (ATS expert.svg): the request types in, the agent replies, 312 new starters messaged, the run's progress fills */
.shift-hr .ax-head { display: flex; align-items: center; gap: 12px; }
.shift-hr .ax-ic { flex-shrink: 0; width: 44px; height: 44px; padding: 9px; border-radius: 11px; background: #0B0A1E; box-shadow: inset 0 0 0 1px #2A2840; } .shift-hr .ax-ic svg { width: 100%; height: 100%; }
.shift-hr .ax-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .shift-hr .ax-who b { font: 600 16px/1.2 var(--font-body); color: #393940; } .shift-hr .ax-who span { font-size: 12.5px; color: #6B6D80; }
.shift-hr .ax-live { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); letter-spacing: .04em; color: #1E9E6A; }
.shift-hr .ax-live i { width: 8px; height: 8px; border-radius: 50%; background: #3CC98A; animation: pbLive 1.6s ease-in-out infinite; }
.shift-hr .ax-me { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; transition: opacity .3s; }
.shift-hr .ax-me p { flex: 1; display: grid; margin: 0; padding: 11px 14px; border-radius: 12px; background: #F2F3F8; box-shadow: inset 0 0 0 1px #E6E8F0; font: 400 13px/1.4 var(--font-body); color: #393940; }
.shift-hr .ax-r { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font: 600 11.5px/1 var(--font-body); }
 .shift-hr .ax-r { background: #634AFC; color: #fff; }
.shift-hr .ax-me p > span { grid-area: 1 / 1; } 
.shift-hr .ax-me .mi-caret::after { background: #634AFC; }
.shift-hr .ax-bot { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.shift-hr .ax-bot p { flex: 1; margin: 0; padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #ECECF1; font: 400 13px/1.45 var(--font-body); color: #393940; transition: opacity .35s, transform .45s var(--ease-out); }
 .shift-hr .ax-r { transition: opacity .3s; }
.shift-hr .ax-dots { position: absolute; left: 40px; top: 0; display: flex; gap: 5px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #ECECF1; opacity: 0; transition: opacity .25s; }
.shift-hr .ax-dots i { width: 6px; height: 6px; border-radius: 50%; background: #A3A2B1; animation: miDot 1s ease-in-out infinite; } .shift-hr .ax-dots i:nth-child(2) { animation-delay: .15s; } .shift-hr .ax-dots i:nth-child(3) { animation-delay: .3s; }

.shift-hr .ax-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ECECF1; font-size: 12px; color: #6B6D80; }
.shift-hr .ax-prog { display: flex; gap: 5px; } .shift-hr .ax-prog i { width: 18px; height: 4px; border-radius: 2px; background: #ECECF1; transition: background-color .4s; } .shift-hr .ax-prog i.is-on { background: #B3A6FF; } .shift-hr .ax-prog i.is-cur { background: #634AFC; }
@media (max-width: 600px) {  .shift-hr .ax-me p, .shift-hr .ax-bot p { font-size: 12px; }  .shift-hr .ax-foot { font-size: 11px; } .shift-hr .ax-prog i { width: 12px; } }

/* pre-boarding on phones: the feature panels' minis (the onboarding page's, and the engaged thread) scale down to read at the narrow frame width
   (this page only); the bento phone drops its third tile; the Document Agent card and the login steps get room */
@media (max-width: 600px) {
  .shift-hr.ats-page .pd-stack-visual :is(.mi-au, .mi-pe) { zoom: .8; }
  .shift-hr .pe-doc { flex-wrap: wrap; row-gap: 6px; } .shift-hr .pe-doc b { flex: 1 1 calc(100% - 40px); } .shift-hr .pe-st { margin-left: 32px; }

}

/* ==========================================================================
   Recruitment: ATS overview (tools/product/minis.py) — Publish vacancies.svg, ai sceening.svg, and new graphics in the same style.
   Inside-Sense-HR screens in Sense HR purple; the onboarding workflow in Automate green.
   ========================================================================== */
.shift-hr :is(.ot-av) img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ai sceening.svg — Quizzy's screening list: each applicant screens (dots), then resolves to Qualified / Spam / Rejected */
.shift-hr .mi-qs { width: min(500px, 100%); border-radius: 16px; overflow: hidden; background: #fff; }
.shift-hr .qs-head { padding: 14px 18px; background: #FCEFFA; border-bottom: 1px solid #F3E2F4; font: 600 14px/1.2 var(--font-body); color: #A800B2; }
.shift-hr .qs-list { list-style: none; margin: 0; padding: 2px 16px 6px; }
.shift-hr .qs-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 0; transition: opacity .4s, transform .5s var(--ease-out); }
.shift-hr .qs-r + .qs-r { border-top: 1px solid #F3F3F6; }
.shift-hr .qs-r:not(.is-in) { opacity: 0; transform: translateY(6px); }
.shift-hr .qs-av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #E2E0FF; color: #3B2FC9; font: 500 11.5px/1 var(--font-body); }
.shift-hr .qs-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .shift-hr .qs-t b { font: 500 13.5px/1.2 var(--font-body); color: #4A4D5C; }
.shift-hr .qs-t span { font-size: 11.5px; line-height: 1.35; color: #8A93A8; transition: opacity .35s; }
.shift-hr .qs-r.is-spam .qs-t span, .shift-hr .qs-r.is-no .qs-t span { color: #C0151B; }
.shift-hr .qs-r:not(.is-done) .qs-t span { opacity: 0; }
.shift-hr .qs-st > span { padding: 4px 8px; border-radius: 6px; font: 500 11px/1 var(--font-body); white-space: nowrap; }
.shift-hr .qs-st > .is-off { gap: 3px; background: #F3F3F7; } .shift-hr .qs-st > .is-off i { width: 4px; height: 4px; border-radius: 50%; background: #A3A2B1; animation: miDot 1s ease-in-out infinite; } .shift-hr .qs-st > .is-off i:nth-child(2) { animation-delay: .15s; } .shift-hr .qs-st > .is-off i:nth-child(3) { animation-delay: .3s; }
.shift-hr .qs-r.is-ok .qs-st > .is-on { background: #E3FBEF; color: #0B7A5C; } .shift-hr .qs-r.is-spam .qs-st > .is-on { background: #FFEFC9; color: #7A4B00; } .shift-hr .qs-r.is-no .qs-st > .is-on { background: #FFE1DE; color: #9C1C12; }
.shift-hr .qs-r.is-done .qs-st > .is-off { opacity: 0; } .shift-hr .qs-r.is-done .qs-st > .is-on { opacity: 1; animation: plStagePop .5s var(--ease-out); }
@media (max-width: 600px) { .shift-hr .qs-list { padding: 0 12px 4px; } .shift-hr .qs-r { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; padding: 9px 0; } .shift-hr .qs-av { width: 28px; height: 28px; font-size: 10px; } .shift-hr .qs-t b { font-size: 12px; } .shift-hr .qs-t span { font-size: 10.5px; } }

/* Improve retention — the team's wellbeing scores, Ben's slipping; Census flags the attrition risk (Sense HR purple, amber for the risk) */
.shift-hr .mi-ot { width: min(440px, 100%); display: flex; flex-direction: column; gap: 20px; padding: 0; background: none !important; box-shadow: none !important; }
.shift-hr .ot-dash, .shift-hr .ot-alert { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 10, 20, .05), 0 22px 40px -26px rgba(10, 5, 40, .55); }
.shift-hr .ot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #F1F0F4; } .shift-hr .ot-head b { font: 600 13.5px/1.2 var(--font-body); color: #393940; } .shift-hr .ot-head span { font-size: 11px; color: #8A8DA0; }
.shift-hr .ot-list { list-style: none; margin: 0; padding: 4px 16px 8px; }
.shift-hr .ot-r { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 0; } .shift-hr .ot-r + .ot-r { border-top: 1px solid #F3F3F6; }
.shift-hr .ot-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.shift-hr .ot-t { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .shift-hr .ot-t b { font: 500 12.5px/1.2 var(--font-body); color: #393940; }
.shift-hr .ot-bar { height: 6px; border-radius: 3px; background: #EEEDF3; overflow: hidden; } .shift-hr .ot-bar i { display: block; height: 100%; border-radius: inherit; background: #634AFC; transform-origin: left; transform: scaleX(var(--v)); transition: transform 1s cubic-bezier(.22, 1, .36, 1), background-color .4s; }
.shift-hr .ot-r:nth-child(2) .ot-bar i { transition-delay: .12s; } .shift-hr .ot-r:nth-child(3) .ot-bar i { transition-delay: .24s; }
.shift-hr .mi-ot:not(.is-load) .ot-bar i { transform: scaleX(0); }
.shift-hr .ot-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .shift-hr .ot-v b { font: 600 12.5px/1 var(--font-body); color: #393940; font-variant-numeric: tabular-nums; }
.shift-hr .ot-v em { display: inline-flex; align-items: center; gap: 2px; font: 600 10px/1 var(--font-body); font-style: normal; } .shift-hr .ot-v em svg { width: 10px; height: 10px; } .shift-hr .ot-v em.is-up { color: #007C66; } .shift-hr .ot-v em.is-down { color: #B4530A; }
.shift-hr .mi-ot.is-flag .ot-r.is-risk { margin-inline: -8px; padding-inline: 8px; border-radius: 10px; background: #FFF7EC; } .shift-hr .mi-ot.is-flag .ot-r.is-risk .ot-bar i { background: #F29A2E; }
.shift-hr .ot-alert { display: flex; gap: 12px; padding: 13px 14px; box-shadow: 0 0 0 1.5px #F7C98C, 0 22px 40px -26px rgba(120, 60, 0, .45); transition: opacity .45s, transform .55s var(--ease-out); }
.shift-hr .mi-ot:not(.is-flag) .ot-alert { opacity: 0; transform: translateY(10px); }
/* in the dark frames (the panels, the steps cycle): the two cards each get their own glass outline, not one round them both (user, 3 Nov), as the industry pages' card stacks */
.shift-hr :is(.pd-stack-visual, .pd-ta, .ta-shot) .mi-ot { border: 0 !important; overflow: visible; }
.shift-hr :is(.pd-stack-visual, .pd-ta, .ta-shot) :is(.ot-dash, .ot-alert) { border: 8px solid rgba(255, 255, 255, .16); background-clip: padding-box; border-radius: 22px; }
.shift-hr :is(.pd-stack-visual, .pd-ta, .ta-shot) .ot-dash { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 26px 44px -24px rgba(0, 0, 0, .6); }
.shift-hr :is(.pd-stack-visual, .pd-ta, .ta-shot) .ot-alert { box-shadow: inset 0 0 0 1.5px #F7C98C, 0 0 0 1px rgba(255, 255, 255, .25), 0 26px 44px -24px rgba(0, 0, 0, .6); }
.shift-hr .ot-ic { flex-shrink: 0; width: 32px; height: 32px; padding: 6px; border-radius: 9px; background: #0B0A1E; box-shadow: inset 0 0 0 1px #2A2840; }   /* the ATS Expert tile */ .shift-hr .ot-ic svg { width: 100%; height: 100%; }
.shift-hr .ot-at { display: flex; flex-direction: column; gap: 4px; } .shift-hr .ot-at b { font: 600 12.5px/1.2 var(--font-body); color: #9A4A00; } .shift-hr .ot-at > span:not(.ot-btn) { font-size: 11.5px; line-height: 1.45; color: #4E4D54; }
.shift-hr .ot-btn { align-self: flex-start; margin-top: 4px; padding: 6px 11px; border-radius: 7px; background: #634AFC; color: #fff; font: 600 11px/1 var(--font-body); }

/* ==========================================================================
   Shift, site and field teams: Verify hours (sense-shift-verify-hours.html) — colours from the exports
   ========================================================================== */
/* ---------- the day, verified (Verify every hour.svg 462×382): rows arrive from the first clock-in up, then their tags pop in ---------- */
.shift-hr .mi-shd { width: min(500px, 100%); border-radius: 18px; overflow: hidden; }   /* 462 in the export: wider, so the longer tags keep their lines */
.shift-hr .mi-shd-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #EBF6FF; box-shadow: inset 0 -1px 0 #EFF2F8; }
.shift-hr .mi-shd-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .shift-hr .mi-shd-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-shd-who { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shift-hr .mi-shd-who b { font: 500 14px/1.2 var(--font-body); color: #495066; } .shift-hr .mi-shd-who span { font-size: 11.5px; color: #6C7597; }
.shift-hr .mi-shd-badge { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--font-body); color: #4E71FF; white-space: nowrap; }
.shift-hr .mi-shd-badge svg { width: 16px; height: 16px; }
.shift-hr .mi-shd-list { list-style: none; margin: 0; padding: 8px 16px 12px; }
.shift-hr .mi-shd-row { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 13px 0;
  transition: opacity .45s, transform .55s var(--ease-out); }
.shift-hr .mi-shd-dot { position: relative; width: 15px; height: 15px; border-radius: 50%; align-self: start; margin-top: 2px; }
.shift-hr .mi-shd-row:not(:last-child) .mi-shd-dot::after { content: ""; position: absolute; left: 7px; top: 15px; width: 1px; height: 47px; background: #E8EEF6; }   /* the rail down to the next event */
.shift-hr .mi-shd-row.is-red .mi-shd-dot { background: #FF5C4E; } .shift-hr .mi-shd-row.is-green .mi-shd-dot { background: #1ED9A4; } .shift-hr .mi-shd-row.is-yellow .mi-shd-dot { background: #FFD270; }
.shift-hr .mi-shd-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shift-hr .mi-shd-txt b { font: 500 13.5px/1.25 var(--font-body); color: #495066; } .shift-hr .mi-shd-txt span { font-size: 11.5px; line-height: 1.3; color: #6C7597; }
.shift-hr .mi-shd-r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.shift-hr .mi-shd-r > b { font: 500 13.5px/1.2 var(--font-body); color: #495066; font-variant-numeric: tabular-nums; }
.shift-hr .mi-shd-tag { padding: 4px 7px; border-radius: 6px; font: 500 10px/1.1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shd-tag.is-ok { background: #E4FFF0; color: #02847C; } .shift-hr .mi-shd-tag.is-warn { background: #FFF3E8; color: #D34C00; } .shift-hr .mi-shd-tag.is-bad { background: #FFEDED; color: #B90000; }
.shift-hr .mi-shd-row.is-pre { opacity: 0; transform: translateY(12px); }
.shift-hr .mi-shd-row.is-pre .mi-shd-tag, .shift-hr .mi-shd-row.is-checking .mi-shd-tag { opacity: 0; transform: scale(.7); }
.shift-hr .mi-shd-row.is-pre .mi-shd-dot::after { opacity: 0; }
.shift-hr .mi-shd-row.is-checking .mi-shd-dot { animation: shdPulse 1s ease-out infinite; }
@keyframes shdPulse { from { box-shadow: 0 0 0 0 rgba(78, 113, 255, .45); } to { box-shadow: 0 0 0 9px rgba(78, 113, 255, 0); } }
@media (max-width: 520px) {
  .shift-hr .mi-shd-row { grid-template-columns: 16px minmax(0, 1fr); row-gap: 8px; }
  .shift-hr .mi-shd-r { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .shift-hr .mi-shd-row:not(:last-child) .mi-shd-dot::after { height: 80px; }
  .shift-hr .mi-shd-badge { display: none; }
}

/* ---------- late start (new graphic): the day drawn over the work pattern, gaps at either end flagged ---------- */
.shift-hr .mi-shl { width: min(460px, 100%); border-radius: 18px; overflow: hidden; padding-bottom: 16px; }
.shift-hr .mi-shl-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #EBF6FF; box-shadow: inset 0 -1px 0 #EFF2F8; }
.shift-hr .mi-shl-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .shift-hr .mi-shl-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-shl-who { display: flex; flex-direction: column; gap: 3px; } .shift-hr .mi-shl-who b { font: 500 14px/1.2 var(--font-body); color: #495066; } .shift-hr .mi-shl-who span { font-size: 11.5px; color: #6C7597; }
.shift-hr .mi-shl-chart { padding: 18px 16px 6px; }
.shift-hr .mi-shl-lane, .shift-hr .mi-shl-axis { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.shift-hr .mi-shl-lane + .mi-shl-lane { margin-top: 30px; }
.shift-hr .mi-shl-k { font-size: 11.5px; color: #6C7597; }
.shift-hr .mi-shl-track { position: relative; height: 14px; border-radius: 7px; background: #F1F3F8; }
.shift-hr .mi-shl-track i { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.shift-hr .mi-shl-pat { left: 10%; width: 80%; background: repeating-linear-gradient(135deg, #CFE2FB 0 5px, #E3EEFC 5px 10px); box-shadow: inset 0 0 0 1px #BCD5F7; }
.shift-hr .mi-shl-act { left: 13%; width: 73.67%; background: #1ED9A4; transform-origin: left; transition: transform 1.6s cubic-bezier(.4, 0, .3, 1); }
.shift-hr .mi-shl-gap { width: 3%; background: #FF5C4E; transition: opacity .4s; } .shift-hr .mi-shl-gap.is-late { left: 10%; border-radius: 7px 0 0 7px; } .shift-hr .mi-shl-gap.is-early { left: 86.67%; background: #FF9F43; border-radius: 0 7px 7px 0; }
.shift-hr .mi-shl-mark { position: absolute; bottom: calc(100% + 6px); padding: 3px 6px; border-radius: 5px; background: #495066; color: #fff; font: 500 10px/1 var(--font-body); white-space: nowrap; transform: translateX(-50%); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shl-mark.is-in { left: 13%; } .shift-hr .mi-shl-mark.is-out { left: 86.67%; }
.shift-hr .mi-shl-axis { margin-top: 10px; } .shift-hr .mi-shl-ticks { position: relative; height: 12px; }
.shift-hr .mi-shl-ticks span { position: absolute; left: var(--x); transform: translateX(-50%); font-size: 10px; color: #8A93AE; white-space: nowrap; }
.shift-hr .mi-shl-ticks span:first-child { transform: none; } .shift-hr .mi-shl-ticks span:last-child { transform: translateX(-100%); }
.shift-hr .mi-shl-flags { list-style: none; margin: 8px 16px 0; padding: 0; }
.shift-hr .mi-shl-flag { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 11px 0; transition: opacity .45s, transform .55s var(--ease-out); }
.shift-hr .mi-shl-flag + .mi-shl-flag { border-top: 1px solid #F1F2F6; }
.shift-hr .mi-shl-dot { width: 13px; height: 13px; border-radius: 50%; } .shift-hr .mi-shl-flag.is-late .mi-shl-dot { background: #FF5C4E; } .shift-hr .mi-shl-flag.is-early .mi-shl-dot { background: #FF9F43; }
.shift-hr .mi-shl-txt { display: flex; flex-direction: column; gap: 4px; } .shift-hr .mi-shl-txt b { font: 500 13.5px/1.25 var(--font-body); color: #495066; } .shift-hr .mi-shl-txt span { font-size: 11.5px; line-height: 1.3; color: #6C7597; }
.shift-hr .mi-shl-tag { padding: 4px 8px; border-radius: 6px; font: 500 10.5px/1.1 var(--font-body); } .shift-hr .mi-shl-flag.is-late .mi-shl-tag { background: #FFEDED; color: #B90000; } .shift-hr .mi-shl-flag.is-early .mi-shl-tag { background: #FFF3E8; color: #D34C00; }
.shift-hr .mi-shl-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 16px 0; padding: 10px 12px; border-radius: 10px; background: #EBF6FF; color: #3A5BE0; font: 500 12px/1 var(--font-body);
  transition: opacity .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shl-note svg { width: 15px; height: 15px; }
.shift-hr .mi-shl.is-pre .mi-shl-act { transform: scaleX(0); }
.shift-hr .mi-shl.is-pre .mi-shl-gap, .shift-hr .mi-shl.is-pre .mi-shl-mark, .shift-hr .mi-shl .mi-shl-mark.is-off, .shift-hr .mi-shl .mi-shl-gap.is-off { opacity: 0; }
.shift-hr .mi-shl .mi-shl-mark.is-off { transform: translate(-50%, 4px); }
.shift-hr .mi-shl-flag.is-off, .shift-hr .mi-shl-note.is-off { opacity: 0; transform: translateY(10px); }
@media (max-width: 520px) { .shift-hr .mi-shl-lane, .shift-hr .mi-shl-axis { grid-template-columns: 62px minmax(0, 1fr); } .shift-hr .mi-shl-ticks span:nth-child(even) { display: none; } }

/* the panels' glass border, rounded to each widget */
.shift-hr .pd-stack-visual :is(.mi-shd, .mi-shl) { border-radius: 26px; }
.shift-hr .pd-stack-visual .mi-shd-head, .shift-hr .pd-stack-visual .mi-shl-head { border-radius: 18px 18px 0 0; }

/* ==========================================================================
   Shift, site and field teams: Time and attendance (sense-shift-time-and-attendance.html) — colours from the exports
   ========================================================================== */
/* ---------- working hours (Working hours.svg 477×573): name + description type in, the pattern switch goes on, hours count up ---------- */
.shift-hr .mi-shk-typed.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: #634AFC; animation: miBlink .8s steps(1) infinite; }

/* ---------- clock in across sites (new graphic): three ways in, three wires, one central record ---------- */
.shift-hr .mi-shm { width: min(470px, 100%); padding: 16px; border-radius: 18px; background: #F7F9FD; }
.shift-hr .mi-shm-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shift-hr .mi-shm-way { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #E8EEF6; text-align: center; transition: box-shadow .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shm-ic { position: relative; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 12px; display: grid; place-items: center; background: #EBF6FF; color: #4E71FF; transition: background-color .3s, color .3s; }
.shift-hr .mi-shm-ic svg { width: 20px; height: 20px; }
.shift-hr .mi-shm-way b { font: 500 12.5px/1.2 var(--font-body); color: #495066; } .shift-hr .mi-shm-way > span:last-child { font-size: 10.5px; color: #6C7597; }
.shift-hr .mi-shm-way.is-on { box-shadow: 0 0 0 1.5px #9DB3FF, 0 14px 26px -16px rgba(78, 113, 255, .6); transform: translateY(-2px); }
.shift-hr .mi-shm-way.is-on .mi-shm-ic { background: #4E71FF; color: #fff; }
.shift-hr .mi-shm-way.is-on .mi-shm-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid #4E71FF; animation: shmPing .9s ease-out infinite; }
@keyframes shmPing { from { opacity: .7; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.shift-hr .mi-shm-wires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 26px; }
.shift-hr .mi-shm-wire { position: relative; } .shift-hr .mi-shm-wire::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background-image: linear-gradient(180deg, #C9D6F5 55%, transparent 0); background-size: 2px 6px; }
.shift-hr .mi-shm-wire i { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #4E71FF; box-shadow: 0 0 10px 2px rgba(78, 113, 255, .55); opacity: 0; }
.shift-hr .mi-shm-wire.is-go i { animation: shmDrop .55s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes shmDrop { 0% { opacity: 1; top: 0; } 85% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
.shift-hr .mi-shm-rec { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #E8EEF6; overflow: hidden; }
.shift-hr .mi-shm-rec-h { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: #EBF6FF; } .shift-hr .mi-shm-rec-h b { font: 600 13px/1 var(--font-body); color: #145CEB; } .shift-hr .mi-shm-rec-h span { font-size: 10.5px; color: #6C7597; }
.shift-hr .mi-shm-rec ul { list-style: none; margin: 0; padding: 2px 14px 4px; }
.shift-hr .mi-shm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 0; transition: opacity .45s, transform .55s var(--ease-out); }
.shift-hr .mi-shm-row + .mi-shm-row { border-top: 1px solid #F1F2F6; }
.shift-hr .mi-shm-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .shift-hr .mi-shm-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-shm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .shift-hr .mi-shm-txt b { font: 500 12.5px/1.2 var(--font-body); color: #495066; } .shift-hr .mi-shm-txt span { font-size: 10.5px; color: #6C7597; }
.shift-hr .mi-shm-tag { padding: 4px 7px; border-radius: 6px; background: #EBF6FF; color: #3A5BE0; font: 500 10.5px/1 var(--font-body); white-space: nowrap; }
.shift-hr .mi-shm-row.is-pre { opacity: 0; transform: translateY(-8px); }

/* ---------- clock-in proof (Check ins.svg 453×261, reworded): each row is scanned, then tagged; the anomaly turns red ---------- */
.shift-hr .mi-shv-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 11px 0; }
.shift-hr .mi-shv-row + .mi-shv-row { border-top: 1px solid #F3F4FC; }
.shift-hr .mi-shv-row::before { content: ""; position: absolute; inset: 2px -10px; border-radius: 10px; background: rgba(20, 92, 235, .06); opacity: 0; transition: opacity .3s; }
.shift-hr .mi-shv-row.is-scan::before { opacity: 1; }

/* ---------- attendance rules (new graphic): the grace period slides to 10 min, breaks switch on, overtime goes to TOIL, the workflow lights up ---------- */
.shift-hr .mi-shr { width: min(450px, 100%); border-radius: 18px; overflow: hidden; padding-bottom: 14px; }
.shift-hr .mi-shr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #EBF6FF; }
.shift-hr .mi-shr-head b { font: 600 14px/1 var(--font-body); color: #145CEB; } .shift-hr .mi-shr-head span { font-size: 10.5px; color: #6C7597; }
.shift-hr .mi-shr-list { list-style: none; margin: 0; padding: 0 16px; }
.shift-hr .mi-shr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; }
.shift-hr .mi-shr-row + .mi-shr-row { border-top: 1px solid #F1F2F6; }
.shift-hr .mi-shr-k { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-hr .mi-shr-k b { font: 500 13px/1.2 var(--font-body); color: #495066; } .shift-hr .mi-shr-k > span { font-size: 10.5px; color: #6C7597; font-variant-numeric: tabular-nums; }
.shift-hr .mi-shr-pill { padding: 6px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px #DCE8FA; font: 500 12px/1 var(--font-body); color: #2C3550; white-space: nowrap; }
.shift-hr .mi-shr-slide { display: inline-flex; align-items: center; gap: 10px; }
.shift-hr .mi-shr-track { position: relative; width: 108px; height: 6px; border-radius: 3px; background: #E3E8F2; }
.shift-hr .mi-shr-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--g, 66%); border-radius: inherit; background: #4E71FF; transition: width .9s var(--ease-out); }
.shift-hr .mi-shr-track b { position: absolute; top: 50%; left: var(--g, 66%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #4E71FF, 0 2px 5px rgba(0, 0, 0, .15); transition: left .9s var(--ease-out); }
.shift-hr .mi-shr-slide em { min-width: 44px; font: 500 12px/1 var(--font-body); font-style: normal; color: #2C3550; font-variant-numeric: tabular-nums; }
.shift-hr .mi-shr-tg { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 11px; background: #D9DBE3; transition: background-color .3s; }
.shift-hr .mi-shr-tg i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .3s var(--ease-out); }
.shift-hr .mi-shr-tg.is-on { background: #4E71FF; } .shift-hr .mi-shr-tg.is-on i { transform: translateX(16px); }
.shift-hr .mi-shr-seg { display: inline-flex; flex-shrink: 0; padding: 3px; border-radius: 8px; background: #EEF1F7; }
.shift-hr .mi-shr-seg span { padding: 5px 9px; border-radius: 6px; font: 500 11px/1 var(--font-body); color: #6C7597; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.shift-hr .mi-shr-seg:not(.is-toil) span:first-child, .shift-hr .mi-shr-seg.is-toil span:last-child { background: #fff; color: #2C3550; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.shift-hr .mi-shr-wf { display: flex; align-items: center; gap: 12px; margin: 6px 14px 0; padding: 12px 14px; border-radius: 12px; background: #F6F8FC; box-shadow: inset 0 0 0 1px #E8EEF6; transition: background-color .35s, box-shadow .35s; }
.shift-hr .mi-shr-wf-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: #E3E8F2; color: #8994AA; transition: background-color .35s, color .35s; } .shift-hr .mi-shr-wf-ic svg { width: 15px; height: 15px; }
.shift-hr .mi-shr-wf .mi-shr-k { flex: 1; }
.shift-hr .mi-shr-on { padding: 4px 8px; border-radius: 6px; background: #E4FFF0; color: #02847C; font: 500 10.5px/1 var(--font-body); transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shr-wf.is-on { background: #F1F5FF; box-shadow: inset 0 0 0 1.5px #B9C8FF; } .shift-hr .mi-shr-wf.is-on .mi-shr-wf-ic { background: #4E71FF; color: #fff; }
.shift-hr .mi-shr-wf:not(.is-on) .mi-shr-on { opacity: 0; transform: scale(.7); }

/* ---------- task flags (Flag.svg 455×255): three jobs land; two verified, the last one disputed ---------- */
.shift-hr .mi-shf-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 15px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E7E8E9;
  transition: opacity .45s, transform .55s var(--ease-out); }

.shift-hr .mi-shf-card.is-pre { opacity: 0; transform: translateY(12px); }
.shift-hr .pd-stack-visual .mi-shf-card { border: 6px solid rgba(255, 255, 255, .16); background-clip: padding-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 22px 40px -24px rgba(0, 0, 0, .6); border-radius: 22px; }

/* ---------- Clockwise (Clockwise.svg 499×304): it reports the trend, the manager asks, the Bradford flag pops, the risk level fills ---------- */

@keyframes shkPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 149, 94, .45); } 100% { box-shadow: 0 0 0 7px rgba(0, 149, 94, 0); } }

/* glass border radii in the panels */
.shift-hr .pd-stack-visual :is(.mi-shm, .mi-shr) { border-radius: 26px; }
 .shift-hr .pd-stack-visual .mi-shr-head { border-radius: 16px 16px 0 0; }

/* ==========================================================================
   Shift, site and field teams: Tasks on site (sense-shift-tasks-on-site.html) — colours from the exports
   ========================================================================== */
/* ---------- dispute evidence (Verify Tasks.svg 402×357, hero): the verified job, the disputed one, then the evidence fills in ---------- */
.shift-hr .mi-shy-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 13px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #F3F4FC, 0 18px 32px -24px rgba(33, 18, 140, .35);
  transition: opacity .45s, transform .55s var(--ease-out), background-color .4s, box-shadow .4s; }

.shift-hr .mi-shy-card.is-bad.is-done { background: #FFFAFA; box-shadow: 0 0 0 1px #FBE3E3, 0 18px 32px -24px rgba(140, 18, 18, .3); }
.shift-hr .mi-shy-col { padding: 10px 12px 4px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E9EDF4; }
.shift-hr .mi-shy-col > b { display: block; padding-bottom: 8px; font: 600 12px/1.2 var(--font-body); color: #495066; border-bottom: 1px solid #F4F4F4; }
.shift-hr .mi-shy-col ul { list-style: none; margin: 0; padding: 0; }
.shift-hr .mi-shy-col li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 11.5px; color: #495066; }
.shift-hr .mi-shy-col li + li { border-top: 1px solid #F4F4F4; }
.shift-hr .mi-shy-col li b { font: 500 12px/1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shy-col li b.is-bad { color: #E4583C; } .shift-hr .mi-shy-col li b.is-ok { color: #3B9567; }
.shift-hr .mi-shy-col li.is-off b { opacity: 0; transform: scale(.7); }

/* ---------- task detail (Task lenght.svg 470×280): details beside the activity, which arrives oldest first ---------- */

.shift-hr .mi-shx-act { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 9px 0; font-size: 10px; line-height: 1.4; color: #495066;
  transition: opacity .45s, transform .5s var(--ease-out); }
.shift-hr .mi-shx-act i { width: 9px; height: 9px; margin-top: 2px; border-radius: 50%; background: #DCE2EA; }
.shift-hr .mi-shx-act.is-new i { background: #3C7EFF; box-shadow: 0 0 0 3px rgba(60, 126, 255, .18); }
.shift-hr .mi-shx-act em { font-style: normal; font-size: 9.5px; color: #6C7597; white-space: nowrap; }
.shift-hr .mi-shx-act.is-off { opacity: 0; transform: translateY(-6px); }

/* ---------- task workload (Prove Task.svg 412×238): the bars fill; Mark is overloaded, James takes three new tasks ---------- */
.shift-hr .mi-shq { width: min(440px, 100%); padding: 4px 16px; border-radius: 16px; background: #FDFCFF; }
.shift-hr .mi-shq-list { list-style: none; margin: 0; padding: 0; }
.shift-hr .mi-shq-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 0; }
.shift-hr .mi-shq-row + .mi-shq-row { border-top: 1px solid #F3F4FC; }
.shift-hr .mi-shq-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; } .shift-hr .mi-shq-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mi-shq-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-hr .mi-shq-txt b { font: 500 13.5px/1.2 var(--font-body); color: #495066; } .shift-hr .mi-shq-txt span { font-size: 11.5px; color: #5F6C87; transition: color .35s; }
.shift-hr .mi-shq-row.is-bad .mi-shq-txt span { color: #BC0003; }
.shift-hr .mi-shq-tag { padding: 5px 8px; border-radius: 7px; font: 500 11px/1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .mi-shq-row.is-bad .mi-shq-tag { background: #FFEAE4; color: #840202; } .shift-hr .mi-shq-row:not(.is-bad) .mi-shq-tag { background: #E4FFF0; color: #02847C; }
.shift-hr .mi-shq-bar { grid-column: 1 / -1; height: 6px; margin-top: 12px; border-radius: 3px; background: #E7EAEE; overflow: hidden; }
.shift-hr .mi-shq-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; transform-origin: left; transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.shift-hr .mi-shq-row.is-bad .mi-shq-bar i { background: #FF6C6C; } .shift-hr .mi-shq-row.is-ok .mi-shq-bar i { background: #3BCB8F; } .shift-hr .mi-shq-row.is-fine .mi-shq-bar i { background: #A2DF5C; }
.shift-hr .mi-shq-row.is-pre .mi-shq-bar i { transform: scaleX(0); } .shift-hr .mi-shq-row.is-pre .mi-shq-tag { opacity: 0; transform: scale(.7); }
.shift-hr .mi-shq-row.is-ok.is-half .mi-shq-bar i { transform: scaleX(.5); }   /* James before the three new tasks */
.shift-hr .mi-shq-txt [data-new] { transition: opacity .35s; } .shift-hr .mi-shq-row.is-half [data-new] { opacity: 0; }
.shift-hr .mi-shq-row.is-half .mi-shq-tag { opacity: 0; transform: scale(.7); }

/* ---------- visit report (Disputed Invoices.svg 314×273): the jobs tick in, then the totals count up ---------- */
.shift-hr .mi-sho-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 11px 0; transition: opacity .45s, transform .55s var(--ease-out); }
.shift-hr .mi-sho-row + .mi-sho-row { border-top: 1px solid #F3F4FC; }

.shift-hr .mi-sho-row.is-pre { opacity: 0; transform: translateY(8px); }
.shift-hr .mi-sho-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 6px; border-radius: 16px; background: #E7F9CE; box-shadow: inset 0 0 0 1px #D3F0C4; text-align: center; transition: opacity .45s, transform .55s var(--ease-out); }
.shift-hr .mi-sho-stats > span { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: #4C7A27; }
.shift-hr .mi-sho-stats > span + span { border-left: 1px solid #C8E4AE; }
.shift-hr .mi-sho-stats em { font: 500 18px/1 var(--font-body); font-style: normal; color: #1D3A0B; font-variant-numeric: tabular-nums; }
.shift-hr .mi-sho-stats.is-pre { opacity: 0; transform: translateY(10px); }

/* glass borders in the panels */
.shift-hr .pd-stack-visual :is(.mi-shq) { border-radius: 26px; }
.shift-hr .pd-stack-visual :is(.mi-sho-stats) { border: 6px solid rgba(255, 255, 255, .16); background-clip: padding-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 22px 40px -24px rgba(0, 0, 0, .6); border-radius: 22px; }

/* ==========================================================================
   Shift, site and field teams: Onboarding for shift staff (sense-shift-onboarding-shift-staff.html) — new graphics in the onboarding
   minis' style, Sense HR purple for the Sense HR screens
   ========================================================================== */
/* ---------- hero: Priya's phone signs the contract; her checklist ticks through to ready ---------- */
.shift-hr .mi-shg { display: flex; align-items: center; width: min(500px, 100%); background: none !important; box-shadow: none !important; border: 0 !important; }
.shift-hr .shg-phone { margin-right: -8px; }   /* the card only just tucks over the phone edge, clear of its text */
.shift-hr .shg-doc { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 8px; padding: 14px 12px; border-radius: 10px; background: #F7F6FD; box-shadow: inset 0 0 0 1px #ECEBFA; }
.shift-hr .shg-doc i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: #DCD8F4; }
.shift-hr .shg-btn { margin-top: auto; align-self: stretch; padding: 10px; border-radius: 10px; background: #634AFC; color: #fff; font: 600 12px/1 var(--font-body); }
.shift-hr .shg-pad { position: relative; display: block; width: 100%; height: 92px; margin-top: 8px; border-radius: 10px; background: #F7F6FD; box-shadow: inset 0 0 0 1px #ECEBFA; color: #2C2853; }
.shift-hr .shg-pad i { position: absolute; left: 12px; right: 12px; bottom: 22px; height: 1px; background: #CFCBEA; }
.shift-hr .shg-sig { position: absolute; left: 10px; right: 10px; top: 14px; width: calc(100% - 20px); height: 52px; }
.shift-hr .shg-sig path { stroke-dasharray: 260; stroke-dashoffset: 0; }
.shift-hr .shg-name { font-size: 10.5px; color: #6B6D80; }
.shift-hr .mi-shg.is-s1 .shg-sig path { animation: shgSign 1.6s ease-in-out both; }
@keyframes shgSign { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.shift-hr .mi-shg.is-s0 .shg-sig path { stroke-dashoffset: 260; }
.shift-hr .shg-card { position: relative; z-index: 3; flex: 1; min-width: 0; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ECEBFA, 0 30px 50px -28px rgba(33, 18, 140, .45); }
.shift-hr .shg-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #F1F2F6; }
.shift-hr .shg-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .shift-hr .shg-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .shg-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-hr .shg-who b { font: 500 13.5px/1.2 var(--font-body); color: #2C2853; } .shift-hr .shg-who span { font-size: 11px; color: #6C7597; }
.shift-hr .shg-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.shift-hr .shg-i { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #2C2853; }
.shift-hr .shg-ck { width: 20px; height: 20px; flex-shrink: 0; padding: 4px; border-radius: 50%; background: #F1F2F6; color: transparent; transition: background-color .35s, color .35s; } .shift-hr .shg-ck svg { width: 100%; height: 100%; }
.shift-hr .shg-i.is-done .shg-ck { background: #1BCAA7; color: #fff; }
.shift-hr .shg-ready { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px; border-radius: 100px; background: #E3FDF0; color: #007C66; font: 600 11.5px/1 var(--font-body); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .shg-ready svg { width: 12px; height: 12px; }
.shift-hr .mi-shg:not(.is-ready) .shg-ready { opacity: 0; transform: scale(.85); }
.shift-hr .ft-stage .mi-shg { grid-column: 1; grid-row: 1; isolation: isolate; }
@media (max-width: 600px) { .shift-hr .ft-stage .mi-shg { zoom: .74; } }

/* ---------- site kiosk: tap the badge, fill in the details, done; the ways in below ---------- */

.shift-hr .shn-f { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 7px 34px 7px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #CFD3FF; transition: box-shadow .3s; }
.shift-hr .shn-f small { font-size: 9.5px; color: #6C7597; } .shift-hr .shn-f b { font: 500 12px/1.2 var(--font-body); color: #2C2853; transition: opacity .3s; }
.shift-hr .shn-f > i { position: absolute; right: 9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; padding: 3.5px; border-radius: 50%; background: #1BCAA7; color: #fff; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .shift-hr .shn-f > i svg { width: 100%; height: 100%; }
.shift-hr .shn-f.is-off b, .shift-hr .shn-f.is-off > i { opacity: 0; } .shift-hr .shn-f.is-off > i { transform: scale(.6); }
.shift-hr .shn-f.is-active { box-shadow: inset 0 0 0 1.5px #634AFC; }
.shift-hr .shn-w { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 100px; background: #fff; color: #495066; font: 500 12px/1 var(--font-body); box-shadow: 0 0 0 1px #ECEBFA; transition: background-color .35s, color .35s, box-shadow .35s; }
.shift-hr .shn-w svg { width: 15px; height: 15px; }
.shift-hr .shn-w.is-on { background: #634AFC; color: #fff; box-shadow: 0 10px 20px -10px rgba(99, 74, 252, .7); }

/* ---------- bulk pack: one pack, one click, thirty starters tick in ---------- */

.shift-hr .shb-seat { position: relative; aspect-ratio: 1; border-radius: 50%; background: #ECE8FF; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }

.shift-hr .shb-seat > i { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; padding: 2px; border-radius: 50%; background: #1BCAA7; color: #fff; box-shadow: 0 0 0 1.5px #fff; } .shift-hr .shb-seat > i svg { width: 100%; height: 100%; }

/* ---------- onboarding status: steps tick in per person; the pending one is chased and ticks ---------- */

.shift-hr .shs-c { position: relative; justify-self: center; width: 24px; height: 24px; border-radius: 50%; background: #F1F2F6; }
.shift-hr .shs-c i { position: absolute; inset: 0; padding: 5.5px; border-radius: 50%; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .shift-hr .shs-c i svg { width: 100%; height: 100%; }

/* ---------- timeline step details (mi-sht): small cards, one per step ---------- */

.shift-hr .pl-swap svg { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; margin-right: 3px; }

.shift-hr .sht-f { padding-block: 6px; } .shift-hr .sht-f small { font-size: 9px; } .shift-hr .sht-f b { font-size: 11.5px; }

.shift-hr .sht-doc { display: flex; align-items: center; gap: 9px; padding: 8px 0; } .shift-hr .sht-doc + .sht-doc { border-top: 1px solid #F1F2F6; }

.shift-hr .sht-doc b { flex: 1; font: 500 12px/1.2 var(--font-body); color: #2C2853; }

 .shift-hr .sht-tav { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .shift-hr .sht-tav + .sht-tav { margin-left: -8px; } .shift-hr .sht-tav img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 600px) { .shift-hr .mi-shg { flex-direction: column; } .shift-hr .shg-phone { margin: 0 0 -24px; } .shift-hr .shg-card { width: 100%; max-width: 320px; } }

/* ---------- Shift overview: "Integrate Your Systems" orbit (sh_orbit) — the System Connector (.au-orbit) in blue, logo tiles, the active group lit ---------- */
.shift-hr .sh-orbit { background: radial-gradient(60% 70% at 50% 100%, rgba(99, 74, 252, .1), transparent 70%), #F7F9FC; }

/* field teams: an SVG road map, the van follows the route (SMIL; paused for reduced motion in js/minis.js) */
.shift-hr .swk-field { display: grid; place-items: center; padding: 10px 12px; }
.shift-hr .swk-field svg { width: 100%; height: auto; max-height: 100%; }

/* ---------- Shift overview: Health and Safety (site_safety) — SOS, hard fall, then roll call; the matching item on the left lights (js) ---------- */

.shift-hr .sfy-pin { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; box-shadow: 0 0 0 2.5px #1A6FD8, 0 8px 14px -6px rgba(15, 50, 110, .6);
  transition: left 1.1s cubic-bezier(.5, 0, .2, 1), top 1.1s cubic-bezier(.5, 0, .2, 1), box-shadow .35s; }
.shift-hr .sfy-pin[data-p="0"] { --x: 18%; --y: 58%; } .shift-hr .sfy-pin[data-p="1"] { --x: 50%; --y: 34%; } .shift-hr .sfy-pin[data-p="2"] { --x: 62%; --y: 78%; }
.shift-hr .sfy-pin.is-out[data-p="0"] { --x: 84%; --y: 54%; } .shift-hr .sfy-pin.is-out[data-p="1"] { --x: 92%; --y: 62%; } .shift-hr .sfy-pin.is-out[data-p="2"] { --x: 85%; --y: 72%; }

.shift-hr .sfy-pin::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; opacity: 0; }

 .shift-hr .sfy-pin.is-safe { box-shadow: 0 0 0 2.5px #1BCAA7, 0 8px 14px -6px rgba(15, 110, 80, .5); }

@media (prefers-reduced-motion: reduce) { .shift-hr .sfy-pin, .shift-hr .sfy-pin::before { animation: none !important; transition: none; } }

/* ==========================================================================
   Shift: Clocking in machines (sense-shift-clock-in-system.html)
   ========================================================================== */

/* the clock-ins list */

.shift-hr .shh-live { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: #00955E; }
.shift-hr .shh-live i { width: 6px; height: 6px; border-radius: 50%; background: #00955E; animation: shkPulse 1.6s ease-out infinite; }

/* ==========================================================================
   Sense Gateway (sense-shift-sense-gateway.html; user, 14 Oct) — prefix gw*
   ========================================================================== */

/* ---------- hero: the Gateway (gateway 1.png) picks up each passing Tag; the who's-where list fills ---------- */

.shift-hr .gwh-chip { position: absolute; left: 108%; top: 30%; display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px; border-radius: 14px; background: #fff; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(11, 10, 20, .05), 0 24px 40px -20px rgba(15, 30, 70, .5); opacity: 0; transform: translateY(-50%);
  transition: left .9s cubic-bezier(.3, .7, .2, 1), opacity .4s, transform .5s var(--ease-out); }

.shift-hr .gwh-fh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #F1F2F6; } .shift-hr .gwh-fh b { font: 600 12.5px/1.2 var(--font-body); color: #2C3550; }
.shift-hr .gwh-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; max-height: 60px; padding: 8px 0; overflow: hidden;
  transition: opacity .4s .15s, transform .5s .15s var(--ease-out), max-height .45s var(--ease-out), padding .45s var(--ease-out); }
.shift-hr .gwh-row + .gwh-row { border-top: 1px solid #F1F2F6; } .shift-hr .gwh-row.is-pre { opacity: 0; transform: translateY(-6px); max-height: 0; padding-block: 0; border-color: transparent; }   /* the card grows as each row arrives */

@media (max-width: 600px) {   
  .shift-hr .gwh-row.is-pre { max-height: 60px; padding-block: 8px; }   /* phones: the list keeps its height, so the pills below don't jump */
  .shift-hr .gwh-chip { top: 14%; }   }

/* ---------- Redeploy Staff (Redeploy.svg 490×289): the floor plan, the alert, the people nearby ---------- */
.shift-hr .mi-gwr { width: min(520px, 100%); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; align-items: center; background: none; box-shadow: none; }
.shift-hr .gwr-plan, .shift-hr .gwr-side { border-radius: 14px; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .55); }
.shift-hr .gwr-plan { padding: 14px 12px 14px; background: #FCFFFD; }
.shift-hr .gwr-title { display: block; margin: 2px 2px 12px; font: 400 15px/1.2 var(--font-body); color: #4A5470; }
.shift-hr .gwr-map { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px #EDF0F2; }
.shift-hr .gwr-z { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 96px; padding-top: 14px; border-radius: 8px; text-align: center; transition: background-color .45s, box-shadow .45s; }
.shift-hr .gwr-z[data-z="office"] { grid-column: span 7; } .shift-hr .gwr-z[data-z="meeting"] { grid-column: span 5; } .shift-hr .gwr-z:nth-child(n+3) { grid-column: span 4; }
.shift-hr .gwr-z b { font: 600 13px/1.15 var(--font-body); transition: color .45s; } .shift-hr .gwr-z span { font-size: 11px; line-height: 1.2; transition: color .45s; }
.shift-hr .gwr-z.is-q { background: #EAF3DE; box-shadow: inset 0 0 0 1px #D6EEB6; } .shift-hr .gwr-z.is-q b { color: #1D3A0B; } .shift-hr .gwr-z.is-q span { color: #3B5E1F; }
.shift-hr .gwr-z.is-n { background: #FAEFDA; box-shadow: inset 0 0 0 1px #FFE3AF; } .shift-hr .gwr-z.is-n b, .shift-hr .gwr-z.is-n span { color: #754E20; }
.shift-hr .gwr-z.is-b { background: #FBE0DA; box-shadow: inset 0 0 0 1px #F6B5A8; } .shift-hr .gwr-z.is-b b, .shift-hr .gwr-z.is-b span { color: #8A3B12; }
.shift-hr .gwr-z.is-b { animation: gwrBusy 1.4s ease-out infinite; }
@keyframes gwrBusy { from { box-shadow: inset 0 0 0 1px #F6B5A8, 0 0 0 0 rgba(229, 72, 77, .35); } to { box-shadow: inset 0 0 0 1px #F6B5A8, 0 0 0 8px rgba(229, 72, 77, 0); } }
.shift-hr .gwr-pin { position: absolute; left: 0; top: 0; z-index: 2; width: 26px; height: 26px; margin: -16px 0 0 -13px; transform: translate(var(--px, 0), var(--py, 0)); transition: transform 1.1s cubic-bezier(.5, 0, .2, 1); }
.shift-hr .gwr-pav { display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2.5px var(--ring), 0 6px 10px -4px rgba(0, 0, 0, .35); } .shift-hr .gwr-pav img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .gwr-pin::after { content: ""; position: absolute; left: 50%; top: 24px; width: 8px; height: 8px; margin-left: -4px; background: var(--ring); transform: rotate(45deg); border-radius: 0 0 2px 0; z-index: -1; }
.shift-hr .gwr-pin.is-g { --ring: #1BAA7C; } .shift-hr .gwr-pin.is-r { --ring: #F0524A; } .shift-hr .gwr-pin.is-b { --ring: #1A6FD8; }
/* one card: the alert on top, the people nearby under it */
.shift-hr .gwr-side { display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 6px; background: #fff; }
.shift-hr .gwr-alert { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: center; padding: 11px; border-radius: 10px; background: #FFEAEA; box-shadow: inset 0 0 0 1px #FFD7D7;
  transition: opacity .45s, transform .5s var(--ease-out), background-color .4s, box-shadow .4s; }
.shift-hr .gwr-alert.is-pre { opacity: 0; transform: translateY(-6px); }
.shift-hr .gwr-aic { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #FFCFCF; color: #E5484D; transition: background-color .4s, color .4s; }
.shift-hr .gwr-aic i { position: absolute; inset: 6px; } .shift-hr .gwr-aic svg { width: 16px; height: 16px; }
.shift-hr .gwr-alert b { font: 600 13px/1.2 var(--font-body); color: #C00000; transition: color .4s; }
.shift-hr .mi-gwr .gwr-alert p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.4; color: #C00000; transition: color .4s; }
.shift-hr .gwr-alert .is-b, .shift-hr .gwr-alert.is-ok .is-a { display: none; } .shift-hr .gwr-alert.is-ok .is-b { display: inline; } .shift-hr .gwr-alert i.is-a, .shift-hr .gwr-alert.is-ok i.is-b { display: block; } .shift-hr .gwr-alert.is-ok i.is-a { display: none; }
.shift-hr .gwr-alert.is-ok { background: #E4FFF0; box-shadow: inset 0 0 0 1px #BDEFD3; } .shift-hr .gwr-alert.is-ok .gwr-aic { background: #1BCAA7; color: #fff; }
.shift-hr .gwr-alert.is-ok b, .shift-hr .mi-gwr .gwr-alert.is-ok p { color: #02684F; }
.shift-hr .gwr-nh { margin: 14px 4px 4px; font: 600 10.5px/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: #6C7597; }
.shift-hr .gwr-near { list-style: none; margin: 0; padding: 0; }
.shift-hr .gwr-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 7px 4px; border-radius: 8px; transition: opacity .4s, transform .5s var(--ease-out), background-color .3s; }
.shift-hr .gwr-row + .gwr-row { box-shadow: 0 -1px 0 #F1F2F6; } .shift-hr .gwr-row.is-pre { opacity: 0; transform: translateX(8px); }
.shift-hr .gwr-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; } .shift-hr .gwr-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .gwr-rt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .shift-hr .gwr-rt b { font: 500 12.5px/1.2 var(--font-body); color: #3D4560; } .shift-hr .gwr-rt > span:last-child { font-size: 10.5px; line-height: 1.25; color: #6C7597; }
.shift-hr .gwr-nm { display: flex; align-items: center; justify-content: space-between; gap: 6px; }   /* the tag on the name's line, so the distance has the full width */
.shift-hr .gwr-tag { padding: 3px 6px; border-radius: 6px; font: 600 10px/1.1 var(--font-body); white-space: nowrap; background: #E4FFF0; color: #02847C; transition: background-color .3s, color .3s; }
.shift-hr .gwr-tag.is-on { background: #1A6FD8; color: #fff; }
.shift-hr .gwr-row.is-hot { background: #F4F8FE; }

/* ---------- SOS Response (SOS.svg 413×307): the hard fall alert, the response time, help assigned ---------- */
.shift-hr .gwo-ban, .shift-hr .gwe-ban { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #FFEAEA;
  box-shadow: inset 0 0 0 1px #FFD7D7, 0 30px 50px -26px rgba(0, 0, 0, .55); transition: opacity .45s, transform .5s var(--ease-out); }

.shift-hr .gwo-ban.is-shake, .shift-hr .gwe-ban.is-shake { animation: gwoShake .5s; }
@keyframes gwoShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ---------- Evacuation Roll Call (Evacuation.svg 454×300): the responder brief; people to locate ---------- */

.shift-hr .gwe-card { padding: 16px 14px 6px; border-radius: 14px; background: #F8F8FD; box-shadow: inset 0 0 0 1px #E6E8F5, 0 30px 50px -26px rgba(0, 0, 0, .55); transition: opacity .45s .1s, transform .5s .1s var(--ease-out); }
.shift-hr .gwe-card ul { list-style: none; margin: 0; padding: 0; }
.shift-hr .gwe-in { transition: padding .5s var(--ease-out); } 
.shift-hr .gwe-in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #EEF0F7; }

/* ---------- Add 1, 2, or 300 Gateways (new graphic): Gateways added room by room; the location sharpens ---------- */

.shift-hr .gws-gw { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .gws-gw::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(54, 200, 220, .7); opacity: 0; }
.shift-hr .gws-gw.is-new::after { animation: gwsPing 1.2s ease-out 2; }
@keyframes gwsPing { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }

/* ---------- Gateway panels: the glass outline hugs each card, not the group (user, 14 Oct), as the work and break zones' plan and stats ---------- */
.shift-hr .pd-stack-visual :is(.mi-gwr) { border: 0; overflow: visible; box-shadow: none; }
.shift-hr .pd-stack-visual :is(.gwr-plan, .gwr-side, .gwe-card) { border: 6px solid rgba(255, 255, 255, .16); background-clip: padding-box; border-radius: 20px; }
.shift-hr .pd-stack-visual :is(.gwo-ban, .gwe-ban) { border: 6px solid rgba(255, 255, 255, .16); background-clip: padding-box; border-radius: 20px; }
.shift-hr .pd-stack-visual :is(.gwr-plan, .gwr-side) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 26px 44px -24px rgba(0, 0, 0, .6); }
.shift-hr .pd-stack-visual :is(.gwo-ban, .gwe-ban) { box-shadow: inset 0 0 0 1px #FFD7D7, 0 0 0 1px rgba(255, 255, 255, .25), 0 26px 44px -24px rgba(0, 0, 0, .6); }
.shift-hr .pd-stack-visual .gwe-card { box-shadow: inset 0 0 0 1px #E6E8F5, 0 0 0 1px rgba(255, 255, 255, .25), 0 26px 44px -24px rgba(0, 0, 0, .6); }

/* ---------- Endless possibilities (Indoor.svg 453×270): the Gateway's sweep over the floor plan; Abbi's dot moves, her distance and angle update ---------- */

@media (min-width: 601px) and (max-width: 1200px) { .shift-hr .pd-stack-visual .mi-gwr { zoom: .84; } }   /* narrower panels: the two cards scale down rather than wrap */

/* ==========================================================================
   Man down and SOS alarms (sense-shift-man-down-alarm.html; user, 14 Oct) — prefixes mdh, mdl, mda, mdw
   ========================================================================== */
/* ---------- hero (Man Down.svg 438×301): the live no-movement list ---------- */

@keyframes mdhPulse { from { box-shadow: 0 0 0 0 rgba(229, 72, 77, .4); } to { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }

/* ==========================================================================
   Lone worker safety (sense-shift-lone-worker-safety.html; user, 15 Oct) — prefix lw*
   ========================================================================== */
/* the Sense Badge render (sos alert.png) with a live screen laid over its own */
.shift-hr .lw-dev { position: relative; container-type: inline-size; }
.shift-hr .lw-dev picture, .shift-hr .lw-dev img { display: block; width: 100%; height: auto; }
.shift-hr .lw-scr { position: absolute; overflow: hidden; border-radius: 2.7cqw; font-family: var(--font-body); }

/* ---------- hero: Emma's SOS on the Badge, the live lone worker list ---------- */
.shift-hr .mi-lwh { position: relative; width: min(540px, 100%); aspect-ratio: 1 / .96; background: none !important; box-shadow: none !important; border: 0 !important; }
.shift-hr .mi-lwh .lw-dev { position: absolute; left: 2%; top: 2%; width: 52%; }
.shift-hr .mi-lwh .lw-dev img { filter: drop-shadow(0 30px 40px rgba(15, 30, 70, .3)); }
.shift-hr .lwh-btn { position: absolute; left: 6.1%; top: 82.3%; width: 86.2%; height: 10%; display: flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 1.2cqw; background: #3C7EFF; color: #fff; font: 500 3.2cqw/1 var(--font-body); font-variant-numeric: tabular-nums; }
.shift-hr .lwh-btn.is-tick { animation: lwhTick .45s ease-out; } @keyframes lwhTick { 30% { filter: brightness(1.15); } }
.shift-hr .lwh-sent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; padding: 0 6cqw; text-align: center; background: #FAFAFA; opacity: 0; transition: opacity .35s; }
.shift-hr .lwh-sent b { font: 600 5.6cqw/1.2 var(--font-body); color: #2C3550; } .shift-hr .lwh-sent span { font-size: 3.6cqw; line-height: 1.35; color: #4A5470; }
.shift-hr .lwh-ok { width: 15cqw; height: 15cqw; padding: 3.6cqw; margin-bottom: 1.5cqw; border-radius: 50%; background: #1BCAA7; color: #fff; } .shift-hr .lwh-ok svg { width: 100%; height: 100%; }
.shift-hr .mi-lwh:is(.is-sent, .is-end) .lwh-sent { opacity: 1; }
.shift-hr .lwh-loc { position: absolute; left: 38%; top: 7%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px; border-radius: 12px; background: #fff; white-space: nowrap;
  font: 600 11.5px/1 var(--font-body); color: #1563C4; box-shadow: 0 0 0 1px rgba(11, 10, 20, .05), 0 18px 30px -16px rgba(15, 30, 70, .45); opacity: 0; transform: translateY(6px) scale(.95); transition: opacity .4s, transform .5s var(--ease-out); }
.shift-hr .lwh-loc svg { width: 13px; height: 13px; } .shift-hr .mi-lwh:is(.is-sent, .is-end) .lwh-loc { opacity: 1; transform: none; }
.shift-hr .lwh-feed { position: absolute; right: 0; top: 36%; z-index: 4; width: 56%; padding: 12px 14px 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 10, 20, .05), 0 30px 50px -24px rgba(15, 30, 70, .45); }
.shift-hr .lwh-feed ul { list-style: none; margin: 0; padding: 0; }
.shift-hr .lwh-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 0; } .shift-hr .lwh-row + .lwh-row { border-top: 1px solid #F1F2F6; }
.shift-hr .lwh-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .shift-hr .lwh-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .lwh-rt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .shift-hr .lwh-rt b { font: 500 12.5px/1.2 var(--font-body); color: #2C3550; } .shift-hr .lwh-rt span { font-size: 10.5px; color: #6C7597; white-space: nowrap; }
.shift-hr .lwh-tag { display: grid; } .shift-hr .lwh-tag > span { grid-area: 1 / 1; justify-self: end; padding: 4px 8px; border-radius: 6px; font: 600 10.5px/1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.shift-hr .lwh-tag .is-b { opacity: 0; transform: scale(.8); }
.shift-hr .lwh-row[data-r="e"] .is-a { background: #EEF5FD; color: #1563C4; } .shift-hr .lwh-row[data-r="e"] .is-b { background: #FFE6E6; color: #C00000; }
.shift-hr .lwh-row[data-r="j"] .is-a { background: #E4FFF0; color: #02847C; } .shift-hr .lwh-row[data-r="j"] .is-b { background: #1A6FD8; color: #fff; }
.shift-hr .lwh-row[data-r="s"] .is-a, .shift-hr .lwh-row[data-r="s"] .is-b { background: #E4FFF0; color: #02847C; }
.shift-hr .mi-lwh:is(.is-sent, .is-end) .lwh-row[data-r="e"] .is-a, .shift-hr .mi-lwh:is(.is-help, .is-end) .lwh-row[data-r="j"] .is-a { opacity: 0; }
.shift-hr .mi-lwh:is(.is-sent, .is-end) .lwh-row[data-r="e"] .is-b, .shift-hr .mi-lwh:is(.is-help, .is-end) .lwh-row[data-r="j"] .is-b { opacity: 1; transform: none; }
.shift-hr .mi-lwh:is(.is-sent, .is-end) .lwh-row[data-r="e"] .is-b { animation: mdhPulse 1.4s ease-out infinite; }
@media (max-width: 600px) { .shift-hr .mi-lwh { aspect-ratio: auto; } .shift-hr .mi-lwh .lw-dev { position: relative; left: auto; width: 54%; margin: 0 auto; } .shift-hr .lwh-feed { position: relative; width: 100%; margin-top: -44px; } .shift-hr .lwh-loc { left: auto; right: 2%; top: 14%; } }

/* ---------- SOS Buttons (new graphic): the Sense Tag's SOS button pressed, the response workflow ---------- */

.shift-hr .lwt-step { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12px; color: #2C3550; transition: opacity .3s; }
.shift-hr .lwt-step i { width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: #EEF1F6; color: transparent; transition: background-color .3s, color .3s; } .shift-hr .lwt-step i svg { width: 100%; height: 100%; }
.shift-hr .lwt-step.is-on i { background: #1BCAA7; color: #fff; }

/* ---------- Passive Check-Ins (new graphic): the check-in prompt on the Badge, the rules by role ---------- */
.shift-hr .lwc-ring { position: relative; width: 28cqw; aspect-ratio: 1; margin-top: 3cqw; } .shift-hr .lwc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.shift-hr .lwc-ring circle { fill: none; stroke: #E6ECF5; stroke-width: 5; } 
.shift-hr .lwc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 6.6cqw/1 var(--font-body); color: #2C3550; font-variant-numeric: tabular-nums; }

/* ---------- Man Down System (new graphic): the hard fall alert and her room on the map ---------- */

.shift-hr .lwf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border-radius: 8px; background: #F4F6FA; font: 500 11px/1 var(--font-body); color: #6C7597; transition: background-color .3s, color .3s; }
.shift-hr .lwf-chip i { width: 15px; height: 15px; padding: 3px; border-radius: 50%; background: #E3E7EF; color: transparent; transition: background-color .3s, color .3s; } .shift-hr .lwf-chip i svg { width: 100%; height: 100%; }
.shift-hr .lwf-chip.is-on { background: #E4FFF0; color: #02684F; } .shift-hr .lwf-chip.is-on i { background: #1BCAA7; color: #fff; }

/* ---------- Health and Safety Compliance (new graphic): the incident record, step by step with times ---------- */
.shift-hr .mi-lwi { width: min(440px, 100%); padding: 16px 18px 12px; border-radius: 16px; }
.shift-hr .lwi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #F1F2F6; }
.shift-hr .lwi-head > span:first-child { display: flex; flex-direction: column; gap: 4px; } .shift-hr .lwi-head b { font: 600 15px/1.2 var(--font-body); color: #2C3550; } .shift-hr .lwi-head span span { font-size: 12px; color: #6C7597; }
.shift-hr .lwi-closed { padding: 5px 9px; border-radius: 6px; background: #E4FFF0; color: #02847C; font: 600 11px/1 var(--font-body); transition: opacity .3s; }
.shift-hr .lwi-list { list-style: none; margin: 0; padding: 6px 0 2px; }
.shift-hr .lwi-row { position: relative; display: grid; grid-template-columns: 62px 14px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 5px 0; transition: opacity .4s, transform .5s var(--ease-out); }
.shift-hr .lwi-row > b { font: 500 11.5px/1.35 var(--font-body); color: #4A5470; font-variant-numeric: tabular-nums; }
.shift-hr .lwi-dot { position: relative; width: 10px; height: 10px; margin: 3px 2px 0; border-radius: 50%; background: #3C7EFF; box-shadow: 0 0 0 3px #E6EFFE; }
.shift-hr .lwi-row:not(:last-child) .lwi-dot::after { content: ""; position: absolute; left: 4px; top: 13px; width: 2px; height: 27px; background: #E6ECF5; }
.shift-hr .lwi-row:first-child .lwi-dot { background: #E5484D; box-shadow: 0 0 0 3px #FFE6E6; } .shift-hr .lwi-row:last-child .lwi-dot { background: #1BCAA7; box-shadow: 0 0 0 3px #E4FFF0; }
.shift-hr .lwi-ev { display: flex; flex-direction: column; gap: 2px; } .shift-hr .lwi-ev b { font: 500 12.5px/1.3 var(--font-body); color: #2C3550; } .shift-hr .lwi-ev span { font-size: 11px; color: #7C86A3; }
.shift-hr .mi-lwi.is-run .lwi-row:not(.is-on) { opacity: 0; transform: translateY(6px); }
.shift-hr .mi-lwi.is-run:not(.is-saved) .lwi-closed { opacity: 0; }
.shift-hr .lwi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #F1F2F6; font-size: 12px; color: #6C7597; } .shift-hr .lwi-foot b { color: #2C3550; font-weight: 600; }
.shift-hr .lwi-saved { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; background: #EEF5FD; color: #1563C4; font: 600 11px/1 var(--font-body); transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); } .shift-hr .lwi-saved svg { width: 11px; height: 11px; }
.shift-hr .mi-lwi.is-run:not(.is-saved) .lwi-saved { opacity: 0; transform: scale(.8); }

/* ---------- Lone Worker Sessions (new graphic): the app's Start lone worker session, then the running session ---------- */
.shift-hr .mi-lws { width: min(360px, 100%); padding: 16px 18px 18px; border-radius: 18px; }

.shift-hr .mi-lws ul { list-style: none; margin: 8px 0 0; padding: 0; }
.shift-hr .mi-lws li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 12.5px; color: #2C3550; } .shift-hr .mi-lws li + li { border-top: 1px solid #F1F2F6; }

/* in the stacking panels: the glass outline hugs each card, not the group (as the Gateway panels); phones scale them as one */
.shift-hr .pd-stack-visual .pd-frame:has(> :is(.mi-lwi, .mi-lws)) { display: grid; place-items: center; }
.shift-hr .lwf-ban.is-shake { animation: gwoShake .5s; }
.shift-hr .lwf-ban { transition: opacity .45s, transform .5s var(--ease-out); }
@media (min-width: 601px) { .shift-hr .pd-stack-visual .mi-lwi { zoom: .84; } }
@media (max-width: 600px) {
  .shift-hr .lwh-loc { left: auto; right: 0; top: 1%; }   /* phones: above the Badge, clear of its screen */

}

/* ==========================================================================
   Sense Badge page graphics (user, 26 Oct) — bento tiles: bdg, bdf, bds, bdw; stacking panels: bdl, bdn, bdt, bdm
   ========================================================================== */

/* list dividers as straight lines, no rounded corners between rows (user, 26 Oct): the timesheet, and the Redeploy list built the same way */
.shift-hr .gwr-row { border-radius: 0; }
.shift-hr .gwr-row + .gwr-row { box-shadow: none; border-top: 1px solid #F1F2F6; }

/* ==========================================================================
   Small and mid-sized businesses (user, 26 Oct) — sms: the UK support chat; sma: AMI's three abilities
   ========================================================================== */

.shift-hr .sms-ch { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; white-space: nowrap; border-radius: 100px; background: #F1F2F6; font: 500 11px/1 var(--font-body); color: #6C7597; transition: background-color .3s, color .3s; }
.shift-hr .sms-ch svg { flex-shrink: 0; width: 12px; height: 12px; } .shift-hr .sms-ch.is-on { background: var(--brand, #634AFC); color: #fff; }
/* AMI (user, 26 Oct: restyled as the support chat's card): header, the three abilities as tabs, the chat */

.shift-hr .sma-tab { flex: 1; padding: 6px 4px; border-radius: 8px; text-align: center; font: 500 10.5px/1.2 var(--font-body); color: #6C7597; transition: background-color .3s, color .3s, box-shadow .3s; }
.shift-hr .sma-tab.is-on { background: #fff; color: var(--brand, #634AFC); box-shadow: 0 1px 3px rgba(15, 30, 70, .12); }
.shift-hr .sma-pane { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity .35s; }
.shift-hr .sma-pane.is-on { opacity: 1; }

@media (max-width: 420px) {  .shift-hr .sms-ch { padding: 5px 8px; font-size: 10.5px; gap: 4px; } }
/* employee record rows (user, 26 Oct): the divider is its own straight line, so the row's rounded highlight no longer curves it; the highlight reaches past the
   text on both sides */
.shift-hr .mi-er-row { border-top: 0; margin: 0 -14px; padding-left: 24px; padding-right: 18px; }   /* more room inside the highlight, the text 24px in from its left edge (user, 26 Oct) */
.shift-hr .mi-er-row::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: #F0F1F4; }
.shift-hr .mi-er-row.is-hot::before { opacity: 0; }
/* AMI's tabs: each title on one line */
.shift-hr .sma-tab { flex: 1 1 auto; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
@media (max-width: 600px) {  .shift-hr .sma-tab { padding: 6px 5px; font-size: 9.5px; }  }   /* phones: the three titles still on one line */
@media (max-width: 600px) {  .shift-hr .sma-tab { padding: 6px 4px; font-size: 9px; letter-spacing: -.01em; } }
@media (max-width: 374px) {  .shift-hr .sma-tab { font-size: 8.5px; padding: 6px 3px; letter-spacing: -.02em; } }
@media (max-width: 600px) { .shift-hr .mi-er-row { margin: 0 -10px; padding-left: 18px; padding-right: 12px; } .shift-hr .mi-er-row::before { left: 10px; right: 10px; } .shift-hr .mi-er-k { white-space: nowrap; } }   /* phones: labels keep one line */

/* ---------- Mobile app: the manager approving a holiday (prefix mma), built to match managers app.svg's employee screen ---------- */
.shift-hr .mi-mma { width: min(300px, 100%); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; }
.shift-hr .mma-sb { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 18px 4px; font: 500 11px/1 var(--font-body); color: #3D4560; }
.shift-hr .mma-sb > span { display: inline-flex; align-items: flex-end; gap: 1.5px; } .shift-hr .mma-sb i { width: 3px; background: #3D4560; border-radius: 1px; } .shift-hr .mma-sb i:nth-child(1) { height: 5px; } .shift-hr .mma-sb i:nth-child(2) { height: 7px; } .shift-hr .mma-sb i:nth-child(3) { height: 9px; }
.shift-hr .mma-sb b { width: 18px; height: 9px; border-radius: 2.5px; background: #3D4560; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #3D4560; }
.shift-hr .mma-title { position: relative; padding: 14px 18px 16px; text-align: center; font: 400 17px/1.2 var(--font-body); color: #3D4560; box-shadow: inset 0 -1px 0 #EEF0F4; }
.shift-hr .mma-title svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #6C7597; }
.shift-hr .mma-body { display: flex; flex-direction: column; padding: 16px 18px 18px; }
.shift-hr .mma-who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.shift-hr .mma-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .shift-hr .mma-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr .mma-who > span { display: flex; flex-direction: column; gap: 3px; } .shift-hr .mma-who b { font: 500 15px/1.2 var(--font-body); color: #3D4560; } .shift-hr .mma-who span span { font-size: 12px; color: #7C86A3; }
.shift-hr .mma-k { margin: 2px 0 8px; font-size: 13px; color: #3D4560; }
.shift-hr .mma-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px #D9DEEA; }
.shift-hr .mma-field b { font: 400 13.5px/1.2 var(--font-body); color: #3D4560; } .shift-hr .mma-field span { padding: 4px 8px; border-radius: 6px; background: #EAF2FF; color: #3C7EFF; font: 500 11.5px/1 var(--font-body); white-space: nowrap; }
.shift-hr .mma-ent { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 8px; background: #F6F8FB; font-size: 12.5px; color: #3D4560; }
.shift-hr .mma-ent b { font: 600 13px/1 var(--font-body); color: #3D4560; } .shift-hr .mma-ent s { margin-right: 4px; color: #9AA3B5; font-weight: 400; }
.shift-hr .mma-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px 18px; box-shadow: inset 0 1px 0 #EEF0F4; }
.shift-hr .mma-btn { display: grid; place-items: center; height: 40px; border-radius: 6px; font: 500 14px/1 var(--font-body); transition: background-color .3s, color .3s, transform .15s; }
.shift-hr .mma-btn.is-decline { background: #D9EAFF; color: #3C7EFF; } .shift-hr .mma-btn.is-approve { background: #3C7EFF; color: #fff; }
.shift-hr .mma-btn.is-press { transform: scale(.96); }
.shift-hr .mi-mma.is-pre .mma-body > * { opacity: 0; translate: 0 6px; } .shift-hr .mma-body > * { transition: opacity .4s, translate .5s var(--ease-out); }
.shift-hr .mma-body > :nth-child(2), .shift-hr .mma-body > :nth-child(3) { transition-delay: .1s; } .shift-hr .mma-body > :nth-child(4), .shift-hr .mma-body > :nth-child(5) { transition-delay: .2s; } .shift-hr .mma-body > :nth-child(6) { transition-delay: .3s; }

/* the manager's screen as a phone (user, 26 Oct): rounder corners; the employee's note; Approve stays blue and a toast confirms */
.shift-hr .mi.mi-mma { border-radius: 40px !important; }
.shift-hr .mi-mma { position: relative; width: min(290px, 100%); }
.shift-hr .mma-sb { padding: 18px 26px 4px; } .shift-hr .mma-title { padding: 12px 24px 16px; } .shift-hr .mma-title svg { left: 24px; }
.shift-hr .mma-body { padding: 16px 22px 18px; } .shift-hr .mma-foot { padding: 14px 22px 26px; }
.shift-hr .mma-note { margin-bottom: 14px; padding: 11px 13px; border-radius: 8px; box-shadow: inset 0 0 0 1px #D9DEEA; font-size: 12.5px; line-height: 1.5; color: #3D4560; }
.shift-hr .mma-btn.is-approve.is-press { background: #2F6BE0; }
.shift-hr .mma-toast { top: 50px; bottom: auto; white-space: nowrap; transform: translate(-50%, -8px) scale(.96); } .shift-hr .mma-toast.is-on { transform: translate(-50%, 0) scale(1); }   /* drops in at the top of the screen, like a phone notification */

/* ---------- Forms (sense-shift-forms.html): the Forms product UI from the Figma Forms UI (user, 4 Nov: orange with grey, "make sure it matches with the product ui screens"):
   Inter, ink on paper, white fields with a light line, radius 10, the signal orange for what is chosen; prefix mi-fm* / fm- ---------- */
.shift-hr .mi-fm { --fm-ink: #09090B; --fm-mut: #71717A; --fm-mut2: #A1A1AA; --fm-line: #E4E4E7; --fm-line2: #EDEDF0; --fm-paper: #FAFAFB; --fm-canvas: #F4F4F5;
  --fm-sig: #FF4C09; --fm-deep: #CC3500; --fm-tint: #FFE8DE; --fm-ok: #007C66; --fm-okbg: #E5FDF0;
  position: relative; font-family: 'Inter', var(--font-body); font-size: 12.5px; line-height: 1.35; color: var(--fm-ink); background: var(--fm-paper); text-align: left; }
.shift-hr .mi-fm b { font-weight: 500; }
.shift-hr .fm-title { display: block; font: 600 21px/1.15 'Inter', var(--font-body); letter-spacing: -.025em; color: var(--fm-ink); }
.shift-hr .fm-lede { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fm-mut); }
.shift-hr .fm-l { display: block; margin: 16px 0 7px; font: 500 12px/16px 'Inter', var(--font-body); color: var(--fm-ink); }
.shift-hr .fm-h { display: block; font: 600 14.5px/1.2 'Inter', var(--font-body); letter-spacing: -.01em; }
.shift-hr .fm-rt { display: flex; flex-direction: column; min-width: 0; } .shift-hr .fm-rt b { display: flex; align-items: center; gap: 6px; font: 500 13px/1.2 'Inter', var(--font-body); }
.shift-hr .fm-rt > span { margin-top: 3px; font-size: 11px; color: var(--fm-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the phone: status bar and rounded corners (as the manager approve card) */
.shift-hr .mi-fmh, .shift-hr .mi-fmq, .shift-hr .mi-fmc { width: min(290px, 100%); overflow: hidden; }
.shift-hr .mi-fmh { width: min(314px, 100%); } .shift-hr .mi-fmc { width: min(306px, 100%); }
.shift-hr .mi-fmh .fm-chk { padding: 0 10px; gap: 8px; white-space: nowrap; }
.shift-hr .mi.mi-fmh, .shift-hr .mi.mi-fmq, .shift-hr .mi.mi-fmc { border-radius: 38px !important; }
.shift-hr .fm-sb { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 18px 26px 4px; font: 500 11px/1 'Inter', var(--font-body); color: var(--fm-ink); }
.shift-hr .fm-sb > span { display: inline-flex; align-items: flex-end; gap: 1.5px; } .shift-hr .fm-sb i { width: 3px; background: var(--fm-ink); border-radius: 1px; } .shift-hr .fm-sb i:nth-child(1) { height: 5px; } .shift-hr .fm-sb i:nth-child(2) { height: 7px; } .shift-hr .fm-sb i:nth-child(3) { height: 9px; }
.shift-hr .fm-sb b { width: 18px; height: 9px; border-radius: 2.5px; background: var(--fm-ink); box-shadow: 0 0 0 1.5px var(--fm-paper), 0 0 0 2.5px var(--fm-ink); }
.shift-hr .fm-body { padding: 14px 20px 24px; }
/* controls */
.shift-hr .fm-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); }
.shift-hr .fm-seg > span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 8px; font: 500 12px/1 'Inter', var(--font-body); color: var(--fm-mut); transition: background-color .25s, color .25s; }
.shift-hr .fm-seg > span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #D4D4D8; transition: background-color .25s; }
.shift-hr .fm-seg > span.is-on { background: var(--fm-ink); color: #fff; } .shift-hr .fm-seg > span.is-on::before { background: var(--fm-sig); }
.shift-hr .fm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.shift-hr .fm-chk { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 11px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); font-size: 12.5px; color: var(--fm-ink);
  transition: background-color .25s, box-shadow .25s, color .25s; }
.shift-hr .fm-chk > i { flex: none; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: var(--fm-paper); box-shadow: inset 0 0 0 1px #D4D4D8; color: #fff; transition: background-color .25s, box-shadow .25s; }
.shift-hr .fm-chk > i svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease-out); }
.shift-hr .fm-chk.is-on { background: var(--fm-tint); box-shadow: inset 0 0 0 1px var(--fm-sig); color: var(--fm-deep); }
.shift-hr .fm-chk.is-on > i { background: var(--fm-sig); box-shadow: none; } .shift-hr .fm-chk.is-on > i svg { opacity: 1; transform: none; }
.shift-hr .fm-faces { display: flex; gap: 6px; }
.shift-hr .fm-face { position: relative; flex: 1; max-width: 44px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); color: #3F3F46; transition: background-color .25s, box-shadow .25s, color .25s; }
.shift-hr .fm-face svg { width: 24px; height: 24px; }
.shift-hr .fm-face em { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); font: 600 8.5px/1 'Inter', var(--font-body); font-style: normal; letter-spacing: .08em; color: var(--fm-sig); opacity: 0; transition: opacity .25s; }
.shift-hr .fm-face.is-on { background: var(--fm-tint); box-shadow: inset 0 0 0 1px var(--fm-sig); color: var(--fm-sig); } .shift-hr .fm-face.is-on em { opacity: 1; }
.shift-hr .fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; background: var(--fm-sig); color: #fff; font: 500 13px/1 'Inter', var(--font-body); white-space: nowrap; transition: transform .15s, background-color .2s; }
.shift-hr .fm-btn svg { width: 14px; height: 14px; } .shift-hr .fm-btn.is-press { transform: scale(.96); background: var(--fm-deep); }
.shift-hr .fm-btn-full { display: flex; width: 100%; margin-top: 28px; }
.shift-hr .fm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: var(--fm-canvas); color: var(--fm-mut); font: 500 11px/1 'Inter', var(--font-body); white-space: nowrap; transition: background-color .3s, color .3s; }
.shift-hr .fm-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.shift-hr .fm-badge.is-ok { background: var(--fm-okbg); color: var(--fm-ok); } .shift-hr .fm-badge.is-sig { background: var(--fm-tint); color: var(--fm-deep); } .shift-hr .fm-badge.is-blue { background: #E3F0FF; color: #1D6FE0; }
.shift-hr .fm-in { display: flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); font-size: 12.5px; color: var(--fm-ink); white-space: nowrap; overflow: hidden; transition: box-shadow .2s; }
.shift-hr .fm-in.is-ph { color: var(--fm-mut2); }
.shift-hr .fm-in.is-focus { box-shadow: inset 0 0 0 1px var(--fm-sig), 0 0 0 3px rgba(255, 76, 9, .14); }
.shift-hr .fm-in.is-focus::after { content: ""; flex: none; width: 1px; height: 14px; margin-left: 1px; background: var(--fm-ink); animation: fmCaret 1s steps(1) infinite; }
@keyframes fmCaret { 50% { opacity: 0; } }
.shift-hr .fm-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; width: 100%; margin: 16px 0 0; padding-top: 14px; box-shadow: inset 0 1px 0 var(--fm-line2); font-size: 11.5px; }
.shift-hr .fm-dl dt { color: var(--fm-mut); } .shift-hr .fm-dl dd { margin: 0; text-align: right; color: var(--fm-ink); font-weight: 500; }
.shift-hr .fm-done-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--fm-okbg); color: var(--fm-ok); } .shift-hr .fm-done-ic svg { width: 20px; height: 20px; }
/* the phone's end screen (the Figma's Session ended), over the form */
.shift-hr .fm-done { position: absolute; inset: 31px 0 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 22px 36px; background: var(--fm-paper); text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-out), visibility 0s .5s; }
.shift-hr .fm-done > b { margin-top: 14px; font: 600 19px/1.2 'Inter', var(--font-body); letter-spacing: -.02em; } .shift-hr .fm-done > p { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--fm-mut); }
.shift-hr .mi-fm.is-done .fm-done { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .5s var(--ease-out), visibility 0s; }
.shift-hr .mi-fm.is-done .fm-done-ic { animation: fmPop .5s var(--ease-out) both .15s; }
@keyframes fmPop { from { transform: scale(.6); opacity: 0; } }

/* hero: the check-in on a phone */
.shift-hr .mi-fmh .fm-l:first-of-type { margin-top: 18px; }

/* onboarding: the new starter's details form (the Figma's form, without containers) */
.shift-hr .mi-fms { width: min(440px, 100%); padding: 22px 24px 24px; border-radius: 16px; }
.shift-hr .mi-fms .fm-title { font-size: 19px; }
.shift-hr .fm-sec { margin-top: 16px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--fm-line2); }
.shift-hr .fm-sec .fm-l { margin: 10px 0 6px; }
.shift-hr .fm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .shift-hr .fm-f { display: block; min-width: 0; }
.shift-hr .fm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 11.5px; color: var(--fm-mut); }
.shift-hr .mi-fms .mi-toast { bottom: -16px; }

/* training: a question of the course, then the pass */
.shift-hr .fm-qhead { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.shift-hr .fm-qic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fm-tint); color: var(--fm-sig); } .shift-hr .fm-qic svg { width: 17px; height: 17px; }
.shift-hr .fm-qhead b { display: block; font: 600 13.5px/1.2 'Inter', var(--font-body); } .shift-hr .fm-qhead span span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--fm-mut); }
.shift-hr .fm-prog { display: block; height: 6px; margin: 14px 0 18px; border-radius: 3px; background: var(--fm-line2); overflow: hidden; }
.shift-hr .fm-prog i { display: block; width: var(--p, 50%); height: 100%; border-radius: 3px; background: var(--fm-sig); transition: width .6s var(--ease-out); }
.shift-hr .fm-q { display: block; font: 600 17px/1.25 'Inter', var(--font-body); letter-spacing: -.02em; }
.shift-hr .fm-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.shift-hr .fm-opt { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); font-size: 12.5px;
  transition: background-color .25s, box-shadow .25s, color .25s; }
.shift-hr .fm-opt > i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--fm-paper); box-shadow: inset 0 0 0 1px #D4D4D8; transition: box-shadow .25s, background-color .25s; }
.shift-hr .fm-opt em { display: none; align-items: center; gap: 4px; margin-left: auto; font: 600 11px/1 'Inter', var(--font-body); font-style: normal; color: var(--fm-ok); } .shift-hr .fm-opt em svg { width: 11px; height: 11px; }
.shift-hr .fm-opt.is-on { background: var(--fm-tint); box-shadow: inset 0 0 0 1px var(--fm-sig); color: var(--fm-deep); } .shift-hr .fm-opt.is-on > i { background: #fff; box-shadow: inset 0 0 0 5px var(--fm-sig); }
.shift-hr .fm-opt.is-right { background: var(--fm-okbg); box-shadow: inset 0 0 0 1px #8FDCC1; color: var(--fm-ok); } .shift-hr .fm-opt.is-right > i { background: #fff; box-shadow: inset 0 0 0 5px var(--fm-ok); } .shift-hr .fm-opt.is-right em { display: inline-flex; }

/* wellbeing: the survey's results by site (the My sessions list) */
.shift-hr .mi-fmr { width: min(440px, 100%); padding: 20px; border-radius: 16px; }
.shift-hr .fm-rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .shift-hr .fm-rhead .fm-title { font-size: 18px; }
.shift-hr .fm-stats { display: flex; gap: 6px; }
.shift-hr .fm-stat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 5px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); font: 500 11px/1 'Inter', var(--font-body); white-space: nowrap; }
.shift-hr .fm-stat i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; } .shift-hr .fm-stat i svg { width: 11px; height: 11px; }
.shift-hr .fm-stat i.is-ok { background: var(--fm-okbg); color: var(--fm-ok); } .shift-hr .fm-stat i.is-sig { background: var(--fm-tint); color: var(--fm-sig); }
.shift-hr .mi-fmr .fm-seg > span { height: 26px; padding: 0 10px; font-size: 11.5px; }
.shift-hr .fm-rlist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.shift-hr .fm-rrow { display: grid; grid-template-columns: minmax(0, 1fr) 76px 26px; align-items: center; column-gap: 12px; padding: 11px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); transition: box-shadow .3s; }
.shift-hr .fm-rbar { height: 6px; border-radius: 3px; background: var(--fm-line2); overflow: hidden; }
.shift-hr .fm-rbar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--fm-sig); transition: width .8s var(--ease-out); }
.shift-hr .mi-fmr.is-on .fm-rbar i { width: var(--w); transition-delay: calc(var(--i) * .22s); }
.shift-hr .fm-rn { font: 600 13px/1 'Inter', var(--font-body); text-align: right; font-variant-numeric: tabular-nums; }
.shift-hr .fm-rflag { padding: 3px 6px; font-size: 10px; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .4s var(--ease-out); }
.shift-hr .mi-fmr.is-flag .fm-rflag { opacity: 1; transform: none; } .shift-hr .mi-fmr.is-flag .fm-rrow.is-low { box-shadow: inset 0 0 0 1px var(--fm-sig); }

/* checklists: the opening checklist on a phone */
.shift-hr .fm-list { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.shift-hr .fm-chkt em { margin-left: auto; font: 500 11px/1 'Inter', var(--font-body); font-style: normal; color: var(--fm-deep); opacity: 0; transition: opacity .25s; } .shift-hr .fm-chkt.is-on em { opacity: 1; }
.shift-hr .fm-cap, .shift-hr .fm-res { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fm-line); }
.shift-hr .fm-res { margin-top: 8px; }
.shift-hr .fm-cap-ic, .shift-hr .fm-res-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--fm-tint); color: var(--fm-sig); } .shift-hr .fm-cap-ic svg, .shift-hr .fm-res-ic svg { width: 15px; height: 15px; }
.shift-hr .fm-res-ic { background: var(--fm-canvas); color: #52525B; }
.shift-hr .fm-cap .fm-badge, .shift-hr .fm-res > svg { margin-left: auto; } .shift-hr .fm-res > svg { flex: none; width: 14px; height: 14px; color: var(--fm-mut2); }
.shift-hr .fm-cap .fm-badge .is-b { display: none; }
.shift-hr .mi-fmc.is-cap .fm-cap .fm-badge { background: var(--fm-okbg); color: var(--fm-ok); } .shift-hr .mi-fmc.is-cap .fm-cap .fm-badge .is-a { display: none; } .shift-hr .mi-fmc.is-cap .fm-cap .fm-badge .is-b { display: inline; }

/* automation: the Session ended card and the steps the answers start */
.shift-hr .mi-fmw { width: min(400px, 100%); padding: 20px; border-radius: 16px; background: #fff; }
.shift-hr .fm-wtop { display: flex; align-items: center; gap: 12px; } .shift-hr .fm-wtop .fm-done-ic { width: 38px; height: 38px; } .shift-hr .fm-wtop .fm-done-ic svg { width: 17px; height: 17px; }
.shift-hr .fm-wtop .fm-rt b { font: 600 15px/1.2 'Inter', var(--font-body); } .shift-hr .fm-wtop .fm-badge { margin-left: auto; }
.shift-hr .fm-wnh { display: block; margin: 16px 0 8px; font: 500 10.5px/1 'Inter', var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--fm-mut); }
.shift-hr .fm-steps { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.shift-hr .fm-step { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--fm-paper); box-shadow: inset 0 0 0 1px var(--fm-line); opacity: .45; transition: opacity .3s, background-color .3s; }
.shift-hr .fm-step-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--fm-canvas); color: #52525B; transition: background-color .3s, color .3s; } .shift-hr .fm-step-ic svg { width: 15px; height: 15px; }
.shift-hr .fm-step-ok { position: relative; flex: none; width: 20px; height: 20px; margin-left: auto; display: grid; place-items: center; } .shift-hr .fm-step-ok > svg { width: 14px; height: 14px; color: var(--fm-ok); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s var(--ease-out); }
.shift-hr .fm-spin { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--fm-line); border-top-color: var(--fm-sig); opacity: 0; animation: fmSpin .8s linear infinite; }
@keyframes fmSpin { to { transform: rotate(360deg); } }
.shift-hr .fm-step.is-run { opacity: 1; } .shift-hr .fm-step.is-run .fm-spin { opacity: 1; }
.shift-hr .fm-step.is-done { opacity: 1; background: #fff; } .shift-hr .fm-step.is-done .fm-step-ic { background: var(--fm-tint); color: var(--fm-sig); } .shift-hr .fm-step.is-done .fm-step-ok > svg { opacity: 1; transform: none; }

/* css/feature.css */
/* ==========================================================================
   HR feature pages (employee records onwards) — additions on top of product.css.
   Hero: Features.avif background, copy left, visual right. Plus the 3×3 "What's inside" grid and "Explore more" links.
   ========================================================================== */

/* ---------- 01 HERO ---------- */
.shift-hr .ft-hero { position: relative; isolation: isolate; padding: calc(var(--frame-inset) + 132px) 0 clamp(64px, 7vw, 104px); }
.shift-hr .ft-hero-bg { position: absolute; z-index: -1; inset: var(--frame-inset) var(--frame-inset) 0; overflow: hidden; border-radius: var(--r-panel); background: #F7F6FB; }
.shift-hr .ft-hero-bg picture, .shift-hr .ft-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.shift-hr .ft-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.shift-hr .ft-hero .container { padding-inline: calc(var(--frame-inset) + clamp(16px, 3.4vw, 44px)); }
.shift-hr .ft-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.shift-hr .ft-hero-copy h1 { color: var(--ink); font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.04em; }
.shift-hr .ft-hero-copy .lede { margin-top: 24px; max-width: 540px; color: var(--text-2); }
.shift-hr .ft-hero-copy .cta-group { margin-top: 36px; justify-content: flex-start; }
/* visual: glass window (as the hero product screen) holding the video placeholder */
.shift-hr .ft-play { top: auto; bottom: 22px; }
.shift-hr .ft-play:hover { transform: translate(-50%, 0) scale(.97); }
.shift-hr .ft-play { transform: translate(-50%, 0); }
@media (max-width: 900px) {
  .shift-hr .ft-hero { padding-top: calc(var(--frame-inset) + 108px); }
  .shift-hr .ft-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }   /* minmax: a wide visual can't push the column past the screen */
  .shift-hr .ft-hero-bg img { object-position: 85% 50%; }
}
@media (max-width: 767px) { .shift-hr .ft-hero-copy .cta-group { width: 100%; flex-direction: column; } .shift-hr .ft-hero-copy .cta-group .btn { width: 100%; } }

/* ---------- 02 FEATURES — stacking panels: buttons, placeholders ---------- */
.shift-hr .ft-features { padding-top: clamp(56px, 6vw, 88px); }
.shift-hr .pd-stack-btn { margin-top: 26px; }
.shift-hr .pd-stack-btn svg { width: 15px; height: 15px; }

/* ---------- 03 WHAT'S INSIDE — 3×3 grid (pay-co feature set) ---------- */
.shift-hr .pd-tile9-ic { background: var(--brand-10); color: var(--brand); box-shadow: none; }

/* ---------- 05 EXPLORE MORE — linked cards ---------- */
.shift-hr .ft-connects .wfp-more-head h2 { font-size: var(--fs-h2); }
.shift-hr .pd-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.shift-hr .pd-link-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 26px 26px 28px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-sm); color: var(--text);
  transition: transform .35s var(--ease-out), box-shadow .35s; }
.shift-hr .pd-link-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--brand), var(--shadow-md); }
.shift-hr .pd-link-body { display: flex; flex-direction: column; gap: 8px; }
.shift-hr .pd-link-body b { font: 500 20px/1.25 var(--font-display); letter-spacing: -0.015em; }
.shift-hr .pd-link-body span { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.shift-hr .pd-link-go { position: absolute; right: 22px; top: 26px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-10); color: var(--brand); transition: background-color .3s, color .3s, transform .3s var(--ease-out); }
.shift-hr .pd-link-go svg { width: 15px; height: 15px; }
.shift-hr .pd-link-card:hover .pd-link-go { background: var(--brand); color: #fff; transform: translate(2px, -2px); }
@media (max-width: 1024px) { .shift-hr .pd-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .shift-hr .pd-links { grid-template-columns: 1fr; } }
.shift-hr .ft-connects .wfp-more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* ---------- 07 FAQ — lists inside answers ---------- */
.shift-hr .ami-faq-a ul { margin: 10px 0 0; padding-left: 20px; }
.shift-hr .ami-faq-a li { margin: 4px 0; }
.shift-hr .ami-faq-a p + p, .shift-hr .ami-faq-a ul + p { margin-top: 10px; }
.shift-hr .pd-ta .pd-ta-frame { width: 100%; }

/* ---------- hero stage: animated employee record + floating purple cards (agent pages' prompt card, qzFloat) ---------- */
.shift-hr .ft-stage { position: relative; display: grid; place-items: center; min-height: 560px; padding: 40px 0 72px; }
.shift-hr .ft-stage .mi-er { width: 340px; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(99, 74, 252, .12), 0 50px 90px -40px rgba(49, 30, 160, .5); }
.shift-hr .ft-chips { position: absolute; inset: 0; pointer-events: none; }
.shift-hr .ft-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 18px; color: #fff; white-space: nowrap;
  font: 500 15px/1.2 var(--font-body);
  background: linear-gradient(0deg, #978CEC 0%, rgba(116, 98, 244, .97) 26%, #5238E0 100%); box-shadow: inset 0 0 36px rgba(255, 255, 255, .28), 0 24px 50px -18px rgba(64, 40, 220, .7);
  animation: qzFloat 3.2s ease-in-out infinite alternate; }
.shift-hr .ft-chip-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.shift-hr .ft-chip-ic svg { width: 14px; height: 14px; }
.shift-hr .ft-chip-1 { left: -2%; top: 16%; }
.shift-hr .ft-chip-2 { right: -4%; top: 38%; animation-delay: -1.1s; animation-duration: 3.6s; }
.shift-hr .ft-chip-3 { left: 4%; bottom: 20%; animation-delay: -2.2s; animation-duration: 3.4s; }
/* entrance: each card lands in turn */
.js .shift-hr .ft-chip { opacity: 0; scale: .9; transition: opacity .6s var(--ease-out), scale .6s var(--ease-out); }
.js .shift-hr .ft-stage.is-in .ft-chip { opacity: 1; scale: 1; }
.shift-hr .ft-stage.is-in .ft-chip-2 { transition-delay: .25s; } .shift-hr .ft-stage.is-in .ft-chip-3 { transition-delay: .5s; }
.shift-hr .ft-stage .ft-play { top: auto; bottom: 8px; transform: translate(-50%, 0); }
.shift-hr .ft-stage .ft-play:hover { transform: translate(-50%, 0) scale(.97); }
@media (max-width: 1100px) { .shift-hr .ft-chip { font-size: 13.5px; } .shift-hr .ft-chip-1 { left: -4%; } .shift-hr .ft-chip-2 { right: -6%; } }
@media (max-width: 900px) { .shift-hr .ft-stage { min-height: 0; } .shift-hr .ft-chip-1 { left: 0; } .shift-hr .ft-chip-2 { right: 0; } .shift-hr .ft-chip-3 { left: 2%; } }
@media (max-width: 600px) {
  .shift-hr .ft-stage { padding-bottom: 64px; }
  .shift-hr .ft-stage .mi-er { width: 100%; max-width: 320px; }
  .shift-hr .ft-chip { font-size: 12.5px; padding: 9px 13px 9px 9px; border-radius: 14px; }
  .shift-hr .ft-chip-ic { width: 22px; height: 22px; }
  .shift-hr .ft-chip-1 { left: -8px; top: 6%; } .shift-hr .ft-chip-2 { right: -8px; top: 42%; } .shift-hr .ft-chip-3 { left: -8px; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) { .shift-hr .ft-chip { animation: none; } .js .shift-hr .ft-chip { opacity: 1; scale: 1; } }

/* hero cards: left / right / left around the record, clear of it (wide screens); a row under it on narrower ones */
@media (min-width: 1440px) {
  .shift-hr .ft-hero-copy .lede { max-width: 470px; }
  .shift-hr .ft-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
  .shift-hr .ft-stage { padding: 56px 0 84px; }
  .shift-hr .ft-stage .mi-er { width: 300px; }
  .shift-hr .ft-chip { font-size: 13.5px; padding: 10px 14px 10px 10px; }
  .shift-hr .ft-chip-1 { left: auto; right: calc(50% + var(--rec-half, 150px) + 12px); top: 15%; }
  .shift-hr .ft-chip-2 { left: calc(50% + var(--rec-half, 150px) + 12px); right: auto; top: 44%; }
  .shift-hr .ft-chip-3 { left: auto; right: calc(50% + var(--rec-half, 150px) - 8px); top: auto; bottom: 25%; }   /* 20px further right than chip 1: overlaps the record slightly */
}
@media (max-width: 1439px) {
  .shift-hr .ft-stage { grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding-bottom: 80px; }
  .shift-hr .ft-stage .mi-er { grid-row: 1; }
  .shift-hr .ft-chips { position: static; inset: auto; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 12px; }
  .shift-hr .ft-chip { position: relative; left: auto; right: auto; top: auto; bottom: auto; font-size: 13.5px; }
  .shift-hr .ft-stage .ft-play { grid-column: 1; }
}
@media (max-width: 1439px) { .shift-hr .ft-chip { animation-name: ftFloatSm; } }
@keyframes ftFloatSm { from { translate: 0 -4px; rotate: -1deg; } to { translate: 0 5px; rotate: .8deg; } }
@media (max-width: 900px) { .shift-hr .pd-ta { grid-template-columns: minmax(0, 1fr); } }
.shift-hr .pd-ta .ta-shot { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.shift-hr .pd-ta .pd-ta-frame { min-width: 0; }
@media (max-width: 600px) { .shift-hr .pd-ta .ta-frame .mi { width: 100% !important; } }

/* ===== Absence (page 7) ===== */

/* deep dives with more than one link (Managed return to work) */
.shift-hr .pd-ta-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.shift-hr .pd-ta-links .pd-more { margin-top: 0; }
.shift-hr .pd-ta-more-in > .pd-ta-links { margin-top: 18px; }

/* ===== Recruitment (ATS) pages: body.ats-page ===== */
/* ATS primary colour #9612AE (user, 5 Oct; was #B000BA): the purple stacking panels take it on ATS pages only — HR pages keep #634AFC */
.shift-hr.ats-page { --ats: #9612AE; }
.shift-hr.ats-page .pd-stack-card.is-purple .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(160deg, #AC41C3 0%, #9612AE 45%, #750C8A 100%); }
/* light pink panel in place of the magenta (user, 6 Oct) — the ATS twin of the Automate builder's .is-mint; dusty, not saturated (user, 6 Oct) */
.shift-hr .pd-stack-card.is-blush .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(160, 70, 150, .13), transparent 60%), #F5EBF4; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(120, 40, 110, .11), 0 -20px 60px -30px rgba(70, 20, 65, .28); }
.shift-hr .pd-stack-card.is-blush p { color: var(--text-2); }
.shift-hr .pd-stack-card.is-blush .pd-bullets svg { background: #fff; color: #9802A0; }

/* "How it works" steps (user, 5 Oct): progress bar and tick tiles in the ATS hue; the eyebrow pill keeps the site purple */
.shift-hr.ats-page .ta-bar { background: rgba(152, 2, 160, .1); }
.shift-hr.ats-page .ta-bar-fill { background: #9802A0; }
.shift-hr.ats-page .ta-ic { background: #FAF1FB; color: #9802A0; }

/* CTA "Meet" card in the dusty pink of the .is-blush panels, in place of the Sense lilac (user, 6 Oct); buttons keep the site purple */
.shift-hr.ats-page .ami-meet { background: linear-gradient(180deg, #FCF8FB 0%, #F7EEF6 55%, #F0E0EE 100%); box-shadow: inset 0 0 0 1px rgba(120, 40, 110, .1); }
.shift-hr.ats-page .ami-meet::before { background: repeating-linear-gradient(90deg, rgba(150, 50, 140, .08) 0 72px, transparent 72px 89px) center top; }
.shift-hr.ats-page .ami-meet::after { background: radial-gradient(38% 60% at 0% 100%, rgba(185, 70, 170, .26), transparent 70%), radial-gradient(38% 60% at 100% 100%, rgba(185, 70, 170, .26), transparent 70%); }
.shift-hr.ats-page .ami-meet-window { box-shadow: 0 40px 100px -30px rgba(90, 20, 80, .3), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(120, 40, 110, .12); }

/* ===== Recruitment: Vacancies (sense-ats-vacancies.html) ===== */
/* hero: the live page's AMI vacancy chat in the employee-record frame */
.shift-hr .ft-stage .mi-pb, .shift-hr .ft-stage .mi-jp { grid-column: 1; grid-row: 1; width: 440px; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(99, 74, 252, .12), 0 50px 90px -40px rgba(49, 30, 160, .5); }
@media (max-width: 1439px) { .shift-hr .ft-stage :is(.mi-pb, .mi-jp, .mi-shd, .mi-shg, .mi-lwh) { grid-row: 1; } }
.shift-hr .ft-stage .mi-pb { width: 520px; }   /* pipelines hero: the vacancy board (Pipeline.svg) */
.shift-hr .ft-stage .mi-jp { width: 500px; }   /* career site hero: the published job page (Career site.svg = publish.svg) */
@media (max-width: 600px) {  .shift-hr .ft-stage .mi-pb { width: 100%; max-width: 520px; }  .shift-hr .ft-stage .mi-jp { width: 100%; max-width: 500px; } }
@media (min-width: 1440px) {
  .shift-hr .ft-hero-grid:has(.mi-pb, .mi-jp, .mi-shd, .mi-shg, .mi-lwh) { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 24px; }
  .shift-hr .ft-hero-grid:has(.mi-pb, .mi-jp, .mi-shd, .mi-shg, .mi-lwh) .ft-hero-copy h1 { font-size: 54px; }
  .shift-hr .ft-hero-grid:has(.mi-pb, .mi-jp, .mi-shd, .mi-shg, .mi-lwh) .ft-hero-copy .lede { max-width: 540px; }
  .shift-hr .ft-stage:has(.mi-pb, .mi-jp, .mi-shd, .mi-shg, .mi-lwh) { --rec-half: 228px; margin-right: -60px; }   /* chat window further from the copy (user, 5 Oct, twice); every ATS hero visual sits there */
  .shift-hr .ft-stage:has(.mi-jp, .mi-shd, .mi-shg, .mi-lwh) .ft-chip-3 { bottom: 21%; }
  .shift-hr .ft-stage:has(.mi-jp, .mi-shd, .mi-shg, .mi-lwh) .ft-chip { font-size: 12.5px; padding: 9px 12px 9px 9px; gap: 8px; }
  .shift-hr .ft-stage:has(.mi-jp, .mi-shd, .mi-shg, .mi-lwh) .ft-chip-ic { width: 22px; height: 22px; }
  .shift-hr .ft-stage:has(.mi-jp, .mi-shd, .mi-shg, .mi-lwh) .ft-chip-2 { left: calc(50% + var(--rec-half) - 112px); top: 52%; animation-name: ftFloatSm; }   /* beside the Yes / Not now row, where the window is empty; inside the hero panel */
  /* pipelines board (wider than the chat): pills overlap its edges, the right one over the clipped Screening column; the lower left one below the cards */
  .shift-hr .ft-stage:has(.mi-pb) { --rec-half: 268px; }
  .shift-hr .ft-stage:has(.mi-pb) .ft-chip { font-size: 12.5px; padding: 9px 12px 9px 9px; gap: 8px; }
  .shift-hr .ft-stage:has(.mi-pb) .ft-chip-ic { width: 22px; height: 22px; }
  .shift-hr .ft-stage:has(.mi-pb) .ft-chip-1 { right: calc(50% + var(--rec-half) - 22px); top: 9%; }
  .shift-hr .ft-stage:has(.mi-pb) .ft-chip-2 { left: calc(50% + var(--rec-half) - 128px); top: 67%; animation-name: ftFloatSm; }
  .shift-hr .ft-stage:has(.mi-pb) .ft-chip-3 { right: calc(50% + var(--rec-half) - 40px); top: auto; bottom: 13%; }
  /* integrations panel (shorter than the chat): the right-hand pill sits below it, clear of Add your own; the lower left one a little higher */
  .shift-hr .ft-stage:has(.mi-jp) .ft-chip-2 { top: 66%; }   /* landscape placeholder: below its label, over the empty lower corner */
}
/* "Easy recruitment" cards with a section heading; a linked card title; three "more" cards */

.shift-hr .pd-links-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .shift-hr .pd-links-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .shift-hr .pd-links-3 { grid-template-columns: 1fr; } }

/* css/industry.css */
/* ==========================================================================
   Industries pages (body.in-page): sense-industry-*.html (tools/product/gen_industry_*.py), in the "Shift, site and field teams" menu.
   Their own layout (user, 26 Oct): a Swipix hero (big centred title, an industry graph under it), then each feature section in a different
   layout from across the site. Sense purple is the main accent, as on the HR feature pages (user, 26 Oct); red only marks SOS.
   ========================================================================== */

/* ---------- animated minis borrowed from the Shift pages (css/minis.css), their export blue turned Sense purple here ---------- */

 @keyframes inShdPulse { from { box-shadow: 0 0 0 0 rgba(99, 74, 252, .45); } to { box-shadow: 0 0 0 9px rgba(99, 74, 252, 0); } }

/* =====================================================================================================
   HOSPITALITY onwards
   ===================================================================================================== */

/* new UI cards (the HR record's look): certificates with expiry dates, venues compared */
.shift-hr.hc-page .in-ui { width: min(460px, 100%); border-radius: 18px; overflow: hidden; background: #fff; font-family: var(--font-body); }
.shift-hr.hc-page .in-ui-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #F4F2FF; box-shadow: inset 0 -1px 0 #EAE6FB; }
.shift-hr.hc-page .in-ui-head > span:not([class]) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shift-hr.hc-page .in-ui-head b { font: 600 14.5px/1.2 var(--font-body); color: #2C2853; } .shift-hr.hc-page .in-ui-head small { font-size: 11.5px; color: #6C7597; }
.shift-hr.hc-page .in-uav { flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; } .shift-hr.hc-page .in-uav img { width: 100%; height: 100%; object-fit: cover; }
.shift-hr.hc-page .in-ui-pill { padding: 5px 9px; border-radius: 7px; background: #fff; color: var(--brand-hover); font: 600 11px/1 var(--font-body); }
.shift-hr.hc-page .in-cert-list { list-style: none; margin: 0; padding: 6px 18px 10px; }
.shift-hr.hc-page .in-cert-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 0; }
.shift-hr.hc-page .in-cert-row + .in-cert-row { box-shadow: inset 0 1px 0 #F1F2F7; }
.shift-hr.hc-page .in-cert-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #E5FDF0; color: #0A8F6A; } .shift-hr.hc-page .in-cert-ic svg { width: 17px; height: 17px; }
.shift-hr.hc-page .in-cert-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-hr.hc-page .in-cert-t b { font: 500 13.5px/1.25 var(--font-body); color: #3F4147; } .shift-hr.hc-page .in-cert-t small { font-size: 11px; color: #6C7597; }
.shift-hr.hc-page .in-cert-chip { padding: 5px 8px; border-radius: 7px; background: #E5FDF0; color: #007C66; font: 500 11px/1 var(--font-body); white-space: nowrap; }
.shift-hr.hc-page .in-cert-row.is-due .in-cert-ic { background: #FFF2DE; color: #B4650A; }
.shift-hr.hc-page .in-cert-row.is-due .in-cert-t small { color: #B4650A; }
.shift-hr.hc-page .in-cert-row.is-due .in-cert-chip { background: #FFF2DE; color: #9A5500; animation: inDue 2.4s ease-in-out infinite; }
@keyframes inDue { 50% { box-shadow: 0 0 0 4px rgba(245, 165, 36, .18); } }

/* =====================================================================================================
   MANUFACTURING onwards
   ===================================================================================================== */
/* more wordless minis: a queue at the clock, a floor plan with two people unaccounted for */
.shift-hr.hc-page .in-ui .in-uav img { filter: none; }   /* not the frame's screenshot image rule */

/* css/shift.css */
/* ==========================================================================
   Shift, site and field teams pages (body.shift-page): sense-shift-*.html (tools/product/gen_shift_*.py).
   The ATS feature-page layout (css/feature.css) with blue as the menu's accent, the way ATS uses magenta and the HR pages purple (user, 12 Oct).
   Rule of thumb, as ATS and Automate: Sense purple stays on everything you can click (buttons, links, eyebrow pills);
   blue marks the product (light panels, icons, chips, tints, glows, placeholders).
   ========================================================================== */
.shift-hr.shift-page {
  --sh: #1A6FD8;           /* fills */
  --sh-d: #1563C4;         /* text / icons on light (5.6:1 on white) */
  --sh-soft: #EEF5FD;      /* tinted backgrounds */
  --sh-glow: #BFDBFB;      /* blue on dark */
  --sh-line: rgba(26, 111, 216, .2);
}

/* ---------- hero: shift-bg (features-bg turned blue); the floating pills stay Sense purple, to tie the page to the rest of the site (user, 12 Oct) ---------- */
/* the day verified (Verify every hour.svg) in the ATS heroes' glass frame; layout rules shared with them in feature.css */
.shift-hr .ft-stage .mi-shd { grid-column: 1; grid-row: 1; width: 500px; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(26, 111, 216, .14), 0 50px 90px -40px rgba(14, 70, 160, .45); }
@media (max-width: 600px) { .shift-hr .ft-stage .mi-shd { width: 100%; max-width: 500px; } }
@media (min-width: 1440px) {
  .shift-hr .ft-stage:has(.mi-shd) { --rec-half: 258px; }
  .shift-hr .ft-stage:has(.mi-shd) .ft-chip-2 { left: auto; right: -12px; top: auto; bottom: 62px; }   /* astride the card's bottom edge, clear of the tags and the video pill */
}

/* menu links jump to panels by id (Solutions > Time & attendance: #work-patterns, #rules, #exceptions, #payroll): stop where each panel sticks, clear of the nav */
.shift-hr.shift-page .pd-stack-card { scroll-margin-top: calc(96px + var(--i) * 22px); }

/* clocking in machines hero: the "Fingerprint" pill on the left, clear of the clock-ins list */
@media (min-width: 1440px) { .shift-hr .ft-stage:has(.mi-lwh) .ft-chip-2 { left: -5%; right: auto; top: 52%; bottom: auto; } }

/* ---------- stacking panels: .is-sky is the light blue panel in place of the ATS .is-blush; the dark panel glows blue ---------- */
.shift-hr .pd-stack-card.is-sky .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(40, 110, 200, .13), transparent 60%), #EAF2FB; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .11), 0 -20px 60px -30px rgba(15, 45, 90, .28); }
.shift-hr .pd-stack-card.is-sky p { color: var(--text-2); }
.shift-hr .pd-stack-card.is-sky .pd-bullets svg { background: #fff; color: var(--sh-d); }
.shift-hr.shift-page .pd-stack-card.is-light .pd-bullets svg { background: var(--sh-soft); color: var(--sh-d); }
.shift-hr.shift-page .pd-stack-card.is-dark .pd-bullets svg { background: rgba(110, 170, 240, .16); color: var(--sh-glow); }
.shift-hr.shift-page .pd-stack-card.is-dark .pd-stack-inner { background: radial-gradient(70% 80% at 100% 0%, rgba(40, 120, 230, .36), transparent 60%), #0A0D16; }

/* ---------- panel visuals ---------- */
/* the timesheet verification widget (scan timesheets.svg): its purple container turns blue here (user, 12 Oct) */
.shift-hr.shift-page .mi-vf { background-color: #F1F7FE; }   /* -color only: the shorthand would reset background-clip and paint over the translucent glass border */
.shift-hr.shift-page .mi-vf-head { background: #E3F0FD; }
.shift-hr.shift-page .mi-vf-head b { color: #1563C4; }

/* phones: the panel widgets scale down to read at the narrow frame width (as the pre-boarding and Automate panels) */
@media (max-width: 600px) {
  .shift-hr.shift-page .pd-stack-visual .pd-frame:has(> .mi) { padding: 12px; }
  .shift-hr.shift-page .pd-stack-visual .mi { border-width: 5px; }
  .shift-hr.shift-page .pd-stack-visual :is(.mi-vf, .mi-shl, .mi-shm, .mi-shr, .mi-shq, .mi-pe, .mi-gwr, .mi-shd, .mi-lwi, .mi-lws) { zoom: .74; }
  .shift-hr.shift-page .pd-stack-visual .pd-frame:has(> :is(.mi-gwr, .mi-shd, .mi-lwi, .mi-lws)) { aspect-ratio: auto; }
  .shift-hr .mi-gwr { grid-template-columns: minmax(0, 1fr); }
  .shift-hr.shift-page .pd-stack-visual .mi-shf-card { border-width: 5px; }
}

/* ---------- icon tiles (results grid, explore more) ---------- */
.shift-hr.shift-page .pd-tile9-ic { background: var(--sh-soft); color: var(--sh-d); box-shadow: inset 0 0 0 1px var(--sh-line); }

/* ---------- works with what you have: three items beside the one visual ---------- */
.shift-hr .sh-frame-shot::before { display: none; }
.shift-hr.shift-page .sh-frame-shot { background: linear-gradient(160deg, #FFFFFF 0%, #E6EFFA 100%); box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .1); }
.shift-hr .sh-frame-shot img { display: block; width: 100%; height: auto; border-radius: 12px; filter: none; box-shadow: 0 30px 60px -30px rgba(15, 50, 110, .35), 0 0 0 1px rgba(30, 80, 150, .08); }

/* ---------- vertical timeline (onboarding "How it works", user 13 Oct): centre line that fills as you scroll (js/minis.js [data-tl]),
   numbered nodes, copy one side and the step's animated detail the other, alternating ---------- */
.shift-hr .sh-tl-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) {
  .shift-hr .sh-tl-step, .shift-hr .sh-tl-step.is-flip { grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; align-items: start; }
}

.shift-hr .pd-stack-visual :is(.mi-shy-card) { border: 6px solid rgba(255, 255, 255, .16); background-clip: padding-box; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 22px 40px -24px rgba(0, 0, 0, .6); }

/* 05 health and safety (user, 13 Oct): copy + three linked items left, the site safety animation right; the playing item lights */
.shift-hr .sh-sfy-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 18px; color: inherit;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background-color .35s, box-shadow .35s; }
.shift-hr .sh-sfy-item .icon-tile { background: rgba(110, 170, 240, .14); color: var(--sh-glow); box-shadow: inset 0 0 0 1px rgba(110, 170, 240, .24); transition: background-color .35s, color .35s; }

.shift-hr .sh-sfy-item:hover { background: rgba(255, 255, 255, .08); } 
.shift-hr .sh-sfy-item.is-active { background: rgba(110, 170, 240, .12); box-shadow: inset 0 0 0 1.5px rgba(110, 170, 240, .5); }
.shift-hr .sh-sfy-item.is-active .icon-tile { background: var(--sh); color: #fff; }

/* 06 integrate your systems, centred (user, 13 Oct): pill → orbit (no container) → title → paragraph → three items in a row */
.shift-hr .sh-int-item { display: flex; flex-direction: column; align-items: center; padding: clamp(26px, 3vw, 36px); border-radius: var(--r-card, 24px); background: #fff; box-shadow: var(--shadow-sm); text-align: center;
  transition: box-shadow .3s, transform .35s var(--ease-out); }
.shift-hr .sh-int-item:hover, .shift-hr .sh-int-item:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md), 0 0 0 1.5px var(--sh-line); }
.shift-hr .sh-int-item h3 { margin-top: 20px; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.shift-hr .sh-int-item p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.shift-hr .sh-int-item .pd-more { margin-top: auto; padding-top: 18px; }

/* ---------- demo band: the "Meet" card in the light blue of the .is-sky panels; buttons keep the site purple ---------- */
.shift-hr.shift-page .ami-meet { background: linear-gradient(180deg, #F8FBFE 0%, #EEF4FC 55%, #E2ECF9 100%); box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .1); }
.shift-hr.shift-page .ami-meet::before { background: repeating-linear-gradient(90deg, rgba(40, 100, 180, .08) 0 72px, transparent 72px 89px) center top; }
.shift-hr.shift-page .ami-meet::after { background: radial-gradient(38% 60% at 0% 100%, rgba(50, 130, 230, .26), transparent 70%), radial-gradient(38% 60% at 100% 100%, rgba(50, 130, 230, .26), transparent 70%); }
.shift-hr.shift-page .ami-meet-window { box-shadow: 0 40px 100px -30px rgba(15, 50, 110, .3), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(30, 80, 150, .12); }

/* ---------- Sense Gateway (sense-shift-sense-gateway.html) ---------- */
/* hero: the doc gives four badges, so a fourth pill; below 1440 the pills sit in a row under the visual anyway */
.shift-hr .ft-stage.is-in .ft-chip-4 { transition-delay: .75s; }
.shift-hr .ft-chip-4 { animation-delay: -1.6s; animation-duration: 3.8s; }
@media (min-width: 1440px) { .shift-hr .ft-stage.sh-chips4 .ft-chip-4 { left: calc(50% + var(--rec-half) - 64px); right: auto; top: 18%; bottom: auto; animation-name: ftFloatSm; } }
/* "Tag or Badge?": a feature column and two Yes / No columns, centred */
@media (max-width: 600px) {

  .shift-hr.shift-page .pd-stack-btn { white-space: normal; text-align: left; line-height: 1.3; }   /* long link labels wrap inside the panel */
}

/* ---------- Lone worker safety (sense-shift-lone-worker-safety.html) ---------- */
.shift-hr .sh-lw-features .pd-stack-copy .eyebrow + h3 { margin-top: 18px; }   /* each panel keeps the doc's eyebrow */

/* ---------- Core HR feature-page parts on this menu's pages (sense-shift-automate-hr-admin.html, coloured in css/automate.css; sense-shift-hr-compliance.html, purple: body.hc-page below) ---------- */
/* a client screenshot on the panels' card background, the whole screen in view (Automate HR admin: the Workflow Hub) */
.shift-hr .pd-stack-visual .pd-frame.sh-frame-shot { background: #0A0916 url("/assets/images/pages/homepage/ta-card-bg.webp") center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.shift-hr .sh-frame-shot::before { display: none; }
.shift-hr .sh-frame-shot picture { position: absolute; inset: clamp(18px, 2.6vw, 36px); width: auto; height: auto; display: grid; place-items: center; }
.shift-hr .sh-frame-shot img { width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 14px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
/* deep dives with no heading (the doc gives none): the steps sit level with the visual; each step keeps its eyebrow; ticks and link under the text */
.shift-hr .sh-ta { grid-template-areas: "steps shot"; grid-template-rows: 1fr; }
.shift-hr .sh-ta .ta-card-bg { grid-row: 1; }
.shift-hr .sh-ta .ta-steps { margin-top: 0; align-self: center; }
@media (max-width: 900px) { .shift-hr .sh-ta { grid-template-areas: "head" "steps" "shot"; grid-template-rows: none; } .shift-hr .sh-ta .ta-card-bg { grid-row: 3; } }   /* stacked: back to product.css (visual under the steps, on the card) */
.shift-hr .sh-ta .ta-txt { padding-top: 6px; }
.shift-hr .sh-ta .sh-ta-eb { align-self: flex-start; margin-bottom: 12px; }
.shift-hr .sh-ta .pd-ta-more-in > .pd-bullets { margin-top: 16px; }
.shift-hr.shift-page .ta-ic { background: var(--sh-soft); color: var(--sh-d); }   /* the steps' ticks in blue, as ATS has them in magenta */
.shift-hr .sh-ta .ta-list .pd-bullets li { padding: 0; font: 500 15px/1.3 var(--font-body); letter-spacing: 0; color: var(--text); }   /* a step's ticks, not more steps (sections.css styles every .ta-list li) */
.shift-hr.shift-page .sh-ta .pd-bullets svg { background: var(--sh-soft); color: var(--sh-d); }
/* ---------- HR compliance (body.hc-page): Sense purple, as the HR feature pages (user, 3 Nov: "remove the blue and make this page main's accent purple") ---------- */
/* hero: the compliance overview (HR employee records) in the HR heroes' glass frame */
.shift-hr .ft-stage .mi-co { grid-column: 1; grid-row: 1; width: 440px; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(99, 74, 252, .12), 0 50px 90px -40px rgba(49, 30, 160, .5); }
.shift-hr .ft-stage .mi-co .mi-co-head { border-radius: 18px 18px 0 0; }
@media (max-width: 600px) { .shift-hr .ft-stage .mi-co { width: 100%; max-width: 440px; } }
@media (min-width: 1440px) { .shift-hr .ft-stage:has(.mi-co) { --rec-half: 228px; } .shift-hr .ft-stage.sh-chips4:has(.mi-co) .ft-chip-4 { top: 6%; } }   /* above the header, clear of the checks count */
/* the borrowed minis' export blue (Verify hours' day, the incident record) and ATS magenta (the TrustID result) turned Sense purple, as in css/industry.css */
.shift-hr.hc-page .mi-shd-badge { color: var(--brand); }
.shift-hr.hc-page .mi-shd-row.is-checking .mi-shd-dot { animation-name: inShdPulse; }   /* keyframes in css/industry.css */
.shift-hr.hc-page .lwi-dot { background: var(--brand); box-shadow: 0 0 0 3px #EDEAFF; }   /* the first (SOS, red) and last (closed, green) keep theirs */
.shift-hr.hc-page .lwi-saved { background: var(--hc-head); color: var(--brand-hover); }
.shift-hr.hc-page .rr-fi { background: var(--hc-head); color: var(--brand); }
/* every card's header strip and title as the hero's Compliance overview (minis.css .mi-co-head: #F0EFFF, #4931DC semibold) (user, 3 Nov: "all ui from sense hr
   shares the same purple shade for the container hero and font colour") */
.shift-hr.hc-page { --hc-head: #F0EFFF; --hc-head-line: #E7E4FB; }
.shift-hr.hc-page :is(.rr-head, .mi-vf-head, .in-ui-head, .mi-shd-head) { background: var(--hc-head); }
.shift-hr.hc-page .rr-head { border-bottom-color: var(--hc-head-line); }
.shift-hr.hc-page :is(.in-ui-head, .mi-shd-head) { box-shadow: inset 0 -1px 0 var(--hc-head-line); }
.shift-hr.hc-page :is(.rr-head b, .mi-vf-head b, .in-ui-head b, .mi-shd-who b) { color: var(--brand-hover); font-weight: 600; }   /* only text on the lilac strip; names and titles on white stay dark (user, 3 Nov) */
/* phones: the panel widgets scale down to read at the narrow frame width (as the other Shift pages) */
@media (max-width: 600px) {
  .shift-hr.hc-page .pd-stack-visual .pd-frame:has(> .mi) { padding: 12px; }
  .shift-hr.hc-page .pd-stack-visual .mi { border-width: 5px; }
  .shift-hr.hc-page .pd-stack-visual :is(.in-cert, .mi-er, .mi-rr, .mi-vf) { zoom: .74; }
}
/* ---------- Recruitment and retention (body.ats-page.rnr-page): ATS magenta, as the ATS feature pages (css/feature.css .ats-page; user, 3 Nov) ---------- */
.shift-hr.rnr-page .sh-ta .pd-bullets svg { background: #FAF1FB; color: #9802A0; }   /* a step's ticks as the step ticks (.ats-page .ta-ic) */
@media (min-width: 1440px) { .shift-hr .ft-stage.sh-chips4:has(.mi-pb) .ft-chip-4 { top: 6%; } }   /* hero: the fourth pill on the pipeline card's top edge, clear of its tabs */
.shift-hr.rnr-page .qs-head { background: #FAF1FB; color: #9802A0; }   /* the ATS cards' header strips in one pink, their titles in one magenta (the job page's, --ats-soft / --ats-d), as HR compliance's (user, 3 Nov) */
@media (max-width: 600px) {   /* phones: Quizzy's list scales down to read at the narrow frame width, as the other Features pages' panel widgets */
  .shift-hr.rnr-page .pd-stack-visual .pd-frame:has(> .mi) { padding: 12px; }
  .shift-hr.rnr-page .pd-stack-visual .mi { border-width: 5px; }
  .shift-hr.rnr-page .pd-stack-visual .mi-qs { zoom: .74; }
}
/* ---------- Staff management (body.sm-page): the menu's blue ---------- */
/* hero: the clock-ins (Time and attendance) in the HR heroes' glass frame */
.shift-hr .ft-stage .mi-shm { grid-column: 1; grid-row: 1; width: 460px; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(30, 80, 150, .12), 0 50px 90px -40px rgba(15, 50, 110, .45); }
@media (max-width: 600px) { .shift-hr .ft-stage .mi-shm { width: 100%; max-width: 460px; } }
@media (min-width: 1440px) { .shift-hr .ft-stage:has(.mi-shm) { --rec-half: 230px; } .shift-hr .ft-stage.sh-chips4:has(.mi-shm) .ft-chip-4 { top: 6%; } }
/* "Accessible Everywhere": the Sense app home screen (the Mobile app hero's phone), centred in the steps' dark frame with a drop shadow, not the screenshots' card shadow */
.shift-hr.sm-page .ta-frame .sm-app { position: relative; width: 100%; height: 440px; }   /* the frames size to their content (the minis), so the phone gets a height */
@media (max-width: 600px) { .shift-hr.sm-page .ta-frame .sm-app { height: 360px; } }
.shift-hr.sm-page .ta-frame .sm-app img { max-height: 100%; border-radius: 0; box-shadow: none; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .5)); }
/* ---------- Forms (body.fm-page): the Forms product's orange with grey (user, 4 Nov, the Figma Forms UI: signal #FF4C09, deep #CC3500, tint #FFE8DE, canvas #F4F4F5) ---------- */
/* hero: the check-in phone (fm_checkin) in the heroes' glass frame */
.shift-hr .ft-stage .mi-fmh { grid-column: 1; grid-row: 1; width: 330px; border: 8px solid rgba(255, 255, 255, .6); background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(204, 53, 0, .12), 0 50px 90px -40px rgba(120, 40, 10, .45); }
@media (max-width: 600px) { .shift-hr .ft-stage .mi-fmh { width: 100%; max-width: 330px; } }
@media (min-width: 1440px) { .shift-hr .ft-stage:has(.mi-fmh) { --rec-half: 165px; } .shift-hr .ft-stage.sh-chips4:has(.mi-fmh) .ft-chip-4 { top: 2%; } }   /* the fourth pill above the phone, clear of the form's title */
/* the grey panel, in place of the blue .is-sky; the dark panel glows orange */
.shift-hr .pd-stack-card.is-grey .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(255, 76, 9, .1), transparent 60%), #F4F4F5; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(9, 9, 11, .07), 0 -20px 60px -30px rgba(40, 20, 10, .24); }
.shift-hr .pd-stack-card.is-grey p { color: var(--text-2); }
.shift-hr .pd-stack-card.is-grey .pd-bullets svg { background: #fff; color: #CC3500; }
.shift-hr.fm-page .pd-stack-card.is-dark .pd-stack-inner { background: radial-gradient(70% 80% at 100% 0%, rgba(255, 90, 30, .3), transparent 60%), #0C0B0A; }
.shift-hr.fm-page .pd-stack-card.is-dark .pd-bullets svg { background: rgba(255, 90, 30, .18); color: #FF9466; }
/* the steps cycle: ticks and bar in orange (as ATS has them in magenta) */
.shift-hr.fm-page .ta-bar { background: rgba(255, 76, 9, .12); }
.shift-hr.fm-page .ta-bar-fill { background: #FF4C09; }
.shift-hr.fm-page .ta-ic { background: #FFE8DE; color: #CC3500; }
.shift-hr.fm-page .sh-ta .pd-bullets svg { background: #FFE8DE; color: #CC3500; }
/* demo band: the "Meet" card in the Forms grey, with an orange glow; buttons keep the site purple */
.shift-hr.fm-page .ami-meet { background: linear-gradient(180deg, #FAFAFB 0%, #F4F4F5 55%, #ECECEF 100%); box-shadow: inset 0 0 0 1px rgba(9, 9, 11, .08); }
.shift-hr.fm-page .ami-meet::before { background: repeating-linear-gradient(90deg, rgba(9, 9, 11, .05) 0 72px, transparent 72px 89px) center top; }
.shift-hr.fm-page .ami-meet::after { background: radial-gradient(38% 60% at 0% 100%, rgba(255, 90, 30, .24), transparent 70%), radial-gradient(38% 60% at 100% 100%, rgba(255, 90, 30, .24), transparent 70%); }
.shift-hr.fm-page .ami-meet-window { box-shadow: 0 40px 100px -30px rgba(60, 25, 10, .3), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(9, 9, 11, .1); }
/* the Forms cards keep long sample lines on one line (ellipsis), so their frames' grid column must not grow to them on narrow screens */
.shift-hr.fm-page .pd-ta-frame, .shift-hr.fm-page .pd-stack-visual .pd-frame:has(> .mi-fm) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {   /* phones: the panels' Forms cards scale down to read at the narrow frame width, as the other Features pages' panel widgets */
  .shift-hr.fm-page .pd-stack-visual .pd-frame:has(> .mi) { padding: 12px; }
  .shift-hr.fm-page .pd-stack-visual .mi { border-width: 5px; }
  .shift-hr.fm-page .pd-stack-visual .mi-fms { zoom: .74; }
  .shift-hr.fm-page .ta-shot .mi-fmr, .shift-hr.fm-page .ta-shot .mi-fmw { zoom: .86; }
}

/* css/automate.css */
/* ==========================================================================
   Sense Automate product pages (body.au-page). First: sense-automate-workflow-builder.html (tools/product/gen_automate_builder.py)
   Builds on the HR product page components in product.css. Rule of thumb: Sense purple stays on everything you can click
   (buttons, links); Automate green marks the product (labels, dots, checks, icons, tints, glows).
   ========================================================================== */
.shift-hr.au-page {
  --au: #00CD9C;            /* Automate green — fills, icons, dots, glows (2.1:1 on white: never small text on light) */
  --au-soft: #EBFFF7;       /* Automate mint — tinted backgrounds */
  --au-deep: #00A37C;       /* icons on mint */
  --au-ink: #007A5C;        /* green text on light / mint backgrounds (5.2:1 on #EBFFF7) */
  --au-glow: #7DF2D2;       /* green text on dark backgrounds */
  --au-line: rgba(0, 205, 156, .28);
}

/* ---------- shared accents ---------- */
.shift-hr.au-page .eyebrow:not(.on-dark) { background: var(--au-soft); color: var(--au-ink); box-shadow: inset 0 0 0 1px var(--au-line); }
.shift-hr.au-page .pd-bullets svg { background: var(--au-soft); color: var(--au-deep); box-shadow: inset 0 0 0 1px var(--au-line); }
.shift-hr.au-page .pd-frame { background: linear-gradient(160deg, #F3FFFA 0%, #DDF8EC 100%); }
.shift-hr.au-page .pd-frame::before { background: repeating-linear-gradient(90deg, rgba(0, 205, 156, .10) 0 56px, transparent 56px 70px); }

/* ---------- 04a stacking panels — Automate themes ---------- */
/* every panel's visual sits on the site's card background (cards-image-bg), as on the HR pages — animated minis and the static Connect image alike */
.shift-hr.au-page .pd-stack-card .pd-stack-visual .pd-frame { background: #0A0916 url("/assets/images/pages/homepage/ta-card-bg.webp") center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.shift-hr.au-page .pd-stack-card .pd-stack-visual .pd-frame::before { display: none; }
@media (max-width: 600px) {   /* phones: a slimmer frame + workflow card so the animated cards keep their text on one line */
  .shift-hr.au-page .pd-stack-visual .pd-frame:has(> .mi) { padding: 14px; }
  .shift-hr.au-page .pd-stack-visual .mi { border-width: 5px; }
  .shift-hr.au-page .pd-stack-visual .mi-au { padding: 16px 14px 28px; }
}
.shift-hr.au-page .pd-stack-card.is-dark .pd-stack-inner { background: radial-gradient(70% 80% at 100% 0%, rgba(0, 205, 156, .30), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(99, 74, 252, .28), transparent 65%), #0B0A14; }
.shift-hr.au-page .pd-stack-card.is-dark .pd-bullets svg { background: rgba(0, 205, 156, .16); color: var(--au-glow); box-shadow: none; }
.shift-hr.au-page .pd-stack-card.is-mint .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(0, 205, 156, .22), transparent 60%), var(--au-soft); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--au-line), 0 -20px 60px -30px rgba(0, 70, 52, .3); }
.shift-hr.au-page .pd-stack-card.is-mint p { color: var(--text-2); }
.shift-hr.au-page .pd-stack-card.is-mint .pd-bullets svg { background: #fff; }
.shift-hr.au-page .pd-stack-card.is-purple .pd-bullets svg { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }

/* ---------- 05 CTA — Meet card in Automate mint ---------- */
.shift-hr.au-page .au-meet { background: linear-gradient(180deg, #F7FFFB 0%, var(--au-soft) 55%, #D8FAEB 100%); box-shadow: inset 0 0 0 1px var(--au-line); }
.shift-hr.au-page .au-meet::before { background: repeating-linear-gradient(90deg, rgba(0, 205, 156, .11) 0 72px, transparent 72px 89px) center top; }
.shift-hr.au-page .au-meet::after { background: radial-gradient(38% 60% at 0% 100%, rgba(0, 205, 156, .34), transparent 70%), radial-gradient(38% 60% at 100% 100%, rgba(0, 205, 156, .34), transparent 70%); }   /* green in both corners: no purple (user, 6 Oct) */
.shift-hr.au-page .au-meet .ami-meet-window { box-shadow: 0 40px 100px -30px rgba(0, 100, 75, .3), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 163, 124, .14); }

/* ---------- Automate HR admin (sense-shift-automate-hr-admin.html, body.au-page.ah-page): the Shift menu's Core HR feature-page layout in Automate green
   (user, 2 Nov: "make the accent for this page green - like the automate page"). Layout rules shared with the Shift pages stay in css/shift.css ---------- */
/* hero: automate-bg (features-bg turned green, as shift-bg turned it blue); the floating pills stay Sense purple, as on the Shift pages (user, 2 Nov) */
/* the active workflows (active_workflows) in the glass frame, as the other heroes' cards */
.shift-hr.au-page .ft-stage .mi-auwf { grid-column: 1; grid-row: 1; width: 480px; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(0, 163, 124, .16), 0 50px 90px -40px rgba(0, 100, 75, .45); }
@media (max-width: 600px) { .shift-hr.au-page .ft-stage .mi-auwf { width: 100%; max-width: 480px; } }
@media (min-width: 1440px) { .shift-hr.au-page .ft-stage:has(.mi-auwf) { --rec-half: 248px; } .shift-hr.au-page .ft-stage:has(.mi-auwf) .ft-chip-2 { left: auto; right: -12px; top: auto; bottom: 44px; } }   /* astride the card's bottom right corner, on the page */
/* stacking panels: mint (.is-mint) in place of the Shift sky; the dark panel's eyebrow in green */
.shift-hr.ah-page .pd-stack-card.is-dark .eyebrow.on-dark { color: var(--au-glow); box-shadow: inset 0 0 0 1px rgba(0, 205, 156, .35); }
@media (max-width: 600px) { .shift-hr.ah-page .pd-stack-visual .mi-shr { zoom: .74; } }
/* deep dives (Dynamic Automation, Reach Everyone, Connect Your Systems): accents stay Sense purple (user, 2 Nov): the ticks and progress bar keep
   sections.css' purple; the eyebrows and bullet ticks are put back from the green above */
.shift-hr.ah-page .sh-ta .eyebrow { background: var(--card); color: var(--brand-hover); box-shadow: var(--shadow-sm); }
.shift-hr.ah-page .sh-ta .pd-bullets svg { background: var(--brand-10); color: var(--brand); box-shadow: none; }
/* explore more: the icons in green */
.shift-hr.ah-page .pd-tile9-ic { background: var(--au-soft); color: var(--au-deep); box-shadow: inset 0 0 0 1px var(--au-line); }
/* Make It Yours (attendance_rules) and Workflows That Know Who Is On Shift (late_start): Sense HR purple, not the Shift exports' blue (as css/industry.css) */
.shift-hr.ah-page .mi-shr-head { background: #F1EEFF; }
.shift-hr.ah-page .mi-shr-head b { color: var(--brand-hover); }
.shift-hr.ah-page .mi-shr-pill { box-shadow: inset 0 0 0 1px #E2DDFB; }
.shift-hr.ah-page .mi-shr-track i, .shift-hr.ah-page .mi-shr-tg.is-on { background: var(--brand); }
.shift-hr.ah-page .mi-shr-track b { box-shadow: 0 0 0 2px var(--brand), 0 2px 5px rgba(0, 0, 0, .15); }
.shift-hr.ah-page .mi-shr-wf.is-on { background: #F6F4FF; box-shadow: inset 0 0 0 1.5px #CFC6FB; }
.shift-hr.ah-page .mi-shr-wf.is-on .mi-shr-wf-ic { background: var(--brand); }
.shift-hr.ah-page .mi-shl-head { background: #F1EEFF; }
.shift-hr.ah-page .mi-shl-pat { background: repeating-linear-gradient(135deg, #E2DCFF 0 5px, #EFECFF 5px 10px); box-shadow: inset 0 0 0 1px #CFC6FB; }
.shift-hr.ah-page .mi-shl-note { background: #F1EEFF; color: var(--brand-hover); }
/* Reach Everyone (mobile_docs): the row the cursor taps, and the new payslip it opens onto, light blue like the app's icons (user, 2 Nov) */
.shift-hr.ah-page .mi-md-row.is-press { background: #E3EDFE; }
.shift-hr.ah-page .mi-md-doc.is-new { background: #EEF4FF; box-shadow: inset 0 0 0 1.5px #7FA8F8; }
/* Connect Your Systems (au_connect, made for the Workflow builder's white value cards): a white card behind it, in the other minis' glass frame */
.shift-hr.au-page .ah-connect { position: relative; width: min(440px, 100%); padding: 10px 12px; border-radius: 24px; background: #fff; border: 8px solid rgba(255, 255, 255, .16); background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.shift-hr.au-page .ah-connect::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(0, 163, 124, .12) 1px, transparent 1.2px) 0 0 / 16px 16px; }
.shift-hr.au-page .ah-connect .mi { position: relative; height: auto; border: 0; }

/* ===== KIT OPTIONS (design-port) */
/* Without JS, or when the page script failed to run (the guard after it removes .js), every stepper step shows its paragraph. */
html:not(.js) .shift-hr .pd-ta .pd-ta-more { grid-template-rows: 1fr; }
/* and every step's screen shows, one under another, not only the first. */
html:not(.js) .shift-hr .pd-ta .ta-frame { grid-area: auto; opacity: 1; transform: none; }
html:not(.js) .shift-hr .pd-ta .ta-shot { gap: 24px; }
/* While a stacking card holds keyboard focus it scrolls with the page instead of sticking (WCAG 2.4.11). */
.shift-hr .pd-stack-card:has(:focus-visible) { position: relative; top: auto; }
/* Phones: a zero minimum keeps a stacking card's single column inside the card, however wide its mock-up. */
@media (max-width: 900px) { .shift-hr .pd-stack-inner { grid-template-columns: minmax(0, 1fr); } }
/* a stepper mock-up never runs past its frame */
.shift-hr .pd-ta .mi { max-width: 100%; }

/* Phones: the buttons keep the export's one-line labels (white-space: nowrap), so the longer ones ran past their card at 320-390px on
   the Shift pages (shift-pages port, checks run 1). There they wrap inside the card, as on shift-feature.css. */
@media (max-width: 420px) {
  .shift-hr .btn { max-width: 100%; height: auto; min-height: var(--btn-h); padding-block: 12px; white-space: normal; line-height: 1.3; text-align: center; }
}

/* Keyboard focus rings (checks run 2; WCAG 2.4.7, 1.4.11), as the shift and ATS overview pages. On the coloured heroes the brand ring
   measured 1.6-3.1:1: the dark "Watch 4 min video" pill takes a ring in the text colour, the hero buttons the darker brand purple. */
.shift-hr .pd-play:focus-visible { outline-color: var(--text); }
.shift-hr .ft-hero .cta-group :focus-visible { outline-color: var(--brand-hover); }
/* HR compliance's first panel is Sense purple, where the brand ring vanishes (1.0:1): it takes white, as on the dark panels. */
.shift-hr .pd-stack-card.is-purple :focus-visible { outline-color: #fff; }
/* stepper: each step's text sits in an overflow-hidden box (a step opens by animating its height), which cut off the ring of its link
   (1.0:1 on the left and bottom). Room either side always; room below only on an open step (and with no JS, when every step is open),
   so a closed step, 0 px tall, still shows nothing. The negative margins keep the layout as it was (as ATS overview's). */
.shift-hr .pd-ta-more-in { padding-inline: 6px; margin-inline: -6px; }
.shift-hr .pd-ta .ta-list > li.is-active .pd-ta-more-in, html:not(.js) .shift-hr .pd-ta .pd-ta-more-in { padding-bottom: 6px; margin-bottom: -6px; }

@supports (zoom: 1) {
  /* recruitment-and-retention */
  @media (min-width: 901px) and (max-width: 959.98px) { .shift-hr.ats-page .mi[data-mini="pb"] { zoom: 0.95; } }   /* worst -13.4 px at 901 (DIV.mi.mi-pb), was 1 */
  @media (min-width: 901px) and (max-width: 939.98px) { .shift-hr.ats-page .mi[data-mini="jp"] { zoom: 0.95; } }   /* worst -11.3 px at 901 (SPAN.), was 1 */
  @media (max-width: 319.98px) { .shift-hr.ats-page .mi[data-mini="pe"] { zoom: 0.95; } }   /* worst -14.4 px at 300 (DIV.mi.mi-pe.is-m1.is-m2.is-signed.is-reply), was 1 */
  @media (min-width: 901px) and (max-width: 919.98px) { .shift-hr.ats-page .mi[data-mini="pe"] { zoom: 0.85; } }   /* worst -49.9 px at 901 (DIV.mi.mi-pe.is-m1.is-m2.is-signed.is-reply), was 1; set by hand from the sweep's 0.9 (K26): mid-loop (is-t1, the agent typing) the card is wider than its end state and ran 6 px past a 901 px viewport (checks run 4) */
  @media (min-width: 920px) and (max-width: 1009.98px) { .shift-hr.ats-page .mi[data-mini="pe"] { zoom: 0.95; } }   /* worst -40.2 px at 920 (DIV.mi.mi-pe.is-m1.is-m2.is-signed.is-reply), was 1 */
  @media (min-width: 1101px) and (max-width: 1129.98px) { .shift-hr.ats-page .mi[data-mini="pe"] { zoom: 1.1; } }   /* worst -7.3 px at 1101 (DIV.mi.mi-pe.is-m1.is-m2.is-signed.is-reply), was 1.14 */
  /* automate-hr-admin */
  @media (max-width: 309.98px) { .shift-hr.au-page .mi[data-mini="au2"] { zoom: 0.75; } }   /* worst -45.8 px at 300 (SPAN.), was 1 */
  @media (min-width: 310px) and (max-width: 319.98px) { .shift-hr.au-page .mi[data-mini="au2"] { zoom: 0.8; } }   /* worst -38.8 px at 310 (SPAN.), was 1 */
  @media (min-width: 320px) and (max-width: 339.98px) { .shift-hr.au-page .mi[data-mini="au2"] { zoom: 0.85; } }   /* worst -31.8 px at 320 (SPAN.), was 1 */
  @media (min-width: 340px) and (max-width: 349.98px) { .shift-hr.au-page .mi[data-mini="au2"] { zoom: 0.9; } }   /* worst -17.8 px at 340 (SPAN.), was 1 */
  @media (min-width: 350px) and (max-width: 358.98px) { .shift-hr.au-page .mi[data-mini="au2"] { zoom: 0.95; } }   /* worst -10.8 px at 350 (SPAN.), was 1 */
  /* staff-management */
  @media (min-width: 901px) and (max-width: 979.98px) { .shift-hr.shift-page .mi[data-mini="vf"] { zoom: 0.95; } }   /* worst -32.5 px at 901 (DIV.mi.mi-vf), was 1 */
  /* forms */
  @media (max-width: 309.98px) { .shift-hr.fm-page .mi[data-mini="fmh"] { zoom: 0.95; } }   /* worst -5.6 px at 300 (SPAN.fm-chk), was 1 */
  @media (max-width: 309.98px) { .shift-hr.fm-page .mi[data-mini="fmr"] { zoom: 0.75; } }   /* worst -24.8 px at 300 (SPAN.fm-stats), was 0.86 */
  @media (min-width: 310px) and (max-width: 329.98px) { .shift-hr.fm-page .mi[data-mini="fmr"] { zoom: 0.8; } }   /* worst -14.8 px at 310 (SPAN.fm-stats), was 0.86 */
  /* hr-compliance */
  @media (min-width: 901px) and (max-width: 919.98px) { .shift-hr.hc-page .mi[data-mini="vf"] { zoom: 0.85; } }   /* worst -48.2 px at 901 (DIV.mi.mi-vf), was 1 */
  @media (min-width: 920px) and (max-width: 969.98px) { .shift-hr.hc-page .mi[data-mini="vf"] { zoom: 0.9; } }   /* worst -40 px at 920 (DIV.mi.mi-vf), was 1 */
  @media (min-width: 970px) and (max-width: 1019.98px) { .shift-hr.hc-page .mi[data-mini="vf"] { zoom: 0.95; } }   /* worst -18.4 px at 970 (DIV.mi.mi-vf), was 1 */
  @media (max-width: 309.98px) { .shift-hr.hc-page .mi[data-mini="shd"] { zoom: 0.7; } }   /* worst -84 px at 300 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 310px) and (max-width: 329.98px) { .shift-hr.hc-page .mi[data-mini="shd"] { zoom: 0.75; } }   /* worst -74 px at 310 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 330px) and (max-width: 339.98px) { .shift-hr.hc-page .mi[data-mini="shd"] { zoom: 0.8; } }   /* worst -54 px at 330 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 340px) and (max-width: 358.98px) { .shift-hr.hc-page .mi[data-mini="shd"] { zoom: 0.85; } }   /* worst -44 px at 340 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 359px) and (max-width: 369.98px) { .shift-hr.hc-page .mi[data-mini="shd"] { zoom: 0.9; } }   /* worst -17 px at 359 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 370px) and (max-width: 379.98px) { .shift-hr.hc-page .mi[data-mini="shd"] { zoom: 0.95; } }   /* worst -14 px at 370 (SPAN.mi-shd-tag.is-warn), was 1 */
}