/* HR Blizz v4 — scoped under .hrblizz-doc (comment-aware: :root/@font-face/@keyframes/.scroll-prog kept global); urls->assets/. */
/* Mercans Design Tokens
 * Source of truth: mercans-theme (production WordPress theme, April 2026)
 * - css/critical.css → :root variables, h1/h2, button geometry
 * - tailwind.config.js → brand color names (orange1, mrc-blue)
 * - css/style.css → body 18px / 1.6875, h2 32px / #007AA4, stats 68px
 * - php templates → exact gradient borders & button widths in use
 * Fonts: Raleway (display) + Open Sans (body) — variable fonts served locally.
 */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('assets/fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('assets/fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
}

:root {
  /* ─── Core palette (verbatim from :root in critical.css + tailwind.config) ─── */
  --mc-dark-blue: #007AA4;          /* primary brand — `mrc-blue` in tailwind */
  --mc-shadow-blue: #002F3F;        /* deepest navy, dark sections */
  --mc-lightest-gray: #EEF3F5;      /* section tint, footer bg */
  --mc-light-gray: #A7B1B6;         /* borders, dividers, muted */
  --mc-dark-gray: #616C72;          /* secondary text */
  --mc-orange-600: #FF5C00;         /* `orange1` in tailwind, gradient start */
  --mc-orange-400: #FF9900;         /* gradient end (also written as #F90) */
  --mc-teal-bright: #28B7B7;        /* gradient top */
  --mc-teal-mid: #1497BA;           /* gradient mid */
  --mc-white: #FFFFFF;
  --mc-black: #000000;

  /* ─── Signature gradients (exact stops from :root) ─── */
  --mc-orange-gradient: linear-gradient(79.07deg, #FF5C00 2.07%, #F90 97.77%);
  --mc-blue-gradient: linear-gradient(180deg, #28B7B7 4.01%, #1497BA 48.94%, #007AA4 97.81%);
  /* Section accent border — used above feature blocks site-wide */
  --mc-gradient-rule: linear-gradient(to right, #FF9900, #007AA4, #28B7B7);

  /* ─── Semantic tokens ─── */
  --mc-fg: #000000;
  --mc-fg-muted: var(--mc-dark-gray);
  --mc-fg-invert: var(--mc-white);
  --mc-bg: #FFFFFF;
  --mc-bg-tint: var(--mc-lightest-gray);
  --mc-bg-deep: var(--mc-shadow-blue);
  --mc-border: var(--mc-light-gray);
  --mc-accent: var(--mc-dark-blue);
  --mc-accent-warm: var(--mc-orange-600);

  /* ─── Typography families ─── */
  --ff-display: 'Raleway', sans-serif;
  --ff-body: 'Open Sans', sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* H1 — hero / slider heading (critical.css) */
  --mc-h1-size: 64px;
  --mc-h1-line: 60px;
  --mc-h1-weight: 700;
  --mc-h1-tracking: -0.03em;
  --mc-h1-transform: none;

  /* H2 — section heading (style.css: font-size 32px, line-height 120%, color #007AA4) */
  --mc-h2-size: 32px;
  --mc-h2-line: 1.2;
  --mc-h2-weight: 400;
  --mc-h2-tracking: -0.02em;
  --mc-h2-color: var(--mc-dark-blue);

  /* H3 — sub-section (24px) */
  --mc-h3-size: 24px;
  --mc-h3-line: 1.3;
  --mc-h3-weight: 600;

  /* Hero slider title (large variant) */
  --mc-display-size: 64px;
  --mc-display-line: 60px;
  --mc-display-weight: 500;
  --mc-display-tracking: -0.03em;

  /* Stat numbers (Open Sans 700 68px / 53px / #007AA4) */
  --mc-stat-size: 68px;
  --mc-stat-line: 53px;
  --mc-stat-weight: 700;
  --mc-stat-color: var(--mc-dark-blue);

  /* Main-menu uppercase label */
  --mc-menu-size: 16px;
  --mc-menu-line: 40px;
  --mc-menu-weight: 600;
  --mc-menu-tracking: -0.02em;

  /* Body — confirmed in style.css: 18px / 1.6875 */
  --mc-body-size: 16px;
  --mc-body-line: 20px;
  --mc-body-weight: 400;

  /* Small print / label */
  --mc-small-size: 14px;
  --mc-small-line: 1.5;

  --mc-tiny-size: 12px;
  --mc-tiny-weight: 600;

  /* ─── Spacing — 4px base, derived from header/section padding ─── */
  --mc-space-1: 4px;
  --mc-space-2: 8px;
  --mc-space-3: 12px;
  --mc-space-4: 16px;
  --mc-space-5: 20px;
  --mc-space-6: 24px;
  --mc-space-8: 32px;
  --mc-space-10: 40px;
  --mc-space-12: 48px;
  --mc-space-15: 60px;
  --mc-space-20: 80px;
  --mc-space-24: 96px;
  --mc-space-32: 128px;
  --mc-space-40: 160px;
  --mc-space-48: 192px;
  /* Apple-style section rhythm */
  --mc-section-y: clamp(120px, 12vw, 192px);
  --mc-section-y-tight: clamp(80px, 8vw, 120px);
  --mc-gutter: clamp(24px, 6vw, 96px);
  --mc-content-narrow: 720px;
  --mc-content-mid: 980px;
  --mc-content-wide: 1240px;

  /* ─── Radii (button 8px, input 6px from critical.css) ─── */
  --mc-radius-sm: 6px;
  --mc-radius-md: 8px;
  --mc-radius-lg: 16px;
  --mc-radius-pill: 999px;

  /* ─── Shadows ─── */
  --mc-shadow-card: 0px 4px 12px rgba(0, 0, 0, 0.15);
  --mc-shadow-dropdown: 0px 8px 16px rgba(0, 0, 0, 0.2);
  --mc-shadow-modal: 0 0 65px rgba(0, 0, 0, 0.5);

  /* ─── Buttons ─── */
  --mc-btn-radius: 8px;
  --mc-btn-height: 40px;          /* compact (.mrc-btn-primary) */
  --mc-btn-height-lg: 48px;       /* hero / large (.gpo-button-section8) */
  --mc-btn-min-width: 115px;
  --mc-btn-min-width-lg: 264px;
  --mc-btn-size: 16px;
  --mc-btn-weight: 600;
}

.hrblizz-doc /* ─── Type styles ─── */
.mc-h1{
  font-family: var(--ff-display);
  font-weight: var(--mc-h1-weight);
  font-size: var(--mc-h1-size);
  line-height: var(--mc-h1-line);
  letter-spacing: var(--mc-h1-tracking);
  text-transform: var(--mc-h1-transform);
  color: var(--mc-fg);
  margin: 0;
}

.hrblizz-doc .mc-h2{
  font-family: var(--ff-display);
  font-weight: var(--mc-h2-weight);
  font-size: var(--mc-h2-size);
  line-height: var(--mc-h2-line);
  letter-spacing: var(--mc-h2-tracking);
  color: var(--mc-h2-color);
  margin: 0;
}

.hrblizz-doc .mc-h3{
  font-family: var(--ff-display);
  font-weight: var(--mc-h3-weight);
  font-size: var(--mc-h3-size);
  line-height: var(--mc-h3-line);
  color: var(--mc-fg);
  margin: 0;
}

.hrblizz-doc .mc-display{
  font-family: var(--ff-display);
  font-weight: var(--mc-display-weight);
  font-size: var(--mc-display-size);
  line-height: var(--mc-display-line);
  letter-spacing: var(--mc-display-tracking);
  margin: 0;
}

.hrblizz-doc .mc-stat{
  font-family: var(--ff-body);
  font-weight: var(--mc-stat-weight);
  font-size: var(--mc-stat-size);
  line-height: var(--mc-stat-line);
  color: var(--mc-stat-color);
  letter-spacing: -0.02em;
}

.hrblizz-doc .mc-menu{
  font-family: var(--ff-body);
  font-weight: var(--mc-menu-weight);
  font-size: var(--mc-menu-size);
  line-height: var(--mc-menu-line);
  letter-spacing: var(--mc-menu-tracking);
  text-transform: uppercase;
  color: var(--mc-fg);
}

.hrblizz-doc .mc-body{
  font-family: var(--ff-body);
  font-weight: var(--mc-body-weight);
  font-size: var(--mc-body-size);
  line-height: var(--mc-body-line);
  color: var(--mc-fg);
}

.hrblizz-doc .mc-small{
  font-family: var(--ff-body);
  font-size: var(--mc-small-size);
  line-height: var(--mc-small-line);
  color: var(--mc-fg-muted);
}

.hrblizz-doc .mc-tiny{
  font-family: var(--ff-body);
  font-size: var(--mc-tiny-size);
  font-weight: var(--mc-tiny-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mc-fg-muted);
}

.hrblizz-doc /* ─── Buttons ─── */
.mc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--mc-btn-height);
  min-width: var(--mc-btn-min-width);
  padding: 0 24px;
  border: 0;
  border-radius: var(--mc-btn-radius);
  font-family: var(--ff-body);
  font-size: var(--mc-btn-size);
  font-weight: var(--mc-btn-weight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.hrblizz-doc .mc-btn:hover{ filter: brightness(1.05); }
.hrblizz-doc .mc-btn:active{ transform: translateY(1px); }

.hrblizz-doc .mc-btn--lg{
  height: var(--mc-btn-height-lg);
  min-width: var(--mc-btn-min-width-lg);
  font-size: 18px;
}

.hrblizz-doc .mc-btn--primary{
  background: var(--mc-orange-gradient);
  color: var(--mc-white);
}

.hrblizz-doc .mc-btn--secondary{
  background: transparent;
  color: var(--mc-orange-600);
  border: 3px solid var(--mc-orange-600);
}

.hrblizz-doc .mc-btn--ghost-light{
  background: transparent;
  color: var(--mc-white);
  border: 2px solid var(--mc-white);
}

.hrblizz-doc .mc-btn--solid-blue{
  background: var(--mc-dark-blue);
  color: var(--mc-white);
}

.hrblizz-doc /* ─── Cards ─── */
.mc-card{
  background: var(--mc-white);
  border-radius: var(--mc-radius-md);
  box-shadow: var(--mc-shadow-card);
  padding: var(--mc-space-8);
}

.hrblizz-doc /* ─── Gradient rule (signature divider/border) ─── */
.mc-rule{
  height: 4px;
  background: var(--mc-gradient-rule);
  border: 0;
  border-radius: 2px;
}

/.hrblizz-doc * ─── Reset for preview pages ─── */
*, .hrblizz-doc *::before, .hrblizz-doc *::after{ box-sizing: border-box; }
.hrblizz-doc{
  margin: 0;
  font-family: var(--ff-body);
  color: var(--mc-fg);
}

.hrblizz-doc /* Buttons — design-system tokens with hover lift + sheen + arrow nudge */
.mc-btn{
  --shadow-base: 0 1px 2px rgba(0,47,63,.08), 0 2px 6px rgba(0,47,63,.06);
  --shadow-hover: 0 6px 14px -4px rgba(0,47,63,.22), 0 12px 28px -10px rgba(0,47,63,.18);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;
  font-family:var(--ff-body);font-weight:700;letter-spacing:-0.16px;line-height:1;
  color:#fff;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-base);
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    box-shadow 220ms cubic-bezier(.2,.7,.2,1),
    background-color 220ms ease,
    filter 220ms ease;
  will-change:transform;
}
.hrblizz-doc .mc-btn--sm{height:36px;padding:0 16px;font-size:14px;border-radius:var(--mc-radius-md)}
.hrblizz-doc .mc-btn--md{height:46px;padding:0 20px;font-size:16px;border-radius:var(--mc-radius-md)}
.hrblizz-doc .mc-btn--lg{height:54px;padding:0 24px;font-size:18px;border-radius:12px}
.hrblizz-doc .mc-btn--pill{border-radius:var(--mc-radius-pill)}

.hrblizz-doc /* Variants — single-color tokens, .hrblizz-doc matches /buttons-primary preview */
.mc-btn--primary{background:var(--mc-orange-600);color:#fff}
.hrblizz-doc .mc-btn--primary:hover{background:#D94F00}
.hrblizz-doc .mc-btn--tealPrimary{background:var(--mc-dark-blue);color:#fff}
.hrblizz-doc .mc-btn--tealPrimary:hover{background:#005F80}
.hrblizz-doc .mc-btn--secondary{background:#fff;color:var(--mc-dark-blue);border:1.5px solid var(--mc-dark-blue)}
.hrblizz-doc .mc-btn--tealSolid{background:var(--mc-dark-blue);color:#fff}
.hrblizz-doc .mc-btn--tealOutline{background:#fff;color:var(--mc-dark-blue);border:1.5px solid var(--mc-dark-blue)}
.hrblizz-doc .mc-btn--ghost{background:transparent;color:var(--mc-dark-blue);box-shadow:none;padding-left:4px;padding-right:4px}
.hrblizz-doc .mc-btn--onDark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);box-shadow:none}

.hrblizz-doc /* Sheen sweep */
.mc-btn::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform:translateX(-160%) skewX(-18deg);
  transition:transform 700ms cubic-bezier(.2,.7,.2,1);
  pointer-events:none;z-index:1;
}
.hrblizz-doc .mc-btn > *{position:relative;z-index:2}
.hrblizz-doc .mc-btn:hover{transform:translateY(-1.5px);box-shadow:var(--shadow-hover)}
.hrblizz-doc .mc-btn:hover::before{transform:translateX(420%) skewX(-18deg)}
.hrblizz-doc .mc-btn:active{transform:translateY(0);box-shadow:var(--shadow-base);transition-duration:80ms}
.hrblizz-doc .mc-btn--ghost:hover, .hrblizz-doc .mc-btn--onDark:hover{box-shadow:none}
.hrblizz-doc .mc-btn--onDark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7)}
.hrblizz-doc .mc-btn--secondary:hover, .hrblizz-doc .mc-btn--tealOutline:hover{background:#F4FAFC}

.hrblizz-doc /* Arrow nudge */
.mc-btn-arrow{transition:transform 240ms cubic-bezier(.2,.7,.2,1)}
.hrblizz-doc .mc-btn:hover .mc-btn-arrow{transform:translateX(3px)}
.hrblizz-doc .mc-btn:active .mc-btn-arrow{transform:translateX(1px)}

.hrblizz-doc /* Focus ring */
.mc-btn:focus-visible{outline:0;box-shadow:var(--shadow-hover),0 0 0 3px #fff,0 0 0 5px rgba(0,122,164,.55)}
.hrblizz-doc .mc-btn--primary:focus-visible{box-shadow:var(--shadow-hover),0 0 0 3px #fff,0 0 0 5px rgba(255,92,0,.55)}
.hrblizz-doc .mc-btn--tealPrimary:focus-visible{box-shadow:var(--shadow-hover),0 0 0 3px #fff,0 0 0 5px rgba(0,122,164,.55)}

.hrblizz-doc /* Topbar banner — matches /banners-chips dark style: hairline border, .hrblizz-doc dot, .hrblizz-doc lead+copy, .hrblizz-doc capsule CTA */
.mc-topbar{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,#0a3a4d,#002F3F);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  padding:10px var(--mc-space-12);
  font-family:var(--ff-body);font-size:14px;font-weight:500;letter-spacing:-0.1px;
}
.hrblizz-doc .mc-topbar .mc-topbar-dot{
  width:6px;height:6px;border-radius:999px;background:#28B7B7;
  box-shadow:0 0 0 4px rgba(40,183,183,.18);flex-shrink:0;
}
.hrblizz-doc .mc-topbar .mc-topbar-lead{font-weight:700;color:#fff;letter-spacing:-0.16px}
.hrblizz-doc .mc-topbar .mc-topbar-copy{color:rgba(255,255,255,.66);font-weight:500}
.hrblizz-doc .mc-topbar .mc-topbar-cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 12px;border-radius:999px;
  background:rgba(40,183,183,.18);border:1px solid rgba(40,183,183,.28);
  color:#7CD9D9;font-weight:600;font-size:13px;letter-spacing:-0.1px;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease, transform .2s ease;
}
.hrblizz-doc .mc-topbar .mc-topbar-cta:hover{background:rgba(40,183,183,.26)}
.hrblizz-doc .mc-topbar .mc-topbar-cta svg{width:12px;height:12px;transition:transform .2s ease}
.hrblizz-doc .mc-topbar .mc-topbar-cta:hover svg{transform:translateX(2px)}

@media (prefers-reduced-motion: reduce){
  .hrblizz-doc .mc-btn, .hrblizz-doc .mc-btn::before, .hrblizz-doc .mc-btn-arrow{transition:none}
  .hrblizz-doc .mc-btn:hover{transform:none}
  .hrblizz-doc .mc-btn:hover .mc-btn-arrow{transform:none}
}

/* ── Site shadows + utility tokens used across components ── */
:root{
  --sh-1: 0 1px 2px rgba(0,47,63,0.04), 0 1px 1px rgba(0,47,63,0.03);
  --sh-2: 0 2px 4px rgba(0,47,63,0.05), 0 4px 8px rgba(0,47,63,0.04);
  --sh-3: 0 4px 8px rgba(0,47,63,0.06), 0 8px 20px rgba(0,47,63,0.06);
  --sh-4: 0 8px 16px rgba(0,47,63,0.07), 0 16px 36px rgba(0,47,63,0.08);
  --sh-5: 0 12px 24px rgba(0,47,63,0.08), 0 30px 60px rgba(0,47,63,0.10);
}

.hrblizz-doc /* Card hover lift (matches Shadows preview) */
.mc-tile{
  transition:transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.hrblizz-doc .mc-tile:hover{transform:translateY(-4px); box-shadow:var(--sh-4)}
@media (prefers-reduced-motion: reduce){
  .hrblizz-doc .mc-tile{transition:none}
  .hrblizz-doc .mc-tile:hover{transform:none}
}

.hrblizz-doc /* Soft squircle feature-icon tile (matches Feature icons preview, Option A) */
.mc-feat-tile{
  width:72px;height:72px;border-radius:20px;
  display:grid;place-items:center;position:relative;isolation:isolate;
  background:var(--bg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px var(--edge) inset,
    0 1px 1px rgba(15,30,45,.04),
    0 6px 14px -4px rgba(15,30,45,.10),
    0 12px 28px -10px rgba(15,30,45,.08);
}
.hrblizz-doc .mc-feat-tile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%);
  pointer-events:none;mix-blend-mode:soft-light;
}
.hrblizz-doc .mc-feat-tile svg{width:32px;height:32px;color:var(--fg);position:relative;z-index:2;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}

.hrblizz-doc .mc-feat-tile.t-blue{--bg:oklch(96% 0.025 220);--fg:oklch(48% 0.11 225);--edge:oklch(88% 0.04 220)}
.hrblizz-doc .mc-feat-tile.t-teal{--bg:oklch(95% 0.04 195);--fg:oklch(52% 0.11 195);--edge:oklch(86% 0.06 195)}
.hrblizz-doc .mc-feat-tile.t-amber{--bg:oklch(96% 0.04 85);--fg:oklch(58% 0.13 70);--edge:oklch(90% 0.05 80)}
.hrblizz-doc .mc-feat-tile.t-orange{--bg:oklch(96% 0.035 60);--fg:oklch(58% 0.16 45);--edge:oklch(90% 0.06 55)}
.hrblizz-doc .mc-feat-tile.t-mint{--bg:oklch(95% 0.045 175);--fg:oklch(50% 0.10 180);--edge:oklch(86% 0.06 180)}

.hrblizz-doc /* Soft gradients (signature) */
.mc-grad-blue{
  background:
    radial-gradient(80% 60% at 50% 0%,  oklch(85% 0.10 195 / .55), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, oklch(45% 0.10 230 / .35), transparent 70%),
    linear-gradient(in oklch 180deg,
      oklch(82% 0.13 195) 0%,
      oklch(72% 0.12 200) 30%,
      oklch(62% 0.12 210) 60%,
      oklch(52% 0.12 225) 100%);
}

.hrblizz-doc /* Nav link underline hover */
.mc-nav-link{position:relative;transition:color 200ms ease}
.hrblizz-doc .mc-nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--mc-dark-blue);
  transform:scaleX(0);transform-origin:left;
  transition:transform 280ms cubic-bezier(.2,.7,.2,1);
}
.hrblizz-doc .mc-nav-link:hover{color:var(--mc-dark-blue)}
.hrblizz-doc .mc-nav-link:hover::after, .hrblizz-doc .mc-nav-link.is-active::after{transform:scaleX(1)}

.hrblizz-doc /* Footer link hover */
.mc-foot-link{transition:color 200ms ease, transform 200ms ease;display:inline-block}
.hrblizz-doc .mc-foot-link:hover{color:#fff !important;transform:translateX(2px)}

.hrblizz-doc /* Social icon hover */
.mc-soc{transition:background-color 200ms ease, transform 200ms ease}
.hrblizz-doc .mc-soc:hover{background:rgba(255,255,255,.10);transform:translateY(-2px)}

.hrblizz-doc /* Tab underline */
.mc-tab{position:relative;transition:color 220ms ease}
.hrblizz-doc .mc-tab::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;
  background:var(--mc-orange-400);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}
.hrblizz-doc .mc-tab.is-active::after{transform:scaleX(1)}
.hrblizz-doc .mc-tab:hover{color:var(--mc-dark-blue)}




/* ============================================================
   HR Blizz Architecture — site styles
   Layout: fixed left sidebar + sticky top tab bar + 1160px content
   ============================================================ */

:root{
  --sidebar-w: 268px;
  --content-max: 1160px;
  --ink: #16242b;            /* body ink, softer than pure black */
  --ink-soft: #4a5a62;       /* secondary */
  --line: #dde6ea;           /* hairline */
  --line-soft: #eaf0f3;
  --wash: #eef3f5;           /* section tint */
  --wash-cyan: #e6f2f6;
  --navy: #002F3F;
  --navy-2: #0a3a4d;
  --teal: #007AA4;
  --teal-bright: #28B7B7;
  --orange: #FF5C00;
  --amber: #FF9900;
  --red: #d92d20;
  --ease: cubic-bezier(.2,.7,.2,1);
}

.hrblizz-doc *{box-sizing:border-box}
html{scroll-behavior:smooth}
.hrblizz-doc{
  margin:0;color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

.hrblizz-doc a{color:var(--teal);text-decoration:none}

.hrblizz-doc /* ───────────────────────── Layout shell ───────────────────────── */
.layout{display:block}
.hrblizz-doc .main{margin:4rem auto;max-width:var(--content-max);width:100%;min-height:100vh;display:flex;flex-direction:column;
  background:#fff;box-shadow:0 0 90px -26px rgba(0,47,63,.34);border-radius:.5rem}
.hrblizz-doc .page > section:last-child{border-radius:0 0 .5rem .5rem}

.hrblizz-doc /* ───────────────────────── Sidebar ───────────────────────── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:50;
  background:linear-gradient(180deg,#04313f 0%, #002431 100%);
  color:#fff;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  padding:26px 22px 22px;
}
.hrblizz-doc .sidebar__brand{display:flex;align-items:center;gap:11px;padding:0 4px 4px}
.hrblizz-doc .sidebar__brand img{height:34px;width:auto;display:block}
.hrblizz-doc .sidebar__brandmark{
  width:36px;height:36px;border-radius:50%;background:#04222c;
  display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--ff-display);font-weight:800;font-size:13px;color:var(--orange);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);letter-spacing:-.02em;
}
.hrblizz-doc .sidebar__brandtext{font-family:var(--ff-display);font-weight:600;font-size:19px;color:#fff;letter-spacing:-.01em;line-height:1}
.hrblizz-doc .sidebar__brandtext b{font-weight:300}

.hrblizz-doc .sidebar__nav{margin-top:30px}
.hrblizz-doc .side-link{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;
  color:rgba(255,255,255,.82);font-family:var(--ff-body);font-weight:600;font-size:15px;
  cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease);
  position:relative;
}
.hrblizz-doc .side-link svg{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.hrblizz-doc .side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.hrblizz-doc .side-link.is-active{background:rgba(40,183,183,.16);color:#fff}
.hrblizz-doc .side-link.is-active::before{
  content:"";position:absolute;left:-22px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--teal-bright);
}

.hrblizz-doc .sidebar__toc{margin-top:26px;border-top:1px solid rgba(255,255,255,.08);padding-top:20px;
  flex:1 1 auto;overflow-y:auto;min-height:0;}
.hrblizz-doc .sidebar__toc::-webkit-scrollbar{width:6px}
.hrblizz-doc .sidebar__toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.hrblizz-doc .toc-label{font-family:var(--ff-body);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42);padding:0 14px 10px}
.hrblizz-doc .toc-link{
  display:block;padding:7px 14px;border-radius:8px;
  color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.35;cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease);
  border-left:2px solid transparent;
}
.hrblizz-doc .toc-link:hover{color:rgba(255,255,255,.92)}
.hrblizz-doc .toc-link.is-active{color:#fff;background:rgba(255,255,255,.05);border-left-color:var(--orange)}

.hrblizz-doc .sidebar__foot{margin-top:14px;padding:14px 14px 0;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:rgba(255,255,255,.4);line-height:1.5;display:flex;align-items:center;gap:8px}
.hrblizz-doc .sidebar__foot .dot{width:5px;height:5px;border-radius:50%;background:var(--teal-bright);flex:0 0 auto}

.hrblizz-doc /* ───────────────────────── Top bar (tabs) ───────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);border-radius:.5rem .5rem 0 0;
}
.hrblizz-doc .topbar__inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--mc-space-10);
  display:flex;align-items:center;gap:8px;height:64px;overflow-x:auto;scrollbar-width:none}
.hrblizz-doc .topbar__inner::-webkit-scrollbar{display:none}
.hrblizz-doc .topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:30px;flex:0 0 auto}
.hrblizz-doc .topbar__mark{width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--orange);display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:12px;letter-spacing:-.02em;flex:0 0 auto}
.hrblizz-doc .topbar__bt{font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--navy);white-space:nowrap;letter-spacing:-.01em}
.hrblizz-doc .topbar__bt b{color:var(--teal)}
.hrblizz-doc .tab{
  position:relative;display:inline-flex;align-items:center;gap:9px;height:64px;padding:0 4px;
  margin-right:26px;color:var(--ink-soft);font-family:var(--ff-body);font-weight:600;font-size:15px;
  cursor:pointer;transition:color .2s var(--ease);white-space:nowrap;
}
.hrblizz-doc .tab .tab-num{font-size:11px;font-weight:700;color:var(--mc-light-gray);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;transition:all .2s var(--ease)}
.hrblizz-doc .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hrblizz-doc .tab:hover{color:var(--teal)}
.hrblizz-doc .tab.is-active{color:var(--navy)}
.hrblizz-doc .tab.is-active::after{transform:scaleX(1)}
.hrblizz-doc .tab.is-active .tab-num{color:#fff;background:var(--teal);border-color:var(--teal)}
.hrblizz-doc .topbar__cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.hrblizz-doc .topbar__meta{font-size:12.5px;color:var(--mc-light-gray);font-weight:600;letter-spacing:.01em}

.hrblizz-doc .menu-btn{display:none}

.hrblizz-doc /* ───────────────────────── Hero ───────────────────────── */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#063646 0%, #002a38 55%, #001b25 100%);
}
.hrblizz-doc .hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 88% -10%, rgba(40,183,183,.32), transparent 60%),
             radial-gradient(50% 80% at 5% 110%, rgba(0,122,164,.34), transparent 60%);
  pointer-events:none}
.hrblizz-doc .hero::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:screen;
  background-image:url('assets/imagery/fluid-teal.jpg');background-size:cover;background-position:center;
  pointer-events:none}
.hrblizz-doc .hero__inner{position:relative;max-width:var(--content-max);margin:0 auto;
  padding:84px var(--mc-space-10) 76px}
.hrblizz-doc .hero__eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-body);font-weight:700;font-size:13px;letter-spacing:.04em;
  color:#7fe0e0;text-transform:uppercase;margin-bottom:22px}
.hrblizz-doc .hero__eyebrow .pill{padding:5px 12px;border-radius:999px;background:rgba(40,183,183,.14);
  border:1px solid rgba(40,183,183,.3);color:#9fe9e9;letter-spacing:.02em}
.hrblizz-doc .hero h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(38px,5vw,60px);
  line-height:1.04;letter-spacing:-.025em;margin:0;max-width:18ch;color:#fff}
.hrblizz-doc .hero__lead{margin:24px 0 0;max-width:62ch;font-size:18.5px;line-height:1.65;color:rgba(255,255,255,.78)}
.hrblizz-doc .hero__doctype{font-size:14px;color:rgba(255,255,255,.55);margin-top:18px;font-weight:600}

.hrblizz-doc /* hero stats */
.hero__stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:46px}
.hrblizz-doc .hstat{flex:1 1 0;min-width:180px;padding:22px 24px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(4px)}
.hrblizz-doc .hstat__num{font-family:var(--ff-body);font-weight:800;font-size:46px;line-height:1;
  color:#fff;letter-spacing:-.02em}
.hrblizz-doc .hstat__num .u{color:var(--teal-bright)}
.hrblizz-doc .hstat__lbl{margin-top:10px;font-size:14px;color:rgba(255,255,255,.66);line-height:1.4}

.hrblizz-doc /* ───────────────────────── Content sections ───────────────────────── */
.page{flex:1 1 auto}
.hrblizz-doc .wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--mc-space-10)}
.hrblizz-doc section.sec{padding:78px 0}
.hrblizz-doc section.sec.tint{background:var(--wash)}
.hrblizz-doc section.sec.tint + section.sec.tint{padding-top:0}

.hrblizz-doc .sec-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:34px}
.hrblizz-doc .sec-num{flex:0 0 auto;font-family:var(--ff-display);font-weight:700;font-size:15px;
  color:var(--teal);background:#fff;border:1.5px solid var(--teal);border-radius:10px;
  width:46px;height:46px;display:grid;place-items:center;letter-spacing:-.02em;
  box-shadow:0 4px 10px -4px rgba(0,122,164,.4)}
.hrblizz-doc .tint .sec-num{background:var(--wash)}
.hrblizz-doc .sec-eyebrow{font-family:var(--ff-body);font-weight:700;font-size:13px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--orange);margin:0 0 8px}
.hrblizz-doc .sec-title{font-family:var(--ff-display);font-weight:700;font-size:clamp(26px,3vw,36px);
  line-height:1.12;letter-spacing:-.02em;color:var(--navy);margin:0}
.hrblizz-doc .sec-head .sec-title{margin-top:2px}
.hrblizz-doc .sec-title::after{content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--orange);margin-top:14px}

