/* EverLMS guide base styles. Bootstrap 5 container widths and responsive tiers.
   Reading components use the same 768px width boundary within the slide canvas;
   Present keeps its independent 1280px canvas. Local fonts and assets work offline. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../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("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }
/* The enterprise prototype's typography families (Latin and Vietnamese subsets); a font downloads only when a set uses it. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../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("../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("../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("../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("../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("../fonts/roboto-slab-latin-vietnamese.woff2") format("woff2-variations"); }

: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;
}

/* ---- skins: colour only (evergreen is also the fallback). --accent is the second swatch in the menu ---- */
:root, body.skin-evergreen { /* Optimus Health: evergreen teal and brass on warm paper */
  --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;
}
body.skin-ocean { /* enterprise Ocean: deep sea blue and orange on cool paper */
  --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;
}
body.skin-indigo { /* enterprise Indigo: indigo and gold on soft paper */
  --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;
}
body.skin-heather { /* enterprise Heather: heather plum and sage on soft paper */
  --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;
}
body.skin-terracotta { /* enterprise Terracotta: rust and teal on warm paper */
  --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;
}

/* ---- typography: the two typefaces and how headings are set (optimus is also the fallback).
   The other four are sets from the enterprise prototype. ---- */
:root, body.typo-optimus { /* Optimus Health: Fraunces headings, Inter text */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --heading-weight: 600; --heading-tracking: -.01em;
}
body.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; }
body.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; }
body.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; }
body.typo-slab { --font-display: "Roboto Slab", "Rockwell", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.01em; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; scrollbar-gutter: stable; } /* same width with or without a scrollbar */
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body { margin: 0; background: var(--wash); color: var(--ink); font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; }
a { color: var(--brand-d); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.v2-bar :focus-visible, .v2-foot :focus-visible, .lb :focus-visible { outline-color: var(--focus-on-dark); }
img { max-width: 100%; display: block; }

/* every page: one Bootstrap container (540/720/960/1140/1320 at 576/768/992/1200/1400) */
.v2-container { width: 100%; margin: 0 auto; padding: 0 .75rem; }
@media (min-width: 576px) { .v2-container { max-width: 540px; } }
@media (min-width: 768px) { .v2-container { max-width: 720px; } }
@media (min-width: 992px) { .v2-container { max-width: 960px; } }
@media (min-width: 1200px) { .v2-container { max-width: 1140px; } }
@media (min-width: 1400px) { .v2-container { max-width: 1320px; } }
main.v2-container { padding-top: 1rem; padding-bottom: 4rem; }

/* ---- 1. section bar: every part of the guide, the current one lit ---- */
.v2-bar { position: sticky; top: 0; z-index: 40; background: var(--brand-dd); color: var(--on-dark); }
.v2-bar__in { display: flex; align-items: center; gap: 1.2rem; min-height: var(--bar-h); overflow-x: auto; }
.v2-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--on-dark); flex: none; }
.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); }
.v2-brand b { font-size: .95rem; }
.v2-brand__t { color: var(--on-dark-dim); font-size: .8rem; }
.v2-nav { display: flex; gap: .2rem; margin-left: auto; }
.v2-nav a { padding: .45rem .75rem; border-radius: 9px; font-size: .86rem; color: var(--on-dark-soft);
  text-decoration: none; white-space: nowrap; }
.v2-nav a:hover { background: rgba(255,255,255,.1); color: var(--on-dark); }
.v2-nav a.on { background: var(--paper); color: var(--brand-dd); font-weight: 700; }

/* ---- 2. guide tabs: every guide in this group, the current one lit ---- */
.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) { .v2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } }
.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; }
.v2-tabs a:hover { background: var(--wash2); color: var(--ink); }
.v2-tabs a.on { background: var(--brand); border-color: var(--brand); color: var(--on-dark); font-weight: 700; }
.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); }
.v2-tabs a.on .v2-tabs__n { background: rgba(255,255,255,.25); color: var(--on-dark); }
.v2-tabs a.v2-tabs__sec { background: none; border-color: transparent; font-weight: 700; color: var(--ink); padding-left: 0; }

