/* User guide of Fabodi, scoped under .ug-root for weebpal.com: style-v2.css, platform.css, concise.css, airy.css, skins.css, typography.css, appearance.css. Generated by GUIDE-html/import.py. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/nunito-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-stretch: 75% 125%; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/nunito-sans-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/lora-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/source-sans-3-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/manrope-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/roboto-slab-latin-vietnamese.woff2") format("woff2-variations"); }
.ug-root {
  --c-anon: #64748b; --c-client: #a2701a; --c-office: #1f7a73; --c-operative: #4d7c1f;
  --c-owner: #2f6bb0; --c-platform: #6250b8; --c-franchisor: #b04360; --c-admin: #52525b;
  --r: 14px; --bar-h: 58px;
}
.ug-root, .ug-root.skin-evergreen { 
  --ink: #1d2523; --ink2: #4d5753; --ink3: #656c68; --line: #e6e0d5; --line2: #d6cfc2;
  --paper: #fff; --wash: #fbf9f5; --wash2: #f3efe7;
  --brand: #1f7a73; --brand-d: #145e58; --brand-dd: #0b3633; --brand-w: #e8f3f0; --accent: #c8a15a;
  --on-dark: #fff; --on-dark-soft: #d7e7e4; --on-dark-dim: #a9c8c3; --on-brand-dim: #edf6f4;
  --focus: #9a7228; --focus-on-dark: #c8a15a; --device: #1d2523; --shade: 11 30 28; --shadow: 11 54 51;
}
.ug-root.skin-ocean { 
  --ink: #14222a; --ink2: #43535c; --ink3: #58676f; --line: #dce6eb; --line2: #c5d3da;
  --paper: #fff; --wash: #f5f9fb; --wash2: #e8f0f4;
  --brand: #0b6e8c; --brand-d: #095870; --brand-dd: #062f3d; --brand-w: #e4f1f6; --accent: #f2762e;
  --on-dark: #fff; --on-dark-soft: #cfe3ea; --on-dark-dim: #9cc0cc; --on-brand-dim: #e8f4f8;
  --focus: #c66126; --focus-on-dark: #f2762e; --device: #14222a; --shade: 4 24 32; --shadow: 6 47 61;
}
.ug-root.skin-indigo { 
  --ink: #1b1c33; --ink2: #4a4b66; --ink3: #5e5f78; --line: #e2e2ee; --line2: #cbcbdd;
  --paper: #fff; --wash: #f7f7fb; --wash2: #ececf5;
  --brand: #2b2d8f; --brand-d: #25277d; --brand-dd: #15164a; --brand-w: #ebebf8; --accent: #f5b301;
  --on-dark: #fff; --on-dark-soft: #d4d5f0; --on-dark-dim: #a6a8d6; --on-brand-dim: #e3e4f7;
  --focus: #946800; --focus-on-dark: #f5b301; --device: #1b1c33; --shade: 12 12 38; --shadow: 21 22 74;
}
.ug-root.skin-heather { 
  --ink: #251c25; --ink2: #554755; --ink3: #6b5d6b; --line: #e9e0e9; --line2: #d9ccd9;
  --paper: #fff; --wash: #fbf8fb; --wash2: #f2ebf2;
  --brand: #7d4a7d; --brand-d: #653b65; --brand-dd: #371d37; --brand-w: #f5edf5; --accent: #447447;
  --on-dark: #fff; --on-dark-soft: #ecdcec; --on-dark-dim: #c9abc9; --on-brand-dim: #f3e7f3;
  --focus: #447447; --focus-on-dark: #9fd1a2; --device: #251c25; --shade: 30 14 30; --shadow: 55 29 55;
}
.ug-root.skin-terracotta { 
  --ink: #2a1d17; --ink2: #5a4840; --ink3: #6f5e56; --line: #ebe1da; --line2: #dccdc3;
  --paper: #fff; --wash: #fcf8f5; --wash2: #f4ece6;
  --brand: #9c4a26; --brand-d: #7f3c1f; --brand-dd: #3f1d0f; --brand-w: #f8ede7; --accent: #2a7f72;
  --on-dark: #fff; --on-dark-soft: #f0dccf; --on-dark-dim: #cfab98; --on-brand-dim: #f8e9e1;
  --focus: #2a7f72; --focus-on-dark: #8fd3c7; --device: #2a1d17; --shade: 36 16 8; --shadow: 63 29 15;
}
.ug-root, .ug-root.typo-optimus { 
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --heading-weight: 600; --heading-tracking: -.01em;
}
.ug-root.typo-humanist { --font-display: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, sans-serif; --heading-weight: 800; --heading-tracking: -.015em; }
.ug-root.typo-editorial { --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.01em; }
.ug-root.typo-geometric { --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.02em; }
.ug-root.typo-slab { --font-display: "Roboto Slab", "Rockwell", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.01em; }
.ug-root * { box-sizing: border-box; }
.ug-root { scroll-behavior: smooth; scroll-padding-top: 120px; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
.ug-root { }
}
.ug-root { margin: 0; background: var(--wash); color: var(--ink); font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; }
.ug-root a { color: var(--brand-d); }
.ug-root a:focus-visible, .ug-root button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ug-root .v2-bar :focus-visible, .ug-root .v2-foot :focus-visible, .ug-root .lb :focus-visible { outline-color: var(--focus-on-dark); }
.ug-root img { max-width: 100%; display: block; }
.ug-root .v2-container { width: 100%; margin: 0 auto; padding: 0 .75rem; }
@media (min-width: 576px) {
.ug-root .v2-container { max-width: 540px; }
}
@media (min-width: 768px) {
.ug-root .v2-container { max-width: 720px; }
}
@media (min-width: 992px) {
.ug-root .v2-container { max-width: 960px; }
}
@media (min-width: 1200px) {
.ug-root .v2-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.ug-root .v2-container { max-width: 1320px; }
}
.ug-root main.v2-container { padding-top: 1rem; padding-bottom: 4rem; }
.ug-root .v2-bar { position: sticky; top: 0; z-index: 40; background: var(--brand-dd); color: var(--on-dark); }
.ug-root .v2-bar__in { display: flex; align-items: center; gap: 1.2rem; min-height: var(--bar-h); overflow-x: auto; }
.ug-root .v2-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--on-dark); flex: none; }
.ug-root .v2-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--paper); color: var(--brand-dd);
  display: grid; place-items: center; font: var(--heading-weight) 1rem/1 var(--font-display); }
.ug-root .v2-brand b { font-size: .95rem; }
.ug-root .v2-brand__t { color: var(--on-dark-dim); font-size: .8rem; }
.ug-root .v2-nav { display: flex; gap: .2rem; margin-left: auto; }
.ug-root .v2-nav a { padding: .45rem .75rem; border-radius: 9px; font-size: .86rem; color: var(--on-dark-soft);
  text-decoration: none; white-space: nowrap; }
.ug-root .v2-nav a:hover { background: rgba(255,255,255,.1); color: var(--on-dark); }
.ug-root .v2-nav a.on { background: var(--paper); color: var(--brand-dd); font-weight: 700; }
.ug-root .v2-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem 0 1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line); }
@media (max-width: 767.98px) {
.ug-root .v2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
.ug-root .v2-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px;
  background: none; border: 1px solid transparent; font-size: .82rem; color: var(--ink2);
  text-decoration: none; white-space: nowrap; }
.ug-root .v2-tabs a:hover { background: var(--wash2); color: var(--ink); }
.ug-root .v2-tabs a.on { background: var(--brand); border-color: var(--brand); color: var(--on-dark); font-weight: 700; }
.ug-root .v2-tabs__n { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--wash2); font-size: .68rem; font-weight: 700; color: var(--ink2); }
.ug-root .v2-tabs a.on .v2-tabs__n { background: rgba(255,255,255,.25); color: var(--on-dark); }
.ug-root .v2-tabs a.v2-tabs__sec { background: none; border-color: transparent; font-weight: 700; color: var(--ink); padding-left: 0; }
.ug-root .v2-spine { list-style: none; margin: .4rem 0 1.4rem; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ug-root .v2-spine li { position: relative; display: flex; align-items: stretch; }
.ug-root .v2-spine a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
  padding: .7rem .3rem; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.ug-root .v2-spine a:hover { border-color: var(--brand); background: var(--brand-w); }
.ug-root .v2-spine__i { font-size: 1.5rem; line-height: 1.2; }
.ug-root .v2-spine__n { font-size: .66rem; font-weight: 700; color: var(--ink3); }
.ug-root .v2-spine b { font-size: .86rem; }
.ug-root .v2-spine__arrow { position: absolute; right: -.48rem; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--line2); font-weight: 700; font-size: .85rem; }
.ug-root .v2-spine li.on a { background: var(--brand); border-color: var(--brand); color: var(--on-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent); }
.ug-root .v2-spine li.on .v2-spine__n { color: var(--on-brand-dim); }
.ug-root .v2-spine li.near a { border-color: var(--brand); border-style: dashed; background: var(--brand-w); }
.ug-root .v2-spine--compact li.on a { box-shadow: none; }
.ug-root .v2-spine--compact { margin: 0 0 1.5rem; }
.ug-root .v2-spine--compact a { flex-direction: row; justify-content: center; gap: .35rem; padding: .45rem .3rem; border-top-width: 1px; }
.ug-root .v2-spine--compact .v2-spine__i { font-size: 1rem; }
.ug-root .v2-spine--compact .v2-spine__n { display: none; }
.ug-root .v2-spine--compact b { font-size: .76rem; }
@media (max-width: 991.98px) {
.ug-root .v2-spine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ug-root .v2-spine li:nth-child(4) .v2-spine__arrow { display: none; }
}
@media (max-width: 575.98px) {
.ug-root .v2-spine:not(.v2-spine--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-root .v2-spine:not(.v2-spine--compact) li:nth-child(2n) .v2-spine__arrow { display: none; }
.ug-root .v2-spine--compact { display: flex; overflow-x: auto; gap: .3rem; }
.ug-root .v2-spine--compact li { flex: none; }
.ug-root .v2-spine--compact .v2-spine__arrow { display: none; }
}
.ug-root h1 { font: var(--heading-weight) clamp(1.5rem, 3.6vw, 2.2rem)/1.2 var(--font-display); letter-spacing: var(--heading-tracking); margin: .2rem 0 .8rem; }
.ug-root .v2-kicker { font: 500 .8rem/1.4 var(--font-body); color: var(--ink3); margin-left: .5rem; letter-spacing: 0; }
.ug-root .v2-h2 { font: var(--heading-weight) 1.25rem/1.3 var(--font-display); letter-spacing: var(--heading-tracking); margin: 2.2rem 0 .9rem; }
.ug-root .v2-crumb { font-size: .8rem; color: var(--ink3); margin: .6rem 0 0; }
.ug-root .v2-crumb a { color: var(--ink2); text-decoration: none; }
.ug-root h1.v2-h1 { margin: .4rem 0 0; }
.ug-root .v2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .7rem 0 0; font-size: .88rem; color: var(--ink2); }
.ug-root .v2-meta > span:last-child { margin-left: .35rem; }
.ug-root .v2-why { max-width: 48rem; margin: 1.5rem 0 2.75rem; padding: 1.1rem 1.35rem 1.2rem; background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 0 var(--r) var(--r) 0; }
.ug-root .v2-why__k { margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); }
.ug-root .v2-why p:not(.v2-why__k) { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.ug-root .v2-why p + p:not(.v2-why__k) { margin-top: .45rem; }
.ug-root .v2-chip { font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.ug-root .v2-chip--anon { background: #f1f5f9; color: #334155; }
.ug-root .v2-chip--client { background: #fbf2dc; color: #7c5410; }
.ug-root .v2-chip--office { background: #e8f3f0; color: #145e58; }
.ug-root .v2-chip--operative { background: #eef5e4; color: #3b6116; }
.ug-root .v2-chip--owner { background: #e9f1fb; color: #24558f; }
.ug-root .v2-chip--platform { background: #ede9fb; color: #4c3a95; }
.ug-root .v2-chip--franchisor { background: #fdf0f3; color: #97324b; }
.ug-root .v2-chip--admin { background: #f0f0f2; color: #3f3f46; }
.ug-root .v2-bg--anon { background: var(--c-anon); }
.ug-root .v2-bg--client { background: var(--c-client); }
.ug-root .v2-bg--office { background: var(--c-office); }
.ug-root .v2-bg--operative { background: var(--c-operative); }
.ug-root .v2-bg--owner { background: var(--c-owner); }
.ug-root .v2-bg--platform { background: var(--c-platform); }
.ug-root .v2-bg--franchisor { background: var(--c-franchisor); }
.ug-root .v2-bg--admin { background: var(--c-admin); }
.ug-root .v2-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) {
.ug-root .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .v2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .v2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ug-root .v2-grid--sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ug-root .v2-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.ug-root .v2-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgb(var(--shadow) / .10); transform: translateY(-2px); }
.ug-root .v2-card__img { display: block; aspect-ratio: 16 / 10; background: var(--wash2); overflow: hidden; border-bottom: 1px solid var(--line); }
.ug-root .v2-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ug-root .v2-card__img--phone { background: var(--device); padding: 8px 0 0; }
.ug-root .v2-card__img--phone img { object-fit: contain; object-position: top center; }
.ug-root .v2-card__t { font-weight: 700; font-size: .98rem; padding: .7rem .85rem 0; line-height: 1.3; }
.ug-root .v2-card__m { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .45rem .85rem .8rem; }
.ug-root .v2-card__n { font-size: .74rem; color: var(--ink3); margin-left: auto; }
.ug-root .v2-sec { margin-bottom: 1.6rem; }
.ug-root .v2-sec h3 { margin: 0 0 .7rem; font-size: 1.05rem; display: flex; align-items: baseline; flex-wrap: wrap; }
.ug-root .v2-sec h3 a { color: var(--ink); text-decoration: none; }
.ug-root .v2-sec h3 a:hover { color: var(--brand-d); }
.ug-root .v2-who { columns: 4 250px; column-gap: 12px; }
.ug-root .v2-who__card { break-inside: avoid; margin-bottom: 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: .8rem .9rem; }
.ug-root .v2-who__hd { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.ug-root .v2-who__hd small { margin-left: auto; color: var(--ink3); font-size: .75rem; }
.ug-root .v2-who__i { font-size: 1.2rem; }
.ug-root .v2-who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.ug-root .v2-who li a { display: block; padding: .2rem .3rem; border-radius: 7px; font-size: .85rem; color: var(--ink2); text-decoration: none; }
.ug-root .v2-who li a:hover { background: var(--brand-w); color: var(--brand-d); }
.ug-root .v2-others { display: flex; flex-wrap: wrap; gap: .5rem; }
.ug-root .v2-other { padding: .55rem .9rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ug-root .v2-other:hover { border-color: var(--brand); }
.ug-root .v2-other small { color: var(--ink3); font-weight: 500; margin-left: .2rem; }
.ug-root .org { display: grid; gap: 0; max-width: 980px; margin: .4rem 0 1.6rem; }
.ug-root .org__box { display: flex; gap: .85rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: .9rem 1rem; line-height: 1.45; }
.ug-root .org__box b { display: block; font-size: 1.05rem; }
.ug-root .org__box span { color: var(--ink2); font-size: .9rem; }
.ug-root .org__box small { display: block; margin-top: .35rem; color: var(--ink3); font-size: .78rem; }
.ug-root .org__box--ho { border-top: 4px solid var(--c-platform); }
.ug-root .org__box--fr { flex-direction: column; border-top: 4px solid var(--c-owner); }
.ug-root .org__box--cu { border-top: 4px solid var(--c-client); }
.ug-root .org__i { font-size: 1.6rem; line-height: 1; flex: none; }
.ug-root .org__roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.ug-root .org__down { width: 2px; height: 18px; background: var(--line2); margin-left: 2.1rem; position: relative; }
.ug-root .org__down::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent;
  border-top-color: var(--line2); border-bottom: 0; }
.ug-root .org__row { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.ug-root .org__f { background: var(--wash); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.ug-root .org__f .org__i { font-size: 1.1rem; }
.ug-root .org__f b { font-size: .88rem; }
.ug-root .org__f small { margin: 0; }
.ug-root .org__f--more { justify-content: center; align-items: center; color: var(--ink3); font-size: .85rem; border-style: dashed; }
.ug-root .org__note { margin: .8rem 0 0; font-size: .85rem; color: var(--ink3); }
@media (max-width: 575.98px) {
.ug-root .org__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ug-root .v2-home .org { max-width: none; }
.ug-root .v2-home .v2-who { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ug-root .v2-home .v2-who__card { margin-bottom: 0; }
@media (min-width: 576px) {
.ug-root .v2-home .v2-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.ug-root .v2-home .org__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .v2-home .v2-who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .v2-home .v2-who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ug-root { --bar-h: 88px; }
.ug-root .v2-bar__in { flex-wrap: wrap; align-content: center; gap: .3rem 1rem; overflow: visible; }
.ug-root .v2-nav { flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
}
.ug-root .v2-foot { background: var(--brand-dd); color: var(--on-dark-soft); }
.ug-root .v2-foot__in { display: grid; gap: 1rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.ug-root .v2-foot__brand { margin: 0 0 .35rem; font: var(--heading-weight) 1.1rem/1.3 var(--font-display); color: var(--on-dark); }
.ug-root .v2-foot p { margin: 0; max-width: 70ch; font-size: .88rem; line-height: 1.6; }
.ug-root .v2-foot__meta { display: flex; flex-direction: column; gap: .3rem; }
.ug-root .v2-foot__links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.ug-root .v2-foot__links a + a { padding-left: 1.1rem; border-left: 1px solid rgba(255, 255, 255, .3); }
.ug-root .v2-foot__meta a { color: var(--on-dark); font-weight: 600; padding: .15rem 0; }
.ug-root .v2-foot__meta small { color: var(--on-dark-dim); font-size: .78rem; }
@media (min-width: 768px) {
.ug-root .v2-foot__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
.ug-root .v2-foot__meta { align-items: flex-end; text-align: right; }
.ug-root .v2-foot__links { justify-content: flex-end; }
}
.ug-root .v2-layout { display: block; }
.ug-root .v2-rail { display: none; }
@media (min-width: 992px) {
.ug-root .v2-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.ug-root .v2-rail { display: block; position: sticky; top: calc(var(--bar-h) + 24px); max-height: calc(100vh - var(--bar-h) - 48px);
    overflow-y: auto; }
}
.ug-root .v2-rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.ug-root .v2-rail a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; align-items: start;
  padding: .45rem .5rem .45rem .6rem; margin-left: -2px; border-left: 2px solid transparent;
  text-decoration: none; color: var(--ink2); font-size: .84rem; line-height: 1.45; }
.ug-root .v2-rail a:hover { color: var(--ink); }
.ug-root .v2-rail__n { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: #fff; opacity: .5; }
.ug-root .v2-rail__t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ug-root .v2-rail a.on { color: var(--ink); font-weight: 600; border-left-color: var(--brand); background: var(--brand-w);
  border-radius: 0 8px 8px 0; }
.ug-root .v2-rail a.on .v2-rail__n, .ug-root .v2-rail a.done .v2-rail__n { opacity: 1; }
.ug-root .v2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ug-root .v2-steps > li + li { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
.ug-root .v2-step { scroll-margin-top: 120px; min-width: 0; }
.ug-root .v2-step__hd { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ug-root .v2-step__hd h2 { margin: 0; font-size: 1.28rem; line-height: 1.3; letter-spacing: -.005em; }
.ug-root .v2-num { width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #fff; font-weight: 700; display: grid;
  place-items: center; flex: none; font-variant-numeric: tabular-nums; }
.ug-root .v2-steps > .v2-sys { display: flex; gap: .85rem; align-items: flex-start; max-width: 48rem; margin-top: 1.75rem;
  padding: 1rem 1.2rem; border: 0; border-radius: var(--r); background: var(--brand-w); color: var(--ink); }
.ug-root .v2-steps > .v2-sys:first-child { margin-top: 0; }
.ug-root .v2-sys__i { font-size: 1.2rem; line-height: 1.5; }
.ug-root .v2-sys b { display: block; margin-bottom: .2rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); }
.ug-root .v2-sys ul { margin: 0; padding-left: 1.1rem; }
.ug-root .v2-sys li { margin: .15rem 0; line-height: 1.6; }
.ug-root .v2-frame { margin: 0; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; background: var(--paper);
  box-shadow: 0 1px 2px rgb(var(--shadow) / .06), 0 16px 36px -16px rgb(var(--shadow) / .3); }
.ug-root .v2-frame__bar { display: flex; align-items: center; gap: .75rem; padding: .5rem .85rem; background: var(--wash2);
  border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--ink2); }
.ug-root .v2-frame__dots { display: flex; gap: 6px; flex: none; }
.ug-root .v2-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.ug-root .v2-frame__url { flex: 1; min-width: 0; padding: .2rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-root .v2-frame__open { flex: none; font-weight: 600; color: var(--brand-d); text-decoration: none; white-space: nowrap; }
.ug-root .v2-frame__open:hover { text-decoration: underline; }
.ug-root .v2-frame .v2-lock { margin-left: -.4rem; }
.ug-root .v2-frame .v2-shot { border: 0; border-radius: 0; box-shadow: none; }
.ug-root .v2-shot__zoom { position: absolute; top: .65rem; right: .65rem; padding: .25rem .65rem; border-radius: 999px;
  background: rgb(var(--shade) / .8); color: #fff; font-size: .75rem; font-weight: 600; opacity: 0; transition: opacity .15s; pointer-events: none; }
.ug-root .v2-shot:hover .v2-shot__zoom, .ug-root .v2-shot:focus-visible .v2-shot__zoom { opacity: 1; }
@media (hover: none) {
.ug-root .v2-shot__zoom { opacity: 1; }
}
.ug-root .v2-shot { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line2); border-radius: 12px;
  overflow: hidden; background: var(--paper); cursor: zoom-in; box-shadow: 0 6px 18px rgb(var(--shadow) / .08); }
.ug-root .v2-shot img { width: 100%; height: auto; }
.ug-root .v2-shot--phone { max-width: 320px; padding: 7px; background: var(--device); border-color: var(--device); border-radius: 26px; }
.ug-root .v2-shot--phone img { border-radius: 19px; }
.ug-root .v2-open { margin: .55rem 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.ug-root .v2-open a { color: var(--ink3); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ug-root .v2-open a:hover { color: var(--brand-d); text-decoration: underline; }
.ug-root .v2-lock { font-size: .68rem; font-weight: 700; color: var(--ink3); background: var(--wash2); border-radius: 999px;
  padding: .06rem .45rem; margin-left: .4rem; }
.ug-root .prog { position: sticky; top: var(--bar-h); z-index: 35; background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgb(var(--shadow) / .06); }
.ug-root .prog__in { display: flex; align-items: center; gap: .8rem; padding-top: .45rem; padding-bottom: .45rem; }
.ug-root .prog__t { font-size: .78rem; color: var(--ink2); white-space: nowrap; }
.ug-root .prog__t b { color: var(--brand-d); }
.ug-root .prog__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--wash2); overflow: hidden; }
.ug-root .prog__bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .18s ease; }
@media (min-width: 992px) {
.ug-root .prog { display: none; }
}
.ug-root .v2-pagers { display: flex; gap: .8rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ug-root .v2-pager { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .95rem;
  text-decoration: none; font-size: .88rem; font-weight: 600; }
.ug-root .v2-pager:hover { border-color: var(--brand); }
.ug-root .v2-pager--n { margin-left: auto; }
.ug-root .lb { position: fixed; inset: 0; z-index: 60; background: rgb(var(--shade) / .96); display: grid; place-items: center; padding: 3.2rem 1rem; }
.ug-root .lb[hidden] { display: none; }
.ug-root .lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.ug-root .lb img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 8px; background: #fff; }
.ug-root .lb figcaption { color: var(--on-dark); font-size: .9rem; text-align: center; }
.ug-root .lb button { position: absolute; background: rgba(255,255,255,.12); color: var(--on-dark); border: 0; border-radius: 999px;
  width: 2.6rem; height: 2.6rem; font-size: 1.2rem; cursor: pointer; }
.ug-root .lb button:hover { background: rgba(255,255,255,.24); }
.ug-root .lb__x { top: 1rem; right: 1rem; }
.ug-root .lb__p { left: 1rem; top: 50%; transform: translateY(-50%); }
.ug-root .lb__nx { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767.98px) {
.ug-root .v2-bar { position: static; }
.ug-root .v2-bar__in { flex-wrap: wrap; gap: .3rem 1rem; padding-top: .55rem; overflow: visible; min-height: 0; }
.ug-root .v2-nav { margin: 0 -.75rem; padding: 0 .75rem .55rem; width: calc(100% + 1.5rem); overflow-x: auto; scrollbar-width: none; }
.ug-root .v2-brand__t { display: none; }
.ug-root .prog { top: 0; }
.ug-root .v2-kicker { display: block; margin: .2rem 0 0; }
}
@media (max-width: 575.98px) {
.ug-root .v2-step__hd h2 { font-size: 1.12rem; }
.ug-root .v2-num { width: 1.9rem; height: 1.9rem; font-size: .85rem; }
.ug-root .v2-step__text, .ug-root .v2-why p:not(.v2-why__k) { font-size: 1rem; }
.ug-root .v2-steps > li + li { margin-top: 2rem; padding-top: 2rem; }
.ug-root .v2-why { margin-bottom: 2rem; padding: 1rem 1.1rem; }
.ug-root .v2-frame__dots { display: none; }
.ug-root .v2-frame__bar { padding: .45rem .6rem; gap: .5rem; }
.ug-root .v2-shot--phone { max-width: 100%; }
.ug-root .lb { padding: 3.6rem .6rem 5rem; }
.ug-root .lb__p, .ug-root .lb__nx { top: auto; bottom: 1rem; transform: none; }
.ug-root .lb__p { left: 1.5rem; }
.ug-root .lb__nx { right: 1.5rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.ug-root .v2-nav a { padding-left: .5rem; padding-right: .5rem; }
}
@media print {
.ug-root .v2-bar, .ug-root .v2-tabs, .ug-root .v2-rail, .ug-root .prog, .ug-root .v2-pagers, .ug-root .v2-open, .ug-root .settingsbar { display: none !important; }
}
.ug-root .settingsbar { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 50; width: 44px; height: 96px;
  font-family: var(--font-body); --panel-w: min(500px, calc(100vw - 48px)); }
.ug-root .settingsbar[hidden] { display: none; }
.ug-root .settings__toggle { display: grid; place-items: center; width: 44px; height: 96px; padding: 0; border: 1px solid var(--line);
  border-left: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--paper); color: var(--ink2);
  box-shadow: 0 6px 18px rgb(var(--shadow) / .16); cursor: pointer; transition: color .15s, background .15s; }
.ug-root .settings__toggle:hover { color: var(--brand-d); background: var(--wash2); }
.ug-root .settings__toggle svg { width: 22px; height: 22px; transition: transform .3s ease; }
.ug-root .settings__panel { position: absolute; left: 0; top: 50%; width: var(--panel-w); max-height: calc(100vh - 24px); overflow-y: auto;
  padding: .75rem 1rem 1rem; border: 1px solid var(--line); border-left: 0; border-radius: 0 18px 18px 0;
  background: var(--paper); box-shadow: 0 12px 36px rgb(var(--shadow) / .22);
  translate: calc(var(--panel-w) * -1) -50%; pointer-events: none; opacity: 0; visibility: hidden;
  transition: translate .3s ease, opacity .15s ease, visibility .3s; }
.ug-root .settingsbar[data-open] .settings__panel { translate: 0 -50%; pointer-events: auto; opacity: 1; visibility: visible; }
.ug-root .settingsbar[data-open] .settings__toggle { position: absolute; z-index: 1; left: calc(var(--panel-w) - 34px - .75rem);
  top: calc(50% - var(--panel-h, 560px) / 2 + .75rem); width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; }
.ug-root .settingsbar[data-open] .settings__toggle svg { width: 18px; height: 18px; transform: rotate(90deg); }
@media (min-width: 992px) and (hover: hover) {
.ug-root .settingsbar:is(:hover, :focus-within) .settings__panel { translate: 0 -50%; pointer-events: auto; opacity: 1; visibility: visible; }
.ug-root .settingsbar:is(:hover, :focus-within) .settings__toggle { position: absolute; z-index: 1; left: calc(var(--panel-w) - 34px - .75rem);
    top: calc(50% - var(--panel-h, 560px) / 2 + .75rem); width: 34px; height: 34px; border: 0; border-radius: 8px;
    background: transparent; box-shadow: none; }
.ug-root .settingsbar:is(:hover, :focus-within) .settings__toggle svg { width: 18px; height: 18px; transform: rotate(90deg); }
}
.ug-root .settings__title { display: flex; align-items: center; min-height: 34px; margin: 0 0 .5rem; padding-right: 2.6rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.ug-root .settings__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.ug-root .settings__group + .settings__group { padding-left: 1rem; border-left: 1px solid var(--line); }
.ug-root .settings__grouphead { margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink2); }
.ug-root .settings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ug-root .settings__item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 38px; padding: .3rem .55rem;
  border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink);
  font: 500 .88rem/1.3 var(--font-body); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.ug-root .settings__item:hover { background: var(--wash2); }
.ug-root .settings__item[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-w); font-weight: 600; }
.ug-root .settings__item small { margin-left: auto; color: var(--ink3); font-size: .72rem; font-weight: 500; }
.ug-root .settings__dots { display: flex; flex: none; }
.ug-root .settings__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line2); }
.ug-root .settings__dot + .settings__dot { margin-left: -7px; }
.ug-root .settings__aa { display: grid; place-items: center; flex: none; width: 36px; height: 28px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--wash); color: var(--ink); font-size: 16px; line-height: 1; }
.ug-root .settings__reset { width: 100%; margin-top: .75rem; padding: .5rem .6rem; border: 1px solid var(--line2); border-radius: 10px;
  background: none; color: var(--ink2); font: 600 .78rem/1.2 var(--font-body); cursor: pointer; }
.ug-root .settings__reset:hover { background: var(--wash2); color: var(--ink); }
@media (max-width: 991.98px) {
.ug-root .settingsbar { position: absolute; top: .35rem; right: .75rem; left: auto; transform: none; width: 36px; height: 36px;
    --panel-w: min(500px, calc(100vw - 1.5rem)); }
.ug-root .settings__toggle, .ug-root .settingsbar[data-open] .settings__toggle { position: static; width: 36px; height: 36px;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--on-dark); box-shadow: none; }
.ug-root .settings__toggle:hover, .ug-root .settingsbar[data-open] .settings__toggle { background: rgba(255, 255, 255, .18); color: var(--on-dark); }
.ug-root .settings__toggle svg, .ug-root .settingsbar[data-open] .settings__toggle svg { width: 20px; height: 20px; }
.ug-root .settings__panel { top: calc(100% + .5rem); right: 0; left: auto; max-height: calc(100vh - 5rem);
    border-left: 1px solid var(--line); border-radius: 18px; translate: 0 -.5rem; }
.ug-root .settingsbar[data-open] .settings__panel { translate: 0 0; }
.ug-root .settings__title { padding-right: 0; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ug-root .settingsbar { position: fixed; }
}
@media (max-width: 575.98px) {
.ug-root .settings__cols { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.ug-root .settings__group + .settings__group { padding-left: 0; border-left: 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.ug-root .settings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-root .settings__item small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ug-root .settings__panel, .ug-root .settings__toggle, .ug-root .settings__toggle svg { transition: none; }
}
.ug-root .chip--switcher, .ug-root .v2-chip--switcher { background: #e7f6f9; color: #0e6474; }
.ug-root .v2-bg--switcher { background: #0e7c8f; }
.ug-root .draft-warning {padding:12px 20px;background:#fff3cd;border-bottom:2px solid #ba7900;color:#624600;font:16px/1.5 sans-serif;overflow-wrap:anywhere}
.ug-root .draft-warning b {display:block}
.ug-root .draft-step {margin:16px 0;padding:12px;background:#fff8e8;border:1px solid #ba7900;color:#624600;overflow-wrap:anywhere}
.ug-root .draft-step img {display:block;width:100%;height:auto;margin-top:12px}
.ug-root .draft-step figcaption {font:14px/1.5 sans-serif}
.ug-root .v2-step__text { max-width: 68ch; margin: 0 0 1.4rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
@font-face { font-family: "ManropeS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "OutfitS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Outfit-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "OutfitS"; src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/Outfit-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.ug-root .dk {
  --sl-page: #f5f2ec; --sl-paper: #fff; --sl-rule: #e3ddd2;
  --sl-ink: #1d2230; --sl-ink2: #46506a; --sl-ink3: #555d6f;
  --sl-slate: #3c4c63; --sl-blue: #2a5c9c; --sl-amber: #8f5a11; --sl-gold: #e7c88e;   
  --sl-sans: "ManropeS", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sl-display: "OutfitS", "ManropeS", -apple-system, "Segoe UI", Arial, sans-serif;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; min-width: 0;
}
.ug-root .dk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ug-root .dk-bar p { margin: 0; color: var(--ink2); font-size: .88rem; }
.ug-root .dk-bar kbd { padding: 0 .35rem; border: 1px solid var(--line2); border-radius: 4px; background: var(--paper); font: 600 .8rem/1.4 var(--font-body); }
.ug-root .dk-present { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 0; border-radius: 999px;
  background: var(--sl-slate, #3c4c63); color: #fff; font: 700 .9rem/1 var(--sl-sans, var(--font-body)); cursor: pointer; }
.ug-root .dk-present:hover { background: var(--sl-ink, #1d2230); }
.ug-root .sl { container-type: inline-size; position: relative; overflow: hidden; background: var(--sl-page); border: 1px solid var(--sl-rule);
  border-radius: 14px; color: var(--sl-ink); box-shadow: 0 2px 18px rgba(12, 17, 22, .12); scroll-margin-top: 0; }
.ug-root .sl__in { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 9; padding: 4.7cqw 5.7cqw 6.4cqw;
  font: 500 max(13px, 1.31cqw)/1.42 var(--sl-sans); -webkit-font-smoothing: antialiased; }
.ug-root .sl__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; margin-bottom: 2.9cqw; }
.ug-root .sl__hd h2 { margin: 0; max-width: 68cqw; font: 600 max(21px, 3.05cqw)/1.12 var(--sl-display); letter-spacing: -.01em; color: var(--sl-ink); }
.ug-root .sl__who { display: flex; flex: none; align-items: center; gap: .7cqw; margin: .45cqw 0 0; white-space: nowrap; }
.ug-root .sl__av { display: grid; place-items: center; width: max(26px, 2.4cqw); height: max(26px, 2.4cqw); border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, white); box-shadow: inset 0 0 0 2px var(--c); font-size: max(13px, 1.2cqw); }
.ug-root .sl__who b { font: 600 max(13px, 1.42cqw)/1 var(--sl-display); letter-spacing: -.01em; }
.ug-root .sl__bd { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4cqw; }
.ug-root .sl__shot { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--sl-rule); border-radius: 1.15cqw; }
.ug-root .sl__bar { flex: none; display: flex; align-items: center; gap: .45cqw; height: max(22px, 1.85cqw); padding: 0 1cqw;
  border-bottom: 1px solid var(--sl-rule); background: #fbfaf7; }
.ug-root .sl__bar i { width: max(6px, .58cqw); height: max(6px, .58cqw); border-radius: 50%; background: #d7d0c2; }
.ug-root .sl__bar span { margin-left: .7cqw; overflow: hidden; color: var(--sl-ink3); font: 500 max(10px, .85cqw)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; text-overflow: ellipsis; }
.ug-root .sl__vw { position: relative; flex: 1; min-height: 0; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #fff; cursor: zoom-in; }
.ug-root .sl__vw img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }
.ug-root .sl__zoom { position: absolute; top: .8cqw; right: .8cqw; padding: .25em .7em; border-radius: 999px; background: rgba(29, 34, 48, .84); color: #fff;
  font: 700 max(11px, .9cqw)/1.3 var(--sl-sans); opacity: 0; transition: opacity .15s; pointer-events: none; }
.ug-root .sl__vw:hover .sl__zoom, .ug-root .sl__vw:focus-visible .sl__zoom { opacity: 1; }
@media (hover: none) {
.ug-root .sl__zoom { opacity: 1; }
}
.ug-root .sl__phone { display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
.ug-root .sl__phone .sl__vw { flex: none; height: 100%; aspect-ratio: 390 / 844; padding: .6cqw; border-radius: 2cqw; background: #141a20; }
.ug-root .sl__phone .sl__vw img { position: static; border-radius: 1.5cqw; object-position: top center; }
.ug-root .sl--phone .sl__bd { grid-template-columns: auto minmax(0, 1fr); gap: 4cqw; }
.ug-root .sl--phone .sl__side { max-width: 46cqw; }
.ug-root .sl__side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ug-root .sl__k { display: flex; align-items: center; gap: .9cqw; margin: 0 0 1.3cqw; color: var(--sl-ink3); font-size: max(10.5px, .9cqw);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ug-root .sl__num { display: grid; place-items: center; flex: none; width: max(28px, 2.6cqw); height: max(28px, 2.6cqw); border-radius: 50%;
  background: var(--sl-slate); color: #fff; font: 600 max(13px, 1.25cqw)/1 var(--sl-display); letter-spacing: 0; }
.ug-root .sl__hand { margin: 0 0 1.3cqw; padding: .7cqw 1cqw; border-left: max(3px, .42cqw) solid var(--c); border-radius: 0 .8cqw .8cqw 0;
  background: var(--sl-paper); color: var(--sl-ink); font-size: max(12.5px, 1.13cqw); font-weight: 700; line-height: 1.35; }
.ug-root .sl__text { margin: 0; color: var(--sl-ink); font-size: max(13.5px, 1.36cqw); line-height: 1.46; }
.ug-root .sl__text b { font-weight: 800; }
.ug-root .sl__open { margin: 1.3cqw 0 0; font-size: max(12.5px, 1.12cqw); font-weight: 700; }
.ug-root .sl__open a { color: var(--sl-blue); text-decoration: none; }
.ug-root .sl__open a:hover { text-decoration: underline; }
.ug-root .sl__lock { margin-left: .5em; padding: .1em .5em; border-radius: 999px; background: #ebe6dc; color: var(--sl-ink3); font-size: .82em; font-weight: 700; }
.ug-root .sl__tip { margin-top: auto; padding: 1cqw 1.35cqw; background: var(--sl-paper); border: 1px solid var(--sl-rule);
  border-left: max(4px, .44cqw) solid var(--sl-amber); border-radius: .8cqw; color: var(--sl-ink2); font-size: max(12.5px, 1.16cqw); line-height: 1.38; }
.ug-root .sl__side > .sl__tip { margin-top: auto; }
.ug-root .sl__k + .sl__text, .ug-root .sl__hand + .sl__text { margin-top: 0; }
.ug-root .sl__open + .sl__tip, .ug-root .sl__text + .sl__tip { margin-top: auto; }
.ug-root .sl__tip .key { display: block; margin-bottom: .35cqw; color: var(--sl-amber); font-size: max(10px, .86cqw); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ug-root .sl__tip ul { margin: 0; padding-left: 1.1em; }
.ug-root .sl__tip li + li { margin-top: .3em; }
.ug-root .sl__gap { flex: 1; min-height: 1.3cqw; }
.ug-root .sl__ft { position: absolute; left: 5.7cqw; right: 5.7cqw; bottom: 2.3cqw; display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; color: var(--sl-ink3); }
.ug-root .sl__ft span:first-child { font-size: max(9.5px, .86cqw); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ug-root .sl__ft span:last-child { font-size: max(10px, .95cqw); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ug-root .sl--cover { background: var(--sl-slate); border-color: var(--sl-slate); color: #fff; }
.ug-root .sl--cover .sl__in { justify-content: space-between; padding: 6.2cqw 8.1cqw 5.2cqw; }
.ug-root .cv-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.1cqw; }
.ug-root .cv-mark { display: grid; place-items: center; width: max(34px, 3.9cqw); height: max(34px, 3.9cqw); border: 2px solid #fff; border-radius: .9cqw;
  font: 600 max(16px, 1.9cqw)/1 var(--sl-display); }
.ug-root .cv-brand b { display: block; font: 600 max(17px, 2.35cqw)/1 var(--sl-display); letter-spacing: -.01em; }
.ug-root .cv-brand small { display: block; margin-top: .55cqw; color: rgba(255, 255, 255, .88); font-size: max(9px, .72cqw); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.ug-root .cv-main { position: relative; z-index: 2; max-width: 56cqw; }
.ug-root .cv-eye { margin: 0; color: var(--sl-gold); font-size: max(10.5px, 1cqw); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.ug-root .sl--cover h1 { margin: 1.6cqw 0 0; color: #fff; font: 600 max(26px, 4.3cqw)/1.08 var(--sl-display); letter-spacing: -.025em; }
.ug-root .sl--cover h1 em { display: block; color: var(--sl-gold); font-style: normal; }
.ug-root .cv-sub p { margin: 1.7cqw 0 0; color: rgba(255, 255, 255, .9); font-size: max(14px, 1.42cqw); line-height: 1.45; }
.ug-root .cv-sub p + p { margin-top: .8cqw; }
.ug-root .cv-bars { display: flex; gap: .8cqw; margin-top: 2.4cqw; }
.ug-root .cv-bars i { display: block; width: 6cqw; height: max(4px, .64cqw); border-radius: 1cqw; }
.ug-root .cv-bars i:nth-child(1) { background: #93a1b5; }
.ug-root .cv-bars i:nth-child(2) { background: #c98a2e; }
.ug-root .cv-bars i:nth-child(3) { background: #4e86d0; }
.ug-root .cv-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5cqw 2cqw; width: 57cqw;
  padding-top: 1.5cqw; border-top: 1px solid rgba(255, 255, 255, .32); color: rgba(255, 255, 255, .9); font-size: max(12px, 1.2cqw); }
.ug-root .cv-ph { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-auto-rows: 1fr; gap: .45cqw; width: 33cqw; background: var(--sl-slate); }
.ug-root .cv-ph img { display: block; width: 100%; height: 100%; min-height: 0; max-width: none; object-fit: cover; object-position: top left; }
.ug-root .cv-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sl-slate) 0, rgba(60, 76, 99, .55) 14%, rgba(60, 76, 99, 0) 42%); }
@container (max-width: 767.98px) {
.ug-root .sl__in { aspect-ratio: auto; padding: 22px 18px 46px; }
.ug-root .sl__hd { flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ug-root .sl__hd h2 { max-width: none; }
.ug-root .sl__bd, .ug-root .sl--phone .sl__bd { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ug-root .sl--phone .sl__side { max-width: none; }
.ug-root .sl__vw { flex: none; }
.ug-root .sl__vw img { position: static; height: auto; }
.ug-root .sl__phone .sl__vw { height: auto; width: min(240px, 72%); padding: 6px; border-radius: 22px; }
.ug-root .sl__phone .sl__vw img { border-radius: 16px; }
.ug-root .sl__tip, .ug-root .sl__open + .sl__tip, .ug-root .sl__text + .sl__tip, .ug-root .sl__side > .sl__tip { margin-top: 14px; }
.ug-root .sl__k { margin-bottom: 10px; }
.ug-root .sl__hand { margin-bottom: 10px; padding: 8px 10px; }
.ug-root .sl__open { margin-top: 12px; }
.ug-root .sl__ft { left: 18px; right: 18px; bottom: 14px; }
.ug-root .sl--cover .sl__in { gap: 22px; padding: 26px 20px 22px; }
.ug-root .cv-ph { display: none; }
.ug-root .cv-main, .ug-root .cv-foot { max-width: none; width: auto; }
.ug-root .cv-sub p { margin-top: 12px; }
.ug-root .cv-bars { margin-top: 16px; }
.ug-root .cv-bars i { width: 46px; }
}
.ug-root .dk-hud { display: none; }
html.dk-present, html.dk-present body { height: 100%; overflow: hidden; }
html.dk-present body { background: #000; visibility: hidden; }
html.dk-present .ug-root .sl { display: none; }
html.dk-present .ug-root .sl.is-cur { display: block; visibility: visible; position: fixed; z-index: 100; left: 50%; top: 50%; width: 1280px; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: center center; }
html.dk-present .ug-root .sl.is-cur .sl__in { aspect-ratio: auto; height: 720px; overflow: hidden; }
html.dk-present .ug-root .sl .shot { pointer-events: none; }
html.dk-present .ug-root .sl__zoom { display: none; }
html.dk-present .ug-root .dk-hud { display: flex; visibility: visible; position: fixed; z-index: 101; right: 14px; bottom: 12px; align-items: center; gap: .5rem;
  padding: .35rem .4rem .35rem .8rem; border-radius: 999px; background: rgba(20, 24, 32, .82); color: #fff; font: 600 .85rem/1 var(--sl-sans, sans-serif); }
.ug-root .dk-hud button { padding: .4rem .7rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.ug-root .dk-hud button:hover { background: rgba(255, 255, 255, .14); }
.ug-root .v4-formats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .18); font-size: .84rem; }
.ug-root .v4-formats span { color: var(--on-dark-dim); font-weight: 600; }
.ug-root .v4-formats a { color: var(--on-dark); font-weight: 600; }
.ug-root .v4-formats a[aria-current] { padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .14); text-decoration: none; }
@media print {
.ug-root .dk-bar, .ug-root .dk-hud { display: none !important; }
.ug-root .sl { break-inside: avoid; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.ug-root .sl__zoom { transition: none; }
}
.ug-root { scroll-padding-top: 96px; }
@media (max-width: 767.98px) {
.ug-root { scroll-padding-top: 64px; }
}
html.n5-locked { overflow: hidden; }
.ug-root main.n5-flow, .ug-root main.n5-section, .ug-root main.n5-home { padding-top: 1.25rem; padding-bottom: 4.5rem; }
.ug-root .n5-top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: saturate(1.3) blur(8px); }
.ug-root .n5-top__in { display: flex; align-items: center; gap: .75rem 1.1rem; min-height: 64px; }
.ug-root .n5-brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; color: var(--ink); text-decoration: none; }
.ug-root .n5-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-dd); color: var(--on-dark);
  font: var(--heading-weight) 1rem/1 var(--font-display); }
.ug-root .n5-brand b { display: block; font-size: .98rem; line-height: 1.2; }
.ug-root .n5-brand small { display: block; color: var(--ink3); font-size: .78rem; }
.ug-root .n5-parts { display: flex; align-items: center; gap: .1rem; }
.ug-root .n5-parts a { position: relative; padding: .5rem .75rem; border-radius: 8px; color: var(--ink2); font-size: .92rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.ug-root .n5-parts a:hover { background: var(--wash2); color: var(--ink); }
.ug-root .n5-parts a[aria-current] { color: var(--ink); }
.ug-root .n5-parts a[aria-current]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -14px; height: 3px; border-radius: 3px; background: var(--brand); }
.ug-root .n5-all { display: inline-flex; flex: none; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 600 .88rem/1 var(--font-body); cursor: pointer; }
.ug-root .n5-all:hover { border-color: var(--brand); }
@media (max-width: 991.98px) {
.ug-root .n5-parts { display: none; }
}
@media (max-width: 767.98px) {
.ug-root .n5-top { position: static; }
.ug-root .n5-brand small { display: none; }
.ug-root .n5-all { padding: .5rem .75rem; }
}
.ug-root .n5-top .settingsbar { position: relative; inset: auto; z-index: 45; flex: none; width: 38px; height: 38px; transform: none;
  --panel-w: min(500px, calc(100vw - 1.5rem)); }
.ug-root .n5-top .settings__toggle, .ug-root .n5-top .settingsbar[data-open] .settings__toggle, .ug-root .n5-top .settingsbar:hover .settings__toggle, .ug-root .n5-top .settingsbar:focus-within .settings__toggle { position: static; width: 38px; height: 38px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--paper); color: var(--ink2); box-shadow: none; }
.ug-root .n5-top .settings__toggle:hover { color: var(--ink); background: var(--wash2); }
.ug-root .n5-top .settings__toggle svg, .ug-root .n5-top .settingsbar[data-open] .settings__toggle svg, .ug-root .n5-top .settingsbar:hover .settings__toggle svg, .ug-root .n5-top .settingsbar:focus-within .settings__toggle svg { width: 20px; height: 20px; transform: none; }
.ug-root .n5-top .settings__panel { top: calc(100% + .6rem); right: 0; bottom: auto; left: auto; border-left: 1px solid var(--line); border-radius: 16px;
  translate: 0 -.5rem; max-height: calc(100vh - 6rem); }
.ug-root .n5-top .settingsbar[data-open] .settings__panel { translate: 0 0; opacity: 1; visibility: visible; pointer-events: auto; }
.ug-root .n5-top .settingsbar:not([data-open]):hover .settings__panel, .ug-root .n5-top .settingsbar:not([data-open]):focus-within .settings__panel {
  translate: 0 -.5rem; opacity: 0; visibility: hidden; pointer-events: none; }
.ug-root .n5-top .settingsbar[data-open]:focus-within .settings__panel { opacity: 1; visibility: visible; pointer-events: auto; }
.ug-root .n5-top .settings__title { padding-right: 0; }
.ug-root .n5-drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 1.25rem 2.5rem;
  overflow-y: auto; border: 0; border-left: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.ug-root .n5-drawer::backdrop { background: rgba(10, 14, 20, .45); }
.ug-root .n5-drawer__hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 .8rem;
  border-bottom: 1px solid var(--line); background: var(--paper); }
.ug-root .n5-drawer__hd b { font: var(--heading-weight) 1.2rem/1.2 var(--font-display); }
.ug-root .n5-drawer__part { margin-top: 1.5rem; }
.ug-root .n5-drawer__part h2 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem; font: var(--heading-weight) 1.1rem/1.3 var(--font-display); }
.ug-root .n5-drawer__part h2 a { color: var(--ink); text-decoration: none; }
.ug-root .n5-drawer__part h2 a:hover { text-decoration: underline; }
.ug-root .n5-drawer__part h2 small { color: var(--ink3); font: 500 .8rem/1 var(--font-body); }
.ug-root .n5-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 10px; background: var(--paper);
  color: var(--ink2); font-size: 1rem; cursor: pointer; }
.ug-root .n5-x:hover { color: var(--ink); background: var(--wash2); }
.ug-root .n5-group + .n5-group { margin-top: 1.6rem; }
.ug-root .n5-group__h h3 { margin: 0; color: var(--ink2); font: 700 .78rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.ug-root .n5-group__h p { max-width: 62ch; margin: .25rem 0 .55rem; color: var(--ink3); font-size: .88rem; line-height: 1.45; }
.ug-root .n5-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ug-root .n5-rows li { border-bottom: 1px solid var(--line); }
.ug-root .n5-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .7rem .5rem; border-radius: 8px;
  color: var(--ink); text-decoration: none; }
.ug-root .n5-row:hover { background: var(--wash2); }
.ug-root .n5-row[aria-current] { background: var(--brand-w); }
.ug-root .n5-row__n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wash2); color: var(--ink2);
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ug-root .n5-row[aria-current] .n5-row__n { background: var(--brand); color: var(--on-dark); }
.ug-root .n5-row__b { min-width: 0; }
.ug-root .n5-row__b b { display: block; font-size: .98rem; font-weight: 650; line-height: 1.35; }
.ug-root .n5-row__m { display: block; margin-top: .15rem; color: var(--ink3); font-size: .82rem; line-height: 1.4; }
.ug-root .n5-row__go { color: var(--ink3); font-size: 1.25rem; line-height: 1; }
.ug-root .n5-context { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-bottom: 1.75rem; }
.ug-root .n5-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; color: var(--ink3); font-size: .85rem; }
.ug-root .n5-crumb a { color: var(--ink2); text-decoration: none; }
.ug-root .n5-crumb a:hover { text-decoration: underline; }
.ug-root .n5-guidebar { position: relative; display: flex; align-items: center; gap: .5rem; }
.ug-root .n5-arrow { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 50%;
  background: var(--paper); color: var(--ink); font-size: 1.35rem; line-height: 1; text-decoration: none; }
.ug-root .n5-arrow:hover { border-color: var(--brand); color: var(--brand-d); }
.ug-root .n5-arrow.is-off { opacity: .3; }
.ug-root .n5-picker { position: static; min-width: 0; }
.ug-root .n5-picker summary { display: flex; align-items: baseline; gap: .6rem; min-width: 0; padding: .55rem 1rem; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--paper); cursor: pointer; list-style: none; }
.ug-root .n5-picker summary::-webkit-details-marker { display: none; }
.ug-root .n5-picker summary:hover { border-color: var(--brand); }
.ug-root .n5-picker__k { flex: none; color: var(--ink3); font-size: .82rem; font-weight: 600; }
.ug-root .n5-picker summary b { overflow: hidden; font-size: 1rem; white-space: nowrap; text-overflow: ellipsis; }
.ug-root .n5-picker__v { flex: none; color: var(--ink3); font-size: .8rem; transition: transform .15s; }
.ug-root .n5-picker[open] .n5-picker__v { transform: rotate(180deg); }
.ug-root .n5-picker__panel { position: absolute; z-index: 45; top: calc(100% + .5rem); left: 0; width: min(580px, 100%); max-height: min(70vh, 640px); overflow-y: auto;
  padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 20px 50px -20px rgb(var(--shadow) / .45); }
.ug-root .n5-journey { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .85rem; }
.ug-root .n5-journey__k { color: var(--ink3); font-weight: 600; }
.ug-root .n5-journey ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.ug-root .n5-journey li { display: flex; align-items: center; white-space: nowrap; }
.ug-root .n5-journey li + li::before { content: "›" / ""; margin: 0 .4rem; color: var(--ink3); }
.ug-root .n5-journey a { padding: .15rem 0; border-bottom: 2px solid transparent; color: var(--ink3); text-decoration: none; }
.ug-root .n5-journey a:hover { color: var(--ink); }
.ug-root .n5-journey .is-done a { color: var(--ink2); }
.ug-root .n5-journey .is-here a { border-bottom-color: var(--brand); color: var(--ink); font-weight: 700; }
.ug-root .n5-journey .is-near a { border-bottom: 2px dashed var(--brand); color: var(--ink2); }
@media (max-width: 767.98px) {
.ug-root .n5-journey ol { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ug-root .n5-picker__k { display: none; }
}
.ug-root .n5-layout { display: block; }
@media (min-width: 992px) {
.ug-root .n5-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}
.ug-root .n5-rail { display: none; }
@media (min-width: 992px) {
.ug-root .n5-rail { display: block; position: sticky; top: calc(64px + 20px); max-height: calc(100vh - 104px); overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; }
}
.ug-root .n5-rail__hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .6rem; margin: 0 0 .25rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--line); background: var(--wash); }
.ug-root .n5-rail__hd b { margin-right: auto; font-size: .95rem; }
.ug-root .n5-rail .dk-present { padding: .42rem .8rem; font-size: .8rem; }
.ug-root .n5-rail__x { display: none; }
.ug-root .n5-grps, .ug-root .n5-steps { margin: 0; padding: 0; list-style: none; }
.ug-root .n5-grp { margin-top: 1.1rem; }
.ug-root .n5-who { display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem .5rem; color: var(--ink2); font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }
.ug-root .n5-who i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ug-root .n5-who span { margin-left: auto; color: var(--ink3); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ug-root .n5-steps a { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); gap: .6rem; align-items: start; padding: .42rem .5rem; border-radius: 9px;
  color: var(--ink2); font-size: .88rem; line-height: 1.4; text-decoration: none; }
.ug-root .n5-steps a:hover { background: var(--wash2); color: var(--ink); }
.ug-root .n5-n { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--wash2); color: var(--ink2);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ug-root .n5-t { display: -webkit-box; overflow: hidden; padding-top: .12rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ug-root .n5-steps a.done .n5-n { background: var(--brand-w); color: var(--brand-d); }
.ug-root .n5-steps a.on { background: var(--brand-w); color: var(--ink); font-weight: 600; }
.ug-root .n5-steps a.on .n5-n { background: var(--brand); color: var(--on-dark); }
.ug-root .n5-stepsbar { top: 64px; }
.ug-root .n5-stepsbar__in { display: flex; align-items: center; gap: .8rem; padding-top: .5rem; padding-bottom: .5rem; }
.ug-root .n5-stepsbtn { flex: none; padding: .42rem .85rem; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 .82rem/1 var(--font-body); cursor: pointer; }
@media (max-width: 767.98px) {
.ug-root .n5-stepsbar { top: 0; }
}
@media (min-width: 992px) {
.ug-root .n5-stepsbar { display: none !important; }
}
@media (max-width: 991.98px) {
.ug-root .n5-rail { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; max-height: 78vh; overflow-y: auto;
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--paper);
    box-shadow: 0 -12px 40px rgb(var(--shadow) / .3); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.ug-root .n5-rail.is-open { transform: none; visibility: visible; }
.ug-root .n5-rail__hd { top: -1rem; padding-top: 1rem; background: var(--paper); }
.ug-root .n5-rail__x { display: grid; }
.ug-root .n5-rail .dk-present { display: none; }
}
.ug-root .n5-scrim { position: fixed; inset: 0; z-index: 74; background: rgba(10, 14, 20, .45); }
.ug-root .n5-scrim[hidden] { display: none; }
.ug-root .n5-after { display: grid; gap: .9rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.ug-root .n5-next { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink); text-decoration: none; }
.ug-root .n5-next:hover { border-color: var(--brand); }
.ug-root .n5-next span { color: var(--ink3); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ug-root .n5-next b { font-size: 1.1rem; line-height: 1.3; }
.ug-root .n5-prevguide { color: var(--ink2); font-size: .9rem; text-decoration: none; }
.ug-root .n5-prevguide:hover { text-decoration: underline; }
@media (min-width: 768px) {
.ug-root .n5-after { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.ug-root .n5-prevguide { order: -1; max-width: 32ch; }
.ug-root .n5-next { justify-self: end; width: min(100%, 520px); }
}
.ug-root .n5-head { margin: .75rem 0 2rem; }
.ug-root .n5-kicker { margin: 0 0 .4rem; color: var(--brand-d); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ug-root .n5-head h1 { margin: 0; }
.ug-root .n5-lede { max-width: 62ch; margin: .6rem 0 0; color: var(--ink2); font-size: 1.05rem; line-height: 1.6; }
.ug-root .n5-section > .n5-group { max-width: 860px; }
.ug-root .n5-otherparts { max-width: 860px; margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.ug-root .n5-otherparts h2 { margin: 0 0 .6rem; font: 700 .78rem/1.3 var(--font-body); color: var(--ink2); letter-spacing: .08em; text-transform: uppercase; }
.ug-root .n5-otherparts ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ug-root .n5-otherparts a { color: var(--brand-d); font-weight: 600; text-decoration: none; }
.ug-root .n5-otherparts a:hover { text-decoration: underline; }
.ug-root .n5-otherparts span { color: var(--ink3); font-size: .85rem; }
.ug-root .n5-hero { max-width: 768px; padding: 1.75rem 0 .5rem; }
.ug-root .n5-hero h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.12; }
.ug-root .n5-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.ug-root .n5-btn { display: inline-flex; align-items: center; padding: .7rem 1.2rem; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand);
  color: var(--on-dark); font-weight: 700; text-decoration: none; }
.ug-root .n5-btn:hover { border-color: var(--brand-d); background: var(--brand-d); }
.ug-root .n5-btn--ghost { border-color: var(--line2); background: transparent; color: var(--ink); }
.ug-root .n5-btn--ghost:hover { border-color: var(--brand); background: transparent; color: var(--ink); }
.ug-root .n5-block { margin-top: 3.25rem; }
.ug-root .n5-block h2 { margin: 0; font: var(--heading-weight) 1.45rem/1.25 var(--font-display); letter-spacing: var(--heading-tracking); }
.ug-root .n5-sub { margin: .35rem 0 0; color: var(--ink3); }
.ug-root .n5-partlist, .ug-root .n5-job, .ug-root .n5-whois { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
@media (min-width: 576px) {
.ug-root .n5-partlist, .ug-root .n5-job { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.ug-root .n5-whois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .n5-partlist, .ug-root .n5-job { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ug-root .n5-part { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink); text-decoration: none; }
.ug-root .n5-part:hover { border-color: var(--brand); }
.ug-root .n5-part__k { color: var(--ink3); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ug-root .n5-part b { font: var(--heading-weight) 1.25rem/1.25 var(--font-display); }
.ug-root .n5-part__m { margin-top: auto; padding-top: .6rem; color: var(--brand-d); font-size: .9rem; font-weight: 600; }
.ug-root .n5-job a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: .75rem; height: 100%; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; }
.ug-root .n5-job a:hover { border-color: var(--brand); }
.ug-root .n5-job__n { grid-row: 1 / 3; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-w); color: var(--brand-d);
  font-size: .85rem; font-weight: 700; }
.ug-root .n5-job b { font-size: 1rem; line-height: 1.3; }
.ug-root .n5-job__t { margin-top: .15rem; color: var(--ink3); font-size: .82rem; line-height: 1.35; }
.ug-root .n5-whois li { padding: 1rem 1.1rem; border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; background: var(--paper); }
.ug-root .n5-whois h3 { margin: 0; font-size: 1.02rem; }
.ug-root .n5-whois p { margin: .35rem 0 0; color: var(--ink2); font-size: .9rem; line-height: 1.5; }
.ug-root .n5-whois p.n5-whois__r { color: var(--ink3); font-size: .82rem; }
.ug-root .n5-note { max-width: 68ch; margin: 1rem 0 0; color: var(--ink3); font-size: .85rem; }
.ug-root .n5-roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-width: 860px; margin-top: 1rem; }
.ug-root .n5-role { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.ug-root .n5-role summary { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.ug-root .n5-role summary::-webkit-details-marker { display: none; }
.ug-root .n5-role summary i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ug-root .n5-role summary span { margin-left: auto; color: var(--ink3); font-size: .85rem; }
.ug-root .n5-role summary::after { content: "⌄" / ""; margin: -.35rem 0 0 .5rem; color: var(--ink2); font-size: 1.15rem; line-height: 1; transition: transform .15s; }
.ug-root .n5-role[open] summary::after { transform: translateY(.35rem) rotate(180deg); }
.ug-root .n5-role ul { display: grid; gap: .35rem; margin: 0; padding: 0 1rem 1rem 2.65rem; list-style: none; }
.ug-root .n5-role a { color: var(--brand-d); font-size: .92rem; text-decoration: none; }
.ug-root .n5-role a:hover { text-decoration: underline; }
.ug-root .n5-flow .dk { gap: 1.5rem; }
@media print {
.ug-root .n5-top, .ug-root .n5-context, .ug-root .n5-rail, .ug-root .n5-stepsbar, .ug-root .n5-after, .ug-root .n5-drawer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.ug-root { scroll-behavior: auto; }
.ug-root .n5-rail, .ug-root .n5-picker__v, .ug-root .n5-role summary::after { transition: none; }
}
.ug-root { scroll-padding-top: 96px; }
@media (min-width: 768px) and (max-width: 991.98px) {
.ug-root { scroll-padding-top: 145px; }
}
@media (max-width: 767.98px) {
.ug-root { scroll-padding-top: 64px; }
}
.ug-root main.o6-flow, .ug-root main.o6-section, .ug-root main.o6-home { padding-top: 1rem; padding-bottom: 4.5rem; }
.ug-root { display: flex; flex-direction: column; min-height: 100vh; }
.ug-root > main { flex: 1 0 auto; }
@media (min-width: 992px) {
.ug-root .v2-bar__in { overflow: visible; }
}
.ug-root .o6-all { display: inline-flex; flex: none; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--on-dark); font: 600 .85rem/1 var(--font-body); cursor: pointer; }
.ug-root .o6-all:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 991.98px) {
.ug-root .v2-bar .v2-brand { order: 0; }
.ug-root .o6-all { order: 1; margin-left: auto; margin-right: 46px; }
.ug-root .v2-bar .v2-nav { order: 2; }
.ug-root .settingsbar { top: .55rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ug-root .settingsbar { top: .38rem; }
}
.ug-root .o6-crumb { margin: .4rem 0 .9rem; }
.ug-root .o6-tabs { display: grid; gap: .55rem; margin: 0 0 1.1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.ug-root .o6-tabs__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
@media (min-width: 768px) {
.ug-root .o6-tabs__row { grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 1rem; }
}
.ug-root .o6-tabs__k { color: var(--ink3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ug-root .o6-tabs ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ug-root .o6-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .35rem; border-radius: 999px; color: var(--ink2);
  font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ug-root .o6-tabs a:hover { background: var(--wash2); color: var(--ink); }
.ug-root .o6-tabs__n { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .25rem; border-radius: 999px; background: var(--wash2);
  color: var(--ink2); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ug-root .o6-tabs a[aria-current] { background: var(--brand); color: var(--on-dark); font-weight: 700; }
.ug-root .o6-tabs a[aria-current] .o6-tabs__n { background: var(--brand-dd); color: var(--on-dark); }
@media (max-width: 767.98px) {
.ug-root .o6-tabs ol { flex-wrap: nowrap; margin: 0 -.75rem; padding: 0 .75rem .2rem; overflow-x: auto; scrollbar-width: none; }
}
.ug-root .o6-job { margin: 0 0 1.5rem; }
.ug-root .o6-job__k { margin: 0 0 .6rem; color: var(--ink3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ug-root .o6-job ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ug-root .o6-job li { position: relative; }
.ug-root .o6-job li + li::before { content: ""; position: absolute; z-index: 0; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--line2); }
.ug-root .o6-job li.is-done::before, .ug-root .o6-job li.is-here::before { background: var(--brand); }
.ug-root .o6-job a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0 .25rem;
  color: var(--ink2); text-align: center; text-decoration: none; }
.ug-root .o6-job__dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line2);
  color: var(--ink2); font-size: .76rem; font-weight: 700; transition: box-shadow .15s; }
.ug-root .o6-job__l { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.ug-root .o6-job__t { color: var(--ink3); font-size: .75rem; line-height: 1.3; }
.ug-root .o6-job a:hover .o6-job__dot { box-shadow: inset 0 0 0 2px var(--brand); }
.ug-root .o6-job a:hover .o6-job__l { color: var(--ink); }
.ug-root .o6-job .is-done .o6-job__dot { background: var(--brand-w); box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand-d); }
.ug-root .o6-job .is-here .o6-job__dot { background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); color: var(--on-dark); }
.ug-root .o6-job .is-here .o6-job__l { color: var(--ink); font-weight: 800; }
.ug-root .o6-job .is-near .o6-job__dot { outline: 2px dashed var(--brand); outline-offset: 2px; }
@media (max-width: 767.98px) {
.ug-root .o6-job ol { grid-template-columns: repeat(8, 86px); margin: 0 -.75rem; padding: 0 .75rem .3rem; overflow-x: auto; scrollbar-width: none; }
}
.ug-root .o6-gn { margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ug-root .o6-gn__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: .95rem 1rem; }
.ug-root .o6-gn__row + .o6-gn__row { border-top: 1px solid var(--line); }
@media (min-width: 768px) {
.ug-root .o6-gn__row { grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 1.25rem; padding: 1.05rem 1.25rem; }
}
.ug-root .o6-gn__k { display: grid; gap: .1rem; margin: 0; }
.ug-root .o6-gn__k b { color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ug-root .o6-gn__k > span { color: var(--ink3); font-size: .8rem; line-height: 1.35; }
.ug-root .o6-gn__k .o6-gn__near { margin-top: .3rem; color: var(--ink2); }
.ug-root .o6-gn__near a { font-weight: 700; white-space: nowrap; }
.ug-root .o6-gn .o6-job { margin: 0; }
.ug-root .o6-gn__set { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ug-root .o6-gn__set a { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: var(--wash2); color: var(--ink2);
  font-size: .88rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.ug-root .o6-gn__set a:hover { background: var(--brand-w); color: var(--ink); }
.ug-root .o6-gn__set a[aria-current] { background: var(--brand); color: var(--on-dark); font-weight: 700; }
@media (max-width: 767.98px) {
.ug-root .o6-gn .o6-job ol { margin: 0 -1rem; padding: 0 1rem .3rem; }
}
.ug-root .n5-row__n.o6-nonum { width: .6rem; height: .6rem; justify-self: center; background: transparent; box-shadow: inset 0 0 0 2px var(--line2); }
.ug-root .n5-row[aria-current] .n5-row__n.o6-nonum { background: var(--brand); box-shadow: none; }
@media (min-width: 992px) {
.ug-root .o6-flow .n5-rail { top: calc(var(--bar-h) + 20px); max-height: calc(100vh - var(--bar-h) - 40px); }
}
.ug-root .o6-flow .n5-stepsbar { top: var(--bar-h); }
@media (max-width: 767.98px) {
.ug-root .o6-flow .n5-stepsbar { top: 0; }
}
.ug-root .o6-head { margin: 0 0 1.5rem; }
.ug-root .o6-head h1 { margin: .2rem 0 0; }
.ug-root .o6-group + .o6-group { margin-top: 2.25rem; }
.ug-root .o6-group__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 .9rem; }
.ug-root .o6-group__h h2 { margin: 0; font: var(--heading-weight) 1.25rem/1.3 var(--font-display); letter-spacing: var(--heading-tracking); }
.ug-root .o6-group__h p { margin: 0; color: var(--ink3); font-size: .9rem; }
.ug-root .o6-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) {
.ug-root .o6-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .o6-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .o6-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ug-root .o6-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
  color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ug-root .o6-card:hover { border-color: var(--brand); box-shadow: 0 10px 24px -14px rgb(var(--shadow) / .4); transform: translateY(-2px); }
.ug-root .o6-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--wash2); }
.ug-root .o6-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ug-root .o6-card__img--phone { padding: 8px 0 0; background: var(--device); }
.ug-root .o6-card__img--phone img { object-fit: contain; object-position: top center; }
.ug-root .o6-card__b { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .15rem .65rem; padding: .8rem .9rem .95rem; }
.ug-root .o6-card__n { grid-row: 1 / 3; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--wash2); color: var(--ink2);
  font-size: .78rem; font-weight: 700; }
.ug-root .o6-card b { font-size: .98rem; line-height: 1.3; }
.ug-root .o6-card__m { color: var(--ink3); font-size: .8rem; line-height: 1.4; }
.ug-root .o6-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) {
.ug-root .o6-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .o6-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .o6-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ug-root .o6-tile--a { --tone: var(--brand); --tone-soft: var(--on-brand-dim); }
.ug-root .o6-tile--b { --tone: var(--brand-d); --tone-soft: var(--on-brand-dim); }
.ug-root .o6-tile { position: relative; display: flex; flex-direction: column; gap: .55rem; height: 100%; min-height: 158px; padding: 1.05rem 1.15rem 1.1rem;
  border-radius: 14px; background: var(--tone); color: var(--on-dark); text-decoration: none; box-shadow: 0 1px 2px rgba(12, 17, 22, .14);
  transition: transform .15s, box-shadow .15s, filter .15s; }
.ug-root .o6-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(12, 17, 22, .6); filter: brightness(1.07); }
.ug-root .o6-tile::after { content: "→" / ""; position: absolute; top: 1.15rem; right: 1.05rem; color: var(--tone-soft); font-size: 1.1rem; line-height: 1;
  transition: transform .15s; }
.ug-root .o6-tile:hover::after { transform: translateX(3px); }
.ug-root .o6-tile__hd { display: flex; align-items: center; gap: .7rem; padding-right: 1.5rem; }
.ug-root .o6-tile__n { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--paper); color: var(--tone);
  font: 600 1rem/1 "OutfitS", "ManropeS", system-ui, sans-serif; }
.ug-root .o6-tile__hd b { font: 600 1.3rem/1.15 "OutfitS", "ManropeS", system-ui, sans-serif; letter-spacing: -.01em; }
.ug-root .o6-tile__t { color: var(--on-dark); font-size: .94rem; line-height: 1.4; }
.ug-root .o6-tile__m { margin-top: auto; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .24); color: var(--tone-soft); font-size: .8rem; line-height: 1.4; }
.ug-root .o6-tile__k { color: var(--tone-soft); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ug-root .n5-block > .o6-tiles { margin-top: 1.1rem; }
.ug-root .o6-tile--part { min-height: 132px; }
.ug-root .o6-tile--part .o6-tile__hd b { font-size: 1.45rem; }
.ug-root .o6-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ug-root .o6-tile--who { min-height: 0; }
.ug-root .o6-tile--who:hover { transform: none; box-shadow: 0 1px 2px rgba(12, 17, 22, .14); filter: none; }
.ug-root .o6-tile--who::after { display: none; }
.ug-root .o6-tile--who .o6-tile__hd { padding-right: 0; }
.ug-root .o6-tile--who .o6-tile__hd i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--on-dark); }
.ug-root .o6-tile--who .o6-tile__hd b { font-size: 1.12rem; }
.ug-root .o6-tile--who .o6-tile__hd small { margin-left: auto; color: var(--tone-soft); font-size: .78rem; }
.ug-root .o6-tile--who ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 0; padding: 0; list-style: none; }
.ug-root .o6-tile--who a { display: inline-block; padding: .22rem .6rem; border-radius: 999px; background: rgba(0, 0, 0, .2); color: var(--on-dark);
  font-size: .8rem; text-decoration: none; }
.ug-root .o6-tile--who a:hover { background: rgba(0, 0, 0, .34); }
.ug-root .o6-tile--who a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.ug-root .o6-home .org__box { padding: 1rem 1.15rem; border: 0; border-radius: 14px; color: var(--on-dark); box-shadow: 0 1px 2px rgba(12, 17, 22, .14); }
.ug-root .o6-home .org__box--ho { --tone-soft: var(--on-dark-soft); background: var(--brand-dd); }
.ug-root .o6-home .org__box--fr { --tone-soft: var(--on-brand-dim); background: var(--brand-d); }
.ug-root .o6-home .org__box--cu { --tone-soft: var(--on-brand-dim); background: var(--brand); }
.ug-root .o6-home .org__box b { color: var(--on-dark); font: 600 1.18rem/1.2 "OutfitS", "ManropeS", system-ui, sans-serif; letter-spacing: -.01em; }
.ug-root .o6-home .org__box span:not([class]) { color: var(--on-dark); font-size: .92rem; }
.ug-root .o6-home .org__box small { color: var(--tone-soft); }
.ug-root .o6-home .org__i { color: var(--on-dark); }
.ug-root .o6-home .org__box .v2-chip { background: rgba(0, 0, 0, .2); color: var(--on-dark); font-size: .76rem; }
.ug-root .o6-home .org__f { border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .16); color: var(--on-dark); }
.ug-root .o6-home .org__f b { font: 600 .95rem/1.2 "OutfitS", "ManropeS", system-ui, sans-serif; }
.ug-root .o6-home .org__f small { color: var(--on-dark); }
.ug-root .o6-home .org__f--more { border-color: rgba(255, 255, 255, .4); background: transparent; color: var(--on-dark); }
.ug-root .o6-home .org__down { background: var(--brand-d); }
.ug-root .o6-home .org__down::after { border-top-color: var(--brand-d); }
.ug-root .o6-group__h--a h2::before, .ug-root .o6-group__h--b h2::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .5rem;
  border-radius: 3px; background: var(--brand); vertical-align: .05em; }
.ug-root .o6-group__h--b h2::before { background: var(--brand-d); }
.ug-root .o6-others { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ug-root .o6-others a { display: inline-flex; align-items: baseline; gap: .4rem; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.ug-root .o6-others a:hover { border-color: var(--brand); }
.ug-root .o6-others small { color: var(--ink3); font-weight: 500; }
.ug-root .o6-hero { max-width: 768px; padding: 1rem 0 .25rem; }
.ug-root .o6-hero h1 { margin: .2rem 0 0; }
.ug-root .o6-home .org { margin-top: 1.1rem; }
.ug-root .o6-home .o6-job { margin-top: 1.25rem; }
.ug-root .o6-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: 1.1rem 0 0; }
@media (min-width: 576px) {
.ug-root .o6-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .o6-who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .o6-who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media print {
.ug-root .o6-tabs, .ug-root .o6-job, .ug-root .o6-all { display: none !important; }
}
.ug-root .sl.step .sl__in { aspect-ratio: auto; min-height: 56.25cqw; padding-bottom: 7.2cqw; }
.ug-root .sl.step .sl__shot { min-height: 30cqw; }
@container (min-width: 768px) {
.ug-root .sl.step:not(.sl--phone) .sl__bd { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
}
@container (min-width: 768px) {
.ug-root .sl.step:not(.sl--phone) .sl__shot { align-self: start; min-height: 0; max-height: 100%; }
.ug-root .sl.step:not(.sl--phone) .sl__vw { flex: 0 1 auto; min-height: 0; aspect-ratio: var(--ar, 1440 / 1000); }
}
html.dk-present .ug-root .sl.step:not(.sl--phone) .sl__bd { grid-template-rows: minmax(0, 1fr); }
.ug-root .sl__phone .sl__vw img { object-fit: contain; }
@media (min-width: 992px) and (max-width: 1399.98px) {
.ug-root .v2-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ug-root .v2-nav::-webkit-scrollbar { display: none; }
.ug-root .v2-brand__t { display: none; }
}
.ug-root .sl__zoom { top: auto; bottom: .8cqw; }
@container (max-width: 767.98px) {
.ug-root .sl__zoom { position: static; display: block; width: max-content; margin: 6px 0 0 auto; opacity: 1; }
.ug-root .sl__phone .sl__vw { aspect-ratio: auto; }
}
.ug-root .sl__do { display: grid; gap: .75cqw; margin: 1.2cqw 0 0; padding: 0; list-style: none; counter-reset: do; }
.ug-root .sl__do li { position: relative; padding-left: 2.05em; color: var(--sl-ink); font-size: max(13px, 1.22cqw); line-height: 1.42; counter-increment: do; }
.ug-root .sl__do li::before { content: counter(do); position: absolute; left: 0; top: .08em; display: grid; place-items: center; width: 1.45em; height: 1.45em;
  border-radius: 50%; background: color-mix(in srgb, var(--sl-blue) 13%, white); color: var(--sl-blue); font: 800 .76em/1 var(--sl-sans); }
.ug-root .sl__do b, .ug-root .sl__note b { font-weight: 800; }
.ug-root .sl__do--one li { padding-left: 0; }
.ug-root .sl__do--one li::before { content: none; }
.ug-root .sl__note { margin: 1cqw 0 0; color: var(--sl-ink3); font-size: max(12px, 1.06cqw); line-height: 1.42; }
.ug-root .sl__note + .sl__note { margin-top: .5cqw; }
.ug-root .sl__tip--see { border-left-color: var(--sl-blue); }
.ug-root .sl__tip--see .key { color: var(--sl-blue); }
.ug-root .sl__tip--see p { margin: 0; }
.ug-root .sl__open a + a { margin-left: 1.1em; }
.ug-root .sl__open .sl__alt { color: var(--sl-ink3); font-weight: 600; }
.ug-root .sl.step .sl__side > :has(+ .sl__tip) { margin-bottom: 1.2cqw; }
.ug-root .cv-sub ul { margin: 1.2cqw 0 0; padding-left: 1.1em; color: rgba(255, 255, 255, .9); font-size: max(13px, 1.28cqw); line-height: 1.42; }
.ug-root .cv-sub li + li { margin-top: .35cqw; }
.ug-root .cv-sub b { color: #fff; }
@container (max-width: 767.98px) {
.ug-root .sl.step .sl__in { min-height: 0; padding-bottom: 46px; }
.ug-root .sl.step .sl__shot { min-height: 0; }
.ug-root .sl__do { gap: 8px; margin-top: 12px; }
.ug-root .sl__note { margin-top: 10px; }
.ug-root .cv-sub ul { margin-top: 12px; }
}
@media (min-width: 992px) {
.ug-root .o6-job ol[style] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
}
.ug-root .o6-cards .o6-card__img img { object-position: top left; }
.ug-root .o6-card__m code { font: 500 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ug-root .role-icon { display: block; width: 1rem; height: 1rem; flex: none; }
.ug-root .v2-nav a { display: inline-flex; align-items: center; gap: .35rem; }
.ug-root .sl__av { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ug-root .sl__av .role-icon { width: 70%; height: 70%; }
.ug-root .n5-after { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.ug-root .n5-next { justify-self: stretch; width: 100%; height: 100%; min-width: 0; }
@media (min-width: 576px) {
.ug-root .n5-after:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .n5-after:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html[lang="vi"] .ug-root .dk { --sl-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sl-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
html[lang="vi"] .ug-root.typo-optimus { --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif; --heading-weight: 700; }
html.dk-present .ug-root .sl.step .sl__hd { margin-bottom: calc(2.9cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__hd h2 { font-size: calc(3.05cqw * (0.55 + 0.45 * var(--k, 1))); }
html.dk-present .ug-root .sl.step .sl__k { margin-bottom: calc(1.3cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__text { font-size: calc(1.36cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__do { gap: calc(.75cqw * var(--k, 1)); margin-top: calc(1.2cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__do li { font-size: calc(1.22cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__note { margin-top: calc(1cqw * var(--k, 1)); font-size: calc(1.06cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__open { margin-top: calc(1.3cqw * var(--k, 1)); font-size: calc(1.12cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__hand { font-size: calc(1.1cqw * var(--k, 1)); }
html.dk-present .ug-root .sl.step .sl__tip { padding: calc(1cqw * var(--k, 1)) 1.35cqw; font-size: calc(1.16cqw * var(--k, 1)); }
.ug-root .v2-brand-logo, .ug-root .v2-foot__logo, .ug-root .cv-brand__logo {display:block;height:auto;object-fit:contain;flex:none}
.ug-root .v2-brand-logo {width:196px;max-width:none}
.ug-root .v2-foot__logo {width:212px;max-width:100%;margin-bottom:.8rem}
.ug-root .cv-brand {flex-direction:column;align-items:flex-start;gap:.6cqw}
.ug-root .cv-brand__logo {width:max(168px,26cqw);max-width:100%}
.ug-root .cv-brand small {display:block}
@media(max-width:575.98px) {
.ug-root .v2-brand-logo {width:150px}
}
@media print {
.ug-root .sl--cover, .ug-root .v2-foot {-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.ug-root .v5-submenu.sp-mega { width: min(calc(var(--cols, 2) * 268px + 20px), calc(100% - 24px)); padding: 10px; }
@media (min-width: 768px) {
.ug-root .v5-submenu.sp-mega:not([hidden]) { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 4px 10px; align-items: start; }
}
.ug-root .sp-mega ul { margin: 0; padding: 0 0 6px; list-style: none; }
.ug-root .sp-mega .sp-mega__head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--ink); font: 650 14px/1.4 var(--font-body); }
.ug-root .sp-mega .sp-mega__head .role-icon { flex: none; width: 17px; height: 17px; color: var(--c, var(--brand)); }
.ug-root .sp-mega ul a { padding: 7px 10px 7px 35px; }
.ug-root .sp-home .v5-intro { padding-block: 40px 36px; }
.ug-root .sp-home .v5-hero { padding-bottom: 0; }
.ug-root .sp-lead { max-width: 44rem; margin: 12px 0 0; color: var(--ink2); font: 450 18px/1.6 var(--font-body); }
.ug-root .sp-section { padding-block: 40px 48px; border-top: 1px solid var(--line); background: var(--paper); }
.ug-root .sp-section--wash { background: var(--wash); }
.ug-root .sp-section h2 { margin: 0 0 24px; color: var(--ink); font: var(--heading-weight, 600) clamp(22px, 2.2vw, 28px)/1.2 var(--font-display);
  letter-spacing: var(--heading-tracking, -.01em); }
.ug-root .sp-groups { display: grid; gap: 28px; }
.ug-root .sp-group { display: grid; gap: 12px; scroll-margin-top: 96px; }
.ug-root .sp-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font: 650 16px/1.3 var(--font-body); }
.ug-root .sp-group h3 .role-icon { width: 18px; height: 18px; color: var(--c); }
.ug-root .sp-group__roles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ug-root .sp-role { display: flex; flex-direction: column; padding: 18px 20px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.ug-root .sp-role:hover, .ug-root .sp-role:focus-within { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: 0 8px 22px rgb(var(--shadow) / .08); }
.ug-root .sp-role h4 { margin: 0; font: 650 17px/1.3 var(--font-body); }
.ug-root .sp-role__name { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ug-root .sp-role__name:hover { color: var(--c); }
.ug-root .sp-role__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 12%, var(--paper)); color: var(--c); }
.ug-root .sp-role__icon .role-icon { width: 20px; height: 20px; }
.ug-root .sp-role__scope { margin: 4px 0 12px 48px; color: var(--ink3); font: 450 14px/1.45 var(--font-body); }
.ug-root .sp-role__tasks { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); list-style: none; }
.ug-root .sp-role__tasks li { break-inside: avoid; }
.ug-root .sp-role__tasks a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0;
  color: var(--ink2); font: 500 15px/1.4 var(--font-body); text-decoration: none; }
.ug-root .sp-role__tasks a::after { content: '→'; flex: none; color: var(--c); opacity: 0; transition: opacity .15s, transform .15s; }
.ug-root .sp-role__tasks a:hover, .ug-root .sp-role__tasks a:focus-visible { color: var(--c); }
.ug-root .sp-role__tasks a:hover::after, .ug-root .sp-role__tasks a:focus-visible::after { opacity: 1; transform: translateX(2px); }
@media (min-width: 992px) {
.ug-root .sp-group { grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.ug-root .sp-group h3 { padding-top: 26px; }
.ug-root .sp-group__roles { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.ug-root .sp-group[data-roles="2"] .sp-role__tasks { columns: 2; column-gap: 28px; }
.ug-root .sp-group[data-roles="1"] .sp-role__tasks { columns: 3; column-gap: 28px; }
}
.ug-root .sp-flows__tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 0 16px; padding: 4px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); scrollbar-width: none; }
.ug-root .sp-flows__tabs[hidden] { display: none; }
.ug-root .sp-flows__tabs::-webkit-scrollbar { display: none; }
.ug-root .sp-flows__tabs button { flex: none; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2);
  font: 600 14px/1.3 var(--font-body); white-space: nowrap; cursor: pointer; }
.ug-root .sp-flows__tabs button:hover { color: var(--ink); }
.ug-root .sp-flows__tabs button[aria-selected="true"] { background: var(--brand-d); color: var(--on-dark); }
.ug-root .sp-flows__tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ug-root .sp-flow { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.ug-root .sp-flow + .sp-flow { margin-top: 16px; }
.ug-root .sp-flow__title { margin: 0 0 20px; color: var(--ink); font: 650 18px/1.3 var(--font-body); }
.ug-root .is-tabbed .sp-flow__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ug-root .sp-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.ug-root .sp-steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
.ug-root .sp-steps li:last-child { padding-bottom: 0; }
.ug-root .sp-steps li:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--line2); }
.ug-root .sp-steps__n { display: grid; grid-row: span 2; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c);
  color: #fff; font: 700 14px/1 var(--font-body); }
.ug-root .sp-steps a { align-self: center; color: var(--ink); font: 650 16px/1.35 var(--font-body); text-decoration: none; }
.ug-root .sp-steps a:hover, .ug-root .sp-steps a:focus-visible { color: var(--c); text-decoration: underline; }
.ug-root .sp-steps__meta { margin-top: 2px; color: var(--ink3); font: 450 14px/1.45 var(--font-body); }
@media (min-width: 768px) {
.ug-root .sp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
.ug-root .sp-steps li { grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px auto auto; align-content: start; row-gap: 10px; padding-bottom: 0; }
.ug-root .sp-steps__n { grid-row: auto; }
.ug-root .sp-steps li:not(:last-child)::before { left: 44px; right: -4px; top: 15px; bottom: auto; width: auto; height: 2px; }
.ug-root .sp-steps a { align-self: start; }
}
.ug-root .sp-flow__more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ug-root .sp-flow__more a { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-d); font: 600 15px/1.4 var(--font-body); text-decoration: none; }
.ug-root .sp-flow__more a:hover { text-decoration: underline; }
.ug-root .sp-flow__more .v5-record__icon { width: 20px; height: 20px; }
.ug-root .sp-flow__more > span { color: var(--ink3); font: 450 14px/1.4 var(--font-body); }
@media (max-width: 575.98px) {
.ug-root .v2-nav .v5-role-home .role-icon { display: none; }
.ug-root .v2-nav .v5-role-home { padding-left: 6px; padding-right: 2px; font-size: 14px; }
.ug-root .v2-bar .v2-nav { gap: 2px; }
}
.ug-root .sp-about-item .v5-role-home { padding-right: 10px; }
.ug-root .sp-about .v5-section { margin-top: 40px; }
.ug-root .sp-about__cards { display: grid; gap: var(--guide-gutter); }
@media (min-width: 768px) {
.ug-root .sp-about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ug-root .sp-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.ug-root .sp-card h3 { margin: 0; color: var(--ink); font: 650 18px/1.35 var(--font-body); }
.ug-root .sp-card > p { margin: 8px 0 0; color: var(--ink2); font: 450 15px/1.55 var(--font-body); }
.ug-root .sp-card h4 { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); font: 650 15px/1.4 var(--font-body); }
.ug-root .sp-card > .sp-card__note { margin-top: 4px; font-size: 14px; }
.ug-root .sp-checks { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ug-root .sp-checks li { position: relative; padding-left: 26px; color: var(--ink); font: 450 15px/1.5 var(--font-body); }
.ug-root .sp-checks li::before { content: ''; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.ug-root .sp-packages { display: grid; margin: 8px 0 0; }
.ug-root .sp-packages > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ug-root .sp-packages > div:last-child { border-bottom: 0; }
.ug-root .sp-packages dt { color: var(--ink); font: 600 15px/1.4 var(--font-body); }
.ug-root .sp-packages dd { margin: 2px 0 0; color: var(--ink2); font: 450 14px/1.5 var(--font-body); }
.ug-root .sp-about__link { margin: 16px 0 0; }
.ug-root .sp-about__link a { color: var(--brand-d); font: 600 15px/1.5 var(--font-body); }
.ug-root .sp-who { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ug-root .sp-who li { display: grid; gap: 6px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); }
@media (min-width: 768px) {
.ug-root .sp-who li { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.8fr); column-gap: 28px; align-items: center; }
}
.ug-root .sp-who b { color: var(--ink); font: 650 15px/1.4 var(--font-body); }
.ug-root .sp-who p { margin: 0; color: var(--ink2); font: 450 15px/1.5 var(--font-body); }
.ug-root .sp-who__roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ug-root .sp-who__roles a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--brand-w); color: var(--brand-d); font: 600 12px/1.5 var(--font-body); text-decoration: none; }
.ug-root .sp-who__roles a:hover { background: var(--brand); color: white; }
.ug-root .sp-who__roles .role-icon { width: 13px; height: 13px; }
.ug-root .sp-modules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) {
.ug-root .sp-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .sp-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ug-root .sp-modules li { padding: 14px 16px; border-radius: 10px; background: var(--brand-d); color: white; font: 600 15px/1.45 var(--font-body); }
.ug-root .step-alias {position:absolute;top:0;left:0;scroll-margin-top:0}
.ug-root .sl__side>.sl__do:first-of-type {margin-top:0}
.ug-root .sl__hint {font-size:max(10px,.9cqw);color:var(--sl-ink3);margin-top:1.2cqw}
.ug-root .sl__side .sl__note {padding:1cqw 1.1cqw;border-left:3px solid var(--sl-amber);background:var(--sl-paper);border-radius:0 .6cqw .6cqw 0;font-size:max(12px,1.06cqw)}
.ug-root .sl__side .sl__open {display:flex;flex-wrap:wrap;gap:.6em 1.2em}
.ug-root .sl__side .sl__open .sl__alt {margin-left:0}
.ug-root .image-open {overflow:hidden}
.ug-root dialog.lb {margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;padding:4.4rem 4rem 3.6rem;overflow:hidden;color:white}
.ug-root dialog.lb::backdrop {background:rgb(15 20 36 / .9)}
.ug-root dialog.lb figure {width:min(1440px,100%);height:100%;max-height:100%;min-height:0}
.ug-root .lb__scroll {width:100%;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:8px;background:rgb(255 255 255 / .08)}
.ug-root .lb .lb__scroll img {display:block;width:100%;max-width:1440px;height:auto;max-height:none;object-fit:initial;margin-inline:auto;border-radius:0}
.ug-root .lb .lb__scroll.is-phone img {max-width:420px}
.ug-root .lb .lb__scroll.is-actual img {width:auto;max-width:none}
.ug-root .lb .lb__z {top:1rem;left:1rem;width:auto;min-width:112px;border-radius:8px;padding:.6rem .9rem;font-size:12px;font-weight:600}
.ug-root .lb figcaption {flex:none;max-width:100%;font-size:12px}
html.dk-present .ug-root .lb[open] {visibility:visible}
html.dk-present .ug-root .sl .shot {pointer-events:auto}
html.dk-present .ug-root .sl__side .sl__note {font-size:calc(1.06cqw * var(--k,1))}
.ug-root .o6-section .o6-tiles {gap:24px}
.ug-root .o6-section .o6-tile {min-height:0;gap:8px;padding:14px 16px}
.ug-root .o6-section .o6-tile::after {top:16px;right:14px;font-size:16px}
.ug-root .o6-section .o6-tile__hd {gap:9px;padding-right:19px;align-items:flex-start}
.ug-root .o6-section .o6-tile__hd b {padding-top:2px;font:650 17px/1.35 var(--font-body);letter-spacing:0}
.ug-root .o6-section .o6-tile__n {width:26px;height:26px;font:650 12px/1 var(--font-body)}
.ug-root .o6-section .o6-tile__t {font-size:13px;line-height:1.5}
.ug-root .o6-section .o6-tile__m {padding-top:8px;font-size:11px;line-height:1.5}
.ug-root .o6-section .o6-group+.o6-group {margin-top:48px}
.ug-root .o6-section .o6-group__h {margin-bottom:18px;gap:8px 18px}
.ug-root .o6-section .o6-group__h p {font-size:13px;line-height:1.5}
.ug-root .o6-section .o6-others {gap:12px}
.ug-root .o6-section>.v2-h2 {margin-top:42px}
@media(max-width:767.98px) {
.ug-root dialog.lb {padding:4.1rem 10px 4.2rem}
.ug-root .lb figcaption {font-size:10px}
.ug-root .lb .lb__z {left:10px;top:10px}
.ug-root .lb__x {top:10px;right:10px}
.ug-root .sl__hint {font-size:11px}
.ug-root .sl__side .sl__note {font-size:12px;padding:10px 12px}
.ug-root .sl__side .sl__open {font-size:12px;gap:10px}
}
@media(max-width:767.98px) {
.ug-root .o6-section .o6-tiles {gap:18px}
.ug-root .o6-section .o6-tile {padding:14px 15px;gap:9px}
.ug-root .o6-section .o6-tile__hd b {font-size:16px}
.ug-root .o6-section .o6-tile__t {font-size:13px}
.ug-root .o6-section .o6-group+.o6-group {margin-top:38px}
}
@media(prefers-reduced-motion:reduce) {
.ug-root *, .ug-root *:before, .ug-root *:after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print {
.ug-root .lb, .ug-root .sl__hint {display:none!important}
}
.ug-root {
  --bar-h: 113px;
  --guide-sticky-header: 0px;
  --guide-stepbar: 49px;
  --guide-context-h: 0px;
  --guide-gutter: 1.5rem;
}
:root:has(.v5-context) { --guide-context-h: 56px; }
:root.is-scrolled:has(.v5-context) { --guide-context-h: 44px; }
:root:has(.v5-role) { --guide-stepbar: 0px; }
.ug-root { scroll-padding-top: calc(var(--guide-sticky-header) + var(--guide-stepbar) + var(--guide-context-h) + 1rem); }
.ug-root { background: var(--paper); }
.ug-root .v2-container { --bs-gutter-x: 1.5rem; padding-inline: calc(var(--bs-gutter-x) * .5); }
.ug-root main.v5-role { padding-bottom: 4rem; }
.ug-root main.o6-flow { padding-bottom: 0; }
.ug-root .v2-bar { position: static; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.ug-root .v2-bar__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 56px 36px;
  align-items: center;
  gap: 4px 12px;
  height: 112px;
  min-height: 0;
  padding-block: 8px;
  overflow: visible;
}
.ug-root .v2-bar .v2-brand { grid-column: 1; grid-row: 1; min-width: 0; }
.ug-root .v2-brand-logo { width: 144px; max-width: 100%; max-height: 56px; }
.ug-root .v2-bar .v2-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  order: 0;
  min-width: 0;
  justify-self: end;
  width: max-content;
  max-width: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ug-root .v2-nav::-webkit-scrollbar { display: none; }
.ug-root .v2-nav a { color: var(--ink2); }
.ug-root .v2-nav a:hover { background: var(--wash2); color: var(--brand-d); }
.ug-root .v2-nav a.on { background: var(--brand); color: white; }
.ug-root .v5-role-menu { display: flex; align-items: center; flex: none; border-radius: 8px; }
.ug-root .v2-nav .v5-role-home { padding-right: 4px; font-size: 15px; }
.ug-root .v5-sub-toggle { display: grid; place-items: center; width: 22px; min-height: 34px; padding: 0 4px 0 2px; border: 0; border-radius: 0 8px 8px 0; background: transparent; color: var(--ink2); cursor: pointer; }
.ug-root .v5-sub-toggle svg { transition: transform .15s ease; }
.ug-root .v5-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ug-root .v5-role-menu[data-open], .ug-root .v5-role-menu:hover { background: var(--wash2); }
.ug-root .v5-role-menu.is-current { background: var(--brand); }
.ug-root .v5-role-menu.is-current .v5-role-home { background: transparent; color: white; }
.ug-root .v5-role-menu.is-current .v5-sub-toggle { color: white; }
.ug-root .v5-role-menu.is-current[data-open] { background: var(--brand-d); }
.ug-root .v5-submenu { position: absolute; z-index: 45; top: calc(100% - 4px); left: var(--menu-left, 12px); width: min(360px, calc(100% - 24px)); max-height: min(480px, calc(100dvh - var(--bar-h) - 24px)); overflow-y: auto; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 24px rgb(var(--shadow) / .12); list-style: none; }
.ug-root .v5-submenu[hidden] { display: none; }
.ug-root .v5-submenu a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ink2); text-decoration: none; font: 450 14px/1.5 var(--font-body); }
.ug-root .v5-submenu a:hover, .ug-root .v5-submenu a:focus-visible { background: var(--wash2); color: var(--brand-d); }
.ug-root .v5-submenu a[aria-current] { background: var(--brand-w); color: var(--brand-d); font-weight: 650; }
.ug-root .v2-bar :focus-visible, .ug-root .v2-foot :focus-visible { outline-color: var(--focus); }
.ug-root .settingsbar {
  position: fixed;
  inset: 50% auto auto 0;
  z-index: 60;
  width: 32px;
  height: 44px;
  transform: translateY(-50%);
  --panel-w: min(500px, calc(100vw - 24px));
}
.ug-root .settingsbar .settings__toggle, .ug-root .settingsbar:not([data-open]):is(:hover, :focus-within) .settings__toggle {
  position: static;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line2);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--paper);
  color: var(--brand-d);
  box-shadow: 0 3px 12px rgb(var(--shadow) / .1);
}
.ug-root .settingsbar .settings__toggle svg { width: 20px; height: 20px; transform: none; }
.ug-root .settingsbar .settings__panel, .ug-root .settingsbar:not([data-open]):is(:hover, :focus-within) .settings__panel {
  inset: 50% auto auto 0;
  width: var(--panel-w);
  max-height: calc(100dvh - 24px);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  translate: -100% -50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ug-root .settingsbar[data-open] .settings__panel { translate: 0 -50%; opacity: 1; visibility: visible; pointer-events: auto; }
.ug-root .settingsbar[data-open] .settings__toggle {
  position: absolute;
  z-index: 1;
  top: calc(50% - var(--panel-h, 560px) / 2 + 12px);
  left: calc(var(--panel-w) - 46px);
  width: 34px;
  height: 34px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--paper);
  color: var(--brand-d);
  box-shadow: none;
}
.ug-root .settingsbar[data-open] .settings__toggle svg { width: 20px; height: 20px; transform: rotate(90deg); }
.ug-root .settings__title { padding-right: 42px; }
.ug-root .settingsbar :focus-visible { outline-color: var(--focus); }
html.dk-present .ug-root .settingsbar, html.image-open .ug-root .settingsbar { display: none; }
.ug-root .v2-foot { background: var(--paper); color: var(--ink3); border-top: 1px solid var(--line); }
.ug-root .v2-foot__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
.ug-root .v2-foot__logo { width: 128px; margin: 0; }
.ug-root .v5-credit { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--ink3); text-decoration: none; font: 400 13px/1.4 var(--font-body); }
.ug-root .v5-credit img { width: 110px; height: auto; }
.ug-root .v5-credit:hover { color: var(--brand-d); }
.ug-root .v5-context { position: sticky; top: var(--guide-sticky-header); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; margin-bottom: 24px; padding-block: 4px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ug-root .is-scrolled .v5-context { min-height: 44px; padding-bottom: 4px; }
.ug-root .o6-flow > .v5-context { top: calc(var(--guide-sticky-header) + var(--guide-stepbar)); }
.ug-root .v5-breadcrumb { min-width: 0; margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.5; }
.ug-root .v5-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.ug-root .v5-breadcrumb li { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ug-root .v5-breadcrumb li + li::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid var(--ink3); border-right: 1.5px solid var(--ink3); transform: rotate(45deg); }
.ug-root .v5-breadcrumb a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink2); text-decoration: none; }
.ug-root .v5-breadcrumb a:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }
.ug-root .v5-breadcrumb svg { flex: none; }
.ug-root .v5-breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.ug-root .v5-home { padding: 0; }
.ug-root .v5-intro {
  padding-block: 32px;
  background: var(--wash);
  background: linear-gradient(120deg, var(--wash) 30%, color-mix(in srgb, var(--brand-w) 45%, var(--wash)));
}
.ug-root .v5-hero { padding-bottom: 28px; }
.ug-root .v5-hero h1, .ug-root .v5-role h1 { margin: 0; color: var(--ink); font: 600 30px/1.15 var(--font-display); letter-spacing: -.025em; }
.ug-root .v5-section { margin-top: 32px; background: transparent; }
.ug-root .v5-home .v5-section { margin: 0; }
.ug-root .v5-band { padding-block: 36px; border-top: 1px solid var(--line); }
.ug-root .v5-band--organisation { background: var(--paper); }
.ug-root .v5-band--roles { background: var(--wash); }
.ug-root .v5-section__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 24px; }
.ug-root .v5-section h2 { margin: 0; font: 650 19px/1.35 var(--font-body); letter-spacing: -.02em; color: var(--ink); }
.ug-root .v5-keywords { display: block; color: var(--ink2); font: 450 14px/1.55 var(--font-body); }
.ug-root .v5-item { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; font: 650 17px/1.4 var(--font-body); }
.ug-root .v5-item > span:not([class]) { min-width: 0; }
.ug-root .v5-item > .role-icon { width: 18px; height: 18px; flex: none; }
.ug-root .v5-item__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: white; color: var(--brand-d); font-size: 11px; font-weight: 750; }
.ug-root .v5-item__arrow { flex: none; margin-left: auto; font-size: 18px; font-weight: 400; line-height: 1; }
.ug-root .v5-home a, .ug-root .v5-role .v5-task-link { text-decoration: none; }
.ug-root .v5-flow, .ug-root .v5-roles, .ug-root .v5-tasks { margin: 0; padding: 0; list-style: none; }
.ug-root .v5-stop > a, .ug-root .v5-role-card, .ug-root .v5-task-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  height: 100%;
  padding: 16px;
  border-radius: 10px;
  background: var(--brand);
  color: white;
  text-decoration: none;
}
.ug-root .v5-stop > a:hover, .ug-root .v5-role-card:hover, .ug-root .v5-task-link:hover { background: var(--brand-d); }
.ug-root [data-v5-object] .v5-keywords { color: white; }
.ug-root .v5-flow { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-inline: auto; gap: var(--guide-gutter); background: transparent; }
.ug-root .v5-stop { position: relative; min-width: 0; }
.ug-root .v5-stop > a { min-height: 72px; padding: 13px 16px; }
.ug-root .v5-stop .v5-item { font-size: 16px; }
.ug-root .v5-stop .v5-item__n { width: 20px; height: 20px; font-size: 10px; }
.ug-root .v5-stop .v5-item__arrow { display: none; }
.ug-root .v5-stop .v5-keywords { font-size: 14px; }
.ug-root .v5-stop:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); color: var(--ink3); font: 400 20px/1 var(--font-body); }
.ug-root .v5-learning { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ug-root .v5-learning .v5-section__head { margin: 0; }
.ug-root .v5-learning > nav { min-width: 0; }
.ug-root .v5-record { border-top: 1px solid var(--line2); padding-top: 20px; }
.ug-root .v5-record > a { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 4px; border-radius: 6px; color: var(--brand-d); }
.ug-root .v5-record > a:hover { background: var(--brand-w); }
.ug-root .v5-record__icon { flex: none; width: 28px; height: 28px; }
.ug-root .v5-record__label { min-width: 0; }
.ug-root .v5-record .v5-item { font-size: 15px; }
.ug-root .v5-record .v5-item__arrow { margin-left: 12px; }
.ug-root .v5-record .v5-keywords { color: var(--ink2); font-size: 13px; margin-top: 3px; }
.ug-root .v5-org-chart { max-width: 390px; margin: 0 auto; background: transparent; }
.ug-root .v5-org-tier { position: relative; background: transparent; }
.ug-root .v5-org-tier--team, .ug-root .v5-org-tier--learners { display: flex; justify-content: center; }
.ug-root .v5-org-node { position: relative; min-width: 0; padding: 16px; border-radius: 10px; background: var(--brand-d); color: white; }
.ug-root .v5-org-node h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 650 17px/1.35 var(--font-body); color: white; }
.ug-root .v5-org-node h3 .role-icon { width: 19px; height: 19px; }
.ug-root .v5-org-node a { color: white; text-decoration: none; }
.ug-root .v5-org-node a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ug-root .v5-org-node h3 a { font: inherit; }
.ug-root .v5-org-keywords { margin: 8px 0 0; color: white; font: 450 14px/1.55 var(--font-body); }
.ug-root .v5-org-node small { display: block; margin-top: 8px; color: white; font: 400 13px/1.5 var(--font-body); }
.ug-root .v5-org-node--team { width: 390px; max-width: 100%; background: var(--brand-dd); }
.ug-root .v5-org-node--learners { width: 390px; max-width: 100%; background: var(--brand); }
.ug-root .v5-org-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ug-root .v5-org-roles a { display: inline-block; padding: 3px 8px; border-radius: 5px; background: rgb(0 0 0 / .15); font: 600 12px/1.5 var(--font-body); }
.ug-root .v5-org-bridge { position: relative; width: 1px; height: 32px; margin-left: 8px; background: var(--line2); }
.ug-root .v5-org-bridge--down::after { content: ''; position: absolute; bottom: 0; left: -3px; width: 7px; height: 7px; border-right: 1px solid var(--ink3); border-bottom: 1px solid var(--ink3); transform: rotate(45deg); }
.ug-root .v5-org-tier--contributors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-left: 8px; padding-left: 20px; border-left: 1px solid var(--line2); }
.ug-root .v5-org-tier--contributors > .v5-org-node::before { content: ''; position: absolute; top: 24px; left: -21px; width: 20px; height: 1px; background: var(--line2); }
.ug-root .v5-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--guide-gutter); background: transparent; }
.ug-root .v5-roles > li { flex: 0 0 100%; min-width: 0; }
.ug-root .v5-role-card { min-height: 88px; background: var(--brand-d); }
.ug-root .v5-role-card .v5-keywords { font-size: 14px; }
.ug-root .v5-role-card:hover { background: var(--brand-dd); }
.ug-root .v5-role-head { margin: 0; }
.ug-root .v5-scope { margin: 12px 0 0; color: var(--ink2); font-size: 15px; }
.ug-root .v5-tasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--guide-gutter); background: transparent; }
.ug-root .v5-tasks > li { min-width: 0; background: transparent; border: 0; box-shadow: none; }
.ug-root .v5-task-link { min-height: 104px; }
.ug-root .v5-task-link .v5-keywords { font-size: 14px; }
.ug-root .o6-cards { gap: var(--guide-gutter); }
.ug-root .o6-cards .o6-card { box-shadow: none; }
html:not(.dk-present) .ug-root .sl__do li { font-size: max(15px, 1.4cqw); line-height: 1.55; }
html:not(.dk-present) .ug-root .sl__side .sl__note { font-size: 14px; line-height: 1.55; }
html:not(.dk-present) .ug-root .sl__open { font-size: 14px; line-height: 1.55; }
html:not(.dk-present) .ug-root .sl__hint { font-size: 13px; line-height: 1.5; }
html:not(.dk-present) .ug-root .sl__tip { font-size: 14px; line-height: 1.55; }
html:not(.dk-present) .ug-root .sl__who b { font-size: max(14px, 1.5cqw); }
html:not(.dk-present) .ug-root .sl__k { font-size: 12px; line-height: 1.5; }
html:not(.dk-present) .ug-root .sl__ft span:first-child { font-size: 11px; letter-spacing: .08em; }
html:not(.dk-present) .ug-root .sl__ft span:last-child { font-size: 12px; }
.ug-root .n5-steps a { font-size: 15px; line-height: 1.5; }
.ug-root .settings__item { font-size: 15px; line-height: 1.45; }
.ug-root .n5-stepsbar { top: var(--guide-sticky-header); }
.ug-root .n5-stepsbar__in { min-height: 48px; padding-block: 8px; }
.ug-root .n5-rail__hd { background: var(--paper); margin-bottom: 8px; padding-bottom: 12px; }
.ug-root .n5-rail__hd b { color: var(--ink2); font-size: 13px; font-weight: 650; }
.ug-root .n5-who { margin-left: 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.ug-root .n5-t { display: block; overflow: visible; -webkit-line-clamp: unset; }
.ug-root .n5-layout { gap: var(--guide-gutter); }
.ug-root .sl { box-shadow: none; border-color: var(--line); border-radius: 10px; }
.ug-root .sl--cover { background: var(--paper); color: var(--ink); border-color: transparent; }
.ug-root .sl--cover h1, .ug-root .sl--cover h1 em { color: var(--ink); }
.ug-root .cv-sub p, .ug-root .cv-sub ul, .ug-root .cv-sub b, .ug-root .cv-foot { color: var(--ink2); }
.ug-root .cv-ph { background: var(--paper); gap: 8px; }
.ug-root .cv-ph::after { display: none; }
.ug-root .cv-ph img { border: 1px solid var(--line); border-radius: 6px; }
.ug-root .cv-bars { display: none; }
.ug-root .cv-foot { border-color: var(--line); }
.ug-root .cv-brand__logo { width: max(130px, 20cqw); }
.ug-root .cv-main { max-width: none; width: 100%; }
html:not(.dk-present) .ug-root .sl--cover { border: 0; border-radius: 0; overflow: visible; }
html:not(.dk-present) .ug-root .sl--cover .sl__in { aspect-ratio: auto; min-height: 0; padding: 0; gap: 0; }
html:not(.dk-present) .ug-root .cv-brand, html:not(.dk-present) .ug-root .cv-foot, html:not(.dk-present) .ug-root .cv-ph { display: none; }
html:not(.dk-present) .ug-root .cv-main { max-width: none; width: 100%; }
.ug-root .v5-title-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
html:not(.dk-present) .ug-root .sl--cover h1 { flex: 1 1 260px; margin: 0; font: 700 clamp(26px, 3.3cqw, 34px)/1.2 var(--font-display); }
html:not(.dk-present) .ug-root .cv-sub p { margin: 12px 0 0; font: 400 15px/1.6 var(--font-body); }
html:not(.dk-present) .ug-root .cv-sub ul { margin: 12px 0 0; padding-left: 20px; font: 400 14px/1.6 var(--font-body); }
html:not(.dk-present) .ug-root .cv-sub li { margin: 4px 0; }
.ug-root .dk-present { background: var(--brand); }
.ug-root .dk-present:hover { background: var(--brand-d); }
.ug-root .v5-context .dk-present, .ug-root .v5-page-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 6px; background: var(--paper); color: var(--brand-d); text-decoration: none; font: 600 14px/1.4 var(--font-body); }
.ug-root .v5-context .dk-present:hover, .ug-root .v5-page-link:hover { background: var(--wash2); border-color: var(--brand-d); }
html.dk-present .ug-root .v5-context { visibility: hidden; }
.ug-root .n5-after.v5-pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; margin: 0; padding-block: 4px; border-top: 1px solid var(--line); }
.ug-root .v5-page-link--next { margin-left: auto; }
.ug-root .v5-page-link svg { flex: none; }
@container (min-width: 768px) {
.ug-root .cv-main { max-width: 58cqw; width: auto; }
}
@media (min-width: 576px) {
.ug-root .v5-roles > li { flex-basis: calc((100% - var(--guide-gutter)) / 2); }
.ug-root .v5-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-root .v2-foot__logo { width: 148px; }
.ug-root .v5-credit img { width: 128px; }
}
@media (min-width: 768px) {
.ug-root { --guide-sticky-header: 113px; }
:root.is-scrolled { --bar-h: 89px; --guide-sticky-header: 89px; }
.ug-root .v2-bar { position: sticky; }
.ug-root .is-scrolled .v2-bar__in { grid-template-rows: 38px 34px; height: 88px; padding-block: 6px; }
.ug-root .is-scrolled .v2-brand-logo { width: 128px; max-height: 38px; object-fit: contain; }
.ug-root .v5-intro { padding-block: 48px 40px; }
.ug-root .v5-hero { padding-bottom: 32px; }
.ug-root .v5-hero h1, .ug-root .v5-role h1 { font-size: clamp(30px, 3vw, 42px); }
.ug-root .v5-section { margin-top: 40px; }
.ug-root .v5-band { padding-block: 48px; }
.ug-root .v5-section h2 { font-size: 20px; }
.ug-root .v5-learning { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.ug-root .v5-learning > .v5-section__head { grid-column: 1; grid-row: 1; }
.ug-root .v5-learning > nav { grid-column: 1 / -1; grid-row: 2; }
.ug-root .v5-record { grid-column: 2; grid-row: 1; border: 0; padding: 0; }
.ug-root .v5-org-chart { max-width: 960px; }
.ug-root .v5-org-bridge { margin-inline: auto; }
.ug-root .v5-org-tier--contributors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--guide-gutter); margin: 0; padding: 0; border: 0; }
.ug-root .v5-org-tier--contributors::before, .ug-root .v5-org-tier--contributors::after { content: ''; position: absolute; left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); height: 1px; background: var(--line2); }
.ug-root .v5-org-tier--contributors::before { top: -16px; }
.ug-root .v5-org-tier--contributors::after { bottom: -16px; }
.ug-root .v5-org-tier--contributors > .v5-org-node::before, .ug-root .v5-org-tier--contributors > .v5-org-node::after { content: ''; position: absolute; left: 50%; top: auto; width: 1px; height: 16px; background: var(--line2); }
.ug-root .v5-org-tier--contributors > .v5-org-node::before { top: -16px; }
.ug-root .v5-org-tier--contributors > .v5-org-node::after { bottom: -16px; }
.ug-root .v5-org-node { padding: 16px; }
}
@media (min-width: 992px) {
.ug-root { --bar-h: 73px; --guide-sticky-header: 73px; --guide-stepbar: 0px; }
:root.is-scrolled { --bar-h: 53px; --guide-sticky-header: 53px; }
.ug-root .v2-bar__in { display: flex; flex-wrap: nowrap; gap: 16px; height: 72px; padding-block: 7px; }
.ug-root .is-scrolled .v2-bar__in { height: 52px; padding-block: 6px; }
.ug-root .is-scrolled .v2-brand-logo { width: 136px; max-height: 40px; }
.ug-root .v2-brand-logo { width: 164px; max-height: 58px; }
.ug-root .v2-bar .v2-nav { flex: 0 1 auto; width: max-content; max-width: calc(100% - 180px); margin-left: auto; }
.ug-root .v5-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
.ug-root .v5-stop > a { min-height: 94px; padding: 12px; }
.ug-root .v5-stop .v5-item { font-size: 15px; }
.ug-root .v5-stop:not(:last-child)::after { content: '→'; left: auto; right: -20px; top: 35px; bottom: auto; transform: none; font-size: 18px; }
.ug-root .v5-roles > li { flex-basis: calc((100% - 2 * var(--guide-gutter)) / 3); }
.ug-root .v5-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ug-root .n5-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ug-root .n5-rail { grid-column: span 3; }
.ug-root .dk { grid-column: span 9; }
.ug-root .o6-flow .n5-rail { top: calc(var(--guide-sticky-header) + var(--guide-context-h) + 16px); max-height: calc(100dvh - var(--guide-sticky-header) - var(--guide-context-h) - 32px); }
}
@media (min-width: 1200px) {
.ug-root .v5-roles > li { flex-basis: calc((100% - 3 * var(--guide-gutter)) / 4); }
.ug-root .v5-tasks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ug-root .v5-stop > a { padding: 14px; }
.ug-root .v5-stop .v5-item { font-size: 16px; }
}
@media (min-width: 1400px) {
.ug-root .v2-bar .v2-nav { overflow-x: visible; }
}
@media print {
.ug-root .v5-context { position: static; }
.ug-root .v5-context .dk-present { display: none; }
.ug-root .v2-bar, .ug-root .v2-foot { background: white; color: black; }
.ug-root .v5-section { break-inside: avoid; }
.ug-root [data-v5-object] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.ug-root.skin-graphite {
  --ink: #20252b; --ink2: #47515b; --ink3: #606974; --line: #e0e4e8; --line2: #cbd2d9;
  --paper: #ffffff; --wash: #f7f8fa; --wash2: #edf0f3;
  --brand: #485461; --brand-d: #343f4b; --brand-dd: #202a34; --brand-w: #eaf0f5; --accent: #b5a677;
  --on-dark: #ffffff; --on-dark-soft: #e2e8ef; --on-dark-dim: #b8c5d2; --on-brand-dim: #edf2f7;
  --focus: #765c25; --focus-on-dark: #e4ce8c; --device: #1c242d; --shade: 15 23 31; --shadow: 27 42 55;
}
.ug-root.skin-burgundy {
  --ink: #2b2227; --ink2: #5b4750; --ink3: #725d67; --line: #e8dfe3; --line2: #d7c8cf;
  --paper: #ffffff; --wash: #fbf8f9; --wash2: #f3ecef;
  --brand: #873d50; --brand-d: #6d2f41; --brand-dd: #401d2a; --brand-w: #f6eaf0; --accent: #bba05c;
  --on-dark: #ffffff; --on-dark-soft: #f1dfe7; --on-dark-dim: #d7b5c4; --on-brand-dim: #f9edf2;
  --focus: #806323; --focus-on-dark: #e8ce83; --device: #2b1e24; --shade: 36 16 25; --shadow: 64 29 42;
}
.ug-root.skin-olive {
  --ink: #272b21; --ink2: #505747; --ink3: #656d59; --line: #e0e4d8; --line2: #cbd3be;
  --paper: #ffffff; --wash: #f8faf5; --wash2: #eef2e7;
  --brand: #566335; --brand-d: #414d27; --brand-dd: #28301a; --brand-w: #edf2e2; --accent: #b77b3e;
  --on-dark: #ffffff; --on-dark-soft: #e3ead6; --on-dark-dim: #bdcba4; --on-brand-dim: #f0f5e6;
  --focus: #8a5a29; --focus-on-dark: #f0d59b; --device: #23271d; --shade: 21 29 14; --shadow: 40 48 26;
}
.ug-root.skin-cobalt {
  --ink: #1d283a; --ink2: #40546d; --ink3: #586b84; --line: #dce5f1; --line2: #c4d1e4;
  --paper: #ffffff; --wash: #f7faff; --wash2: #eaf1fb;
  --brand: #245bb2; --brand-d: #19458d; --brand-dd: #142d54; --brand-w: #e8f0ff; --accent: #db9a42;
  --on-dark: #ffffff; --on-dark-soft: #dce8fc; --on-dark-dim: #b4caed; --on-brand-dim: #edf4ff;
  --focus: #8c5e14; --focus-on-dark: #ffdd91; --device: #192638; --shade: 10 21 41; --shadow: 20 45 84;
}
.ug-root.skin-sand {
  --ink: #2c2820; --ink2: #5a5141; --ink3: #716650; --line: #e6e0d4; --line2: #d4cab8;
  --paper: #fffefb; --wash: #faf7f0; --wash2: #f1ecdf;
  --brand: #7d663f; --brand-d: #624e2d; --brand-dd: #3c301e; --brand-w: #f5eddb; --accent: #4f777d;
  --on-dark: #ffffff; --on-dark-soft: #eee4cf; --on-dark-dim: #cfc09f; --on-brand-dim: #faf1df;
  --focus: #436a70; --focus-on-dark: #a5d8dc; --device: #28241d; --shade: 29 23 14; --shadow: 60 48 30;
}
@font-face {
  font-family: "Public Sans";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/public-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/lexend-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/source-serif-4-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/barlow-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/barlow-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/barlow-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/barlow-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/barlowsemicondensed-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/sites/default/files/userguides/subcontractor-management-platform/assets/fonts/barlowsemicondensed-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.ug-root.typo-neutral {
  --font-display: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-weight: 650;
  --heading-tracking: -.015em;
}
.ug-root.typo-technical {
  --font-display: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-weight: 600;
  --heading-tracking: -.01em;
}
.ug-root.typo-accessible {
  --font-display: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-weight: 600;
  --heading-tracking: 0;
}
.ug-root.typo-literary {
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --heading-weight: 650;
  --heading-tracking: -.01em;
  font-optical-sizing: auto;
}
.ug-root.typo-compact {
  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-weight: 700;
  --heading-tracking: 0;
}
.ug-root.skin-evergreen { --focus-on-dark: #f0d28c; }
.ug-root.skin-ocean { --focus-on-dark: #ffd3ad; }
.ug-root .dk-hud button:focus-visible { outline-color: var(--on-dark); }
.ug-root .dk {
  --sl-page: var(--wash2);
  --sl-paper: var(--paper);
  --sl-rule: var(--line2);
  --sl-ink: var(--ink);
  --sl-ink2: var(--ink2);
  --sl-ink3: var(--ink3);
  --sl-slate: var(--brand-d);
  --sl-blue: var(--brand-d);
  --sl-amber: var(--brand-d);
  --sl-gold: var(--accent);
  --sl-sans: var(--font-body);
  --sl-display: var(--font-display);
}
.ug-root .v5-hero h1, .ug-root .v5-role h1, .ug-root .sl--cover h1, .ug-root .sl__hd h2, html:not(.dk-present) .ug-root .sl--cover h1 {
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}
.ug-root .v5-org-node a:focus-visible { outline-color: var(--focus-on-dark); }
.ug-root .settingsbar { --panel-w: min(560px, calc(100vw - 24px)); }
.ug-root .settingsbar[data-open] .settings__toggle { z-index: 3; }
.ug-root .settings__panel .settings__title {
  position: sticky;
  top: -12px;
  z-index: 2;
  margin-top: -12px;
  padding-block: 12px 8px;
  background: var(--paper);
}
.ug-root .settings__panel .settings__grouphead { font-size: 13px; line-height: 1.4; }
.ug-root .settings__panel .settings__item { min-height: 52px; padding: 8px; }
.ug-root .settings__choice { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ug-root .settings__choice > span { display: block; font-size: 15px; line-height: 1.35; }
.ug-root .settings__panel .settings__choice small {
  display: block;
  margin: 3px 0 0;
  color: var(--ink3);
  font: 400 12px/1.4 var(--font-body);
}
.ug-root .settings__panel .settings__reset {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  min-height: 38px;
  background: var(--paper);
  font-size: 13px;
}
.ug-root .settings__reset:hover { background: var(--wash2); }
@media (max-width: 575.98px) {
.ug-root .settings__panel { padding-inline: 12px; }
.ug-root .settings__cols { gap: 16px; }
.ug-root .settings__list { gap: 4px; }
.ug-root .settings__panel .settings__item { align-items: flex-start; gap: 7px; padding: 8px 5px; }
.ug-root .settings__aa { width: 28px; height: 26px; }
.ug-root .settings__dots { padding-top: 3px; }
.ug-root .settings__dot { width: 16px; height: 16px; }
}