.hrblizz-doc .prose{font-size:17px;line-height:1.75;color:var(--ink);max-width:none}
.hrblizz-doc .prose p{margin:0 0 18px}
.hrblizz-doc .prose strong{font-weight:700;color:var(--navy)}
.hrblizz-doc .prose a{color:var(--teal);border-bottom:1px solid rgba(0,122,164,.3)}
.hrblizz-doc .prose a:hover{border-bottom-color:var(--teal)}
.hrblizz-doc .lead-para{font-size:19px;line-height:1.6;color:var(--ink);max-width:72ch}
.hrblizz-doc .lead-para strong{color:var(--navy)}

.hrblizz-doc /* callout — "ARCHITECTURE POSITION", .hrblizz-doc "OPERATING PRINCIPLE" etc */
.callout{position:relative;margin:30px 0 0;padding:24px 28px 24px 30px;border-radius:14px;
  background:linear-gradient(180deg,#f3f9fb,#eaf3f6);border:1px solid #d6e7ee;overflow:hidden}
.hrblizz-doc .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--teal-bright),var(--teal))}
.hrblizz-doc .callout__label{font-family:var(--ff-body);font-weight:800;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.hrblizz-doc .callout p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.hrblizz-doc .callout.warm{background:linear-gradient(180deg,#fff6ef,#fdeee2);border-color:#f6d8c2}
.hrblizz-doc .callout.warm::before{background:linear-gradient(180deg,var(--amber),var(--orange))}
.hrblizz-doc .callout.warm .callout__label{color:var(--orange)}

.hrblizz-doc /* bullet lists */
.flist{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:14px}
.hrblizz-doc .flist li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.6;color:var(--ink);max-width:none}
.hrblizz-doc .flist li::before{content:"";position:absolute;left:4px;top:9px;width:9px;height:9px;border-radius:3px;
  background:var(--teal);transform:rotate(45deg);box-shadow:0 0 0 4px rgba(0,122,164,.1)}
.hrblizz-doc .flist li b, .hrblizz-doc .flist li strong{font-weight:700;color:var(--navy)}

.hrblizz-doc /* feature grid (principles, etc.) */
.grid{display:grid;gap:18px}
.hrblizz-doc .grid.cols-2{grid-template-columns:repeat(2,1fr)}
.hrblizz-doc .grid.cols-3{grid-template-columns:repeat(3,1fr)}
.hrblizz-doc .grid.cols-4{grid-template-columns:repeat(4,1fr)}
.hrblizz-doc .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
  box-shadow:var(--sh-2)}
.hrblizz-doc .tint .card{box-shadow:var(--sh-1)}
.hrblizz-doc .card__kicker{font-family:var(--ff-display);font-weight:800;font-size:13px;color:var(--teal);
  letter-spacing:.02em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.hrblizz-doc .card__kicker .n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),#005f80);color:#fff;font-size:13px;font-weight:800}
.hrblizz-doc .card h3{font-family:var(--ff-display);font-weight:700;font-size:20px;color:var(--navy);margin:0 0 8px;line-height:1.2}
.hrblizz-doc .card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}

