/* Shift, site and field teams overview (industries.html). Converted once on 2026-10-15 from the design export sense-shift-overview-share.html (tokens, base, sections, agents, product, minis, feature, shift; nav.css is left to nav-footer-new.css), scoped to main.shift-overview and trimmed to the rules this page can match; maintained by hand from here on. */

/* ===== PAGE-LEVEL RULES (html, body): START: the page canvas; every other rule is scoped to main.shift-overview */

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) */

/* ===== 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-overview {
  /* 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-overview {
    --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-overview *, .shift-overview *::before, .shift-overview *::after { box-sizing: border-box; }
.shift-overview {
  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-overview img, .shift-overview picture, .shift-overview svg { display: block; max-width: 100%; }
.shift-overview img { height: auto; }
.shift-overview a { color: inherit; text-decoration: none; }
.shift-overview button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.shift-overview ul { list-style: none; margin: 0; padding: 0; }
.shift-overview p { margin: 0; }
.shift-overview h1, .shift-overview h2, .shift-overview h3, .shift-overview h4, .shift-overview h5 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-display); color: inherit; }
.shift-overview h1 { font-size: var(--fs-h1); line-height: 1.06; }
.shift-overview h2 { font-size: var(--fs-h2); line-height: 1.12; }
.shift-overview h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.025em; }
.shift-overview h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }
.shift-overview h5 { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
.shift-overview b, .shift-overview strong { font-weight: 600; }

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

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

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

/* Dark inset panel — the reference's signature black rounded card */
.shift-overview .frame { margin-inline: var(--frame-inset); border-radius: var(--r-panel); position: relative; overflow: hidden; isolation: isolate; }
.shift-overview .frame-dark { background: var(--ink); color: var(--text-inv); }

/* Eyebrow pill */
.shift-overview .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-overview .eyebrow.on-dark { background: rgba(255, 255, 255, .08); color: #DCD6FF; box-shadow: inset 0 0 0 1px var(--line-inv); }

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

/* ---------- Buttons ---------- */
.shift-overview .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-overview .btn:hover { transform: scale(.97); }            /* standing rule: every button scales to .97 */
.shift-overview .btn:active { transform: scale(.95); }
.shift-overview .btn-lg { --btn-h: 52px; padding: 0 26px; font-size: 16px; }
.shift-overview .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-overview .btn-primary:hover { background: var(--btn-primary-bg-hover); }
.shift-overview .btn-secondary { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.shift-overview .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-hover); }
.shift-overview .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-overview .btn-secondary-dark:hover { background: rgba(255, 255, 255, .12); }

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

/* ---------- Icon tile ---------- */
.shift-overview .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-overview .icon-tile svg { width: 20px; height: 20px; }

/* ---------- Scroll reveal (fade-up, staggered by JS via --i) ---------- */
.js .shift-overview .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-overview .reveal.in { opacity: 1; transform: none; }

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

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

/* ---------- shared heads ---------- */
.shift-overview .center-head { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.shift-overview .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
   ========================================================================== */

.shift-overview .hero-inner { display: flex; flex-direction: column; align-items: center; }
.shift-overview .hero-copy { max-width: 920px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.shift-overview .hero-copy h1 { color: #fff; text-wrap: balance; }
.shift-overview .hero-copy .lede { max-width: 620px; margin-top: 24px; }
.shift-overview .hero-copy .cta-group { margin-top: 36px; justify-content: center; }
.js .shift-overview .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; } }
.shift-overview .word-reveal-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.shift-overview .word-reveal { display: inline-block; transform: translateY(110%); animation: wordUp .8s var(--ease-out) forwards; }
@keyframes wordUp { to { transform: none; } }

.shift-overview .hero-visual { position: relative; width: 100%; max-width: 1180px; margin-top: 72px; perspective: 1400px; }
.shift-overview .hero-window {
  position: relative; padding: 8px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
  box-shadow: 0 40px 100px -30px rgba(33, 18, 140, .7), inset 0 0 0 1px rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--tilt, 1) * 14deg)) scale(calc(1 - var(--tilt, 1) * .04));
  will-change: transform;
}
.shift-overview .hero-window img { width: 100%; border-radius: 19px; }

.shift-overview .float-card { background: #fff; color: var(--text); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.shift-overview .hero-floats { position: absolute; inset: 0; pointer-events: none; }
.shift-overview .feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; transition: background-color .5s; }
.shift-overview .feed-item.is-active { background: var(--brand-10); }

.shift-overview .chip { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 14px; font: 500 13.5px/1.2 var(--font-body); white-space: nowrap; animation: floatY 6s ease-in-out infinite; }
.shift-overview .chip-check { width: 24px; height: 24px; border-radius: 50%; background: var(--live-bg); color: var(--live); display: grid; place-items: center; flex-shrink: 0; }
.shift-overview .chip-check svg { width: 13px; height: 13px; }
.shift-overview .chip-1 { right: -40px; top: 9%; }
.shift-overview .chip-2 { right: -64px; top: 42%; animation-delay: -1.5s; }
.shift-overview .chip-3 { left: 6%; bottom: 8%; animation-delay: -3s; }
.shift-overview .chip-4 { right: 12%; bottom: -22px; animation-delay: -4.5s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.js .shift-overview .hero-floats .float-card { opacity: 0; scale: .92; transition: opacity .7s var(--ease-out), scale .7s var(--ease-out); }
.js .shift-overview .hero-floats.in .float-card { opacity: 1; scale: 1; }
.shift-overview .hero-floats.in .chip-1 { transition-delay: .15s; } .shift-overview .hero-floats.in .chip-2 { transition-delay: .3s; }
.shift-overview .hero-floats.in .chip-3 { transition-delay: .45s; } .shift-overview .hero-floats.in .chip-4 { transition-delay: .6s; }

@media (max-width: 1280px) {
   .shift-overview .chip-1 { right: -12px; } .shift-overview .chip-2 { right: -12px; }
}
@media (max-width: 900px) {
  .shift-overview .hero-visual { margin-top: 48px; }
  .shift-overview .hero-floats { position: static; pointer-events: auto; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .shift-overview .hero-chips { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .shift-overview .hero-chips::-webkit-scrollbar { display: none; }
  .shift-overview .chip { position: static; scroll-snap-align: start; animation: none; box-shadow: var(--shadow-sm); }
}
@media (max-width: 767px) {
  .shift-overview .hero-window { padding: 5px; border-radius: 16px; }
  .shift-overview .hero-window img { border-radius: 12px; }
  .shift-overview .hero-copy .cta-group { width: 100%; flex-direction: column; }
  .shift-overview .hero-copy .cta-group .btn { width: 100%; }
}

/* ==========================================================================
   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-overview .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-overview .ta-frame.is-active { opacity: 1; transform: none; }
.shift-overview .ta-frame:nth-child(1) img { max-width: 80%; max-height: 80%; }
.shift-overview .ta-frame:nth-child(2) img { box-shadow: none; border-radius: 0; }
.shift-overview .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); }

/* ==========================================================================
   11 GET STARTED — pinned section: marquee headline behind product image,
   copy + buttons reveal on scroll (progress in --p, set by JS)
   ========================================================================== */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   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) {
  .shift-overview .chip { animation: none !important; }
  .shift-overview .hero-window { transform: none; }
  .js .shift-overview .hero-anim { opacity: 1; transform: none; }
  .js .shift-overview .hero-floats .float-card { opacity: 1; scale: 1; }
}

/* 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.
   ========================================================================== */

/* ---------- 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-overview .ami-meet-wrap { position: relative; }
.shift-overview .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-overview .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-overview .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-overview .ami-meet-copy { max-width: 720px; margin: 0 auto; }
.shift-overview .ami-meet-copy h2 { color: var(--text); }
.shift-overview .ami-meet-copy p { margin: 18px auto 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 620px; }
.shift-overview .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-overview .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-overview .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-overview .ami-meet-shot { height: 220px; }
}

/* 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).
   ========================================================================== */

/* ---------- 01 HERO — dark: bg_1 artwork fills the rounded hero frame; the screen is cropped by the frame's bottom edge ---------- */
.shift-overview .pd-hero { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--frame-inset) + 150px); color: var(--text-inv); }
.shift-overview .pd-hero-bg { position: absolute; z-index: -1; inset: var(--frame-inset) var(--frame-inset) 0; overflow: hidden; border-radius: var(--r-panel) var(--r-panel) 0 0; background: #0A0B24; }
.shift-overview .pd-hero-bg picture, .shift-overview .pd-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0; }
/* the screen runs flat and is cut off by the bottom of the hero / prism panel */
.shift-overview .pd-hero .hero-visual { height: clamp(380px, 44vw, 640px); margin-top: 72px; perspective: none; clip-path: inset(-120px -200px 0 -200px); }   /* clip only the bottom: floating chips can still overhang the sides */
.shift-overview .pd-hero .hero-window { transform: none; will-change: auto; }
.shift-overview .pd-hero .chip-2 { display: none; }
.shift-overview .pd-hero .chip-1 { top: 12%; right: -44px; }
.shift-overview .pd-hero .chip-3 { left: -40px; bottom: auto; top: 40%; }
.shift-overview .pd-hero .chip-4 { right: 8%; bottom: auto; top: 70%; }
.shift-overview .pd-hero .pd-play { top: 34%; white-space: nowrap; }
.shift-overview .pd-hero .hero-copy h1 { color: #fff; }
.shift-overview .pd-hero .hero-copy .lede { color: var(--text-inv-2); margin-top: 52px; }   /* clears the chip at the bottom of its float (+22px) */
@media (max-width: 900px) {
  .shift-overview .pd-hero { padding-top: calc(var(--frame-inset) + 120px); }
  .shift-overview .pd-hero .hero-visual { height: 64vw; margin-top: 40px; clip-path: inset(-40px -40px 0 -40px); }
  .shift-overview .pd-hero .hero-floats { display: none; }
}
.shift-overview .pd-hero .hero-copy { max-width: 1240px; }   /* room for a one-line title on wide screens */
/* floating purple card, as the AMI page header chip (agents.css .ami-chip + qzFloat) */
.shift-overview .pd-hero .hero-copy .lede { max-width: 680px; }
.shift-overview .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-overview .pd-play:hover { transform: translate(-50%, -50%) scale(.97); background: rgba(11, 10, 20, .85); }
.shift-overview .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-overview .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-overview .pd-play { height: 44px; padding: 0 16px 0 6px; font-size: 13px; gap: 8px; top: 50%; }
  .shift-overview .pd-play-ic { width: 32px; height: 32px; }
}

