/* HRThink 2.0.0: the executive look.
   White pages, executive blue, deep navy text and one maroon accent (buttons and thin rules). Serif headlines, sans body.
   Loaded after main.css and bright.css: it re-themes everything they style, then adds the ex-* components used by the new pages. */

/* All colours, corners, shadows and fonts come from tokens.css (var(--ex-...)). Change them there, or in Appearance > Customize > HRThink design. */
html { scroll-padding-top: 96px; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.62; color: var(--ex-text); background: #fff; background-image: none; }
h1, h2, h3, h4 { color: var(--ex-navy); }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; line-height: 1.12; }
h3, h4 { font-family: var(--serif); font-weight: 650; line-height: 1.2; }
a { color: var(--ex-blue); }
a:hover { color: var(--ex-blue-d); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ex-blue) 40%, transparent); }
.hx-mark { background-image: none; animation: none; display: inline; color: var(--ex-maroon); padding: 0; background-size: 0; }
.hx-mark.violet, .hx-mark.rose, .hx-mark.pink, .hx-mark.teal, .hx-mark.sky, .hx-mark.gold { color: var(--ex-maroon); }

/* ---------- buttons ---------- */
.ex-btn, .hx-btn, .hx-cta, .hrt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 3px; border: 2px solid transparent; font: 600 .95rem/1.2 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.ex-btn .hrt-icon, .hx-btn .hrt-icon { width: 17px; height: 17px; }
.ex-btn:hover, .hx-btn:hover, .hx-cta:hover { transform: translateY(-1px); }
.ex-btn-maroon, .hx-btn-primary, .hx-cta, .hrt-btn-primary, .hx-btn-gold { background: var(--ex-maroon); border-color: var(--ex-maroon); color: #fff; box-shadow: none; }
.ex-btn-maroon:hover, .hx-btn-primary:hover, .hx-cta:hover, .hrt-btn-primary:hover, .hx-btn-gold:hover { background: var(--ex-maroon-d); border-color: var(--ex-maroon-d); color: #fff; box-shadow: none; }
.ex-btn-blue { background: var(--ex-blue); border-color: var(--ex-blue); color: #fff; }
.ex-btn-blue:hover { background: var(--ex-blue-d); border-color: var(--ex-blue-d); color: #fff; }
.ex-btn-line, .hx-btn-outline, .hrt-btn-outline { background: #fff; border-color: var(--ex-blue); color: var(--ex-blue); }
.ex-btn-line:hover, .hx-btn-outline:hover, .hrt-btn-outline:hover { background: var(--ex-blue); color: #fff; border-color: var(--ex-blue); }
.ex-btn-white, .hx-btn-light, .hrt-btn-light { background: #fff; border-color: #fff; color: var(--ex-blue-d); box-shadow: none; }
.ex-btn-white:hover, .hx-btn-light:hover, .hrt-btn-light:hover { background: var(--ex-soft); border-color: var(--ex-soft); color: var(--ex-blue-d); }
.ex-btn-ghost, .hx-btn-ghost-light, .hrt-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.ex-btn-ghost:hover, .hx-btn-ghost-light:hover, .hrt-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.hx-btn-gold .hx-code { background: rgba(255, 255, 255, .18); }
.ex-link, .hx-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--ex-blue); }
.ex-link .hrt-icon { width: 16px; height: 16px; transition: transform .15s; } .ex-link:hover .hrt-icon { transform: translateX(3px); }

/* ---------- header ---------- */
.hx-announce { display: none; }
.hx-header { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--ex-line); box-shadow: 0 1px 0 color-mix(in srgb, var(--ex-navy) 2%, transparent); }
.hx-header-inner { min-height: 74px; gap: 30px; }
.hx-brand .hrt-logo { height: 34px; }
.hx-link, .hx-caret { color: var(--ex-navy); font: 500 .98rem/1 var(--sans); }
.hx-link { padding: 12px 12px; border-radius: 0; position: relative; }
.hx-item.has-panel .hx-link { padding-right: 2px; }
.hx-link:hover, .hx-item:hover > .hx-link, .hx-caret:hover { background: transparent; color: var(--ex-maroon); }
.hx-item.is-current > .hx-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--ex-maroon); }
.hx-item.is-current > .hx-link { color: var(--ex-maroon); }
.hx-caret { color: #6a7691; border-radius: 0; }
.hx-panel { border-radius: 4px; border: 1px solid var(--ex-line); box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--ex-navy) 35%, transparent); padding: 16px; width: min(640px, 94vw); }
.hx-panel-head { color: var(--ex-maroon); font: 600 .72rem/1 var(--sans); letter-spacing: .14em; margin-bottom: 12px; }
.hx-pitem { border-radius: 3px; padding: 11px; }
.hx-pitem:hover { background: var(--ex-soft); transform: none; }
.hx-ptile { border-radius: 3px; width: 40px; height: 40px; background: var(--t); color: var(--c); border: 1px solid var(--ex-line); }
.hx-pitem:hover .hx-ptile { background: #fff; box-shadow: none; }
.hx-ptext strong { font: 600 .98rem/1.25 var(--sans); color: var(--ex-navy); } .hx-ptext small { color: var(--ex-muted); font-size: .88rem; }
.hx-panel-foot { border-top: 1px solid var(--ex-line); font-weight: 600; }
.hx-login { border-radius: 3px; color: var(--ex-navy); font-weight: 500; } .hx-login:hover { background: var(--ex-soft); color: var(--ex-maroon); }
.hx-cta { padding: 10px 20px; }
.hx-avatar { background: var(--ex-blue); color: #fff; } .hx-acct-btn { border-radius: 3px; }
.hx-acct-menu { border-radius: 4px; border: 1px solid var(--ex-line); }

/* ---------- footer ---------- */
.ex-foot { background: var(--ex-navy); color: #b9c7e6; padding: 56px 0 0; margin-top: 0; }
.ex-foot a { color: #d4def2; } .ex-foot a:hover { color: #fff; }
.ex-foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr; gap: 34px; padding-bottom: 40px; }
.ex-foot h2 { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.ex-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.ex-foot-about p { margin: 14px 0 0; max-width: 34ch; font-size: .95rem; }
.ex-foot-about .hrt-logo { height: 34px; }
.ex-foot-verify { display: flex; gap: 8px; margin-top: 4px; }
.ex-foot-verify input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 3px; border: 1px solid #2b4170; background: #0e2752; color: #fff; font: inherit; }
.ex-foot-verify button { border: 0; background: var(--ex-maroon); color: #fff; border-radius: 3px; width: 44px; cursor: pointer; display: grid; place-items: center; }
.ex-foot-note { font-size: .86rem; margin: 10px 0 0; }
.ex-foot-seller { border-top: 1px solid #243a66; padding: 22px 0; font-size: .86rem; display: flex; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; color: #9db0d1; }
.ex-foot-seller span { max-width: 74ch; }
.ex-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- shared layout ---------- */
.ex-wrap { width: min(var(--ex-wrap, 1320px), 100% - 2 * var(--ex-gutter, 24px)); margin-inline: auto; }
.ex-sec { padding: clamp(48px, 6vw, 76px) 0; }
.ex-soft { background: var(--ex-soft); border-block: 1px solid var(--ex-line); }
.ex-eyebrow { margin: 0 0 12px; font: 600 .74rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ex-maroon); }
.ex-eyebrow-light { color: #f0a6b2; }
.ex-h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin: 0; }
.ex-sub { max-width: 62ch; margin: 12px 0 0; font-size: 1.06rem; }
.ex-hasline { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.ex-muted { color: var(--ex-muted); }
.ex-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.ex-art { display: block; width: 100%; height: 100%; }

/* hero (home) */
/* Full-bleed hero: the picture runs to the screen edge, the text stays on the page grid. Capped at 1920px on very wide screens. */
.ex-hero { display: grid; grid-template-columns: minmax(var(--ex-gutter, 24px), calc((100% - var(--ex-wrap, 1320px)) / 2)) minmax(0, 609px) minmax(0, 1fr); position: relative; overflow: hidden; background: var(--ex-surface); max-width: 1920px; margin-inline: auto; }
.ex-hero > .ex-hero-copy { grid-column: 2; }
.ex-hero > .ex-visual { grid-column: 3; }
.ex-hero-copy { padding: clamp(44px, 6vw, 80px) 0 clamp(44px, 6vw, 80px); position: relative; z-index: 1; padding-right: 28px; }
.ex-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.018em; max-width: 14em; }
.ex-hero h1 em { font-style: normal; color: var(--ex-maroon); }
.ex-rule { width: 64px; height: 4px; background: var(--ex-maroon); margin: 22px 0; }
.ex-hero p.ex-lead { max-width: 48ch; font-size: 1.1rem; margin: 0; }
.ex-visual { position: relative; min-height: 340px; background: linear-gradient(135deg, #c6d7f2, var(--ex-blue-soft) 55%, #2f5aa3); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; }
.ex-visual .ex-art, .ex-visual .ex-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-edge { height: 6px; background: linear-gradient(90deg, #fff 30%, var(--ex-maroon) 30%); }
.ex-proof { background: var(--ex-soft); border-block: 1px solid var(--ex-line); }
.ex-proof-in { display: flex; flex-wrap: wrap; gap: 14px 44px; justify-content: space-between; align-items: center; padding: 22px 0; }
.ex-proof-who { font: 600 1rem var(--sans); color: var(--ex-navy); } .ex-proof-who small { display: block; font-weight: 400; font-size: .86rem; color: var(--ex-text); }
.ex-proof-n strong { display: block; font: 700 1.6rem var(--serif); color: var(--ex-blue); line-height: 1.1; } .ex-proof-n span { font-size: .84rem; line-height: 1.3; display: block; }

/* paths */
.ex-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.ex-path { padding: 32px; display: flex; flex-direction: column; gap: 12px; border-radius: 3px; min-width: 0; }
.ex-path h3 { font-size: 1.7rem; margin: 0; }
.ex-path ul { margin: 2px 0 8px; padding-left: 20px; display: grid; gap: 5px; }
.ex-path .ex-btn { align-self: flex-start; margin-top: auto; }
.ex-path-biz { background: var(--ex-blue); color: #e5edfb; } .ex-path-biz h3 { color: #fff; }
.ex-path-edu { background: #fff; border: 1px solid var(--ex-line); }

/* cards: tools */
.ex-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.ex-card { background: #fff; border: 1px solid var(--ex-line); border-top: 4px solid var(--ex-blue); padding: 24px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ex-card.is-m { border-top-color: var(--ex-maroon); }
.ex-card h3 { font-size: 1.28rem; margin: 0; } .ex-card h3 a { color: inherit; } .ex-card p { margin: 0; font-size: .98rem; }
.ex-card-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.ex-ask { font: 600 .88rem var(--sans); color: var(--ex-blue); }
.ex-thumb { height: 104px; border: 1px solid var(--ex-line); background: linear-gradient(135deg, var(--ex-soft), #dbe5f6); position: relative; overflow: hidden; margin-bottom: 6px; }
.ex-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-chip { display: inline-block; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 3px; background: var(--ex-soft); color: var(--ex-blue); border: 1px solid var(--ex-line); white-space: nowrap; }
.ex-chip-m { color: var(--ex-maroon); }

/* tiles */
.ex-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ex-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--ex-line); color: inherit; min-width: 0; transition: border-color .15s, transform .15s; }
.ex-tile:hover { border-color: var(--ex-blue); transform: translateY(-2px); color: inherit; }
.ex-tile .ex-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ex-soft); color: var(--ex-blue); border: 1px solid var(--ex-line); margin-bottom: 4px; }
.ex-tile .ex-ic .hrt-icon { width: 21px; height: 21px; }
.ex-tile h3 { font: 600 1.05rem var(--sans); margin: 0; } .ex-tile span { font-size: .88rem; }

/* sign-up band */
.ex-optin { background: var(--ex-blue-d); color: #d7e3fa; padding: 36px 0; }
.ex-optin-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; }
.ex-optin h3 { color: #fff; font-size: 1.6rem; margin: 0 0 6px; } .ex-optin p { margin: 0; }
.ex-optin form { display: flex; gap: 10px; flex-wrap: wrap; }
.ex-optin input[type=email], .ex-optin input[type=text] { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border: 0; border-radius: 3px; font: inherit; }
.ex-optin small { flex: 1 1 100%; color: #b9c9e8; }

/* lists */
.ex-list { margin-top: 20px; border-top: 1px solid var(--ex-line); }
.ex-li { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--ex-line); }
.ex-li b { display: block; font: 600 1.06rem var(--serif); color: var(--ex-navy); } .ex-li b a { color: inherit; } .ex-li small { display: block; color: var(--ex-text); font-size: .86rem; }

/* work with me */
.ex-work { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.ex-box { padding: 28px; border: 1px solid var(--ex-line); background: #fff; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ex-box h3 { margin: 0; font-size: 1.35rem; } .ex-box p { margin: 0 0 6px; }
.ex-box-dark { background: var(--ex-navy); border-color: var(--ex-navy); color: #cbd7ef; } .ex-box-dark h3 { color: #fff; }

/* insights */
.ex-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 24px; }
.ex-insight { border-top: 3px solid var(--ex-navy); padding-top: 14px; min-width: 0; }
.ex-insight small { color: var(--ex-maroon); font: 600 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ex-insight h3 { font-size: 1.15rem; margin: 6px 0; } .ex-insight h3 a { color: inherit; } .ex-insight p { margin: 0 0 8px; font-size: .95rem; }

/* inner page head */
.ex-crumb { border-bottom: 1px solid var(--ex-line); font-size: .84rem; } .ex-crumb .ex-wrap { padding: 14px 0; } .ex-crumb b { color: var(--ex-navy); font-weight: 600; } .ex-crumb a { color: var(--ex-text); }
.ex-pagehead { background: linear-gradient(180deg, #fff, var(--ex-soft)); border-bottom: 1px solid var(--ex-line); }
.ex-pagehead-in { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center; padding: 44px 0; }
.ex-pagehead h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .ex-pagehead p { margin: 14px 0 0; max-width: 58ch; font-size: 1.06rem; }
.ex-pagehead .ex-visual { min-height: 190px; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.ex-disc { font-size: .84rem; color: var(--ex-text); background: var(--ex-soft); border-top: 1px solid var(--ex-line); padding: 20px 0; }

/* educators: simulations + certificate */
.ex-sim { background: #fff; border: 1px solid var(--ex-line); border-top: 4px solid var(--ex-blue); padding: 24px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ex-sim .ex-n { font: 600 .7rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ex-maroon); }
.ex-sim h3 { margin: 0; font-size: 1.28rem; } .ex-sim p { margin: 0; font-size: .98rem; }
.ex-sim.is-soon { border-top-color: #9aa8c4; }
.ex-navyband { background: var(--ex-blue-d); color: #cfdcf5; padding: clamp(44px, 6vw, 70px) 0; }
.ex-navyband-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ex-navyband h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 12px; }
.ex-navyband ul { margin: 16px 0 22px; padding-left: 20px; display: grid; gap: 6px; }
.ex-cert { background: #fff; color: var(--ex-navy); border: 2px solid var(--ex-blue); padding: 30px 28px; text-align: center; position: relative; box-shadow: 0 34px 56px -30px rgba(0, 0, 0, .6); max-width: 470px; margin-inline: auto; width: 100%; }
.ex-cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--ex-line); pointer-events: none; }
.ex-cert .org { font: 600 .72rem var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ex-maroon); margin: 0; }
.ex-cert h3 { font-size: 1.65rem; margin: 6px 0 12px; }
.ex-cert .nm { font: italic 600 1.6rem var(--serif); color: var(--ex-blue); border-bottom: 1px solid var(--ex-line); display: inline-block; padding: 0 24px 2px; margin: 6px 0 14px; }
.ex-cert .rows { display: grid; gap: 7px; text-align: left; font-size: .8rem; margin-top: 8px; }
.ex-cert .rows div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--ex-line); padding-bottom: 5px; } .ex-cert .rows b { color: var(--ex-blue); }
.ex-cert .tag { position: absolute; top: 12px; right: 12px; font: 600 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; background: var(--ex-navy); color: #fff; padding: 3px 8px; }
.ex-cert .ver { font-size: .72rem; margin: 14px 0 0; color: #6a7691; }

/* request and sample forms */
.ex-form-grid { display: grid; grid-template-columns: 1.25fr .75fr; border: 1px solid var(--ex-line); background: #fff; margin-block: 32px; }
.ex-form { padding: clamp(22px, 3vw, 34px); display: grid; gap: 15px; align-content: start; }
.ex-form h2 { font-size: 1.6rem; margin: 0; }
.ex-field { display: grid; gap: 6px; font: 600 .84rem var(--sans); color: var(--ex-navy); }
.ex-field input[type=text], .ex-field input[type=email], .ex-field select, .ex-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--ex-line); border-radius: 3px; background: #fff; font: 400 .95rem var(--sans); color: var(--ex-navy); }
.ex-field input:focus, .ex-field select:focus, .ex-field textarea:focus { border-color: var(--ex-blue); outline: 2px solid color-mix(in srgb, var(--ex-blue) 20%, transparent); }
.ex-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ex-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-pills label { position: relative; cursor: pointer; }
.ex-pills input { position: absolute; opacity: 0; inset: 0; }
.ex-pills span { display: inline-block; padding: 7px 14px; border: 1px solid var(--ex-line); background: #fff; font: 500 .86rem var(--sans); color: var(--ex-navy); border-radius: 3px; transition: background .15s, color .15s, border-color .15s; }
.ex-pills input:checked + span { background: var(--ex-blue); border-color: var(--ex-blue); color: #fff; }
.ex-pills input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--ex-blue) 40%, transparent); outline-offset: 2px; }
.ex-check { display: flex; gap: 10px; align-items: flex-start; font: 400 .88rem var(--sans); color: var(--ex-text); }
.ex-check input { margin-top: 4px; }
.ex-hp { position: absolute !important; left: -9999px; height: 0; overflow: hidden; }
.ex-next { background: var(--ex-soft); border-left: 1px solid var(--ex-line); padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; align-content: start; }
.ex-next h3 { font-size: 1.2rem; margin: 0; } .ex-next ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: .95rem; } .ex-next small { color: var(--ex-text); }
.ex-notice { padding: 16px 18px; border-left: 4px solid var(--ex-blue); background: var(--ex-soft); margin-bottom: 4px; font-size: .98rem; }
.ex-notice.is-ok { border-color: #1f7a4d; } .ex-notice.is-err { border-color: var(--ex-maroon); }
.ex-notice strong { color: var(--ex-navy); }

/* tool page */
.ex-tool { display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(24px, 4vw, 52px); padding: 40px 0 20px; align-items: start; }
.ex-tool h2 { font-size: 1.5rem; margin: 30px 0 10px; }
.ex-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-ticks li { display: flex; gap: 11px; align-items: flex-start; } .ex-ticks .hrt-icon { color: var(--ex-maroon); margin-top: 3px; width: 18px; height: 18px; }
.ex-side { border: 1px solid var(--ex-line); background: #fff; padding: 24px; position: sticky; top: 100px; display: grid; gap: 12px; }
.ex-side h2, .ex-side h3 { margin: 0; font-size: 1.2rem; } .ex-side p { margin: 0; font-size: .94rem; }
.ex-table { width: 100%; border-collapse: collapse; font-size: .94rem; border: 1px solid var(--ex-line); }
.ex-table th, .ex-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ex-line); vertical-align: top; }
.ex-table th { background: var(--ex-soft); font: 600 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ex-navy); }
.ex-scroll { overflow-x: auto; }
.ex-dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ex-dl { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--ex-line); padding: 16px 18px; background: #fff; flex-wrap: wrap; } .ex-dl small { display: block; color: var(--ex-text); }

/* legacy components, re-themed */
.hx-sec { padding: clamp(48px, 6vw, 76px) 0; }
.hx-band { background: var(--ex-soft); border-block: 1px solid var(--ex-line); }
.hx-head h2, .hx-try-copy h2, .hx-navy h2, .hx-resume h2, .hx-who h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.hx-eyebrow { color: var(--ex-maroon); font: 600 .76rem/1 var(--sans); letter-spacing: .15em; }
.hx-eyebrow::before { background: var(--ex-maroon); height: 2px; }
.hx-eyebrow-light, .hx-eyebrow-gold { color: #f0a6b2; }
.hx-sub, .hx-lead { color: var(--ex-text); }
.hx-tile { border-radius: 3px; background: #fff; border: 1px solid var(--ex-line); border-top: 4px solid var(--c, var(--ex-blue)); box-shadow: none; }
.hx-tile:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -24px color-mix(in srgb, var(--ex-navy) 40%, transparent); }
.hx-tile-icon { border-radius: 3px; background: var(--t); color: var(--c); box-shadow: none; border: 1px solid var(--ex-line); }
.hx-tile-kicker { color: var(--ex-maroon); font-family: var(--sans); letter-spacing: .13em; }
.hx-tile h3 { font-family: var(--serif); }
.hx-tag { border-radius: 3px; background: #fff; border: 1px solid var(--ex-line); color: var(--ex-blue); }
.hx-tag.is-primary { background: var(--ex-blue); color: #fff; border-color: var(--ex-blue); }
.hx-go i { border-radius: 3px; box-shadow: none; border: 1px solid var(--ex-line); }
.hx-callout, .hrt-card, .hx-formcard, .hx-panelcard, .hx-tier, .hx-verifycard { border-radius: 4px; box-shadow: none; border: 1px solid var(--ex-line); background: #fff; }
.hrt-pagehero { background: linear-gradient(180deg, #fff, var(--ex-soft)); border-bottom: 1px solid var(--ex-line); }
.hrt-pagehero h1 { font-family: var(--serif); }
.hrt-eyebrow { color: var(--ex-maroon); font-family: var(--sans); letter-spacing: .15em; }
.hx-navy, .hx-cta-band { background: var(--ex-blue-d); background-image: none; }
.hx-navy::before { display: none; }
.hx-proof { border-radius: 3px; box-shadow: none; border: 1px solid var(--ex-line); }
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea { border-radius: 3px; }
.hrt-strip { background: var(--ex-soft); border-block: 1px solid var(--ex-line); }

@media (max-width: 1080px) { .ex-foot-grid { grid-template-columns: 1fr 1fr 1fr; } .ex-foot-about, .ex-foot-verify-col { grid-column: 1 / -1; } .ex-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-cards, .ex-insights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .ex-pagehead-in, .ex-paths, .ex-work, .ex-optin-in, .ex-navyband-in, .ex-form-grid, .ex-tool { grid-template-columns: 1fr; } .ex-visual, .ex-pagehead .ex-visual { clip-path: none; min-height: 220px; } .ex-hero { grid-template-columns: 1fr; } .ex-hero > .ex-hero-copy, .ex-hero > .ex-visual { grid-column: 1; } .ex-hero-copy { padding-inline: 20px; } .ex-next { border-left: 0; border-top: 1px solid var(--ex-line); } .ex-side { position: static; } .ex-cards, .ex-insights { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ex-two { grid-template-columns: 1fr; } .ex-tiles { grid-template-columns: 1fr 1fr; } .ex-li { grid-template-columns: 1fr; gap: 8px; } .ex-foot-grid { grid-template-columns: 1fr 1fr; } .ex-acts .ex-btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .ex-btn, .ex-tile, .hx-tile { transition: none; } .ex-btn:hover, .ex-tile:hover { transform: none; } }

/* 2.0.0 refinements */
.ex-sim .ex-chip, .ex-card .ex-chip { white-space: normal; line-height: 1.35; }
.ex-card.ex-suite { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr auto; gap: 8px 28px; align-items: center; }
.ex-card.ex-suite .ex-thumb { margin: 0; height: 120px; grid-row: span 4; }
.ex-card.ex-suite h3, .ex-card.ex-suite p, .ex-card.ex-suite .ex-ask, .ex-card.ex-suite .ex-chip { grid-column: 2; justify-self: start; }
.ex-card.ex-suite .ex-card-row { grid-column: 3; grid-row: 1 / span 4; margin: 0; padding: 0; }
@media (max-width: 900px) { .ex-card.ex-suite { grid-template-columns: 1fr; } .ex-card.ex-suite .ex-thumb { grid-row: auto; } .ex-card.ex-suite h3, .ex-card.ex-suite p, .ex-card.ex-suite .ex-ask, .ex-card.ex-suite .ex-chip, .ex-card.ex-suite .ex-card-row { grid-column: 1; grid-row: auto; } }
.hx-hero { background: linear-gradient(180deg, #fff, var(--ex-soft)); }
.hx-hero::before, .hx-blob { display: none; }
.hx-ring, .hx-ui-score .hx-ring { border-color: var(--ex-blue); }
/* leftover violet and cyan accents, brought into the palette */
.hrt-about-main h2::after { background: var(--ex-maroon); height: 3px; width: 44px; border-radius: 0; }
.hrt-pagehero { background: linear-gradient(180deg, #fff, var(--ex-soft)) !important; }
.hx-avatar, .hx-jhero, .hrt-pillar-icon { background: var(--ex-blue); }
.hx-pv-line polyline { stroke: var(--ex-blue); }
.hx-try-q { background: var(--ex-soft); border-radius: 3px; }
.av.a1, .av.a2, .av.a3 { background: var(--ex-blue); }
.hx-arch-violet { background: var(--ex-blue); box-shadow: none; }
.hx-ring { background: conic-gradient(var(--ex-blue) 0 87%, #e3eaf5 87% 100%); }
.hrt-theme, .hrt-journal { border-radius: 4px; }

/* menu panels never push the page wider than the screen */
body { overflow-x: clip; }
@media (min-width: 901px) { .hx-menu > .hx-item:nth-last-child(-n+2) .hx-panel { left: auto; right: -12px; } }

/* ===== executive skin for plugin screens (2.0.0): same corners, shadows, type and buttons as the rest of the site ===== */
body .hrlab-app-shell, body .hrlab-ml { --hrlab-radius: 6px; --hrlab-ui-radius: 6px; --hrlab-ui-radius-small: 3px; --ml-radius: 6px; --hrlab-shadow: 0 1px 2px color-mix(in srgb, var(--ex-navy) 6%, transparent); --hrlab-card-shadow: 0 1px 2px color-mix(in srgb, var(--ex-navy) 6%, transparent); --hrlab-card-shadow-hover: 0 14px 28px -20px color-mix(in srgb, var(--ex-navy) 35%, transparent); --hrlab-ui-shadow: 0 1px 2px color-mix(in srgb, var(--ex-navy) 6%, transparent); --hrlab-card-border: var(--ex-line); --hrlab-line: var(--ex-line); --hrlab-ink: var(--ex-navy); --hrlab-navy: var(--ex-navy); --hrlab-navy-2: var(--ex-blue-d); --hrlab-blue: var(--ex-blue); --hrlab-blue-2: var(--ex-blue); --hrlab-indigo: var(--ex-blue); --hrlab-violet: var(--ex-blue); --hrlab-canvas: #ffffff; --hl-font: var(--sans); --hrlab-ui-font-family: var(--sans); --ml-accent: var(--ex-blue); --ml-navy: var(--ex-navy); font-family: var(--sans); }
body .hrlab-app-shell *:not(svg):not(path):not(i) { font-family: var(--sans); }
body .hrlab-app-shell h1, body .hrlab-app-shell h2, body .hrlab-app-shell h3, .hrl-hero h2, .hrp-banner h1, .hrp-banner h2, .hd-sec-head h2, .hrlab-app-topbar-title strong { font-family: var(--serif); letter-spacing: -.01em; }
.hrthink-auth-main,
.hrp-banner,
.hrp-card,
.hrlab-app-sidebar,
.hrlab-app-username,
.hrlab-app-topbar,
.hrl-hero,
.hrl-level,
.hrl-cta,
.hrl-stat,
.hd-sec,
.hd-empty,
.hrl-pl,
.hrl-game,
.hd-course,
.hrt-card,
.hrt-tool,
.hrthink-account-tile,
.srt-careers-head,
.srt-portal-entry,
.srt-empty,
.srt-modal-card,
.hrlab-board-top,
.hrlab-board-stat,
.hrlab-leaderboard-wait,
.hrlab-public-privacy,
.srt-staff-sidebar,
.srt-stat-card,
.srt-staff-panel,
.srt-dashboard-empty,
.srt-workflow-blue,
.srt-workflow-cyan,
.srt-workflow-violet,
.srt-workflow-amber,
.srt-workflow-orange,
.srt-workflow-green,
.srt-workflow-red,
.srt-workflow-slate,
.srt-snapshot-card,
.hrlab-alpha-panel,
.hrlab-editor-list,
.hrlab-empty-mini,
.hrlab-config-form,
.hrlab-ui-card,
.hrlab-card,
.hrlab-editor-panel,
.hrlab-monitor-panel,
.hrlab-results-panel,
.hrp-hero,
.hrl-card,
.hd-asg,
.hrthink-account-card,
.hrthink-auth-card,
.srt-card,
.hrlab-tabs-card { border-radius: 6px !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--ex-navy) 6%, transparent) !important; }
.hrthink-btn,
.hrlab-header-chip,
.hrl-xp,
.hrl-ghost,
.hrl-see-all,
.hrl-game-go,
.hrlab-header-action,
.hd-mod,
.hd-ghost,
.hd-btn,
.hrt-pill,
.hrt-btn,
.srt-modal-secondary,
.srt-modal-primary,
.srt-role-chip,
.srt-snapshot-period,
.hrlab-tab,
.hrlab-primary-dark,
.hrlab-secondary-btn,
.hrlab-primary,
.hrlab-secondary-link,
.hrlab-link-button,
.hrthink-account-link,
.hrp-btn,
.hrp-pill,
.hd-chip,
.hrlab-pill,
.hrlab-tile-pill,
.srt-btn,
.hrlab-release-selected,
.hrlab-release-all { border-radius: 3px !important; box-shadow: none !important; }
.hrl-hero, .hrp-banner { background-image: none !important; background-color: var(--ex-navy) !important; }
.hrl-hero::before, .hrl-hero::after, .hrp-banner::before, .hrp-banner::after { display: none !important; }
.hrl-wave, .hd-sec-ico, .hrl-open-ico, .hrl-orbit, .hrl-hero-art { display: none !important; }
.hrthink-btn, .hrlab-primary-dark, .hd-btn, .hrl-cta, .srt-modal-primary { background-image: none !important; }
.hrthink-btn, .hrthink-btn-primary { background: var(--ex-maroon) !important; border-color: var(--ex-maroon) !important; color: #fff !important; }
.hrthink-btn:hover { background: var(--ex-maroon-d) !important; }

/* Practice arcade, same corners and flat buttons */
.hrp-banner { border-radius: 4px !important; }
.hrp-banner-bg { display: none !important; }
.hrp-card { border-radius: 4px !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--ex-navy) 6%, transparent) !important; }
.hrp-card:hover { transform: none !important; box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--ex-navy) 40%, transparent) !important; }
.hrp-card-art { background: var(--ex-tint) !important; }
.hrprac-button, .hrprac-button.is-primary { border-radius: 3px !important; background: var(--ex-maroon) !important; background-image: none !important; border: 2px solid var(--ex-maroon) !important; color: #fff !important; box-shadow: none !important; }
.hrprac-button:hover { background: var(--ex-maroon-d) !important; border-color: var(--ex-maroon-d) !important; }
.hrp-sparkle, .hrp-banner-art .hrp-star { display: none !important; }
body .hrlab-app-shell *:not(svg):not(path):not(i):not(.dashicons) { font-family: var(--sans); }

/* app pages: the workspace and the builders use the wide layout; every other page sits in the standard column */
body.hrt-app-page:not(.hrt-slug-hr-lab-workspace):not(.hrt-slug-resume-builder):not(.hrt-slug-recruitment-workspace):not(.hrt-slug-applicant-dashboard):not(.hrt-slug-finance):not(.hrt-slug-licences):not(.hrt-slug-hrthink-onboarding) .hrt-wrap-wide { width: min(var(--ex-wrap, 1320px), 100% - 2 * var(--ex-gutter, 24px)); }

/* Recruitment, careers and applicant screens */
.srt-staff-sidebar { background-image: none !important; background-color: var(--ex-navy) !important; border-radius: 4px !important; }
.srt-staff-panel, .srt-dashboard-empty, .srt-careers-head, .srt-portal-entry, .srt-empty, .srt-snapshot-card, .srt-modal-card { border-radius: 4px !important; box-shadow: none !important; }
.srt-staff-panel { border: 1px solid var(--ex-line) !important; border-top: 3px solid var(--ex-blue) !important; }
[class*="srt-workflow-"]:not(.srt-workflow-panel) { background: #fff !important; background-image: none !important; border: 1px solid var(--ex-line) !important; border-top: 4px solid var(--ex-blue) !important; border-radius: 4px !important; box-shadow: none !important; }
.srt-workflow-red { border-top-color: var(--ex-maroon) !important; }
.srt-workflow-slate, .srt-workflow-cyan { border-top-color: var(--ex-muted) !important; }
.srt-careers-head { background: var(--ex-soft) !important; background-image: none !important; border: 1px solid var(--ex-line) !important; }
.srt-careers-head::before, .srt-careers-head::after { display: none !important; }
.srt-staff-panel[class*="srt-workflow-"], .srt-workflow-panel { border-top-color: var(--ex-blue) !important; }
.srt-btn, .srt-modal-primary, .srt-button { border-radius: 3px !important; }
.srt-workflow-cards > a, .srt-workflow-cards > div, .srt-stat-card, .srt-snapshot-card, .srt-info-grid > div { background: #fff !important; background-image: none !important; border: 1px solid var(--ex-line) !important; border-radius: 4px !important; box-shadow: none !important; }
.srt-workflow-cards > a:hover { transform: none !important; border-color: var(--ex-blue) !important; }
.srt-staff-panel, .srt-staff-shell [class*="panel"] { border-radius: 4px !important; }
.srt-staff-nav a.is-active, .srt-staff-sidebar a.is-active, .srt-staff-sidebar .is-current { background: var(--ex-blue) !important; color: #fff !important; border-radius: 3px !important; }

/* The hero call-to-action sits on navy: solid white card, navy text (the gradient is removed above). */
body a.hrl-cta{background:var(--ex-surface,#fff) !important;border-radius:var(--ex-r-ctl,3px) !important;color:var(--ex-navy,#0b1f44) !important}
body a.hrl-cta span{color:var(--ex-blue,#0b49a1) !important}
body .hrl-cta::after{display:none}

/* Reading pages (generic pages, articles, insights): narrow column, serif headings, token colours. */
.ex-narrow { width: min(820px, 100% - 40px); margin-inline: auto; }
.ex-prose { font-size: 1.05rem; line-height: 1.7; color: var(--ex-text); }
.ex-prose h2, .ex-prose h3, .ex-prose h4 { font-family: var(--ex-serif); color: var(--ex-navy); margin: 1.6em 0 .5em; line-height: 1.25; }
.ex-prose a { color: var(--ex-blue); text-decoration: underline; text-underline-offset: 2px; }
.ex-prose img { max-width: 100%; height: auto; border-radius: var(--ex-r-card); }
.ex-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ex-maroon); color: var(--ex-navy); font-family: var(--ex-serif); }
.ex-prose table { border-collapse: collapse; width: 100%; } .ex-prose th, .ex-prose td { border: 1px solid var(--ex-line); padding: 8px 10px; text-align: left; } .ex-prose th { background: var(--ex-soft); color: var(--ex-navy); }
.ex-chip.is-on { background: var(--ex-blue); color: var(--ex-surface); border-color: var(--ex-blue); }
.navigation.pagination .page-numbers { display: inline-block; padding: 6px 12px; border: 1px solid var(--ex-line); border-radius: var(--ex-r-ctl); color: var(--ex-navy); margin-right: 4px; }
.navigation.pagination .page-numbers.current { background: var(--ex-blue); border-color: var(--ex-blue); color: var(--ex-surface); }

/* Practice play screens: a flat navy stage, square chips and buttons, token colours, the full page width. */
.hrprac.hrp-arcade, .hrprac.hrp-arena { max-width: none !important; }
.hrp-arena { background: var(--ex-navy) !important; background-image: none !important; box-shadow: none !important; border-radius: var(--ex-r-card) !important; }
.hrp-arena::before, .hrp-arena::after, .hrp-arena-bg, .hrp-arena .hrp-sparkle { display: none !important; }
.hrp-arena-art { filter: none !important; }
.hrp-chip, .hrp-pill, .hrp-pill.xp, .hrp-pill.lvl, .hrp-chip-lv, .hrp-chip-free { border-radius: var(--ex-r-ctl) !important; background: color-mix(in srgb, #fff 10%, transparent) !important; border: 1px solid color-mix(in srgb, #fff 24%, transparent) !important; color: #fff !important; backdrop-filter: none !important; animation: none !important; box-shadow: none !important; }
.hrp-chip-free { border-color: var(--ex-blue-soft) !important; }
a.hrp-back, a.hrp-back-btn, .hrp-back { border-radius: var(--ex-r-ctl) !important; background: transparent !important; border: 1px solid color-mix(in srgb, #fff 40%, transparent) !important; box-shadow: none !important; }
.hrp-arena .hrprac-button, .hrp-arcade .hrprac-button { border-radius: var(--ex-r-ctl) !important; background-image: none !important; box-shadow: none !important; filter: none !important; }
.hrp-arena .hrprac-button::after, .hrp-arcade .hrprac-button::after { display: none !important; }
.hrp-arena .hrprac-button:hover { transform: none !important; }
.hrp-arena .hrprac-secondary { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 2px solid var(--ex-line) !important; }
.hrp-arena .hrprac-button:focus-visible, .hrprac a:focus-visible, .hrprac button:focus-visible { outline: 3px solid var(--ex-blue-soft) !important; outline-offset: 2px !important; }
.hrp-arena .hrp-stage, .hrp-arena .hrp-scene { background: var(--ex-surface) !important; box-shadow: none !important; border-radius: var(--ex-r-card) !important; }
.hrp-cr-steps li, .hrp-cr-steps li::before { border-radius: var(--ex-r-ctl) !important; }
.hrp-cr-steps li.is-now { background: var(--ex-tint) !important; color: var(--ex-navy) !important; }
.hrp-cr-steps li.is-now::before { background: var(--ex-maroon) !important; }
.hrp-cr-how div, .hrp-det-how div { background: var(--ex-soft) !important; background-image: none !important; border: 1px solid var(--ex-line); }
.hrp-cr-how b, .hrp-det-how b, .hrp-cr-how i, .hrp-det-how i { background: var(--ex-maroon) !important; background-image: none !important; color: #fff !important; }
.hrprac .hrp-arena-head h1 { font-family: var(--ex-serif) !important; letter-spacing: -.01em !important; font-weight: 700 !important; }
.hrp-stage .hrprac-statement { background: var(--ex-soft) !important; background-image: none !important; border: 1px solid var(--ex-line) !important; border-left: 4px solid var(--ex-maroon) !important; box-shadow: none !important; animation: none !important; transform: none !important; }
.hrp-stage .hrprac-statement::before, .hrp-stage .hrprac-statement::after { display: none !important; }
.hrp-pip { height: 6px !important; border-radius: 2px !important; }
.hrp-pip::after { border-radius: 0 !important; background: var(--ex-blue) !important; }
.hrp-pip.is-now { box-shadow: none !important; outline: 2px solid color-mix(in srgb, var(--ex-blue) 30%, transparent); }
.hrp-stage .hrprac-choice:hover:not([disabled]) { transform: none !important; filter: none !important; }
.hrp-cr-head { background: var(--ex-soft) !important; background-image: none !important; }
.hrp-cr-card, .hrp-det-opt, .hrp-cr-opt { box-shadow: none !important; }

/* Practice screens, bright version: a light panel with navy text, like the rest of the site (replaces the dark stage above). */
.hrp-arena { background: var(--ex-soft) !important; color: var(--ex-text) !important; border: 1px solid var(--ex-line) !important; border-top: 3px solid var(--ex-maroon) !important; }
.hrp-arena-head, .hrp-arena-head p, .hrp-arena-sum, .hrp-arena .hrp-top, .hrp-arena .hrp-badge, .hrp-arena .hrp-badge * { color: var(--ex-text) !important; }
.hrprac .hrp-arena-head h1 { color: var(--ex-navy) !important; }
.hrp-chip, .hrp-pill, .hrp-pill.xp, .hrp-pill.lvl, .hrp-chip-lv, .hrp-chip-free { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; color: var(--ex-blue) !important; }
.hrp-chip b, .hrp-pill b { color: var(--ex-navy) !important; }
a.hrp-back, a.hrp-back-btn, .hrp-back { color: var(--ex-blue) !important; background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; }
.hrp-arena .hrp-stage, .hrp-arena .hrp-scene { border: 1px solid var(--ex-line) !important; }
.hrp-arena .hrp-arena-art { background: transparent; }
.hrp-arena .hrp-slots, .hrp-arena .hrp-slots *, .hrp-arena .hrp-slot, .hrp-arena .hrp-slot * { color: var(--ex-text) !important; opacity: 1 !important; }
/* Maroon as the one accent in the games: the main action, the current step and the case-file stamp. */
.hrp-arena .hrprac-secondary:hover { border-color: var(--ex-blue) !important; }
.hrp-pip.is-done::after, .hrp-pip.is-now::after { background: var(--ex-maroon) !important; }
.hrp-pip.is-now { outline-color: color-mix(in srgb, var(--ex-maroon) 30%, transparent) !important; }
.hrp-det-stamp, .hrp-cr-stamp { border-color: var(--ex-maroon) !important; color: var(--ex-maroon) !important; }
.hrp-cr-steps li.is-done::before { background: var(--ex-blue) !important; }

/* One panel only: the white stage has the border and padding; the scene inside it is plain, so text and fields never touch an edge. */
.hrp-arena .hrp-scene { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.hrp-arena .hrp-stage { background: var(--ex-surface) !important; background-image: none !important; }
.hrp-stage .hrprac-statement { opacity: 1 !important; }
.hrp-stage textarea { border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; }
.hrp-stage textarea:focus { border-color: var(--ex-blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 18%, transparent) !important; }

/* Practice list (/practice/): same look as the Small Business page. Light page head, then white cards with a tinted thumbnail. */
.hrprac .hrp-banner { background: linear-gradient(180deg, var(--ex-surface), var(--ex-soft)) !important; background-color: var(--ex-soft) !important; color: var(--ex-text) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-card) !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1.3fr .7fr; align-items: stretch; overflow: hidden; }
.hrprac .hrp-banner-copy { padding: 36px 40px !important; }
.hrprac .hrp-kicker { color: var(--ex-maroon) !important; font: 700 .72rem var(--ex-sans) !important; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px !important; }
.hrprac .hrp-banner h2, .hrprac .hrp-banner h1 { color: var(--ex-navy) !important; font-family: var(--ex-serif) !important; font-weight: 700 !important; font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important; letter-spacing: -.012em !important; margin: 0 0 10px !important; }
.hrprac .hrp-banner p { color: var(--ex-text) !important; font-size: 1.04rem !important; max-width: 58ch; }
.hrprac .hrp-banner-art { background: var(--ex-tint) !important; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); display: grid; place-items: center; min-height: 200px; }
.hrprac .hrp-banner-art svg { max-height: 190px; width: auto; max-width: 100%; }
.hrprac .hrp-banner .hrp-chip { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; font-size: .78rem !important; padding: 6px 10px !important; }

.hrprac .hrp-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 20px !important; }
.hrprac .hrp-card { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; border-top: 4px solid var(--ex-blue) !important; border-radius: 0 !important; padding: 22px !important; display: flex !important; flex-direction: column; gap: 9px; box-shadow: none !important; }
.hrprac .hrp-card:nth-child(4n+2) { border-top-color: var(--ex-navy) !important; }
.hrprac .hrp-card:nth-child(4n+3) { border-top-color: var(--ex-maroon) !important; }
.hrprac .hrp-card-art { height: 170px !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 6px !important; border: 1px solid var(--ex-line); background: linear-gradient(135deg, var(--ex-soft), var(--ex-tint)) !important; position: relative; overflow: hidden; display: grid; place-items: center; }
.hrprac .hrp-card-art svg { width: 100%; height: 100%; transform: scale(.9); transform-origin: center; }
.hrprac .hrp-card-body { padding: 0 !important; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hrprac .hrp-card h2 { font-family: var(--ex-serif) !important; font-size: 1.2rem !important; color: var(--ex-navy) !important; margin: 0 !important; line-height: 1.25; }
.hrprac .hrp-card p { font-size: .94rem !important; line-height: 1.5 !important; margin: 0 !important; color: var(--ex-text); }
.hrprac .hrp-card p.hrprac-meta { font-size: .8rem !important; color: var(--ex-muted); }
.hrprac .hrp-card .hrprac-tag { background: var(--ex-tint) !important; color: var(--ex-blue) !important; border-radius: var(--ex-r-ctl) !important; font-weight: 700; padding: 2px 7px; }
.hrprac .hrp-card .hrprac-button { margin-top: auto; align-self: flex-start; font-size: .9rem !important; padding: 10px 16px !important; }
.hrprac .hrp-best { border-radius: var(--ex-r-ctl) !important; background: var(--ex-navy) !important; color: #fff !important; }
@media (max-width: 900px) { .hrprac .hrp-banner { grid-template-columns: 1fr; } .hrprac .hrp-banner-art { clip-path: none; } }
/* Soft illustrations: the card and page-head artwork is toned down so it supports the text instead of competing with it. */
.hrprac .hrp-card-art svg, .hrprac .hrp-banner-art svg { opacity: .5; filter: saturate(.55); transform: scale(.82); }
.hrprac .hrp-card-art { background: var(--ex-soft) !important; border-color: var(--ex-line); }
.hrprac .hrp-card:hover .hrp-card-art svg { opacity: .7; }

/* Practice cards, compact: three in a row, a small thumbnail, coloured label chips, and medals plus the button on one bottom line. */
.hrprac .hrp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.hrprac .hrp-card { padding: 18px !important; gap: 8px; }
.hrprac .hrp-card-art { height: 96px !important; margin: 0 0 2px !important; }
.hrprac .hrp-card-art svg { transform: scale(.8); }
.hrprac .hrp-card h2 { font-size: 1.12rem !important; }
.hrprac .hrp-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.hrprac .hrp-cchip { display: inline-block; font: 700 .68rem/1 var(--ex-sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--ex-r-ctl); background: var(--ex-surface); color: var(--ex-muted); border: 1px solid var(--ex-line); }
.hrprac .hrp-cchip.hrp-cat { background: var(--ex-tint); color: var(--ex-blue); border-color: transparent; }
.hrprac .hrp-cchip.hrp-free { background: color-mix(in srgb, var(--ex-maroon) 8%, #fff) !important; color: var(--ex-maroon) !important; border-color: transparent; }
.hrprac .hrp-card .hrp-sum { font-size: .92rem !important; }
.hrprac .hrp-card .hrp-obj { display: none !important; }
.hrprac .hrp-card p.hrprac-progress { font-size: .8rem !important; color: var(--ex-muted); margin: 0 !important; }
.hrprac .hrp-card-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ex-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hrprac .hrp-card-foot .hrp-slots { display: inline-flex; gap: 8px; margin: 0; flex-wrap: nowrap; }
.hrprac .hrp-card-foot .hrp-slot { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.hrprac .hrp-card-foot .hrp-slot svg { width: 30px; height: auto; }
.hrprac .hrp-card-foot .hrp-slot em { font: 600 .6rem var(--ex-sans); font-style: normal; color: var(--ex-muted); text-transform: uppercase; letter-spacing: .04em; }
.hrprac .hrp-card-foot .hrprac-button { margin: 0 0 0 auto !important; white-space: nowrap; }
@media (max-width: 1000px) { .hrprac .hrp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .hrprac .hrp-grid { grid-template-columns: 1fr !important; } }
.hrprac .hrp-card-art svg { position: static !important; height: 100% !important; width: auto !important; max-width: 100%; transform: none !important; margin: 0 auto; }
.hrprac .hrp-grid .hrp-card .hrp-card-art svg { height: 84px !important; max-height: 84px !important; width: auto !important; max-width: 100% !important; }
.hrprac .hrp-card-foot { min-height: 58px; }
.hrprac .hrp-cchip { letter-spacing: .04em; font-size: .64rem; padding: 5px 7px; }

/* Portrait: the photo fades to white, so it sits on the soft brand tint instead of a coloured backdrop. */
.hrt-profile-card .hrt-photo, .hrt-photo-card { background: linear-gradient(160deg, var(--ex-soft), var(--ex-tint)); mix-blend-mode: normal; object-fit: contain; object-position: bottom center; border: 1px solid var(--ex-line); }

/* Share links */
.ex-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ex-line); }
.ex-share span { font: 700 .72rem var(--ex-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); margin-right: 4px; }
.ex-share a { display: inline-block; padding: 6px 11px; border: 1px solid var(--ex-line); border-radius: var(--ex-r-ctl); font: 600 .84rem var(--ex-sans); color: var(--ex-blue); background: var(--ex-surface); text-decoration: none; }
.ex-share a:hover { border-color: var(--ex-blue); background: var(--ex-tint); }
.ex-form h1 { font-size: 1.6rem; margin: 0; }

/* Result panel after a game: bright, like the rest of the site (was a dark gradient). */
.hrp-result { background: var(--ex-soft) !important; background-image: none !important; color: var(--ex-text) !important; border: 1px solid var(--ex-line) !important; border-top: 3px solid var(--ex-maroon) !important; box-shadow: none !important; }
.hrp-result h3 { color: var(--ex-navy) !important; font-family: var(--ex-serif) !important; font-weight: 700 !important; }
.hrp-result p, .hrp-result .hrp-score b { color: var(--ex-text) !important; }
.hrp-result .hrp-score b { color: var(--ex-navy) !important; }
.hrp-score .bg { stroke: var(--ex-line) !important; }
.hrp-score .fg { stroke: var(--ex-blue) !important; }
.hrp-result .hrp-pill, .hrp-result .hrp-pill.xp, .hrp-result .hrp-pill.lvl { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; color: var(--ex-blue) !important; }
.hrp-result::before, .hrp-result::after { display: none !important; }
.hrp-stars .off path { fill: var(--ex-surface) !important; stroke: var(--ex-line) !important; }
.hrp-stars .on path { stroke: var(--ex-surface) !important; }

/* Finance, Onboarding and Licences screens: flat navy sidebars, plain white stat cards, square chips. */
.htbk-sidebar, .hto-side, .hl-side { background: var(--ex-navy) !important; background-image: none !important; border-radius: var(--ex-r-card); }
.htbk-sidebar::before, .htbk-sidebar::after, .hto-side::before, .hto-side::after, .hl-side::before, .hl-side::after { display: none !important; }
.hto-kpi { background: var(--ex-surface) !important; background-image: none !important; border: 1px solid var(--ex-line) !important; border-top: 4px solid var(--ex-blue) !important; box-shadow: none !important; color: var(--ex-text) !important; }
.hto-kpi:nth-child(4n+2) { border-top-color: var(--ex-navy) !important; } .hto-kpi:nth-child(4n+3) { border-top-color: var(--ex-maroon) !important; }
.hto-kpi strong, .hto-kpi b, .hto-kpi span, .hto-kpi small, .hto-kpi p, .hto-kpi div { color: var(--ex-navy) !important; }
.hto-kpi i, .hto-kpi svg { background: var(--ex-tint) !important; color: var(--ex-blue) !important; fill: currentColor; border-radius: var(--ex-r-ctl) !important; }
.hto-lifecycle span, .hl-chip, .hto-chip, .hto-pill, .hto-badge { border-radius: var(--ex-r-ctl) !important; }
.hl-app { border-radius: var(--ex-r-card) !important; }
.hto-btn-primary, .hto-primary, .hto-add { background-image: none !important; }
.htbk-sidebar *, .hto-side *, .hl-side * { background-image: none !important; }
.htbk-sidebar, .hto-side, .hl-side { box-shadow: none !important; }

/* =====================================================================================================================
   One app shell for every screen with a sidebar (HR Lab and its modules for learners and instructors, Recruitment, Onboarding,
   Finance, Licences). Same look as the account page: a soft tinted sidebar, navy text, a white active item with a maroon rule,
   a square avatar; the main area is white with bordered cards. Colours come from the tokens only.
   ===================================================================================================================== */
.hrlab-app-sidebar, .srt-staff-sidebar, .hto-side, .htbk-sidebar, .hl-side {
	background: var(--ex-tint) !important; background-image: none !important; color: var(--ex-text) !important;
	border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-card) !important; box-shadow: none !important;
}
.hrlab-app-sidebar::before, .hrlab-app-sidebar::after, .srt-staff-sidebar::before, .srt-staff-sidebar::after { display: none !important; }
.srt-staff-sidebar *, .hto-side *, .htbk-sidebar *, .hl-side * { background-image: none; }

/* names, roles, small labels */
.hrlab-app-brand strong, .hrlab-app-username strong, .srt-staff-user strong, .hto-side strong, .htbk-sidebar strong, .hl-side strong { color: var(--ex-navy) !important; font-family: var(--ex-serif); font-weight: 700; }
.hrlab-app-brand small, .hrlab-app-username small, .srt-staff-user span, .hto-side small, .htbk-sidebar small, .hl-side small { color: var(--ex-muted) !important; }
.hrlab-app-username { background: transparent !important; border: 0 !important; padding: 4px 0 10px !important; }
.hrlab-app-nav-label, .hrlab-core-nav-label, .hrlab-modules-nav-label { color: var(--ex-muted) !important; font: 700 .68rem var(--ex-sans) !important; letter-spacing: .12em; text-transform: uppercase; }

/* the avatar is a square in the brand blue */
.hrlab-app-brandmark { background: var(--ex-blue) !important; border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; }
.srt-staff-user img.avatar, .hto-side .avatar, .htbk-sidebar .avatar { border-radius: var(--ex-r-ctl) !important; border: 0 !important; }

/* navigation: plain navy text; the current item is white with a maroon rule on the left */
.hrlab-app-nav a, .hrlab-app-nav button, .srt-staff-sidebar nav a, .hto-side-nav a, .htbk-side-nav a, .htbk-side-nav button, .hl-side nav a {
	color: var(--ex-navy) !important; background: transparent !important; border-radius: 0 !important; border-left: 3px solid transparent !important;
	font-weight: 600; box-shadow: none !important;
}
.hrlab-app-nav a:hover, .srt-staff-sidebar nav a:hover, .hto-side-nav a:hover, .htbk-side-nav a:hover, .hl-side nav a:hover { background: color-mix(in srgb, var(--ex-surface) 60%, transparent) !important; }
.hrlab-app-nav a.is-active, .hrlab-app-nav a[aria-current="page"], .srt-staff-sidebar nav a.active, .hto-side-nav a.is-active, .hto-side-nav a.active, .htbk-side-nav a.is-active, .htbk-side-nav .is-active, .hl-side nav a.is-active, .hl-side nav a.on {
	background: var(--ex-surface) !important; border-left-color: var(--ex-maroon) !important; color: var(--ex-navy) !important;
}
.hrlab-app-nav a i, .srt-staff-sidebar nav a .dashicons, .hto-side-nav a svg, .htbk-side-nav svg { background: transparent !important; color: var(--ex-blue) !important; fill: currentColor; box-shadow: none !important; border-radius: 0 !important; }
.hrlab-app-nav a i svg { stroke: var(--ex-blue); fill: none; }
.srt-staff-sidebar-bottom { border-top: 1px solid var(--ex-line) !important; }
.srt-staff-sidebar-bottom a, .hl-side .hl-ver, .hrlab-app-sidebar-foot, .hrlab-app-sidebar-foot * { color: var(--ex-muted) !important; }

/* modules in the HR Lab sidebar */
.hrlab-module-group > button, .hrlab-module-toggle, .hrlab-modules-nav button { background: transparent !important; color: var(--ex-navy) !important; box-shadow: none !important; border-radius: 0 !important; }
.hrlab-module-group.is-open > button, .hrlab-module-group[open] > summary { background: var(--ex-surface) !important; }

/* the HR Lab welcome banners were dark navy: now a bright panel with a maroon top rule, like the account page cards */
.hrl-hero { background: var(--ex-surface) !important; background-image: none !important; color: var(--ex-text) !important; border: 1px solid var(--ex-line) !important; border-top: 3px solid var(--ex-maroon) !important; box-shadow: none !important; }
.hrl-hero::before, .hrl-hero::after, .hrl-hero-bg { display: none !important; }
.hrl-hero h2, .hrl-hero .hrl-sub, .hrl-hero .hrl-kicker, .hrl-hero strong { color: var(--ex-navy) !important; }
.hrl-hero .hrl-sub { color: var(--ex-text) !important; }
.hrl-hero .hrl-kicker { color: var(--ex-maroon) !important; }
.hrl-hero .hrl-stat, .hrl-stats .hrl-stat { background: var(--ex-soft) !important; border: 1px solid var(--ex-line) !important; box-shadow: none !important; color: var(--ex-navy) !important; }
.hrl-hero .hrl-stat b, .hrl-hero .hrl-stat span, .hrl-hero .hrl-stat * { color: var(--ex-navy) !important; }
.hrl-hero .hrl-level, .hrl-hero .hrl-xp { color: var(--ex-text) !important; }
.hrl-hero .hrl-ghost { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; }

/* top bar: the welcome, every figure and the actions in one place */
.hrlab-header-action.is-primary { background: var(--ex-maroon) !important; color: #fff !important; border: 1px solid var(--ex-maroon) !important; border-radius: var(--ex-r-ctl) !important; padding: 8px 14px; font-weight: 700; }
.hrlab-header-action.is-ghost { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; padding: 8px 14px; font-weight: 700; }
.hrlab-app-topbar .hrlab-header-chips { flex: 1 1 100%; justify-content: flex-start; }
.hrlab-app-topbar .hrlab-topbar-kicker { color: var(--ex-maroon) !important; }
.hrlab-header-chip { border-radius: var(--ex-r-ctl) !important; background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; }

/* top-bar buttons and clickable figures */
.hrlab-app-topbar .hrlab-header-action { display: inline-flex; align-items: center; background-image: none !important; box-shadow: none !important; text-decoration: none !important; font-size: .88rem; }
.hrlab-app-topbar .hrlab-header-action.is-primary { background: var(--ex-maroon) !important; color: #fff !important; border: 1px solid var(--ex-maroon) !important; border-radius: var(--ex-r-ctl) !important; }
.hrlab-app-topbar .hrlab-header-action.is-ghost { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; }
.hrlab-app-topbar a.hrlab-header-chip { text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.hrlab-app-topbar a.hrlab-header-chip:hover { border-color: var(--ex-blue) !important; background: var(--ex-tint) !important; }
.hrlab-header-chip.is-current { border-color: var(--ex-maroon) !important; background: color-mix(in srgb, var(--ex-maroon) 7%, #fff) !important; box-shadow: inset 0 -2px 0 var(--ex-maroon) !important; }
.hrlab-header-chip b { color: var(--ex-navy) !important; }

/* course cards: a light header with a blue rule instead of a solid colour block */
.hd-course-head { background: var(--ex-soft) !important; background-image: none !important; color: var(--ex-navy) !important; border-top: 3px solid var(--ex-blue); border-bottom: 1px solid var(--ex-line); }
.hd-course-head h3, .hd-course-head a, .hd-course-head strong, .hd-course-head .hd-course-meta { color: var(--ex-navy) !important; }
.hd-course-head .hd-kicker { color: var(--ex-maroon) !important; }
.hd-course-head p, .hd-course-head small, .hd-course-head span:not(.hd-course-badge) { color: var(--ex-text) !important; }
.hd-course-badge { background: var(--ex-blue) !important; color: #fff !important; border: 0 !important; border-radius: var(--ex-r-ctl) !important; }
.hd-course-head .hd-ring { background: conic-gradient(var(--ex-blue) calc(var(--p, 0) * 1%), var(--ex-line) 0) !important; color: var(--ex-navy) !important; }
.hd-course-head .hd-ring::before { background: var(--ex-surface) !important; }
.hd-course-head .hd-ring * { color: var(--ex-navy) !important; }
.hd-course-head .hd-btn, .hd-course-head a.hd-open { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; }
.hd-sec { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; }
body .hrlab-app-topbar a.hrlab-header-action.is-ghost { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; padding: 8px 14px; }
body .hrlab-app-topbar a.hrlab-header-action.is-primary { background: var(--ex-maroon) !important; color: #fff !important; border-radius: var(--ex-r-ctl) !important; padding: 8px 14px; }
.hd-course-title a, .hd-course-title a * { color: var(--ex-blue) !important; text-decoration: underline; }

/* Buttons keep a solid colour (the old gradients were removed, so text must never sit on a transparent background). */
body .hd-btn, body a.hd-btn, body .hrlab-alpha-primary, body a.hrlab-alpha-primary, body .hrlab-primary-dark, body .hrlab-header-action:not(.is-ghost):not(.is-primary), body .srt-modal-primary, body .hrthink-btn {
	background: var(--ex-blue) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--ex-blue) !important; border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; text-decoration: none !important;
}
body .hd-btn:hover, body .hrlab-alpha-primary:hover, body .hrlab-primary-dark:hover { background: var(--ex-blue-d) !important; border-color: var(--ex-blue-d) !important; }
body .hrl-ghost, body a.hrl-ghost { background: var(--ex-surface) !important; color: var(--ex-blue) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; }
body .hrlab-certificate-cta { background: var(--ex-soft) !important; border: 1px solid var(--ex-line) !important; border-left: 4px solid var(--ex-maroon) !important; }
body .hrlab-certificate-cta h3 { color: var(--ex-navy) !important; font-family: var(--ex-serif); }
body .hrlab-certificate-cta .hrlab-alpha-primary { background: var(--ex-maroon) !important; border-color: var(--ex-maroon) !important; }
/* the XP line and level box in the learner welcome */
.hrl-hero .hrl-level, .hrl-hero .hrl-level *:not(.hrl-lv) { color: var(--ex-text) !important; }
.hrl-hero .hrl-level strong { color: var(--ex-navy) !important; }
.hrl-hero .hrl-xp { background: var(--ex-line) !important; height: 8px !important; border-radius: 2px !important; overflow: hidden; }
.hrl-hero .hrl-xp i, .hrl-hero .hrl-xp > span { background: var(--ex-blue) !important; background-image: none !important; }
.hrl-hero .hrl-xpnote, .hrl-hero .hrl-level small, .hrl-hero .hrl-level p { color: var(--ex-muted) !important; opacity: 1 !important; }

/* Recruitment tracker: the same shell, with selectors strong enough to beat the plugin's own sidebar rules */
body .srt-staff-shell .srt-staff-sidebar, body.srt-workspace-page .srt-staff-sidebar { background: var(--ex-tint) !important; background-image: none !important; color: var(--ex-text) !important; }
body .srt-staff-shell .srt-staff-sidebar strong, body .srt-staff-shell .srt-staff-sidebar .srt-staff-user strong { color: var(--ex-navy) !important; font-family: var(--ex-serif) !important; }
body .srt-staff-shell .srt-staff-sidebar .srt-staff-user span, body .srt-staff-shell .srt-staff-sidebar small { color: var(--ex-muted) !important; }
body .srt-staff-shell .srt-staff-sidebar nav a { color: var(--ex-navy) !important; background: transparent !important; border-left: 3px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 600; }
body .srt-staff-shell .srt-staff-sidebar nav a .dashicons, body .srt-staff-shell .srt-staff-sidebar nav a svg { color: var(--ex-blue) !important; }
body .srt-staff-shell .srt-staff-sidebar nav a.active, body .srt-staff-shell .srt-staff-sidebar nav a:hover { background: var(--ex-surface) !important; border-left-color: var(--ex-maroon) !important; color: var(--ex-navy) !important; }
body .srt-staff-shell .srt-staff-sidebar nav a:hover:not(.active) { border-left-color: transparent !important; }
body .srt-staff-shell .srt-staff-sidebar-bottom a { color: var(--ex-muted) !important; background: transparent !important; }
body .srt-staff-user img.avatar { border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; }

/* stat tiles: white cards with a coloured top rule (were solid blue, navy, maroon and green blocks) */
body .srt-staff-shell .srt-stat-card { background: var(--ex-surface) !important; background-image: none !important; border: 1px solid var(--ex-line) !important; border-top: 4px solid var(--ex-blue) !important; box-shadow: none !important; color: var(--ex-text) !important; }
body .srt-staff-shell .srt-stat-accent-2 { border-top-color: var(--ex-navy) !important; } body .srt-staff-shell .srt-stat-accent-3 { border-top-color: var(--ex-maroon) !important; } body .srt-staff-shell .srt-stat-accent-4 { border-top-color: var(--ex-blue-mid) !important; }
body .srt-staff-shell .srt-stat-card *, body .srt-staff-shell .srt-stat-card span, body .srt-staff-shell .srt-stat-card small, body .srt-staff-shell .srt-stat-card strong, body .srt-staff-shell .srt-stat-card b { color: var(--ex-navy) !important; }
body .srt-staff-shell .srt-stat-card .dashicons, body .srt-staff-shell .srt-stat-card svg { background: var(--ex-tint) !important; color: var(--ex-blue) !important; border-radius: var(--ex-r-ctl) !important; }
body .srt-staff-shell .srt-staff-main a { text-decoration-color: currentColor; }
body .srt-staff-shell .srt-staff-main .srt-open-link, body .srt-staff-shell .srt-staff-main h2 + a { color: var(--ex-blue) !important; }

/* Recruitment tracker, strong selectors (its own stylesheet stacks many overrides) */
html body .srt-staff-shell .srt-staff-sidebar nav a, html body .srt-staff-shell .srt-staff-sidebar nav a:link, html body .srt-staff-shell .srt-staff-sidebar nav a:visited {
	color: var(--ex-navy) !important; background: transparent !important; background-image: none !important; border-left: 3px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 600;
}
html body .srt-staff-shell .srt-staff-sidebar nav a:hover, html body .srt-staff-shell .srt-staff-sidebar nav a:focus { background: color-mix(in srgb, var(--ex-surface) 65%, transparent) !important; color: var(--ex-navy) !important; }
html body .srt-staff-shell .srt-staff-sidebar nav a.active, html body .srt-staff-shell .srt-staff-sidebar nav a.active:link, html body .srt-staff-shell .srt-staff-sidebar nav a.active:visited {
	background: var(--ex-surface) !important; color: var(--ex-navy) !important; border-left-color: var(--ex-maroon) !important;
}
html body .srt-staff-shell .srt-staff-sidebar nav a .dashicons, html body .srt-staff-shell .srt-staff-sidebar nav a.active .dashicons { color: var(--ex-blue) !important; background: transparent !important; }
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card:nth-child(n), html body .srt-staff-shell .srt-dashboard-stats a.srt-stat-card:nth-child(n) {
	background: var(--ex-surface) !important; background-image: none !important; border: 1px solid var(--ex-line) !important; border-top: 4px solid var(--ex-blue) !important; box-shadow: none !important; color: var(--ex-navy) !important;
}
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card:nth-child(2) { border-top-color: var(--ex-navy) !important; }
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card:nth-child(3) { border-top-color: var(--ex-maroon) !important; }
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card:nth-child(4) { border-top-color: var(--ex-blue-mid) !important; }
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card::before, html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card::after { display: none !important; }
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card * { color: var(--ex-navy) !important; }
html body .srt-staff-shell .srt-dashboard-stats .srt-stat-card .dashicons { background: var(--ex-tint) !important; color: var(--ex-blue) !important; border-radius: var(--ex-r-ctl) !important; }

/* Finance, Onboarding and Licences: strong selectors for the same account-style sidebar */
html body .htbk-sidebar .htbk-brand-logo { background: var(--ex-blue) !important; color: #fff !important; border: 0 !important; border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; }
html body .htbk-sidebar .htbk-brand *, html body .hl-side .hl-brand *, html body .hto-side-profile * { color: var(--ex-navy) !important; }
html body .htbk-sidebar .htbk-brand small, html body .htbk-sidebar .htbk-brand span:last-child, html body .hl-side .hl-brand small, html body .hl-side .hl-brand span, html body .hto-side-profile span, html body .hto-side-profile small { color: var(--ex-muted) !important; }
html body .htbk-sidebar .htbk-side-nav button, html body .htbk-sidebar .htbk-side-nav a, html body .hto-side .hto-side-nav a, html body .hto-side .hto-side-nav a:link, html body .hto-side .hto-side-nav a:visited, html body .hl-side nav a, html body .hl-side nav a:link {
	color: var(--ex-navy) !important; background: transparent !important; background-image: none !important; border: 0 !important; border-left: 3px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 600;
}
html body .htbk-sidebar .htbk-side-nav button.active, html body .htbk-sidebar .htbk-side-nav a.active, html body .hto-side .hto-side-nav a.active, html body .hto-side .hto-side-nav a.is-active, html body .hto-side .hto-side-nav a[aria-current], html body .hl-side nav a.active, html body .hl-side nav a.is-active, html body .hl-side nav a[aria-current="page"], html body .hl-side nav a.on {
	background: var(--ex-surface) !important; border-left-color: var(--ex-maroon) !important; color: var(--ex-navy) !important;
}
html body .htbk-sidebar .htbk-side-nav button:hover:not(.active), html body .hto-side .hto-side-nav a:hover:not(.active), html body .hl-side nav a:hover:not(.active) { background: color-mix(in srgb, var(--ex-surface) 65%, transparent) !important; }
html body .htbk-sidebar .htbk-side-nav svg, html body .hto-side .hto-side-nav svg, html body .htbk-sidebar .htbk-side-nav i { color: var(--ex-blue) !important; fill: currentColor; }
html body .htbk-sidebar .htbk-grp-body { border-left-color: var(--ex-line) !important; }
html body .hto-side-profile img, html body .hto-side-profile .avatar { border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; }
html body .hto-btn-primary, html body .hto-header .button, html body .hto-main > header a.button, html body a.hto-add { background: var(--ex-blue) !important; color: #fff !important; background-image: none !important; border-radius: var(--ex-r-ctl) !important; }

/* Onboarding: raise specificity (the plugin styles its sidebar with several stacked !important rules) */
html body .hto-shell .hto-side.hto-side .hto-side-nav a.active, html body .hto-shell .hto-side.hto-side .hto-side-nav a.active:link, html body .hto-shell .hto-side.hto-side .hto-side-nav a.active:visited, html body .hto-shell .hto-side.hto-side .hto-side-nav a:hover.active {
	background: var(--ex-surface) !important; color: var(--ex-navy) !important; border-left: 3px solid var(--ex-maroon) !important; box-shadow: none !important;
}
html body .hto-shell .hto-side.hto-side .hto-side-nav a, html body .hto-shell .hto-side.hto-side .hto-side-nav a:link { color: var(--ex-navy) !important; }
html body .hto-shell .hto-side.hto-side .hto-side-profile strong, html body .hto-shell .hto-side.hto-side .hto-side-profile b { color: var(--ex-navy) !important; font-family: var(--ex-serif) !important; }
html body .hto-shell .hto-side.hto-side .hto-side-profile span { color: var(--ex-muted) !important; }
html body .hto-shell .hto-btn:not(.hto-btn-ghost):not(.hto-btn-secondary), html body .hto-shell a.hto-btn { background: var(--ex-blue) !important; color: #fff !important; border: 1px solid var(--ex-blue) !important; box-shadow: none !important; border-radius: var(--ex-r-ctl) !important; opacity: 1 !important; }
html body .htbk-sidebar .htbk-brand-logo, html body .htbk-sidebar .htbk-brand-logo * { color: #fff !important; }
html body .hto-shell .hto-side.hto-side .hto-side-nav a svg, html body .hto-shell .hto-side.hto-side .hto-side-nav a i, html body .hto-shell .hto-side.hto-side .hto-side-nav a.active svg { color: var(--ex-blue) !important; fill: currentColor; }
html body .hd-course-head .hd-course-title p a, html body .hd-course-head .hd-course-title p a:link, html body .hd-course-head .hd-course-title p a:visited { color: var(--ex-blue) !important; text-decoration: underline !important; }
html body .srt-staff-shell .srt-staff-sidebar .srt-staff-sidebar-bottom a, html body .srt-staff-shell .srt-staff-sidebar .srt-staff-sidebar-bottom a:link { color: var(--ex-muted) !important; background: transparent !important; }
html body .hrlab-primary-dark, html body .hrlab-inline-button, html body a.hrlab-primary-dark { border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; }
html body .hrlab-app-sidebar .hrlab-module-group, html body .hrlab-app-sidebar .hrlab-module-toggle, html body .hrlab-app-sidebar .hrlab-modules-nav > * { margin-inline: 0 !important; max-width: 100%; box-sizing: border-box; }

/* =========================== Student dashboard: compact layout =========================== */
/* slim strip under the top bar: level and XP on the left, streak / runs / medals / week on the right */
.hrl-strip { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: stretch; margin: 0 0 16px; padding: 14px 18px; background: var(--ex-surface); border: 1px solid var(--ex-line); border-top: 3px solid var(--ex-blue); border-radius: var(--ex-r-card); }
.hrl-strip .hrl-level { display: flex; align-items: center; gap: 14px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.hrl-strip .hrl-lv { flex: none; display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 8px; background: var(--ex-blue) !important; color: #fff !important; font: 700 .72rem var(--ex-sans); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; text-align: center; }
.hrl-strip .hrl-level strong { display: block; color: var(--ex-navy) !important; font: 700 1.05rem var(--ex-serif); }
.hrl-strip .hrl-level small { color: var(--ex-muted) !important; font-size: .8rem; }
.hrl-strip .hrl-xp { height: 7px !important; margin: 5px 0 4px; background: var(--ex-line) !important; border-radius: 2px !important; overflow: hidden; }
.hrl-strip .hrl-xp span { display: block; height: 100%; width: var(--w, 0%); background: var(--ex-blue) !important; background-image: none !important; border-radius: 0 !important; }
.hrl-strip .hrl-stats { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)) minmax(220px, 1.5fr); gap: 10px; margin: 0; }
.hrl-strip .hrl-stat { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 0; background: var(--ex-soft) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-ctl) !important; box-shadow: none !important; }
.hrl-strip .hrl-stat svg { width: 26px; height: 26px; flex: none; }
.hrl-strip .hrl-stat b { font: 700 1.25rem var(--ex-serif); color: var(--ex-navy) !important; line-height: 1; }
.hrl-strip .hrl-stat span { font-size: .78rem; color: var(--ex-muted) !important; line-height: 1.15; }
.hrl-strip .hrl-week { flex-wrap: wrap; justify-content: space-between; row-gap: 2px; }
.hrl-strip .hrl-week span { flex-basis: 100%; order: -1; font: 700 .64rem var(--ex-sans); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1100px) { .hrl-strip { grid-template-columns: 1fr; } .hrl-strip .hrl-stats { grid-template-columns: repeat(3, 1fr); } .hrl-strip .hrl-week { grid-column: 1 / -1; } }
@media (max-width: 560px) { .hrl-strip .hrl-stats { grid-template-columns: 1fr 1fr; } }

/* tighter sections */
.hrlab-student-core-dashboard .hd-sec { padding: 18px 22px 20px !important; margin: 0 0 16px !important; }
.hrlab-student-core-dashboard .hd-sec-head { margin-bottom: 10px; }
.hrlab-student-core-dashboard .hd-sec-head h2 { font-size: 1.35rem !important; margin: 0 0 2px !important; }
.hrlab-student-core-dashboard .hd-sec-head p { margin: 0 !important; font-size: .92rem; }
.hrlab-student-core-dashboard .hd-course { margin-bottom: 12px; }

/* Practice cards: the same card as the Practice page (three per row, small picture, label chips, medals and button on one line) */
.hrl-games { margin-top: 4px; }
.hrl-game-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
@media (max-width: 1000px) { .hrl-game-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px) { .hrl-game-row { grid-template-columns: 1fr !important; } }
.hrl-game { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; border-top: 4px solid var(--ex-blue) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px !important; display: flex; flex-direction: column; gap: 8px; transform: none !important; overflow: visible; }
.hrl-game:nth-child(3n+2) { border-top-color: var(--ex-navy) !important; } .hrl-game:nth-child(3n+3) { border-top-color: var(--ex-maroon) !important; }
.hrl-game:hover { transform: none !important; box-shadow: none !important; }
.hrl-game-art { height: 84px !important; padding: 0 !important; margin: 0 0 2px; background: var(--ex-soft) !important; background-image: none !important; border: 1px solid var(--ex-line); display: grid; place-items: center; overflow: hidden; }
.hrl-game-art svg, .hrl-game-art svg.hrp-art { height: 76px !important; width: auto !important; max-height: 76px !important; opacity: .55; filter: saturate(.55); }
.hrl-game-chip { display: none !important; }
.hrl-game-body { padding: 0 !important; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hrl-game h3 { font: 700 1.1rem/1.25 var(--ex-serif) !important; color: var(--ex-navy) !important; }
.hrl-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.hrl-cchip { display: inline-block; font: 700 .64rem/1 var(--ex-sans); letter-spacing: .04em; text-transform: uppercase; padding: 5px 7px; border-radius: var(--ex-r-ctl); background: var(--ex-surface); color: var(--ex-muted); border: 1px solid var(--ex-line); }
.hrl-cchip.hrl-cat { background: var(--ex-tint); color: var(--ex-blue); border-color: transparent; }
.hrl-cchip.hrl-new { background: color-mix(in srgb, var(--ex-maroon) 8%, #fff); color: var(--ex-maroon); border-color: transparent; }
.hrl-cchip.hrl-best { background: color-mix(in srgb, var(--ex-blue) 10%, #fff); color: var(--ex-blue); border-color: transparent; }
.hrl-game .hrl-game-sum { margin: 0 !important; font-size: .92rem !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hrl-game-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ex-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; }
.hrl-game-foot .hrl-medal-row { display: inline-flex !important; flex-wrap: nowrap !important; gap: 8px; margin: 0 !important; }
.hrl-game-foot .hrl-medal-slot { display: inline-flex; flex-direction: column; align-items: center; margin: 0; }
.hrl-game-foot .hrl-medal-slot svg { width: 30px !important; height: auto !important; }
.hrl-game-foot .hrl-medal-slot b, .hrl-game-foot .hrl-medal-slot em { display: none !important; }
.hrl-game-go { margin-left: auto; white-space: nowrap; background: var(--ex-maroon) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--ex-maroon) !important; border-radius: var(--ex-r-ctl) !important; padding: 10px 16px; font-weight: 700; font-size: .9rem; text-decoration: none !important; box-shadow: none !important; }
.hrl-game-go:hover { background: var(--ex-maroon-d) !important; }

/* level journey: compact, in the brand palette */
.hrl-path { margin-top: 6px; }
.hrl-path-row { gap: 8px !important; }
.hrl-path .hrl-pl { padding: 10px 12px !important; min-height: 0 !important; border-radius: var(--ex-r-ctl) !important; background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; box-shadow: none !important; }
.hrl-path .hrl-pl.is-done { background: var(--ex-soft) !important; border-color: var(--ex-blue-soft) !important; }
.hrl-path .hrl-pl.is-now { background: var(--ex-tint) !important; border: 1px solid var(--ex-blue) !important; border-bottom: 3px solid var(--ex-maroon) !important; }
.hrl-path .hrl-pl.is-next { background: color-mix(in srgb, var(--ex-maroon) 6%, #fff) !important; border: 1px dashed var(--ex-maroon) !important; }
.hrl-path .hrl-pl-badge { border-radius: var(--ex-r-ctl) !important; background: var(--ex-blue) !important; color: #fff !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
.hrl-path .hrl-pl.is-locked .hrl-pl-badge { background: var(--ex-line) !important; color: var(--ex-muted) !important; }
.hrl-path .hrl-pl.is-next .hrl-pl-badge { background: var(--ex-maroon) !important; }
.hrl-strip .hrl-stats { grid-column: auto !important; }
html body .hrl-strip .hrl-stat { min-height: 0 !important; height: auto !important; padding: 8px 12px !important; flex-direction: row !important; align-items: center !important; }
html body .hrl-strip .hrl-stat b { font-size: 1.25rem !important; }
html body .hrl-strip .hrl-week { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; }
html body .hrl-strip .hrl-week i { color: var(--ex-text) !important; }
html body .hrl-strip .hrl-week i em { color: var(--ex-muted) !important; font-style: normal; font-weight: 700; font-size: .75rem; }
html body .hrl-strip .hrl-week i.is-now em { color: var(--ex-maroon) !important; }
html body .hrl-strip .hrl-week span { flex-basis: 100% !important; order: -1; }
html body .hrl-game-foot { flex-wrap: wrap; }
html body .hrl-game-foot .hrl-medal-row { gap: 6px !important; min-width: 0; }
html body .hrl-game-foot .hrl-medal-slot { width: 28px !important; min-width: 0 !important; flex: none; }
html body .hrl-game-foot .hrl-medal-slot svg { width: 26px !important; }
html body .hrl-game-go { flex: none; padding: 9px 13px !important; }

/* Practice page head: the XP progress is a labelled chip (a small bar and "110 XP to Level 3"), not a blank box */
.hrprac .hrp-xp-chip { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: auto !important; padding: 6px 10px !important; overflow: visible !important; }
.hrp-xp-track { display: inline-block; width: 64px; height: 6px; background: var(--ex-line); border-radius: 2px; overflow: hidden; }
.hrp-xp-track i { display: block; height: 100%; width: max(var(--w, 0%), 6%); background: var(--ex-blue); }

/* Home hero photo: keep the speaker on the left in view */
.ex-hero .ex-photo-img { object-position: 32% 50%; }