.hrblizz-doc /* data tables */
.tbl-wrap{margin-top:26px;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-2);background:#fff}
.hrblizz-doc table.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.hrblizz-doc table.tbl th{background:var(--navy);color:#fff;text-align:left;font-family:var(--ff-body);
  font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding:14px 22px}
.hrblizz-doc table.tbl td{padding:16px 22px;border-top:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--ink)}
.hrblizz-doc table.tbl tr:nth-child(even) td{background:#f8fbfc}
.hrblizz-doc table.tbl td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
.hrblizz-doc table.tbl td.wrap-first:first-child{white-space:normal;width:30%}
.hrblizz-doc table.tbl .mono{font-family:var(--ff-mono);font-size:13.5px;background:#eef3f5;padding:1px 7px;border-radius:5px;color:var(--teal)}

.hrblizz-doc /* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.hrblizz-doc .chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:999px;
  font-size:13px;font-weight:600;background:#eef3f5;color:var(--teal);border:1px solid #d6e7ee}
.hrblizz-doc .chip.warm{background:#fff1e7;color:var(--orange);border-color:#f6d8c2}

.hrblizz-doc /* ============================================================
   DIAGRAM SYSTEM — flat, .hrblizz-doc on-brand, .hrblizz-doc honors the document legend:
   orange bar = enforcement point (firewall/WAF/proxy)
   dark band  = internal platform layer (queue/persistence/infra)
   dashed     = replication / exception / key-exchange (out-of-band)
   red        = failure / rejection / disaster / retest
   ============================================================ */
.figure{margin:34px 0 0}
.hrblizz-doc .dgm{position:relative;background:
   radial-gradient(120% 100% at 50% 0%, #fbfdfe, #f3f8fa);
  border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--sh-3);overflow:hidden}
.hrblizz-doc .dgm::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,122,164,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,122,164,.045) 1px,transparent 1px);
  background-size:26px 26px;pointer-events:none;mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 85%)}
