/* Core HR page (essential_hr.html). Converted once on 2026-10-05 from the design export sense-hr-overview-share (1).html (tokens, base, sections, agents, product, minis; nav.css is left to nav-footer-new.css), scoped to main.hr-page 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.hr-page */

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

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

.hr-page .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;
}

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

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

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

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

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

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

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

/* ---------- Odometer (digits roll; the real text stays in .sr-only) ---------- */
.hr-page .odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr-page .odo-reels { display: inline-flex; align-items: baseline; }
.hr-page .odo-col { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; }
.hr-page .odo-reel { display: flex; flex-direction: column; transform: translate3d(0, 0, 0); transition: transform var(--odo-dur, 1.8s) cubic-bezier(.2, .75, .1, 1); transition-delay: var(--odo-delay, 0s); }
.hr-page .odo-reel > span { height: 1.1em; }
.hr-page .odo-static { display: inline-block; opacity: 0; transform: translateY(.3em); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--odo-delay, .2s); }
.js .hr-page .odo-fade { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: .5s; }
.hr-page .odo-run .odo-static, .hr-page .odo-run .odo-fade, .hr-page .odo-run.odo-fade { opacity: 1; transform: none; }

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

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

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

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

.hr-page .hero-visual { position: relative; width: 100%; max-width: 1180px; margin-top: 72px; perspective: 1400px; }
.hr-page .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;
}
.hr-page .hero-window img { width: 100%; border-radius: 19px; }

.hr-page .float-card { background: #fff; color: var(--text); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.hr-page .hero-floats { position: absolute; inset: 0; pointer-events: none; }

.hr-page .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; }
.hr-page .chip-check { width: 24px; height: 24px; border-radius: 50%; background: var(--live-bg); color: var(--live); display: grid; place-items: center; flex-shrink: 0; }
.hr-page .chip-check svg { width: 13px; height: 13px; }
.hr-page .chip-1 { right: -40px; top: 9%; }
.hr-page .chip-2 { right: -64px; top: 42%; animation-delay: -1.5s; }
.hr-page .chip-3 { left: 6%; bottom: 8%; animation-delay: -3s; }
.hr-page .chip-4 { right: 12%; bottom: -22px; animation-delay: -4.5s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.js .hr-page .hero-floats .float-card { opacity: 0; scale: .92; transition: opacity .7s var(--ease-out), scale .7s var(--ease-out); }
.js .hr-page .hero-floats.in .float-card { opacity: 1; scale: 1; }
.hr-page .hero-floats.in .chip-1 { transition-delay: .15s; } .hr-page .hero-floats.in .chip-2 { transition-delay: .3s; }
.hr-page .hero-floats.in .chip-3 { transition-delay: .45s; } .hr-page .hero-floats.in .chip-4 { transition-delay: .6s; }

@media (max-width: 1280px) {
   .hr-page .chip-1 { right: -12px; } .hr-page .chip-2 { right: -12px; }
}
@media (max-width: 900px) {
  .hr-page .hero-visual { margin-top: 48px; }
  .hr-page .hero-floats { position: static; pointer-events: auto; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .hr-page .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; }
  .hr-page .hero-chips::-webkit-scrollbar { display: none; }
  .hr-page .chip { position: static; scroll-snap-align: start; animation: none; box-shadow: var(--shadow-sm); }
}
@media (max-width: 767px) {
  .hr-page .hero-window { padding: 5px; border-radius: 16px; }
  .hr-page .hero-window img { border-radius: 12px; }
  .hr-page .hero-copy .cta-group { width: 100%; flex-direction: column; }
  .hr-page .hero-copy .cta-group .btn { width: 100%; }
}

/* ==========================================================================
   02 STATS STRIP — odometer counters with dashed dividers
   ========================================================================== */
.hr-page .trust-bar { padding-block: 100px 24px; }
.hr-page .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }
.hr-page .stat { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 40px; padding: 8px 20px; border-left: 1px dashed var(--line-dash); min-height: 148px; text-align: center; }
.hr-page .stat:first-child { border-left: 0; }
.hr-page .stat-top { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hr-page .stat-num { display: inline-flex; align-items: center; gap: 8px; font: 500 clamp(30px, 2.9vw, 44px)/1.1 var(--font-display); letter-spacing: -0.035em; color: var(--text); }
.hr-page .stat-lbl { font-size: 15px; color: var(--text-2); }
.hr-page .stat-rating { display: flex; align-items: center; gap: 8px; }
.hr-page .rating-badge img { width: 22px; height: 22px; border-radius: 5px; }
.hr-page .rating-stars { display: flex; gap: 2px; }
.hr-page .rating-stars svg { width: 15px; height: 15px; }
.hr-page .odo-emoji { font-size: .55em; vertical-align: .18em; }
@media (max-width: 1100px) {
  .hr-page .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .hr-page .stat:nth-child(4) { border-left: 0; }
}
@media (max-width: 640px) {
  .hr-page .trust-bar { padding-block: 48px 8px; }
  .hr-page .stats { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .hr-page .stat { min-height: 0; gap: 16px; padding: 22px 8px; border-top: 1px dashed var(--line-dash); }
  .hr-page .stat:nth-child(odd) { border-left: 0; }
  .hr-page .stat:nth-child(4) { border-left: 1px dashed var(--line-dash); }
  .hr-page .stat:nth-child(-n+2) { border-top: 0; }
  .hr-page .stat:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   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.
   ========================================================================== */
.hr-page .ta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head devices" "steps shot" "cta shot"; grid-template-rows: auto auto 1fr; column-gap: 88px; }
.hr-page .ta-card-bg { grid-column: 2; grid-row: 1 / 4; border-radius: var(--r-card-lg); background: radial-gradient(70% 55% at 90% 95%, #fff 0%, transparent 70%), linear-gradient(155deg, #5238E8 0%, #8B78FF 42%, #D9D2FF 78%, #F3F0FF 100%); }
.hr-page .ta-head { grid-area: head; padding-top: 24px; }
.hr-page .ta-head .lede { margin-top: 20px; max-width: 520px; }
.hr-page .ta-steps { grid-area: steps; position: relative; margin-top: 56px; padding-left: 64px; }
.hr-page .ta-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 30px; background: rgba(99, 74, 252, .1); overflow: hidden; }
.hr-page .ta-bar-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% / 3); border-radius: 30px; background: var(--brand); transform: translateY(calc(var(--ta-i, 0) * 100%)); transition: transform .6s var(--ease-out); }
.hr-page .ta-list { display: flex; flex-direction: column; }
.hr-page .ta-list li { display: flex; align-items: center; gap: 20px; padding: 22px 0; font: 500 clamp(19px, 1.6vw, 22px)/1.35 var(--font-display); letter-spacing: -0.015em; color: var(--text-2); transition: color .4s; }
.hr-page .ta-list li:first-child { padding-top: 0; }
.hr-page .ta-list li.is-active { color: var(--text); }
.hr-page .ta-ic { flex-shrink: 0; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: #EFF1FF; color: #634AFC; }
.hr-page .ta-ic svg { width: 24px; height: 24px; }
.hr-page .ta-shot { grid-area: shot; position: relative; margin: 32px 44px 44px; aspect-ratio: 1 / .86; align-self: start; }
.hr-page .ta-frame { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.hr-page .ta-frame.is-active { opacity: 1; transform: none; }
.hr-page .ta-frame:nth-child(1) img { max-width: 80%; max-height: 80%; }
.hr-page .ta-frame:nth-child(2) img { box-shadow: none; border-radius: 0; }
.hr-page .ta-frame img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-card); box-shadow: 0 30px 60px -28px rgba(33, 18, 140, .55); }
@media (max-width: 900px) {
  .hr-page .ta { grid-template-columns: 1fr; grid-template-areas: "head" "steps" "cta" "devices" "shot"; grid-template-rows: none; }
  .hr-page .ta-card-bg { grid-column: 1; grid-row: 4 / 6; margin-top: 40px; }
  .hr-page .ta-head { padding-top: 0; }
  .hr-page .ta-steps { margin-top: 40px; padding-left: 40px; }
  .hr-page .ta-shot { margin: 20px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-page .chip { animation: none !important; }
  .hr-page .hero-window { transform: none; }
  .js .hr-page .hero-anim { opacity: 1; transform: none; }
  .js .hr-page .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 */
.hr-page .ami-meet-wrap { position: relative; }
.hr-page .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; }
.hr-page .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%); }
.hr-page .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%); }
.hr-page .ami-meet-copy { max-width: 720px; margin: 0 auto; }
.hr-page .ami-meet-copy h2 { color: var(--text); }
.hr-page .ami-meet-copy p { margin: 18px auto 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 620px; }
.hr-page .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 */
.hr-page .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); }
.hr-page .ami-meet-window img { width: 100%; border-radius: 19px 19px 0 0; }
@media (max-width: 767px) {
  .hr-page .ami-meet-shot { height: 220px; }
}

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

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