/* ---------- 03 BIG CLAIM — Zyntexa style giant line, auto-scrolling like the home page's "Get started" marquee (4 copies, -50% loop) ---------- */
.shift-overview .pd-claim { position: relative; overflow: clip; padding: clamp(72px, 9vw, 140px) 0 clamp(24px, 3vw, 48px); text-align: center; }
.shift-overview .pd-claim-marquee { overflow: hidden; }
.shift-overview .pd-claim-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.shift-overview .pd-claim-text { flex-shrink: 0; padding: 0 .5em .08em 0; margin: 0; white-space: nowrap; text-wrap: nowrap; font: 500 clamp(76px, 12.5vw, 210px)/1 var(--font-display); letter-spacing: -0.055em; color: var(--ink); }
.shift-overview .pd-claim-tile { position: absolute; left: 50%; top: 50%; width: clamp(86px, 9vw, 132px); aspect-ratio: 1; margin: calc(clamp(86px, 9vw, 132px) / -2 - 30px) 0 0 calc(clamp(86px, 9vw, 132px) / -2);
  border-radius: 30%; display: grid; place-items: center; background: linear-gradient(145deg, #8C7BFF 0%, #634AFC 48%, #3A22C9 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -10px 22px rgba(20, 8, 90, .45), 0 34px 60px -18px rgba(62, 36, 214, .65); animation: pdTile 5s ease-in-out infinite alternate; }
.shift-overview .pd-claim-tile img { width: 50%; height: 50%; filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(20, 8, 90, .4)); }
@keyframes pdTile { from { transform: translate(-18px, -10px) rotate(-10deg); } to { transform: translate(18px, 12px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .shift-overview .pd-claim-track { animation: none; width: 100%; justify-content: center; padding-inline: var(--gutter); }
  .shift-overview .pd-claim-text { font-size: clamp(48px, 8vw, 120px); white-space: normal; text-wrap: balance; padding-right: 0; }
  .shift-overview .pd-claim-text[aria-hidden] { display: none; }
  .shift-overview .pd-claim-tile { display: none; }
}

/* ---------- 04 CHAPTERS — shared head + module label + "Learn more" ---------- */
.shift-overview .pd-chapter-head { position: relative; max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; }
.shift-overview .pd-chapter-head .eyebrow { margin-bottom: 18px; }
.shift-overview .pd-chapter-head h2 { color: inherit; }
.shift-overview .pd-more { display: inline-block; margin-top: 24px; font: 500 15px/1.4 var(--font-body); color: var(--brand-hover); transition: color .2s; }
.shift-overview .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-overview .pd-more:hover { color: var(--brand); }
.shift-overview .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-overview .pd-stack { position: relative; margin-top: clamp(48px, 5vw, 72px); }
.shift-overview .pd-stack-card { --p: 0; position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 36px; }
.shift-overview .pd-stack-card:last-child { margin-bottom: 0; }
.shift-overview .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-overview .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-overview .pd-stack-copy { position: relative; z-index: 1; max-width: 500px; }
.shift-overview .pd-stack-copy h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.shift-overview .pd-stack-copy p { margin-top: 18px; font-size: 17px; line-height: 1.65; }
.shift-overview .pd-stack-visual { position: relative; z-index: 1; }
.shift-overview .pd-stack-visual .pd-frame { aspect-ratio: 1.2; }
.shift-overview .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-overview .pd-stack-card .pd-stack-visual .pd-frame:has(> .mi)::before { display: none; }
/* themes */
.shift-overview .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-overview .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-overview .pd-stack-card.is-dark p { color: rgba(255, 255, 255, .78); }
.shift-overview .pd-stack-card.is-light p { color: var(--text-2); }

.shift-overview .pd-stack-card.is-dark .pd-bullets li { color: #fff; }
.shift-overview .pd-stack-card.is-dark .pd-bullets svg { background: rgba(123, 92, 255, .22); color: var(--brand-soft); }
.shift-overview .pd-stack-card.is-dark .pd-more { color: #fff; }
.shift-overview .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-overview .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-overview .pd-stack-card { position: relative; top: auto; margin-bottom: 20px; }
  .shift-overview .pd-stack-inner { grid-template-columns: 1fr; min-height: 0; transform: none; }
  .shift-overview .pd-stack-inner::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shift-overview .pd-stack-inner { transform: none; } .shift-overview .pd-stack-inner::after { display: none; } }

/* 04a spotlight rows — text + bullets | framed visual, alternating */
.shift-overview .pd-spot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.shift-overview .pd-spot.is-flip .pd-spot-copy { order: 2; }
.shift-overview .pd-spot-copy { max-width: 520px; }
.shift-overview .pd-spot-copy h3 { margin-top: 18px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.03em; }
.shift-overview .pd-spot-copy p { margin-top: 18px; color: var(--text-2); font-size: 17px; line-height: 1.65; }
.shift-overview .pd-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.shift-overview .pd-bullets li { display: flex; align-items: center; gap: 12px; font: 500 15px/1.3 var(--font-body); color: var(--text); }
.shift-overview .pd-bullets svg { width: 22px; height: 22px; flex-shrink: 0; padding: 4px; border-radius: 7px; background: var(--brand-10); color: var(--brand); }
.shift-overview .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-overview .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-overview .pd-frame picture { display: block; width: 100%; height: 100%; }
.shift-overview .pd-frame img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(49, 30, 160, .18)); }
@media (max-width: 900px) {
  .shift-overview .pd-spot { grid-template-columns: 1fr; gap: 32px; }
  .shift-overview .pd-spot.is-flip .pd-spot-copy { order: 0; }
  .shift-overview .pd-spot-copy { max-width: none; }
}

/* 04c dark panel — two halves */
.shift-overview .pd-dark { padding-block: var(--section-y); }
.shift-overview .pd-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/images/agents/ami-intro.svg") center top / 100% auto no-repeat; }
.shift-overview .pd-dark .pd-more { color: #fff; }
.shift-overview .pd-dark .pd-more:hover { color: var(--brand-soft); }

/* 04d bento — self-service access points + payroll */
.shift-overview .pd-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
.shift-overview .pd-tile { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-card-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.shift-overview .pd-tile h3 { margin-top: 14px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -0.02em; }
.shift-overview .pd-tile p { margin-top: 14px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.shift-overview .pd-tile .pd-more { margin-top: auto; padding-top: 22px; }
@media (max-width: 1024px) {
  .shift-overview .pd-bento { grid-template-columns: 1fr; }
}

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

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

/* Insight & control + payroll tile: animated minis on the cards background, glass border */
@media (max-width: 767px) { .shift-overview .pd-hero .hero-copy .lede { margin-top: 48px; } }

/* big claim: the S tile sits above the scrolling line instead of over it */
.shift-overview .pd-claim { display: flex; flex-direction: column; align-items: center; }
.shift-overview .pd-claim-marquee { width: 100%; }
.shift-overview .pd-claim .pd-claim-tile { position: relative; left: auto; top: auto; order: -1; margin: 0 0 clamp(32px, 4vw, 52px); }
/* header pill: gentler float, so the description can sit closer (user, 1 Oct) */
.shift-overview .pd-hero .hero-copy .lede { margin-top: 34px; }
@media (max-width: 767px) { .shift-overview .pd-hero .hero-copy .lede { margin-top: 32px; } }
.shift-overview .pd-claim .pd-claim-tile { margin-bottom: clamp(4px, 1vw, 14px); }   /* closer to the sliding line (user, 1 Oct) */
@media (max-width: 767px) { .shift-overview .pd-claim .pd-claim-tile { margin-bottom: 20px; } }

/* 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-overview .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-overview .mi svg { display: block; }
.shift-overview .pd-frame .mi { margin: auto; }
.shift-overview .pd-frame .mi img { filter: none; }   /* not the frame's product-screenshot image rules */

/* cursor (moved by js/minis.js) */
.shift-overview .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-overview .mi.is-cursor .mi-cursor { opacity: 1; }
.shift-overview .mi-cursor.is-press svg { transform: scale(.82); transition: transform .12s; }
.shift-overview .mi-cursor svg { width: 22px; height: 22px; transition: transform .2s; transform-origin: 20% 15%; }

/* ---------- AMI assistant (291×329 export) ---------- */

@keyframes miBlink { 50% { opacity: 0; } }

/* frames holding a mini-UI size to it (the fixed aspect ratio would crop the taller widgets) */
.shift-overview .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-overview .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); }

/* ---------- Home T&A: attendance (track working.svg 230×254) ---------- */
.shift-overview .mi-at { width: min(330px, 100%); padding: 18px 20px 16px; border-radius: 16px; }
.shift-overview .mi-at-head { display: flex; align-items: center; gap: 10px; }
.shift-overview .mi-at-logo { width: 18px; height: 18px; color: #634AFC; }
.shift-overview .mi-at-head b { font: 500 17px/1 var(--font-body); color: #2C2853; }
.shift-overview .mi-at-tools { margin-left: auto; display: flex; gap: 12px; color: #A3A2B1; }
.shift-overview .mi-at-tools svg { width: 16px; height: 16px; }
.shift-overview .mi-at-meta { margin: 12px 0 0 28px; font-size: 12.5px; line-height: 1.55; color: #2C2853; }
.shift-overview .mi-at-flag { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0 28px; padding: 6px 10px 6px 7px; border-radius: 7px; background: #FFF1E6; color: #C4480A; font-size: 11.5px;
  transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-overview .mi-at-flag > span { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #F26A1B; color: #fff; font: 700 10px/1 var(--font-body); }
.shift-overview .mi-at.is-pre-flag .mi-at-flag { opacity: 0; transform: scale(.85); }
.shift-overview .mi-at-who { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px 28px; font: 500 13px/1 var(--font-body); color: #2C2853; }
.shift-overview .mi-at-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.shift-overview .mi-at-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-overview .mi-at-list { list-style: none; margin: 0 0 0 28px; padding: 0; }
.shift-overview .mi-at-p { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; color: #2C2853; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.shift-overview .mi-at-p i { width: 6px; height: 6px; border-radius: 50%; }
.shift-overview .mi-at-p.is-in i { background: #1BCAA7; } .shift-overview .mi-at-p.is-out i { background: #F26A1B; }
.shift-overview .mi-at-loc { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #634AFC; }
.shift-overview .mi-at-loc svg { width: 13px; height: 13px; }
.shift-overview .mi-at .mi-at-p.is-pre { opacity: 0; transform: translateX(-8px); }

/* ---------- inside the home T&A frames: undo the screenshot rules, centre, glass border ---------- */
.shift-overview .ta-frame:has(> .mi) { display: grid; place-items: center; }
.shift-overview .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; }
/* attendance: the flag takes no space until it appears, then eases the name + punches down */
.shift-overview .mi-at-flag-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease-out); }
.shift-overview .mi-at-flag-wrap > div { overflow: hidden; min-height: 0; }
.shift-overview .mi-at.is-pre-flag .mi-at-flag-wrap { grid-template-rows: 0fr; }

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

.shift-overview .pd-stack-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 900px) { .shift-overview .pd-stack-inner { grid-template-columns: minmax(0, 1fr); } }

/* ===== 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-overview .mi { border-radius: 16px !important; }
.shift-overview .pd-stack-visual .mi { border-radius: 24px !important; }

/* ==========================================================================
   Absence (page 7) — Record absences.svg, In and out.svg, rules and reactions.svg, bradford.svg, Tackle.svg, RTW.svg
   ========================================================================== */

/* in the Absence panels / frames */

.shift-overview .pd-spot-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); }
.shift-overview .pd-spot-visual .pd-frame:has(> .mi)::before { display: none; }
.shift-overview .pd-spot-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); }

/* ==========================================================================
   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.
   ========================================================================== */

/* ---------- System Connector: the Connect apps travel along grey arches around Sense Automate (pure CSS; js not needed) ---------- */
.shift-overview .au-orbit { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; container-type: inline-size;
  background: radial-gradient(60% 70% at 50% 100%, rgba(0, 205, 156, .10), transparent 70%), #F7F7FA; box-shadow: inset 0 0 0 1px rgba(11, 10, 20, .06); }
.shift-overview .au-orbit::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(11, 10, 20, .07) 1px, transparent 1.2px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.shift-overview .au-arc { position: absolute; left: 50%; bottom: 10%; width: calc(var(--r) * 2); aspect-ratio: 2 / 1; transform: translateX(-50%); border: 1.5px solid #DCDFE7; border-bottom: 0; border-radius: 999px 999px 0 0;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .25) 30%, #000 72%); mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .25) 30%, #000 72%); }   /* top as is, the ends fade into the background (user, 6 Oct) */
/* centred inside the smallest arch (radius 24cqw): its centre sits ~45% of that radius above the arches' baseline (user, 6 Oct) */
.shift-overview .au-orbit-hub { position: absolute; left: 50%; bottom: 10%; z-index: 2; width: clamp(40px, 11cqw, 56px); aspect-ratio: 1; translate: -50% calc(50% - 10.8cqw); border-radius: 28%;
  box-shadow: 0 0 0 8px rgba(0, 205, 156, .12), 0 0 0 16px rgba(0, 205, 156, .06), 0 14px 28px -10px rgba(0, 163, 124, .6); }
.shift-overview .au-orbit-hub img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.shift-overview .au-orbit-hub::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(0, 205, 156, .45); animation: auHub 2.4s ease-out infinite; }
@keyframes auHub { to { box-shadow: 0 0 0 26px rgba(0, 205, 156, 0); } }
.shift-overview .au-arm { position: absolute; left: 50%; bottom: 10%; z-index: 1; width: var(--r); height: 0; transform-origin: 0 0; transform: rotate(var(--a0)); animation: auArm var(--t) ease-in-out var(--d) infinite alternate; }
/* the tile image carries its own white ground + shadow (Icons.svg): the tile is 54 of the image's 78 units, so 66px here ≈ a 46px tile */
.shift-overview .au-app { position: absolute; left: 100%; top: 0; width: clamp(50px, 13.5cqw, 68px); aspect-ratio: 1; translate: -50% -50%; transform: rotate(calc(var(--a0) * -1)); animation: auApp var(--t) ease-in-out var(--d) infinite alternate; }
.shift-overview .au-app img { display: block; width: 100%; height: 100%; }
@keyframes auArm { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }
@keyframes auApp { from { transform: rotate(calc(var(--a0) * -1)); } to { transform: rotate(calc(var(--a1) * -1)); } }
@media (prefers-reduced-motion: reduce) {
  .shift-overview .au-arm, .shift-overview .au-app, .shift-overview .au-orbit-hub::after { animation: none; }
  .shift-overview .au-arm { transform: rotate(calc((var(--a0) + var(--a1)) / 2)); } .shift-overview .au-app { transform: rotate(calc((var(--a0) + var(--a1)) / -2)); }
}

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

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

/* frames: stack-card glass border + phone padding for the panels; the dark Indeed panel's frame takes the card image, like the stack visuals */
.shift-overview .ats-dark .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); grid-template-columns: minmax(0, 1fr); }   /* fixed column: one-line text inside can't stretch the panel past the frame on phones */
.shift-overview .ats-dark .pd-frame:has(> .mi)::before { display: none; }
.shift-overview .ats-dark .pd-spot-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); border-radius: 24px !important; }   /* the glass-bordered panels' 24px (the site-wide .mi rule is 16px !important) */
@media (max-width: 600px) { .shift-overview .ats-dark .pd-spot-visual .mi { border-width: 5px; } }

/* ==========================================================================
   Recruitment: Right-to-work page (minis.py rtw_hero … rtw_result) — new graphics in the ATS style: magenta / pinks, mint for passes
   ========================================================================== */
/* shared: the phone, its screens, the passport and the selfie oval */
.shift-overview .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-overview .rw-scr { position: relative; height: 100%; border-radius: 25px; background: #fff; overflow: hidden; }
.shift-overview .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-overview .rw-s small { font-size: 10px; color: #8A8DA0; } .shift-overview .rw-s b { font: 600 13.5px/1.25 var(--font-body); color: #393940; }
.shift-overview .rw-s.is-end { justify-content: center; } .shift-overview .rw-s.is-end > span:last-child { font-size: 11px; color: #6B6D80; }
.shift-overview :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-overview .rw-ok { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: #E3FDF0; color: #007C66; } .shift-overview .rw-ok svg { width: 100%; height: 100%; }

/* ==========================================================================
   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-overview .mi-shd { width: min(500px, 100%); border-radius: 18px; overflow: hidden; }   /* 462 in the export: wider, so the longer tags keep their lines */
.shift-overview .mi-shd-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #EBF6FF; box-shadow: inset 0 -1px 0 #EFF2F8; }
.shift-overview .mi-shd-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .shift-overview .mi-shd-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-overview .mi-shd-who { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shift-overview .mi-shd-who b { font: 500 14px/1.2 var(--font-body); color: #495066; } .shift-overview .mi-shd-who span { font-size: 11.5px; color: #6C7597; }
.shift-overview .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-overview .mi-shd-badge svg { width: 16px; height: 16px; }
.shift-overview .mi-shd-list { list-style: none; margin: 0; padding: 8px 16px 12px; }
.shift-overview .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-overview .mi-shd-dot { position: relative; width: 15px; height: 15px; border-radius: 50%; align-self: start; margin-top: 2px; }
.shift-overview .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-overview .mi-shd-row.is-red .mi-shd-dot { background: #FF5C4E; } .shift-overview .mi-shd-row.is-green .mi-shd-dot { background: #1ED9A4; } .shift-overview .mi-shd-row.is-yellow .mi-shd-dot { background: #FFD270; }
.shift-overview .mi-shd-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shift-overview .mi-shd-txt b { font: 500 13.5px/1.25 var(--font-body); color: #495066; } .shift-overview .mi-shd-txt span { font-size: 11.5px; line-height: 1.3; color: #6C7597; }
.shift-overview .mi-shd-r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.shift-overview .mi-shd-r > b { font: 500 13.5px/1.2 var(--font-body); color: #495066; font-variant-numeric: tabular-nums; }
.shift-overview .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-overview .mi-shd-tag.is-ok { background: #E4FFF0; color: #02847C; } .shift-overview .mi-shd-tag.is-warn { background: #FFF3E8; color: #D34C00; } .shift-overview .mi-shd-tag.is-bad { background: #FFEDED; color: #B90000; }
.shift-overview .mi-shd-row.is-pre { opacity: 0; transform: translateY(12px); }
.shift-overview .mi-shd-row.is-pre .mi-shd-tag, .shift-overview .mi-shd-row.is-checking .mi-shd-tag { opacity: 0; transform: scale(.7); }
.shift-overview .mi-shd-row.is-pre .mi-shd-dot::after { opacity: 0; }
.shift-overview .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-overview .mi-shd-row { grid-template-columns: 16px minmax(0, 1fr); row-gap: 8px; }
  .shift-overview .mi-shd-r { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .shift-overview .mi-shd-row:not(:last-child) .mi-shd-dot::after { height: 80px; }
  .shift-overview .mi-shd-badge { display: none; }
}

/* ---------- work and break zones (Identify Work and Break Zones.svg 507×331): the plan card + the hours card beside it ---------- */
.shift-overview .mi-shz { width: min(500px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 14px; align-items: center; background: none !important; box-shadow: none !important; border: 0 !important; }
.shift-overview .mi-shz-plan { position: relative; z-index: 1; padding: 18px 14px 16px; border-radius: 16px; background: #fff; }
.shift-overview .mi-shz-title { display: block; padding: 0 2px 12px; font: 500 14px/1.2 var(--font-body); color: #46516A; }
.shift-overview .mi-shz-map { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; padding: 9px; border-radius: 12px; box-shadow: inset 0 0 0 1px #F2F2F2; }
.shift-overview .mi-shz-z { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 118px;   /* room under the name for the pin (bottom-right, as the export) */
  padding: 8px 4px; border-radius: 8px; text-align: center;
  transition: box-shadow .4s, background-color .4s; }
.shift-overview .mi-shz-z b { font: 500 13px/1.15 var(--font-body); } .shift-overview .mi-shz-z span { font-size: 10.5px; line-height: 1.2; }
.shift-overview .mi-shz-z.is-w { background: #EAF3DE; box-shadow: inset 0 0 0 1px #D6EEB6; } .shift-overview .mi-shz-z.is-w b { color: #1D3A0B; } .shift-overview .mi-shz-z.is-w span { color: #4C7A27; }
.shift-overview .mi-shz-z.is-b { background: #FAEFDA; box-shadow: inset 0 0 0 1px #FFE3AF; } .shift-overview .mi-shz-z.is-b b, .shift-overview .mi-shz-z.is-b span { color: #754E20; }
.shift-overview .mi-shz-z[data-z="pick"] { grid-column: span 4; } .shift-overview .mi-shz-z[data-z="dispatch"] { grid-column: span 2; } .shift-overview .mi-shz-z:nth-child(n+3) { grid-column: span 2; }
.shift-overview .mi-shz-z.is-w.is-here { box-shadow: inset 0 0 0 2px #97C459; } .shift-overview .mi-shz-z.is-b.is-here { box-shadow: inset 0 0 0 2px #F0A028; }
.shift-overview .mi-shz-pin { position: absolute; left: 0; top: 0; z-index: 2; width: 26px; height: 26px; margin: -34px 0 0 -13px; transform: translate(var(--px, 150px), var(--py, 64px));
  transition: transform 1.1s cubic-bezier(.5, 0, .2, 1); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.shift-overview .mi-shz-pin::after { content: ""; position: absolute; left: 50%; top: 23px; width: 8px; height: 8px; margin-left: -4px; background: #3378FF; transform: rotate(45deg); border-radius: 0 0 2px 0; z-index: -1; }
.shift-overview .mi-shz-av { display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2.2px #3378FF; background: #3378FF; } .shift-overview .mi-shz-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-overview .mi-shz-key { display: flex; gap: 22px; padding: 14px 2px 0; font-size: 11.5px; color: #46516A; }
.shift-overview .mi-shz-key span { display: inline-flex; align-items: center; gap: 7px; } .shift-overview .mi-shz-key i { width: 10px; height: 10px; border-radius: 2px; }
.shift-overview .mi-shz-key .is-w { background: #97C459; } .shift-overview .mi-shz-key .is-b { background: #F0A028; }
.shift-overview .mi-shz-stats { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 4px 16px; border-radius: 16px; background: #fff; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45); }
.shift-overview .mi-shz-st { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; font-size: 11.5px; color: #46516A; }
.shift-overview .mi-shz-st + .mi-shz-st { border-top: 1px solid #F3F3F3; }
.shift-overview .mi-shz-st b { font: 500 19px/1 var(--font-body); font-variant-numeric: tabular-nums; transition: transform .3s; }
.shift-overview .mi-shz-st.is-w b { color: #3FA400; } .shift-overview .mi-shz-st.is-b b { color: #CE7C00; }
.shift-overview .mi-shz-st.is-tick b { transform: scale(1.06); }
.shift-overview .pd-stack-visual .mi-shz { border: 0; overflow: visible; }
.shift-overview .pd-stack-visual :is(.mi-shz-plan, .mi-shz-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 26px 44px -24px rgba(0, 0, 0, .6); }
.shift-overview .pd-stack-visual .mi-shz-plan { border-radius: 22px; } .shift-overview .pd-stack-visual .mi-shz-stats { border-radius: 20px; }
@media (max-width: 600px) {
  .shift-overview .mi-shz { grid-template-columns: minmax(0, 1fr); }
  .shift-overview .mi-shz-stats { margin: 14px 12px 0; flex-direction: row; gap: 16px; } .shift-overview .mi-shz-st { flex: 1; } .shift-overview .mi-shz-st + .mi-shz-st { border-top: 0; border-left: 1px solid #F3F3F3; padding-left: 14px; }
  .shift-overview .mi-shz-z { min-height: 116px; } .shift-overview .mi-shz-z b { font-size: 11.5px; } .shift-overview .mi-shz-z span { font-size: 9.5px; }
}

/* ---------- one-use code (new graphic): the Sense Clock's code + countdown, a fingerprint match, a reused code rejected, Clockwise's flag ---------- */
.shift-overview .mi-shc { width: min(440px, 100%); border-radius: 18px; overflow: hidden; padding-bottom: 14px; }
.shift-overview .mi-shc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; box-shadow: inset 0 -1px 0 #EFF2F8; }
.shift-overview .mi-shc-head b { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--font-body); color: #495066; }
.shift-overview .mi-shc-logo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #EBF6FF; color: #4E71FF; } .shift-overview .mi-shc-logo svg { width: 16px; height: 16px; }   /* a blue clock (user, 12 Oct) */
.shift-overview .mi-shc-loc { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 7px; background: #EBF6FF; color: #3A5BE0; font: 500 11px/1 var(--font-body); } .shift-overview .mi-shc-loc svg { width: 12px; height: 12px; }
.shift-overview .mi-shc-code { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; margin: 14px 14px 0; padding: 14px 16px; border-radius: 14px; background: #EBF6FF; }
.shift-overview .mi-shc-lbl { font-size: 11.5px; color: #6C7597; }
.shift-overview .mi-shc-digits { grid-row: 2; display: flex; gap: 5px; margin-top: 8px; }
.shift-overview .mi-shc-digits i { width: 30px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #DCE8FA; font: 600 22px/1 var(--font-body); font-style: normal; color: #2C3550; font-variant-numeric: tabular-nums;
  transition: transform .3s, opacity .3s; }
.shift-overview .mi-shc-digits i.is-gap { width: 6px; background: none; box-shadow: none; }
.shift-overview .mi-shc-digits.is-flip i:not(.is-gap) { transform: rotateX(90deg); opacity: .2; }
.shift-overview .mi-shc-ring { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative; width: 48px; height: 48px; }
.shift-overview .mi-shc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.shift-overview .mi-shc-ring circle { fill: none; stroke-width: 3; }
.shift-overview .mi-shc-track { stroke: #D6E6FB; } .shift-overview .mi-shc-arc { stroke: #4E71FF; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset 1s linear; }
.shift-overview .mi-shc-ring em { position: absolute; inset: 0; display: grid; place-items: center; font: 500 11px/1 var(--font-body); font-style: normal; color: #3A5BE0; font-variant-numeric: tabular-nums; }
.shift-overview .mi-shc-list { list-style: none; margin: 0; padding: 4px 14px 0; }
.shift-overview .mi-shc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 2px; transition: opacity .45s, transform .55s var(--ease-out); }
.shift-overview .mi-shc-row + .mi-shc-row { border-top: 1px solid #F1F2F6; }
.shift-overview .mi-shc-ic { position: relative; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.shift-overview .mi-shc-ic svg { width: 19px; height: 19px; }
.shift-overview .mi-shc-ic.is-fp { background: #EBF6FF; color: #4E71FF; } .shift-overview .mi-shc-ic.is-key { background: #FFEDED; color: #B90000; }
.shift-overview .mi-shc-ic.is-fp::after { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 2px; border-radius: 2px; background: #4E71FF; box-shadow: 0 0 8px 2px rgba(78, 113, 255, .5); opacity: 0; }
.shift-overview .mi-shc-row.is-scan .mi-shc-ic.is-fp::after { opacity: 1; animation: shcScan .9s ease-in-out infinite alternate; }
@keyframes shcScan { from { top: 4px; } to { top: 28px; } }
.shift-overview .mi-shc-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shift-overview .mi-shc-txt b { font: 500 13.5px/1.25 var(--font-body); color: #495066; } .shift-overview .mi-shc-txt span { font-size: 11.5px; line-height: 1.3; color: #6C7597; }
.shift-overview .mi-shc-tag { padding: 4px 8px; border-radius: 6px; font: 500 10.5px/1.1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-overview .mi-shc-tag.is-ok { background: #E4FFF0; color: #02847C; } .shift-overview .mi-shc-tag.is-bad { background: #FFEDED; color: #B90000; }
.shift-overview .mi-shc-alert { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 6px 14px 0; padding: 12px 14px; border-radius: 12px; background: #FFF3E8; box-shadow: inset 0 0 0 1px #FFE0C2;
  transition: opacity .4s, transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.shift-overview .mi-shc-alert .mi-shc-txt span { color: #D34C00; }
.shift-overview .mi-shc-cw { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #634AFC; color: #fff; } .shift-overview .mi-shc-cw svg { width: 18px; height: 18px; }   /* Clockwise is a Sense agent: Sense purple */
.shift-overview .mi-shc .is-pre { opacity: 0; transform: translateY(10px); }
.shift-overview .mi-shc-row.is-pre .mi-shc-tag, .shift-overview .mi-shc-row.is-scan .mi-shc-tag { opacity: 0; transform: scale(.7); }
.shift-overview .mi-shc-alert.is-pre { transform: translateY(12px) scale(.97); }

/* the panels' glass border, rounded to each widget */
.shift-overview .pd-stack-visual :is(.mi-shd, .mi-shc) { border-radius: 26px; }
.shift-overview .pd-stack-visual .mi-shd-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
   ========================================================================== */

/* ---------- 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); } }

/* ==========================================================================
   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-overview .mi-shy { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; background: none !important; box-shadow: none !important; }
.shift-overview .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-overview .mi-shy-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; } .shift-overview .mi-shy-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-overview .mi-shy-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-overview .mi-shy-txt b { font: 500 13.5px/1.2 var(--font-body); color: #495066; transition: color .35s; } .shift-overview .mi-shy-txt span { font-size: 11px; line-height: 1.3; color: #8994AA; transition: color .35s; }
.shift-overview .mi-shy-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; font: 500 11.5px/1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.shift-overview .mi-shy-tag svg { width: 12px; height: 12px; } .shift-overview .mi-shy-tag.is-ok { background: #E2FFF6; color: #197A68; } .shift-overview .mi-shy-tag.is-bad { background: #FFE9E2; color: #D33131; }
.shift-overview .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-overview .mi-shy-card.is-bad.is-done .mi-shy-txt b, .shift-overview .mi-shy-card.is-bad.is-done .mi-shy-txt span { color: #BC0003; }
.shift-overview .mi-shy-card:not(.is-done) .mi-shy-tag { opacity: 0; transform: scale(.7); }
.shift-overview .mi-shy-ev { padding: 14px; border-radius: 14px; background: #F8F8FE; box-shadow: 0 0 0 1px #ECEEF3, 0 18px 32px -24px rgba(33, 18, 140, .3); transition: opacity .45s, transform .55s var(--ease-out); }
.shift-overview .mi-shy-ev-h { display: block; padding: 0 2px 12px; font: 500 13.5px/1.2 var(--font-body); color: #495066; }
.shift-overview .mi-shy-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shift-overview .mi-shy-col { padding: 10px 12px 4px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E9EDF4; }
.shift-overview .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-overview .mi-shy-col ul { list-style: none; margin: 0; padding: 0; }
.shift-overview .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-overview .mi-shy-col li + li { border-top: 1px solid #F4F4F4; }
.shift-overview .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-overview .mi-shy-col li b.is-bad { color: #E4583C; } .shift-overview .mi-shy-col li b.is-ok { color: #3B9567; }
.shift-overview .mi-shy .is-pre { opacity: 0; transform: translateY(10px); }
.shift-overview .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-overview .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-overview .mi-shx-act i { width: 9px; height: 9px; margin-top: 2px; border-radius: 50%; background: #DCE2EA; }
.shift-overview .mi-shx-act em { font-style: normal; font-size: 9.5px; color: #6C7597; white-space: nowrap; }
.shift-overview .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-overview .mi-shq-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 0; }
.shift-overview .mi-shq-row + .mi-shq-row { border-top: 1px solid #F3F4FC; }

 .shift-overview .mi-shq-row.is-half [data-new] { opacity: 0; }

/* ---------- visit report (Disputed Invoices.svg 314×273): the jobs tick in, then the totals count up ---------- */
.shift-overview .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-overview .mi-sho-row + .mi-sho-row { border-top: 1px solid #F3F4FC; }

.shift-overview .mi-sho-row.is-pre { opacity: 0; transform: translateY(8px); }
.shift-overview .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-overview .mi-sho-stats > span { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: #4C7A27; }
.shift-overview .mi-sho-stats > span + span { border-left: 1px solid #C8E4AE; }
.shift-overview .mi-sho-stats em { font: 500 18px/1 var(--font-body); font-style: normal; color: #1D3A0B; font-variant-numeric: tabular-nums; }
.shift-overview .mi-sho-stats.is-pre { opacity: 0; transform: translateY(10px); }

/* glass borders in the panels */
.shift-overview .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; }
@media (max-width: 600px) {

  .shift-overview .mi-shy-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   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-overview .mi-shg { display: flex; align-items: center; width: min(500px, 100%); background: none !important; box-shadow: none !important; border: 0 !important; }
.shift-overview .shg-phone { margin-right: -8px; }   /* the card only just tucks over the phone edge, clear of its text */
.shift-overview .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-overview .shg-doc i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: #DCD8F4; }
.shift-overview .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-overview .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-overview .shg-pad i { position: absolute; left: 12px; right: 12px; bottom: 22px; height: 1px; background: #CFCBEA; }
.shift-overview .shg-sig { position: absolute; left: 10px; right: 10px; top: 14px; width: calc(100% - 20px); height: 52px; }
.shift-overview .shg-sig path { stroke-dasharray: 260; stroke-dashoffset: 0; }
.shift-overview .shg-name { font-size: 10.5px; color: #6B6D80; }
.shift-overview .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-overview .mi-shg.is-s0 .shg-sig path { stroke-dashoffset: 260; }
.shift-overview .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-overview .shg-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #F1F2F6; }
.shift-overview .shg-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .shift-overview .shg-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-overview .shg-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-overview .shg-who b { font: 500 13.5px/1.2 var(--font-body); color: #2C2853; } .shift-overview .shg-who span { font-size: 11px; color: #6C7597; }
.shift-overview .shg-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.shift-overview .shg-i { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #2C2853; }
.shift-overview .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-overview .shg-ck svg { width: 100%; height: 100%; }
.shift-overview .shg-i.is-done .shg-ck { background: #1BCAA7; color: #fff; }
.shift-overview .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-overview .shg-ready svg { width: 12px; height: 12px; }
.shift-overview .mi-shg:not(.is-ready) .shg-ready { opacity: 0; transform: scale(.85); }

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

.shift-overview .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-overview .shn-f small { font-size: 9.5px; color: #6C7597; } .shift-overview .shn-f b { font: 500 12px/1.2 var(--font-body); color: #2C2853; transition: opacity .3s; }
.shift-overview .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-overview .shn-f > i svg { width: 100%; height: 100%; }
.shift-overview .shn-f.is-off b, .shift-overview .shn-f.is-off > i { opacity: 0; } .shift-overview .shn-f.is-off > i { transform: scale(.6); }
.shift-overview .shn-f.is-active { box-shadow: inset 0 0 0 1.5px #634AFC; }
.shift-overview .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-overview .shn-w svg { width: 15px; height: 15px; }
.shift-overview .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-overview .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-overview .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-overview .shb-seat > i svg { width: 100%; height: 100%; }

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

.shift-overview .shs-c { position: relative; justify-self: center; width: 24px; height: 24px; border-radius: 50%; background: #F1F2F6; }
.shift-overview .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-overview .shs-c i svg { width: 100%; height: 100%; }

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

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

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

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

 .shift-overview .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-overview .sht-tav + .sht-tav { margin-left: -8px; } .shift-overview .sht-tav img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 600px) { .shift-overview .mi-shg { flex-direction: column; } .shift-overview .shg-phone { margin: 0 0 -24px; } .shift-overview .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-overview .sh-orbit { background: radial-gradient(60% 70% at 50% 100%, rgba(99, 74, 252, .1), transparent 70%), #F7F9FC; }
.shift-overview .sh-orbit-hub { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #8C7BFF 0%, #634AFC 48%, #3A22C9 100%);   /* the Sense S stays Sense purple (user, 13 Oct) */
  box-shadow: 0 0 0 8px rgba(99, 74, 252, .12), 0 0 0 16px rgba(99, 74, 252, .06), 0 14px 28px -10px rgba(58, 34, 201, .6); }
.shift-overview .sh-orbit-hub svg { width: 50%; height: 50%; }
.shift-overview .sh-orbit-hub::after { box-shadow: 0 0 0 0 rgba(99, 74, 252, .45); animation-name: shHub; }
@keyframes shHub { to { box-shadow: 0 0 0 26px rgba(99, 74, 252, 0); } }
.shift-overview .sh-otile { position: absolute; inset: 15%; border-radius: 26%; overflow: hidden; background: #fff; box-shadow: 0 6px 14px -6px rgba(15, 30, 70, .45), 0 0 0 1px rgba(11, 10, 20, .06);
  transition: opacity .4s, filter .4s, box-shadow .4s; }
.shift-overview .sh-otile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shift-overview .sh-orbit[data-on="rota"] .au-arm:not([data-g="rota"]) .sh-otile, .shift-overview .sh-orbit[data-on="payroll"] .au-arm:not([data-g="payroll"]) .sh-otile, .shift-overview .sh-orbit[data-on="hr"] .au-arm:not([data-g="hr"]) .sh-otile { opacity: .4; filter: grayscale(1); }
.shift-overview .sh-orbit[data-on="rota"] [data-g="rota"] .sh-otile, .shift-overview .sh-orbit[data-on="payroll"] [data-g="payroll"] .sh-otile, .shift-overview .sh-orbit[data-on="hr"] [data-g="hr"] .sh-otile {
  box-shadow: 0 0 0 2.5px #1A6FD8, 0 10px 20px -8px rgba(26, 111, 216, .7); }
.shift-overview .sh-orbit.is-bare { overflow: visible; background: none; box-shadow: none; } .shift-overview .sh-orbit.is-bare::before { display: none; }   /* no container: arcs and tiles straight on the page */

/* ---------- Shift overview: "Who It Is For" card graphics (.swk), on a light blue dotted stage ---------- */
.shift-overview .swk { position: relative; width: 100%; height: 100%; }
.shift-overview .swk-av { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .shift-overview .swk-av img { width: 100%; height: 100%; object-fit: cover; }
/* shift workers: three shifts, a marker running along them, each shift's worker clocks in as it passes (6s loop) */
.shift-overview .swk-shift { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 18px; }
.shift-overview .swk-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 12px; }
.shift-overview .swk-track i { border-radius: 6px; } .shift-overview .swk-track .is-e { background: #BFD8F8; } .shift-overview .swk-track .is-l { background: #5D9BEA; } .shift-overview .swk-track .is-n { background: #1F4F9C; }
.shift-overview .swk-now { position: absolute; top: -6px; bottom: -6px; left: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #0B0A14; box-shadow: 0 0 0 2px #fff; animation: swkNow 6s linear infinite; }
@keyframes swkNow { from { left: 0; } to { left: 100%; } }
.shift-overview .swk-hours { display: grid; grid-template-columns: repeat(3, 1fr); font: 500 10.5px/1 var(--font-body); color: #6C7597; }
.shift-overview .swk-crew { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.shift-overview .swk-p { position: relative; justify-self: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 8px 16px -8px rgba(15, 50, 110, .5); }
.shift-overview .swk-p > i { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; padding: 3.5px; border-radius: 50%; background: #1BCAA7; color: #fff; box-shadow: 0 0 0 2px #fff; } .shift-overview .swk-p > i svg { width: 100%; height: 100%; }
.shift-overview .swk-p.is-e { animation: swkOn0 6s infinite; } .shift-overview .swk-p.is-l { animation: swkOn1 6s infinite; } .shift-overview .swk-p.is-n { animation: swkOn2 6s infinite; }
.shift-overview .swk-p.is-e > i { animation: swkTick0 6s infinite; } .shift-overview .swk-p.is-l > i { animation: swkTick1 6s infinite; } .shift-overview .swk-p.is-n > i { animation: swkTick2 6s infinite; }
@keyframes swkOn0 { 0%, 4% { opacity: .35; } 8%, 96% { opacity: 1; } 100% { opacity: .35; } }
@keyframes swkOn1 { 0%, 36% { opacity: .35; } 40%, 96% { opacity: 1; } 100% { opacity: .35; } }
@keyframes swkOn2 { 0%, 70% { opacity: .35; } 74%, 96% { opacity: 1; } 100% { opacity: .35; } }
@keyframes swkTick0 { 0%, 6% { transform: scale(0); } 10%, 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes swkTick1 { 0%, 38% { transform: scale(0); } 42%, 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes swkTick2 { 0%, 72% { transform: scale(0); } 76%, 96% { transform: scale(1); } 100% { transform: scale(0); } }
/* on-site workers: a client site's four rooms; the worker moves room to room and each is ticked (8s loop) */
.shift-overview .swk-site { display: grid; place-items: center; padding: 14px 22px; }
.shift-overview .swk-plan { position: relative; width: 100%; max-width: 250px; height: 100%; max-height: 128px; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E3EAF5, 0 14px 26px -18px rgba(15, 50, 110, .5); }
.shift-overview .swk-room { position: relative; border-radius: 7px; background: #F1F5FB; box-shadow: inset 0 0 0 1px #E3EAF5; }
.shift-overview .swk-room > i { position: absolute; right: 6px; top: 6px; width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #1BCAA7; color: #fff; transform: scale(0); } .shift-overview .swk-room > i svg { width: 100%; height: 100%; }
.shift-overview .swk-room:nth-child(1) { animation: swkRoom0 8s infinite; } .shift-overview .swk-room:nth-child(2) { animation: swkRoom1 8s infinite; } .shift-overview .swk-room:nth-child(4) { animation: swkRoom2 8s infinite; } .shift-overview .swk-room:nth-child(3) { animation: swkRoom3 8s infinite; }
.shift-overview .swk-room:nth-child(1) > i { animation: swkRt0 8s infinite; } .shift-overview .swk-room:nth-child(2) > i { animation: swkRt1 8s infinite; } .shift-overview .swk-room:nth-child(4) > i { animation: swkRt2 8s infinite; } .shift-overview .swk-room:nth-child(3) > i { animation: swkRt3 8s infinite; }
@keyframes swkRoom0 { 0%, 3% { background: #F1F5FB; } 8%, 94% { background: #E3F0FD; } 100% { background: #F1F5FB; } }
@keyframes swkRoom1 { 0%, 28% { background: #F1F5FB; } 33%, 94% { background: #E3F0FD; } 100% { background: #F1F5FB; } }
@keyframes swkRoom2 { 0%, 53% { background: #F1F5FB; } 58%, 94% { background: #E3F0FD; } 100% { background: #F1F5FB; } }
@keyframes swkRoom3 { 0%, 78% { background: #F1F5FB; } 83%, 94% { background: #E3F0FD; } 100% { background: #F1F5FB; } }
@keyframes swkRt0 { 0%, 14% { transform: scale(0); } 18%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes swkRt1 { 0%, 39% { transform: scale(0); } 43%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes swkRt2 { 0%, 64% { transform: scale(0); } 68%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes swkRt3 { 0%, 86% { transform: scale(0); } 89%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
.shift-overview .swk-pin { position: absolute; z-index: 1; 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); animation: swkPin 8s ease-in-out infinite; }
@keyframes swkPin { 0%, 18% { left: 30%; top: 30%; } 25%, 43% { left: 78%; top: 30%; } 50%, 68% { left: 78%; top: 72%; } 75%, 92% { left: 30%; top: 72%; } 100% { left: 30%; top: 30%; } }
/* field teams: an SVG road map, the van follows the route (SMIL; paused for reduced motion in js/minis.js) */
.shift-overview .swk-field { display: grid; place-items: center; padding: 10px 12px; }
.shift-overview .swk-field svg { width: 100%; height: auto; max-height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .shift-overview .swk-now, .shift-overview .swk-p, .shift-overview .swk-p > i, .shift-overview .swk-room, .shift-overview .swk-room > i, .shift-overview .swk-pin { animation: none !important; }
  .shift-overview .swk-now { left: 66%; } .shift-overview .swk-room { background: #E3F0FD; } .shift-overview .swk-room > i, .shift-overview .swk-p > i { transform: none; } .shift-overview .swk-pin { left: 30%; top: 72%; }
}

/* ---------- Shift overview: Health and Safety (site_safety) — SOS, hard fall, then roll call; the matching item on the left lights (js) ---------- */
.shift-overview .mi-sfy { width: min(460px, 100%); padding: 16px; border-radius: 18px; }
.shift-overview .sfy-head { display: flex; align-items: center; gap: 10px; }
.shift-overview .sfy-hi { width: 32px; height: 32px; flex-shrink: 0; padding: 8px; border-radius: 9px; background: #EBF6FF; color: #1A6FD8; transition: background-color .4s, color .4s; } .shift-overview .sfy-hi svg { width: 100%; height: 100%; }
.shift-overview .sfy-ht { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-overview .sfy-ht > span { font-size: 11px; color: #6C7597; }
.shift-overview .sfy-sw { display: grid; font: 600 14px/1.2 var(--font-body); color: #2C3550; } .shift-overview .sfy-sw > span { grid-area: 1 / 1; transition: opacity .35s; } .shift-overview .sfy-sw .is-b { opacity: 0; }
.shift-overview .mi-sfy.is-evac .sfy-sw .is-a { opacity: 0; } .shift-overview .mi-sfy.is-evac .sfy-sw .is-b { opacity: 1; }
.shift-overview .mi-sfy.is-evac .sfy-hi { background: #E4FFF0; color: #02847C; }
.shift-overview .sfy-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: #00955E; }
.shift-overview .sfy-live i { width: 7px; height: 7px; border-radius: 50%; background: #00955E; animation: shkPulse 1.6s ease-out infinite; }
.shift-overview .sfy-map { position: relative; margin-top: 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #ECEEF3; }
.shift-overview .sfy-map svg { display: block; width: 100%; height: auto; }
.shift-overview .sfy-lab { font: 600 9.5px var(--font-body); fill: #8994AA; }
.shift-overview .sfy-route { opacity: 0; transition: opacity .4s; } .shift-overview .mi-sfy.is-evac .sfy-route { opacity: 1; animation: sfyDash .8s linear infinite; }
@keyframes sfyDash { to { stroke-dashoffset: -18; } }
.shift-overview .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-overview .sfy-pin[data-p="0"] { --x: 18%; --y: 58%; } .shift-overview .sfy-pin[data-p="1"] { --x: 50%; --y: 34%; } .shift-overview .sfy-pin[data-p="2"] { --x: 62%; --y: 78%; }
.shift-overview .sfy-pin.is-out[data-p="0"] { --x: 84%; --y: 54%; } .shift-overview .sfy-pin.is-out[data-p="1"] { --x: 92%; --y: 62%; } .shift-overview .sfy-pin.is-out[data-p="2"] { --x: 85%; --y: 72%; }
.shift-overview .sfy-av { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .shift-overview .sfy-av img { width: 100%; height: 100%; object-fit: cover; }
.shift-overview .sfy-pin::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; opacity: 0; }
.shift-overview .mi-sfy.is-sos .sfy-pin[data-p="0"] { box-shadow: 0 0 0 2.5px #E5484D, 0 8px 14px -6px rgba(229, 72, 77, .6); }
.shift-overview .mi-sfy.is-sos .sfy-pin[data-p="0"]::before { border-color: #E5484D; animation: sfyRing 1s ease-out infinite; }
.shift-overview .mi-sfy.is-fall .sfy-pin[data-p="1"] { box-shadow: 0 0 0 2.5px #F5A623, 0 8px 14px -6px rgba(245, 166, 35, .6); animation: sfyShake .5s 2; }
.shift-overview .mi-sfy.is-fall .sfy-pin[data-p="1"]::before { border-color: #F5A623; animation: sfyRing 1s ease-out infinite; }
@keyframes sfyRing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes sfyShake { 20%, 60% { transform: translate(-3px, 1px) rotate(-6deg); } 40%, 80% { transform: translate(3px, -1px) rotate(6deg); } }
.shift-overview .sfy-ok { position: absolute; right: -5px; bottom: -4px; width: 15px; height: 15px; padding: 2.5px; border-radius: 50%; background: #1BCAA7; color: #fff; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); } .shift-overview .sfy-ok svg { width: 100%; height: 100%; }
.shift-overview .sfy-pin.is-safe .sfy-ok { transform: scale(1); } .shift-overview .sfy-pin.is-safe { box-shadow: 0 0 0 2.5px #1BCAA7, 0 8px 14px -6px rgba(15, 110, 80, .5); }
.shift-overview .sfy-feed { position: relative; display: grid; margin-top: 12px; }
.shift-overview .sfy-alert { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease-out); }
.shift-overview .sfy-ai { width: 28px; height: 28px; flex-shrink: 0; padding: 6px; border-radius: 8px; } .shift-overview .sfy-ai svg { width: 100%; height: 100%; }
.shift-overview .sfy-at { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shift-overview .sfy-at b { font: 600 12.5px/1.2 var(--font-body); } .shift-overview .sfy-at > span { font-size: 10.5px; line-height: 1.3; }
.shift-overview .sfy-alert.is-sos { background: #FFEDED; } .shift-overview .sfy-alert.is-sos .sfy-ai { background: #E5484D; color: #fff; } .shift-overview .sfy-alert.is-sos b { color: #B90000; } .shift-overview .sfy-alert.is-sos .sfy-at > span { color: #A04040; }
.shift-overview .sfy-alert.is-fall { background: #FFF6E6; } .shift-overview .sfy-alert.is-fall .sfy-ai { background: #F5A623; color: #fff; } .shift-overview .sfy-alert.is-fall b { color: #9A5B00; } .shift-overview .sfy-alert.is-fall .sfy-at > span { color: #8A6A30; }
.shift-overview .sfy-alert.is-evac { background: #E4FFF0; } .shift-overview .sfy-alert.is-evac .sfy-ai { background: #1BCAA7; color: #fff; } .shift-overview .sfy-alert.is-evac b { color: #02604F; font-variant-numeric: tabular-nums; } .shift-overview .sfy-alert.is-evac .sfy-at > span { color: #3C7A6A; }
.shift-overview .mi-sfy.is-sos .sfy-alert.is-sos, .shift-overview .mi-sfy.is-fall .sfy-alert.is-fall, .shift-overview .mi-sfy.is-evac .sfy-alert.is-evac { opacity: 1; transform: none; }
.shift-overview .pd-spot-visual .mi-sfy { border-radius: 26px; }
.shift-overview .sfy-sw2 { display: grid; } .shift-overview .sfy-sw2 > span { grid-area: 1 / 1; transition: opacity .3s; } .shift-overview .sfy-sw2 .is-b { opacity: 0; } .shift-overview .mi-sfy.is-all .sfy-sw2 .is-a { opacity: 0; } .shift-overview .mi-sfy.is-all .sfy-sw2 .is-b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .shift-overview .sfy-pin, .shift-overview .sfy-pin::before, .shift-overview .sfy-route, .shift-overview .sfy-live i { animation: none !important; transition: 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.
   ========================================================================== */

/* ---------- 02 FEATURES — stacking panels: buttons, placeholders ---------- */
.shift-overview .pd-stack-btn { margin-top: 26px; }
.shift-overview .pd-stack-btn svg { width: 15px; height: 15px; }

/* ---------- 03 WHAT'S INSIDE — 3×3 grid (pay-co feature set) ---------- */
.shift-overview .pd-grid9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.shift-overview .pd-tile9 { padding: 28px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s; }
.shift-overview .pd-tile9:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.shift-overview .pd-tile9-ic { background: var(--brand-10); color: var(--brand); box-shadow: none; }
.shift-overview .pd-tile9 h3 { margin-top: 24px; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.shift-overview .pd-tile9 p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 1024px) { .shift-overview .pd-grid9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .shift-overview .pd-grid9 { grid-template-columns: 1fr; } }

/* 4-tile grid */
.shift-overview .pd-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .shift-overview .pd-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .shift-overview .pd-grid4 { grid-template-columns: 1fr; } }

/* ===== Recruitment (ATS) pages: body.ats-page ===== */

/* "Feature panel (dark)" (integrations onwards): the HR pages' purple-dust frame (.pd-dark) holding one spotlight row, ticks in ATS pink */
.shift-overview .ats-dark .pd-spot > * { min-width: 0; }
.shift-overview .ats-dark .pd-spot-copy h2 { margin-top: 18px; color: #fff; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; }
.shift-overview .ats-dark .pd-spot-copy p { margin-top: 20px; color: var(--text-inv-2); }
.shift-overview .ats-dark .pd-bullets li { color: #fff; }
.shift-overview .ats-dark .pd-bullets svg { background: rgba(240, 198, 243, .14); color: #F0C6F3; }
@media (max-width: 1024px) { .shift-overview .ats-dark .pd-spot { grid-template-columns: minmax(0, 1fr); } }

/* 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-overview {
  --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);
}

/* 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-overview .pd-stack-card { scroll-margin-top: calc(96px + var(--i) * 22px); }

/* ---------- stacking panels: .is-sky is the light blue panel in place of the ATS .is-blush; the dark panel glows blue ---------- */
.shift-overview .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-overview .pd-stack-card.is-sky p { color: var(--text-2); }
.shift-overview .pd-stack-card.is-sky .pd-bullets svg { background: #fff; color: var(--sh-d); }
.shift-overview .pd-stack-card.is-light .pd-bullets svg { background: var(--sh-soft); color: var(--sh-d); }
.shift-overview .pd-stack-card.is-dark .pd-bullets svg { background: rgba(110, 170, 240, .16); color: var(--sh-glow); }
.shift-overview .pd-stack-card.is-dark .pd-stack-inner { background: radial-gradient(70% 80% at 100% 0%, rgba(40, 120, 230, .36), transparent 60%), #0A0D16; }

/* 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-overview .pd-stack-visual .pd-frame:has(> .mi) { padding: 12px; }
  .shift-overview .pd-stack-visual .mi { border-width: 5px; }
  .shift-overview .pd-stack-visual :is(.mi-shz, .mi-shc) { zoom: .74; }
  .shift-overview .pd-stack-visual :is(.mi-shz-plan, .mi-shz-stats) { border-width: 5px; }
}

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

/* ---------- 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-overview .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-overview .sh-tl-step, .shift-overview .sh-tl-step.is-flip { grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; align-items: start; }
}

/* ---------- overview (sense-shift-overview.html, body.shift-ov): the overview template (HR / Automate / ATS overviews) in this menu's blue,
   as css/ats.css does it for the ATS overview. Sense purple stays on everything clickable; blue marks the product (mark, ticks, tiles, glows) ---------- */
/* 01 hero: the pill with the Sense mark; the window holds the three photos; the doc's four badges float (chip-2 shown here: four badges) */
.shift-overview .sh-ov-eyebrow { gap: 8px; padding: 4px 14px 4px 8px; white-space: nowrap; }
.shift-overview .sh-ov-mark { width: 21px; height: 21px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(145deg, #6FA6F5, #1A6FD8 55%, #114FA6); color: #fff; }
.shift-overview .sh-ov-mark svg { width: 62%; height: 62%; }
.shift-overview .sh-ov-hero .hero-copy .lede { margin-top: 28px; }
.shift-overview .sh-ov-hero .hero-copy .cta-group { margin-top: 36px; }
.shift-overview .chip-check { background: var(--sh-soft); color: var(--sh-d); }
.shift-overview .sh-ov-hero .chip-2 { display: flex; right: auto; left: -36px; top: 68%; }

/* 02 Who It Is For as the big claim: the eyebrow above the marquee, the blue tile, the three audiences below */
.shift-overview .sh-claim-eyebrow { display: inline-flex; margin: clamp(28px, 3vw, 40px) 0 clamp(8px, 1vw, 16px); }   /* between the tile (above, as the other overviews) and the sliding line */
.shift-overview .sh-claim-tile { background: linear-gradient(145deg, #8FBDF7 0%, #1A6FD8 48%, #0E4A9E 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -10px 22px rgba(5, 30, 80, .4), 0 34px 60px -18px rgba(26, 111, 216, .55); color: #fff; }
.shift-overview .sh-claim-tile svg { width: 46%; height: 46%; filter: drop-shadow(0 4px 8px rgba(5, 30, 80, .35)); }
.shift-overview .sh-claim .pd-claim-text { padding-bottom: .2em; }   /* room for the descenders: the marquee clips at the line box */
.shift-overview .sh-claim .pd-claim-track { animation-duration: 30s; }   /* "Shift, site and field teams": about the HR overview's line length, so about its speed */
.shift-overview .sh-claim-h { max-width: 760px; margin: clamp(48px, 6vw, 88px) auto 0; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; text-align: center; text-wrap: balance; }   /* the doc's heading, above the cards */
.shift-overview .sh-claim .pd-claim-tile { margin-bottom: 0; }
.shift-overview .sh-claim-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 56px); text-align: left; }
.shift-overview .sh-cw { padding: clamp(26px, 3vw, 36px); border-radius: var(--r-card, 24px); background: radial-gradient(90% 70% at 85% 0%, rgba(40, 110, 200, .1), transparent 60%), #fff; box-shadow: var(--shadow-sm); }
.shift-overview .sh-cw-vis { height: 150px; border-radius: 16px; overflow: hidden;   /* the card's graphic on a light blue dotted stage */
  background: radial-gradient(rgba(26, 111, 216, .09) 1px, transparent 1.2px) 0 0 / 14px 14px, radial-gradient(80% 80% at 50% 0%, #E6F0FC, #F4F8FE 75%); box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .08); }
.shift-overview .sh-cw h3 { margin-top: 26px; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.2; letter-spacing: -0.02em; }
.shift-overview .sh-cw p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) { .shift-overview .sh-claim-who { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .shift-overview .sh-claim .pd-claim-text { flex-shrink: 1; } }

.shift-overview .pd-stack-visual .mi-shy { border: 0; overflow: visible; }
.shift-overview .pd-stack-visual :is(.mi-shy-card, .mi-shy-ev) { 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-overview .sh-sfy .pd-spot-copy h2 { margin-top: 0; color: #fff; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; }
.shift-overview .sh-sfy-items { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }
.shift-overview .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-overview .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-overview .sh-sfy-t { display: flex; flex-direction: column; gap: 6px; } .shift-overview .sh-sfy-t b { font: 500 18px/1.25 var(--font-display); letter-spacing: -0.01em; color: #fff; } .shift-overview .sh-sfy-t span { font-size: 15px; line-height: 1.55; color: var(--text-inv-2); }
.shift-overview .sh-sfy-go { width: 16px; height: 16px; margin-top: 4px; color: rgba(255, 255, 255, .45); transition: transform .25s var(--ease-out), color .25s; } .shift-overview .sh-sfy-go svg { width: 100%; height: 100%; }
.shift-overview .sh-sfy-item:hover { background: rgba(255, 255, 255, .08); } .shift-overview .sh-sfy-item:hover .sh-sfy-go { color: #fff; transform: translate(2px, -2px); }
.shift-overview .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-overview .sh-sfy-item.is-active .icon-tile { background: var(--sh); color: #fff; }
/* the pill sits in its own row above both columns, so the visual's frame runs from the top of the title to the bottom of the last item (user, 13 Oct) */
.shift-overview .sh-sfy { grid-template-areas: "pill pill" "copy vis"; row-gap: 18px; }
.shift-overview .sh-sfy-pill { grid-area: pill; justify-self: start; } .shift-overview .sh-sfy .pd-spot-copy { grid-area: copy; } .shift-overview .sh-sfy .pd-spot-visual { grid-area: vis; }
@media (min-width: 1025px) {
  .shift-overview .sh-sfy { align-items: stretch; }
  .shift-overview .sh-sfy-pill { align-self: start; }
  .shift-overview .sh-sfy .pd-spot-visual { display: flex; }
  .shift-overview .sh-sfy .pd-spot-visual .pd-frame { flex: 1; aspect-ratio: auto; display: grid; place-items: center; }
}
@media (max-width: 1024px) { .shift-overview .sh-sfy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pill" "copy" "vis"; } .shift-overview .sh-sfy .pd-spot-visual { margin-top: 22px; } }
/* 06 integrate your systems, centred (user, 13 Oct): pill → orbit (no container) → title → paragraph → three items in a row */
.shift-overview .sh-int-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.shift-overview .sh-int-vis { width: min(640px, 100%); aspect-ratio: 1000 / 600; margin-top: 4px; }
.shift-overview .sh-int-head h2 { margin-top: clamp(4px, 1vw, 12px); max-width: 760px; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; }
.shift-overview .sh-int-head p { margin-top: 18px; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.shift-overview .sh-int-items { list-style: none; margin: clamp(44px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shift-overview .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-overview .sh-int-item:hover, .shift-overview .sh-int-item:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md), 0 0 0 1.5px var(--sh-line); }
.shift-overview .sh-int-item h3 { margin-top: 20px; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.shift-overview .sh-int-item p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.shift-overview .sh-int-item .pd-more { margin-top: auto; padding-top: 18px; }
@media (max-width: 900px) { .shift-overview .sh-int-items { grid-template-columns: minmax(0, 1fr); } }

/* 08 hardware: three bento frames, light blue, each with its visual on a dotted stage */
.shift-overview .sh-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shift-overview .sh-frame { background: linear-gradient(180deg, #F6F9FE 0%, #fff 70%); box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .1); }
.shift-overview .sh-frame h3 { margin-top: 0; }
.shift-overview .sh-frame .pd-more { margin-top: 0; padding-top: 16px; }
.shift-overview .sh-frame-vis { position: relative; width: 100%; margin-top: 24px; aspect-ratio: 1 / .9; display: grid; place-items: center; padding: 16px; border-radius: 20px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(rgba(26, 111, 216, .09) 1px, transparent 1.2px) 0 0 / 16px 16px, radial-gradient(80% 70% at 50% 0%, #E6F0FC, #F4F8FE 70%); box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .08); }
.shift-overview .sh-hw-img { width: 78%; } .shift-overview .sh-hw-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(15, 50, 110, .3)); }
.shift-overview .sh-hw-img.is-tall { width: auto; height: 80cqw; } .shift-overview .sh-hw-img.is-tall picture { height: 100%; } .shift-overview .sh-hw-img.is-tall img { width: auto; height: 100%; }   /* the portrait badge, sized by height: 80% of the stage's width keeps it inside the 1 : .9 stage */
@media (max-width: 1024px) { .shift-overview .sh-hw-img.is-tall { height: 300px; } }
.shift-overview .sh-frame-vis .mi-shc { zoom: .74; } .shift-overview .sh-frame-vis .mi-shz { zoom: .64; }
@container (max-width: 330px) { .shift-overview .sh-frame-vis .mi-shc { zoom: .62; } .shift-overview .sh-frame-vis .mi-shz { zoom: .54; } }
@media (max-width: 1024px) { .shift-overview .sh-frames { grid-template-columns: minmax(0, 1fr); } .shift-overview .sh-frame-vis { aspect-ratio: auto; min-height: 300px; } .shift-overview .sh-frame-vis .mi-shc { zoom: .85; } .shift-overview .sh-frame-vis .mi-shz { zoom: .8; } }
@media (max-width: 600px) { .shift-overview .sh-frame-vis .mi-shc { zoom: .68; } .shift-overview .sh-frame-vis .mi-shz { zoom: .6; } }

/* linked cards ("Card titles link to the pages shown"): the whole card is the link, an arrow top right */
.shift-overview .sh-ltile { position: relative; display: block; color: inherit; }
.shift-overview .sh-ltile-go { position: absolute; top: 28px; right: 28px; width: 18px; height: 18px; color: var(--text-3, #8A8DA0); transition: transform .25s var(--ease-out), color .25s; } .shift-overview .sh-ltile-go svg { width: 100%; height: 100%; }
.shift-overview .sh-ltile:hover .sh-ltile-go { color: var(--brand); transform: translate(2px, -2px); }
.shift-overview .sh-ltile h3 { padding-right: 24px; }
/* on the dark panel */
.shift-overview .sh-dark-grid .center-head h2 { color: #fff; }
.shift-overview .sh-dark-grid .pd-grid9 { margin-top: clamp(40px, 5vw, 64px); }
.shift-overview .sh-ltile.is-dark { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.shift-overview .sh-ltile.is-dark:hover { background: rgba(255, 255, 255, .08); transform: translateY(-4px); }
.shift-overview .sh-ltile.is-dark h3 { color: #fff; } .shift-overview .sh-ltile.is-dark p { color: var(--text-inv-2); }
.shift-overview .sh-ltile.is-dark .pd-tile9-ic { background: rgba(110, 170, 240, .14); color: var(--sh-glow); box-shadow: inset 0 0 0 1px rgba(110, 170, 240, .24); }
.shift-overview .sh-ltile.is-dark .sh-ltile-go { color: rgba(255, 255, 255, .5); } .shift-overview .sh-ltile.is-dark:hover .sh-ltile-go { color: #fff; }

/* ---------- customer quote: the ATS overview's typed testimonial on a soft blue card ---------- */
.shift-overview .sh-quote { margin: 0; padding: clamp(44px, 6vw, 96px) clamp(24px, 6vw, 120px); border-radius: var(--r-panel); text-align: center;
  background: radial-gradient(60% 80% at 50% 0%, rgba(26, 111, 216, .09), transparent 70%), linear-gradient(180deg, #F8FBFE 0%, #EDF4FC 100%); box-shadow: inset 0 0 0 1px rgba(30, 80, 150, .1); }
.shift-overview .sh-quote blockquote { margin: 0; }
.shift-overview .sh-quote blockquote p { display: grid; max-width: 940px; margin: 0 auto; font: 500 clamp(24px, 2.7vw, 40px)/1.25 var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.shift-overview .sh-quote blockquote p > span { grid-area: 1 / 1; }
.shift-overview .sh-tw-full { visibility: hidden; }
.shift-overview .sh-tw.is-typing::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.1em; background: var(--sh); animation: miBlink .8s steps(1) infinite; }
.shift-overview .sh-quote figcaption { margin-top: clamp(24px, 3vw, 36px); font: 600 16px/1.3 var(--font-body); color: var(--sh-d); }

/* ---------- demo band: the "Meet" card in the light blue of the .is-sky panels; buttons keep the site purple ---------- */
.shift-overview .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-overview .ami-meet::before { background: repeating-linear-gradient(90deg, rgba(40, 100, 180, .08) 0 72px, transparent 72px 89px) center top; }
.shift-overview .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-overview .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); }

/* ===== KIT OPTIONS (design-port) */
/* While a stacking card holds keyboard focus it scrolls with the page instead of sticking (WCAG 2.4.11). */
.shift-overview .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-overview .pd-stack-inner { grid-template-columns: minmax(0, 1fr); } }

/* Keyboard focus rings (checks run 1; WCAG 2.4.7, 1.4.11), as on ats.html: the hero buttons and the video pill sit on the dark purple
   artwork, where the brand-purple ring measured 2.7-3.0:1. */
.shift-overview .pd-hero :focus-visible { outline-color: var(--brand-soft); }
/* the video pill is a dark pill on the light screenshot (checks run 2: 1.1-1.9:1): its ring goes inside the pill, so it is always on
   dark, as on ats.html */
.shift-overview .pd-hero .pd-play:focus-visible { outline-color: #fff; outline-offset: -4px; }

@supports (zoom: 1) {
  /* industries */
  @media (max-width: 309.98px) { .shift-overview .mi[data-mini="at"] { zoom: 0.95; } }   /* worst -7.5 px at 300 (DIV.mi.mi-at), was 1 */
  @media (max-width: 309.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.55; } }   /* worst -129 px at 300 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 310px) and (max-width: 329.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.6; } }   /* worst -119 px at 310 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 330px) and (max-width: 339.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.65; } }   /* worst -99 px at 330 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 340px) and (max-width: 358.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.7; } }   /* worst -89 px at 340 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 359px) and (max-width: 369.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.75; } }   /* worst -62 px at 359 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 370px) and (max-width: 379.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.8; } }   /* worst -59 px at 370 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 380px) and (max-width: 399.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.85; } }   /* worst -41 px at 380 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 400px) and (max-width: 412.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.9; } }   /* worst -29 px at 400 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (min-width: 413px) and (max-width: 428.98px) { .shift-overview .mi[data-mini="shd"] { zoom: 0.95; } }   /* worst -8 px at 413 (SPAN.mi-shd-tag.is-warn), was 1 */
  @media (max-width: 309.98px) { .shift-overview .mi[data-mini="shg"] { zoom: 0.95; } }   /* worst -6 px at 300 (DIV.mi.mi-shg.is-s2.is-ready), was 1 */
}