.hrblizz-doc .dgm > *{position:relative}
.hrblizz-doc .dgm-img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:18px;
  padding:18px;background:radial-gradient(120% 100% at 50% 0%, #fbfdfe, #f3f8fa);box-shadow:var(--sh-3)}
.hrblizz-doc .figcap{margin-top:16px;font-size:14px;line-height:1.55;color:var(--ink-soft);display:flex;gap:9px}
.hrblizz-doc .figcap .figtag{flex:0 0 auto;font-weight:700;color:var(--teal);font-family:var(--ff-body)}

.hrblizz-doc .dgm-title{font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--navy);
  text-align:center;margin:0 0 4px;letter-spacing:.01em}
.hrblizz-doc .dgm-sub{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:0 0 22px}

.hrblizz-doc /* node box */
.node{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;
  box-shadow:0 2px 5px rgba(0,47,63,.05);text-align:center;min-width:0;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.hrblizz-doc .node:hover{transform:translateY(-3px);box-shadow:0 10px 22px -8px rgba(0,47,63,.22);border-color:#bcd5de}
.hrblizz-doc .node .nt{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--navy);line-height:1.2;letter-spacing:-.01em}
.hrblizz-doc .node .ns{font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.35}
.hrblizz-doc .node .nicon{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--teal)}