/* ---- 3. the job end to end (spine): current box lit ---- */
.v2-spine { list-style: none; margin: .4rem 0 1.4rem; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(8, minmax(0, 1fr)); }
.v2-spine li { position: relative; display: flex; align-items: stretch; }
.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; }
.v2-spine a:hover { border-color: var(--brand); background: var(--brand-w); }
.v2-spine__i { font-size: 1.5rem; line-height: 1.2; }
.v2-spine__n { font-size: .66rem; font-weight: 700; color: var(--ink3); }
.v2-spine b { font-size: .86rem; }
.v2-spine__arrow { position: absolute; right: -.48rem; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--line2); font-weight: 700; font-size: .85rem; }
.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); }
.v2-spine li.on .v2-spine__n { color: var(--on-brand-dim); }
.v2-spine li.near a { border-color: var(--brand); border-style: dashed; background: var(--brand-w); }
.v2-spine--compact li.on a { box-shadow: none; }
.v2-spine--compact { margin: 0 0 1.5rem; }
.v2-spine--compact a { flex-direction: row; justify-content: center; gap: .35rem; padding: .45rem .3rem; border-top-width: 1px; }
.v2-spine--compact .v2-spine__i { font-size: 1rem; }
.v2-spine--compact .v2-spine__n { display: none; }
.v2-spine--compact b { font-size: .76rem; }
@media (max-width: 991.98px) {
  .v2-spine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-spine li:nth-child(4) .v2-spine__arrow { display: none; }
}
@media (max-width: 575.98px) {
  .v2-spine:not(.v2-spine--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-spine:not(.v2-spine--compact) li:nth-child(2n) .v2-spine__arrow { display: none; }
  .v2-spine--compact { display: flex; overflow-x: auto; gap: .3rem; }
  .v2-spine--compact li { flex: none; }
  .v2-spine--compact .v2-spine__arrow { display: none; }
}

/* headings, crumb */
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; }
.v2-kicker { font: 500 .8rem/1.4 var(--font-body); color: var(--ink3); margin-left: .5rem; letter-spacing: 0; }
.v2-h2 { font: var(--heading-weight) 1.25rem/1.3 var(--font-display); letter-spacing: var(--heading-tracking); margin: 2.2rem 0 .9rem; }
.v2-crumb { font-size: .8rem; color: var(--ink3); margin: .6rem 0 0; }
.v2-crumb a { color: var(--ink2); text-decoration: none; }
h1.v2-h1 { margin: .4rem 0 0; }
.v2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .7rem 0 0; font-size: .88rem; color: var(--ink2); }
.v2-meta > span:last-child { margin-left: .35rem; }
.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; }
.v2-why__k { margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); }
.v2-why p:not(.v2-why__k) { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.v2-why p + p:not(.v2-why__k) { margin-top: .45rem; }

/* role chips and role colours */
.v2-chip { font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.v2-chip--anon { background: #f1f5f9; color: #334155; } .v2-chip--client { background: #fbf2dc; color: #7c5410; }
.v2-chip--office { background: #e8f3f0; color: #145e58; } .v2-chip--operative { background: #eef5e4; color: #3b6116; }
.v2-chip--owner { background: #e9f1fb; color: #24558f; } .v2-chip--platform { background: #ede9fb; color: #4c3a95; }
.v2-chip--franchisor { background: #fdf0f3; color: #97324b; } .v2-chip--admin { background: #f0f0f2; color: #3f3f46; }
.v2-bg--anon { background: var(--c-anon); } .v2-bg--client { background: var(--c-client); }
.v2-bg--office { background: var(--c-office); } .v2-bg--operative { background: var(--c-operative); }
.v2-bg--owner { background: var(--c-owner); } .v2-bg--platform { background: var(--c-platform); }
.v2-bg--franchisor { background: var(--c-franchisor); } .v2-bg--admin { background: var(--c-admin); }

/* cards: guides as pictures */
.v2-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .v2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-grid--sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.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; }
.v2-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgb(var(--shadow) / .10); transform: translateY(-2px); }
.v2-card__img { display: block; aspect-ratio: 16 / 10; background: var(--wash2); overflow: hidden; border-bottom: 1px solid var(--line); }
.v2-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.v2-card__img--phone { background: var(--device); padding: 8px 0 0; }
.v2-card__img--phone img { object-fit: contain; object-position: top center; }
.v2-card__t { font-weight: 700; font-size: .98rem; padding: .7rem .85rem 0; line-height: 1.3; }
.v2-card__m { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .45rem .85rem .8rem; }
.v2-card__n { font-size: .74rem; color: var(--ink3); margin-left: auto; }

/* home: sections and roles */
.v2-sec { margin-bottom: 1.6rem; }
.v2-sec h3 { margin: 0 0 .7rem; font-size: 1.05rem; display: flex; align-items: baseline; flex-wrap: wrap; }
.v2-sec h3 a { color: var(--ink); text-decoration: none; }
.v2-sec h3 a:hover { color: var(--brand-d); }
.v2-who { columns: 4 250px; column-gap: 12px; }
.v2-who__card { break-inside: avoid; margin-bottom: 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: .8rem .9rem; }
.v2-who__hd { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.v2-who__hd small { margin-left: auto; color: var(--ink3); font-size: .75rem; }
.v2-who__i { font-size: 1.2rem; }
.v2-who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.v2-who li a { display: block; padding: .2rem .3rem; border-radius: 7px; font-size: .85rem; color: var(--ink2); text-decoration: none; }
.v2-who li a:hover { background: var(--brand-w); color: var(--brand-d); }
.v2-others { display: flex; flex-wrap: wrap; gap: .5rem; }
.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; }
.v2-other:hover { border-color: var(--brand); }
.v2-other small { color: var(--ink3); font-weight: 500; margin-left: .2rem; }

/* who is who: Headquarters over its franchises, customers below (shared by both guides) */
.org { display: grid; gap: 0; max-width: 980px; margin: .4rem 0 1.6rem; }
.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; }
.org__box b { display: block; font-size: 1.05rem; }
.org__box span { color: var(--ink2); font-size: .9rem; }
.org__box small { display: block; margin-top: .35rem; color: var(--ink3); font-size: .78rem; }
.org__box--ho { border-top: 4px solid var(--c-platform); }
.org__box--fr { flex-direction: column; border-top: 4px solid var(--c-owner); }
.org__box--cu { border-top: 4px solid var(--c-client); }
.org__i { font-size: 1.6rem; line-height: 1; flex: none; }
.org__roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.org__down { width: 2px; height: 18px; background: var(--line2); margin-left: 2.1rem; position: relative; }
.org__down::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent;
  border-top-color: var(--line2); border-bottom: 0; }
.org__row { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.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; }
.org__f .org__i { font-size: 1.1rem; }
.org__f b { font-size: .88rem; }
.org__f small { margin: 0; }
.org__f--more { justify-content: center; align-items: center; color: var(--ink3); font-size: .85rem; border-style: dashed; }
.org__note { margin: .8rem 0 0; font-size: .85rem; color: var(--ink3); }
@media (max-width: 575.98px) {
  .org__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- home: sections stacked top to bottom ---- */
.v2-home .org { max-width: none; }
.v2-home .v2-who { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.v2-home .v2-who__card { margin-bottom: 0; }
@media (min-width: 576px) { .v2-home .v2-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 576px) and (max-width: 767.98px) { .v2-home .org__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .v2-home .v2-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v2-home .v2-who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- section bar on tablets: brand on one row, every section on the next. The fixed height
   keeps the sticky progress bar and anchors right on every page ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root { --bar-h: 88px; }
  .v2-bar__in { flex-wrap: wrap; align-content: center; gap: .3rem 1rem; overflow: visible; }
  .v2-nav { flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; } /* one row in every typeface */
}

/* ---- footer: who builds the product (stacked on phones, two columns from md) ---- */
.v2-foot { background: var(--brand-dd); color: var(--on-dark-soft); }
.v2-foot__in { display: grid; gap: 1rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.v2-foot__brand { margin: 0 0 .35rem; font: var(--heading-weight) 1.1rem/1.3 var(--font-display); color: var(--on-dark); }
.v2-foot p { margin: 0; max-width: 70ch; font-size: .88rem; line-height: 1.6; }
.v2-foot__meta { display: flex; flex-direction: column; gap: .3rem; }
.v2-foot__links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.v2-foot__links a + a { padding-left: 1.1rem; border-left: 1px solid rgba(255, 255, 255, .3); }
.v2-foot__meta a { color: var(--on-dark); font-weight: 600; padding: .15rem 0; }
.v2-foot__meta small { color: var(--on-dark-dim); font-size: .78rem; }
@media (min-width: 768px) {
  .v2-foot__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
  .v2-foot__meta { align-items: flex-end; text-align: right; }
  .v2-foot__links { justify-content: flex-end; }
}

/* ---- 4. guide page: step rail + steps ---- */
.v2-layout { display: block; }
.v2-rail { display: none; }
@media (min-width: 992px) {
  .v2-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .v2-rail { display: block; position: sticky; top: calc(var(--bar-h) + 24px); max-height: calc(100vh - var(--bar-h) - 48px);
    overflow-y: auto; }
}
.v2-rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.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; }
.v2-rail a:hover { color: var(--ink); }
.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; }
.v2-rail__t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.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; }
.v2-rail a.on .v2-rail__n, .v2-rail a.done .v2-rail__n { opacity: 1; }

.v2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.v2-steps > li + li { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
.v2-step { scroll-margin-top: 120px; min-width: 0; }
.v2-step__hd { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.v2-step__hd h2 { margin: 0; font-size: 1.28rem; line-height: 1.3; letter-spacing: -.005em; }
.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; }
.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); }
.v2-steps > .v2-sys:first-child { margin-top: 0; }
.v2-sys__i { font-size: 1.2rem; line-height: 1.5; }
.v2-sys b { display: block; margin-bottom: .2rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); }
.v2-sys ul { margin: 0; padding-left: 1.1rem; }
.v2-sys li { margin: .15rem 0; line-height: 1.6; }