/* ---------- 01 HERO — dark: bg_1 artwork fills the rounded hero frame; the screen is cropped by the frame's bottom edge ---------- */
.hr-page .pd-hero { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--frame-inset) + 150px); color: var(--text-inv); }
.hr-page .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; }
.hr-page .pd-hero-bg picture, .hr-page .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 */
.hr-page .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 */
.hr-page .pd-hero .hero-window { transform: none; will-change: auto; }
.hr-page .pd-hero .chip-2 { display: none; }
.hr-page .pd-hero .chip-1 { top: 12%; right: -44px; }
.hr-page .pd-hero .chip-3 { left: -40px; bottom: auto; top: 40%; }
.hr-page .pd-hero .chip-4 { right: 8%; bottom: auto; top: 70%; }
.hr-page .pd-hero .pd-play { top: 34%; white-space: nowrap; }
.hr-page .pd-hero .hero-copy h1 { color: #fff; }
.hr-page .pd-hero .hero-copy .lede { max-width: 680px; color: var(--text-inv-2); margin-top: 34px; }   /* the pill above floats gently (pdPillFloat, +7px at most), so the description can sit close (user, 1 Oct) */
@media (max-width: 900px) {
  .hr-page .pd-hero { padding-top: calc(var(--frame-inset) + 120px); }
  .hr-page .pd-hero .hero-visual { height: 64vw; margin-top: 40px; clip-path: inset(-40px -40px 0 -40px); }
  .hr-page .pd-hero .hero-floats { display: none; }
}
.hr-page .pd-hero .hero-copy { max-width: 1240px; }   /* room for a one-line title on wide screens */
.hr-page .pd-hero-aside { position: relative; z-index: 2; margin-top: 22px; }   /* clears the title even at the top of its float (-14px) */
/* floating purple card, as the AMI page header chip (agents.css .ami-chip), with a gentler float so the description can sit closer (user, 1 Oct) */
.hr-page .pd-aside-chip { display: inline-block; padding: 12px 20px; border-radius: 18px; color: #fff; font: 500 clamp(17px, 1.5vw, 21px)/1.35 var(--font-display); letter-spacing: -0.01em;
  background: linear-gradient(0deg, #978CEC 0%, rgba(116, 98, 244, .97) 26%, #5238E0 100%); box-shadow: inset 0 0 36px rgba(255, 255, 255, .28), 0 24px 50px -18px rgba(64, 40, 220, .7);
  animation: pdPillFloat 3.2s ease-in-out infinite alternate; }
@keyframes pdPillFloat { from { translate: 0 -5px; rotate: -1deg; } to { translate: 0 7px; rotate: .8deg; } }
@media (prefers-reduced-motion: reduce) { .hr-page .pd-aside-chip { animation: none; } }
.hr-page .pd-trial { display: flex; gap: 8px; width: min(620px, 100%); margin-top: 36px; padding: 6px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hr-page .pd-field { flex: 1; min-width: 0; }
.hr-page .pd-field input { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .06); color: #fff;
  font: 400 15px/1 var(--font-body); outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s, background-color .2s; }
.hr-page .pd-field input::placeholder { color: rgba(255, 255, 255, .55); }
.hr-page .pd-field input:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px var(--brand-soft); }
.hr-page .pd-field input.is-invalid { box-shadow: inset 0 0 0 1.5px #FF8A8A; }
.hr-page .pd-trial .btn { --btn-h: 48px; flex-shrink: 0; }
.hr-page .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; }
.hr-page .pd-play:hover { transform: translate(-50%, -50%) scale(.97); background: rgba(11, 10, 20, .85); }
.hr-page .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; }
.hr-page .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) {
  .hr-page .pd-hero .hero-copy .lede { margin-top: 32px; }
  .hr-page .pd-trial { flex-direction: column; padding: 8px; }
  .hr-page .pd-trial .btn { width: 100%; }
  .hr-page .pd-play { height: 44px; padding: 0 16px 0 6px; font-size: 13px; gap: 8px; top: 50%; }
  .hr-page .pd-play-ic { width: 32px; height: 32px; }
}