.hrblizz-doc .node--teal{background:linear-gradient(180deg,#f1fafb,#e4f4f6);border-color:#bfe3e6}
.hrblizz-doc .node--teal .nt{color:#055e6b}
.hrblizz-doc .node--blue{background:linear-gradient(180deg,#eef6fb,#e0eef7);border-color:#c2dcee}
.hrblizz-doc .node--blue .nt{color:var(--teal)}
.hrblizz-doc .node--ai{background:linear-gradient(180deg,#fff4ea,#ffe9d6);border-color:#f7d2af}
.hrblizz-doc .node--ai .nt{color:#b4521a}
.hrblizz-doc .node--amber{background:linear-gradient(180deg,#fff6e6,#ffedc9);border-color:#f3d795}
.hrblizz-doc .node--amber .nt{color:#9a6a00}
.hrblizz-doc .node--ghost{background:#f7fafb;border-style:dashed;border-color:#c3d4db}

.hrblizz-doc /* dark node / band — internal platform layer */
.node--dark{background:linear-gradient(180deg,#0a3a4d,#002a38);border-color:#0a3a4d;
  box-shadow:0 8px 18px -8px rgba(0,30,40,.5)}
.hrblizz-doc .node--dark .nt{color:#fff}
.hrblizz-doc .node--dark .ns{color:rgba(255,255,255,.62)}
.hrblizz-doc .node--dark .nicon{color:var(--teal-bright)}

.hrblizz-doc /* red node — failure / disaster / rejection */
.node--fail{background:linear-gradient(180deg,#fdecea,#fbdcd8);border-color:#f3b4ac}
.hrblizz-doc .node--fail .nt{color:var(--red)}
.hrblizz-doc .node--fail .ns{color:#a3392f}

.hrblizz-doc /* boundary bar — enforcement point */
.boundary{display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#ff6a14,#f24f00);color:#fff;border-radius:10px;
  padding:9px 16px;font-family:var(--ff-body);font-weight:700;font-size:12.5px;letter-spacing:.02em;
  box-shadow:0 6px 14px -6px rgba(242,79,0,.5);text-align:center}
.hrblizz-doc .boundary svg{width:15px;height:15px;flex:0 0 auto}
.hrblizz-doc .boundary .bsub{font-weight:600;opacity:.85;font-size:11px}
.hrblizz-doc .boundary--v{flex-direction:column;writing-mode:vertical-rl;text-orientation:mixed;padding:16px 9px}
.hrblizz-doc .boundary--stack{flex-direction:column;gap:5px;padding:12px 18px;line-height:1.35}
.hrblizz-doc .boundary--stack .brow{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.hrblizz-doc .boundary--stack .bsub{display:block;width:100%}

.hrblizz-doc /* band — full-width internal layer label */
.band{background:linear-gradient(90deg,#0a3a4d,#063040);color:#fff;border-radius:12px;
  padding:14px 20px;display:flex;align-items:center;gap:12px}
.hrblizz-doc .band__tag{font-family:var(--ff-body);font-weight:800;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-bright);flex:0 0 auto}
.hrblizz-doc .band__row{display:flex;gap:10px;flex:1 1 auto;flex-wrap:wrap}

.hrblizz-doc /* layered tier wrapper */
.tier{border:1.5px solid var(--line);border-radius:16px;padding:20px;background:rgba(255,255,255,.6);
  position:relative}
.hrblizz-doc .tier__label{position:absolute;top:-11px;left:20px;background:#fff;padding:2px 12px;border-radius:999px;
  font-family:var(--ff-body);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--line);white-space:nowrap}
.hrblizz-doc .tier.tier--data{background:linear-gradient(180deg,#06303f,#02212c);border-color:#0a3a4d}
.hrblizz-doc .tier.tier--data .tier__label{background:#06303f;color:var(--teal-bright);border-color:#0a3a4d}

.hrblizz-doc /* generic flex rows for diagrams */
.drow{display:flex;align-items:stretch;gap:14px}
.hrblizz-doc .drow.center{align-items:center}
.hrblizz-doc .dcol{display:flex;flex-direction:column;gap:14px}
.hrblizz-doc .dcol.center{align-items:center}
.hrblizz-doc .deq{flex:1 1 0}
.hrblizz-doc .dgrid{display:grid;gap:12px}

.hrblizz-doc /* connector / arrow */
.conn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#90b6c4;
  align-self:center}
.hrblizz-doc .conn svg{display:block}
.hrblizz-doc .conn--down{transform:rotate(90deg)}
.hrblizz-doc .vstack-conn{display:flex;justify-content:center;align-items:center;color:#90b6c4;padding:1px 0}
.hrblizz-doc .vstack-conn svg{transform:rotate(90deg)}
.hrblizz-doc .conn--dash svg path{stroke-dasharray:4 4}
.hrblizz-doc .conn--red{color:var(--red)}
.hrblizz-doc .conn--label{position:relative}
.hrblizz-doc .cn-tag{font-size:10.5px;font-weight:700;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}
.hrblizz-doc .cn-tag.dash{border-style:dashed;color:var(--teal)}
.hrblizz-doc .cn-tag.red{color:var(--red);border-color:#f3b4ac;background:#fdecea}

.hrblizz-doc /* legend */
.legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:18px;padding:16px 20px;
  background:#f7fafb;border:1px solid var(--line);border-radius:12px}
.hrblizz-doc .legend__item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.hrblizz-doc .legend__sw{width:26px;height:14px;border-radius:5px;flex:0 0 auto}
.hrblizz-doc .legend__sw.orange{background:linear-gradient(180deg,#ff6a14,#f24f00)}
.hrblizz-doc .legend__sw.dark{background:linear-gradient(90deg,#0a3a4d,#063040)}
.hrblizz-doc .legend__sw.dash{background:#fff;border:1.5px dashed var(--teal)}
.hrblizz-doc .legend__sw.red{background:linear-gradient(180deg,#fdecea,#fbdcd8);border:1.5px solid #f3b4ac}

.hrblizz-doc /* small label/tag inside diagrams */
.dtag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;background:#eef3f5;color:var(--teal);border:1px solid #d6e7ee}
.hrblizz-doc .dtag.dash{border-style:dashed}
.hrblizz-doc .dtag.warm{background:#fff1e7;color:var(--orange);border-color:#f6d8c2}

.hrblizz-doc /* map (private cloud) */
.mapwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.hrblizz-doc .region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hrblizz-doc .region{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:6px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hrblizz-doc .region:hover{transform:translateY(-3px);box-shadow:0 10px 22px -8px rgba(0,47,63,.2)}
.hrblizz-doc .region__flag{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--teal);text-transform:uppercase}
.hrblizz-doc .region__name{font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--navy)}
.hrblizz-doc .region__meta{font-size:11.5px;color:var(--ink-soft)}

.hrblizz-doc /* ───────────────────────── reveal animation ─────────────────────────
   Transform-only "rise" so content is NEVER blank if the animation clock
   is paused (background tab, capture) — it simply sits in its end position
   shifted down a touch. Real browsers play the smooth slide on scroll. */
.reveal{transform:translateY(26px);transition:transform .7s var(--ease)}
.hrblizz-doc .reveal.in{transform:none}
.hrblizz-doc .reveal.d1{transition-delay:.05s}.hrblizz-doc .reveal.d2{transition-delay:.1s}
.hrblizz-doc .reveal.d3{transition-delay:.15s}.hrblizz-doc .reveal.d4{transition-delay:.2s}.hrblizz-doc .reveal.d5{transition-delay:.26s}
@media (prefers-reduced-motion: reduce){
  .hrblizz-doc .reveal{transform:none;transition:none}
}

.hrblizz-doc /* ============================================================
   SECTION BACKGROUND RHYTHM — light · tint · mid · dark · teal
   Punctuates the long scroll. Each non-white treatment re-tones
   its own contents so type, .hrblizz-doc cards, .hrblizz-doc callouts stay legible. Diagrams
   keep their light surface and read as framed islands on dark bands.
   ============================================================ */

/* MID — deeper teal wash; type stays navy/ink (still a light band) */
section.sec.mid{background:linear-gradient(180deg,#dcedf1 0%, #cce4ea 100%)}
.hrblizz-doc .sec.mid .sec-num{background:#dcedf1;border-color:var(--teal);color:var(--teal)}
.hrblizz-doc .sec.mid .card{box-shadow:var(--sh-1)}

.hrblizz-doc /* DARK — navy band, .hrblizz-doc inverted type, .hrblizz-doc atmospheric glow */
section.sec.dark{
  background:linear-gradient(165deg,#0a4a63 0%, #063e57 55%, #002F3F 100%);
  position:relative;overflow:hidden;color:rgba(255,255,255,.82);
}
.hrblizz-doc section.sec.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 80% at 92% -8%, rgba(40,183,183,.20), transparent 60%),
            radial-gradient(45% 70% at 2% 108%, rgba(0,122,164,.24), transparent 60%)}
.hrblizz-doc .sec.dark .wrap{position:relative}
.hrblizz-doc .sec.dark .sec-title{color:#fff}
.hrblizz-doc .sec.dark .sec-eyebrow{color:#ff8a4d}
.hrblizz-doc .sec.dark .sec-num{background:rgba(255,255,255,.06);border-color:var(--teal-bright);
  color:var(--teal-bright);box-shadow:0 6px 16px -6px rgba(0,0,0,.55)}
.hrblizz-doc .sec.dark .prose{color:rgba(255,255,255,.8)}
.hrblizz-doc .sec.dark .prose strong{color:#fff}
.hrblizz-doc .sec.dark .flist li{color:rgba(255,255,255,.8)}
.hrblizz-doc .sec.dark .flist li b, .hrblizz-doc .sec.dark .flist li strong{color:#fff}
.hrblizz-doc .sec.dark .flist li::before{background:var(--teal-bright);box-shadow:0 0 0 4px rgba(40,183,183,.16)}
.hrblizz-doc .sec.dark h3{color:#fff !important}
.hrblizz-doc .sec.dark .figcap{color:rgba(255,255,255,.62)}
.hrblizz-doc .sec.dark .figcap .figtag{color:var(--teal-bright)}

.hrblizz-doc /* dark-section cards → glass */
.sec.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.7);backdrop-filter:blur(2px)}
.hrblizz-doc .sec.dark .card h3{color:#fff !important}
.hrblizz-doc .sec.dark .card p{color:rgba(255,255,255,.7)}
.hrblizz-doc .sec.dark .card__kicker{color:var(--teal-bright)}

.hrblizz-doc /* dark-section callout → glass */
.sec.dark .callout{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.hrblizz-doc .sec.dark .callout p{color:rgba(255,255,255,.82)}
.hrblizz-doc .sec.dark .callout__label{color:var(--teal-bright)}
.hrblizz-doc .sec.dark .callout.warm{background:rgba(255,150,80,.08);border-color:rgba(255,150,80,.26)}
.hrblizz-doc .sec.dark .callout.warm .callout__label{color:#ff8a4d}

.hrblizz-doc /* TEAL — saturated brand band, .hrblizz-doc white type */
section.sec.teal{
  background:linear-gradient(135deg,#0a86ab 0%, #007AA4 46%, #005f80 100%);
  position:relative;overflow:hidden;color:#fff;
}
.hrblizz-doc section.sec.teal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 80% at 100% 0%, rgba(40,183,183,.32), transparent 60%),
            radial-gradient(42% 70% at 0% 100%, rgba(0,0,0,.20), transparent 60%)}
.hrblizz-doc .sec.teal .wrap{position:relative}
.hrblizz-doc .sec.teal .sec-title{color:#fff}
.hrblizz-doc .sec.teal .sec-eyebrow{color:#ffdcb8}
.hrblizz-doc .sec.teal .sec-num{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6);
  color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.hrblizz-doc .sec.teal .prose{color:rgba(255,255,255,.92)}
.hrblizz-doc .sec.teal .prose strong{color:#fff}
.hrblizz-doc .sec.teal .callout{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.hrblizz-doc .sec.teal .callout::before{background:linear-gradient(180deg,#fff,rgba(255,255,255,.45))}
.hrblizz-doc .sec.teal .callout p{color:#fff}
.hrblizz-doc .sec.teal .callout__label{color:#ffe6cd}

.hrblizz-doc /* ============================================================
   TYPOGRAPHY REFINEMENTS — tighter, .hrblizz-doc more confident, .hrblizz-doc modern;
   stays within the Raleway / Open Sans brand families.
   ============================================================ */
body{font-feature-settings:"kern" 1,"liga" 1;font-optical-sizing:auto}
.hrblizz-doc .hero h1{font-size:clamp(40px,5.4vw,64px);letter-spacing:-.032em;text-wrap:balance;line-height:1.02}
.hrblizz-doc .hero__lead{font-size:19px;letter-spacing:-.005em;text-wrap:pretty}
.hrblizz-doc .sec-title{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.028em;text-wrap:balance;line-height:1.08}
.hrblizz-doc .sec-eyebrow{font-size:12px;letter-spacing:.16em}
.hrblizz-doc .prose{font-size:17.5px;line-height:1.72;text-wrap:pretty;hanging-punctuation:first allow-end}
.hrblizz-doc .flist li{text-wrap:pretty}
.hrblizz-doc .card h3{letter-spacing:-.015em}
.hrblizz-doc .card__kicker{letter-spacing:.045em}
.hrblizz-doc .hstat__num{font-variant-numeric:tabular-nums lining-nums}
.hrblizz-doc .dgm-title{letter-spacing:.005em;font-size:15.5px}
.hrblizz-doc table.tbl th{letter-spacing:.08em}

.hrblizz-doc /* ── animated link underline — grows left → right on hover ── */
.prose a{border-bottom:none;padding-bottom:1px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.6px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .38s var(--ease)}
.hrblizz-doc .prose a:hover{background-size:100% 1.6px;border-bottom:none}

/* ── scroll progress bar ── */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright) 55%,var(--orange));
  box-shadow:0 0 12px rgba(0,122,164,.45);transition:width .08s linear;pointer-events:none}

.hrblizz-doc /* ── card carousel ── */
.carousel{position:relative}
.hrblizz-doc .carousel__viewport{overflow:hidden;cursor:grab;padding:6px 4px 16px}
.hrblizz-doc .carousel.is-drag{user-select:none}
.hrblizz-doc .carousel.is-drag .carousel__viewport{cursor:grabbing}
.hrblizz-doc .carousel__track{display:flex;gap:18px;align-items:stretch;will-change:transform;transition:transform .45s var(--ease)}
.hrblizz-doc .carousel.is-drag .carousel__track{transition:none}
.hrblizz-doc .carousel__slide{flex:0 0 calc((100% - 36px)/3);min-width:0;display:flex}
.hrblizz-doc .carousel__slide .card{width:100%;display:flex;flex-direction:column}
@media(max-width:900px){.hrblizz-doc .carousel__slide{flex:0 0 calc((100% - 18px)/2)}}
@media(max-width:620px){.hrblizz-doc .carousel__slide{flex:0 0 84%}}
.hrblizz-doc .carousel__nav{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--navy);
  box-shadow:0 10px 24px -10px rgba(0,47,63,.4);
  transition:transform .22s var(--ease),opacity .22s var(--ease),background .22s var(--ease),color .22s}
.hrblizz-doc .carousel__nav:hover{background:var(--teal);color:#fff;transform:translateY(-50%) scale(1.07);border-color:var(--teal)}
.hrblizz-doc .carousel__nav svg{width:20px;height:20px}
.hrblizz-doc .carousel__nav.prev{left:-16px}
.hrblizz-doc .carousel__nav.next{right:-16px}
.hrblizz-doc .carousel__nav[disabled]{opacity:0;pointer-events:none}
.hrblizz-doc .carousel__dots{display:flex;justify-content:center;gap:9px;margin-top:4px}
.hrblizz-doc .carousel__dot{width:8px;height:8px;border-radius:50%;background:#bcd2da;border:none;cursor:pointer;
  padding:0;transition:width .28s var(--ease),background .28s var(--ease)}
.hrblizz-doc .carousel__dot:hover{background:#8fb6c3}
.hrblizz-doc .carousel__dot.is-active{width:24px;border-radius:5px;background:var(--teal)}
@media(max-width:760px){.hrblizz-doc .carousel__nav{display:none}}

/* ── animated process-flow arrows on key diagrams (.dgm.flow) ── */
@media (prefers-reduced-motion: no-preference){
  .hrblizz-doc .dgm.flow.is-flowing .vstack-conn svg path:first-of-type, .hrblizz-doc .dgm.flow.is-flowing .conn svg path:first-of-type{
    stroke-dasharray:5 7;animation:connFlow .9s linear infinite}
}
@keyframes connFlow{to{stroke-dashoffset:-12}}

.hrblizz-doc /* ───────────────────────── footer ───────────────────────── */
.site-foot{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hrblizz-doc .site-foot::before{content:"";position:absolute;inset:0;
  background:radial-gradient(40% 70% at 100% 0%, rgba(0,122,164,.18), transparent 60%)}
.hrblizz-doc .site-foot__inner{position:relative;max-width:var(--content-max);margin:0 auto;padding:54px var(--mc-space-10) 30px}
.hrblizz-doc .site-foot__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.hrblizz-doc .site-foot__brand img{height:30px;filter:brightness(0) invert(1);opacity:.92}
.hrblizz-doc .site-foot__brand p{margin:18px 0 0;max-width:46ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.hrblizz-doc .site-foot__docs{display:flex;flex-direction:column;gap:11px;min-width:230px}
.hrblizz-doc .site-foot__docs .t{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:3px}
.hrblizz-doc .site-foot__docs a{color:rgba(255,255,255,.82);font-size:14.5px;display:flex;align-items:center;gap:9px;
  transition:color .2s var(--ease),transform .2s var(--ease)}
.hrblizz-doc .site-foot__docs a:hover{color:#fff;transform:translateX(3px)}
.hrblizz-doc .site-foot__docs a .d{width:5px;height:5px;border-radius:50%;background:var(--teal-bright)}
.hrblizz-doc .site-foot__bar{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-size:13px;color:rgba(255,255,255,.6)}
.hrblizz-doc .site-foot__contact{display:flex;gap:22px;flex-wrap:wrap}
.hrblizz-doc .site-foot__contact a{color:rgba(255,255,255,.78)}

.hrblizz-doc /* ============================================================
   DIAGRAM COMPONENTS — process flows (lifecycle, chevrons, testing)
   ============================================================ */
/* status / action pills */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 14px;border-radius:999px;
  font-family:var(--ff-body);font-weight:700;font-size:12.5px;letter-spacing:.01em;white-space:nowrap}
.hrblizz-doc .pill--mss{background:var(--teal);color:#fff;height:26px;font-size:11.5px;letter-spacing:.02em}
.hrblizz-doc .pill--pass{background:#1f8a4d;color:#fff}
.hrblizz-doc .pill--fail{background:var(--red);color:#fff}
.hrblizz-doc .pill--dark{background:#0a3a4d;color:#fff}
.hrblizz-doc .pill--green{background:#1f8a4d;color:#fff}
.hrblizz-doc .pill--num{background:var(--teal);color:#fff;width:30px;height:30px;justify-content:center;padding:0;
  border-radius:50%;font-size:13px;font-weight:800;flex:0 0 auto}
.hrblizz-doc .pill--num.g{background:#1f8a4d}

.hrblizz-doc /* lifecycle vertical timeline */
.lc{position:relative;margin-top:6px;display:flex;flex-direction:column;gap:0}
.hrblizz-doc .lc-stage{position:relative;display:flex;gap:20px;padding:0 0 26px 0}
.hrblizz-doc .lc-stage:last-of-type{padding-bottom:0}
.hrblizz-doc .lc-rail{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:38px}
.hrblizz-doc .lc-num{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-family:var(--ff-display);font-weight:800;font-size:16px;flex:0 0 auto;
  box-shadow:0 4px 10px -3px rgba(0,122,164,.5);z-index:2}
.hrblizz-doc .lc-line{flex:1 1 auto;width:2px;background:linear-gradient(180deg,var(--teal),#bcd9e3);margin:6px 0 -26px}
.hrblizz-doc .lc-stage:last-of-type .lc-line{display:none}
.hrblizz-doc .lc-card{flex:1 1 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:var(--sh-2);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hrblizz-doc .lc-card:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.hrblizz-doc .lc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hrblizz-doc .lc-top h4{font-family:var(--ff-display);font-weight:700;font-size:18px;color:var(--navy);margin:0}
.hrblizz-doc .lc-note{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--ink-soft)}
.hrblizz-doc .lc-note svg{width:13px;height:13px;color:var(--teal)}
.hrblizz-doc .lc-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.hrblizz-doc .lc-card li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.hrblizz-doc .lc-card li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;
  background:var(--orange);transform:rotate(45deg)}
.hrblizz-doc .lc-card li.gate{color:var(--red);font-weight:600}
.hrblizz-doc .lc-card li.gate::before{background:var(--red)}
.hrblizz-doc .lc-close{margin-top:6px;background:linear-gradient(90deg,#0a3a4d,#02212c);color:#fff;border-radius:12px;
  padding:16px 22px;display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.hrblizz-doc .lc-close .pill--num{background:#1f8a4d}

.hrblizz-doc /* chevron flow */
.chev-flow{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hrblizz-doc .chev{flex:1 1 165px;min-width:150px;display:flex;flex-direction:column}
.hrblizz-doc .chev-head{position:relative;background:var(--teal);color:#fff;font-family:var(--ff-display);font-weight:700;
  font-size:14px;padding:14px 18px 14px 22px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
  text-align:center;line-height:1.2}
.hrblizz-doc .chev:first-child .chev-head{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.hrblizz-doc .chev:nth-child(even) .chev-head{background:#1497ba}
.hrblizz-doc .chev-num{font-size:11px;font-weight:800;opacity:.7;display:block;margin-bottom:2px}
.hrblizz-doc .chev-body{padding:14px 8px 0 18px}
.hrblizz-doc .chev-body ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.hrblizz-doc .chev-body li{position:relative;padding-left:16px;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.hrblizz-doc .chev-body li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--orange)}

.hrblizz-doc /* grouped container (testing / documentation zones) */
.zone{background:#f1f7f9;border:1px solid #d9e7ec;border-radius:16px;padding:22px;position:relative}
.hrblizz-doc .zone__label{font-family:var(--ff-body);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin:0 0 16px}
.hrblizz-doc .qa-mod{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hrblizz-doc .qa-mod:last-child{margin-bottom:0}
.hrblizz-doc .qa-mod .node{flex:1 1 0;margin:0;padding:11px 14px}
.hrblizz-doc .qa-mod .conn{color:#90b6c4}

.hrblizz-doc /* HLD breakdown grid (components / data flows / security boundaries) */
.bd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.hrblizz-doc .bd{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--sh-1)}
.hrblizz-doc .bd h4{display:flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:700;font-size:13px;
  color:var(--teal);margin:0 0 12px;text-transform:uppercase;letter-spacing:.04em}
.hrblizz-doc .bd h4 .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#eef3f5;color:var(--teal);flex:0 0 auto}
.hrblizz-doc .bd h4 .ic svg{width:15px;height:15px}
.hrblizz-doc .bd p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.hrblizz-doc .bd.bd--bound h4{color:var(--orange)}
.hrblizz-doc .bd.bd--bound h4 .ic{background:#fff1e7;color:var(--orange)}
@media(max-width:860px){.hrblizz-doc .bd-grid{grid-template-columns:1fr}}

.hrblizz-doc /* "how to read" legend rows */
.read-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.hrblizz-doc .rl{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;box-shadow:var(--sh-1)}
.hrblizz-doc .rl__sw{flex:0 0 auto;width:44px;height:26px;border-radius:7px}
.hrblizz-doc .rl__sw.orange{background:linear-gradient(180deg,#ff6a14,#f24f00)}
.hrblizz-doc .rl__sw.dark{background:linear-gradient(90deg,#0a3a4d,#063040)}
.hrblizz-doc .rl__sw.dash{background:#fff;border:2px dashed var(--teal)}
.hrblizz-doc .rl__sw.red{background:linear-gradient(180deg,#fdecea,#fbdcd8);border:1.5px solid #f3b4ac}
.hrblizz-doc .rl b{display:block;font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--navy);margin-bottom:3px}
.hrblizz-doc .rl span{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
@media(max-width:760px){.hrblizz-doc .read-legend{grid-template-columns:1fr}}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1080px){
  .hrblizz-doc .sidebar{transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:0 0 60px rgba(0,0,0,.4)}
  .hrblizz-doc.nav-open .sidebar{transform:none}
  .hrblizz-doc .main{margin-left:0}
  .hrblizz-doc .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
    border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;margin-right:6px;color:var(--navy)}
  .hrblizz-doc .menu-btn svg{width:22px;height:22px}
  .hrblizz-doc .nav-scrim{position:fixed;inset:0;background:rgba(0,20,28,.5);z-index:45;opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease)}
  .hrblizz-doc.nav-open .nav-scrim{opacity:1;visibility:visible}
  .hrblizz-doc .topbar__inner{padding:0 22px}
  .hrblizz-doc .tab{margin-right:18px;font-size:14px}
  .hrblizz-doc .topbar__meta{display:none}
}
@media (max-width:760px){
  .hrblizz-doc .grid.cols-2, .hrblizz-doc .grid.cols-3, .hrblizz-doc .grid.cols-4{grid-template-columns:1fr}
  .hrblizz-doc .region-grid{grid-template-columns:repeat(2,1fr)}
  .hrblizz-doc .hero__inner{padding:60px 22px 54px}
  .hrblizz-doc .wrap{padding:0 22px}
  .hrblizz-doc{font-size:16px}
  .hrblizz-doc .tab .tab-num{display:none}
  .hrblizz-doc .drow{flex-wrap:wrap}
}