/* screenshots: a browser window with the page's address, and a hint that it enlarges */
.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); }
.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); }
.v2-frame__dots { display: flex; gap: 6px; flex: none; }
.v2-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.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; }
.v2-frame__open { flex: none; font-weight: 600; color: var(--brand-d); text-decoration: none; white-space: nowrap; }
.v2-frame__open:hover { text-decoration: underline; }
.v2-frame .v2-lock { margin-left: -.4rem; }
.v2-frame .v2-shot { border: 0; border-radius: 0; box-shadow: none; }
.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; }
.v2-shot:hover .v2-shot__zoom, .v2-shot:focus-visible .v2-shot__zoom { opacity: 1; }
@media (hover: none) { .v2-shot__zoom { opacity: 1; } }
.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); }
.v2-shot img { width: 100%; height: auto; }
.v2-shot--phone { max-width: 320px; padding: 7px; background: var(--device); border-color: var(--device); border-radius: 26px; }
.v2-shot--phone img { border-radius: 19px; }
.v2-open { margin: .55rem 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.v2-open a { color: var(--ink3); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.v2-open a:hover { color: var(--brand-d); text-decoration: underline; }
.v2-lock { font-size: .68rem; font-weight: 700; color: var(--ink3); background: var(--wash2); border-radius: 999px;
  padding: .06rem .45rem; margin-left: .4rem; }

/* progress (phones and tablets) */
.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); }
.prog__in { display: flex; align-items: center; gap: .8rem; padding-top: .45rem; padding-bottom: .45rem; }
.prog__t { font-size: .78rem; color: var(--ink2); white-space: nowrap; }
.prog__t b { color: var(--brand-d); }
.prog__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--wash2); overflow: hidden; }
.prog__bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .18s ease; }
@media (min-width: 992px) { .prog { display: none; } }

.v2-pagers { display: flex; gap: .8rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.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; }
.v2-pager:hover { border-color: var(--brand); }
.v2-pager--n { margin-left: auto; }

/* lightbox (shared guide.js) */
.lb { position: fixed; inset: 0; z-index: 60; background: rgb(var(--shade) / .96); display: grid; place-items: center; padding: 3.2rem 1rem; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.lb img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 8px; background: #fff; }
.lb figcaption { color: var(--on-dark); font-size: .9rem; text-align: center; }
.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; }
.lb button:hover { background: rgba(255,255,255,.24); }
.lb__x { top: 1rem; right: 1rem; } .lb__p { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb__nx { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 767.98px) {
  /* phones: brand on one row, every section on a scrolling row below; the progress bar stays pinned instead */
  .v2-bar { position: static; }
  .v2-bar__in { flex-wrap: wrap; gap: .3rem 1rem; padding-top: .55rem; overflow: visible; min-height: 0; }
  .v2-nav { margin: 0 -.75rem; padding: 0 .75rem .55rem; width: calc(100% + 1.5rem); overflow-x: auto; scrollbar-width: none; }
  .v2-brand__t { display: none; }
  .prog { top: 0; }
  .v2-kicker { display: block; margin: .2rem 0 0; }
}
@media (max-width: 575.98px) {
  .v2-step__hd h2 { font-size: 1.12rem; }
  .v2-num { width: 1.9rem; height: 1.9rem; font-size: .85rem; }
  .v2-step__text, .v2-why p:not(.v2-why__k) { font-size: 1rem; }
  .v2-steps > li + li { margin-top: 2rem; padding-top: 2rem; }
  .v2-why { margin-bottom: 2rem; padding: 1rem 1.1rem; }
  .v2-frame__dots { display: none; }
  .v2-frame__bar { padding: .45rem .6rem; gap: .5rem; }
  .v2-shot--phone { max-width: 100%; }
  .lb { padding: 3.6rem .6rem 5rem; }
  .lb__p, .lb__nx { top: auto; bottom: 1rem; transform: none; }
  .lb__p { left: 1.5rem; } .lb__nx { right: 1.5rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .v2-nav a { padding-left: .5rem; padding-right: .5rem; } /* all four sections fit the 540px container */
}
@media print { .v2-bar, .v2-tabs, .v2-rail, .prog, .v2-pagers, .v2-open, .settingsbar { display: none !important; } }

/* ---- Settings menu, as in the enterprise prototype: a tab on the left edge slides out the skin and
   typography choices. It opens on hover or keyboard focus with a mouse (lg and up) and on click
   everywhere; while open, the cog moves into the panel's top-right corner (--panel-h is published
   by settings.js). ---- */
.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)); }
.settingsbar[hidden] { display: none; }
.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; }
.settings__toggle:hover { color: var(--brand-d); background: var(--wash2); }
.settings__toggle svg { width: 22px; height: 22px; transition: transform .3s ease; }
.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; }
.settingsbar[data-open] .settings__panel { translate: 0 -50%; pointer-events: auto; opacity: 1; visibility: visible; }
.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; }
.settingsbar[data-open] .settings__toggle svg { width: 18px; height: 18px; transform: rotate(90deg); }
@media (min-width: 992px) and (hover: hover) {
  .settingsbar:is(:hover, :focus-within) .settings__panel { translate: 0 -50%; pointer-events: auto; opacity: 1; visibility: visible; }
  .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; }
  .settingsbar:is(:hover, :focus-within) .settings__toggle svg { width: 18px; height: 18px; transform: rotate(90deg); }
}
.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); }
.settings__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.settings__group + .settings__group { padding-left: 1rem; border-left: 1px solid var(--line); }
.settings__grouphead { margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink2); }
.settings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.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; }
.settings__item:hover { background: var(--wash2); }
.settings__item[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-w); font-weight: 600; }
.settings__item small { margin-left: auto; color: var(--ink3); font-size: .72rem; font-weight: 500; }
.settings__dots { display: flex; flex: none; }
.settings__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line2); }
.settings__dot + .settings__dot { margin-left: -7px; }
.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; }
.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; }
.settings__reset:hover { background: var(--wash2); color: var(--ink); }
@media (max-width: 991.98px) {
  /* phones and tablets: a cog at the right of the section bar, so nothing floats over the text;
     the menu opens below it on click */
  .settingsbar { position: absolute; top: .35rem; right: .75rem; left: auto; transform: none; width: 36px; height: 36px;
    --panel-w: min(500px, calc(100vw - 1.5rem)); }
  .settings__toggle, .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; }
  .settings__toggle:hover, .settingsbar[data-open] .settings__toggle { background: rgba(255, 255, 255, .18); color: var(--on-dark); }
  .settings__toggle svg, .settingsbar[data-open] .settings__toggle svg { width: 20px; height: 20px; }
  .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; }
  .settingsbar[data-open] .settings__panel { translate: 0 0; }
  .settings__title { padding-right: 0; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .settingsbar { position: fixed; } } /* the section bar stays put on tablets */