/* ---------- 02 STATS — home strip with 4 items ----------
   The home strip's dividers are built for 5 items (a 3-column row at 1100px and below, so its 4th item starts a row; on phones the
   last item spans the row), so this strip sets its own at every width: a dashed line before every item that doesn't start a row. */
.hr-page .pd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
.hr-page .pd-stats .stat { min-height: 0; justify-content: flex-start; gap: 40px; border-left: 1px dashed var(--line-dash); }   /* 40px from the figure to its label */
.hr-page .pd-stats .stat:first-child { border-left: 0; }
.hr-page .pd-stats .stat:last-child { grid-column: auto; }
@media (max-width: 1024px) {   /* 2 × 2 */
  .hr-page .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .hr-page .pd-stats .stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 767px) {   /* phones: a dashed line between the rows too */
  .hr-page .pd-stats { grid-template-columns: 1fr 1fr; }
  .hr-page .pd-stats .stat { gap: 16px; padding: 22px 8px; border-top: 1px dashed var(--line-dash); }
  .hr-page .pd-stats .stat:nth-child(-n+2) { border-top: 0; }
  .hr-page .pd-stats .stat-num { font-size: 30px; }
  .hr-page .pd-stats .stat-iso .stat-num { font-size: 26px; white-space: nowrap; }
}

/* ---------- 03 BIG CLAIM — Zyntexa style giant line, auto-scrolling like the home page's "Get started" marquee (4 copies, -50% loop) ---------- */
.hr-page .pd-claim { position: relative; overflow: clip; padding: clamp(72px, 9vw, 140px) 0 clamp(24px, 3vw, 48px); text-align: center; }
.hr-page .pd-claim-marquee { overflow: hidden; }
.hr-page .pd-claim-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hr-page .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); }
.hr-page .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; }
.hr-page .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); } }
.hr-page .pd-claim-sub { max-width: 560px; margin: clamp(20px, 2.4vw, 36px) auto 0; padding-inline: var(--gutter); font: 500 clamp(20px, 2vw, 28px)/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .hr-page .pd-claim-track { animation: none; width: 100%; justify-content: center; padding-inline: var(--gutter); }
  .hr-page .pd-claim-text { font-size: clamp(48px, 8vw, 120px); white-space: normal; text-wrap: balance; padding-right: 0; }
  .hr-page .pd-claim-text[aria-hidden] { display: none; }
  .hr-page .pd-claim-tile { display: none; }
}

/* ---------- 04 CHAPTERS — shared head + module label + "Learn more" ---------- */
.hr-page .pd-chapter-head { position: relative; max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; }
.hr-page .pd-chapter-head .eyebrow { margin-bottom: 18px; }
.hr-page .pd-chapter-head h2 { color: inherit; }
.hr-page .pd-mod { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-body); color: var(--brand-hover); letter-spacing: .01em; }
.hr-page .pd-mod::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.hr-page .pd-more { display: inline-block; margin-top: 24px; font: 500 15px/1.4 var(--font-body); color: var(--brand-hover); transition: color .2s; }
.hr-page .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 */
.hr-page .pd-more:hover { color: var(--brand); }
.hr-page .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) */
.hr-page .pd-stack { position: relative; margin-top: clamp(48px, 5vw, 72px); }
.hr-page .pd-stack-card { --p: 0; position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 36px; }
.hr-page .pd-stack-card:last-child { margin-bottom: 0; }
.hr-page .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); }
.hr-page .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 */
.hr-page .pd-stack-copy { position: relative; z-index: 1; max-width: 500px; }
.hr-page .pd-stack-copy h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.hr-page .pd-stack-copy p { margin-top: 18px; font-size: 17px; line-height: 1.65; }
.hr-page .pd-stack-visual { position: relative; z-index: 1; }
.hr-page .pd-stack-visual .pd-frame { aspect-ratio: 1.2; }
.hr-page .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 */
.hr-page .pd-stack-card .pd-stack-visual .pd-frame:has(> .mi)::before { display: none; }
/* themes */
.hr-page .pd-stack-card.is-purple .pd-stack-inner { background: radial-gradient(90% 70% at 85% 110%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(160deg, #7A63FF 0%, #634AFC 45%, #4A31E6 100%); color: #fff; }
.hr-page .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; }
.hr-page .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); }
.hr-page .pd-stack-card.is-purple p, .hr-page .pd-stack-card.is-dark p { color: rgba(255, 255, 255, .78); }
.hr-page .pd-stack-card.is-light p { color: var(--text-2); }
.hr-page .pd-stack-card.is-purple .pd-mod, .hr-page .pd-stack-card.is-dark .pd-mod { color: #DCD6FF; }
.hr-page .pd-stack-card.is-purple .pd-mod::before { background: #fff; } .hr-page .pd-stack-card.is-dark .pd-mod::before { background: var(--brand-soft); }
.hr-page .pd-stack-card.is-purple .pd-bullets li, .hr-page .pd-stack-card.is-dark .pd-bullets li { color: #fff; }
.hr-page .pd-stack-card.is-purple .pd-bullets svg { background: rgba(255, 255, 255, .18); color: #fff; }
.hr-page .pd-stack-card.is-dark .pd-bullets svg { background: rgba(123, 92, 255, .22); color: var(--brand-soft); }
.hr-page .pd-stack-card.is-purple .pd-more, .hr-page .pd-stack-card.is-dark .pd-more { color: #fff; }
.hr-page .pd-stack-card.is-purple .pd-frame { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hr-page .pd-stack-card.is-purple .pd-frame::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 56px, transparent 56px 70px); }
.hr-page .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); }
.hr-page .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 */
  .hr-page .pd-stack-card { position: relative; top: auto; margin-bottom: 20px; }
  .hr-page .pd-stack-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; transform: none; }
  .hr-page .pd-stack-inner::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hr-page .pd-stack-inner { transform: none; } .hr-page .pd-stack-inner::after { display: none; } }

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

