/* OpsIQ — PeopleOS HR marketing page (WS3, 2026-09-14).
 * Product-led scenes to the Team Performance standard: real admin windows
 * (rail, page hero, numbered tab strip, kicker cards, uppercase-header tables,
 * pills, gradient buttons) that play, tilt and respond to hover. The shared
 * op-* shell classes are used as they are; everything here is hr-* only. */
.op-hr-page{--hr-ink:#0b1226;--hr-copy:#55647f;--hr-muted:#8290a9;--hr-line:#dce4f2;--hr-card:#fff;--hr-soft:#f5f7fc;--hr-violet:#6257ed;--hr-blue:#5275ee;--hr-cyan:#30b4ce;--hr-green:#13a976;--hr-amber:#e49a18;--hr-red:#ef4444;--hr-shadow:0 30px 80px rgba(34,59,112,.14);color:var(--hr-ink);overflow:clip}
.op-hr-page *,.op-hr-page *::before,.op-hr-page *::after{box-sizing:border-box}
.op-hr-page button,.op-hr-page a{font:inherit}.op-hr-page button{color:inherit}
.op-hr-page .op-mega-h2 em,.hr-section-intro h2 em,.hr-context-copy h2 em{font-style:normal;background:linear-gradient(100deg,#2181ef,#08b7d0 46%,#8855f6 78%,#e35bd0);-webkit-background-clip:text;background-clip:text;color:transparent}
/* WS3 2026-09-14 (owner): the kicker used to be forced to #b45309 amber here,
   and the heading accent above to an amber-led gradient, so /hr was the only
   page whose titles were not blue. Both now follow the house: the kicker keeps
   var(--op-blue) from opsiq-saas-site.css, and the accent uses the same stops
   as .op-team-page in opsiq-team-performance.css. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .op-hr-page{--hr-ink:#edf4ff;--hr-copy:#a9b7d0;--hr-muted:#8fa0bd;--hr-line:rgba(142,166,215,.18);--hr-card:rgba(10,24,48,.9);--hr-soft:rgba(18,35,66,.86);--hr-shadow:0 30px 80px rgba(0,0,0,.25)}

/* ── Keyframes ─────────────────────────────────────────────────────── */
@keyframes hrGlow{to{transform:translate3d(2%,-2%,0) scale(1.08)}}
@keyframes hrPulse{0%{box-shadow:0 0 0 0 rgba(25,201,138,.28)}100%{box-shadow:0 0 0 12px rgba(25,201,138,0)}}
@keyframes hrFloat{50%{transform:translateY(-9px) rotate(.7deg)}}
@keyframes hrBar{from{width:0}}
@keyframes hrRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hrProgress{to{width:100%}}
@keyframes hrScene{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes hrSpin{to{transform:rotate(1turn)}}
@keyframes hrBlink{50%{opacity:.25}}
@keyframes hrShimmer{to{background-position:200% 0}}
@keyframes hrBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hrCaret{50%{border-color:transparent}}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hr-hero .op-mkt-hero-title{max-width:760px;text-wrap:balance}
.hr-hero{padding-bottom:34px}.hr-hero .op-mkt-hero-grid{align-items:center}
.hr-hero-art{min-height:640px;display:grid;place-items:center;isolation:isolate}
.hr-hero-art:before{content:"";position:absolute;inset:8% 4% 4%;border-radius:42% 58% 56% 44%;background:radial-gradient(circle at 48% 42%,rgba(228,154,24,.28),transparent 38%),radial-gradient(circle at 68% 70%,rgba(98,87,237,.32),transparent 46%);filter:blur(18px);z-index:-1;animation:hrGlow 8s ease-in-out infinite alternate}
.hr-float-card{position:absolute;z-index:3;min-width:150px;padding:13px 14px;border:1px solid rgba(255,255,255,.75);border-radius:16px;background:rgba(255,255,255,.84);box-shadow:0 18px 45px rgba(36,56,112,.18);backdrop-filter:blur(18px);display:grid;grid-template-columns:9px 1fr;gap:3px 9px;color:#122039;animation:hrFloat 5s ease-in-out infinite}
.hr-float-card i{width:8px;height:8px;border-radius:50%;background:#13bd88;box-shadow:0 0 0 5px rgba(19,189,136,.12);align-self:center}
.hr-float-card span{font-size:9px;color:#71809a}.hr-float-card b{grid-column:2;font-size:15px}
.hr-float-a{left:-8px;top:70px}.hr-float-b{right:-6px;bottom:70px;animation-delay:-2.4s}.hr-float-b i{background:#e49a18;box-shadow:0 0 0 5px rgba(228,154,24,.14)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-float-card{background:rgba(13,29,55,.88);border-color:rgba(143,170,218,.18);color:#edf5ff}

/* ── The product window: a slice of the real admin ─────────────────── */
.hr-app{--app-bg:#f7f8fc;--app-card:#fff;--app-line:#e3e6ef;--app-ink:#111827;--app-2:#4b5263;--app-3:#6b7280;position:relative;width:100%;border:1px solid rgba(130,160,219,.35);border-radius:22px;background:var(--app-bg);box-shadow:0 38px 90px rgba(30,56,119,.22),inset 0 1px 0 #fff;overflow:hidden;color:var(--app-ink);font-size:11px;line-height:1.35;transition:transform .45s ease,box-shadow .45s ease}
.hr-app.is-3d{transform:perspective(1500px) rotateY(-6deg) rotateX(2deg)}
.hr-app.is-3d:hover{transform:perspective(1500px) rotateY(-1deg) rotateX(0) translateY(-6px);box-shadow:0 48px 110px rgba(30,56,119,.28),inset 0 1px 0 #fff}
.hr-app-top{height:40px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--app-line);background:#fff}
.hr-app-brand{display:flex;align-items:center;gap:7px;font-weight:900;font-size:11px;letter-spacing:-.01em}.hr-app-brand i{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,#6257ed,#30b4ce)}
.hr-app-ws{padding:4px 9px;border-radius:8px;background:#f1f3f9;color:var(--app-3);font-weight:700;font-size:9.5px}
.hr-app-ask{margin-left:auto;padding:5px 10px;border-radius:8px;border:1px solid var(--app-line);font-size:9.5px;font-weight:800;color:#6257ed;background:linear-gradient(135deg,rgba(98,87,237,.08),rgba(48,180,206,.08))}
.hr-app-me{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:900;color:#fff;background:linear-gradient(135deg,#e49a18,#e35bd0)}
.hr-app-body{display:grid;grid-template-columns:150px 1fr;min-height:430px}
.hr-app-rail{padding:12px 8px;border-right:1px solid var(--app-line);background:linear-gradient(180deg,#fff,#f7f8fc)}
.hr-app-rail>b{display:block;padding:6px 10px 8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--app-3)}
.hr-app-rail>span{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;font-size:10px;font-weight:700;color:var(--app-2);transition:.2s}
.hr-app-rail>span:before{content:"";width:5px;height:5px;border-radius:50%;background:#cbd3e3}
.hr-app-rail>span.active{color:#fff;background:linear-gradient(135deg,#6257ed,#5275ee 58%,#30b4ce);box-shadow:0 7px 15px -10px rgba(73,70,189,.55)}.hr-app-rail>span.active:before{background:#fff}
.hr-app-rail>span.ai:after{content:"AI";margin-left:auto;font-size:7.5px;font-weight:900;letter-spacing:.06em;padding:1px 5px;border-radius:5px;color:#6257ed;background:rgba(98,87,237,.12)}.hr-app-rail>span.active.ai:after{color:#fff;background:rgba(255,255,255,.22)}
.hr-app-main{padding:14px 16px 16px;min-width:0}
.hr-app-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--app-line);border-radius:12px;background:radial-gradient(circle at 82% 4%,rgba(99,87,239,.16),transparent 30%),linear-gradient(180deg,#fff,#fbfcff);margin-bottom:10px}
.hr-app-hero h4{margin:0;font-size:15px;letter-spacing:-.02em;background:linear-gradient(120deg,#111827,#3b3a8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hr-app-hero p{margin:3px 0 0;font-size:9.5px;line-height:1.4;color:var(--app-3);max-width:420px}
.hr-app-badge{flex:none;padding:5px 9px;border-radius:999px;border:1px solid rgba(98,87,237,.25);background:rgba(98,87,237,.08);font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6257ed}
.hr-app-tabs{position:relative;display:flex;gap:5px;padding:4px;margin-bottom:10px;border:1px solid var(--app-line);border-radius:11px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.hr-app-tab{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:28px;padding:4px 7px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--app-3);cursor:pointer;font-weight:800;font-size:9.3px;line-height:1.15;text-align:left;white-space:normal;transition:.25s}
.hr-app-tab i{flex:none}
.hr-app-tab i{display:grid;place-items:center;min-width:16px;height:16px;border-radius:5px;border:1px solid currentColor;font-style:normal;font-size:8px;opacity:.8}
.hr-app-tab:hover{color:var(--app-ink);background:rgba(79,142,247,.06);border-color:rgba(79,142,247,.2)}
.hr-app-tab.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6257ed,#5275ee 58%,#30b4ce);box-shadow:0 7px 15px -10px rgba(73,70,189,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.hr-app-tab.active i{border-color:rgba(255,255,255,.55);opacity:.95}
.hr-app-cursor{position:absolute;left:var(--hr-cursor-x,40px);top:100%;width:12px;height:12px;margin:-4px 0 0 -6px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#111827;box-shadow:0 4px 10px rgba(0,0,0,.25);transition:left .55s cubic-bezier(.22,1,.36,1);pointer-events:none;opacity:.85}
.hr-app-panel{animation:hrScene .45s cubic-bezier(.22,1,.36,1)}.hr-app-panel[hidden]{display:none!important}
.hr-card{position:relative;border:1px solid var(--app-line);border-radius:12px;padding:12px 14px;background:linear-gradient(180deg,#fff,#fcfcff);box-shadow:0 8px 24px -16px rgba(17,24,39,.22);margin-bottom:10px;transition:transform .3s,box-shadow .3s}
.hr-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(17,24,39,.32)}
.hr-card.accent{border-color:rgba(98,87,237,.3);background:linear-gradient(180deg,#fff,#f6f5ff)}
.hr-card.danger{border-color:rgba(239,68,68,.35);background:linear-gradient(180deg,#fff,#fff6f6)}
.hr-kicker{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--app-3);display:block;margin-bottom:5px}
.hr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hr-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hr-table{width:100%;border-collapse:separate;border-spacing:0;font-size:9.8px;background:linear-gradient(180deg,#fff,#fcfcff);border:1px solid var(--app-line);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px -16px rgba(17,24,39,.22);margin-bottom:10px}
.hr-table th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--app-line);background:rgba(91,82,245,.04);font-size:7.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--app-3)}
.hr-table td{padding:8px 10px;border-bottom:1px solid #eef0f6;color:var(--app-2);vertical-align:middle;transition:background .2s}
.hr-table tbody tr:last-child td{border-bottom:none}.hr-table tbody tr:hover td{background:rgba(98,87,237,.045)}
.hr-table tr.hl td{background:rgba(98,87,237,.06)}
.hr-table td b{color:var(--app-ink)}
.hr-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;background:#eef0f6;color:var(--app-2)}
.hr-pill.ok{background:rgba(19,169,118,.12);color:#0b8a5f}.hr-pill.bad{background:rgba(239,68,68,.12);color:#b91c1c}.hr-pill.warn{background:rgba(228,154,24,.14);color:#a15c00}.hr-pill.info{background:rgba(98,87,237,.12);color:#4f46c8}.hr-pill.ai{background:linear-gradient(135deg,rgba(98,87,237,.16),rgba(48,180,206,.16));color:#4f46c8}
.hr-pill.live:before{content:"";width:6px;height:6px;border-radius:50%;background:#13a976;animation:hrPulse 1.8s ease-out infinite}
.hr-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:800;font-size:9.5px;color:#fff;background:linear-gradient(135deg,#5b52f5,#7a74f8);box-shadow:0 7px 16px -5px rgba(91,82,245,.55);transition:.2s}
.hr-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hr-btn.secondary{background:#fff;color:var(--app-ink);border-color:var(--app-line);box-shadow:0 3px 9px -4px rgba(17,24,39,.25)}
.hr-btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 7px 16px -5px rgba(220,38,38,.5)}
.hr-btn.armed{animation:hrBlink 1.2s steps(2,end) infinite}
.hr-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.hr-actions .hr-btn,.hr-lane-foot .hr-btn{white-space:normal;text-align:left;max-width:100%}
.hr-bar{display:block;height:6px;border-radius:999px;background:#eef0f6;overflow:hidden}.hr-bar i{display:block;height:100%;width:var(--w,50%);border-radius:inherit;background:linear-gradient(90deg,#6257ed,#30b4ce);animation:hrBar 1.4s cubic-bezier(.22,1,.36,1) both}
.hr-bar.ok i{background:linear-gradient(90deg,#13a976,#30b4ce)}.hr-bar.warn i{background:linear-gradient(90deg,#e49a18,#f59e0b)}
.hr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px 12px}
.hr-fact k,.hr-fact-k{display:block;margin-bottom:2px;font-size:7.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--app-3)}
.hr-fact-v{display:block;font-size:10.5px;font-weight:800;color:var(--app-ink)}
.hr-lane{overflow:hidden;border:1px solid var(--app-line);border-radius:12px;background:linear-gradient(180deg,#fff,#fcfcff);box-shadow:0 8px 24px -16px rgba(17,24,39,.22);margin-bottom:8px;transition:transform .3s,box-shadow .3s}
.hr-lane:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(17,24,39,.32)}
.hr-lane-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #f1f3f9;background:rgba(91,82,245,.03)}
.hr-lane-name{font-size:11px;font-weight:800;letter-spacing:-.01em;color:var(--app-ink)}
.hr-lane-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;font-weight:700;color:var(--app-3)}
.hr-lane-badges{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hr-lane-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 14px;padding:10px 12px}
.hr-lane-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-top:1px solid #f1f3f9;background:#fbfcff}
.hr-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #eef0f6;border-radius:9px;background:#fff;margin-bottom:6px;transition:.2s;animation:hrRowIn .5s both;animation-delay:calc(var(--i,0)*.12s)}
.hr-row:hover{border-color:rgba(98,87,237,.3);transform:translateX(3px)}
.hr-row>b{font-size:10px;color:var(--app-ink)}.hr-row>small{color:var(--app-3);font-size:9px}.hr-row>.hr-pill{margin-left:auto}
.hr-ticker{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.hr-ticker li{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;border:1px solid #eef0f6;background:#fff;font-size:9.5px;color:var(--app-2);opacity:.28;transform:translateX(-6px);transition:opacity .45s,transform .45s}
.hr-ticker li.is-on{opacity:1;transform:none;border-color:rgba(98,87,237,.28);background:linear-gradient(90deg,rgba(98,87,237,.05),#fff)}
.hr-ticker li i{flex:none;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6257ed,#30b4ce)}
.hr-ticker li b{color:var(--app-ink)}.hr-ticker li em{margin-left:auto;font-style:normal;font-size:8px;font-weight:900;color:#0b8a5f}
.hr-type{display:inline-block;min-height:1.2em;border-right:2px solid #6257ed;padding-right:2px;animation:hrCaret 1s steps(1) infinite}
.hr-avatar{display:grid;place-items:center;width:28px;aspect-ratio:1;border-radius:9px;color:#fff;font-size:9px;font-style:normal;font-weight:900;flex:none}
.hr-avatar.amber{background:linear-gradient(135deg,#e49a18,#e35bd0)}.hr-avatar.cyan{background:linear-gradient(135deg,#2382ef,#08bfd1)}.hr-avatar.violet{background:linear-gradient(135deg,#6257ed,#9b5ff1)}.hr-avatar.slate{background:linear-gradient(135deg,#64748b,#94a3b8)}.hr-avatar.green{background:linear-gradient(135deg,#079e73,#2fc98c)}
.hr-transcript{display:grid;gap:6px}
.hr-msg{max-width:88%;padding:8px 10px;border-radius:11px;font-size:9.8px;line-height:1.45;animation:hrRowIn .5s both;animation-delay:calc(var(--i,0)*.35s)}
.hr-msg.ai{border:1px solid rgba(98,87,237,.25);background:linear-gradient(145deg,rgba(98,87,237,.08),#fff)}.hr-msg.ai:before{content:"AI · sandboxed";display:block;font-size:7.5px;font-weight:900;letter-spacing:.08em;color:#6257ed;margin-bottom:3px}
.hr-msg.cand{margin-left:auto;background:#111827;color:#fff;border-bottom-right-radius:4px}
.hr-msg.human{border:1px solid rgba(228,154,24,.4);background:#fff8ec}.hr-msg.human:before{content:"Interviewer · human";display:block;font-size:7.5px;font-weight:900;letter-spacing:.08em;color:#a15c00;margin-bottom:3px}
.hr-msg small{display:block;margin-top:4px;font-size:8px;color:#6b7280}
.hr-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hr-board>div{padding:8px;border:1px solid var(--app-line);border-radius:10px;background:#fbfcff;min-height:120px}
.hr-board>div>span{display:block;font-size:7.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--app-3);margin-bottom:6px}
.hr-board>div>i{display:block;font-style:normal;padding:6px 8px;margin-bottom:5px;border-radius:8px;border:1px solid #e6e9f2;background:#fff;font-size:9.5px;font-weight:800;color:var(--app-ink);animation:hrRowIn .5s both;transition:.2s}
.hr-board>div>i:hover{border-color:rgba(98,87,237,.35);transform:translateY(-1px)}
.hr-board>div>i small{display:block;font-weight:600;color:var(--app-3);font-size:8px;margin-top:2px}
.hr-board>div>i.ai{border-color:rgba(98,87,237,.35);background:linear-gradient(145deg,rgba(98,87,237,.07),#fff)}.hr-board>div>i.ok{border-color:rgba(19,169,118,.4)}
.hr-phone{width:220px;margin:0 auto;padding:12px;border-radius:30px;background:#0f1838;box-shadow:0 30px 70px rgba(15,24,56,.4),inset 0 0 0 1px rgba(255,255,255,.12);color:#eaf0ff;transition:transform .45s;transform:perspective(1200px) rotateY(8deg)}
.hr-phone:hover{transform:perspective(1200px) rotateY(0) translateY(-6px)}
.hr-phone-notch{width:60px;height:6px;margin:2px auto 12px;border-radius:3px;background:#1c2545}
.hr-phone-head b{display:block;font-size:14px}.hr-phone-head small{color:#8aa0d8;font-size:9px}
.hr-phone-card{margin-top:8px;padding:9px 10px;border-radius:12px;background:#1c2545;animation:hrRowIn .5s both;animation-delay:calc(var(--i,0)*.15s)}
.hr-phone-card.urgent{background:rgba(228,154,24,.16);border:1px solid rgba(251,191,36,.4)}
.hr-phone-card b{display:block;font-size:9.5px}.hr-phone-card span{display:block;margin-top:2px;font-size:8.5px;color:#a9b6d1}.hr-phone-card span.ok{color:#6ee7b7}
.hr-phone-card i{display:block;height:5px;margin:6px 0 2px;border-radius:999px;background:rgba(255,255,255,.1)}.hr-phone-card i em{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#6257ed,#30b4ce);animation:hrBar 1.4s both}
.hr-phone-nav{display:flex;justify-content:space-between;margin-top:12px;padding:8px 6px 2px;border-top:1px solid rgba(255,255,255,.08);font-size:8px;color:#8aa0d8}.hr-phone-nav span.active{color:#c4b5fd;font-weight:900}

/* ── Proof strip ────────────────────────────────────────────────────── */
.hr-proof{position:relative;margin-top:-2px}
.hr-proof-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding:0;border:1px solid var(--hr-line);border-radius:25px;background:var(--hr-line);box-shadow:var(--hr-shadow);overflow:hidden}
.hr-proof article{min-height:118px;padding:24px 26px;background:var(--hr-card);display:grid;grid-template-columns:34px 1fr;align-content:center;gap:5px 13px;transition:background .3s}
.hr-proof article:hover{background:linear-gradient(145deg,rgba(228,154,24,.06),rgba(98,87,237,.06))}
.hr-proof article span{grid-row:1/3;align-self:center;font-size:12px;font-weight:900;color:#b45309}.hr-proof article b{font-size:17px}.hr-proof article small{color:var(--hr-muted)}

/* ── Section chrome ─────────────────────────────────────────────────── */
.hr-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid rgba(98,87,237,.22);background:rgba(98,87,237,.07);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#4f46c8}
.hr-eyebrow>i{width:7px;height:7px;border-radius:50%;background:#13a976;box-shadow:0 0 0 4px rgba(19,169,118,.14)}
.hr-section-intro{max-width:900px;margin:0 auto 48px;text-align:center}
.hr-section-intro.left{text-align:left;margin-left:0}.hr-section-intro.left>p{margin-left:0}
.hr-department-heading{display:grid;grid-template-columns:1fr .6fr;gap:40px;align-items:end;margin-bottom:34px}
.hr-department-heading>p{color:var(--hr-copy);line-height:1.8;margin:0}
.hr-context-copy{max-width:820px}.hr-context-copy h2{margin:14px 0 14px;font-size:clamp(28px,3.6vw,44px);line-height:1.04;letter-spacing:-.04em}.hr-context-copy p{margin:0;color:var(--hr-copy);line-height:1.8}
.hr-context-copy>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.hr-context-copy>div span{padding:7px 12px;border-radius:999px;font-size:11.5px;font-weight:800;color:var(--hr-copy);background:var(--hr-soft);border:1px solid var(--hr-line)}
.hr-demo-note{margin:16px auto 0;max-width:760px;text-align:center;color:var(--hr-muted);font-size:12.5px}

/* ── The operating console ─────────────────────────────────────────── */
.hr-console{max-width:1500px;margin:0 auto;border:1px solid rgba(91,120,181,.3);border-radius:29px;background:linear-gradient(145deg,#07172f,#101939 55%,#171741);box-shadow:0 45px 100px rgba(17,31,72,.3);overflow:hidden;color:#eaf2ff}
.hr-console-bar{min-height:70px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(137,165,222,.17);flex-wrap:wrap}
.hr-console-bar>div{display:flex;align-items:center;gap:12px}.hr-console-bar>div>strong{font-size:15px}
.hr-console-bar>div>em{display:flex;align-items:center;gap:7px;font-size:10.5px;font-style:normal;font-weight:800;color:#7ee0c0;text-transform:uppercase;letter-spacing:.06em}
.hr-console-bar>div>em::before{content:"";width:7px;height:7px;border-radius:50%;background:#18b982;box-shadow:0 0 0 4px rgba(24,185,130,.12);animation:hrPulse 1.8s ease-out infinite}
.hr-window-mark{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:900}.hr-window-mark i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#e49a18,#6257ed)}
.hr-console-bar nav{display:flex;gap:6px;flex-wrap:wrap}
.hr-console-bar button{padding:9px 14px;border-radius:10px;border:1px solid rgba(137,165,222,.18);background:rgba(255,255,255,.04);color:#a7b7d1;font-size:12px;font-weight:800;cursor:pointer;transition:.25s}
.hr-console-bar button:hover,.hr-console-bar button:focus-visible{color:#fff;background:rgba(255,255,255,.1);outline:none}
.hr-console-bar button.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6257ed,#5275ee 58%,#30b4ce);box-shadow:0 10px 24px -12px rgba(73,70,189,.8)}
.hr-console-progress{height:3px;background:rgba(255,255,255,.06)}.hr-console-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#e49a18,#6257ed,#30b4ce)}
.hr-console.is-playing .hr-console-progress i{animation:hrProgress 4.7s linear forwards}
.hr-scene{padding:22px;animation:hrScene .45s cubic-bezier(.22,1,.36,1)}.hr-scene[hidden]{display:none!important}
.hr-scene-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:18px;align-items:start}
.hr-scene-side{display:grid;gap:12px}
.hr-scene-side article{padding:16px 18px;border-radius:16px;border:1px solid rgba(137,165,222,.16);background:linear-gradient(145deg,rgba(28,48,84,.82),rgba(24,31,66,.7));transition:transform .3s,border-color .3s}
.hr-scene-side article:hover{transform:translateY(-3px);border-color:rgba(137,165,222,.4)}
.hr-scene-side article>span{display:block;font-size:8.5px;letter-spacing:.12em;font-weight:900;color:#74d9e7;text-transform:uppercase}
.hr-scene-side article>b{display:block;margin:6px 0 4px;font-size:15px;line-height:1.2}.hr-scene-side article>small{display:block;color:#9cafcb;font-size:11px;line-height:1.5}
.hr-scene-side article>p{margin:6px 0 0;color:#c7d3ea;font-size:12px;line-height:1.55}
.hr-scene-side article.ai{border-color:rgba(228,154,24,.4);background:linear-gradient(145deg,rgba(228,154,24,.16),rgba(24,31,66,.7))}
.hr-scene-side article.kill{border-color:rgba(239,68,68,.4)}
.hr-scene-side article button{margin-top:10px;padding:8px 12px;border-radius:9px;border:0;background:linear-gradient(135deg,#6257ed,#30b4ce);color:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:.2s}.hr-scene-side article button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hr-scene-side article ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.hr-scene-side article li{font-size:11.5px;color:#c7d3ea;line-height:1.45;padding-left:14px;position:relative}.hr-scene-side article li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#30b4ce}

/* ── AI lanes deck ──────────────────────────────────────────────────── */
.hr-lanes-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hr-lane-card{padding:0;border-radius:22px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:var(--hr-shadow);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s}
.hr-lane-card:hover{transform:translateY(-6px);border-color:rgba(98,87,237,.35);box-shadow:0 34px 80px rgba(34,59,112,.2)}
.hr-lane-card header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--hr-line);background:rgba(98,87,237,.04)}
.hr-lane-card header b{font-size:15px;letter-spacing:-.01em}.hr-lane-card header code{margin-left:auto;font-size:10px;color:var(--hr-muted)}
.hr-lane-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0;padding:14px 18px}
.hr-lane-card dt{font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-muted)}.hr-lane-card dd{margin:2px 0 0;font-size:13px;font-weight:800}
.hr-lane-card footer{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px 16px;border-top:1px solid var(--hr-line);background:var(--hr-soft)}
.hr-four-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.hr-four-facts article{padding:18px;border-radius:18px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:0 12px 30px rgba(29,53,101,.07);transition:transform .3s}
.hr-four-facts article:hover{transform:translateY(-4px)}
.hr-four-facts article span{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#4f46c8}.hr-four-facts article b{display:block;margin:6px 0 4px;font-size:16px}.hr-four-facts article small{color:var(--hr-copy);line-height:1.5}

/* ── Record story + generic device windows ─────────────────────────── */
.hr-story-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:58px;align-items:center}
.hr-story-copy ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:13px}.hr-story-copy li{display:grid;grid-template-columns:170px 1fr;gap:15px;padding:16px 0;border-top:1px solid var(--hr-line)}.hr-story-copy li b{font-size:14px}.hr-story-copy li span{color:var(--hr-copy);line-height:1.6}
.hr-story-copy h2{margin:14px 0 14px}.hr-story-copy>p{color:var(--hr-copy);line-height:1.8;margin:0}
.hr-trend-device{position:relative;perspective:1600px}.hr-device-shadow{position:absolute;inset:auto 8% -30px;height:70px;border-radius:50%;background:radial-gradient(closest-side,rgba(34,59,112,.28),transparent);filter:blur(10px)}
.hr-trend-device .hr-app{transform:perspective(1500px) rotateY(-8deg) rotateX(3deg)}.hr-trend-device:hover .hr-app{transform:perspective(1500px) rotateY(-2deg) rotateX(0) translateY(-6px)}
.hr-device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hr-device{border:1px solid var(--hr-line);border-radius:22px;background:var(--hr-card);box-shadow:var(--hr-shadow);overflow:hidden;transition:transform .35s,box-shadow .35s}
.hr-device:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(34,59,112,.2)}
.hr-device>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hr-line)}.hr-device>header em{font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#0b8a5f}
.hr-device>.hr-app{border-radius:0;border:0;box-shadow:none}
.hr-device>footer{display:flex;align-items:center;gap:8px;padding:11px 18px;border-top:1px solid var(--hr-line);font-size:12px;color:var(--hr-copy);background:var(--hr-soft)}.hr-device>footer i{width:7px;height:7px;border-radius:50%;background:#13a976;flex:none}

/* ── Employee service stage ─────────────────────────────────────────── */
.hr-service-stage{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start}
.hr-side-stack{display:grid;gap:14px}
.hr-askhr{border:1px solid rgba(98,87,237,.22);border-radius:22px;background:linear-gradient(165deg,#fff,#f6f5ff);box-shadow:var(--hr-shadow);padding:18px}
.hr-askhr header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.hr-askhr header span{display:inline-flex;align-items:center;gap:8px;font-weight:900}.hr-askhr header span i{width:9px;height:9px;border-radius:50%;background:#6257ed;box-shadow:0 0 0 5px rgba(98,87,237,.14)}.hr-askhr header em{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0b8a5f}
.hr-askhr .hr-msg{font-size:12.5px;max-width:92%}
.hr-askhr footer{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hr-line);font-size:11px;color:var(--hr-copy)}.hr-askhr footer b{color:#a15c00}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-askhr{background:linear-gradient(165deg,rgba(10,24,48,.92),rgba(30,26,70,.9))}
.hr-packs{border:1px solid var(--hr-line);border-radius:22px;background:var(--hr-card);box-shadow:var(--hr-shadow);padding:18px}
.hr-packs>span{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#4f46c8;margin-bottom:8px}
.hr-packs>div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--hr-line)}.hr-packs>div b{font-size:13px}.hr-packs>div em{font-style:normal;font-size:11px;color:var(--hr-copy)}

/* ── Heatmap + coverage side ────────────────────────────────────────── */
.hr-coverage-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:start}
.hr-heatmap-panel,.hr-coverage-side article{border:1px solid var(--hr-line);border-radius:20px;background:var(--hr-card);box-shadow:var(--hr-shadow)}
.hr-heatmap-panel{padding:20px}
.hr-heatmap-panel>header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.hr-heatmap-panel>header b{display:block;font-size:14px}.hr-heatmap-panel>header span{color:var(--hr-muted);font-size:11px}.hr-heatmap-panel>header em{font-style:normal;font-size:11px;color:var(--hr-copy)}.hr-heatmap-panel>header em strong{font-size:18px;color:var(--hr-ink)}
.hr-heatmap-labels,.hr-heatmap-row{display:grid;grid-template-columns:86px repeat(12,1fr);gap:4px;align-items:center;margin-bottom:4px}
.hr-heatmap-labels{grid-template-columns:86px repeat(6,2fr)}.hr-heatmap-labels span{font-size:9px;font-weight:800;color:var(--hr-muted);text-transform:uppercase}
.hr-heatmap-row b{font-size:11px;color:var(--hr-copy)}
.hr-heatmap-row i,.hr-heatmap-panel footer i{--heat:1;height:22px;border-radius:6px;background:rgba(98,87,237,calc(var(--heat)*.17 + .05));transition:transform .2s,box-shadow .2s}
.hr-heatmap-row i[style*="--heat:0"],.hr-heatmap-panel footer i[style*="--heat:0"]{background:repeating-linear-gradient(45deg,rgba(228,154,24,.16) 0 4px,transparent 4px 8px);border:1px dashed rgba(228,154,24,.5)}
.hr-heatmap-row i:hover{transform:scale(1.18);box-shadow:0 6px 16px rgba(98,87,237,.28)}
.hr-heatmap-panel footer{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:10px;color:var(--hr-muted)}.hr-heatmap-panel footer i{width:22px}.hr-heatmap-panel footer em{margin-left:auto;font-style:normal;display:flex;align-items:center;gap:6px}
.hr-coverage-side{display:grid;gap:12px}.hr-coverage-side article{padding:18px;transition:transform .3s}.hr-coverage-side article:hover{transform:translateY(-3px)}
.hr-coverage-side article span{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#4f46c8}.hr-coverage-side article b{display:block;margin:6px 0 4px;font-size:18px}.hr-coverage-side article small{color:var(--hr-copy);line-height:1.5}
.hr-coverage-side article.ai{border-color:rgba(228,154,24,.4);background:linear-gradient(145deg,#fff,#fff8ec)}.hr-coverage-side article button{margin-top:10px;padding:8px 12px;border-radius:9px;border:0;background:linear-gradient(135deg,#e49a18,#e35bd0);color:#fff;font-size:11px;font-weight:800;cursor:pointer}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-coverage-side article.ai{background:linear-gradient(145deg,rgba(10,24,48,.9),rgba(80,50,10,.6))}

/* ── Autonomy deck reuses op-autonomy-shell ─────────────────────────── */
.hr-autonomy-deck{position:relative;overflow:hidden}
.hr-autonomy-deck:before{content:"";position:absolute;inset:26px 14px;border-radius:44px;background:radial-gradient(760px 420px at 18% 12%,rgba(228,154,24,.14),transparent 62%),radial-gradient(700px 440px at 84% 70%,rgba(98,87,237,.12),transparent 64%);pointer-events:none}
.hr-autonomy-deck .op-autonomy-path article.active{border-color:rgba(228,154,24,.5)}
.hr-autonomy-deck .op-autonomy-path article{transition:transform .3s}.hr-autonomy-deck .op-autonomy-path article:hover{transform:translateY(-4px)}

/* ── Fairness grid, vault, context flow ────────────────────────────── */
.hr-fairness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.hr-fairness-grid article{position:relative;padding:22px 20px;border-radius:20px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:0 12px 30px rgba(29,53,101,.07);transition:transform .3s,box-shadow .3s;overflow:hidden}
.hr-fairness-grid article:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#e49a18,#6257ed,#30b4ce);opacity:0;transition:opacity .3s}
.hr-fairness-grid article:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(29,53,101,.14)}.hr-fairness-grid article:hover:before{opacity:1}
.hr-fairness-grid h3{margin:0 0 8px;font-size:16px;letter-spacing:-.02em}.hr-fairness-grid p{margin:0;font-size:13px;line-height:1.6;color:var(--hr-copy)}
.hr-fairness-foot{margin-top:18px;text-align:center}.hr-fairness-foot p{margin:0;color:var(--hr-muted);font-size:13px}
.hr-relations-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(18px,2.6vw,36px);border-radius:42px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:var(--hr-shadow)}
.hr-vault{position:relative;min-height:360px;display:grid;place-items:center}
.hr-vault-ring{position:absolute;border-radius:50%;border:1px dashed rgba(98,87,237,.4);animation:hrSpin 30s linear infinite}.hr-vault-ring.r1{width:320px;height:320px}.hr-vault-ring.r2{width:220px;height:220px;animation-direction:reverse;animation-duration:22s}
.hr-vault-core{position:relative;z-index:1;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;align-content:center;background:radial-gradient(circle at 35% 30%,#312e81,#0b1020);color:#fff;box-shadow:0 30px 70px rgba(49,46,129,.45);transition:transform .35s}.hr-vault:hover .hr-vault-core{transform:scale(1.05)}
.hr-vault-core span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.hr-vault-core b{font-size:22px;letter-spacing:-.03em}.hr-vault-core small{font-size:9.5px;opacity:.7;max-width:110px;line-height:1.3}
.hr-vault-chip{position:absolute;padding:8px 12px;border-radius:999px;font-size:11.5px;font-weight:800;background:var(--hr-card);border:1px solid var(--hr-line);box-shadow:0 12px 30px rgba(29,53,101,.12);animation:hrBob 5s ease-in-out infinite;transition:transform .2s}
.hr-vault-chip.c1{top:8%;left:6%}.hr-vault-chip.c2{top:14%;right:4%;animation-delay:-1.2s}.hr-vault-chip.c3{bottom:12%;left:8%;animation-delay:-2.4s}.hr-vault-chip.c4{bottom:8%;right:6%;animation-delay:-3.6s}
.hr-context-stage{padding:clamp(20px,3vw,40px);border-radius:34px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:var(--hr-shadow)}
.hr-context-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center;margin:30px 0 20px}
.hr-source-stack,.hr-action-stack{display:grid;gap:8px}.hr-source-stack span,.hr-action-stack span{padding:10px 12px;border-radius:12px;border:1px solid var(--hr-line);background:var(--hr-soft);font-size:12.5px;font-weight:800;text-align:center;transition:.25s}
.hr-source-stack span:hover,.hr-action-stack span:hover{border-color:rgba(98,87,237,.4);transform:translateX(3px)}
.hr-source-stack{grid-template-columns:1fr 1fr}
.hr-flow-line{position:relative;width:60px;height:2px;background:linear-gradient(90deg,#6257ed,#30b4ce)}.hr-flow-line b{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#30b4ce;animation:hrFlow 2.2s linear infinite}@keyframes hrFlow{to{left:calc(100% - 10px)}}
.hr-context-core{width:190px;aspect-ratio:1;border-radius:34px;display:grid;place-items:center;align-content:center;text-align:center;color:#fff;background:linear-gradient(145deg,#6257ed,#30b4ce);box-shadow:0 30px 70px rgba(98,87,237,.35);transition:transform .35s}.hr-context-core:hover{transform:scale(1.04) rotate(1deg)}
.hr-context-core span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}.hr-context-core b{font-size:22px;line-height:1.05;margin:4px 0}.hr-context-core small{font-size:10px;opacity:.8}
.hr-context-stage>footer{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:18px;border-top:1px solid var(--hr-line)}.hr-context-stage>footer a{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#4f46c8;text-decoration:none}.hr-context-stage>footer a svg{width:14px;height:14px;flex:none}
.op-hr-page .hr-device>footer svg,.op-hr-page .hr-persona-copy .op-btn svg{width:14px;height:14px}

/* ── Persona console: copy inside the dark console ─────────────────── */
.hr-console .hr-persona-copy{color:#eaf2ff}.hr-console .hr-persona-copy>span{color:#7ee0c0}.hr-console .hr-persona-copy h3{color:#fff}
.hr-console .hr-persona-copy li{background:rgba(255,255,255,.05);border-color:rgba(137,165,222,.16)}.hr-console .hr-persona-copy li:hover{border-color:rgba(137,165,222,.45)}.hr-console .hr-persona-copy li span{color:#a9b7d0}
.hr-console .hr-portal-sections span{color:#c7d3ea;background:rgba(255,255,255,.06);border-color:rgba(137,165,222,.18)}.hr-console .hr-portal-sections span:first-child{color:#fff}
.hr-console .op-btn{color:#fff;border-color:rgba(255,255,255,.22)}
/* ── Persona console (light variant, unused by default) ─────────────── */
.hr-console.hr-console-light{background:linear-gradient(145deg,#fbfcff,#f2f5ff);color:var(--hr-ink);border-color:var(--hr-line)}
.hr-console-light .hr-console-bar{border-bottom-color:var(--hr-line)}.hr-console-light .hr-console-bar>div>em{color:#0b8a5f}
.hr-console-light .hr-console-bar button{color:var(--hr-copy);background:#fff;border-color:var(--hr-line)}.hr-console-light .hr-console-bar button:hover{color:var(--hr-ink);background:#eef1f8}.hr-console-light .hr-console-bar button.active{color:#fff}
.hr-console-light .hr-console-progress{background:#e9edf6}
.hr-persona-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}
.hr-persona-layout.wide{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}
.hr-persona-copy>span{font-size:10px;letter-spacing:.12em;font-weight:900;text-transform:uppercase;color:#4f46c8}
.hr-persona-copy h3{margin:8px 0 12px;font-size:clamp(22px,2.6vw,32px);line-height:1.08;letter-spacing:-.035em}
.hr-persona-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.hr-persona-copy li{padding:12px 14px;border-radius:14px;border:1px solid var(--hr-line);background:var(--hr-card);transition:.25s}.hr-persona-copy li:hover{border-color:rgba(98,87,237,.35);transform:translateX(3px)}
.hr-persona-copy li b{display:block;font-size:13.5px}.hr-persona-copy li span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--hr-copy)}
.hr-portal-sections{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}.hr-portal-sections span{padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;color:var(--hr-copy);background:var(--hr-soft);border:1px solid var(--hr-line)}.hr-portal-sections span:first-child{color:#fff;background:linear-gradient(135deg,#6257ed,#30b4ce);border-color:transparent}
.hr-code{border-radius:22px;border:1px solid rgba(180,200,255,.16);background:#050a16;box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:auto;color:#dbe7ff}
.hr-code pre{margin:0;padding:22px 24px;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;white-space:pre}.hr-code .c{color:#7c89a8}
.hr-action-index{display:flex;flex-wrap:wrap;gap:6px;margin:18px auto 0;max-width:1500px}
.hr-action-index span{padding:5px 9px;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;color:#4f46c8;background:rgba(98,87,237,.08);border:1px solid rgba(98,87,237,.18);transition:.2s}.hr-action-index span:hover{background:rgba(98,87,237,.16);transform:translateY(-2px)}
.hr-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.hr-keypad i{display:grid;place-items:center;height:34px;border-radius:9px;background:#1c2545;color:#dde6ff;font-style:normal;font-weight:800;font-size:12px;transition:.2s}.hr-keypad i:hover{background:#2a3560}
.hr-kiosk{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:14px;border-radius:18px;background:#0f1838;color:#eaf0ff}
.hr-kiosk-side{display:grid;gap:8px;align-content:start}.hr-kiosk-side>span{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8aa0d8}
.hr-kiosk-input{padding:8px 10px;border-radius:9px;background:#1c2545;color:#8aa0d8;font-size:10.5px}
.hr-kiosk-side .hr-row{background:#1c2545;border-color:transparent;color:#eaf0ff}.hr-kiosk-side .hr-row>b{color:#fff}.hr-kiosk-side .hr-row>small{color:#a9b6d1}
.hr-kiosk-side button{padding:9px;border-radius:9px;border:0;background:linear-gradient(135deg,#30b4ce,#13a976);color:#fff;font-weight:900;font-size:11px;cursor:pointer;animation:hrBlink 2.4s ease-in-out infinite}

/* ── Connector table + ladder ───────────────────────────────────────── */
.hr-conn-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:18px;align-items:start}
.hr-conn-table-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:var(--hr-shadow)}
.hr-conn-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:560px}
.hr-conn-table th,.hr-conn-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--hr-line)}
.hr-conn-table thead th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-muted);background:var(--hr-soft);font-weight:900}
.hr-conn-table tbody tr:last-child td{border-bottom:0}.hr-conn-table td:first-child{font-weight:800;white-space:nowrap}.hr-conn-table td:last-child{color:var(--hr-copy);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.hr-conn-table tbody tr{transition:background .2s}.hr-conn-table tbody tr:hover td{background:rgba(98,87,237,.05)}
.hr-conn-side{display:grid;gap:14px}
.hr-cert-ladder{padding:18px;border-radius:20px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:var(--hr-shadow)}
.hr-cert-ladder>span{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#4f46c8;margin-bottom:10px}
.hr-cert-ladder>div{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--hr-line);transition:.2s}.hr-cert-ladder>div:hover{transform:translateX(3px)}
.hr-cert-ladder>div b{display:grid;place-items:center;height:26px;border-radius:8px;font-size:11px;color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed)}.hr-cert-ladder>div p{margin:0;font-size:12.5px;line-height:1.5;color:var(--hr-copy)}
.hr-cert-ladder>small{display:block;margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--hr-muted)}
.hr-partners{display:flex;flex-wrap:wrap;gap:8px}.hr-partners span{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--hr-copy);background:var(--hr-card);border:1px solid var(--hr-line);box-shadow:0 8px 20px rgba(29,53,101,.06);transition:.2s}.hr-partners span:hover{transform:translateY(-3px);border-color:rgba(98,87,237,.35)}
.hr-partners span:first-child{color:#fff;background:linear-gradient(135deg,#6257ed,#30b4ce);border-color:transparent}

/* ── Capability atlas ───────────────────────────────────────────────── */
.hr-atlas-group{margin-bottom:30px}
.hr-atlas-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.hr-atlas-head b{font-size:22px;letter-spacing:-.03em}.hr-atlas-head span{font-size:12px;font-weight:800;color:var(--hr-muted)}
.hr-atlas-head:before{content:"";width:34px;height:4px;border-radius:4px;background:linear-gradient(90deg,#e49a18,#6257ed);align-self:center}
.hr-atlas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hr-atlas-card{position:relative;padding:18px 18px 16px;border-radius:18px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:0 10px 26px rgba(29,53,101,.06);transition:transform .3s,box-shadow .3s,border-color .3s;overflow:hidden}
.hr-atlas-card:after{content:"";position:absolute;inset:auto -30% -60% 30%;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(98,87,237,.18),transparent 68%);opacity:0;transition:opacity .3s,transform .3s}
.hr-atlas-card:hover{transform:translateY(-5px);border-color:rgba(98,87,237,.4);box-shadow:0 22px 50px rgba(31,70,140,.14)}.hr-atlas-card:hover:after{opacity:1;transform:scale(1.3)}
.hr-atlas-card h3{margin:0 0 8px;font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}.hr-atlas-card h3:before{content:"";width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#e49a18,#6257ed);flex:none}
.hr-atlas-card ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}.hr-atlas-card li{font-size:12.5px;line-height:1.5;color:var(--hr-copy);padding-left:14px;position:relative}.hr-atlas-card li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:#30b4ce}
.hr-atlas-group[data-journey="hire"] .hr-atlas-card li:before{background:#e49a18}.hr-atlas-group[data-journey="onboard"] .hr-atlas-card li:before{background:#e35bd0}.hr-atlas-group[data-journey="run"] .hr-atlas-card li:before{background:#5275ee}.hr-atlas-group[data-journey="grow"] .hr-atlas-card li:before{background:#13a976}.hr-atlas-group[data-journey="govern"] .hr-atlas-card li:before{background:#6257ed}

/* ── Pricing band ───────────────────────────────────────────────────── */
.hr-pricing{position:relative;overflow:hidden}
.hr-pricing .op-container{position:relative;z-index:1}
.hr-price-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.hr-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--hr-copy);background:var(--hr-soft);border:1px solid var(--hr-line)}
.hr-chip.is-incl{color:#059669;background:rgba(19,185,129,.10);border-color:rgba(19,185,129,.32)}.hr-chip.is-trial{color:#b45309;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.36)}.hr-chip.is-elig{color:#2563eb;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.26)}
.hr-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px;align-items:stretch}
.hr-tier{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:28px;border:1px solid var(--hr-line);background:var(--hr-card);box-shadow:var(--hr-shadow);transition:transform .35s,box-shadow .35s}
.hr-tier:hover{transform:translateY(-6px)}
.hr-tier.is-mid{border-color:rgba(228,154,24,.5);box-shadow:0 26px 70px rgba(228,154,24,.16)}
.hr-tier-name{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#b45309}
.hr-tier-cap{font-size:15px;font-weight:800}.hr-tier-cap b{font-size:24px;letter-spacing:-.04em}
.hr-tier p{margin:0;font-size:13px;line-height:1.5;color:var(--hr-copy)}
.hr-tier-price{display:flex;flex-direction:column;gap:2px;padding-top:6px}.hr-tier-price b{font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.05em;background:linear-gradient(105deg,#e49a18,#e35bd0,#6257ed);-webkit-background-clip:text;background-clip:text;color:transparent}.hr-tier-price span{font-size:12px;font-weight:800;color:var(--hr-muted)}.hr-tier-price small{font-size:12px;color:var(--hr-copy)}
.hr-tier-caps{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--hr-line);display:grid;gap:6px}.hr-tier-caps li{display:flex;gap:8px;align-items:baseline;font-size:12.5px;line-height:1.4;color:var(--hr-copy)}.hr-tier-caps li b{color:var(--hr-ink);font-weight:900;white-space:nowrap}
.hr-tier-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:8px}.hr-tier-foot .op-btn{justify-content:center;text-align:center}
.hr-elig{margin:18px auto 0;max-width:860px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--hr-copy)}.hr-elig a{font-weight:800;color:#2563eb}
.hr-vs{margin-top:38px;padding:clamp(18px,2.6vw,32px);border-radius:32px;border:1px solid rgba(98,87,237,.18);background:var(--hr-card);box-shadow:var(--hr-shadow)}
.hr-vs-head h3{margin:8px 0 8px;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;line-height:1.08}.hr-vs-head p{margin:0 0 18px;max-width:860px;font-size:14.5px;line-height:1.6;color:var(--hr-copy)}
.hr-vs-table-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--hr-line);background:var(--hr-card)}
.hr-vs-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:560px}
.hr-vs-table th,.hr-vs-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--hr-line);white-space:nowrap}
.hr-vs-table thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-muted);background:var(--hr-soft);font-weight:900}
.hr-vs-table tbody tr:last-child td{border-bottom:0}
.hr-vs-table tr.is-us td{font-weight:800;background:rgba(19,185,129,.06)}.hr-vs-table tr.is-them td{color:var(--hr-copy)}
.hr-vs-who{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:var(--hr-soft);border:1px solid var(--hr-line);color:var(--hr-copy)}
tr.is-us .hr-vs-who{color:#fff;background:linear-gradient(135deg,#e49a18,#6257ed);border-color:transparent}
.hr-vs-foot{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--hr-copy)}.hr-vs-foot a{color:#2563eb;font-weight:800}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.hr-faq .op-container{display:grid;grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr);gap:70px;align-items:start}
.hr-faq .op-section-head{position:sticky;top:112px;align-self:start}.hr-faq .op-faq-list{min-width:0}.hr-faq .op-faq-item{background:var(--hr-card);border-color:var(--hr-line)}

/* ── Dark theme for the product window ──────────────────────────────── */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app{--app-bg:#0c1a33;--app-card:#122142;--app-line:rgba(142,166,215,.2);--app-ink:#eef5ff;--app-2:#c1cde4;--app-3:#8fa0bd;border-color:rgba(128,157,216,.22);box-shadow:0 38px 90px rgba(0,0,0,.34)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-top,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-rail,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-tabs,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-hero,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-card,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-table,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-lane,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-row,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-board>div,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-board>div>i,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-ticker li,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-lane-foot,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-msg.ai,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-msg.human{background:#122142;border-color:rgba(142,166,215,.2);color:var(--app-ink)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-hero h4{background:linear-gradient(120deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-ws,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-bar,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-pill{background:rgba(255,255,255,.08)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-table td{border-bottom-color:rgba(142,166,215,.12)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-btn.secondary{background:#1a2b52;color:#eef5ff}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-app-cursor{background:#fff}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-proof article{background:var(--hr-card)}

/* ── Motion + responsive ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){.op-hr-page *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.hr-app.is-3d,.hr-trend-device .hr-app,.hr-phone{transform:none}}
@media(max-width:1180px){.hr-hero-art{min-height:560px}.hr-float-card{display:none}.hr-console{max-width:960px}.hr-scene-grid{grid-template-columns:1fr}.hr-lanes-deck{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-atlas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-fairness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-four-facts{grid-template-columns:repeat(2,1fr)}.hr-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.hr-proof-grid{grid-template-columns:repeat(2,1fr)}.hr-console-bar{align-items:flex-start;flex-direction:column}.hr-console-bar nav{width:100%;overflow:auto;flex-wrap:nowrap}.hr-console-bar button{white-space:nowrap}.hr-story-layout,.hr-service-stage,.hr-coverage-layout,.hr-conn-layout,.hr-persona-layout,.hr-persona-layout.wide,.hr-relations-shell,.hr-department-heading,.hr-device-grid{grid-template-columns:1fr}.hr-faq .op-container{grid-template-columns:1fr;gap:35px}.hr-faq .op-section-head{position:static}.hr-context-flow{grid-template-columns:1fr}.hr-flow-line{width:2px;height:40px;margin:0 auto;background:linear-gradient(180deg,#6257ed,#30b4ce)}.hr-flow-line b{animation:none;top:auto;bottom:0;left:-4px}.hr-context-core{margin:0 auto}.hr-app-body{grid-template-columns:1fr}.hr-app-rail{display:flex;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid var(--app-line)}.hr-app-rail>b{width:100%}.hr-app-rail>span{padding:5px 8px}.hr-app.is-3d{transform:none}}
@media(max-width:680px){.hr-hero-art{min-height:auto;margin-top:20px}.hr-app{border-radius:16px;font-size:10.5px}.hr-app-top{padding:0 10px;gap:8px}.hr-app-ws{display:none}.hr-app-main{padding:10px}.hr-app-tabs{overflow-x:auto;scrollbar-width:none}.hr-app-tab{flex:none}.hr-app-cursor{display:none}.hr-grid2,.hr-grid3{grid-template-columns:1fr}.hr-board{grid-template-columns:repeat(2,1fr)}.hr-proof-grid{grid-template-columns:1fr}.hr-proof article{min-height:88px;padding:18px 21px}.hr-scene{padding:12px}.hr-lanes-deck,.hr-atlas-grid,.hr-fairness-grid,.hr-four-facts,.hr-tiers{grid-template-columns:1fr}.hr-story-copy li{grid-template-columns:1fr}.hr-relations-shell{padding:16px;border-radius:28px}.hr-vault{min-height:300px}.hr-vault-ring.r1{width:240px;height:240px}.hr-vault-ring.r2{width:170px;height:170px}.hr-vault-chip{font-size:10.5px;padding:6px 10px}.hr-heatmap-labels,.hr-heatmap-row{grid-template-columns:60px repeat(12,1fr)}.hr-heatmap-labels{grid-template-columns:60px repeat(6,2fr)}.hr-heatmap-row i{height:16px;border-radius:4px}.hr-code pre{padding:16px;font-size:11px}.hr-kiosk{grid-template-columns:1fr}.hr-phone{width:200px;transform:none}.hr-section-intro h2{font-size:clamp(28px,9vw,38px)}.hr-context-copy h2{font-size:clamp(26px,8vw,34px)}.op-hr-page .op-section,.op-hr-page .op-section-tight{padding:54px 0!important}.op-hr-page .op-mega-h2{font-size:clamp(28px,9vw,38px)!important;line-height:1.04!important}.op-hr-page .op-hero-actions .op-btn{width:100%}.op-hr-page .op-ftable th,.op-hr-page .op-ftable td{padding:12px!important;font-size:12.5px!important}.hr-vs{padding:16px;border-radius:24px}.hr-tier{padding:18px;border-radius:22px}}

/* ═══════════════════════════════════════════════════════════════════════
 * WS3 — THE 3D LAYER (owner, 2026-09-14: "massive 3Ds that represent
 * exactly everything in HR ... must play and show what the pages look
 * like ... hover effects, animation").
 *
 * One system, used by every scene on the page:
 *   .hr3d            a perspective stage; JS writes --mx/--my from the pointer
 *   .hr3d-deck       the rotating body inside it
 *   .hr3d-layer      a plane at a depth, --z, so the scene has real parallax
 * Every stage degrades to a flat, still composition under reduced motion.
 * ═══════════════════════════════════════════════════════════════════════ */
.hr3d{position:relative;perspective:1600px;perspective-origin:50% 45%;--mx:0;--my:0;isolation:isolate}
.hr3d-deck{position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--my) * -7deg)) rotateY(calc(var(--mx) * 9deg));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hr3d:hover .hr3d-deck{transition:transform .12s linear}
.hr3d-layer{transform-style:preserve-3d;transform:translateZ(calc(var(--z,0) * 1px))}
.hr3d-floor{position:absolute;left:6%;right:6%;bottom:-26px;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(34,59,112,.4),transparent 72%);filter:blur(14px);transform:translateZ(-120px);pointer-events:none}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr3d-floor{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent 72%)}

/* A window that lives inside a 3D deck: real thickness, lit edge, glare. */
.hr3d .hr-app{box-shadow:0 60px 120px -40px rgba(12,26,58,.55),0 0 0 1px rgba(160,190,255,.22),inset 0 1px 0 rgba(255,255,255,.6)}
.hr3d .hr-app:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.1) 100%);opacity:calc(.35 + var(--mx) * .35);pointer-events:none;transition:opacity .3s}
.hr3d-chip{position:absolute;z-index:4;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);box-shadow:0 22px 50px rgba(20,36,80,.28);backdrop-filter:blur(16px);color:#101d38;animation:hrFloat 5.5s ease-in-out infinite}
.hr3d-chip i{width:9px;height:9px;border-radius:50%;background:#13bd88;box-shadow:0 0 0 5px rgba(19,189,136,.14);grid-row:span 2;align-self:center}
.hr3d-chip small{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#6c7a95}
.hr3d-chip b{font-size:15px;line-height:1.1}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr3d-chip{background:rgba(13,29,55,.92);border-color:rgba(143,170,218,.22);color:#eef5ff}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr3d-chip small{color:#8fa0bd}

/* ── The org constellation: a real rotating 3D ring of people ─────────── */
.hr-orbit{position:relative;height:560px;transform-style:preserve-3d;perspective:1500px;display:grid;place-items:center}
.hr-orbit-ring{position:absolute;width:520px;height:520px;transform-style:preserve-3d;animation:hrRingSpin 34s linear infinite}
.hr-orbit:hover .hr-orbit-ring,.hr-orbit:hover .hr-orbit-spin{animation-play-state:paused}
/* Three levels, because a CSS carousel that only counter-rotates by the
 * node's own angle renders the back half MIRRORED, and putting the
 * counter-spin on the node itself replaces its orbital transform and
 * collapses the ring. Position on the node, cancel the ring's turn on the
 * spinner, cancel the node's own angle on the face. */
.hr-orbit-node{position:absolute;left:50%;top:50%;width:150px;margin:-34px 0 0 -75px;transform-style:preserve-3d;transform:rotateY(calc(var(--a) * 1deg)) translateZ(300px)}
.hr-orbit-spin{display:block;transform-style:preserve-3d;animation:hrBillboard 34s linear infinite}
.hr-orbit-node .hr-orbit-face{display:block;padding:11px 13px;border-radius:16px;background:var(--hr-card);border:1px solid var(--hr-line);box-shadow:0 20px 44px rgba(20,36,80,.22);transform:rotateY(calc(var(--a) * -1deg));transition:border-color .25s,box-shadow .25s}
.hr-orbit-node:hover .hr-orbit-face{border-color:rgba(98,87,237,.55);box-shadow:0 26px 60px rgba(98,87,237,.34)}
.hr-orbit-node b{display:block;font-size:12.5px;letter-spacing:-.01em}
.hr-orbit-node span.role{display:block;font-size:10px;color:var(--hr-muted);margin-top:2px}
.hr-orbit-node em{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:999px;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:rgba(19,169,118,.16);color:#0b8a5f}
.hr-orbit-node.vacant .hr-orbit-face{border-style:dashed;border-color:rgba(228,154,24,.6);background:linear-gradient(145deg,rgba(228,154,24,.12),var(--hr-card))}
.hr-orbit-node.vacant em{background:rgba(228,154,24,.18);color:#a15c00}
.hr-dark-panel .hr-orbit-node em{color:#6ee7b7}
.hr-dark-panel .hr-orbit-node.vacant em{color:#fbbf24}
.hr-orbit-core{position:relative;transform:translateZ(0);width:158px;height:158px;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;color:#fff;background:radial-gradient(circle at 34% 26%,#8b7bff,#4c3fd6 46%,#101a44);box-shadow:0 40px 90px rgba(76,63,214,.5),inset 0 2px 0 rgba(255,255,255,.28)}
.hr-orbit-core b{font-size:32px;line-height:1;letter-spacing:-.05em}
.hr-orbit-core span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.78;margin-top:5px}
.hr-orbit-core small{font-size:9.5px;opacity:.8;margin-top:4px;max-width:124px;line-height:1.3}
.hr-orbit-halo{position:absolute;width:660px;height:660px;border-radius:50%;border:1px dashed rgba(98,87,237,.28);animation:hrSpin 48s linear infinite reverse}
/* The ring is TILTED so the cards trace an ellipse instead of a flat line:
 * edge-on, a billboarded carousel stacks its side cards on top of each other.
 * The tilt lives in the keyframe because an animation replaces `transform`
 * outright, and the billboard counter-spin needs its own keyframe so it
 * cancels only the ring's turn, never the tilt. */
@keyframes hrRingSpin{from{transform:rotateX(-15deg) rotateY(0deg)}to{transform:rotateX(-15deg) rotateY(-360deg)}}
@keyframes hrBillboard{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes hrOrbitSpin{to{transform:rotateY(360deg)}}

/* ── The isometric hiring pipeline: a board with real depth ──────────── */
.hr-iso{position:relative;height:460px;transform-style:preserve-3d;perspective:1500px}
.hr-iso-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-42deg) translateZ(-30px);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hr-iso:hover .hr-iso-stage{transform:rotateX(48deg) rotateZ(-38deg) translateZ(10px)}
.hr-iso-lane{position:absolute;left:50%;width:300px;height:74px;margin-left:-150px;border-radius:14px;background:linear-gradient(100deg,rgba(255,255,255,.9),rgba(240,245,255,.78));border:1px solid rgba(126,148,185,.3);box-shadow:0 24px 50px rgba(16,30,70,.28);transform-style:preserve-3d;display:flex;align-items:center;gap:10px;padding:0 14px}
.hr-iso-lane:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,var(--lane-a,#6257ed),var(--lane-b,#30b4ce));opacity:.12}
.hr-iso-lane b{position:relative;font-size:12px;letter-spacing:-.01em;color:#111827}
.hr-iso-lane small{position:relative;margin-left:auto;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#4f46c8}
.hr-iso-lane.l1{top:26px}.hr-iso-lane.l2{top:118px}.hr-iso-lane.l3{top:210px}.hr-iso-lane.l4{top:302px}
.hr-iso-card{position:absolute;left:50%;width:132px;margin-left:-66px;padding:9px 11px;border-radius:12px;background:#fff;border:1px solid rgba(126,148,185,.35);box-shadow:0 18px 40px rgba(16,30,70,.3);transform:translateZ(46px);font-size:10px;font-weight:800;color:#111827}
.hr-iso-card span{display:block;font-weight:600;font-size:8.5px;color:#64748b;margin-top:2px}
.hr-iso-card.travel{animation:hrIsoTravel 9s cubic-bezier(.6,0,.4,1) infinite}
.hr-iso-card.ai{border-color:rgba(98,87,237,.55);background:linear-gradient(145deg,#f6f5ff,#fff)}
.hr-iso-card.ai:before{content:"AI";position:absolute;top:-8px;right:-8px;padding:2px 6px;border-radius:7px;font-size:7.5px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6257ed,#30b4ce);box-shadow:0 6px 14px rgba(98,87,237,.4)}
@keyframes hrIsoTravel{0%,6%{top:38px;opacity:0}10%{opacity:1}28%,38%{top:130px}56%,66%{top:222px}84%,94%{top:314px;opacity:1}100%{top:314px;opacity:0}}
.hr-iso-beam{position:absolute;left:50%;top:40px;width:4px;height:300px;margin-left:-2px;border-radius:4px;background:linear-gradient(180deg,#6257ed,#30b4ce,#13a976);opacity:.35;transform:translateZ(6px)}

/* ── The vault door: a real hinged plate over the sealed cases ────────── */
.hr-vault3d{position:relative;height:420px;perspective:1400px;display:grid;place-items:center}
.hr-vault3d-body{position:relative;width:320px;height:320px;transform-style:preserve-3d;transform:rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 8deg))}
.hr-vault3d-back{position:absolute;inset:0;border-radius:28px;background:linear-gradient(150deg,#131a3a,#080c1e);border:1px solid rgba(160,180,255,.2);box-shadow:inset 0 2px 0 rgba(255,255,255,.08);display:grid;align-content:center;gap:8px;padding:34px;transform:translateZ(-30px)}
.hr-vault3d-back span{display:block;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(160,180,255,.14);color:#c7d3ea;font-size:11px;font-weight:800}
.hr-vault3d-door{position:absolute;inset:0;border-radius:28px;transform-origin:left center;transform:rotateY(0deg) translateZ(4px);transition:transform .8s cubic-bezier(.6,0,.3,1);background:radial-gradient(circle at 34% 26%,#3b3a8f,#171436 62%,#0b0d22);border:1px solid rgba(180,200,255,.24);box-shadow:0 40px 90px rgba(10,14,40,.6),inset 0 2px 0 rgba(255,255,255,.14);display:grid;place-items:center;align-content:center;gap:10px;color:#fff;backface-visibility:hidden}
.hr-vault3d:hover .hr-vault3d-door{transform:rotateY(-62deg) translateZ(4px)}
.hr-vault3d-door i{width:86px;height:86px;border-radius:50%;border:6px solid rgba(255,255,255,.24);border-top-color:#c4b5fd;animation:hrSpin 9s linear infinite}
.hr-vault3d-door b{font-size:20px;letter-spacing:-.03em}
.hr-vault3d-door small{font-size:10.5px;opacity:.75;max-width:180px;text-align:center;line-height:1.4}
.hr-vault3d-hint{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--hr-muted)}

/* ── Lane towers: autonomy budget as standing 3D columns ─────────────── */
.hr-towers{position:relative;height:400px;perspective:1500px;display:grid;place-items:end center}
.hr-towers-floor{position:absolute;bottom:54px;left:6%;right:6%;height:200px;transform:rotateX(72deg);background:linear-gradient(rgba(98,87,237,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(48,180,206,.12) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 82%)}
.hr-towers-row{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:26px;transform-style:preserve-3d;transform:rotateX(calc(10deg + var(--my) * -6deg)) rotateY(calc(var(--mx) * 10deg))}
.hr-tower{position:relative;width:76px;transform-style:preserve-3d;text-align:center}
.hr-tower i{display:block;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--t-a,#6257ed),var(--t-b,#30b4ce));box-shadow:0 24px 50px rgba(30,40,110,.35),inset 0 2px 0 rgba(255,255,255,.3);height:var(--h,120px);animation:hrTowerRise 1.4s cubic-bezier(.22,1,.36,1) both;transition:filter .25s,transform .25s}
.hr-tower:hover i{filter:brightness(1.12);transform:translateY(-6px)}
.hr-tower:after{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-radius:10px;background:rgba(255,255,255,.28);transform:rotateX(78deg) translateZ(7px)}
.hr-tower b{display:block;margin-top:10px;font-size:12px;letter-spacing:-.01em}
.hr-tower small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hr-muted);margin-top:2px}
.hr-tower em{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--h,120px) + 48px);font-style:normal;font-size:10px;font-weight:900;padding:3px 8px;border-radius:999px;background:var(--hr-card);border:1px solid var(--hr-line);white-space:nowrap;box-shadow:0 10px 24px rgba(20,36,80,.18)}
.hr-tower.human i{background:linear-gradient(180deg,#94a3b8,#64748b)}
@keyframes hrTowerRise{from{height:0}}

/* ── The connector orbit: providers circling the record in 3D ────────── */
.hr-conn3d{position:relative;height:440px;perspective:1400px;display:grid;place-items:center}
.hr-conn3d-ring{position:absolute;width:360px;height:360px;transform-style:preserve-3d;animation:hrOrbitSpin 34s linear infinite}
.hr-conn3d:hover .hr-conn3d-ring{animation-play-state:paused}
.hr-conn3d-node{position:absolute;left:50%;top:50%;width:132px;margin:-22px 0 0 -66px;padding:8px 10px;border-radius:13px;text-align:center;background:var(--hr-card);border:1px solid var(--hr-line);box-shadow:0 18px 40px rgba(20,36,80,.2);font-size:11px;font-weight:800;transform:rotateY(calc(var(--a) * 1deg)) translateZ(210px) rotateY(calc(var(--a) * -1deg));transition:border-color .25s,transform .25s}
.hr-conn3d-node:hover{border-color:rgba(48,180,206,.55);transform:rotateY(calc(var(--a) * 1deg)) translateZ(232px) rotateY(calc(var(--a) * -1deg))}
.hr-conn3d-node span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hr-muted);margin-top:2px}
.hr-conn3d-core{position:relative;z-index:2;width:170px;height:170px;border-radius:38px;display:grid;place-items:center;align-content:center;text-align:center;color:#fff;background:linear-gradient(145deg,#2563eb,#30b4ce);box-shadow:0 38px 80px rgba(37,99,235,.4),inset 0 2px 0 rgba(255,255,255,.28);transform:translateZ(40px) rotateX(calc(var(--my) * -8deg)) rotateY(calc(var(--mx) * 10deg))}
.hr-conn3d-core b{font-size:19px;line-height:1.1}.hr-conn3d-core span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}.hr-conn3d-core small{font-size:10px;opacity:.85;margin-top:4px}

/* ── The onboarding staircase: steps rising out of the page ──────────── */
.hr-stairs{position:relative;height:420px;perspective:1500px;display:grid;place-items:center}
.hr-stairs-body{position:relative;width:100%;max-width:520px;transform-style:preserve-3d;transform:rotateX(calc(16deg + var(--my) * -8deg)) rotateY(calc(-14deg + var(--mx) * 10deg));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hr-stair{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:11px 14px;border-radius:14px;background:var(--hr-card);border:1px solid var(--hr-line);box-shadow:0 18px 40px rgba(20,36,80,.18);transform:translateZ(calc(var(--i,0) * 14px)) translateX(calc(var(--i,0) * 6px));transition:transform .3s,border-color .3s}
.hr-stair:hover{transform:translateZ(calc(var(--i,0) * 14px + 26px)) translateX(calc(var(--i,0) * 6px));border-color:rgba(98,87,237,.45)}
.hr-stair i{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:linear-gradient(135deg,#13a976,#30b4ce)}
.hr-stair.wait i{background:linear-gradient(135deg,#94a3b8,#64748b)}
.hr-stair.block i{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.hr-stair b{font-size:12.5px}.hr-stair small{font-size:10px;color:var(--hr-muted)}
.hr-stair em{margin-left:auto;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#0b8a5f}
.hr-stair.wait em{color:var(--hr-muted)}.hr-stair.block em{color:#b91c1c}

/* ── Section framing for the 3D showcases ────────────────────────────── */
.hr-show{display:grid;grid-template-columns:minmax(0,.88fr) minmax(360px,1.12fr);gap:clamp(28px,4vw,68px);align-items:center}
.hr-show.rev{grid-template-columns:minmax(360px,1.12fr) minmax(0,.88fr)}
.hr-show.rev .hr-show-copy{order:2}
/* Owner 2026-09-14: the copy column is WRAPPED in its own gradient panel rather
   than sitting flat on the page ground. .hr-show-copy is the shared block of all
   SIX showcase sections, so all six get the panel and none becomes an outlier.
   The list cards inside stay var(--hr-card) white, so they read as raised on it. */
.hr-show-copy{
  position:relative;
  align-self:center;
  padding:clamp(22px,2.6vw,36px);
  border:1px solid var(--hr-line);
  border-radius:28px;
  background:
    radial-gradient(85% 70% at 6% 0%,rgba(98,87,237,.11),transparent 62%),
    radial-gradient(75% 65% at 100% 100%,rgba(48,180,206,.10),transparent 64%),
    linear-gradient(150deg,#f8faff,#eef3ff 52%,#f7f2ff);
  box-shadow:0 24px 64px rgba(46,67,122,.10),inset 0 1px 0 #fff;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-show-copy{
  background:
    radial-gradient(85% 70% at 6% 0%,rgba(98,87,237,.17),transparent 62%),
    radial-gradient(75% 65% at 100% 100%,rgba(48,180,206,.12),transparent 64%),
    linear-gradient(150deg,rgba(20,37,72,.96),rgba(25,38,80,.94) 52%,rgba(44,30,90,.95));
  border-color:rgba(142,166,215,.30);
  box-shadow:0 24px 64px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
}
@media(max-width:680px){.hr-show-copy{padding:18px;border-radius:22px}}
.hr-show-copy h3{margin:12px 0 14px;font-size:clamp(26px,3.4vw,44px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.hr-show-copy h3 em{font-style:normal;background:linear-gradient(100deg,#2181ef,#08b7d0 46%,#8855f6 78%,#e35bd0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hr-show-copy>p{margin:0;color:var(--hr-copy);font-size:16px;line-height:1.75}
.hr-show-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.hr-show-list li{position:relative;padding:12px 14px 12px 40px;border-radius:14px;border:1px solid var(--hr-line);background:var(--hr-card);transition:.25s}
.hr-show-list li:hover{border-color:rgba(98,87,237,.4);transform:translateX(4px)}
.hr-show-list li:before{content:"";position:absolute;left:16px;top:17px;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#2181ef,#8855f6)}
.hr-show-list li b{display:block;font-size:13.5px}
.hr-show-list li span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--hr-copy)}
.hr-surface-tag{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#4f46c8;background:rgba(98,87,237,.09);border:1px solid rgba(98,87,237,.22)}

@media (prefers-reduced-motion:reduce){
  .hr3d-deck,.hr-orbit-ring,.hr-orbit-spin,.hr-conn3d-ring,.hr-conn3d-node,.hr-iso-stage,.hr-vault3d-body,.hr-stairs-body,.hr-towers-row{animation:none!important;transform:none!important}
  .hr-iso-card.travel{animation:none!important;top:130px}
  .hr-vault3d:hover .hr-vault3d-door{transform:rotateY(-62deg)}
}
@media(max-width:1120px){.hr-show,.hr-show.rev{grid-template-columns:1fr}.hr-show.rev .hr-show-copy{order:0}}
@media(max-width:760px){
  .hr-orbit{height:400px}.hr-orbit-ring{width:300px;height:300px}.hr-orbit-node{width:122px;margin:-30px 0 0 -61px;transform:rotateY(calc(var(--a) * 1deg)) translateZ(186px)}
  .hr-orbit-node .hr-orbit-face{padding:9px 10px;border-radius:13px}.hr-orbit-core{width:118px;height:118px}.hr-orbit-core b{font-size:24px}.hr-orbit-core small{display:none}.hr-orbit-halo{width:420px;height:420px}
  .hr-iso{height:380px}.hr-iso-lane{width:230px;margin-left:-115px}.hr-iso-card{width:110px;margin-left:-55px}
  .hr-vault3d{height:340px}.hr-vault3d-body{width:250px;height:250px}
  .hr-towers{height:330px}.hr-towers-row{gap:12px}.hr-tower{width:52px}
  .hr-conn3d{height:360px}.hr-conn3d-ring{width:280px;height:280px}.hr-conn3d-node{width:112px;transform:rotateY(calc(var(--a) * 1deg)) translateZ(158px) rotateY(calc(var(--a) * -1deg))}
  .hr-conn3d-core{width:130px;height:130px;border-radius:28px}
  .hr-stairs{height:auto;padding:20px 0}.hr-stairs-body{transform:none}.hr-stair{transform:none!important}
  .hr3d-chip{display:none}
}


/* ── The showcase gallery: one animated scene per HR domain ───────────── */
.hr-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.hr-gal{display:flex;flex-direction:column;gap:16px}
.hr-gal .m3d-stage{margin:0}
.hr-gal h3{margin:0;font-size:clamp(19px,2vw,24px);letter-spacing:-.03em;line-height:1.14;text-wrap:balance}
.hr-gal p{margin:0;font-size:14.5px;line-height:1.66;color:var(--hr-copy)}
.hr-gal .m3d-stage{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.hr-gal:hover .m3d-stage{transform:translateY(-8px) scale(1.012);box-shadow:0 44px 100px -30px rgba(12,26,58,.6)}
/* Owner 2026-09-14: the hairline that divided consecutive showcase blocks in
   this section is gone. The spacing it came with is kept, so the blocks still
   breathe without a rule drawn between them. */
.hr-power .hr-show+.hr-show{padding-top:clamp(30px,4vw,58px)}
.hr-power .op-spot-art,.hr-gal .m3d-stage{position:relative}
@media(max-width:1000px){.hr-gallery-grid{grid-template-columns:1fr}}
@media(max-width:680px){.hr-gal h3{font-size:19px}.hr-gal p{font-size:13.5px}}

/* A full-width scene stage inside a text section. */
.hr-wide-stage{max-width:1100px;margin:0 auto clamp(26px,3vw,44px)}
.hr-wide-stage .m3d-stage{margin:0;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hr-wide-stage:hover .m3d-stage{transform:translateY(-6px)}

/* Pills and chips carry literal light values for the light page, so inside the
 * dark scene panel they have to be re-stated: re-pointing the surface tokens
 * alone leaves them as white bars. */
.hr-dark-panel .hr-pill{background:rgba(255,255,255,.1);color:#c7d3ea}
.hr-dark-panel .hr-pill.ok{background:rgba(19,169,118,.2);color:#6ee7b7}
.hr-dark-panel .hr-pill.bad{background:rgba(239,68,68,.2);color:#fca5a5}
.hr-dark-panel .hr-pill.warn{background:rgba(228,154,24,.22);color:#fbbf24}
.hr-dark-panel .hr-pill.info{background:rgba(98,87,237,.24);color:#c4b5fd}
.hr-dark-panel .hr-pill.ai{background:linear-gradient(135deg,rgba(98,87,237,.3),rgba(48,180,206,.3));color:#c4b5fd}
.hr-dark-panel .hr-lane-card header{background:rgba(255,255,255,.04)}
.hr-dark-panel .hr-lane-card footer{background:rgba(255,255,255,.03)}
.hr-dark-panel .hr-lane-card header code,.hr-dark-panel .hr-lane-card dt{color:#8fa0bd}
.hr-dark-panel .hr-four-facts article span{color:#c4b5fd}
.hr-dark-panel .hr-department-heading>p,.hr-dark-panel .hr-four-facts article small{color:#a9b7d0}

/* ── Conic dials: the house uses conic-gradient for its score ring and award
 * halo (opsiq-team-performance.css). These are the HR equivalents: a budget
 * dial, a readiness gauge, a pay-band ring and a coverage ring, all driven by
 * one --p custom property so the figure and the arc cannot disagree. */
.hr-dial{--p:0;--dial-a:#6257ed;--dial-b:#30b4ce;position:relative;width:var(--d,132px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;
  background:radial-gradient(circle at center,var(--hr-card) 60%,transparent 61%),conic-gradient(from -90deg,var(--dial-a) 0,var(--dial-b) calc(var(--p) * 1%),rgba(148,163,184,.18) 0);
  box-shadow:inset 0 0 0 1px rgba(120,140,190,.16),0 22px 50px rgba(20,36,80,.16)}
.hr-dial:after{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,var(--dial-b) 78%,transparent 92%);opacity:.35;filter:blur(5px);animation:hrSpin 9s linear infinite}
.hr-dial b{position:relative;z-index:1;font-size:clamp(22px,2.4vw,30px);line-height:1;letter-spacing:-.05em}
.hr-dial span{position:relative;z-index:1;margin-top:4px;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-muted)}
.hr-dial.amber{--dial-a:#e49a18;--dial-b:#e35bd0}.hr-dial.green{--dial-a:#13a976;--dial-b:#30b4ce}.hr-dial.pink{--dial-a:#e35bd0;--dial-b:#6257ed}
.hr-dials{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);justify-content:center;margin-top:26px}
.hr-dial-item{display:grid;justify-items:center;gap:10px;max-width:190px;text-align:center}
.hr-dial-item p{margin:0;font-size:12.5px;line-height:1.5;color:var(--hr-copy)}
.hr-dial-item b.hr-dial-name{font-size:13.5px;letter-spacing:-.01em;color:var(--hr-ink)}
/* The org core and the vault lock become conic rings too, so the same visual
 * grammar carries across every circular figure on the page. */
.hr-vault3d-door i{background:conic-gradient(from -90deg,#c4b5fd 0,#6257ed 70%,rgba(148,163,184,.22) 0);border:0;padding:6px;-webkit-mask:radial-gradient(circle at center,transparent 58%,#000 59%);mask:radial-gradient(circle at center,transparent 58%,#000 59%)}
@media(prefers-reduced-motion:reduce){.hr-dial:after{animation:none}}

/* A graph-paper plate behind the hero art and the gallery, the same idea as
 * the Team Performance hero grid: a masked background-image, not an asset. */
.hr-gallery-grid:before{content:"";position:absolute;z-index:-1;inset:-6% -4%;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(98,87,237,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(48,180,206,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 68%,transparent 100%)}
.hr-gallery-grid{position:relative;isolation:isolate}
/* The award-style halo the house spins behind a figure, in HR colours. */
.hr-dial-item:hover .hr-dial:after{opacity:.6}

/* ═══════════════════════════════════════════════════════════════════════
 * SECTION GROUNDS
 *
 * Sections KEEP their ground. Two exceptions, both from the owner:
 *   - .hr-org3d ("An org chart drawn from positions") has NO ground of its
 *     own and shows the body wash straight through.
 *   - .hr-command ("Six screens that replace an HR stack") takes a DIFFERENT
 *     ground from its neighbours: a cooler blue step, not the near-white.
 * The hero, the proof bar and the inset dark scene panel stay transparent.
 * ═══════════════════════════════════════════════════════════════════════ */
.hr-proof,.hr-org3d,.hr-lanes{background:transparent}
.hr-command{background:radial-gradient(circle at 18% 18%,rgba(51,132,242,.12),transparent 34%),linear-gradient(180deg,#eaf1fb 0%,#f6f9fe 100%)}
.hr-power{background:radial-gradient(circle at 82% 26%,rgba(51,132,242,.09),transparent 30%),#fbfcff}
.hr-pipe3d{background:radial-gradient(circle at 14% 30%,rgba(232,173,55,.11),transparent 30%),#fbfcff}
.hr-onboard3d{background:radial-gradient(circle at 84% 22%,rgba(19,169,118,.09),transparent 30%),#fbfcff}
.hr-gallery{background:radial-gradient(circle at 16% 16%,rgba(91,83,236,.10),transparent 30%),linear-gradient(180deg,#f7f9fe,#fbfcff)}
.hr-record-story{background:radial-gradient(circle at 86% 18%,rgba(51,132,242,.09),transparent 30%),#fbfcff}
.hr-offers{background:radial-gradient(circle at 14% 28%,rgba(19,169,118,.09),transparent 30%),#fbfcff}
.hr-service{background:radial-gradient(circle at 84% 20%,rgba(17,185,209,.10),transparent 30%),linear-gradient(180deg,#f7f9fe,#fbfcff)}
.hr-grow{background:radial-gradient(circle at 16% 26%,rgba(232,121,249,.09),transparent 30%),#fbfcff}
.hr-listen{background:radial-gradient(circle at 84% 18%,rgba(91,83,236,.10),transparent 30%),#fbfcff}
.hr-towers3d{background:radial-gradient(circle at 14% 30%,rgba(232,173,55,.11),transparent 30%),#fbfcff}
.hr-autonomy-deck{background:radial-gradient(circle at 82% 20%,rgba(91,83,236,.10),transparent 30%),linear-gradient(180deg,#f7f9fe,#fbfcff)}
.hr-dossier{background:radial-gradient(circle at 16% 22%,rgba(51,132,242,.09),transparent 30%),#fbfcff}
.hr-matrix{background:radial-gradient(circle at 84% 24%,rgba(17,185,209,.10),transparent 30%),#fbfcff}
.hr-relations{background:radial-gradient(circle at 16% 18%,rgba(91,83,236,.10),transparent 30%),#fbfcff}
.hr-personas{background:radial-gradient(circle at 84% 22%,rgba(51,132,242,.09),transparent 30%),linear-gradient(180deg,#f7f9fe,#fbfcff)}
.hr-connectors{background:radial-gradient(circle at 14% 26%,rgba(17,185,209,.10),transparent 30%),#fbfcff}
.hr-atlas{background:radial-gradient(circle at 84% 18%,rgba(91,83,236,.10),transparent 30%),#fbfcff}
.hr-stack{background:radial-gradient(circle at 16% 28%,rgba(19,169,118,.09),transparent 30%),#fbfcff}
.hr-table-section{background:radial-gradient(circle at 84% 20%,rgba(51,132,242,.09),transparent 30%),linear-gradient(180deg,#f7f9fe,#fbfcff)}
.hr-pricing{background:radial-gradient(circle at 14% 24%,rgba(232,173,55,.11),transparent 30%),#fbfcff}
.hr-faq{background:radial-gradient(circle at 84% 22%,rgba(91,83,236,.10),transparent 30%),#fbfcff}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-proof,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-org3d,:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-lanes{background:transparent}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-command{background:radial-gradient(circle at 18% 18%,rgba(51,132,242,.2),transparent 34%),linear-gradient(180deg,#0a1628 0%,#071225 100%)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-power{background:radial-gradient(circle at 82% 26%,rgba(51,132,242,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-pipe3d{background:radial-gradient(circle at 14% 30%,rgba(232,173,55,.18),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-onboard3d{background:radial-gradient(circle at 84% 22%,rgba(19,169,118,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-gallery{background:radial-gradient(circle at 16% 16%,rgba(91,83,236,.17),transparent 30%),linear-gradient(180deg,#081326,#071225)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-record-story{background:radial-gradient(circle at 86% 18%,rgba(51,132,242,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-offers{background:radial-gradient(circle at 14% 28%,rgba(19,169,118,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-service{background:radial-gradient(circle at 84% 20%,rgba(17,185,209,.17),transparent 30%),linear-gradient(180deg,#081326,#071225)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-grow{background:radial-gradient(circle at 16% 26%,rgba(232,121,249,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-listen{background:radial-gradient(circle at 84% 18%,rgba(91,83,236,.17),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-towers3d{background:radial-gradient(circle at 14% 30%,rgba(232,173,55,.18),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-autonomy-deck{background:radial-gradient(circle at 82% 20%,rgba(91,83,236,.17),transparent 30%),linear-gradient(180deg,#081326,#071225)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-dossier{background:radial-gradient(circle at 16% 22%,rgba(51,132,242,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-matrix{background:radial-gradient(circle at 84% 24%,rgba(17,185,209,.17),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-relations{background:radial-gradient(circle at 16% 18%,rgba(91,83,236,.17),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-personas{background:radial-gradient(circle at 84% 22%,rgba(51,132,242,.16),transparent 30%),linear-gradient(180deg,#081326,#071225)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-connectors{background:radial-gradient(circle at 14% 26%,rgba(17,185,209,.17),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-atlas{background:radial-gradient(circle at 84% 18%,rgba(91,83,236,.17),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-stack{background:radial-gradient(circle at 16% 28%,rgba(19,169,118,.16),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-table-section{background:radial-gradient(circle at 84% 20%,rgba(51,132,242,.16),transparent 30%),linear-gradient(180deg,#081326,#071225)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-pricing{background:radial-gradient(circle at 14% 24%,rgba(232,173,55,.18),transparent 30%),#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-faq{background:radial-gradient(circle at 84% 22%,rgba(91,83,236,.17),transparent 30%),#071225}

/* ── Conic dials: the house uses conic-gradient for its score ring and award
 * halo (opsiq-team-performance.css). These are the HR equivalents: a budget
 * dial, a readiness gauge, a pay-band ring and a coverage ring, all driven by
 * one --p custom property so the figure and the arc cannot disagree. */
.hr-dial{--p:0;--dial-a:#6257ed;--dial-b:#30b4ce;position:relative;width:var(--d,132px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;
  background:radial-gradient(circle at center,var(--hr-card) 60%,transparent 61%),conic-gradient(from -90deg,var(--dial-a) 0,var(--dial-b) calc(var(--p) * 1%),rgba(148,163,184,.18) 0);
  box-shadow:inset 0 0 0 1px rgba(120,140,190,.16),0 22px 50px rgba(20,36,80,.16)}
.hr-dial:after{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,var(--dial-b) 78%,transparent 92%);opacity:.35;filter:blur(5px);animation:hrSpin 9s linear infinite}
.hr-dial b{position:relative;z-index:1;font-size:clamp(22px,2.4vw,30px);line-height:1;letter-spacing:-.05em}
.hr-dial span{position:relative;z-index:1;margin-top:4px;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-muted)}
.hr-dial.amber{--dial-a:#e49a18;--dial-b:#e35bd0}.hr-dial.green{--dial-a:#13a976;--dial-b:#30b4ce}.hr-dial.pink{--dial-a:#e35bd0;--dial-b:#6257ed}
.hr-dials{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);justify-content:center;margin-top:26px}
.hr-dial-item{display:grid;justify-items:center;gap:10px;max-width:190px;text-align:center}
.hr-dial-item p{margin:0;font-size:12.5px;line-height:1.5;color:var(--hr-copy)}
.hr-dial-item b.hr-dial-name{font-size:13.5px;letter-spacing:-.01em;color:var(--hr-ink)}
/* The org core and the vault lock become conic rings too, so the same visual
 * grammar carries across every circular figure on the page. */
.hr-vault3d-door i{background:conic-gradient(from -90deg,#c4b5fd 0,#6257ed 70%,rgba(148,163,184,.22) 0);border:0;padding:6px;-webkit-mask:radial-gradient(circle at center,transparent 58%,#000 59%);mask:radial-gradient(circle at center,transparent 58%,#000 59%)}
@media(prefers-reduced-motion:reduce){.hr-dial:after{animation:none}}

/* A graph-paper plate behind the hero art and the gallery, the same idea as
 * the Team Performance hero grid: a masked background-image, not an asset. */
.hr-gallery-grid:before{content:"";position:absolute;z-index:-1;inset:-6% -4%;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(98,87,237,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(48,180,206,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 68%,transparent 100%)}
.hr-gallery-grid{position:relative;isolation:isolate}
/* The award-style halo the house spins behind a figure, in HR colours. */
.hr-dial-item:hover .hr-dial:after{opacity:.6}

/* ── Conic dials: the house uses conic-gradient for its score ring and award
 * halo (opsiq-team-performance.css). These are the HR equivalents: a budget
 * dial, a readiness gauge, a pay-band ring and a coverage ring, all driven by
 * one --p custom property so the figure and the arc cannot disagree. */
.hr-dial{--p:0;--dial-a:#6257ed;--dial-b:#30b4ce;position:relative;width:var(--d,132px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;
  background:radial-gradient(circle at center,var(--hr-card) 60%,transparent 61%),conic-gradient(from -90deg,var(--dial-a) 0,var(--dial-b) calc(var(--p) * 1%),rgba(148,163,184,.18) 0);
  box-shadow:inset 0 0 0 1px rgba(120,140,190,.16),0 22px 50px rgba(20,36,80,.16)}
.hr-dial:after{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,var(--dial-b) 78%,transparent 92%);opacity:.35;filter:blur(5px);animation:hrSpin 9s linear infinite}
.hr-dial b{position:relative;z-index:1;font-size:clamp(22px,2.4vw,30px);line-height:1;letter-spacing:-.05em}
.hr-dial span{position:relative;z-index:1;margin-top:4px;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-muted)}
.hr-dial.amber{--dial-a:#e49a18;--dial-b:#e35bd0}.hr-dial.green{--dial-a:#13a976;--dial-b:#30b4ce}.hr-dial.pink{--dial-a:#e35bd0;--dial-b:#6257ed}
.hr-dials{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);justify-content:center;margin-top:26px}
.hr-dial-item{display:grid;justify-items:center;gap:10px;max-width:190px;text-align:center}
.hr-dial-item p{margin:0;font-size:12.5px;line-height:1.5;color:var(--hr-copy)}
.hr-dial-item b.hr-dial-name{font-size:13.5px;letter-spacing:-.01em;color:var(--hr-ink)}
/* The org core and the vault lock become conic rings too, so the same visual
 * grammar carries across every circular figure on the page. */
.hr-vault3d-door i{background:conic-gradient(from -90deg,#c4b5fd 0,#6257ed 70%,rgba(148,163,184,.22) 0);border:0;padding:6px;-webkit-mask:radial-gradient(circle at center,transparent 58%,#000 59%);mask:radial-gradient(circle at center,transparent 58%,#000 59%)}
@media(prefers-reduced-motion:reduce){.hr-dial:after{animation:none}}

/* A graph-paper plate behind the hero art and the gallery, the same idea as
 * the Team Performance hero grid: a masked background-image, not an asset. */
.hr-gallery-grid:before{content:"";position:absolute;z-index:-1;inset:-6% -4%;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(98,87,237,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(48,180,206,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 68%,transparent 100%)}
.hr-gallery-grid{position:relative;isolation:isolate}
/* The award-style halo the house spins behind a figure, in HR colours. */
.hr-dial-item:hover .hr-dial:after{opacity:.6}

/* ═══════════════════════════════════════════════════════════════════════
 * SECTION GROUNDS — measured from /team-performance, not invented.
 *
 * The reference page NEVER changes ground colour. Read live from the DOM:
 *   .tp3-command, .tp-hero, the proof bar   transparent
 * The separation comes from the WHITE PANELS floating on that one ground
 * (.tp3-band-panel and friends are linear-gradient(#fff,#fafbfe)), never from
 * giving each section a different colour.
 *
 * An earlier pass here gave 24 sections their own amber, green and pink
 * grounds. That is the mess the owner rejected. One ground, a whisper step on
 * a few sections, one faint radial each, floating panels on top.
 * ═══════════════════════════════════════════════════════════════════════ */

/* The hero, the proof bar and the dark scene panel stay transparent, exactly as
 * the reference page leaves .tp-hero, its proof bar and .tp3-command. */
.hr-proof,.hr-lanes{background:none!important}
/* Panels float on the one ground. This is where the separation actually comes
 * from on the reference page. */
.hr-show-list li,.hr-fairness-grid article,.hr-atlas-card,.hr-lane-card,.hr-device,
.hr-coverage-side article,.hr-heatmap-panel,.hr-cert-ladder,.hr-conn-table-wrap,
.hr-context-stage,.hr-relations-shell,.hr-four-facts article,.hr-packs,.hr-tier,.hr-vs{
  background:linear-gradient(180deg,#fff,#fafbfe)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-show-list li,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-fairness-grid article,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-atlas-card,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-lane-card,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-device,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-coverage-side article,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-heatmap-panel,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-cert-ladder,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-conn-table-wrap,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-context-stage,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-relations-shell,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-four-facts article,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-packs,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tier,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-vs{
  background:linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9))}



/* ── Hero: keep the 3D window INSIDE the hero card ────────────────────────
 * A rotated element projects a bounding box wider and taller than its layout
 * box, so the tilt on .hr3d-deck pushed the product window past the card's
 * right edge and below its bottom. The stage now reserves room for the
 * projection, the tilt is gentler, and the window is capped to the column. */
.hr-hero-art{min-height:0;padding:clamp(10px,2vw,28px) clamp(12px,2.4vw,34px);overflow:visible}
.hr-hero-art .hr3d{max-width:100%}
.hr-hero-art .hr3d-deck{transform:rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 5deg)) scale(.97);transform-origin:50% 50%}
.hr-hero-art .hr-hero-window{max-width:100%}
.hr-hero-art .hr-app-body{min-height:0}
.hr-hero-art .hr-app-main{padding:12px 14px 14px}
.hr-hero-art .hr3d-floor{bottom:-14px;height:64px}
@media(max-width:1180px){.hr-hero-art .hr3d-deck{transform:none;scale:1}}

/* ── The org ring gets a surface, not just an outline ─────────────────────
 * It was a bare dashed circle, so the constellation looked as if it were
 * floating on nothing. The ring now sits on a soft disc with a lit inner
 * edge, and keeps the dashed rule as its rim. */
.hr-orbit-halo{
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.9),rgba(255,255,255,.55) 46%,rgba(240,244,255,.28) 70%,transparent 78%),
    radial-gradient(circle at 50% 50%,rgba(98,87,237,.09),transparent 64%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 110px -50px rgba(46,67,122,.5);
  backdrop-filter:blur(2px)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-orbit-halo{
  background:
    radial-gradient(circle at 50% 38%,rgba(24,42,84,.85),rgba(16,30,62,.55) 46%,rgba(10,20,44,.3) 70%,transparent 78%),
    radial-gradient(circle at 50% 50%,rgba(139,123,255,.14),transparent 64%);
  border-color:rgba(160,190,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 110px -50px rgba(0,0,0,.7)}

/* The disc must sit BEHIND the people cards, never over them. The blur was
 * frosting whatever it covered and the fill was too opaque, so the cards in
 * front of it lost contrast. Pushed back in the 3D stack, no blur, lighter. */
.hr-orbit-halo{
  backdrop-filter:none;
  transform:translateZ(-60px) rotate(0deg);
  animation:hrSpin 48s linear infinite reverse;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.55),rgba(244,247,255,.3) 52%,rgba(238,243,255,.14) 72%,transparent 80%),
    radial-gradient(circle at 50% 50%,rgba(98,87,237,.06),transparent 66%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-orbit-halo{
  background:
    radial-gradient(circle at 50% 40%,rgba(20,36,74,.55),rgba(14,26,56,.32) 52%,rgba(9,18,40,.16) 72%,transparent 80%),
    radial-gradient(circle at 50% 50%,rgba(139,123,255,.1),transparent 66%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hr-orbit-node{z-index:2}
.hr-orbit-core{z-index:1}

/* The disc turns WITH the cards: same 34s clock, same direction, same 15°
 * tilt as .hr-orbit-ring, so the rim tracks the people instead of drifting
 * against them. The push-back is baked into the keyframe, because an
 * animation replaces `transform` outright. */
@keyframes hrHaloSpin{
  from{transform:translateZ(-60px) rotateX(-15deg) rotateY(0deg)}
  to{transform:translateZ(-60px) rotateX(-15deg) rotateY(-360deg)}}
.hr-orbit-halo{animation:hrHaloSpin 34s linear infinite}
.hr-orbit:hover .hr-orbit-halo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hr-orbit-halo{animation:none;transform:translateZ(-60px) rotateX(-15deg)}}

/* The ring keeps its exact shape and width and simply turns in place. The
 * previous version tilted it 15° to match the card ring, which squashed the
 * circle into an ellipse and made its width change as it moved. Spinning it
 * about its own axis leaves the circle identical frame to frame; only the
 * dashed rim travels, which is what shows the motion. */
@keyframes hrHaloSpin{
  from{transform:translateZ(-60px) rotate(0deg)}
  to{transform:translateZ(-60px) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hr-orbit-halo{animation:none;transform:translateZ(-60px)}}

/* ── A marker on the rim, so the rotation is actually visible ─────────────
 * A plain circle spinning about its own axis looks static: there is nothing
 * on it to track. Two marks ride the rim and rotate with the parent, so the
 * motion reads at a glance without the circle changing shape or width. */
.hr-orbit-halo{overflow:visible}
/* the travelling node */
.hr-orbit-halo:before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8b7bff 42%,#4c3fd6);
  box-shadow:0 0 0 5px rgba(139,123,255,.18),0 0 18px rgba(139,123,255,.75);
  animation:hrHaloPulse 2.4s ease-in-out infinite}
@keyframes hrHaloPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.75}}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-orbit-halo:before{
  box-shadow:0 0 0 5px rgba(139,123,255,.22),0 0 24px rgba(139,123,255,.9)}
@media(prefers-reduced-motion:reduce){.hr-orbit-halo:before{animation:none}}
@media(max-width:760px){.hr-orbit-halo:before{width:12px;height:12px;margin-left:-6px;top:-6px}}

/* ── Cards inside the dark panel ──────────────────────────────────────────
 * A later rule painted every card `linear-gradient(#fff,#fafbfe)` for the
 * light sections. Inside the dark scene panel that won, so the cards went
 * white while their text stayed light: unreadable. Re-asserted here, after
 * that rule, so the panel's cards are translucent over the dark ground and
 * their text has real contrast again. */
.hr-dark-panel .hr-lane-card,
.hr-dark-panel .hr-four-facts article{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04));
  border-color:rgba(160,190,255,.2);
  box-shadow:0 22px 50px rgba(0,0,0,.34)}
.hr-dark-panel .hr-lane-card header{background:rgba(255,255,255,.05);border-bottom-color:rgba(160,190,255,.16)}
.hr-dark-panel .hr-lane-card footer{background:rgba(255,255,255,.03);border-top-color:rgba(160,190,255,.16)}
.hr-dark-panel .hr-lane-card header b,
.hr-dark-panel .hr-lane-card dd,
.hr-dark-panel .hr-four-facts article b{color:#f2f6ff}
.hr-dark-panel .hr-lane-card header code,
.hr-dark-panel .hr-lane-card dt{color:#9fb0d8}
.hr-dark-panel .hr-four-facts article span{color:#c4b5fd}
.hr-dark-panel .hr-four-facts article small{color:#b9c6dd}

/* ── The panel's section continues the ground above it ────────────────────
 * .hr-lanes was transparent, so it showed the body wash instead of carrying
 * on from the section above. It now uses the same ground as .hr-power, which
 * sits directly above it, so the surface runs down behind the wrapper. */
.hr-lanes{background:radial-gradient(circle at 82% 26%,rgba(51,132,242,.09),transparent 30%),#fbfcff!important}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-lanes{background:radial-gradient(circle at 82% 26%,rgba(51,132,242,.16),transparent 30%),#071225!important}

/* ── Typography: the house scale, not a private one ───────────────────────
 * Headings and leads on this page now carry .op-mega-h2 and .op-lead, so the
 * size, weight, colour and letter-spacing come from the same place as every
 * other marketing page. Only layout is set here: width, centring, spacing.
 * The font family is inherited from body.op-site-body (Inter) and is never
 * re-declared on this page. */
.hr-section-intro .op-mega-h2,.hr-context-copy .op-mega-h2{text-wrap:balance}
.hr-section-intro .op-lead{margin-left:auto;margin-right:auto}
.hr-context-copy .op-lead,.hr-show-copy>p{max-width:760px}
/* Sub-headings sit one step under .op-mega-h2, in the house colour. */
.hr-show-copy h3,.hr-gal h3,.hr-persona-copy h3,.hr-vs-head h3,.hr-fairness-grid h3,.hr-atlas-card h3{
  color:var(--op-text);letter-spacing:-.03em}
.hr-show-copy h3,.hr-persona-copy h3,.hr-vs-head h3{font-size:clamp(24px,3vw,38px);line-height:1.06}
.hr-gal h3{font-size:clamp(19px,2vw,24px);line-height:1.14}
.hr-fairness-grid h3,.hr-atlas-card h3{font-size:16px;line-height:1.3}
.hr-show-copy>p,.hr-gal p,.hr-persona-copy li span,.hr-fairness-grid p,.hr-atlas-card li{color:var(--op-muted)}

/* ── The panel's drop shadow was landing as a grey band ───────────────────
 * .op-scene-dark .op-scene-panel carries a 130px shadow. Over this page's
 * light ground it read as a dirty smear under the panel rather than depth.
 * Tightened and darkened so it reads as a shadow again. */
.hr-lanes .op-scene-panel{box-shadow:0 34px 70px -34px rgba(7,18,44,.55),inset 0 1px 0 rgba(255,255,255,.06)}

/* ── The pipeline scene was undersized for its column ─────────────────────
 * Scaled as a whole rather than re-laying it out, so the lane spacing, the
 * travelling card and the keyframe geometry stay exactly as they are. */
.hr-iso{height:clamp(430px,44vw,610px)}
.hr-iso-stage{transform:rotateX(56deg) rotateZ(-42deg) translateZ(-30px) scale(1.34)}
.hr-iso:hover .hr-iso-stage{transform:rotateX(48deg) rotateZ(-38deg) translateZ(10px) scale(1.38)}
@media(max-width:1120px){
  .hr-iso{height:clamp(400px,52vw,520px)}
  .hr-iso-stage{transform:rotateX(56deg) rotateZ(-42deg) translateZ(-30px) scale(1.12)}
  .hr-iso:hover .hr-iso-stage{transform:rotateX(48deg) rotateZ(-38deg) translateZ(10px) scale(1.16)}}
@media(max-width:760px){
  .hr-iso{height:400px}
  .hr-iso-stage,.hr-iso:hover .hr-iso-stage{transform:rotateX(56deg) rotateZ(-42deg) translateZ(-30px) scale(.92)}}

/* ── The SECTION is wrapped, not its content ──────────────────────────────
 * The panel is an inset pseudo-element on the section itself, the same
 * construction the house uses on .op-crm-autonomy-deck: pulled in from the
 * section edges, big radius, sitting behind everything the section holds. */
.hr-onboard3d{position:relative;isolation:isolate}
.hr-onboard3d:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:clamp(18px,2.6vw,42px) max(16px,calc((100vw - 1480px) / 2));
  border-radius:clamp(30px,3.6vw,54px);
  border:1px solid rgba(126,148,185,.22);
  background:
    radial-gradient(760px 420px at 16% 10%,rgba(19,169,118,.08),transparent 60%),
    radial-gradient(700px 440px at 86% 88%,rgba(48,180,206,.07),transparent 62%),
    linear-gradient(180deg,#fff,#fafbfe);
  box-shadow:0 34px 90px -40px rgba(34,59,112,.34),inset 0 1px 0 rgba(255,255,255,.9)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-onboard3d:before{
  border-color:rgba(142,166,215,.18);
  background:
    radial-gradient(760px 420px at 16% 10%,rgba(19,169,118,.14),transparent 60%),
    radial-gradient(700px 440px at 86% 88%,rgba(48,180,206,.12),transparent 62%),
    linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9));
  box-shadow:0 34px 90px -40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
@media(max-width:760px){.hr-onboard3d:before{inset:12px 8px;border-radius:26px}}

/* ── Pipeline scene: straight on, larger, and kept in its own column ──────
 * The isometric skew (rotateX 56° + rotateZ -42°) threw the board's projected
 * box well past its column and over the copy on the left. Dropping the Z
 * rotation stands the lanes up straight, which also makes the projection
 * narrow enough to scale up without escaping. The column clips as a backstop. */
.hr-iso{height:clamp(430px,42vw,580px);overflow:hidden}
.hr-iso-stage{transform:rotateX(15deg) scale(1.26);transform-origin:50% 50%}
.hr-iso:hover .hr-iso-stage{transform:rotateX(9deg) scale(1.3)}
@media(max-width:1120px){
  .hr-iso{height:clamp(400px,50vw,520px)}
  .hr-iso-stage{transform:rotateX(15deg) scale(1.06)}
  .hr-iso:hover .hr-iso-stage{transform:rotateX(9deg) scale(1.1)}}
@media(max-width:760px){
  .hr-iso{height:390px}
  .hr-iso-stage,.hr-iso:hover .hr-iso-stage{transform:rotateX(10deg) scale(.9)}}

/* ── Pipeline scene: fit the scaled board inside its box ──────────────────
 * scale() grows from the centre, so at 1.26 the top lane landed about 42px
 * ABOVE the stage and overflow:hidden cut it off. The scale is eased back and
 * the board is nudged down by the amount the growth steals from the top, so
 * the whole run from Applied to Offer sits inside the frame. The translate is
 * listed first so it is applied after the scale and is not multiplied by it. */
.hr-iso{height:clamp(470px,44vw,570px)}
.hr-iso-stage{transform:translateY(26px) rotateX(15deg) scale(1.12)}
.hr-iso:hover .hr-iso-stage{transform:translateY(22px) rotateX(9deg) scale(1.15)}
@media(max-width:1120px){
  .hr-iso{height:clamp(420px,50vw,520px)}
  .hr-iso-stage{transform:translateY(14px) rotateX(15deg) scale(1.02)}
  .hr-iso:hover .hr-iso-stage{transform:translateY(12px) rotateX(9deg) scale(1.05)}}
@media(max-width:760px){
  .hr-iso{height:400px}
  .hr-iso-stage,.hr-iso:hover .hr-iso-stage{transform:translateY(0) rotateX(10deg) scale(.88)}}

/* ── The onboarding section carries the ground from above ─────────────────
 * Its own green radial was showing as a tint in the gap above the wrapper.
 * It now uses the same ground as .hr-pipe3d, which sits directly above, so
 * that surface runs straight down past the panel into the next section. */
.hr-onboard3d{background:radial-gradient(circle at 14% 30%,rgba(232,173,55,.11),transparent 30%),#fbfcff}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-onboard3d{background:radial-gradient(circle at 14% 30%,rgba(232,173,55,.18),transparent 30%),#071225}

/* ── No tint at all on this section or its panel ──────────────────────────
 * Carrying the amber radial down from the section above just moved the
 * problem: at 14% across it reads as a yellow patch on the left. Both the
 * section ground and the panel are now flat, so the surface is continuous
 * and no colour appears above or inside the wrapper. */
.hr-onboard3d{background:#fbfcff}
.hr-onboard3d:before{background:linear-gradient(180deg,#fff,#fafbfe)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-onboard3d{background:#071225}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-onboard3d:before{background:linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9))}


/* ═══════════════════════════════════════════════════════════════════════
 * THE WIPE THEATRE — the page's centrepiece.
 *
 * "Ten jobs your HR team does by hand. Here is PeopleOS doing each one."
 * So the section does exactly that, literally: ONE stage, and the job starts
 * as dead grey paper. A bar sweeps across and colour, motion and life arrive
 * behind it. It is the same scene throughout, drained on one side of the bar
 * and live on the other, so the promise and the picture are the same thing.
 *
 * The drain is a backdrop-filter on an overlay clipped to the bar, so the
 * scene is never duplicated: ten jobs cost ten scenes, not twenty.
 * ═══════════════════════════════════════════════════════════════════════ */
.hr-gal-ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 clamp(20px,2.6vw,34px);
  border:1px solid var(--hr-line);border-radius:26px;background:var(--hr-line);overflow:hidden;box-shadow:0 22px 60px -34px rgba(34,59,112,.4)}
.hr-gal-ribbon>div{padding:clamp(16px,2vw,26px);background:linear-gradient(180deg,#fff,#fafbfe);display:grid;gap:4px;transition:background .3s}
.hr-gal-ribbon>div:hover{background:linear-gradient(180deg,#fff,#f4f7ff)}
.hr-gal-ribbon b{font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-.05em;
  background:linear-gradient(105deg,#6257ed,#30b4ce 55%,#e35bd0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hr-gal-ribbon span{font-size:12.5px;font-weight:700;color:var(--op-muted)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-gal-ribbon>div{background:linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9))}

.hr-theatre{border:1px solid var(--hr-line);border-radius:clamp(26px,3vw,40px);overflow:hidden;
  background:linear-gradient(180deg,#fff,#fafbfe);box-shadow:0 40px 100px -50px rgba(34,59,112,.55)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-theatre{background:linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9))}
.hr-theatre-rail{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;
  padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,26px);border-bottom:1px solid var(--hr-line)}
.hr-theatre-now{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--op-muted);white-space:nowrap}
.hr-theatre-now em{font-style:normal;color:#4f46c8}
.hr-theatre-rail nav{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.hr-theatre-rail button{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--op-muted);font-size:12.5px;font-weight:800;transition:.25s}
.hr-theatre-rail button i{font-style:normal;font-size:10px;font-weight:900;opacity:.5}
.hr-theatre-rail button:hover{color:var(--op-text);background:rgba(98,87,237,.07);border-color:rgba(98,87,237,.2)}
.hr-theatre-rail button.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6257ed,#5275ee 58%,#30b4ce);box-shadow:0 10px 24px -12px rgba(73,70,189,.9)}
.hr-theatre-rail button.active i{opacity:.9}
.hr-theatre-progress{height:3px;background:var(--hr-line)}
.hr-theatre-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#e49a18,#6257ed,#30b4ce)}
.hr-theatre.is-playing .hr-theatre-progress i{animation:hrProgress 5.2s linear forwards}
.hr-theatre-view{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(20px,2.6vw,40px);
  padding:clamp(20px,2.6vw,38px);animation:hrScene .5s cubic-bezier(.22,1,.36,1)}
.hr-theatre-view[hidden]{display:none!important}

.hr-wipe{position:relative;border-radius:22px;overflow:hidden;isolation:isolate}
.hr-wipe .m3d-stage{margin:0}
/* the drain: everything LEFT of the bar is dead paper */
.hr-wipe-paper{position:absolute;inset:0;z-index:3;pointer-events:none;
  -webkit-backdrop-filter:grayscale(1) contrast(.72) brightness(1.18) sepia(.28);
          backdrop-filter:grayscale(1) contrast(.72) brightness(1.18) sepia(.28);
  background-image:linear-gradient(rgba(120,110,90,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,110,90,.04) 1px,transparent 1px);
  background-size:22px 22px;
  clip-path:inset(0 calc(100% - var(--wipe,86%)) 0 0);
  animation:hrWipe 7s cubic-bezier(.65,0,.35,1) infinite}
.hr-wipe-bar{position:absolute;top:0;bottom:0;z-index:4;width:2px;pointer-events:none;
  left:var(--wipe,86%);background:linear-gradient(180deg,transparent,#6257ed 12%,#30b4ce 88%,transparent);
  box-shadow:0 0 22px rgba(98,87,237,.75);animation:hrWipeBar 7s cubic-bezier(.65,0,.35,1) infinite}
.hr-wipe-bar b{position:absolute;top:14px;left:10px;white-space:nowrap;padding:5px 10px;border-radius:999px;
  font-size:9.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#6257ed,#30b4ce);box-shadow:0 10px 22px -10px rgba(98,87,237,.9)}
.hr-wipe-flag{position:absolute;bottom:14px;z-index:5;padding:6px 11px;border-radius:999px;
  font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(8px)}
.hr-wipe-flag.by{left:14px;color:#8a6a1f;background:rgba(255,248,232,.86);border:1px solid rgba(228,154,24,.4)}
.hr-wipe-flag.os{right:14px;color:#0b8a5f;background:rgba(236,253,245,.86);border:1px solid rgba(19,169,118,.4)}
@keyframes hrWipe{0%,8%{--wipe:92%}52%,72%{--wipe:6%}100%{--wipe:92%}}
@keyframes hrWipeBar{0%,8%{left:92%}52%,72%{left:6%}100%{left:92%}}
@property --wipe{syntax:'<percentage>';inherits:false;initial-value:86%}

.hr-theatre-copy{align-self:center;display:grid;gap:12px;position:relative}
.hr-theatre-n{font-size:clamp(40px,4.4vw,62px);font-weight:900;line-height:.9;letter-spacing:-.07em;
  background:linear-gradient(105deg,#6257ed,#30b4ce 60%,#e35bd0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hr-theatre-copy h3{margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.1;letter-spacing:-.035em;color:var(--op-text)}
.hr-theatre-copy p{margin:0;font-size:14.5px;line-height:1.68;color:var(--op-muted)}
.hr-theatre-swap{display:grid;gap:10px;margin-top:6px}
.hr-theatre-swap span{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--hr-line);font-size:13px;line-height:1.45}
.hr-theatre-swap b{font-size:9.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.hr-theatre-swap .by{color:var(--op-muted);background:rgba(228,154,24,.06);border-color:rgba(228,154,24,.26)}
.hr-theatre-swap .by b{color:#b45309}
.hr-theatre-swap .os{color:var(--op-text);font-weight:650;background:rgba(19,169,118,.07);border-color:rgba(19,169,118,.3)}
.hr-theatre-swap .os b{color:#0b8a5f}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-theatre-swap .by b{color:#fbbf24}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-theatre-swap .os b{color:#6ee7b7}

@media(prefers-reduced-motion:reduce){
  .hr-wipe-paper{animation:none;clip-path:inset(0 100% 0 0)}
  .hr-wipe-bar{animation:none;display:none}
  .hr-theatre.is-playing .hr-theatre-progress i{animation:none}}
@media(max-width:1020px){.hr-theatre-view{grid-template-columns:1fr}}
@media(max-width:820px){.hr-gal-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .hr-theatre-rail{gap:10px}.hr-theatre-rail nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .hr-theatre-rail button{white-space:nowrap;flex:none}
  .hr-wipe-bar b,.hr-wipe-flag{font-size:8.5px;padding:4px 8px}}

/* Ten pills in one rail: tighter, centred, and a single scrolling row rather
 * than a ragged two-line wrap. */
.hr-theatre-rail nav{justify-content:center;gap:4px}
.hr-theatre-rail button{padding:7px 11px;font-size:12px}
.hr-theatre-rail button i{font-size:9.5px}
@media(min-width:1280px){.hr-theatre-rail nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .hr-theatre-rail nav::-webkit-scrollbar{display:none}
  .hr-theatre-rail button{flex:none;white-space:nowrap}}

/* ═══════════════════════════════════════════════════════════════════════
 * "Every profile section is dated records with a state."
 * The section now demonstrates its own claim instead of asserting it: the
 * copy column IS a dated ledger, with a spine, an effective date, an author
 * and a state on every entry, including one dated in the future.
 * ═══════════════════════════════════════════════════════════════════════ */
.hr-record-story .hr-story-copy{display:grid;gap:clamp(18px,2vw,26px)}
.hr-record-story .hr-story-copy>p{margin:0}
.hr-ledger{border:1px solid var(--hr-line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#fff,#fafbfe);box-shadow:0 24px 60px -36px rgba(34,59,112,.45)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-ledger{background:linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9))}
.hr-ledger-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--hr-line);background:rgba(98,87,237,.05)}
.hr-ledger-head span{font-size:12px;font-weight:800;color:var(--op-text)}
.hr-ledger-head em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--op-muted)}
.hr-ledger ol{list-style:none;margin:0;padding:8px 16px 10px;position:relative}
/* the spine */
.hr-ledger ol:before{content:"";position:absolute;left:112px;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(228,154,24,.5),rgba(98,87,237,.45),rgba(142,166,215,.22))}
.hr-ledger li{position:relative;display:grid;grid-template-columns:88px 1fr auto;gap:4px 18px;
  padding:11px 0 11px 0;align-items:start;transition:background .25s}
.hr-ledger li+li{border-top:1px solid var(--hr-line)}
.hr-ledger li:before{content:"";position:absolute;left:92px;top:17px;width:10px;height:10px;border-radius:50%;
  background:var(--hr-card);border:2px solid rgba(142,166,215,.5);z-index:1}
.hr-ledger li.current:before{border-color:#13a976;background:#13a976;box-shadow:0 0 0 4px rgba(19,169,118,.16)}
.hr-ledger li.pending:before{border-color:#e49a18;background:var(--hr-card);box-shadow:0 0 0 4px rgba(228,154,24,.14);animation:hrHaloPulse 2.4s ease-in-out infinite}
.hr-ledger .d{font-size:11.5px;font-weight:800;color:var(--op-muted);padding-top:1px;letter-spacing:-.01em}
.hr-ledger .c{display:grid;gap:2px;font-size:12px;color:var(--op-muted);padding-left:14px}
.hr-ledger .c b{font-size:13.5px;color:var(--op-text);letter-spacing:-.01em}
.hr-ledger .s{align-self:center;padding:4px 10px;border-radius:999px;white-space:nowrap;
  font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--op-muted);background:var(--hr-soft);border:1px solid var(--hr-line)}
.hr-ledger li.current .s{color:#0b8a5f;background:rgba(19,169,118,.12);border-color:rgba(19,169,118,.34)}
.hr-ledger li.pending .s{color:#a15c00;background:rgba(228,154,24,.14);border-color:rgba(228,154,24,.36)}
.hr-ledger li>em{grid-column:2 / -1;padding-left:14px;font-style:normal;font-size:11.5px;line-height:1.5;color:#a15c00}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-ledger li>em{color:#fbbf24}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-ledger li.current .s{color:#6ee7b7}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-ledger li.pending .s{color:#fbbf24}
.hr-ledger-foot{display:flex;gap:9px;align-items:flex-start;padding:11px 16px;border-top:1px solid var(--hr-line);
  background:var(--hr-soft);font-size:11.5px;line-height:1.5;color:var(--op-muted)}
.hr-ledger-foot i{flex:none;width:6px;height:6px;margin-top:6px;border-radius:50%;background:#13a976}

/* The three claims become a compact strip under the ledger. */
.hr-claims{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hr-claims li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;border:1px solid var(--hr-line);
  background:linear-gradient(180deg,#fff,#fafbfe);transition:.25s}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-claims li{background:linear-gradient(180deg,rgba(10,24,48,.94),rgba(8,20,42,.9))}
.hr-claims li:hover{border-color:rgba(98,87,237,.4);transform:translateX(3px)}
.hr-claims li b{font-size:13.5px;color:var(--op-text);letter-spacing:-.01em}
.hr-claims li span{font-size:12.5px;line-height:1.5;color:var(--op-muted)}

/* Floating annotations beside the record window, the house pattern. */
.hr-note{position:absolute;z-index:4;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;
  padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 22px 50px -22px rgba(20,36,80,.55);backdrop-filter:blur(14px);color:#101d38;animation:hrFloat 5.5s ease-in-out infinite}
.hr-note i{grid-row:span 2;width:8px;height:8px;border-radius:50%;background:#6257ed;box-shadow:0 0 0 5px rgba(98,87,237,.16)}
.hr-note small{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6c7a95}
.hr-note b{font-size:13px;line-height:1.1}
.hr-note.n1{top:52px;left:-22px}
.hr-note.n2{bottom:44px;right:-18px;animation-delay:-2.6s}.hr-note.n2 i{background:#13a976;box-shadow:0 0 0 5px rgba(19,169,118,.16)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-note{background:rgba(13,29,55,.92);border-color:rgba(143,170,218,.22);color:#eef5ff}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-note small{color:#8fa0bd}
@media(max-width:1180px){.hr-note{display:none}}
@media(max-width:560px){
  .hr-ledger li{grid-template-columns:1fr auto;gap:3px 10px}
  .hr-ledger ol:before,.hr-ledger li:before{display:none}
  .hr-ledger .c{padding-left:0;grid-column:1 / -1}
  .hr-ledger .d{grid-column:1}.hr-ledger .s{grid-column:2}
  .hr-ledger li>em{grid-column:1 / -1;padding-left:0}}

/* ============================================================================
   ONE RECORD, READ ON ANY DATE  (owner 2026-09-14: "let it be the best section
   in the page"). The section proves its own claim: four radios pick a date and
   the SAME person's record is rendered as it stood then, the fourth date being
   in the future so the change exists without being in force.
   CSS-only, so no script and nothing for a CSP to block.
   ========================================================================= */
.hr-timemachine{position:relative}
.hr-tm-head{max-width:920px;margin:0 auto 40px;text-align:center}
.hr-tm-head .op-lead{margin-inline:auto}

.hr-tm{
  position:relative;
  padding:clamp(22px,2.8vw,40px);
  border:1px solid var(--hr-line);
  border-radius:32px;
  background:
    radial-gradient(80% 70% at 4% 0%,rgba(98,87,237,.12),transparent 60%),
    radial-gradient(70% 65% at 100% 100%,rgba(48,180,206,.11),transparent 62%),
    linear-gradient(150deg,#f9fbff,#eef3ff 52%,#f8f2ff);
  box-shadow:0 30px 80px rgba(46,67,122,.12),inset 0 1px 0 #fff;
}
.hr-tm-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---- the time spine ---- */
.hr-tm-spine{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:6px 0 26px}
.hr-tm-rail{position:absolute;left:8%;right:8%;top:19px;height:2px;border-radius:2px;background:linear-gradient(90deg,#2181ef,#08b7d0 46%,#8855f6 78%,#e35bd0);opacity:.28}
.hr-tm-spine label{position:relative;display:grid;justify-items:center;gap:4px;padding-top:30px;text-align:center;cursor:pointer}
.hr-tm-spine label i{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:var(--hr-card);border:2px solid #c3cee6;transition:.24s}
.hr-tm-spine label.is-future i{border-style:dashed}
.hr-tm-spine label b{font-size:12.5px;font-weight:900;color:var(--hr-ink);letter-spacing:-.01em}
.hr-tm-spine label small{font-size:10.5px;font-weight:750;color:var(--hr-muted);line-height:1.35}
.hr-tm-spine label:hover i{border-color:#8855f6}

#hr-tm-d1:checked~.hr-tm-spine label[for="hr-tm-d1"] i,
#hr-tm-d2:checked~.hr-tm-spine label[for="hr-tm-d2"] i,
#hr-tm-d3:checked~.hr-tm-spine label[for="hr-tm-d3"] i,
#hr-tm-d4:checked~.hr-tm-spine label[for="hr-tm-d4"] i{
  border-color:transparent;
  background:linear-gradient(135deg,#2181ef,#8855f6);
  box-shadow:0 0 0 6px rgba(98,87,237,.16);
  transform:translateX(-50%) scale(1.18);
}
#hr-tm-d1:focus-visible~.hr-tm-spine label[for="hr-tm-d1"] i,
#hr-tm-d2:focus-visible~.hr-tm-spine label[for="hr-tm-d2"] i,
#hr-tm-d3:focus-visible~.hr-tm-spine label[for="hr-tm-d3"] i,
#hr-tm-d4:focus-visible~.hr-tm-spine label[for="hr-tm-d4"] i{outline:2px solid #2181ef;outline-offset:3px}

/* ---- the record, one state per date, stacked so the panel never jumps ---- */
.hr-tm-stage{display:grid}
.hr-tm-state{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
#hr-tm-d1:checked~.hr-tm-stage .s1,
#hr-tm-d2:checked~.hr-tm-stage .s2,
#hr-tm-d3:checked~.hr-tm-stage .s3,
#hr-tm-d4:checked~.hr-tm-stage .s4{visibility:visible;opacity:1;transform:none}

.hr-tm-state{padding:clamp(18px,2vw,26px);border:1px solid var(--hr-line);border-radius:22px;background:var(--hr-card);box-shadow:0 16px 44px rgba(46,67,122,.08)}
.hr-tm-state>header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--hr-line)}
.hr-tm-who{display:flex;align-items:center;gap:11px;min-width:0;flex-wrap:wrap}
.hr-tm-who i{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,#2181ef,#8855f6);color:#fff;font-style:normal;font-size:12px;font-weight:900}
.hr-tm-who b{font-size:17px;letter-spacing:-.02em;color:var(--hr-ink)}
.hr-tm-who em{font-style:normal;font-size:11.5px;font-weight:750;color:var(--hr-muted)}
.hr-tm-pill{padding:7px 13px;border-radius:999px;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hr-tm-pill.is-current{background:rgba(16,185,129,.14);color:#047857}
.hr-tm-pill.is-history{background:rgba(120,140,175,.14);color:#5a6b86}
.hr-tm-pill.is-pending{background:rgba(251,191,36,.18);color:#92620a}

.hr-tm-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
.hr-tm-fields>div{min-width:0;padding:13px 14px;border-radius:14px;background:var(--hr-soft);border:1px solid var(--hr-line)}
.hr-tm-fields dt{font-size:9.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--hr-muted)}
.hr-tm-fields dd{margin:6px 0 0;font-size:14px;font-weight:800;color:var(--hr-ink);line-height:1.35}
.hr-tm-fields dd small{font-size:11px;font-weight:750;color:var(--hr-muted)}
.hr-tm-fields dd.is-empty{color:var(--hr-muted);font-weight:750}
.hr-tm-fields dd.is-on{color:#047857}
.hr-tm-fields dd.is-draft{color:#92620a}
.hr-tm-fields>div:has(dd.is-draft){border-style:dashed;border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.07)}

.hr-tm-delta{margin:16px 0 0;padding:14px 16px;border-radius:16px;background:var(--hr-soft);border:1px solid var(--hr-line);font-size:13.5px;line-height:1.7;color:var(--hr-copy)}
.hr-tm-delta b{color:var(--hr-ink)}
.hr-tm-delta span{display:block;margin-top:6px;font-size:11px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--hr-muted)}
.hr-tm-delta.is-future{background:rgba(251,191,36,.09);border-color:rgba(251,191,36,.34)}
.hr-tm-delta.is-future b{color:#92620a}

.hr-tm-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:18px;font-size:12.5px;font-weight:800;color:var(--hr-muted)}
.hr-tm-rule{display:flex;align-items:center;gap:9px;min-width:0}
.hr-tm-rule i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#2181ef,#8855f6)}
.hr-tm-count{white-space:nowrap}
.hr-tm-claims{margin-top:26px}

:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm{
  background:
    radial-gradient(80% 70% at 4% 0%,rgba(98,87,237,.18),transparent 60%),
    radial-gradient(70% 65% at 100% 100%,rgba(48,180,206,.13),transparent 62%),
    linear-gradient(150deg,rgba(20,37,72,.96),rgba(25,38,80,.94) 52%,rgba(44,30,90,.95));
  border-color:rgba(142,166,215,.30);
  box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-spine label i{border-color:rgba(142,166,215,.4)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-pill.is-current{background:rgba(16,185,129,.2);color:#6ee7b7}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-pill.is-history{background:rgba(142,166,215,.16);color:#c3cee6}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-pill.is-pending{background:rgba(251,191,36,.2);color:#fbbf24}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-fields dd.is-on{color:#6ee7b7}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-fields dd.is-draft,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .hr-tm-delta.is-future b{color:#fbbf24}

@media(max-width:900px){
  .hr-tm-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .hr-tm{padding:16px;border-radius:24px}
  .hr-tm-spine{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px;padding-bottom:18px}
  .hr-tm-rail{display:none}
  .hr-tm-fields{grid-template-columns:1fr}
  .hr-tm-state{padding:16px;border-radius:18px}
  .hr-tm-foot{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .hr-tm-state,.hr-tm-spine label i{transition:none!important}
}

/* ============================================================================
   THE JOB-THEATRE TAB RAIL SCROLLS  (owner 2026-09-14). The rail was
   flex-wrap:wrap, so tabs past the fold were reached by the rotation but never
   seen. It is now a single-line scroller that the console driver carries along.

   ⚠ NO scroll-behavior:smooth here. It silently swallowed every programmatic
   scroll in testing — `nav.scrollLeft = 150` read back 0, and scrollTo with
   behavior:'smooth' never moved either, while behavior:'instant' worked. The
   driver tweens the scroll itself with requestAnimationFrame instead, which
   does not depend on the browser honouring smooth scrolling.

   The hand and the arrow are flex items AFTER the nav, not an overlay, so no
   tab can slide underneath them (owner: "the text is above the hand").
   ========================================================================= */
.hr-theatre-rail{position:relative}
.hr-theatre-rail nav{
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.hr-theatre-rail nav::-webkit-scrollbar{display:none}
.hr-theatre-rail button{flex:0 0 auto}

/* the hand and arrow only exist while the rail actually overflows */
.hr-rail-hand-wrap,.hr-rail-next{display:none}
/* Owner 2026-09-14: "the empty space is too much, the tabs should show there
   too, stop close to the arrow". .hr-theatre-rail has gap:26px, so the hand's
   slot was costing 26 + 30 + 26 = 82px of room the tabs could have used. The
   negative margins cancel most of each gap; the nav is flex:1, so every pixel
   they give back widens the scroller and the tabs run right up to the arrow. */
/* Owner 2026-09-14, second pass: even at 8px gaps the hand still held a 30px
   SLOT, which was most of the remaining space. It is now absolutely positioned
   over the arrow, so it costs the layout NOTHING and the tabs run right up to
   the arrow. It sits slightly above the arrow's centre, reading as a hand about
   to press it, and it is pointer-events:none so the arrow stays clickable
   underneath. */
.is-railscroll .hr-rail-hand-wrap{
  display:inline-flex;
  align-items:center;
  position:absolute;
  right:22px;
  top:50%;
  margin:0;
  transform:translateY(-56%);
  z-index:3;
  pointer-events:none;
  transition:opacity .28s ease;
}
/* owner: the former colour was better */
.hr-rail-hand{width:30px;height:36px;color:#c6d4f2;animation:hrRailSwipe 2.9s cubic-bezier(.4,0,.2,1) infinite}

/* the arrow is a real control: it never disappears and it scrolls the rail */
.is-railscroll .hr-rail-next{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-left:-18px;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(142,166,215,.28);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#30b4ce;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,opacity .2s ease;
}
.is-railscroll .hr-rail-next:hover{background:rgba(48,180,206,.16);border-color:rgba(48,180,206,.5);transform:translateX(2px)}
.is-railscroll .hr-rail-next:focus-visible{outline:2px solid #30b4ce;outline-offset:2px}
.is-railscroll .hr-rail-next[disabled]{opacity:.35;cursor:default;transform:none}
.hr-rail-arrow{width:15px;height:15px}

@keyframes hrRailSwipe{
  0%      {transform:translateX(7px) rotate(7deg);opacity:0}
  16%     {opacity:1}
  58%     {transform:translateX(-9px) rotate(-5deg);opacity:1}
  78%,100%{transform:translateX(-13px) rotate(-5deg);opacity:0}
}

/* only the HAND gets out of the way once the reader has engaged; the arrow
   stays because it is functional */
.hr-theatre:hover .hr-rail-hand-wrap,
.hr-theatre:focus-within .hr-rail-hand-wrap{opacity:0}

@media(prefers-reduced-motion:reduce){
  .hr-rail-hand{animation:none!important}
}
/* ⚠ The -18px pulls above cancel the rail's 26px desktop gap. Narrower than
   this the rail uses a ~10px gap, where -18px made the hand overlap the last
   tab and the arrow overlap the hand (measured at 400px: hand.left 309 vs
   nav.right 317). The pull is desktop-only. */
@media(max-width:900px){
  .is-railscroll .hr-rail-next{margin-left:0}
  .is-railscroll .hr-rail-hand-wrap{right:20px}
}
@media(max-width:680px){
  .hr-rail-hand{width:25px;height:30px}
  .is-railscroll .hr-rail-next{width:28px;height:28px}
  /* At 400px the "Now showing …" label was taking 191px of a 355px rail and
     the tab scroller was left with 49px, which is unusable. The label gets its
     own row so the tabs, hand and arrow share the next one. */
  .hr-theatre-now{flex:1 1 100%}
  .hr-theatre-rail nav{flex:1 1 0%;min-width:0}
}

/* ============================================================================
   MOBILE PASS (owner 2026-09-14: "make the page mobile friendly to render well
   in mobile, everything on the page").

   Audited at 400px before changing anything. What was already FINE and is left
   alone: no horizontal page scroll (document 385px in a 400px viewport); both
   wide tables (.hr-conn-table, .hr-vs-table) already sit in working scrollers;
   all 17 product-window tab strips are already scrollable.

   What was actually wrong, measured:
   1. Reader prose rendered at 12.5-13px (median 13). Small for a phone.
   2. 27 genuinely tappable controls were under 40px tall, the smallest 28px.
   The miniature .hr-app product windows and the SVG scenes keep their own
   scale deliberately: they are scale models, small on the desktop too, and
   blowing their type up would break the illusion they exist to create.
   ========================================================================= */
@media(max-width:680px){
  /* 1 · the copy a reader is meant to read. Excludes the product windows and
        anything inside an SVG scene, which carry their own scale. */
  .op-hr-page p:not(:is(.hr-app *)):not(:is(svg *)),
  .op-hr-page li:not(:is(.hr-app *)):not(:is(svg *)){font-size:15px;line-height:1.72}
  .op-hr-page .op-lead:not(:is(.hr-app *)){font-size:16px;line-height:1.68}
  .op-hr-page .hr-claims li span,
  .op-hr-page .hr-show-list li span,
  .op-hr-page .hr-tm-delta,
  .op-hr-page .hr-ev-because{font-size:14px;line-height:1.68}
  .op-hr-page .hr-surface-tag{font-size:11px}

  /* 2 · tappable controls. 44px is the usual touch minimum; the tab rails get
        40px so a row of them still fits a phone. */
  .op-hr-page .op-btn{min-height:46px}
  .op-hr-page .hr-theatre-rail nav button,
  .op-hr-page .hr-console-bar nav button{min-height:40px;padding-block:9px}
  .op-hr-page .op-faq-q{min-height:52px}
  .is-railscroll .hr-rail-next{width:38px;height:38px}
  .op-hr-page .hr-tm-spine label{min-height:52px}
  .op-hr-page .hr-gate-switch label,
  .op-hr-page .hr-cap-switch label{min-height:38px;display:flex;align-items:center}

  /* 3 · the decorative halo was the one element spilling past the viewport
        (404px in a 400px window) with no clipping ancestor. */
  .op-hr-page .hr-orbit-halo{max-width:100%}
}

/* ----------------------------------------------------------------------------
   Owner 2026-09-14: "in mobile let it show all buttons, no scroll bar."
   An earlier @media(max-width:900px) rule turned .hr-console-bar nav into
   `flex-wrap:nowrap; overflow:auto`, which on a phone meant a native scrollbar
   across the tab strip and tabs you could not see. On a phone there is no
   reason to scroll a tab strip: wrap it and show every tab.

   The theatre rail wraps for the same reason, and its hand and arrow disappear
   on their own — the driver only adds .is-railscroll when the rail genuinely
   overflows, and a wrapped rail does not.
   -------------------------------------------------------------------------- */
@media(max-width:680px){
  .op-hr-page .hr-console-bar nav,
  .op-hr-page .hr-theatre-rail nav{
    flex:1 1 100%;
    width:100%;
    min-width:0;
    flex-wrap:wrap;
    overflow:visible;
    padding-right:0;
  }
  .op-hr-page .hr-console-bar nav button,
  .op-hr-page .hr-theatre-rail nav button{white-space:nowrap;flex:0 1 auto}
  /* nothing is hidden any more, so nothing should advertise a swipe */
  .op-hr-page .hr-rail-hand-wrap,
  .op-hr-page .hr-rail-next{display:none!important}
}

/* ----------------------------------------------------------------------------
   Owner 2026-09-14: "they are extending out of the card, tabs."
   `.hr-app-tab` was `flex:1 1 0; min-width:0`, so the tabs in a product window
   shrank to an equal share of the strip and their labels wrapped over the
   number badges and past the card edge — "Build by hand" stacked onto three
   lines, "Inference" and "4" collided, "Descriptions" ran off the card.
   The strip already had overflow-x:auto, but a shrinking flex item never
   overflows, so it could never scroll: it just squashed.
   Each tab now keeps its own width, and the strip scrolls (desktop) or wraps
   (phone, where the owner asked for every button visible and no scrollbar).
   -------------------------------------------------------------------------- */
.hr-app-tabs{flex-wrap:nowrap}
.hr-app-tab{flex:0 0 auto;min-width:max-content;white-space:nowrap}
.hr-app-tabs::-webkit-scrollbar{display:none}

@media(max-width:680px){
  .hr-app-tabs{flex-wrap:wrap;overflow:visible}
  .hr-app-tab{flex:0 1 auto;min-width:0}
}