@media (max-width: 575.98px) {
  /* phones: the two groups stack and their choices go two-up */
  .settings__cols { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .settings__group + .settings__group { padding-left: 0; border-left: 0; padding-top: .75rem; border-top: 1px solid var(--line); }
  .settings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings__item small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .settings__panel, .settings__toggle, .settings__toggle svg { transition: none; } }

/* Switcher: the demo account that only switches between people */
.chip--switcher, .v2-chip--switcher { background: #e7f6f9; color: #0e6474; }
.v2-bg--switcher { background: #0e7c8f; }

/* Review-only diagnostics never replace successful normal screenshots. */
.draft-warning{padding:12px 20px;background:#fff3cd;border-bottom:2px solid #ba7900;color:#624600;font:16px/1.5 sans-serif;overflow-wrap:anywhere}.draft-warning b{display:block}.draft-step{margin:16px 0;padding:12px;background:#fff8e8;border:1px solid #ba7900;color:#624600;overflow-wrap:anywhere}.draft-step img{display:block;width:100%;height:auto;margin-top:12px}.draft-step figcaption{font:14px/1.5 sans-serif}

.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; }

/* ==========================================================================
   Optimus Health guide — Slides (html-v4).
   The classic guide's navigation (section bar, guide tabs, the job spine, the step rail, progress, pagers),
   with every step drawn as a 16:9 slide in the WeebPal user-guide style (_reference/mine-rooms/7-userguide,
   after the WeebPal company profile): warm paper, the title top left, the screen in a window on the left,
   what to do on the right, an amber box for what the system does, the chapter and page number at the foot.
   Sizes are in cqw, the slide's own width (the reference's mm and pt over a 297 mm page), so a slide keeps its
   proportions at any width; below 760 px wide a slide stacks instead. Present (F) shows one slide at a time,
   drawn at 1280 x 720 and scaled to the screen.
   ========================================================================== */

@font-face { font-family: "ManropeS"; src: url("../fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("../fonts/Manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("../fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("../fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ManropeS"; src: url("../fonts/Manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "OutfitS"; src: url("../fonts/Outfit-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "OutfitS"; src: url("../fonts/Outfit-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

.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;   /* slate, blue, amber: in that order of use */
  --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;
}
.dk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.dk-bar p { margin: 0; color: var(--ink2); font-size: .88rem; }
.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); }
.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; } /* also outside the deck */
.dk-present:hover { background: var(--sl-ink, #1d2230); }

/* ---- the slide ---- */
.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; } /* the page keeps 120px of scroll padding */
.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; }
.sl__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; margin-bottom: 2.9cqw; }
.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); }
.sl__who { display: flex; flex: none; align-items: center; gap: .7cqw; margin: .45cqw 0 0; white-space: nowrap; }
.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); }
.sl__who b { font: 600 max(13px, 1.42cqw)/1 var(--sl-display); letter-spacing: -.01em; }
.sl__bd { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4cqw; }

/* the screen, in a window */
.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; }
.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; }
.sl__bar i { width: max(6px, .58cqw); height: max(6px, .58cqw); border-radius: 50%; background: #d7d0c2; }
.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; }
.sl__vw { position: relative; flex: 1; min-height: 0; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #fff; cursor: zoom-in; }
.sl__vw img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }
.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; }
.sl__vw:hover .sl__zoom, .sl__vw:focus-visible .sl__zoom { opacity: 1; }
@media (hover: none) { .sl__zoom { opacity: 1; } }
.sl__phone { display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
.sl__phone .sl__vw { flex: none; height: 100%; aspect-ratio: 390 / 844; padding: .6cqw; border-radius: 2cqw; background: #141a20; }
.sl__phone .sl__vw img { position: static; border-radius: 1.5cqw; object-position: top center; }
.sl--phone .sl__bd { grid-template-columns: auto minmax(0, 1fr); gap: 4cqw; }
.sl--phone .sl__side { max-width: 46cqw; }

/* what to do */
.sl__side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.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; }
.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; }
.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; }
.sl__text { margin: 0; color: var(--sl-ink); font-size: max(13.5px, 1.36cqw); line-height: 1.46; }
.sl__text b { font-weight: 800; }
.sl__open { margin: 1.3cqw 0 0; font-size: max(12.5px, 1.12cqw); font-weight: 700; }
.sl__open a { color: var(--sl-blue); text-decoration: none; }
.sl__open a:hover { text-decoration: underline; }
.sl__lock { margin-left: .5em; padding: .1em .5em; border-radius: 999px; background: #ebe6dc; color: var(--sl-ink3); font-size: .82em; font-weight: 700; }
.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; }
.sl__side > .sl__tip { margin-top: auto; }
.sl__k + .sl__text, .sl__hand + .sl__text { margin-top: 0; }
.sl__open + .sl__tip, .sl__text + .sl__tip { margin-top: auto; }
.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; }
.sl__tip ul { margin: 0; padding-left: 1.1em; }
.sl__tip li + li { margin-top: .3em; }
.sl__gap { flex: 1; min-height: 1.3cqw; }

.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); }
.sl__ft span:first-child { font-size: max(9.5px, .86cqw); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sl__ft span:last-child { font-size: max(10px, .95cqw); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* ---- the cover: slate, the title in white and gold, three screens down the right ---- */
.sl--cover { background: var(--sl-slate); border-color: var(--sl-slate); color: #fff; }
.sl--cover .sl__in { justify-content: space-between; padding: 6.2cqw 8.1cqw 5.2cqw; }
.cv-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.1cqw; }
.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); }
.cv-brand b { display: block; font: 600 max(17px, 2.35cqw)/1 var(--sl-display); letter-spacing: -.01em; }
.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; }
.cv-main { position: relative; z-index: 2; max-width: 56cqw; }
.cv-eye { margin: 0; color: var(--sl-gold); font-size: max(10.5px, 1cqw); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.sl--cover h1 { margin: 1.6cqw 0 0; color: #fff; font: 600 max(26px, 4.3cqw)/1.08 var(--sl-display); letter-spacing: -.025em; }
.sl--cover h1 em { display: block; color: var(--sl-gold); font-style: normal; }
.cv-sub p { margin: 1.7cqw 0 0; color: rgba(255, 255, 255, .9); font-size: max(14px, 1.42cqw); line-height: 1.45; }
.cv-sub p + p { margin-top: .8cqw; }
.cv-bars { display: flex; gap: .8cqw; margin-top: 2.4cqw; }
.cv-bars i { display: block; width: 6cqw; height: max(4px, .64cqw); border-radius: 1cqw; }
.cv-bars i:nth-child(1) { background: #93a1b5; } .cv-bars i:nth-child(2) { background: #c98a2e; } .cv-bars i:nth-child(3) { background: #4e86d0; }
.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); }
.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); }
.cv-ph img { display: block; width: 100%; height: 100%; min-height: 0; max-width: none; object-fit: cover; object-position: top left; }
.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%); }