/* 04a spotlight rows — text + bullets | framed visual, alternating */
.hr-page .pd-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hr-page .pd-bullets li { display: flex; align-items: center; gap: 12px; font: 500 15px/1.3 var(--font-body); color: var(--text); }
.hr-page .pd-bullets svg { width: 22px; height: 22px; flex-shrink: 0; padding: 4px; border-radius: 7px; background: var(--brand-10); color: var(--brand); }
.hr-page .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; }
.hr-page .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%); }
.hr-page .pd-frame picture { display: block; width: 100%; height: 100%; }
.hr-page .pd-frame img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(49, 30, 160, .18)); }

/* 04c dark panel — two halves */
.hr-page .pd-dark { padding-block: var(--section-y); }
.hr-page .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; }
.hr-page .pd-dark .pd-mod::before { background: var(--brand-soft); }
.hr-page .pd-dark .pd-duo-item .pd-mod { color: var(--brand-soft); }   /* label in the dot's lavender */
.hr-page .pd-dark .pd-more { color: #fff; }
.hr-page .pd-dark .pd-more:hover { color: var(--brand-soft); }
.hr-page .pd-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
.hr-page .pd-duo-item { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card-lg); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hr-page .pd-duo-item h3 { margin-top: 14px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -0.02em; color: #fff; }
.hr-page .pd-duo-item p { margin-top: 14px; color: var(--text-inv-2); font-size: 16px; line-height: 1.65; }
.hr-page .pd-duo-item .pd-more { margin-top: auto; padding-top: 22px; }
.hr-page .pd-duo-visual { width: 100%; height: 300px; margin-bottom: 30px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(123, 92, 255, .35), rgba(123, 92, 255, .05) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hr-page .pd-duo-shot { padding: 26px 26px 0; }
.hr-page .pd-duo-shot picture, .hr-page .pd-duo-shot img { display: block; width: 100%; }
.hr-page .pd-duo-shot img { border-radius: 12px 12px 0 0; }
/* AMI reporting mini-UI */
.hr-page .pd-ami { height: 100%; padding: 24px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.hr-page .pd-ami-q { align-self: flex-end; display: flex; align-items: center; gap: 10px; max-width: 86%; }
.hr-page .pd-ami-q p { padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--brand); color: #fff; font-size: 14px; line-height: 1.4; }
.hr-page .pd-ami-av { order: 2; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; font: 500 10px/1 var(--font-body); }
.hr-page .pd-ami-a { max-width: 92%; padding: 16px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--text); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.hr-page .pd-ami-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hr-page .pd-ami-head img { width: 22px; height: 22px; }
.hr-page .pd-ami-head span { margin-left: auto; padding: 3px 8px; border-radius: 100px; background: #E6F9F3; color: #0A8F6A; font-size: 11px; font-weight: 500; }
.hr-page .pd-ami-a p { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.hr-page .pd-ami-a p b { color: var(--text); }
.hr-page .pd-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.hr-page .pd-bars span { display: grid; grid-template-columns: 1fr 76px; align-items: center; gap: 10px; }
.hr-page .pd-bars i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), #9D8BFF); transform-origin: left; transform: scaleX(var(--v)); transition: transform 1.1s var(--ease-out); }
.hr-page .pd-bars em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.js .hr-page .pd-duo-item:not(.in) .pd-bars i { transform: scaleX(0); }
.hr-page .pd-bars span:nth-child(2) i { transition-delay: .1s; } .hr-page .pd-bars span:nth-child(3) i { transition-delay: .2s; } .hr-page .pd-bars span:nth-child(4) i { transition-delay: .3s; }
@media (max-width: 900px) { .hr-page .pd-duo { grid-template-columns: 1fr; } .hr-page .pd-duo-visual { height: 260px; } }

/* 04d bento — self-service access points + payroll */
.hr-page .pd-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
.hr-page .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); }
.hr-page .pd-tile h3 { margin-top: 14px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -0.02em; }
.hr-page .pd-tile p { margin-top: 14px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.hr-page .pd-tile .pd-more { margin-top: auto; padding-top: 22px; }
.hr-page .pd-devices { list-style: none; margin: 28px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hr-page .pd-device { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: 16px; background: var(--page); font: 500 13px/1 var(--font-body); color: var(--text); transition: background-color .3s, transform .3s var(--ease-out); }
.hr-page .pd-device:hover { background: var(--brand-10); transform: translateY(-3px); }
.hr-page .pd-device-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.hr-page .pd-device-ic svg { width: 24px; height: 24px; }
.hr-page .pd-tile-pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; align-items: stretch; padding-right: 0; padding-bottom: 0; overflow: hidden; }
.hr-page .pd-tile-copy { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: clamp(26px, 3vw, 40px); }
.hr-page .pd-tile-visual { align-self: end; border-radius: 20px 0 0 0; overflow: hidden; background: linear-gradient(160deg, #EEEBFF, #DCD5FF); padding: 20px 0 0 20px; }
.hr-page .pd-tile-visual picture, .hr-page .pd-tile-visual img { display: block; width: 100%; }
.hr-page .pd-tile-visual img { border-radius: 14px 0 0 0; }
@media (max-width: 1024px) {
  .hr-page .pd-bento { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hr-page .pd-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-page .pd-tile-pay { grid-template-columns: 1fr; padding-right: clamp(26px, 3vw, 40px); padding-bottom: 0; gap: 0; }
  .hr-page .pd-tile-visual { margin-right: calc(clamp(26px, 3vw, 40px) * -1); }
}

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

@media (prefers-reduced-motion: reduce) {
  .hr-page .pd-play-ic { animation: none; }
  .js .hr-page .pd-duo-item:not(.in) .pd-bars i { transform: scaleX(var(--v)); }
}

/* Insight & control: animated minis on the cards background, glass border */
.hr-page .pd-duo-visual:has(.mi) { display: grid; place-items: center; background: #0A0916 url("/assets/images/pages/homepage/ta-card-bg.webp") center / cover no-repeat; }
.hr-page .pd-duo-shot:has(.mi) { padding: 28px 28px 0; place-items: end center; }
.hr-page .pd-duo-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 30px 60px -30px rgba(0, 0, 0, .7); }
.hr-page .pd-duo-visual .mi-cu { border-bottom: 0; border-radius: 26px 26px 0 0; }

/* payroll tile: original layout (copy | visual side by side); the mini is scaled by js/minis.js to fit its panel */
.hr-page .pd-tile-pay:has(.mi) { padding-right: clamp(26px, 3vw, 40px); padding-bottom: clamp(26px, 3vw, 40px); align-items: center; }
.hr-page .pd-tile-pay:has(.mi) .pd-tile-copy { padding-bottom: 0; }
/* payroll card: just the animation, no background panel, flat on the card with no drop shadow */
.hr-page .pd-tile-visual:has(.mi) { align-self: stretch; display: grid; place-items: center; padding: 0; overflow: visible; background: none; }
.hr-page .pd-tile-visual .mi { border: 8px solid rgba(255, 255, 255, .16); background-clip: padding-box; box-shadow: none; }
.hr-page .pd-tile-visual .mi-py { width: 380px; max-width: none; }
@media (max-width: 600px) { .hr-page .pd-tile-visual:has(.mi) { margin: 20px 0 0; } }

/* Reporting mini — looped by js/minis.js: question types, AMI answers, bars grow */
.hr-page .pd-ami-q p { min-height: 1.4em; }
.hr-page .pd-ami-a { transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.hr-page .pd-ami.is-asking .pd-ami-a { opacity: 0; transform: translateY(12px) scale(.97); }
.hr-page .pd-ami.is-asking .pd-bars i, .hr-page .pd-ami.is-bars0 .pd-bars i { transform: scaleX(0); }
.hr-page .pd-ami-head span { transition: opacity .3s; }
.hr-page .pd-ami.is-bars0 .pd-ami-head span { opacity: 0; }

/* time & performance, stacked (mobile/tablet): visual below the steps, on the card background */
@media (max-width: 900px) {
  .hr-page .pd-ta { grid-template-areas: "head" "steps" "shot"; grid-template-rows: none; }
  .hr-page .pd-ta .ta-card-bg { grid-column: 1; grid-row: 3; margin-top: 40px; }
  .hr-page .pd-ta .ta-shot { grid-row: 3; margin: 64px 20px 24px; }
}
@media (min-width: 601px) { .hr-page .pd-tile-pay:has(.mi) { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

/* big claim: the S tile sits above the scrolling line instead of over it */
.hr-page .pd-claim { display: flex; flex-direction: column; align-items: center; }
.hr-page .pd-claim-marquee { width: 100%; }
.hr-page .pd-claim .pd-claim-tile { position: relative; left: auto; top: auto; order: -1; margin: 0 0 clamp(32px, 4vw, 52px); }
.hr-page .pd-claim .pd-claim-tile { margin-bottom: clamp(4px, 1vw, 14px); }   /* closer to the sliding line (user, 1 Oct) */
@media (max-width: 767px) { .hr-page .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.
   ========================================================================== */
.hr-page .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); }
.hr-page .mi svg { display: block; }
.hr-page .pd-frame .mi { margin: auto; }
.hr-page .pd-frame .mi img { filter: none; }   /* not the frame's product-screenshot image rules */

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

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

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

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

/* ---------- Onboarding timeline (355×442 export) ---------- */
.hr-page .mi-ob { --step: 2; width: min(380px, 100%); padding: 18px 18px 18px 16px; border-radius: 22px; }
.hr-page .mi-ob-list { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hr-page .mi-ob-rail { position: absolute; left: 36px; top: 40px; bottom: 60px; width: 2px; border-radius: 2px; background: #E8EEF6; }
.hr-page .mi-ob-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--step) / 4 * 100%); border-radius: inherit; background: #1BCAA7; transition: height .7s var(--ease-out); }
.hr-page .mi-ob-step { position: relative; z-index: 1; display: flex; gap: 14px; padding: 10px 10px 10px 4px; border-radius: 14px; transition: background-color .5s; }
.hr-page .mi-ob-dot { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #F0EFFF; color: #894AFF; transition: background-color .5s, color .5s, transform .5s var(--ease-out); }
.hr-page .mi-ob-step[data-ic="clock"] .mi-ob-dot { background: #FFF3E9; color: #FF934A; }
.hr-page .mi-ob-ic { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .45s var(--ease-out); }
.hr-page .mi-ob-ic svg { width: 16px; height: 16px; }
.hr-page .mi-ob-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.hr-page .mi-ob-txt b { font: 500 15.5px/1.3 var(--font-body); color: #495066; }
.hr-page .mi-ob-txt > span:not(.mi-ob-tag) { font-size: 12.5px; line-height: 1.4; color: #6C7597; }
.hr-page .mi-ob-tag { position: relative; height: 22px; margin-top: 4px; }
.hr-page .mi-ob-tag > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; white-space: nowrap; font: 500 11px/1 var(--font-body);
  opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s var(--ease-out); }
.hr-page .mi-ob-tag svg { width: 12px; height: 12px; }
.hr-page .t-done { background: #EEFFF6; color: #02847C; } .hr-page .t-now { background: #44A39C; color: #fff; } .hr-page .t-up { background: #FFF4E6; color: #844502; }
/* state classes set by js/minis.js (default markup state = design: 2 done, day one now, 2 upcoming) */
.hr-page .mi-ob-step.is-done .mi-ob-dot { background: #E4FFF0; color: #02847C; }
.hr-page .mi-ob-step.is-done .mi-ob-ic-done, .hr-page .mi-ob-step.is-done .t-done { opacity: 1; transform: none; }
.hr-page .mi-ob-step.is-now { background: #EEFFF6; }
.hr-page .mi-ob-step.is-now .mi-ob-dot { background: #1BCAA7; color: #fff; transform: scale(1.06); box-shadow: 0 0 0 5px rgba(27, 202, 167, .16); }
.hr-page .mi-ob-step.is-now .mi-ob-ic-now, .hr-page .mi-ob-step.is-now .t-now { opacity: 1; transform: none; }
.hr-page .mi-ob-step.is-up .mi-ob-ic-own, .hr-page .mi-ob-step.is-up .t-up { opacity: 1; transform: none; }

@media (max-width: 600px) {
  .hr-page .mi-ami-body { min-height: 300px; }
  .hr-page .mi-ob-txt > span:not(.mi-ob-tag) { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-page .mi-er-status i { animation: none; }
}

/* frames holding a mini-UI size to it (the fixed aspect ratio would crop the taller widgets) */
.hr-page .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 */
.hr-page .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); }
.hr-page .pd-stack-visual .mi-er { border-radius: 24px; }
.hr-page .pd-stack-visual .mi-ami { border-radius: 26px; }
.hr-page .pd-stack-visual .mi-ob { border-radius: 30px; }

/* ---------- Performance — review cycles (Performance.svg 455×349) ---------- */
.hr-page .mi-pf { width: min(440px, 100%); border-radius: 16px; overflow: hidden; }
.hr-page .mi-pf-head { padding: 13px 18px; background: #F0EFFF; font: 600 14px/1 var(--font-body); color: #4931DC; }
.hr-page .mi-pf-list { list-style: none; margin: 0; padding: 4px 18px 6px; }
.hr-page .mi-pf-row { display: grid; grid-template-columns: 38px 1fr auto; column-gap: 12px; align-items: center; padding: 14px 0 16px; }
.hr-page .mi-pf-row + .mi-pf-row { border-top: 1px solid #F1F2F6; }
.hr-page .mi-pf-badge { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--font-body); }
.hr-page .mi-pf-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hr-page .mi-pf-txt b { font: 500 14.5px/1.3 var(--font-body); color: #3F4147; }
.hr-page .mi-pf-txt span { font-size: 12.5px; line-height: 1.35; color: #6C7597; }
.hr-page .mi-pf-count { padding: 4px 7px; border-radius: 7px; background: #E5FDF0; color: #007C66; font: 500 12px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.hr-page .mi-pf-bar { grid-column: 1 / -1; height: 6px; margin-top: 14px; border-radius: 4px; background: #E6E7EC; overflow: hidden; }
.hr-page .mi-pf-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v)); transition: transform .9s var(--ease-out); }
.hr-page .mi-pf.is-pre .mi-pf-bar i { transform: scaleX(0); }
.hr-page .mi-pf-row.is-purple .mi-pf-badge { background: #E6E3FF; color: #4931DC; } .hr-page .mi-pf-row.is-purple .mi-pf-bar i { background: #7358F8; }
.hr-page .mi-pf-row.is-green .mi-pf-badge { background: #E5FDF0; color: #0A8F6A; } .hr-page .mi-pf-row.is-green .mi-pf-bar i { background: #3CC98A; }
.hr-page .mi-pf-row.is-orange .mi-pf-badge { background: #FFF4E0; color: #B35B00; } .hr-page .mi-pf-row.is-orange .mi-pf-bar i { background: #FFAA4C; }
.hr-page .mi-pf-count.is-bump { animation: miBump .4s var(--ease-out); }
@keyframes miBump { 40% { transform: scale(1.18); } }

/* ---------- Holidays & events — create event (Book.svg 337×354) ---------- */
.hr-page .mi-ev { width: min(380px, 100%); border-radius: 16px; }
.hr-page .mi-ev-head { position: relative; padding: 16px 18px 14px; border-bottom: 1px solid #EFEFEF; }
.hr-page .mi-ev-head b { font: 600 16px/1.2 var(--font-body); color: #2C2853; }
.hr-page .mi-ev-head .mi-ami-x { position: absolute; right: 16px; top: 16px; }
.hr-page .mi .mi-ev-head p { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: #5F6C87; }
.hr-page .mi-ev-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 9px; }
.hr-page .mi-ev-lbl { display: block; font: 500 12px/1.3 var(--font-body); color: #2C2853; }
.hr-page .mi-ev-lbl-row { display: flex; justify-content: space-between; margin-top: 6px; }
.hr-page .mi-ev-lbl-row em { font-style: normal; font-weight: 400; color: #5F6C87; }
.hr-page .mi-ev-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hr-page .mi-ev-cat { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border-radius: 6px; text-align: center; box-shadow: inset 0 0 0 1px #E4E7F0; transition: box-shadow .3s, background-color .3s; }
.hr-page .mi-ev-cat b { font: 500 12px/1.2 var(--font-body); color: #2C2853; }
.hr-page .mi-ev-cat > span:last-child { font-size: 10.5px; line-height: 1.35; color: #5F6C87; }
.hr-page .mi-ev-cat-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #EFF1FF; color: #634AFC; }
.hr-page .mi-ev-cat-ic svg { width: 13px; height: 13px; }
.hr-page .mi-ev-cat.is-on { background: #F8F9FF; box-shadow: inset 0 0 0 1.5px #8C7BFF; }
.hr-page .mi-ev-input { display: flex; align-items: center; height: 36px; padding: 0 11px; border-radius: 6px; box-shadow: inset 0 0 0 1px #DCDFFF; font-size: 12.5px; color: #2C2853; transition: box-shadow .25s; }
.hr-page .mi-ev-input.is-focus { box-shadow: inset 0 0 0 1.5px #634AFC; }
.hr-page .mi-ev-icon-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.hr-page .mi-ev-hint { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.4; color: #5F6C87; }
.hr-page .mi-ev-swatch { width: 34px; height: 34px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; background: #FFF3D9; color: #B35B00; box-shadow: inset 0 0 0 1px #E4E7F0; transition: background-color .35s, color .35s, transform .3s var(--ease-out); }
.hr-page .mi-ev-swatch svg { width: 16px; height: 16px; }
.hr-page .mi-ev-swatch.is-pop { transform: scale(1.12); }

/* ---------- Absence — AMI-flagged patterns (Sickness.svg 453×286) ---------- */
.hr-page .mi-ab { width: min(460px, 100%); border-radius: 16px; overflow: hidden; }
.hr-page .mi-ab-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 14px 18px; background: #F0EFFF; font: 600 14px/1 var(--font-body); color: #4931DC; }
.hr-page .mi-ab-head svg { width: 18px; height: 18px; color: #7358F8; }
.hr-page .mi-ab-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); transform: translateX(-100%); }
.hr-page .mi-ab.is-scanning .mi-ab-scan { animation: miScan 1.2s ease-in-out infinite; }
@keyframes miScan { to { transform: translateX(100%); } }
.hr-page .mi-ab-list { list-style: none; margin: 0; padding: 0 18px; }
.hr-page .mi-ab-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.hr-page .mi-ab-row + .mi-ab-row { border-top: 1px solid #F1F2F6; }
.hr-page .mi-ab-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.hr-page .mi-ab-av img { width: 100%; height: 100%; object-fit: cover; }
.hr-page .mi-ab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-page .mi-ab-txt b { font: 500 14px/1.3 var(--font-body); color: #3F4147; }
.hr-page .mi-ab-txt span { font-size: 12px; line-height: 1.35; }
.hr-page .mi-ab-tag { padding: 4px 7px; border-radius: 6px; font: 500 11.5px/1 var(--font-body); white-space: nowrap; transition: opacity .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.hr-page .mi-ab-row.is-high .mi-ab-txt span { color: #C9111C; } .hr-page .mi-ab-row.is-high .mi-ab-tag { background: #FFE9E9; color: #C9111C; }
.hr-page .mi-ab-row.is-mon .mi-ab-txt span { color: #B07A00; } .hr-page .mi-ab-row.is-mon .mi-ab-tag { background: #FFF4DC; color: #8A5D00; }
.hr-page .mi-ab-row.is-ok .mi-ab-txt span { color: #5F6C87; } .hr-page .mi-ab-row.is-ok .mi-ab-tag { background: #E5FDF0; color: #007C66; }
.hr-page .mi-ab .mi-ab-row.is-pre { opacity: 0; transform: translateY(8px); }
.hr-page .mi-ab .mi-ab-row.is-pre-tag .mi-ab-tag { opacity: 0; transform: scale(.6); }

/* ---------- Customisation — screen designer fields (Customisation.svg 447×233) ---------- */
.hr-page .mi-cu { width: min(340px, 100%); padding: 6px 20px 18px; border-radius: 18px 18px 0 0; }
.hr-page .mi-cu-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #EEF0F6; }
.hr-page .mi-cu-tab { padding: 14px 0 12px; text-align: center; font: 500 14px/1 var(--font-body); color: #6C7597; transition: color .3s; }
.hr-page .mi-cu-tab.is-on { color: #4931DC; }
.hr-page .mi-cu-ink { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; border-radius: 2px; background: #4931DC; transition: transform .45s var(--ease-out); }
.hr-page .mi-cu.is-new .mi-cu-ink { transform: translateX(100%); }
.hr-page .mi-cu-search { display: flex; align-items: center; gap: 8px; height: 36px; margin: 14px 0 12px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #DCDFFF; font-size: 13px; color: #6C7597; }
.hr-page .mi-cu-search svg { width: 15px; height: 15px; }
.hr-page .mi-cu-lists { position: relative; }
.hr-page .mi-cu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; transition: opacity .35s, transform .45s var(--ease-out); }
.hr-page .mi-cu-list[data-list="new"] { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateX(16px); pointer-events: none; }
.hr-page .mi-cu.is-new .mi-cu-list[data-list="ex"] { opacity: 0; transform: translateX(-16px); }
.hr-page .mi-cu.is-new .mi-cu-list[data-list="new"] { opacity: 1; transform: none; }
.hr-page .mi-cu-row { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; background: #F8F9FF; box-shadow: inset 0 0 0 1px #E4E7F0; font-size: 13.5px; color: #2C2853; transition: transform .45s var(--ease-out), box-shadow .3s, background-color .3s; }
.hr-page .mi-cu-drag { width: 10px; height: 14px; color: #B0B3C5; flex-shrink: 0; }
.hr-page .mi-cu-ic { width: 16px; height: 16px; color: #495066; flex-shrink: 0; }
.hr-page .mi-cu-row.is-lift { background: #fff; box-shadow: 0 14px 26px -12px rgba(49, 30, 160, .45), inset 0 0 0 1.5px #8C7BFF; transform: translate(10px, -4px) rotate(-1.5deg); }

/* ---------- Payroll — clock in → verified → payroll (Payroll.svg 394×497) ---------- */
.hr-page .mi-py { width: min(380px, 100%); padding: 14px; border-radius: 18px; display: flex; flex-direction: column; align-items: stretch; background: #FBFBFD; }
.hr-page .mi-py-step { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #EEF0F6; transition: box-shadow .4s, opacity .4s, transform .45s var(--ease-out); }
.hr-page .mi-py-top { display: flex; align-items: center; gap: 10px; }
.hr-page .mi-py-top b { flex: 1; font: 500 14.5px/1 var(--font-body); color: #3F4147; }
.hr-page .mi-py-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--font-body); }
.hr-page .mi-py-step.is-green .mi-py-n { background: #E8F7E4; color: #2E7D32; } .hr-page .mi-py-step.is-purple .mi-py-n { background: #ECE8FF; color: #4931DC; } .hr-page .mi-py-step.is-blue .mi-py-n { background: #E7F0FF; color: #2463D1; }
.hr-page .mi-py-auto { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: #E5FDF0; color: #007C66; font: 500 11px/1 var(--font-body); }
.hr-page .mi-py-auto svg { width: 11px; height: 11px; }
.hr-page .mi-py-sub { display: flex; gap: 16px; margin-top: 9px; padding-left: 38px; font-size: 11.5px; color: #5F6C87; }
.hr-page .mi-py-sub span { display: inline-flex; align-items: center; gap: 5px; }
.hr-page .mi-py-sub svg { width: 13px; height: 13px; }
.hr-page .mi-py-step.is-green .mi-py-sub svg { color: #0A8F6A; } .hr-page .mi-py-step.is-purple .mi-py-sub svg { color: #7358F8; } .hr-page .mi-py-step.is-blue .mi-py-sub svg { color: #2F80ED; }
.hr-page .mi-py-arrow { align-self: center; width: 16px; height: 16px; margin: 5px 0; color: #8A8FA3; transition: color .3s, transform .4s; }
.hr-page .mi-py-save { padding: 12px 14px; border-radius: 12px; background: #E9F9D8; box-shadow: inset 0 0 0 1px #D2F0B8; text-align: center; transition: opacity .45s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.hr-page .mi-py-save b { display: inline-flex; align-items: center; gap: 7px; font: 500 13.5px/1.2 var(--font-body); color: #22361A; }
.hr-page .mi-py-save b svg { width: 16px; height: 16px; }
.hr-page .mi-py-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 9px; }
.hr-page .mi-py-stats span { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: #3E5A30; }
.hr-page .mi-py-stats span + span { border-left: 1px solid #C9E6B0; }
.hr-page .mi-py-stats em { font: 500 14px/1 var(--font-body); font-style: normal; color: #22361A; }
/* sequence states (js/minis.js) */
.hr-page .mi-py.is-seq .mi-py-step { opacity: .45; transform: scale(.98); }
.hr-page .mi-py.is-seq .mi-py-step.is-lit { opacity: 1; transform: none; box-shadow: 0 12px 26px -14px rgba(49, 30, 160, .45), 0 0 0 1.5px #B8ADFF; }
.hr-page .mi-py.is-seq .mi-py-step.is-past { opacity: 1; transform: none; }
.hr-page .mi-py.is-seq .mi-py-arrow.is-lit { color: #634AFC; transform: translateY(2px); }
.hr-page .mi-py.is-seq .mi-py-save { opacity: 0; transform: translateY(10px) scale(.96); }
.hr-page .mi-py.is-seq .mi-py-save.is-on { opacity: 1; transform: none; }

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

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

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

/* ===== 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. ===== */
.hr-page .mi { border-radius: 16px !important; }
.hr-page .pd-stack-visual .mi, .hr-page .pd-ta .mi, .hr-page .pd-duo-visual .mi, .hr-page .pd-tile-visual .mi { border-radius: 24px !important; }
.hr-page .mi-ab-head, .hr-page .mi-pf-head { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.hr-page .pd-duo-visual .mi-cu { border-radius: 24px 24px 0 0 !important; }

/* ===== PAGE ADDITIONS (not in the export) */

/* Without JS, or when essential-hr.js failed to run (the guard after it removes .js), every stepper step shows its paragraph and link. */
html:not(.js) .hr-page .pd-ta .pd-ta-more { grid-template-rows: 1fr; }
/* And every step's screen shows, one under another, not only the first (the screens share one grid cell, and only the open one
   is opaque; ported from the ATS pages, 2026-10-09). essential-hr.js hides the closed ones again when it starts. */
html:not(.js) .hr-page .pd-ta .ta-frame { grid-area: auto; opacity: 1; transform: none; }
html:not(.js) .hr-page .pd-ta .ta-shot { gap: 24px; }

/* Chapter 1 stacking cards: the cards stick and pile up, so when Tab reaches an earlier card's "Learn more" link the next card
   covers it (WCAG 2.4.11). While a card holds keyboard focus it scrolls with the page instead of sticking, so the browser brings
   the link into view uncovered. :focus-visible, so a mouse click on a link never moves its card out from under the pointer. */
.hr-page .pd-stack-card:has(:focus-visible) { position: relative; top: auto; }

/* Chapter 4 payroll tile on phones (ruling R11): the export's single 1fr column grows to the 380 px payroll mini, so below about
   465 px the tile's copy and mini run past the card and are cut off. A zero minimum keeps the column inside the card, and the
   export's fit-to-panel script (minis.js) then zooms the mini down to the column. */
@media (max-width: 600px) { .hr-page .pd-tile-pay { grid-template-columns: minmax(0, 1fr); } }
/* ...and with no JS, or when essential-hr.js failed (second review, finding 5), nothing zooms the fixed 380 px mini down, so it
   takes the tile's width instead (the export's own fluid width for this mini) and each step's detail line may wrap. */
html:not(.js) .hr-page .pd-tile-visual .mi-py { width: min(380px, 100%); }
html:not(.js) .hr-page .pd-tile-visual .mi-py-sub { flex-wrap: wrap; row-gap: 4px; }

/* Hero trial form (third review; WCAG 3.3.1): what an invalid field needs, in words, under the form, in the invalid ring's colour.
   Empty, the line takes no room. */
.hr-page .pd-trial-msg { font: 500 14px/1.4 var(--font-body); color: #FF8A8A; }
.hr-page .pd-trial-msg:not(:empty) { margin-top: 12px; }

/* Keyboard focus rings (second review; WCAG 2.4.7, 1.4.11). The export's base rule draws a brand-purple ring, and its lighter
   variant for dark surfaces targets .hero, a class this page's hero (.pd-hero) doesn't carry. */
/* hero: the trial form sits on the dark artwork, where brand purple is too dark to see */
.hr-page .pd-hero :focus-visible { outline-color: var(--brand-soft); }
/* the play button is a dark pill on the light product screenshot: its ring goes inside the pill, so it is always on dark */
.hr-page .pd-hero .pd-play:focus-visible { outline-color: #fff; outline-offset: -4px; }
/* purple stacking card: brand purple is the card's own colour */
.hr-page .pd-stack-card.is-purple :focus-visible { outline-color: #fff; }
/* stepper: each step's text sits in an overflow-hidden box (a step opens by animating its height), which cut off the ring of a
   "Learn more" link that touches the box's sides or bottom. Room either side always; room below only on an open step (and with
   no JS, when every step is open), so a closed step, 0 px tall, still shows nothing. The negative margins keep the layout as it was. */
.hr-page .pd-ta-more-in { padding-inline: 6px; margin-inline: -6px; }
.hr-page .pd-ta .ta-list li.is-active .pd-ta-more-in, html:not(.js) .hr-page .pd-ta .pd-ta-more-in { padding-bottom: 6px; margin-bottom: -6px; }