/* Open challenge invitation (public pages). Self-contained: no dependency on the HR Lab workspace styles. */
.hrl-open{--o1:var(--ex-blue, #0b49a1);--o2:var(--ex-blue, #0b49a1);box-sizing:border-box;margin:28px 0;border-radius:var(--ex-r-card, 4px);font-family:inherit;color:#14233f}
.hrl-open *{box-sizing:border-box}
.hrl-open-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:32px;background:linear-gradient(135deg,var(--ex-tint, #eef3fb),var(--ex-tint, #eef3fb) 60%,#fff8f0);border:1px solid var(--ex-tint, #eef3fb);box-shadow:0 30px 50px -36px color-mix(in srgb, var(--ex-blue, var(--ex-blue, #0b49a1)) 55%, transparent)}
.hrl-open-eyebrow{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--ex-tint, #eef3fb);color:var(--ex-blue-d, #082f6b);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hrl-open-card h2{margin:12px 0 6px !important;font-size:30px !important;line-height:1.15 !important;color:#14233f !important}
.hrl-open-lead{margin:0 0 14px !important;font-size:17px;color:var(--ex-muted, #5a6a88)}
.hrl-open-what{margin:0 0 14px;padding:12px 16px;border-radius:var(--ex-r-card, 4px);background:#fff;border:1px solid var(--ex-tint, #eef3fb)}.hrl-open-what b{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ex-muted, #5a6a88)}
.hrl-open-what ul{margin:0;padding-left:18px}.hrl-open-what li{margin:2px 0;font-weight:700}
.hrl-open-steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:s;display:grid;gap:8px}
.hrl-open-steps li{counter-increment:s;display:flex;gap:10px;align-items:center;font-size:16px;color:var(--ex-text, #34425f)}
.hrl-open-steps li::before{content:counter(s);display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--o1),var(--o2));color:#fff;font-weight:800;font-size:13px}
.hrl-open-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hrl-open-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:99px;background:linear-gradient(135deg,var(--o1),var(--o2));color:#fff !important;font-weight:800;font-size:17px;text-decoration:none !important;box-shadow:0 16px 26px -14px var(--ex-blue, #0b49a1);transition:transform .15s}.hrl-open-btn:hover{transform:translateY(-2px)}
.hrl-open-code{display:inline-flex;flex-direction:column;padding:6px 14px;border-radius:var(--ex-r-card, 4px);background:#fff;border:2px dashed var(--ex-line, #d9e1ee)}.hrl-open-code small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ex-muted, #5a6a88);font-weight:800}.hrl-open-code b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;color:var(--ex-blue-d, #082f6b);letter-spacing:.04em}
.hrl-open-left{margin:12px 0 0 !important;font-weight:800;color:#b45309}
.hrl-open-closed{margin:0 !important;padding:12px 16px;border-radius:var(--ex-r-card, 4px);background:#fff1f0;color:#b42318;font-weight:700}
.hrl-open-qr{display:grid;gap:8px;justify-items:center;text-align:center}.hrl-open-qr-box{padding:14px;border-radius:var(--ex-r-card, 4px);background:#fff;border:1px solid var(--ex-tint, #eef3fb);box-shadow:0 20px 30px -24px color-mix(in srgb, var(--ex-blue, var(--ex-blue, #0b49a1)) 60%, transparent);min-width:204px;min-height:204px}.hrl-open-qr-box svg{display:block;width:176px;height:176px}
.hrl-open-qr small{font-weight:700;color:var(--ex-muted, #5a6a88)}
/* compact strip, for the end of a page */
.hrl-open-strip{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;padding:18px 22px;background:linear-gradient(120deg,var(--ex-tint, #eef3fb),var(--ex-tint, #eef3fb));border:1px solid var(--ex-tint, #eef3fb)}
.hrl-open-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:var(--ex-r-card, 4px);font-size:24px;background:linear-gradient(135deg,var(--o1),var(--o2))}
.hrl-open-copy{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0}.hrl-open-copy strong{font-size:18px;color:#14233f}.hrl-open-copy span{font-size:14.5px;color:var(--ex-muted, #5a6a88)}
.hrl-open-strip .hrl-open-btn{padding:11px 22px;font-size:15.5px}
@media (max-width:760px){.hrl-open-card{grid-template-columns:1fr;padding:22px}.hrl-open-qr{display:none}.hrl-open-card h2{font-size:25px !important}}
@media (prefers-reduced-motion:reduce){.hrl-open-btn{transition:none}}

/* popup (a native dialog opened from a card) */
.hrl-open-dialog{width:min(760px,94vw);max-width:none;max-height:92vh;overflow:auto;margin:auto;padding:30px;border:1px solid var(--ex-tint, #eef3fb);box-shadow:0 40px 80px -30px color-mix(in srgb, var(--ex-navy, var(--ex-navy, #0b1f44)) 60%, transparent)}
.hrl-open-dialog:not([open]){display:none}
.hrl-open-dialog[open]{display:grid}
.hrl-open-dialog::backdrop{background:color-mix(in srgb, var(--ex-navy, var(--ex-navy, #0b1f44)) 55%, transparent);backdrop-filter:blur(3px)}
.hrl-open-dialog h2{font-size:26px !important;padding-right:34px}
.hrl-open-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:var(--ex-text, #34425f);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 14px -8px color-mix(in srgb, var(--ex-navy, var(--ex-navy, #0b1f44)) 50%, transparent)}.hrl-open-x:hover{background:var(--ex-tint, #eef3fb)}
@media (max-width:760px){.hrl-open-dialog{padding:22px}.hrl-open-dialog[open]{display:block}}
/* popup on small screens: the join button comes straight after the intro, the longer explanation follows */
@media (max-width:760px){
  .hrl-open-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px 18px}
  .hrl-open-dialog .hrl-open-main{display:flex;flex-direction:column}
  .hrl-open-dialog .hrl-open-actions{order:2;margin:2px 0 16px}.hrl-open-dialog .hrl-open-left{order:2}
  .hrl-open-dialog .hrl-open-what,.hrl-open-dialog .hrl-open-steps{order:3}
  .hrl-open-dialog .hrl-open-btn{width:100%;justify-content:center}
  .hrl-open-dialog .hrl-open-code{flex:1 1 100%;align-items:center}
}
@media (max-height:520px){
  .hrl-open-dialog{max-height:calc(100dvh - 16px);padding:18px 22px}
  .hrl-open-dialog .hrl-open-steps,.hrl-open-dialog .hrl-open-what{display:none}
  .hrl-open-dialog h2{font-size:21px !important;margin:8px 0 4px !important}.hrl-open-dialog .hrl-open-lead{margin-bottom:10px !important}
}
.hrl-open-dialog .hrl-open-eyebrow{align-self:flex-start}