/* ---- narrow slides stack: the same parts, one under the other, at reading size ---- */
@container (max-width: 767.98px) {
  .sl__in { aspect-ratio: auto; padding: 22px 18px 46px; }
  .sl__hd { flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .sl__hd h2 { max-width: none; }
  .sl__bd, .sl--phone .sl__bd { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sl--phone .sl__side { max-width: none; }
  .sl__vw { flex: none; }
  .sl__vw img { position: static; height: auto; }
  .sl__phone .sl__vw { height: auto; width: min(240px, 72%); padding: 6px; border-radius: 22px; }
  .sl__phone .sl__vw img { border-radius: 16px; }
  .sl__tip, .sl__open + .sl__tip, .sl__text + .sl__tip, .sl__side > .sl__tip { margin-top: 14px; }
  .sl__k { margin-bottom: 10px; }
  .sl__hand { margin-bottom: 10px; padding: 8px 10px; }
  .sl__open { margin-top: 12px; }
  .sl__ft { left: 18px; right: 18px; bottom: 14px; }
  .sl--cover .sl__in { gap: 22px; padding: 26px 20px 22px; }
  .cv-ph { display: none; }
  .cv-main, .cv-foot { max-width: none; width: auto; }
  .cv-sub p { margin-top: 12px; }
  .cv-bars { margin-top: 16px; } .cv-bars i { width: 46px; }
}

/* ---- present: one slide fills the screen; arrows, Space, PageUp/PageDown, Home/End; Esc leaves ---- */
.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 .sl { display: none; }
html.dk-present .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 .sl.is-cur .sl__in { aspect-ratio: auto; height: 720px; overflow: hidden; }
html.dk-present .sl .shot { pointer-events: none; }
html.dk-present .sl__zoom { display: none; }
html.dk-present .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); }
.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; }
.dk-hud button:hover { background: rgba(255, 255, 255, .14); }

/* the other formats, at the foot of every page */
.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; }
.v4-formats span { color: var(--on-dark-dim); font-weight: 600; }
.v4-formats a { color: var(--on-dark); font-weight: 600; }
.v4-formats a[aria-current] { padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .14); text-decoration: none; }

@media print {
  .dk-bar, .dk-hud { display: none !important; }
  .sl { break-inside: avoid; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .sl__zoom { transition: none; } }

/* ==========================================================================
   Optimus Health guide — Focus (html-v5): html-v4's slides, with calm navigation and lists.
   One light top bar; on a guide page one line of context (where you are, the guides either side, a list that
   opens when asked) and the job end to end as one line of words; the steps grouped by who acts; the parts and
   guides as short grouped lists; the detail folded away until it is wanted. Colours are the classic tokens, so
   the skins still apply; every pair used here is one the skins already keep at AA.
   ========================================================================== */

html { scroll-padding-top: 96px; }
@media (max-width: 767.98px) { html { scroll-padding-top: 64px; } }
html.n5-locked { overflow: hidden; }
main.n5-flow, main.n5-section, main.n5-home { padding-top: 1.25rem; padding-bottom: 4.5rem; }

/* ---- the top bar: the parts of the guide as words ---- */
.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); }
.n5-top__in { display: flex; align-items: center; gap: .75rem 1.1rem; min-height: 64px; }
.n5-brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; color: var(--ink); text-decoration: none; }
.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); }
.n5-brand b { display: block; font-size: .98rem; line-height: 1.2; }
.n5-brand small { display: block; color: var(--ink3); font-size: .78rem; }
.n5-parts { display: flex; align-items: center; gap: .1rem; }
.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; }
.n5-parts a:hover { background: var(--wash2); color: var(--ink); }
.n5-parts a[aria-current] { color: var(--ink); }
.n5-parts a[aria-current]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -14px; height: 3px; border-radius: 3px; background: var(--brand); }
.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; }
.n5-all:hover { border-color: var(--brand); }
@media (max-width: 991.98px) { .n5-parts { display: none; } }
@media (max-width: 767.98px) { .n5-top { position: static; } .n5-brand small { display: none; } .n5-all { padding: .5rem .75rem; } }

/* the Settings menu lives in the top bar: a quiet button that opens a panel below it */
.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)); }
.n5-top .settings__toggle, .n5-top .settingsbar[data-open] .settings__toggle, .n5-top .settingsbar:hover .settings__toggle,
.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; }
.n5-top .settings__toggle:hover { color: var(--ink); background: var(--wash2); }
.n5-top .settings__toggle svg, .n5-top .settingsbar[data-open] .settings__toggle svg, .n5-top .settingsbar:hover .settings__toggle svg,
.n5-top .settingsbar:focus-within .settings__toggle svg { width: 20px; height: 20px; transform: none; }
.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); }
.n5-top .settingsbar[data-open] .settings__panel { translate: 0 0; opacity: 1; visibility: visible; pointer-events: auto; }
.n5-top .settingsbar:not([data-open]):hover .settings__panel, .n5-top .settingsbar:not([data-open]):focus-within .settings__panel {
  translate: 0 -.5rem; opacity: 0; visibility: hidden; pointer-events: none; }
.n5-top .settingsbar[data-open]:focus-within .settings__panel { opacity: 1; visibility: visible; pointer-events: auto; }
.n5-top .settings__title { padding-right: 0; }

/* ---- All guides: the whole guide as one list, opened on demand ---- */
.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); }
.n5-drawer::backdrop { background: rgba(10, 14, 20, .45); }
.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); }
.n5-drawer__hd b { font: var(--heading-weight) 1.2rem/1.2 var(--font-display); }
.n5-drawer__part { margin-top: 1.5rem; }
.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); }
.n5-drawer__part h2 a { color: var(--ink); text-decoration: none; }
.n5-drawer__part h2 a:hover { text-decoration: underline; }
.n5-drawer__part h2 small { color: var(--ink3); font: 500 .8rem/1 var(--font-body); }
.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; }
.n5-x:hover { color: var(--ink); background: var(--wash2); }

/* ---- lists: a part's guides as plain rows, in groups ---- */
.n5-group + .n5-group { margin-top: 1.6rem; }
.n5-group__h h3 { margin: 0; color: var(--ink2); font: 700 .78rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.n5-group__h p { max-width: 62ch; margin: .25rem 0 .55rem; color: var(--ink3); font-size: .88rem; line-height: 1.45; }
.n5-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.n5-rows li { border-bottom: 1px solid var(--line); }
.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; }
.n5-row:hover { background: var(--wash2); }
.n5-row[aria-current] { background: var(--brand-w); }
.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; }
.n5-row[aria-current] .n5-row__n { background: var(--brand); color: var(--on-dark); }
.n5-row__b { min-width: 0; }
.n5-row__b b { display: block; font-size: .98rem; font-weight: 650; line-height: 1.35; }
.n5-row__m { display: block; margin-top: .15rem; color: var(--ink3); font-size: .82rem; line-height: 1.4; }
.n5-row__go { color: var(--ink3); font-size: 1.25rem; line-height: 1; }

/* ---- a guide page: one line of context ---- */
.n5-context { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-bottom: 1.75rem; } /* the journey line scrolls inside it */
.n5-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; color: var(--ink3); font-size: .85rem; }
.n5-crumb a { color: var(--ink2); text-decoration: none; }
.n5-crumb a:hover { text-decoration: underline; }
.n5-guidebar { position: relative; display: flex; align-items: center; gap: .5rem; }
.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; }
.n5-arrow:hover { border-color: var(--brand); color: var(--brand-d); }
.n5-arrow.is-off { opacity: .3; }
.n5-picker { position: static; min-width: 0; }
.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; }
.n5-picker summary::-webkit-details-marker { display: none; }
.n5-picker summary:hover { border-color: var(--brand); }
.n5-picker__k { flex: none; color: var(--ink3); font-size: .82rem; font-weight: 600; }
.n5-picker summary b { overflow: hidden; font-size: 1rem; white-space: nowrap; text-overflow: ellipsis; }
.n5-picker__v { flex: none; color: var(--ink3); font-size: .8rem; transition: transform .15s; }
.n5-picker[open] .n5-picker__v { transform: rotate(180deg); }
.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); }
.n5-journey { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .85rem; }
.n5-journey__k { color: var(--ink3); font-weight: 600; }
.n5-journey ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.n5-journey li { display: flex; align-items: center; white-space: nowrap; }
.n5-journey li + li::before { content: "›" / ""; margin: 0 .4rem; color: var(--ink3); }
.n5-journey a { padding: .15rem 0; border-bottom: 2px solid transparent; color: var(--ink3); text-decoration: none; }
.n5-journey a:hover { color: var(--ink); }
.n5-journey .is-done a { color: var(--ink2); }
.n5-journey .is-here a { border-bottom-color: var(--brand); color: var(--ink); font-weight: 700; }
.n5-journey .is-near a { border-bottom: 2px dashed var(--brand); color: var(--ink2); }
@media (max-width: 767.98px) {
  .n5-journey ol { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .n5-picker__k { display: none; }
}

/* ---- the steps beside the slides, grouped by who acts ---- */
.n5-layout { display: block; }
@media (min-width: 992px) { .n5-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.n5-rail { display: none; }
@media (min-width: 992px) {
  .n5-rail { display: block; position: sticky; top: calc(64px + 20px); max-height: calc(100vh - 104px); overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; }
}
.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); } /* the count and Present stay in view while the steps scroll */
.n5-rail__hd b { margin-right: auto; font-size: .95rem; }
.n5-rail .dk-present { padding: .42rem .8rem; font-size: .8rem; }
.n5-rail__x { display: none; }
.n5-grps, .n5-steps { margin: 0; padding: 0; list-style: none; }
.n5-grp { margin-top: 1.1rem; }
.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; }
.n5-who i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.n5-who span { margin-left: auto; color: var(--ink3); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.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; }
.n5-steps a:hover { background: var(--wash2); color: var(--ink); }
.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; }
.n5-t { display: -webkit-box; overflow: hidden; padding-top: .12rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.n5-steps a.done .n5-n { background: var(--brand-w); color: var(--brand-d); }
.n5-steps a.on { background: var(--brand-w); color: var(--ink); font-weight: 600; }
.n5-steps a.on .n5-n { background: var(--brand); color: var(--on-dark); }

/* phones and tablets: a slim bar, and the steps as a sheet that opens from it */
.n5-stepsbar { top: 64px; }
.n5-stepsbar__in { display: flex; align-items: center; gap: .8rem; padding-top: .5rem; padding-bottom: .5rem; }
.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) { .n5-stepsbar { top: 0; } }
@media (min-width: 992px) { .n5-stepsbar { display: none !important; } }
@media (max-width: 991.98px) {
  .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; }
  .n5-rail.is-open { transform: none; visibility: visible; }
  .n5-rail__hd { top: -1rem; padding-top: 1rem; background: var(--paper); }
  .n5-rail__x { display: grid; }
  .n5-rail .dk-present { display: none; }
}
.n5-scrim { position: fixed; inset: 0; z-index: 74; background: rgba(10, 14, 20, .45); }
.n5-scrim[hidden] { display: none; }

/* after the last slide: the next guide, plainly */
.n5-after { display: grid; gap: .9rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.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; }
.n5-next:hover { border-color: var(--brand); }
.n5-next span { color: var(--ink3); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.n5-next b { font-size: 1.1rem; line-height: 1.3; }
.n5-prevguide { color: var(--ink2); font-size: .9rem; text-decoration: none; }
.n5-prevguide:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .n5-after { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .n5-prevguide { order: -1; max-width: 32ch; }
  .n5-next { justify-self: end; width: min(100%, 520px); }
}

/* ---- a part's page ---- */
.n5-head { margin: .75rem 0 2rem; }
.n5-kicker { margin: 0 0 .4rem; color: var(--brand-d); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.n5-head h1 { margin: 0; }
.n5-lede { max-width: 62ch; margin: .6rem 0 0; color: var(--ink2); font-size: 1.05rem; line-height: 1.6; }
.n5-section > .n5-group { max-width: 860px; }
.n5-otherparts { max-width: 860px; margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.n5-otherparts h2 { margin: 0 0 .6rem; font: 700 .78rem/1.3 var(--font-body); color: var(--ink2); letter-spacing: .08em; text-transform: uppercase; }
.n5-otherparts ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.n5-otherparts a { color: var(--brand-d); font-weight: 600; text-decoration: none; }
.n5-otherparts a:hover { text-decoration: underline; }
.n5-otherparts span { color: var(--ink3); font-size: .85rem; }

/* ---- home: a few clear ways in ---- */
.n5-hero { max-width: 768px; padding: 1.75rem 0 .5rem; }
.n5-hero h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.12; }
.n5-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.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; }
.n5-btn:hover { border-color: var(--brand-d); background: var(--brand-d); }
.n5-btn--ghost { border-color: var(--line2); background: transparent; color: var(--ink); }
.n5-btn--ghost:hover { border-color: var(--brand); background: transparent; color: var(--ink); }
.n5-block { margin-top: 3.25rem; }
.n5-block h2 { margin: 0; font: var(--heading-weight) 1.45rem/1.25 var(--font-display); letter-spacing: var(--heading-tracking); }
.n5-sub { margin: .35rem 0 0; color: var(--ink3); }
.n5-partlist, .n5-job, .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) { .n5-partlist, .n5-job { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .n5-whois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .n5-partlist, .n5-job { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.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; }
.n5-part:hover { border-color: var(--brand); }
.n5-part__k { color: var(--ink3); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.n5-part b { font: var(--heading-weight) 1.25rem/1.25 var(--font-display); }
.n5-part__m { margin-top: auto; padding-top: .6rem; color: var(--brand-d); font-size: .9rem; font-weight: 600; }
.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; }
.n5-job a:hover { border-color: var(--brand); }
.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; }
.n5-job b { font-size: 1rem; line-height: 1.3; }
.n5-job__t { margin-top: .15rem; color: var(--ink3); font-size: .82rem; line-height: 1.35; }
.n5-whois li { padding: 1rem 1.1rem; border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; background: var(--paper); }
.n5-whois h3 { margin: 0; font-size: 1.02rem; }
.n5-whois p { margin: .35rem 0 0; color: var(--ink2); font-size: .9rem; line-height: 1.5; }
.n5-whois p.n5-whois__r { color: var(--ink3); font-size: .82rem; }
.n5-note { max-width: 68ch; margin: 1rem 0 0; color: var(--ink3); font-size: .85rem; }
.n5-roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-width: 860px; margin-top: 1rem; }
.n5-role { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.n5-role summary { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.n5-role summary::-webkit-details-marker { display: none; }
.n5-role summary i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.n5-role summary span { margin-left: auto; color: var(--ink3); font-size: .85rem; }
.n5-role summary::after { content: "⌄" / ""; margin: -.35rem 0 0 .5rem; color: var(--ink2); font-size: 1.15rem; line-height: 1; transition: transform .15s; }
.n5-role[open] summary::after { transform: translateY(.35rem) rotate(180deg); }
.n5-role ul { display: grid; gap: .35rem; margin: 0; padding: 0 1rem 1rem 2.65rem; list-style: none; }
.n5-role a { color: var(--brand-d); font-size: .92rem; text-decoration: none; }
.n5-role a:hover { text-decoration: underline; }

/* the deck keeps v4's slides; its top bar moves into the steps */
.n5-flow .dk { gap: 1.5rem; }

@media print { .n5-top, .n5-context, .n5-rail, .n5-stepsbar, .n5-after, .n5-drawer { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .n5-rail, .n5-picker__v, .n5-role summary::after { transition: none; } }

/* ==========================================================================
   Optimus Health guide — Overview (html-v6): html-v4's slides with the whole picture kept in view, tidied.
   Everything that gives the overview stays visible — the section bar, every guide of the part, the job end to
   end, the steps, guide cards with their screens, who does what — but each is quieter than in v4: the guides
   of a part in their groups, one labelled row each; the job as a light stepper; the steps grouped by who acts;
   fewer emoji and one accent. Classic colour tokens, so the skins still apply; every pair is one they keep at AA.
   ========================================================================== */

html { scroll-padding-top: 96px; }
@media (min-width: 768px) and (max-width: 991.98px) { html { scroll-padding-top: 145px; } }
@media (max-width: 767.98px) { html { scroll-padding-top: 64px; } }
main.o6-flow, main.o6-section, main.o6-home { padding-top: 1rem; padding-bottom: 4.5rem; }
/* the footer sits at the foot of the window on a short page */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }

/* ---- the section bar: All guides and Settings join it ---- */
@media (min-width: 992px) { .v2-bar__in { overflow: visible; } }
.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; }
.o6-all:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 991.98px) {
  /* brand and All guides on the first row, every section on the next; the Settings button (the classic guide's own,
     at the top right on these screens) keeps its place beside All guides */
  .v2-bar .v2-brand { order: 0; }
  .o6-all { order: 1; margin-left: auto; margin-right: 46px; }
  .v2-bar .v2-nav { order: 2; }
  .settingsbar { top: .55rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .settingsbar { top: .38rem; } }

/* ---- a part with one group: its guides in one labelled, numbered row ---- */
.o6-crumb { margin: .4rem 0 .9rem; }
.o6-tabs { display: grid; gap: .55rem; margin: 0 0 1.1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.o6-tabs__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
@media (min-width: 768px) { .o6-tabs__row { grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 1rem; } }
.o6-tabs__k { color: var(--ink3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.o6-tabs ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.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; }
.o6-tabs a:hover { background: var(--wash2); color: var(--ink); }
.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; }
.o6-tabs a[aria-current] { background: var(--brand); color: var(--on-dark); font-weight: 700; }
.o6-tabs a[aria-current] .o6-tabs__n { background: var(--brand-dd); color: var(--on-dark); }
@media (max-width: 767.98px) {
  .o6-tabs ol { flex-wrap: nowrap; margin: 0 -.75rem; padding: 0 .75rem .2rem; overflow-x: auto; scrollbar-width: none; }
}

/* ---- the job end to end: a light stepper, the current guide lit ---- */
.o6-job { margin: 0 0 1.5rem; }
.o6-job__k { margin: 0 0 .6rem; color: var(--ink3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.o6-job ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.o6-job li { position: relative; }
.o6-job li + li::before { content: ""; position: absolute; z-index: 0; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--line2); }
.o6-job li.is-done::before, .o6-job li.is-here::before { background: var(--brand); }
.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; }
.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; }
.o6-job__l { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.o6-job__t { color: var(--ink3); font-size: .75rem; line-height: 1.3; }
.o6-job a:hover .o6-job__dot { box-shadow: inset 0 0 0 2px var(--brand); }
.o6-job a:hover .o6-job__l { color: var(--ink); }
.o6-job .is-done .o6-job__dot { background: var(--brand-w); box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand-d); }
.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); }
.o6-job .is-here .o6-job__l { color: var(--ink); font-weight: 800; }
.o6-job .is-near .o6-job__dot { outline: 2px dashed var(--brand); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .o6-job ol { grid-template-columns: repeat(8, 86px); margin: 0 -.75rem; padding: 0 .75rem .3rem; overflow-x: auto; scrollbar-width: none; }
}

/* ---- a part with several groups (the Office): one block, the job as a numbered line, the rest as a set ---- */
.o6-gn { margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.o6-gn__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: .95rem 1rem; }
.o6-gn__row + .o6-gn__row { border-top: 1px solid var(--line); }
@media (min-width: 768px) { .o6-gn__row { grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 1.25rem; padding: 1.05rem 1.25rem; } }
.o6-gn__k { display: grid; gap: .1rem; margin: 0; }
.o6-gn__k b { color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.o6-gn__k > span { color: var(--ink3); font-size: .8rem; line-height: 1.35; }
.o6-gn__k .o6-gn__near { margin-top: .3rem; color: var(--ink2); }
.o6-gn__near a { font-weight: 700; white-space: nowrap; }
.o6-gn .o6-job { margin: 0; }
.o6-gn__set { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.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; }
.o6-gn__set a:hover { background: var(--brand-w); color: var(--ink); }
.o6-gn__set a[aria-current] { background: var(--brand); color: var(--on-dark); font-weight: 700; }
@media (max-width: 767.98px) {
  .o6-gn .o6-job ol { margin: 0 -1rem; padding: 0 1rem .3rem; }
}
/* an unnumbered guide in All guides: a small ring where the number would be */
.n5-row__n.o6-nonum { width: .6rem; height: .6rem; justify-self: center; background: transparent; box-shadow: inset 0 0 0 2px var(--line2); }
.n5-row[aria-current] .n5-row__n.o6-nonum { background: var(--brand); box-shadow: none; }

/* ---- the steps (grouped by who acts) sit under the classic bar ---- */
@media (min-width: 992px) { .o6-flow .n5-rail { top: calc(var(--bar-h) + 20px); max-height: calc(100vh - var(--bar-h) - 40px); } }
.o6-flow .n5-stepsbar { top: var(--bar-h); }
@media (max-width: 767.98px) { .o6-flow .n5-stepsbar { top: 0; } }

/* ---- guide cards with their screens, in groups ---- */
.o6-head { margin: 0 0 1.5rem; }
.o6-head h1 { margin: .2rem 0 0; }
.o6-group + .o6-group { margin-top: 2.25rem; }
.o6-group__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 .9rem; }
.o6-group__h h2 { margin: 0; font: var(--heading-weight) 1.25rem/1.3 var(--font-display); letter-spacing: var(--heading-tracking); }
.o6-group__h p { margin: 0; color: var(--ink3); font-size: .9rem; }
.o6-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .o6-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .o6-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .o6-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.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; }
.o6-card:hover { border-color: var(--brand); box-shadow: 0 10px 24px -14px rgb(var(--shadow) / .4); transform: translateY(-2px); }
.o6-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--wash2); }
.o6-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.o6-card__img--phone { padding: 8px 0 0; background: var(--device); }
.o6-card__img--phone img { object-fit: contain; object-position: top center; }
.o6-card__b { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .15rem .65rem; padding: .8rem .9rem .95rem; }
.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; }
.o6-card b { font-size: .98rem; line-height: 1.3; }
.o6-card__m { color: var(--ink3); font-size: .8rem; line-height: 1.4; }
/* ---- a part's guides as solid blocks of colour: no screens to read at thumbnail size ---- */
.o6-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .o6-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .o6-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .o6-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o6-tile--a { --tone: var(--brand); --tone-soft: var(--on-brand-dim); }
.o6-tile--b { --tone: var(--brand-d); --tone-soft: var(--on-brand-dim); }
.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; }
.o6-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(12, 17, 22, .6); filter: brightness(1.07); }
.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; }
.o6-tile:hover::after { transform: translateX(3px); }
.o6-tile__hd { display: flex; align-items: center; gap: .7rem; padding-right: 1.5rem; }
.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; }
.o6-tile__hd b { font: 600 1.3rem/1.15 "OutfitS", "ManropeS", system-ui, sans-serif; letter-spacing: -.01em; }
.o6-tile__t { color: var(--on-dark); font-size: .94rem; line-height: 1.4; }
.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; }
/* the home page's blocks wear the same colours: the parts like a first group, who does what like the next */
.o6-tile__k { color: var(--tone-soft); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.n5-block > .o6-tiles { margin-top: 1.1rem; }
.o6-tile--part { min-height: 132px; }
.o6-tile--part .o6-tile__hd b { font-size: 1.45rem; }
.o6-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.o6-tile--who { min-height: 0; }
.o6-tile--who:hover { transform: none; box-shadow: 0 1px 2px rgba(12, 17, 22, .14); filter: none; }
.o6-tile--who::after { display: none; }
.o6-tile--who .o6-tile__hd { padding-right: 0; }
.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); }
.o6-tile--who .o6-tile__hd b { font-size: 1.12rem; }
.o6-tile--who .o6-tile__hd small { margin-left: auto; color: var(--tone-soft); font-size: .78rem; }
.o6-tile--who ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 0; padding: 0; list-style: none; }
.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; } /* a darker pill: white text only gains contrast on any skin */
.o6-tile--who a:hover { background: rgba(0, 0, 0, .34); }
.o6-tile--who a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

/* who is who: the same solid blocks — Headquarters darkest, then the offices, then clients and families in the brand colour */
.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); }
.o6-home .org__box--ho { --tone-soft: var(--on-dark-soft); background: var(--brand-dd); }
.o6-home .org__box--fr { --tone-soft: var(--on-brand-dim); background: var(--brand-d); }
.o6-home .org__box--cu { --tone-soft: var(--on-brand-dim); background: var(--brand); }
.o6-home .org__box b { color: var(--on-dark); font: 600 1.18rem/1.2 "OutfitS", "ManropeS", system-ui, sans-serif; letter-spacing: -.01em; }
.o6-home .org__box span:not([class]) { color: var(--on-dark); font-size: .92rem; }
.o6-home .org__box small { color: var(--tone-soft); }
.o6-home .org__i { color: var(--on-dark); } /* a monochrome emoji fallback would draw in this colour */
.o6-home .org__box .v2-chip { background: rgba(0, 0, 0, .2); color: var(--on-dark); font-size: .76rem; }
.o6-home .org__f { border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .16); color: var(--on-dark); }
.o6-home .org__f b { font: 600 .95rem/1.2 "OutfitS", "ManropeS", system-ui, sans-serif; }
.o6-home .org__f small { color: var(--on-dark); }
.o6-home .org__f--more { border-color: rgba(255, 255, 255, .4); background: transparent; color: var(--on-dark); }
.o6-home .org__down { background: var(--brand-d); }
.o6-home .org__down::after { border-top-color: var(--brand-d); }

.o6-group__h--a h2::before, .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; }
.o6-group__h--b h2::before { background: var(--brand-d); }

.o6-others { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.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; }
.o6-others a:hover { border-color: var(--brand); }
.o6-others small { color: var(--ink3); font-weight: 500; }

/* ---- home: the whole picture, in order ---- */
.o6-hero { max-width: 768px; padding: 1rem 0 .25rem; }
.o6-hero h1 { margin: .2rem 0 0; }
.o6-home .org { margin-top: 1.1rem; }
.o6-home .o6-job { margin-top: 1.25rem; }
.o6-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: 1.1rem 0 0; }
@media (min-width: 576px) { .o6-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .o6-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .o6-who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media print { .o6-tabs, .o6-job, .o6-all { display: none !important; } }