/* ============================================================
   ULTIMA MEMORIA — Foundations V2
   Single source of truth for all foundations pages.
   ============================================================

   STRUCTURE
   ──────────────────────────────────────────────────────────────
   1.  Design tokens
   2.  Reset & base
   3.  Reading progress bar
   4.  Smart sticky header (hides on scroll down, shows on up)
   5.  Mega menu overlay ("More ▾")
   6.  Mobile drawer
   7.  Container & grid
   8.  Hero block
   9.  Section with sticky sidebar
   10. Section pod-navigation (anchor-tabs)
   11. Pull quotes
   12. Programmes list & training modules
   13. Press / evidence cards
   14. References & footnote tooltips
   15. Parameter-model bar
   16. To-top button & footer
   17. Animations & reduced motion
   18. Mobile responsive
   ============================================================ */

/* 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Paper palette */
  --paper:     #f5f2ea;
  --paper2:    #efe9d7;
  --paper3:    #e8e0c9;

  /* Ink scale */
  --ink:       #1a1814;
  --ink2:      #3a342b;
  --ink3:      #6b6253;

  /* Bronze accents */
  --bz1:       #8b6f3d;
  --bz2:       #a88955;
  --bz3:       #c2a15a;

  /* Rules & dividers */
  --rule:      rgba(139, 111, 61, 0.28);
  --rule-soft: rgba(139, 111, 61, 0.14);

  /* Typography */
  --serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --read:      'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:      'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Layout */
  --content-max:    1120px;
  --content-pad-x:  48px;
  --header-pad-x:   28px;
  --header-h:       66px;
  --section-gap:    56px;
}

/* 2. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink2);
  font-family: var(--read);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

/* 3. READING PROGRESS BAR ──────────────────────────────────── */

/* 4. SMART STICKY HEADER ───────────────────────────────────── */
.um-topbar {
  position: sticky;
  top: 3px;                      /* leaves room for progress bar */
  z-index: 50;
  background: var(--paper2);
  border-top: 1px solid var(--bz2);
  border-bottom: 1px solid var(--bz2);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.um-topbar.is-hidden {
  transform: translateY(-110%);
}
.um-topbar.is-scrolled {
  box-shadow: 0 2px 12px rgba(26, 24, 20, 0.06);
}
.um-topbar__inner {
  display: flex;
  align-items: center;
  padding: 14px var(--content-pad-x);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.um-topbar__nav-left {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 36px;
  flex-wrap: nowrap;
}
.um-topbar__nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}
.um-brand {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.um-brand:hover { opacity: 0.85; }
.um-brand em {
  font-style: italic;
  color: var(--bz1);
}
.um-brand__sub {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--ink3);
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 500;
}
.um-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
}
.um-nav__link {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink2);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}
.um-nav__link:hover { color: var(--bz1); }
.um-nav__link.is-active {
  color: var(--bz1);
  border-bottom: 1px solid var(--bz1);
}
.um-nav__more::after {
  content: " ▾";
  font-size: 8.5px;
  opacity: 0.7;
  margin-left: 2px;
}
.um-nav__more[aria-expanded="true"]::after {
  content: " ▴";
}
.um-nav__apply {
  background: var(--bz1);
  color: #fff7e0;
  padding: 8px 20px;
  border-radius: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.um-nav__apply:hover {
  background: var(--ink2);
  transform: translateY(-1px);
}
.um-nav__icons {
  display: flex;
  gap: 12px;
  color: var(--ink3);
  font-size: 14px;
  margin-left: 4px;
  flex-shrink: 0;
}
.um-nav__icons a {
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.um-nav__icons a:hover { color: var(--bz1); }

.um-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--bz2);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.2s ease;
}
.um-menu-toggle:hover { background: var(--paper3); }

/* 5. MEGA MENU OVERLAY ─────────────────────────────────────── */
.um-megamenu {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 2px solid var(--bz1);
  box-shadow: 0 12px 32px rgba(26, 24, 20, 0.12);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  max-height: 90vh;
  overflow-y: auto;
}
.um-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.um-megamenu__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 90px var(--content-pad-x) 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.um-megamenu__col h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--bz1);
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.um-megamenu__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.um-megamenu__col li {
  padding: 5px 0;
}
.um-megamenu__col a {
  font-family: var(--read);
  font-size: 15px;
  color: var(--ink2);
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}
.um-megamenu__col a:hover {
  color: var(--bz1);
  padding-left: 4px;
}
.um-megamenu__col a strong {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bz1);
  font-weight: 500;
  margin-right: 6px;
}
.um-megamenu__close {
  position: absolute;
  top: 22px;
  right: var(--content-pad-x);
  background: transparent;
  border: 1px solid var(--bz2);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.2s ease;
}
.um-megamenu__close:hover { background: var(--paper3); }

.um-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.30);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.um-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

/* 6. MOBILE DRAWER ─────────────────────────────────────────── */
.um-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 92vw);
  height: 100vh;
  background: var(--paper);
  border-left: 2px solid var(--bz1);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 24px 28px 40px;
}
.um-drawer.is-open { transform: translateX(0); }
.um-drawer__close {
  background: transparent;
  border: 1px solid var(--bz2);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink2);
  cursor: pointer;
  margin-bottom: 24px;
}
.um-drawer h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--bz1);
  text-transform: uppercase;
  margin: 24px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.um-drawer h4:first-of-type { margin-top: 0; }
.um-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.um-drawer ul a {
  display: block;
  padding: 8px 0;
  font-family: var(--read);
  font-size: 15.5px;
  color: var(--ink2);
  border-bottom: 1px solid var(--rule-soft);
}
.um-drawer ul a:hover { color: var(--bz1); }

/* 7. CONTAINER ─────────────────────────────────────────────── */
.um-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad-x);
  position: relative;
}

/* 8. HERO ──────────────────────────────────────────────────── */
/* Carousel — two images fade in/out over 12s loop */
@keyframes umCarouselFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 9. SECTION ───────────────────────────────────────────────── */
.um-h3 {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  font-weight: 500;
  margin: 32px 0 14px;
  letter-spacing: -0.005em;
}
.um-h3 em { font-style: italic; color: var(--bz1); }
.um-h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--bz1);
  text-transform: uppercase;
  margin: 28px 0 14px;
  font-weight: 500;
}

/* 10. SECTION POD-NAVIGATION (anchor tabs) ─────────────────── */
.um-subnav {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin: 0 calc(-1 * var(--content-pad-x));
  padding: 0 var(--content-pad-x);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.um-subnav::-webkit-scrollbar { display: none; }
.um-subnav__inner {
  display: inline-flex;
  gap: 28px;
  padding: 14px 0;
}
.um-subnav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.um-subnav a:hover { color: var(--bz1); }
.um-subnav a.is-active {
  color: var(--bz1);
  border-bottom-color: var(--bz1);
}

/* 11. PULL QUOTES ──────────────────────────────────────────── */

/* 12. PROGRAMMES & MODULES ─────────────────────────────────── */
.um-module {
  margin-top: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.um-module__head {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.um-module__head em {
  color: var(--bz1);
  font-style: italic;
}
.um-module__row {
  font-family: var(--read);
  font-size: 15.5px;
  color: var(--ink2);
  padding: 8px 0;
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.um-module__row:last-child { border-bottom: none; }
.um-module__code {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--bz1);
  min-width: 42px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.um-module__days {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Pricing card variation (for Programmes page) */

/* 13. PRESS / EVIDENCE CARDS ───────────────────────────────── */

/* 14. REFERENCES & FOOTNOTES ───────────────────────────────── */
.um-refs {
  margin-top: 48px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--read);
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.65;
}
.um-refs__title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--bz1);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.um-refs ol { padding-left: 18px; margin: 0; }
.um-refs li { padding: 4px 0; }
.um-refs li::marker {
  color: var(--bz1);
  font-family: var(--mono);
  font-size: 11px;
}
.um-fn {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--bz1);
  font-weight: 500;
  cursor: help;
  padding: 0 2px;
  border-bottom: 1px dotted var(--bz1);
  vertical-align: super;
  line-height: 0;
  transition: color 0.2s;
}
.um-fn:hover { color: var(--ink); }
.um-tooltip {
  position: fixed;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  max-width: 320px;
  line-height: 1.55;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  border-left: 2px solid var(--bz1);
}
.um-tooltip.is-visible { opacity: 1; }

/* 15. PARAMETER-MODEL BAR ──────────────────────────────────── */
.um-modelbar-wrap {
  margin-top: 56px;
  background: linear-gradient(90deg, var(--bz1) 0%, var(--bz2) 50%, var(--bz3) 100%);
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}
.um-modelbar {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px var(--content-pad-x);
  color: #fff7e0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.um-modelbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.um-modelbar__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  opacity: 0.78;
  background: rgba(255, 247, 224, 0.14);
  padding: 3px 8px;
  border: 1px solid rgba(255, 247, 224, 0.22);
}
.um-modelbar__title {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.um-modelbar__center {
  flex: 1;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  opacity: 0.94;
}
.um-modelbar__right {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.um-modelbar__unit {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-right: 8px;
  opacity: 0.78;
  text-transform: uppercase;
}

/* 16. TO-TOP & FOOTER ──────────────────────────────────────── */
.um-totop {
  margin: 0;
  padding: 16px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz1);
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  transition: color 0.2s ease;
}
.um-totop:hover { color: var(--ink); }

.um-footer {
  padding: 28px 0 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink3);
  text-align: center;
  line-height: 1.8;
}
.um-footer a {
  color: var(--ink3);
  transition: color 0.2s ease;
}
.um-footer a:hover { color: var(--bz1); }
.um-footer .sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--bz2);
}

/* 17. REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 18. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .um-nav { gap: 16px; }
  .um-nav__link { font-size: 10px; letter-spacing: 0.14em; }
}

@media (max-width: 980px) {
  .um-h3 { font-size: 21px; }
  .um-megamenu__inner { grid-template-columns: repeat(2, 1fr); }
  .um-modelbar {
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px;
    text-align: center;
  }
  .um-modelbar__center { font-size: 14px; }
}

@media (max-width: 720px) {
  :root {
    --content-pad-x: 24px;
    --header-pad-x: 18px;
  }
  /* Hide desktop nav links, show hamburger */
  .um-nav { display: none; }
  .um-topbar__nav-left { display: none !important; }
  .um-topbar__nav-right { display: none !important; }
  .um-menu-toggle { display: inline-block; }
  .um-brand { font-size: 20px; }
  .um-brand__sub { font-size: 8.5px; letter-spacing: 0.22em; }
  .um-megamenu__inner { grid-template-columns: 1fr; gap: 24px; padding: 90px 24px 40px; }
  .um-footer .sep { display: block; height: 0; visibility: hidden; margin: 4px 0; }
}
/* ==========================================================================
   ULTIMA MEMORIA — APPLY WIZARD CSS
   Append to end of resources/public/css/foundations.css
   (or load separately — this is for the /apply route, public site)
   ========================================================================== */

/* ── Wizard container (full width centered) ──────────────────────────── */
.um-wiz {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.um-wiz__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 36px;
}

.um-wiz__brand {
  text-decoration: none;
  color: inherit;
}

.um-wiz__brand-name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1;
}

.um-wiz__brand-name em {
  font-style: italic;
  color: var(--bz1);
}

.um-wiz__brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 5px;
  font-weight: 500;
}

.um-wiz__top-meta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.um-wiz__top-crumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bz1);
  font-weight: 500;
}

.um-wiz__top-exit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  text-decoration: none;
}

.um-wiz__top-exit:hover {
  color: var(--bz1);
}

/* ── 12-step progress bar ────────────────────────────────────────────── */
.um-wiz__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 36px;
  padding: 0 8px;
}

.um-wiz__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
}

.um-wiz__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 1px;
  background: var(--rule-soft);
  z-index: 0;
}

.um-wiz__step--done:not(:last-child)::after {
  background: var(--bz2);
}

.um-wiz__step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink3);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.um-wiz__step-dot svg {
  width: 14px;
  height: 14px;
  color: #fff7e0;
}

.um-wiz__step--done .um-wiz__step-dot {
  background: var(--bz1);
  border-color: var(--bz1);
  color: #fff7e0;
}

.um-wiz__step--current .um-wiz__step-dot {
  background: #fff;
  border-color: var(--bz1);
  color: var(--bz1);
  box-shadow: 0 0 0 3px rgba(194, 161, 90, 0.18);
}

.um-wiz__step-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink3);
  text-transform: uppercase;
  margin-top: 8px;
  text-align: center;
  max-width: 86px;
  line-height: 1.3;
}

.um-wiz__step--current .um-wiz__step-lbl,
.um-wiz__step--done .um-wiz__step-lbl {
  color: var(--bz1);
  font-weight: 500;
}

/* ── Main wizard card ────────────────────────────────────────────────── */
.um-wiz__card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 40px 48px;
  margin-bottom: 20px;
}

.um-wiz__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bz1);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 10px;
}

.um-wiz__title {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}

.um-wiz__title em {
  font-style: italic;
  color: var(--bz1);
}

.um-wiz__sub {
  font-family: var(--read);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink3);
  max-width: 560px;
  margin: 0 0 30px;
  line-height: 1.6;
}

.um-wiz__sub strong {
  color: var(--bz1);
  font-style: normal;
  font-weight: 500;
}

/* ── Tier selection (3 cards) ────────────────────────────────────────── */
.um-wiz__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.um-wiz__tier {
  background: var(--paper2);
  border: 1.5px solid var(--rule);
  padding: 22px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  display: block;
}

.um-wiz__tier:hover:not(.um-wiz__tier--locked) {
  border-color: var(--bz2);
}

.um-wiz__tier--selected {
  border-color: var(--bz1);
  background: #fff;
  box-shadow: inset 3px 0 0 var(--bz1);
}

.um-wiz__tier--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.um-wiz__tier input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.um-wiz__tier-name {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
}

.um-wiz__tier-name em {
  font-style: italic;
  color: var(--bz1);
}

.um-wiz__tier-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink3);
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 500;
}

.um-wiz__tier-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--bz1);
  margin: 18px 0 8px;
  font-weight: 500;
  line-height: 1;
}

.um-wiz__tier-price small {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink3);
  margin-right: 6px;
  font-weight: 500;
}

.um-wiz__tier-desc {
  font-family: var(--read);
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.55;
  font-style: italic;
}

.um-wiz__tier-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--bz1);
  color: #fff7e0;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  font-weight: 500;
}

/* ── Wizard actions ──────────────────────────────────────────────────── */
.um-wiz__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

.um-wiz__back {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.um-wiz__back:hover {
  color: var(--bz1);
}

.um-wiz__next {
  background: var(--bz1);
  color: #fff7e0;
  padding: 13px 32px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.um-wiz__next:hover {
  background: var(--ink2);
}

/* ── Foot note ───────────────────────────────────────────────────────── */
.um-wiz__foot {
  font-family: var(--read);
  font-style: italic;
  font-size: 13px;
  color: var(--ink3);
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.55;
}
/* ==========================================================================
   ULTIMA MEMORIA — PROGRAMMES PAGE REDESIGN
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── Programmes page — 3 paper-bronze cards ──────────────────────────── */

/* ==========================================================================
   ULTIMA MEMORIA — PROCESS FLOW + THREE FUNCTIONS + CALLOUT
   Append to end of resources/public/css/foundations.css
   Used on: /method 4.1, /tests 6.1, /tests 6.4
   ========================================================================== */

/* ── Process flow (circles with arrows) ──────────────────────────────── */
.um-flow {
  padding: 6px 0 0;
  margin: 12px 0;
}

.um-flow-title {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

.um-flow-title::before,
.um-flow-title::after {
  content: "";
  flex: 1;
  max-width: 110px;
  height: 1px;
  background: var(--rule, rgba(139, 111, 61, 0.28));
}

.um-flow-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.um-flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  max-width: 160px;
  position: relative;
}

.um-flow-arrow {
  align-self: flex-start;
  margin-top: 32px;
  color: var(--bz2, #a88955);
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 4px;
}

.um-flow-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--bz2, #a88955);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e2d4a;
  position: relative;
  margin-bottom: 14px;
}

.um-flow-circle svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.4;
}

.um-flow-step--active .um-flow-circle {
  background: var(--paper2, #efe9d7);
  border-color: var(--bz1, #8b6f3d);
  border-width: 2px;
}

.um-flow-num {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bz1, #8b6f3d);
  color: #fff7e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 500;
}

.um-flow-lbl {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink, #1a1814);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.3;
}

.um-flow-step--active .um-flow-lbl {
  color: var(--bz1, #8b6f3d);
}

.um-flow-sub {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink3, #6b6253);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 130px;
}

/* Compact variant (for 7-step flows) */
.um-flow-row--compact .um-flow-step {
  max-width: 115px;
}

.um-flow-row--compact .um-flow-circle {
  width: 60px;
  height: 60px;
}

.um-flow-row--compact .um-flow-circle svg {
  width: 26px;
  height: 26px;
}

.um-flow-row--compact .um-flow-num {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

.um-flow-row--compact .um-flow-lbl {
  font-size: 9px;
}

/* ── Three functions panel (Messung / Kontrolle / Prüfung) ───────────── */
.um-threefn {
  background: #fdfaf1;
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  padding: 24px 28px;
  margin-top: 24px;
}

.um-threefn-title {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

.um-threefn-title::before,
.um-threefn-title::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--rule, rgba(139, 111, 61, 0.28));
}

.um-threefn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.um-threefn-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.um-threefn-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--bz2, #a88955);
  color: #1e2d4a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.um-threefn-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.4;
}

.um-threefn-body {
  flex: 1;
  min-width: 0;
}

.um-threefn-num {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 3px;
}

.um-threefn-name {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 17px;
  color: var(--ink, #1a1814);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 6px;
}

.um-threefn-text {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 12.5px;
  color: var(--ink3, #6b6253);
  line-height: 1.55;
  font-style: italic;
}

/* ── Info callout strip ──────────────────────────────────────────────── */
.um-callout {
  background: #fdfaf1;
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  padding: 14px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
}

.um-callout-i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bz1, #8b6f3d);
  color: #fff7e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  flex-shrink: 0;
}

.um-callout-t {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13px;
  color: var(--ink2, #3a342b);
  line-height: 1.6;
}

.um-callout-t strong {
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .um-flow-row {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }
  .um-flow-arrow {
    display: none;
  }
  .um-threefn-row {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   ULTIMA MEMORIA — MODULÜBERSICHT GRID (Applications 7.1)
   Append to end of resources/public/css/foundations.css
   Uses real icon images extracted from Dr. Freiberg's PDF
   ========================================================================== */

.um-modgrid {
  background: #fdfaf1;
  padding: 38px 36px 32px;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  margin: 24px auto;
  max-width: 920px;
}

.um-modgrid-title-wrap {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 6px;
}

.um-modgrid-title-wrap::before,
.um-modgrid-title-wrap::after {
  content: "";
  flex: 1;
  max-width: 90px;
  height: 1px;
  background: var(--bz2, #a88955);
}

.um-modgrid-title {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 32px;
  color: #1e2d4a;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0;
}

.um-modgrid-sub {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 14.5px;
  color: #1e2d4a;
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.um-modgrid-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.um-mod {
  background: #fdfaf1;
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  padding: 24px 18px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.um-mod:hover {
  border-color: var(--bz1, #8b6f3d);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(139, 111, 61, 0.10);
}

.um-mod-vis {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.um-mod-vis img {
  display: block;
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.um-mod-rule {
  width: 40px;
  height: 1px;
  background: var(--bz2, #a88955);
  margin: 0 auto 10px;
  opacity: 0.6;
}

.um-mod-name {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px;
  color: #1e2d4a;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Responsive */
@media (max-width: 768px) {
  .um-modgrid {
    padding: 24px 16px 20px;
  }
  .um-modgrid-cells {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .um-modgrid-cells {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================

/* ==========================================================================
   ULTIMA MEMORIA — UM-META LIST EXPANSION
   Subsections kao vertikalna clickable lista (umjesto "2.1 — 2.4")
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* When um-meta dd contains links, render them as vertical clickable list */

/* Tighter spacing between dt/dd when subsections list is long */

/* Hide um-subnav (horizontal sticky anchor menu) — now redundant */
.um-subnav {
  display: none !important;
}
/* ==========================================================================
   ULTIMA MEMORIA — TOPBAR ALWAYS STICKY (never disappears)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* Force topbar to be sticky always — override any hide-on-scroll behaviour */
.um-topbar,
.um-topbar.is-hidden,
.um-topbar.is-up,
.um-topbar[data-hidden],
.um-topbar[data-up] {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
  z-index: 100;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* ==========================================================================
   PROGRAMMES — Card width follows um-section body width
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* When card is inside um-section body, make it follow the text column width */

/* Tighter padding when inside narrower body column */

/* Slightly smaller title inside narrower column */

/* Days number slightly smaller too */

/* ==========================================================================
   PROGRAMMES — Force Roman numerals UPRIGHT (never italic)
   In card title "Ultima Memoria I / II / III" — the I/II/III must be upright
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* Card title — Roman numeral always upright, never italic */

/* Also enforce upright Roman everywhere it's used */
/* ==========================================================================
   MEGAMENU — Clickable headings + numbered subsections
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* Megamenu h3 — now contains <a> link, style it like the heading was */
.um-megamenu h3 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s;
}

.um-megamenu h3 a:hover {
  color: var(--bz1, #8b6f3d);
}

/* Add subtle underline indicator on hover for h3 link */
.um-megamenu h3 a {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.um-megamenu h3 a:hover {
  border-bottom-color: var(--bz1, #8b6f3d);
}

/* Megamenu numbered subsection markers */
.um-megamenu-num {
  display: inline-block;
  min-width: 32px;
  color: var(--bz1, #8b6f3d);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-right: 6px;
}

/* Existing ul/li styles should still work — make sure links are clickable */
.um-megamenu ul li a {
  display: flex;
  align-items: baseline;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s;
}

.um-megamenu ul li a:hover {
  color: var(--bz1, #8b6f3d);
}
/* ==========================================================================
   MODULGRID — Inside um-section__body, prati širinu teksta
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* When um-modgrid is inside um-section__body — prati širinu body kolone */

/* Title smaller when inside section body (jer već imamo um-h2 iznad) */

/* Cells tighter inside section body */

/* ==========================================================================
   UM-MODULE — Fix visibility (stagger animation outside um-section)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* Tighter spacing izmedju 4 modula koji idu zaredom */
.um-module + .um-module {
  margin-top: 8px;
}

/* Grupa modula nakon um-section — manji gap odozgo i odozdo */

/* Manji prazan prostor poslije zadnjeg modula pa do sljedece um-section */
.um-module:last-of-type {
  margin-bottom: 18px;
}
/* ==========================================================================
   UM-MODULE — Padding-left tako da prati tekst sekcije iznad
   Sidebar = 200px, gap = 56px → padding-left = 256px
   NE diramo display, dizajn, nista — samo padding-left
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

.um-module {
  padding-left: 256px;
}

/* Mobile: na uskim viewport-ima, sidebar je iznad teksta (ne pored), 
   pa module ne treba padding-left */
@media (max-width: 900px) {
  .um-module {
    padding-left: 0;
  }
}
/* ==========================================================================
   UM-NEURON-FIGURE — paper-bronze framed VIDEO for memory page 3.2
   Append to end of resources/public/css/foundations.css
   (Ako postoji vec stari neuron-figure.css blok sa img stylingom,
    onda ovaj samo dodaje video styling — ne konfliktuje)
   ========================================================================== */

.um-neuron-figure {
  margin: 24px 0 24px;
  padding: 14px 14px 12px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

/* Video — autoplay loop, kao animirani GIF */
.um-neuron-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  background: #1a1814;
}

/* Fallback ako stari img selector postoji */
.um-neuron-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  background: #1a1814;
}

.um-neuron-figure figcaption {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink3, #6b6253);
  text-align: center;
  margin-top: 10px;
  padding: 0 8px;
  line-height: 1.5;
}

.um-neuron-figure figcaption em {
  color: var(--bz1, #8b6f3d);
  font-style: normal;
  font-weight: 500;
}
/* ==========================================================================
   ULTIMA MEMORIA — AUTH (Login & Forgot Password)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── Hero centered variant ───────────────────────────── */

/* ── Auth card — paper-bronze sa malo dubine ──────────── */
.um-auth-card {
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  padding: 36px 34px 30px;
  max-width: 480px;
  margin-top: 12px;
  position: relative;
}

/* Bronze accent line on top */
.um-auth-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--bz1, #8b6f3d) 0%, var(--bz3, #c2a15a) 50%, var(--bz1, #8b6f3d) 100%);
}

/* ── Form ──────────────────────────────────────────── */
.um-auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.um-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.um-auth-label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
}

.um-auth-input {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15.5px;
  color: var(--ink, #1a1814);
  background: var(--paper, #f5f2ea);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;  /* sharp edges per design system */
}

.um-auth-input:hover {
  background: #fff;
}

.um-auth-input:focus {
  background: #fff;
  border-color: var(--bz1, #8b6f3d);
  box-shadow: inset 0 -1px 0 0 var(--bz1, #8b6f3d);
}

/* ── Password show/hide wrapper ──────────────────────── */
.um-auth-pwd-wrap {
  position: relative;
}

.um-auth-input--pwd {
  padding-right: 44px;
}

.um-auth-pwd-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink3, #6b6253);
  transition: color 0.15s;
  padding: 0;
}

.um-auth-pwd-toggle:hover {
  color: var(--bz1, #8b6f3d);
}

.um-auth-pwd-toggle svg {
  width: 18px;
  height: 18px;
}

/* ── Submit button ──────────────────────────────────── */
.um-auth-actions {
  margin-top: 6px;
}

.um-auth-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bz1, #8b6f3d);
  color: #fdfaf1;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 22px;
  border: 1px solid var(--bz1, #8b6f3d);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-radius: 0;
}

.um-auth-submit:hover {
  background: var(--ink, #1a1814);
  border-color: var(--ink, #1a1814);
}

.um-auth-submit-arrow {
  display: inline-block;
  transition: transform 0.15s;
}

.um-auth-submit:hover .um-auth-submit-arrow {
  transform: translateX(4px);
}

/* Ghost variant for "Send reset link" — less prominent */
.um-auth-submit--ghost {
  background: transparent;
  color: var(--bz1, #8b6f3d);
}

.um-auth-submit--ghost:hover {
  background: var(--bz1, #8b6f3d);
  color: #fdfaf1;
}

/* ── Auth links (forgot / register) ──────────────────── */
.um-auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14px;
  color: var(--ink3, #6b6253);
}

.um-auth-link {
  color: var(--ink2, #3a342b);
  text-decoration: none;
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}

.um-auth-link:hover {
  color: var(--bz1, #8b6f3d);
  border-color: var(--bz1, #8b6f3d);
}

.um-auth-link strong {
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
}

.um-auth-sep {
  color: var(--ink4, #a59685);
}

/* ── Error & success messages ────────────────────────── */
.um-auth-error,
.um-auth-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 18px;
  border-left: 3px solid;
}

.um-auth-error {
  background: #f5e0dc;
  border-left-color: #a85a3a;
  color: #6e2e1c;
}

.um-auth-success {
  background: #e8efdc;
  border-left-color: #5a8c5a;
  color: #2e5a2e;
}

.um-auth-error-icon,
.um-auth-success-icon {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}

/* ── Inline message (forgot form result) ───────────── */
.um-auth-msg {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 10px;
  min-height: 1.2em;
}

.um-auth-msg--info {
  color: var(--bz1, #8b6f3d);
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .um-auth-card {
    padding: 28px 22px 24px;
  }
  .um-auth-links {
    font-size: 13px;
  }
}
/* ==========================================================================
   1. SIDEBAR — Text alignment fix (broj u svojoj koloni, tekst u svojoj)
   ========================================================================== */

/* Sidebar link: grid sa fiksnom kolonom za broj + tekst u svojoj */

/* Broj u prvoj koloni — fiksne sirine */

/* Tekst sam — moze se omotati ispod sebe, NE ispod broja */

/* ==========================================================================
   2. STICKY HORIZONTAL BAR — pojavi se kada sidebar nestane iz vidokruga
   ========================================================================== */

/* ==========================================================================
   3. MODELBAR — UKLANJAMO sa svih stranica
   ========================================================================== */

.um-modelbar {
  display: none !important;
}

/* ==========================================================================
   4. NOVI FOOTER — mirror header (paper-bronze)
   ========================================================================== */

/* Postojeci footer override-ujem */
.um-footer {
  background: var(--paper, #f5f2ea);
  border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  padding: 0;
  margin-top: 60px;
  position: relative;
}

/* Bronze linija na dnu (mirror gornje progress linije) */
.um-footer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bz1, #8b6f3d) 0%, var(--bz3, #c2a15a) 50%, var(--bz1, #8b6f3d) 100%);
}

.um-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 22px;
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.um-footer__logo {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #1a1814);
  line-height: 1;
  letter-spacing: -0.005em;
}

.um-footer__logo em {
  font-style: italic;
  color: var(--bz1, #8b6f3d);
}

.um-footer__nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.um-footer__nav a {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}

.um-footer__nav a:hover {
  color: var(--bz1, #8b6f3d);
}

.um-footer__copy {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink4, #a59685);
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 700px) {
  .um-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 22px;
  }
}
/* ==========================================================================
   ALIGNMENT FIX v2 — Sticky bar i Footer prate liniju Topbar-a
   Koristi tvoje postojece varijable: --content-max i --content-pad-x
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── Sticky bar inner — isti container kao topbar ────────────────────── */

/* ── Footer row — isti container kao topbar ──────────────────────────── */

.um-footer__row {
  max-width: var(--content-max, 1120px);
  margin: 0 auto;
  padding: 22px var(--content-pad-x, 48px) 26px;
}

/* ── Mobile — smanjeni padding (skladen sa topbar-om na mobile) ──────── */

@media (max-width: 700px) {
  .um-footer__row {
    padding: 18px 20px 22px;
  }
}

/* ── Apply dugme — samo bold bronza tekst, bez pozadine ── */
.um-nav__apply {
  background: none;
  color: var(--bz1);
  padding: 0;
  border-radius: 0;
  font-weight: 600;
}
.um-nav__apply:hover {
  background: none;
  color: var(--ink);
  transform: none;
}
/* ==========================================================================
   STICKY BAR FINAL — Opcija B (1376px, prosirena 48px svaka strana)
   + Megamenu z-index fix (megamenu IZNAD sticky bara)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── Sticky bar — uokvirena karta, spojen sa topbarom, sira ─────────── */

/* ── Megamenu — z-index iznad sticky bara, da prekriva ─────────────── */

.um-megamenu {
  z-index: 120 !important;   /* iznad sticky bara (90) */
}
/* More megamenu: fixed dropdown below the main menu; scrolls internally. Footer is in normal flow at the
   bottom of every page (static) and shows when the menu is closed. */
/* opens BELOW the sticky sub-nav (which stays visible), scrolls internally, never covers the footer */
.um-megamenu{ position:fixed !important; top:123px !important; max-height:calc(100vh - 203px) !important; overflow-y:auto !important; }
.um-topbar{ z-index:130 !important; }
/* sub-nav stays visible above the menu + backdrop while More is open */
.um-stickybar{ z-index:129 !important; }
/* top fade below the main menu + sub-nav (mirror of the footer fade) — only while More is open */
.um-megamenu.is-open::before{ content:""; position:fixed; top:123px; left:0; right:0; height:36px; background:linear-gradient(to bottom, var(--paper,#f5f2ea), transparent); z-index:128; pointer-events:none; }
/* single column, sections in numeric order; content pulled up toward the main menu (was 90px top) */
.um-megamenu__inner{ grid-template-columns:1fr !important; padding-top:48px !important; padding-bottom:32px !important; }
/* tighter rows + first heading clears the top fade */
.um-megamenu__col li{ padding:3px 0 !important; }
/* #3 — divider line under each section heading closer to the title (was 10px) */
.um-megamenu__col h3{ padding-bottom:4px !important; }
/* ALL megamenu links (group headings + sub-items): no shift / no colour change / no animation on hover —
   ONLY a bronze underline (WORD-WIDTH, uniform 2px) appears below the text. */
.um-megamenu__col a{ display:inline-block !important; background-image:none !important; transition:none !important; border-bottom:2px solid transparent !important; }
.um-megamenu__col a:hover{ border-bottom-color:#8b6f3d !important; padding-left:0 !important; color:inherit !important; }

/* ── Mobile — mali padding ─────────────────────────────────────────── */

/* ==========================================================================
   UM-FLOW-BAR — Horizontal step flow for measurement page
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

.um-flow-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 20px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  margin: 18px 0 8px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
}

.um-flow-step {
  color: var(--ink2, #3a342b);
  padding: 6px 12px;
  background: var(--paper, #f5f2ea);
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  flex-shrink: 0;
}

.um-flow-step--accent {
  color: var(--bz1, #8b6f3d);
  border-color: var(--bz2, #a88955);
  font-weight: 600;
}

.um-flow-arrow {
  color: var(--bz1, #8b6f3d);
  font-size: 14px;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .um-flow-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .um-flow-arrow {
    text-align: center;
    transform: rotate(90deg);
    margin: 4px 0;
  }
}
/* ==========================================================================
   UM-PROG-TABLE — Programme assessment table (Method 4.5)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ==========================================================================
   EVIDENCE — Media list & Cite list styles
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── Media list (10.2) — 10 press references ─────────────────────────── */

.um-media-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0 8px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-media-item {
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s;
}

.um-media-item:last-child {
  border-bottom: none;
}

.um-media-item:hover {
  background: rgba(139, 111, 61, 0.04);
}

.um-media-source {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
}

.um-media-headline {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink, #1a1814);
  font-style: italic;
  font-weight: 400;
}

/* ── Cite list (10.3 B-F) — referenced authors ──────────────────────── */

.um-cite-list {
  list-style: none;
  padding: 14px 20px;
  margin: 16px 0 18px;
  background: var(--paper4, #fdfaf1);
  border-left: 3px solid var(--bz2, #a88955);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.um-cite-list li {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink2, #3a342b);
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-cite-list li:last-child {
  border-bottom: none;
}

.um-cite-list li strong {
  color: var(--bz1, #8b6f3d);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-right: 10px;
  display: inline-block;
  min-width: 36px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .um-media-item {
    padding: 14px 18px;
  }
  .um-media-headline {
    font-size: 16.5px;
  }
  .um-cite-list {
    padding: 12px 16px;
  }
}
/* ==========================================================================
   UM-STUDY — Academic citation cards (Evidence 10.3 B-F)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

.um-study {
  background: #fff;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  margin: 16px 0;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.um-study:hover {
  border-color: var(--bz2, #a88955);
  box-shadow: 0 1px 0 0 var(--rule-soft, rgba(139, 111, 61, 0.14));
}

/* Head — bronze tag bar */
.um-study-head {
  background: var(--paper4, #fdfaf1);
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.um-study-code {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  flex-shrink: 0;
}

.um-study-cite {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
}

/* Body — main content */
.um-study-body {
  padding: 18px 20px 16px;
}

/* Headline — Cormorant italic */
.um-study-h {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink, #1a1814);
  font-weight: 500;
  font-style: italic;
  margin: 0 0 12px;
}

/* Meta tags — University, field */
.um-study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 16px;
}

.um-study-meta span {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper2, #efe9d7);
  padding: 3px 10px;
}

/* Row — labeled section (Key finding / Relevance) */
.um-study-row {
  margin: 0 0 14px;
}

.um-study-lbl {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 4px;
}

.um-study-text {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink2, #3a342b);
}

.um-study-text em {
  font-style: italic;
  color: var(--bz1, #8b6f3d);
}

.um-study-text strong {
  font-weight: 600;
  color: var(--ink, #1a1814);
}

/* Link — bronze with arrow */
.um-study-link {
  display: inline-block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--bz2, #a88955);
  padding-bottom: 2px;
  margin-top: 6px;
  transition: color 0.15s, border-color 0.15s;
}

.um-study-link:hover {
  color: var(--ink, #1a1814);
  border-bottom-color: var(--ink, #1a1814);
}

/* Mobile */
@media (max-width: 700px) {
  .um-study-head {
    padding: 10px 14px;
    flex-direction: column;
    gap: 4px;
  }
  .um-study-body {
    padding: 14px 14px 12px;
  }
  .um-study-h {
    font-size: 17px;
  }
}
/* ==========================================================================
   UM-TBL — Universal table component (Method 4.1, 4.4 + Measurement 6.1, 6.3, 6.5)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

.um-tbl {
  background: #fff;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  margin: 16px 0 8px;
  overflow-x: auto;
}

.um-tbl-head {
  background: var(--paper4, #fdfaf1);
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  display: grid;
  grid-template-columns: 110px repeat(4, 1fr);
  gap: 10px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  align-items: center;
}

.um-tbl-row {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  display: grid;
  grid-template-columns: 110px repeat(4, 1fr);
  gap: 10px;
  align-items: center;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  color: var(--ink2, #3a342b);
  letter-spacing: 0.04em;
}

.um-tbl-row:last-child {
  border-bottom: none;
}

.um-tbl-row:nth-child(even) {
  background: rgba(245, 242, 234, 0.4);
}

.um-tbl-prog {
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 11.5px;
}

.um-tbl-total {
  color: var(--ink, #1a1814);
  font-weight: 600;
}

.um-tbl-placeholder {
  color: var(--ink4, #a59685);
  font-style: italic;
}

/* Roman numeral inherits */

/* Mobile — horizontal scroll, smaller text */
@media (max-width: 800px) {
  .um-tbl {
    font-size: 9.5px;
  }
  .um-tbl-head,
  .um-tbl-row {
    padding: 10px 12px;
    grid-template-columns: 80px repeat(4, minmax(70px, 1fr));
    min-width: 540px;
  }
  .um-tbl-prog {
    font-size: 10.5px;
  }
}
/* ==========================================================================
   UM-LANE — Per-programme assessment lane cards (Method 4.5)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

.um-lane-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 8px;
}

.um-lane {
  background: #fff;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: stretch;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.um-lane:hover {
  border-color: var(--bz2, #a88955);
}

/* Side panel with programme code + target */
.um-lane-side {
  background: var(--paper4, #fdfaf1);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

.um-lane-prog {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
}

.um-lane-target {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 11.5px;
  color: var(--ink3, #6b6253);
  font-style: italic;
  line-height: 1.3;
}

/* Flow with step pills + arrows */
.um-lane-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 16px 18px;
}

.um-lane-step {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink2, #3a342b);
  padding: 6px 11px;
  background: var(--paper, #f5f2ea);
  border: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.um-lane-step--accent {
  background: rgba(168, 137, 85, 0.12);
  border-color: var(--bz2, #a88955);
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
}

.um-lane-arrow {
  color: var(--bz1, #8b6f3d);
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 16px;
  flex-shrink: 0;
}

/* Mobile — sidebar on top */
@media (max-width: 700px) {
  .um-lane {
    grid-template-columns: 1fr;
  }
  .um-lane-side {
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
    align-items: baseline;
  }
  .um-lane-flow {
    padding: 14px 16px;
  }
  .um-lane-step {
    font-size: 9.5px;
    padding: 5px 9px;
  }
}
/* ==========================================================================
   UM-LADDER — Phase ladder timeline (Method 4.5)
   Scientific publication style — square nodes with Roman numerals + 
   connecting lines + bronze star final node
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

.um-ladder {
  background: #fff;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  padding: 22px 26px;
  margin: 18px 0 8px;
}

.um-ladder__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-ladder__row:first-child {
  padding-top: 6px;
}

.um-ladder__row:last-child {
  padding-bottom: 6px;
  border-bottom: none;
}

/* Programme label (left) */
.um-ladder__prog {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.um-ladder__prog-code {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 28px;
  color: var(--bz1, #8b6f3d);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.um-ladder__prog-sub {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
}

/* Track (right) — flex of nodes */
.um-ladder__track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: 4px;
}

/* Each node — flex 1 with absolute line */
.um-ladder__node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 6px;
}

/* Square node with Roman numeral */
.um-ladder__circle {
  width: 34px;
  height: 34px;
  border: 2px solid var(--bz2, #a88955);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11.5px;
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
  border-radius: 0;
}

/* Final node — bronze filled with star */
.um-ladder__circle--final {
  background: var(--bz1, #8b6f3d);
  color: #f5e9c8;
  border-color: var(--bz1, #8b6f3d);
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 17px;
  font-style: italic;
}

/* Connecting line — absolute, horizontal */
.um-ladder__line {
  position: absolute;
  top: 17px;
  left: 50%;
  right: -50%;
  height: 1px;
  background: var(--rule, rgba(139, 111, 61, 0.28));
  z-index: 1;
}

.um-ladder__node:last-child .um-ladder__line {
  display: none;
}

/* Label below */
.um-ladder__lbl {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 10px;
  line-height: 1.45;
  max-width: 120px;
}

.um-ladder__node--final .um-ladder__lbl {
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
}

/* Days marker */
.um-ladder__days {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 11px;
  color: var(--ink3, #6b6253);
  font-style: italic;
  margin-top: 4px;
}

/* Mobile — stack vertically */
@media (max-width: 800px) {
  .um-ladder {
    padding: 18px 18px;
  }
  .um-ladder__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .um-ladder__prog-code {
    font-size: 24px;
  }
  .um-ladder__track {
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .um-ladder__node {
    min-width: 100px;
  }
}
/* ==========================================================================
   UM-WIZ — Apply Wizard (13-step guided process)
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── STEPPER ─────────────────────────────────────────────────────────── */

.um-wiz-stepper {
  display: flex;
  align-items: flex-start;
  padding: 18px 4px 22px;
  margin: 4px 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 0;
}

.um-wiz-step {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
  text-decoration: none;
  min-width: 76px;
  transition: opacity 0.15s;
}

.um-wiz-step__node {
  width: 36px;
  height: 36px;
  border: 2px solid var(--rule, rgba(139, 111, 61, 0.28));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: var(--ink3, #6b6253);
  font-weight: 600;
  border-radius: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.um-wiz-step__check {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 17px;
  font-style: italic;
}

.um-wiz-step__num {
  letter-spacing: 0;
}

.um-wiz-step__lbl {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.3;
}

.um-wiz-step__line {
  flex: 1;
  height: 2px;
  background: var(--rule-soft, rgba(139, 111, 61, 0.14));
  margin: 18px 0 0;
  min-width: 18px;
}

/* States */
.um-wiz-step--done .um-wiz-step__node {
  background: var(--bz1, #8b6f3d);
  border-color: var(--bz1, #8b6f3d);
  color: #f5e9c8;
}
.um-wiz-step--done .um-wiz-step__lbl {
  color: var(--bz1, #8b6f3d);
}
.um-wiz-step--done:hover .um-wiz-step__node {
  background: var(--bz2, #a88955);
  border-color: var(--bz2, #a88955);
}

.um-wiz-step--current .um-wiz-step__node {
  border-color: var(--bz1, #8b6f3d);
  background: #fff;
  color: var(--bz1, #8b6f3d);
  border-width: 3px;
}
.um-wiz-step--current .um-wiz-step__lbl {
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
}

.um-wiz-step--future {
  pointer-events: none;
  opacity: 0.55;
}

.um-wiz-step__line--done {
  background: var(--bz1, #8b6f3d);
}

/* ── PANEL ─────────────────────────────────────────────────────────── */

.um-wiz-panel {
  background: #fff;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  margin: 8px 0;
}

.um-wiz-panel__head {
  background: var(--paper4, #fdfaf1);
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-wiz-panel__eyebrow {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 4px;
}

.um-wiz-panel__h {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 28px;
  color: var(--ink, #1a1814);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

.um-wiz-panel__h em {
  font-style: italic;
  color: var(--bz1, #8b6f3d);
}

.um-wiz-panel__body {
  padding: 22px 24px 24px;
}

.um-wiz-panel__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-wiz-panel--final {
  border-color: var(--bz2, #a88955);
  border-width: 2px;
}

.um-wiz-panel--final .um-wiz-panel__head {
  background: rgba(168, 137, 85, 0.10);
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */

.um-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.um-btn--primary {
  background: var(--bz1, #8b6f3d);
  color: #f5e9c8;
  font-weight: 600;
}

.um-btn--primary:hover {
  background: var(--ink, #1a1814);
  color: #fff;
}

.um-btn--link {
  background: transparent;
  color: var(--ink3, #6b6253);
  padding: 12px 0;
  border: none;
}

.um-btn--link:hover {
  color: var(--bz1, #8b6f3d);
}

/* ── PROGRAMME SELECTOR (Step 3) ─────────────────────────────────── */

.um-wiz-progs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 8px;
}

.um-wiz-prog {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.um-wiz-prog:hover {
  border-color: var(--bz1, #8b6f3d);
  background: #fff;
}

.um-wiz-prog input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--bz1, #8b6f3d);
  flex-shrink: 0;
  cursor: pointer;
}

.um-wiz-prog__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.um-wiz-prog__code {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
}

.um-wiz-prog__tgt {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px;
  color: var(--ink, #1a1814);
  font-style: italic;
  font-weight: 500;
}

.um-wiz-prog__meta {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}

.um-wiz-prog__meta em {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink3, #6b6253);
}

.um-wiz-prog--locked {
  opacity: 0.65;
  cursor: not-allowed;
}

.um-wiz-prog--locked:hover {
  border-color: var(--rule, rgba(139, 111, 61, 0.28));
  background: var(--paper4, #fdfaf1);
}

/* ── PLACEHOLDER (for Stripe / Learning material / Tests) ────────── */

.um-wiz-placeholder {
  background: var(--paper, #f5f2ea);
  border: 1px dashed var(--rule, rgba(139, 111, 61, 0.28));
  padding: 32px 24px;
  margin: 18px 0 8px;
  text-align: center;
}

.um-wiz-placeholder__lbl {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 6px;
}

.um-wiz-placeholder__sub {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13px;
  color: var(--ink3, #6b6253);
  font-style: italic;
}

.um-wiz-placeholder--cert {
  background: rgba(168, 137, 85, 0.06);
  border-color: var(--bz2, #a88955);
}

/* ── MOBILE ──────────────────────────────────────────────────────── */

@media (max-width: 800px) {
  .um-wiz-stepper {
    padding: 14px 4px 18px;
  }
  .um-wiz-step {
    min-width: 64px;
  }
  .um-wiz-step__node {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  .um-wiz-step__lbl {
    font-size: 8px;
  }
  .um-wiz-step__line {
    min-width: 12px;
  }
  .um-wiz-panel__head {
    padding: 14px 18px 12px;
  }
  .um-wiz-panel__body {
    padding: 18px 18px 20px;
  }
  .um-wiz-panel__h {
    font-size: 22px;
  }
  .um-wiz-panel__cta {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .um-wiz-panel__cta .um-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ==========================================================================
   PROGRAMMES 5.5 SPECIALISED MODULES + TEST ENGINE + MODALS
   Append to end of resources/public/css/foundations.css
   ========================================================================== */

/* ── BRONZE DIVIDER ──────────────────────────────────────────────── */

.um-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0 26px;
  padding: 0;
}

.um-divider__line {
  flex: 1;
  height: 1px;
  background: var(--bz2, #a88955);
}

.um-divider__text {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 600;
}

/* ── MODULE LIST ITEMS ──────────────────────────────────────────── */

.um-mod-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 12px;
}

.um-mod-item {
  background: #fff;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  display: grid;
  grid-template-columns: 170px 1fr 200px;
  gap: 0;
  align-items: stretch;
  transition: border-color 0.15s;
}

.um-mod-item:hover {
  border-color: var(--bz2, #a88955);
}

/* Icon column */
.um-mod-item__icon {
  background: var(--paper4, #fdfaf1);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-mod-item__icon svg {
  display: block;
}

.um-mod-item__icon-label {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  color: var(--bz1, #8b6f3d);
  font-style: italic;
  font-weight: 500;
  margin-top: 4px;
  text-align: center;
}

/* Body column */
.um-mod-item__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.um-mod-item__num {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
}

.um-mod-item__h {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px;
  color: var(--ink, #1a1814);
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  margin: 0;
}

.um-mod-item__h em {
  color: var(--bz1, #8b6f3d);
}

.um-mod-item__cat {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper2, #efe9d7);
  padding: 3px 8px;
  align-self: flex-start;
  margin: 4px 0 2px;
}

.um-mod-item__desc {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13px;
  color: var(--ink2, #3a342b);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* Aside column (price + CTA) */
.um-mod-item__aside {
  background: var(--paper4, #fdfaf1);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border-left: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-mod-item__price-wrap {
  text-align: center;
}

.um-mod-item__price {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 15px;
  color: var(--bz1, #8b6f3d);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.um-mod-item__price-sub {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ink3, #6b6253);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 3px;
}

.um-mod-item__cta {
  background: var(--bz1, #8b6f3d);
  color: #f5e9c8;
  padding: 10px 14px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s;
}

.um-mod-item__cta:hover {
  background: var(--ink, #1a1814);
  color: #fff;
}

/* Mobile — stack vertically */
@media (max-width: 800px) {
  .um-mod-item {
    grid-template-columns: 1fr;
  }
  .um-mod-item__icon {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
    padding: 14px;
  }
  .um-mod-item__aside {
    border-left: none;
    border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  }
}

/* ── TEST ENGINE (dark theme) ──────────────────────────────────── */

.um-engine {
  background: var(--ink, #1a1814);
  color: #f5e9c8;
  border: 1px solid var(--bz1, #8b6f3d);
  margin: 14px 0 8px;
}

.um-engine__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(245, 233, 200, 0.16);
  flex-wrap: wrap;
  gap: 10px;
}

.um-engine__mod {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bz3, #c2a15a);
  font-weight: 600;
}

.um-engine__pattern {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  color: rgba(245, 233, 200, 0.7);
  letter-spacing: 0.08em;
}

.um-engine__status {
  display: flex;
  gap: 28px;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(245, 233, 200, 0.10);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(245, 233, 200, 0.6);
  flex-wrap: wrap;
}

.um-engine__status .val {
  color: #f5e9c8;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.04em;
}

.um-engine__asset {
  min-height: 240px;
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 233, 200, 0.03);
}

.um-engine__asset-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.um-engine__asset-cap {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13px;
  color: rgba(245, 233, 200, 0.55);
  font-style: italic;
  text-align: center;
  max-width: 460px;
}

.um-engine__foot {
  display: flex;
  justify-content: center;
  padding: 18px 22px;
  border-top: 1px solid rgba(245, 233, 200, 0.10);
}

.um-engine__btn {
  background: var(--bz1, #8b6f3d);
  color: #f5e9c8;
  padding: 12px 32px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--bz1, #8b6f3d);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.um-engine__btn:hover {
  background: var(--bz2, #a88955);
  border-color: var(--bz2, #a88955);
}

/* ── MODALS (4 stanja, hidden by default) ───────────────────────── */

.um-modal[hidden] {
  display: none;
}

.um-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.um-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 20, 0.72);
  cursor: pointer;
}

.um-modal__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bz1, #8b6f3d);
  max-width: 440px;
  width: 100%;
  padding: 28px 28px 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

.um-modal__eyebrow {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 8px;
}

.um-modal__h {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  color: var(--ink, #1a1814);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  margin: 0 0 12px;
}

.um-modal__h em {
  color: var(--bz1, #8b6f3d);
}

.um-modal__p {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13.5px;
  color: var(--ink2, #3a342b);
  line-height: 1.55;
  margin: 0 0 18px;
}

.um-modal__p strong {
  color: var(--ink, #1a1814);
  font-weight: 600;
}

.um-modal__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.um-modal__btn {
  padding: 10px 18px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border: 1px solid var(--bz1, #8b6f3d);
  transition: background 0.15s, color 0.15s;
}

.um-modal__btn--prim {
  background: var(--bz1, #8b6f3d);
  color: #f5e9c8;
}

.um-modal__btn--prim:hover {
  background: var(--ink, #1a1814);
  border-color: var(--ink, #1a1814);
}

.um-modal__btn--sec {
  background: transparent;
  color: var(--bz1, #8b6f3d);
}

.um-modal__btn--sec:hover {
  background: var(--bz1, #8b6f3d);
  color: #f5e9c8;
}

.um-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--ink3, #6b6253);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.15s;
}

.um-modal__close:hover {
  color: var(--bz1, #8b6f3d);
}
/* ==========================================================================
   TRIPLE FIX — Test Engine + Apply Wizard Panel + Module Cards
   Append to end of resources/public/css/foundations.css
   
   PROBLEM:
   1. /practice/test/:id — dark test engine pobjegao lijevo (uska kutija)
   2. /apply?step=1 — "Create your account" panel pobjegao lijevo
   3. /programmes 5.5 — module kartice imaju drugacije dimenzije od S2/S3/S10
   
   UZROK:
   - Dark panele sam stavljao bez container wrappera

/* Override za um-engine — sada koristi puni container */
.um-fullwrap .um-engine {
  width: 100%;
  max-width: 100%;
  margin: 14px 0 8px;
  box-sizing: border-box;
}

/* Override za um-wiz-panel — sada koristi puni container */
.um-fullwrap .um-wiz-panel {
  width: 100%;
  max-width: 100%;
  margin: 14px 0;
  box-sizing: border-box;
}

/* ── ENGINE — bolji proporcionalni layout ──────────────────────── */

.um-engine__head {
  flex-wrap: wrap;
  gap: 10px;
}

.um-engine__status {
  justify-content: flex-start;
  gap: 32px;
}

.um-engine__asset {
  min-height: 280px;
  padding: 40px 24px;
}

/* Mobile engine */
@media (max-width: 800px) {
  .um-engine__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .um-engine__status {
    gap: 18px;
    flex-wrap: wrap;
  }
}

/* ── MODULE CARDS REFACTOR — usklađeno sa um-prog-card stilom ─── */

/* Postojeci 9 modula su 3-column. Treba ih napraviti full-width 
   stack (kao S2/S3/S10 kartice koje su um-prog-stack flex-direction:column).
   Ipak, zadrzim 3-column INTERNAL layout, samo osiguravam da je 
   container full-width. */

.um-mod-list {
  max-width: 100%;
}

.um-mod-item {
  /* Bigger touch targets, more breathing room */
  grid-template-columns: 180px 1fr 220px;
  min-height: 140px;
}

.um-mod-item__body {
  padding: 18px 22px;
}

.um-mod-item__h {
  font-size: 22px;
}

.um-mod-item__desc {
  font-size: 13.5px;
  line-height: 1.55;
}

.um-mod-item__icon {
  padding: 22px 18px;
}

.um-mod-item__icon-label {
  font-size: 15px;
}

/* Mobile za module items */
@media (max-width: 900px) {
  .um-mod-item {
    grid-template-columns: 1fr;
  }
  .um-mod-item__icon {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  }
  .um-mod-item__aside {
    border-left: none;
    border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  }
}
/* ==========================================================================
   PRECISE FIX — Engine + Wizard align to text column (200px + 1fr grid)
   Append to end of resources/public/css/foundations.css
   
   PROBLEM:
   .um-fullwrap je isao cijelom sirinom 1120px umjesto da bude u tekst-koloni
   (1fr, posle 200px sidebar-a).
   
   FIX:

/* ── ENGINE — sada koristi um-section--bare__body ─────────────── */

/* ── WIZARD PANEL — sada koristi um-section--bare__body ───────── */

/* ── OVERRIDE: ukloni .um-fullwrap problem ────────────────────── */

/* Ostaje da postoji ali bez ekstrema sirina. 
   Ako nesto vec koristi .um-fullwrap, neka bude konzervativan default */
.um-fullwrap {
  max-width: var(--content-max, 1120px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  width: 100%;
}

/* ── MODULE CARDS — usklađivanje sa um-section width ──────────── */

/* Module list je u um-section body (1fr nakon 200px sidebar).
   Sirina je vec ogranicena na tu kolonu — samo treba osigurati 
   da kartice ne probijaju van */

.um-mod-list {
  width: 100%;
  max-width: 100%;
}

.um-mod-item {
  /* Vratim na umjerenije proporcije za uzu kolonu */
  grid-template-columns: 140px 1fr 170px;
  min-height: auto;
}

.um-mod-item__body {
  padding: 14px 18px;
}

.um-mod-item__h {
  font-size: 19px;
}

.um-mod-item__desc {
  font-size: 12.5px;
  line-height: 1.5;
}

.um-mod-item__icon {
  padding: 16px 14px;
}

.um-mod-item__icon-label {
  font-size: 13px;
}

.um-mod-item__aside {
  padding: 14px 16px;
}

/* Mobile za module items */
@media (max-width: 900px) {
  .um-mod-item {
    grid-template-columns: 1fr;
  }
  .um-mod-item__icon {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  }
  .um-mod-item__aside {
    border-left: none;
    border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  }
}

/* ============================================================
   MODULE CARDS — match Programme card height (Session 7)
   ------------------------------------------------------------
   Layout stays 140px / 1fr / 170px (per Amir).
   Strategy: min-height 290px + generous padding + center content.
   Appended last → wins cascade vs lines 4372, 4863, 4992.
   ============================================================ */
.um-mod-item{
  min-height: 290px;
  align-items: stretch;
}

.um-mod-item > *{
  padding: 32px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.um-mod-item > *:nth-child(2){
  padding-left: 30px;
  padding-right: 30px;
  align-items: flex-start;
}

.um-mod-item > *:first-child,
.um-mod-item > *:last-child{
  align-items: center;
}

/* ============================================================
   UM PRACTICE PREVIEW — full CSS (Session 7)
   ------------------------------------------------------------
   Components used by /practice/test/:id (practice-preview.ejs)
   All paper/bronze/ink tokens, no Bootstrap.
   Appended at the end of foundations.css.
   ============================================================ */

/* ---------- Block wrapper ---------- */
.um-mp-block { margin-top: 24px; }

/* Meta sidebar extras */
.um-mp-meta-pattern {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
}
.um-mp-meta-anon {
  display: inline-block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  background: var(--paper2, #efe9d7);
  padding: 3px 8px;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

/* ---------- H2 in module section ---------- */
.um-mp-h2-num {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.6em;
  letter-spacing: 0.18em;
  color: var(--bz1, #8b6f3d);
  vertical-align: middle;
  margin-right: 10px;
}
.um-mp-h2-pattern {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.45em;
  letter-spacing: 0.2em;
  color: var(--ink3, #6b6253);
  vertical-align: middle;
  margin-left: 12px;
}

/* ---------- 9-module list ---------- */
.um-mp-modlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.um-mp-modlist__item {
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}
.um-mp-modlist__item:last-child { border-bottom: none; }
.um-mp-modlist__link {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 12px 8px;
  text-decoration: none;
  color: var(--ink2, #3a342b);
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 16px;
  transition: background 120ms ease, color 120ms ease;
}
.um-mp-modlist__link:hover {
  background: var(--paper4, #fdfaf1);
  color: var(--bz1, #8b6f3d);
}
.um-mp-modlist__num {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--bz1, #8b6f3d);
  text-align: right;
}
.um-mp-modlist__name {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  color: var(--ink, #1a1814);
}
.um-mp-modlist__pattern {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
  white-space: nowrap;
}
.um-mp-modlist__item.is-active .um-mp-modlist__link {
  background: var(--paper4, #fdfaf1);
  border-left: 2px solid var(--bz1, #8b6f3d);
  padding-left: 14px;
}
.um-mp-modlist__item.is-active .um-mp-modlist__name {
  font-style: italic;
  color: var(--bz1, #8b6f3d);
}

/* ---------- Subhead inside module ---------- */
.um-mp-subhead {
  margin: 36px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

/* ---------- Figure (image with caption) ---------- */
.um-mp-figure {
  margin: 24px 0;
  padding: 0;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.um-mp-figure figcaption {
  padding: 10px 16px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
  border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}
.um-mp-figure--main {
  margin: 28px 0 36px;
}

/* ---------- 4 keyboard panels (Arabic) ---------- */
.um-mp-keyboards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 18px 0 36px;
}
.um-mp-kb {
  margin: 0;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-kb img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.um-mp-kb figcaption {
  padding: 8px 14px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
  border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  display: flex;
  align-items: center;
  gap: 10px;
}
.um-mp-kb__num {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 18px;
  color: var(--bz1, #8b6f3d);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Overview images ---------- */
.um-mp-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 18px 0 24px;
}
.um-mp-overview figure {
  margin: 0;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-overview img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

/* ---------- Notes (after content) ---------- */
.um-mp-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink3, #6b6253);
  background: var(--paper4, #fdfaf1);
  border-left: 2px solid var(--bz2, #a88955);
}

/* ---------- Colours module ---------- */
.um-mp-palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0;
}
.um-mp-palette__group {
  background: var(--paper4, #fdfaf1);
  padding: 14px 16px;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-palette__label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  margin-bottom: 10px;
}
.um-mp-palette__row {
  display: flex;
  gap: 8px;
}
.um-mp-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-sample-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 24px 0;
  max-width: 480px;
}
.um-mp-sample {
  aspect-ratio: 1/1;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

/* ---------- Shapes 2D / 3D ---------- */
.um-mp-shapes-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  margin: 24px 0;
  color: var(--ink, #1a1814);
}
.um-mp-shape {
  margin: 0;
  padding: 12px 8px 8px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  text-align: center;
}
.um-mp-shape svg {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
}
.um-mp-shape figcaption {
  margin-top: 6px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
}

@media (max-width: 800px) {
  .um-mp-shapes-row { grid-template-columns: repeat(4, 1fr); }
  .um-mp-keyboards { grid-template-columns: 1fr; }
  .um-mp-overview { grid-template-columns: 1fr; }
  .um-mp-palette { grid-template-columns: 1fr; }
}

/* ---------- Letters / Digits ---------- */
.um-mp-letters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0;
}
.um-mp-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px;
  color: var(--ink, #1a1814);
}
.um-mp-letter--sample {
  background: var(--paper2, #efe9d7);
  border-color: var(--bz2, #a88955);
  color: var(--bz1, #8b6f3d);
  font-style: italic;
}
.um-mp-sample-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0;
}

/* ---------- Notes (musical) ---------- */
.um-mp-staff {
  margin: 24px 0;
  padding: 16px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  color: var(--ink, #1a1814);
}

/* ---------- Chess ---------- */
.um-mp-chess-grids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 24px 0;
}
.um-mp-chess-board {
  position: relative;
  display: grid;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  padding: 8px 8px 26px;
  aspect-ratio: 1/1.05;
}
.um-mp-chess-board--2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.um-mp-chess-board--4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.um-mp-chess-board--6 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; }
.um-mp-chess-board--8 { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; }
.um-mp-chess-cell { aspect-ratio: 1/1; }
.um-mp-chess-cell.is-light { background: #faf3e0; }
.um-mp-chess-cell.is-dark  { background: #8b6f3d; }
.um-mp-chess-board__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
  text-align: center;
}
.um-mp-chess-game {
  margin: 28px 0 12px;
  padding: 14px 18px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-chess-game__label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  margin-bottom: 10px;
}
.um-mp-chess-game__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 18px;
  counter-reset: chess-move;
}
.um-mp-chess-game__list li {
  counter-increment: chess-move;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14px;
  color: var(--ink2, #3a342b);
}
.um-mp-chess-game__list li::before {
  content: counter(chess-move) ". ";
  color: var(--ink4, #a59685);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
}

@media (max-width: 800px) {
  .um-mp-chess-grids { grid-template-columns: repeat(2, 1fr); }
  .um-mp-chess-game__list { grid-template-columns: 1fr 1fr; }
}

/* ---------- Quran ---------- */
.um-mp-quran-banner {
  text-align: center;
  margin: 18px 0 24px;
}
.um-mp-quran-banner img {
  max-width: 320px;
  height: auto;
  display: inline-block;
}
.um-mp-quran-sura {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
}
.um-mp-quran-col {
  padding: 16px 18px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-quran-col[dir="rtl"] {
  text-align: right;
}
.um-mp-quran-col__title {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  color: var(--bz1, #8b6f3d);
  font-size: 20px;
  margin: 0 0 10px;
  font-weight: 500;
}
.um-mp-quran-col p {
  margin: 4px 0;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink2, #3a342b);
}

@media (max-width: 800px) {
  .um-mp-quran-sura { grid-template-columns: 1fr; }
}

/* ============================================================
   UM-MP FORM
   ============================================================ */
.um-mp-form {
  margin-top: 24px;
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}
.um-mp-form-intro {
  font-size: 14px;
  color: var(--ink3, #6b6253);
}
.um-mp-radio:hover {
  border-color: var(--bz2, #a88955);
  background: var(--paper2, #efe9d7);
}
.um-mp-radio input[type="radio"] {
  margin: 0;
  accent-color: var(--bz1, #8b6f3d);
}
.um-mp-radio input[type="radio"]:checked + span {
  color: var(--bz1, #8b6f3d);
  font-style: italic;
}
.um-mp-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 20px;
  background: var(--paper4, #fdfaf1);
  border-top: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

/* ---------- UM-MP buttons ---------- */
.um-mp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--bz1, #8b6f3d);
  background: transparent;
  color: var(--bz1, #8b6f3d);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  font-weight: 500;
}
.um-mp-btn:hover {
  background: var(--bz1, #8b6f3d);
  color: var(--paper4, #fdfaf1);
}
.um-mp-btn--ghost {
  border-color: var(--rule, rgba(139, 111, 61, 0.28));
  color: var(--ink3, #6b6253);
}
.um-mp-btn--ghost:hover {
  background: var(--paper2, #efe9d7);
  color: var(--bz1, #8b6f3d);
  border-color: var(--bz2, #a88955);
}
.um-mp-btn--primary {
  background: var(--bz1, #8b6f3d);
  color: var(--paper4, #fdfaf1);
  border-color: var(--bz1, #8b6f3d);
}
.um-mp-btn--primary:hover {
  background: var(--ink, #1a1814);
  border-color: var(--ink, #1a1814);
  color: #fff;
}

@media (max-width: 800px) {
  .um-mp-form-row { grid-template-columns: 1fr; }
  .um-mp-form-label { border-right: none; border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14)); }
  .um-mp-form-controls--grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   100-PARAMETER MODEL — v=173 (doctor design: square cells, lining numbers)
   ============================================================ */
.um-100p-bar{display:flex;align-items:baseline;gap:14px;background:var(--paper2,#efe9d7);border:1px solid var(--bz1,#8b6f3d);padding:14px 20px;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);}
.um-100p-bar__suffix{font-style:italic;color:var(--bz1,#8b6f3d);font-size:20px;}
.um-100p-bar__title{font-size:19px;color:var(--ink,#1a1814);}
.um-100p-bar__sub{font-size:15px;color:var(--ink3,#6b6253);margin-left:auto;}
.um-100p-grid{display:grid;grid-template-columns:repeat(8,1fr) 1.15fr;gap:5px;margin:8px 0;}
.um-100p-h{display:flex;align-items:center;justify-content:center;border:1px solid var(--bz1,#8b6f3d);background:var(--paper4,#fdfaf1);font-family:var(--read,'Newsreader',Georgia,serif);font-variant-numeric:lining-nums tabular-nums;font-size:14px;color:var(--ink2,#3a342b);padding:6px 0;}
.um-100p-h--sum{font-size:12px;}
.um-100p-cell{border:1px solid var(--bz1,#8b6f3d);background:var(--paper4,#fdfaf1);aspect-ratio:1;}
.um-100p-cell--sum{aspect-ratio:auto;font-family:var(--read,'Newsreader',Georgia,serif);font-variant-numeric:lining-nums tabular-nums;font-size:12.5px;color:var(--ink2,#3a342b);padding:8px 10px;line-height:1.55;}
.um-100p-cell--sc{aspect-ratio:auto;font-family:var(--read,'Newsreader',Georgia,serif);font-variant-numeric:lining-nums tabular-nums;font-size:11.5px;color:var(--ink2,#3a342b);padding:7px 9px;line-height:1.6;}

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.um-mp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.um-mp-modal[hidden] { display: none !important; }
.um-mp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 20, 0.62);
  backdrop-filter: blur(2px);
}
.um-mp-modal__card {
  position: relative;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--paper, #f5f2ea);
  border: 1px solid var(--bz1, #8b6f3d);
  padding: 32px 32px 28px;
  z-index: 1;
}
.um-mp-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink3, #6b6253);
  cursor: pointer;
  padding: 4px 8px;
}
.um-mp-modal__close:hover { color: var(--bz1, #8b6f3d); }
.um-mp-modal__head h3 {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 28px;
  margin: 6px 0 0;
  color: var(--ink, #1a1814);
  font-weight: 500;
}
.um-mp-modal__body p {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  line-height: 1.6;
  margin: 16px 0;
  color: var(--ink2, #3a342b);
}
.um-mp-modal__note {
  font-size: 13px !important;
  color: var(--ink3, #6b6253) !important;
  font-style: italic;
}
.um-mp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}


/* ============================================================
   UM REGISTER — full form styles (Session 7+)
   ------------------------------------------------------------
   Used by /register and (after redirect) /registration.
   Append to end of foundations.css.
   ============================================================ */

/* === Section subhead (Date of birth, etc.) === */
.um-reg-subhead {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #1a1814);
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-reg-section-intro {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink3, #6b6253);
  margin: 0 0 24px;
  max-width: 640px;
}

/* === 2-column grid (default) === */
.um-reg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 26px;
}

/* === DOB 3-column variant === */
.um-reg-grid--dob {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px 22px;
  max-width: 640px;
}

.um-reg-field--full {
  grid-column: 1 / -1;
  max-width: 520px;
}

/* === Label === */
.um-reg-label {
  display: block;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  margin-bottom: 7px;
}

.um-reg-required {
  color: #c0392b;
  margin-left: 2px;
}

/* === Input + Select === */
.um-reg-input,
.um-reg-select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  line-height: 1.4;
  border: 1px solid var(--bz2, #a88955);
  background: var(--paper2, #efe9d7);
  color: var(--ink, #1a1814);
  outline: none;
  box-sizing: border-box;
  transition: border-color 120ms ease, background 120ms ease;
}

.um-reg-input::placeholder {
  color: var(--ink4, #a59685);
  font-style: italic;
}

.um-reg-input:focus,
.um-reg-select:focus {
  border-color: var(--bz1, #8b6f3d);
  background: #fff;
}

.um-reg-input:invalid:not(:placeholder-shown) {
  border-color: #c0392b;
}

/* === Select arrow === */
.um-reg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238b6f3d' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.um-reg-select:invalid {
  color: var(--ink4, #a59685);
  font-style: italic;
}

/* === Error message === */
.um-reg-error {
  margin: 18px 0;
  padding: 12px 18px;
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #7d2620;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14px;
}

.um-reg-error[hidden] {
  display: none;
}

/* === Note (password requirements) === */
.um-reg-note {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13px;
  color: var(--ink3, #6b6253);
  margin: 14px 0 24px;
  padding: 10px 14px;
  background: var(--paper4, #fdfaf1);
  border-left: 2px solid var(--bz2, #a88955);
}

.um-reg-note strong {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  margin-right: 6px;
}

/* === Actions row (terms + submit) === */
.um-reg-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

.um-reg-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14px;
  color: var(--ink2, #3a342b);
  line-height: 1.55;
  cursor: pointer;
  max-width: 640px;
}

.um-reg-terms input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--bz1, #8b6f3d);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* === Submit button === */
.um-reg-submit {
  background: var(--bz1, #8b6f3d);
  color: #fff7e0;
  padding: 14px 36px;
  border: 1px solid var(--bz1, #8b6f3d);
  border-radius: 0;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.um-reg-submit:hover {
  background: var(--ink, #1a1814);
  border-color: var(--ink, #1a1814);
}

.um-reg-submit:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* === Link === */
.um-link {
  color: var(--bz1, #8b6f3d);
  text-decoration: none;
  border-bottom: 1px solid var(--bz3, #c2a15a);
  transition: color 120ms ease, border-color 120ms ease;
}

.um-link:hover {
  color: var(--ink, #1a1814);
  border-color: var(--ink, #1a1814);
}

/* === Mobile === */
@media (max-width: 800px) {
  .um-reg-grid,
  .um-reg-grid--dob {
    grid-template-columns: 1fr;
  }
  .um-reg-actions {
    align-items: stretch;
  }
  .um-reg-submit {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   UM CONTACT — Chapter 11 styles (Session 7+)
   ------------------------------------------------------------
   Contact cards, FAQ accordion, company info block.
   Append to end of foundations.css.
   ============================================================ */

/* === Contact card (per channel section) === */
.um-contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  margin: 24px 0 18px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  border-left: 3px solid var(--bz1, #8b6f3d);
}

.um-contact-card__channel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.um-contact-card__label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
}

.um-contact-card__address {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink, #1a1814);
  text-decoration: none;
  border-bottom: 1px solid var(--bz3, #c2a15a);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color 120ms ease, border-color 120ms ease;
}

.um-contact-card__address:hover {
  color: var(--bz1, #8b6f3d);
  border-bottom-color: var(--bz1, #8b6f3d);
}

/* === Contact button === */
.um-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--bz1, #8b6f3d);
  color: #fff7e0;
  border: 1px solid var(--bz1, #8b6f3d);
  border-radius: 24px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

.um-contact-btn:hover {
  background: var(--ink, #1a1814);
  border-color: var(--ink, #1a1814);
  color: #fff;
}

/* === Contact note === */
.um-contact-note {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink3, #6b6253);
  margin: 14px 0 0;
  padding: 12px 16px;
  background: var(--paper2, #efe9d7);
  border-left: 2px solid var(--bz2, #a88955);
}

.um-contact-note strong {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  margin-right: 6px;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.um-faq {
  margin: 28px 0 12px;
  border-top: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

.um-faq__item {
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

.um-faq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink, #1a1814);
  transition: color 120ms ease;
}

.um-faq__q::-webkit-details-marker {
  display: none;
}

.um-faq__q:hover {
  color: var(--bz1, #8b6f3d);
}

.um-faq__q-num {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  align-self: center;
}

.um-faq__q-text {
  line-height: 1.35;
}

/* Plus / minus icon */
.um-faq__q-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.um-faq__q-icon::before,
.um-faq__q-icon::after {
  content: '';
  position: absolute;
  background: var(--bz1, #8b6f3d);
  transition: transform 200ms ease, opacity 200ms ease;
}

.um-faq__q-icon::before {
  left: 0;
  top: 50%;
  width: 16px;
  height: 1.5px;
  transform: translateY(-50%);
}

.um-faq__q-icon::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 16px;
  transform: translateX(-50%);
}

.um-faq__item[open] .um-faq__q-icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

.um-faq__a {
  padding: 0 4px 22px 64px;
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2, #3a342b);
}

.um-faq__a p {
  margin: 0 0 10px;
}

.um-faq__a p:last-child {
  margin-bottom: 0;
}

.um-faq__a strong {
  color: var(--ink, #1a1814);
  font-weight: 500;
}

/* Subtle expand animation */
.um-faq__item {
  overflow: hidden;
}

.um-faq__item[open] .um-faq__a {
  animation: um-faq-expand 240ms ease-out;
}

@keyframes um-faq-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   COMPANY INFO BLOCK
   ============================================================ */

.um-contact-company {
  margin: 24px 0;
  padding: 28px 32px;
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

.um-contact-company__name {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink, #1a1814);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-contact-company__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 10px 0;
  align-items: start;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
}

.um-contact-company__row:last-child {
  border-bottom: none;
}

.um-contact-company__label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  padding-top: 4px;
}

.um-contact-company__value {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink2, #3a342b);
}

.um-contact-pill {
  display: inline-block;
  padding: 3px 10px;
  background: var(--paper2, #efe9d7);
  border: 1px solid var(--bz2, #a88955);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bz1, #8b6f3d);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {
  .um-contact-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 20px;
  }
  .um-contact-btn {
    justify-content: center;
    width: 100%;
  }
  .um-faq__q {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    font-size: 17px;
  }
  .um-faq__a {
    padding-left: 32px;
  }
  .um-contact-company {
    padding: 20px 22px;
  }
  .um-contact-company__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   TYPOGRAPHY POLISH (Session 8 — pre-Dr-Freiberg review)
   ------------------------------------------------------------
   1. Default <ul> bullets •  →  ">" (mono, bronze)
   2. <strong> / <b>  →  weight 600, ink2 color (#3a342b, warm 82% black)
   3. Roman numerals in headings → grid-aligned baseline
   4. Section meta number — tighter dot spacing
   ------------------------------------------------------------
   Appended at end of foundations.css → wins cascade.
   ============================================================ */

/* === 1. LIST BULLETS — replace default • with bronze ">" === */

/* Nested <ul> — switch to subtle mid-dot */

/* === 2. SOFTER BOLD — weight 600 + ink2 (~82% warm black) === */

/* Reset any inline-style font-weight overrides */

/* === 3. ROMAN NUMERAL ALIGNMENT in inline headings === */
/* For headings using <span class="um-roman">I</span> — Title pattern */

/* For wider Roman numerals (VIII, XII) - use wider column */

/* === 4. EM-DASH in headings — bronze accent === */

/* === 5. SECTION META NUMBER SPACING === */

/* Section meta dt small caps polish */

/* === 6. FORCE BLACK TEXT (#000) NOWHERE === */
/* Catch any hardcoded black text — convert to ink2 */

/* ============================================================
   TYPOGRAPHY REDESIGN — Cormorant titles + Mono subtitles
   (Session 8 — pre-Dr-Freiberg review)
   ------------------------------------------------------------
   Logic:
   - H1, H2 (page + section titles) → stay Cormorant (brand)
   - H3 (subsection) → switch to IBM Plex Mono UPPERCASE
   - H4 (smaller subtitle) → smaller IBM Plex Mono UPPERCASE
   - <strong> first-child of <p> in section body → mono uppercase
     (matches "Classical Conception of Memory Requirements –
     Summary" subtitle pattern)
   - Bonus A: fix Roman gap from prior patch (revert min-width)
   - Bonus B: tighter line-spacing on mono labels for legibility
   ============================================================ */

/* === A. ROMAN GAP FIX — revert aggressive min-width === */

/* === B. H3 → IBM Plex Mono UPPERCASE === */

.um-h3,

/* em inside h3 — no italic (mono doesn't italic well), bronze accent */
.um-h3 em,
h3.um-h3 em {
  font-style: normal;
  font-family: inherit;
  color: var(--bz1, #8b6f3d);
  font-weight: inherit;
}

/* Roman numeral in h3 — bronze, slightly wider spacing */

/* === C. H4 → smaller Mono UPPERCASE === */

.um-h4,

/* === D. Subtitle pattern — <strong> first-child of <p> in section body === */
/* Matches: <p><strong>Classical Conception of Memory Requirements</strong>
   – <em>Summary</em></p> */

/* The "– Summary" em after the subtitle strong — softer, slightly bigger */

/* === E. Don't re-style strong INSIDE h3/h4 (they're already mono) === */

.um-h3 strong,
.um-h4 strong,
h3.um-h3 strong,
h4.um-h4 strong {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* === F. Inline strong inside body text — keep soft (from prior patch) === */
/* Only when NOT a first-child subtitle pattern */

/* === G. Subhead in modules (e.g., um-mp-subhead, um-reg-subhead) === */
/* These are already styled, ensure they use Cormorant — keep elegance */

.um-mp-subhead h3,
.um-reg-subhead {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  text-transform: none;
  letter-spacing: normal;
}

/* ============================================================
   UM ROMAN LIST ALIGN — CSS (Session 8)
   ------------------------------------------------------------
   Companion CSS to um-roman-list-align.js
   Grid columns: bullet 22px / Roman 48px / dash 14px / text 1fr
   ============================================================ */

/* List that got the .um-list--roman class auto-applied via JS */
.um-list--roman {
  list-style: none;
  padding-left: 0;
  margin: 14px 0 18px;
}

/* Individual <li> with .um-li--roman — grid layout */
.um-li--roman {
  display: grid;
  grid-template-columns: 22px 48px 14px 1fr;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
  line-height: 1.65;
  padding-left: 0;
  position: relative;
}

/* Override the global bullet ::before from previous patch — handled by .um-list--roman li::before now */
.um-list--roman .um-li--roman::before {
  content: ">";
  position: static;
  display: block;
  color: var(--bz2, #a88955);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.92em;
  font-weight: 500;
  line-height: 1.65;
  padding-left: 0;
}

/* Roman numeral — mono bronze, fixed column */
.um-li-rn {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.65;
}

/* Em-dash separator — soft bronze */
.um-li-dash {
  color: var(--bz2, #a88955);
  text-align: center;
  line-height: 1.65;
  font-family: var(--read, Georgia, serif);
}

/* Text part — Newsreader body, aligned at fixed x */
.um-li-text {
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  color: var(--ink2, #3a342b);
  line-height: 1.65;
}

/* Mobile — reduce Roman column, keep aligned */
@media (max-width: 800px) {
  .um-li--roman {
    grid-template-columns: 18px 38px 12px 1fr;
    gap: 6px;
  }
  .um-li-rn {
    font-size: 12px;
  }
}

/* ============================================================
   TYPOGRAPHY SWEEP (Session 8) — catch-all for missed elements
   ------------------------------------------------------------
   Addresses:
   1. H2/H3/H4 with Roman child (e.g., "I — Title", "II — Title")
      → Mono UPPERCASE (System page "I — Increase in the Capacity")
   2. Inline <strong> first-child of <li> (e.g., "USTM:", "LTM:")
      → Mono UPPERCASE (Memory page "Ultra-short-term memory (USTM)")
   3. Don't double-style strong inside already-mono headings
   ============================================================ */

/* === 1. H2/H3/H4 with Roman child → Mono UPPERCASE === */

/* Roman inside these headings — bronze accent, no italic */

/* Em inside these mono headings — bronze, no italic */

/* Strong inside these mono headings — inherit (don't double-style) */

/* === 2. <strong> first-child of <li> → Mono UPPERCASE === */
/* Pattern: <li><strong>Ultra-short-term memory (USTM):</strong> retention for...</li> */

/* Em following the strong (e.g., " – Summary" italic accent) — keep Newsreader */

/* === 3. Reinforce existing inline strong patterns (catch any holdouts) === */
/* p > strong:first-child — same treatment */

/* === 4. Mid-text strong (NOT first-child) — keep soft Newsreader bold === */
/* Catches "Twofold within seven days" type inline emphasis */

/* ============================================================
   .um-module__head FIX (Session 8 — final typo patch)
   ------------------------------------------------------------
   Klasa .um-module__head je do sada koristila var(--serif) (Cormorant)
   eksplicitno. To je razlog što su podnaslovi na System stranici
   (i drugdje gdje se ova klasa koristi) ostali u staroj Cormorant
   font dok su drugi elementi bili konvertovani u Mono.
   
   Ovaj override mijenja samo font-properties — zadržava layout
   (margin, padding, border-bottom) za vizuelni kontinuitet.
   ============================================================ */

.um-module__head {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #1a1814);
  /* layout properties zadržane */
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

/* em (italic akcenat) unutar — pretvori u bronze normal */
.um-module__head em {
  font-style: normal;
  color: var(--bz1, #8b6f3d);
  font-family: inherit;
}

/* strong unutar — pretvori u inherit (nemoj da bude dva puta bold) */
.um-module__head strong {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* ============================================================
   UM EDITORIAL BLOCK (Session 8 final)
   ------------------------------------------------------------
   Transforms h3.um-h3 with Roman pattern ("I — Title") into
   editorial 2-column block: big Roman side panel + content body.
   
   No em-dash needed — Roman is in its own "channel".
   Paired with um-section-editorial JS (auto-detects + wraps).
   ============================================================ */

.um-block-editorial {
  background: var(--paper4, #fdfaf1);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 80px 1fr;
  overflow: hidden;
}

.um-block-editorial__side {
  background: var(--paper2, #efe9d7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  border-right: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
}

.um-block-editorial__rn {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 24px;
  font-weight: 500;
  color: var(--bz1, #8b6f3d);
  letter-spacing: 0.06em;
  line-height: 1;
}

.um-block-editorial__body {
  padding: 18px 22px;
  min-width: 0;
}

.um-block-editorial__body > h3.um-h3 {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #1a1814);
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  line-height: 1.45;
  display: block;
}

.um-block-editorial__body > h3.um-h3::before,
.um-block-editorial__body > h3.um-h3::after {
  content: none;
}

.um-block-editorial__body > *:not(h3) {
  margin-left: 0;
  margin-right: 0;
}

.um-block-editorial__body > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .um-block-editorial {
    grid-template-columns: 1fr;
  }
  
  .um-block-editorial__side {
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  }
  
  .um-block-editorial__rn {
    font-size: 18px;
  }
}

/* ============================================================
   SYSTEM PAGE — Option C: Banner Header
   ------------------------------------------------------------
   Targets exact known classes from um-module and um-section
   partials. No EJS changes. Sidebar untouched.
   
   - um-module__head    → paper2 banner with mono uppercase

/* === Banner header (paper2 bg + bronze underline + mono uppercase) === */

.um-module__head {
  background: var(--paper2, #efe9d7);
  padding: 14px 22px;
  margin: 0;
  border-bottom: 2px solid var(--bz1, #8b6f3d);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #1a1814);
  display: flex;
  align-items: baseline;
  gap: 14px;
  line-height: 1.4;
}

/* Roman in banner — bigger, bronze, normal (not italic) */

/* === Module rows — flex, hide code, days mono === */

.um-module__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 14.5px;
  color: var(--ink2, #3a342b);
  line-height: 1.6;
}

.um-module__row:last-child {
  border-bottom: none;
}

/* HIDE the Roman code column from tables */
.um-module__row .um-module__code {
  display: none;
}

/* Days — mono uppercase, no wrap */
.um-module__row .um-module__days {
  white-space: nowrap;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3, #6b6253);
  flex-shrink: 0;
}

/* === 2.3 System Comparison — h3 with Roman gets same banner === */

/* === Mobile === */

@media (max-width: 800px) {
  .um-module__head {
    padding: 12px 16px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    gap: 10px;
  }
  
  
  .um-module__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 16px;
  }
  
  
}

/* ============================================================
   SYSTEM PAGE — Width alignment fix
   ------------------------------------------------------------
   Constrain modules and 2.3 banner h3 to match paragraph
   reading width. Aligns left + right edges of all content
   in section body.
   ============================================================ */

/* ============================================================
   SYSTEM PAGE — Module alignment with body column
   ------------------------------------------------------------
   .um-module is a SIBLING of um-section, not inside body.
   It has padding-left: 256px (old CSS, sidebar offset).
   This makes the box span full page width while content starts
   at body column. Result: paper2 banner background extends
   further left/right than paragraph text.
   
   Fix: shift box itself to start at body column (margin-left)
   and remove padding so banner background aligns with text.
   ============================================================ */

.um-module {
  margin-left: 256px !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .um-module {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
.um-signature__name {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  color: var(--ink, #1a1814);
  font-style: italic;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

@media (max-width: 800px) {
  .um-breadcrumb__inner {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  .um-breadcrumb__sep { display: none; }
  .um-figure__img { height: 200px; }
  .um-figure__caption {
    flex-direction: column;
    gap: 6px;
  }
}

/* ============ BREADCRUMB ============ */
.um-breadcrumb {
  background: var(--paper, #f5f2ea);
  border-bottom: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  padding: 12px 32px;
}
.um-breadcrumb__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.um-breadcrumb__link {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordo, #962e1f);
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
}
.um-breadcrumb__link:hover {
  border-bottom: 1px solid var(--bordo, #962e1f);
}
.um-breadcrumb__sep {
  color: var(--bordo, #962e1f);
  opacity: 0.5;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
}

/* ============ (UM) TAG IN H1/H2 ============ */

/* ============ FIGURE ============ */
.um-figure {
  margin: 26px 0 0;
}
.um-figure__img {
  width: 100%;
  height: 320px;
  background: var(--paper2, #efe9d7);
  border: 1px solid var(--rule, rgba(139, 111, 61, 0.28));
  display: flex;
  align-items: center;
  justify-content: center;
}
.um-figure__placeholder {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink4, #a59685);
}
.um-figure__caption {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 14px;
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink2, #3a342b);
  flex-wrap: wrap;
}
.um-figure__num {
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
  letter-spacing: 0.24em;
  flex-shrink: 0;
}
.um-figure__desc {
  letter-spacing: 0.16em;
  font-weight: 400;
}

/* ============ PERFORMANCE LIST (Cormorant italic bronze multiplier) ============ */

/* ============ CLOSING + SIGNATURE ============ */
.um-closing {
  margin-top: 28px;
}
.um-signature {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft, rgba(139, 111, 61, 0.14));
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 15px;
  color: var(--ink2, #3a342b);
  line-height: 1.6;
  font-style: italic;
  max-width: 720px;
}

/* ============ BORDO VAR (osigurati) ============ */
:root {
  --bordo: #962e1f;
}

/* ============ BREADCRUMB SEPARATOR — proper vertical line ============ */
.um-breadcrumb__inner {
  align-items: center;
}
.um-breadcrumb__sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--bordo, #962e1f);
  opacity: 0.5;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  margin: 0 6px;
}

/* ============================================================
   HOME PAGE V3 — Dr Freiberg final
   ------------------------------------------------------------
   New classes / overrides:

/* ===== Sidebar label (UM) tag — bronze in mono uppercase context ===== */

/* ===== Body (UM) tag — bronze italic Cormorant ===== */

/* ===== H2 subtitle (Ultima Memoria (UM)) ===== */

/* ===== Subhead (The Public Area, The Protected Area, Memory Performance) ===== */
.um-subhead {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--bz1, #8b6f3d);
  margin: 24px 0 8px;
  letter-spacing: 0;
  line-height: 1.3;
}
.um-subhead em {
  font-style: italic;
  color: var(--bz1, #8b6f3d);
  font-weight: 500;
}

/* ===== Perf list time (days) — bronze italic Cormorant ===== */

/* ===== Breadcrumb separator — centered, short ===== */
.um-breadcrumb__inner {
  align-items: center;
}
.um-breadcrumb__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--bordo, #962e1f);
  opacity: 0.55;
  vertical-align: middle;
  margin: 0 8px;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* ===== Hero — drop vertical line below horizontal breadcrumb ===== */
/* Pomjeri border-left start malo dolje (gap 28px ispod gornje horiz. linije) */

/* ============================================================
   HOME PAGE V5 — Breadcrumb alignment + Figure visibility
   ------------------------------------------------------------
   1. Breadcrumb left-aligned with body column (not centered)
   2. Figure placeholder aggressive display rules
   ============================================================ */

/* ===== Breadcrumb — left-align text with body column ===== */
/* Body column begins at: main padding (48px) + sidebar (220px) + gap (56px) = 324px */
.um-breadcrumb {
  padding: 12px 0 !important;
}
.um-breadcrumb__inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 48px 0 324px !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

@media (max-width: 800px) {
  .um-breadcrumb__inner {
    padding: 0 48px !important;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ===== Figure placeholder — aggressive display rules ===== */
.um-figure {
  display: block !important;
  width: 100% !important;
  margin: 26px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.um-figure__img {
  display: flex !important;
  width: 100% !important;
  min-height: 320px !important;
  height: 320px !important;
  background: var(--paper2, #efe9d7) !important;
  border: 1.5px solid var(--bz2, #a88955) !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  overflow: hidden !important;
}

.um-figure__placeholder {
  display: inline-block !important;
  font-family: var(--mono, 'IBM Plex Mono', monospace) !important;
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--bz1, #8b6f3d) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.um-figure__caption {
  display: flex !important;
  align-items: baseline !important;
  gap: 24px !important;
  margin-top: 14px !important;
  font-family: var(--mono, 'IBM Plex Mono', monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink2, #3a342b) !important;
  flex-wrap: wrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   BREADCRUMB COLOR — Bordo → Bronze (bz1)
   ============================================================ */

.um-breadcrumb__link {
  color: var(--bz1, #8b6f3d) !important;
}
.um-breadcrumb__link:hover {
  color: var(--bz1, #8b6f3d) !important;
  border-bottom-color: var(--bz1, #8b6f3d) !important;
}
.um-breadcrumb__sep {
  background: var(--bz1, #8b6f3d) !important;
  color: var(--bz1, #8b6f3d) !important;
}

/* ========== UM-TAG i UM-H2-SUB — sve (UM) u bronzi ========== */

/* ========== Breadcrumb 3px gap ispod menu ========== */
.um-breadcrumb {
  margin-top: 3px !important;
  border-top: 1px solid var(--rule, rgba(139, 111, 61, 0.28)) !important;
}

/* ========== Inline lead-in (zamjenjuje subhead) ========== */
.um-leadin {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #8b6f3d !important;
  font-size: 1.18em !important;
  letter-spacing: 0 !important;
  margin-right: 0.2em !important;
}

/* ========== Breadcrumb edge-to-edge linije + 3px gap ========== */
.um-breadcrumb {
  margin-top: 3px !important;
  border-top: 1px solid rgba(139, 111, 61, 0.28) !important;
  border-bottom: 1px solid rgba(139, 111, 61, 0.28) !important;
  padding: 12px 0 !important;
  background: #f5f2ea !important;
  width: 100% !important;
}

/* ========== Breadcrumb grid — poravnanje sa hero body ========== */
.um-breadcrumb {
  margin-top: 3px !important;
  border-top: 1px solid rgba(139,111,61,0.28) !important;
  border-bottom: 1px solid rgba(139,111,61,0.28) !important;
  padding: 12px 0 !important;
  background: #f5f2ea !important;
  width: 100% !important;
}
.um-breadcrumb__grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
}
.um-breadcrumb__content {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ========== Sidebar subtitle "Ultima Memoria (UM)" (I.1) ========== */

/* ═══════════════ BREADCRUMB FINAL (mockup verzija) ═══════════════ */
.um-breadcrumb {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 3px !important;
  padding: 12px 0 !important;
  background: #f5f2ea !important;
  border-top: 1px solid rgba(139,111,61,0.28) !important;
  border-bottom: 1px solid rgba(139,111,61,0.28) !important;
  box-sizing: border-box !important;
}
.um-breadcrumb__grid {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  gap: 56px !important;
}
.um-breadcrumb__spacer { display: block !important; }
.um-breadcrumb__content {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  color: #8b6f3d !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.um-breadcrumb__sep { color: #8b6f3d !important; }

/* ═══ Perf-list — manji razmak između stavki ═══ */

/* ═══ Section broj: rimsko I + arapska cifra jasno razdvojeni ═══ */
.um-sec-roman {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.um-sec-arabic {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78em;
  font-weight: 500;
}

/* ═══ Perf-list — JAČE smanjen razmak između Twofold/Threefold/Tenfold ═══ */

/* ═══ Perf-list — JAČE smanjen razmak između Twofold/Threefold/Tenfold ═══ */

/* ═══ Perf-list — smanji razmak između (2×) i "within" ═══ */

/* ═══ um-block-head + um-numlist (System 2.2) ═══ */

/* ═══ KOREKCIJA: brojevi u Cormorant (ne mono) + header trailing rule (ne puna linija) ═══ */

/* ═══ Ukloni liniju sa stavki liste — linija SAMO na headeru ═══ */

/* ═══ Header linija ISPOD (puna širina kolone), NE pored ═══ */

/* ═══ um-mtable — Measurable tabela (2.2 / 2.4) ═══ */
.um-mtable {
  margin: 32px 0 48px;
  border-top: 1px solid rgba(139,111,61,0.28);
}
.um-mtable__head {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink, #1a1512);
  padding: 14px 0 12px;
  border-bottom: 1px solid rgba(139,111,61,0.18);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.um-mtable__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--bz1, #8b6f3d);
  min-width: 32px;
}
.um-mtable__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(139,111,61,0.1);
  font-family: var(--read, 'Newsreader', Georgia, serif);
  font-size: 16px;
  color: var(--ink, #1a1512);
}
.um-mtable__label {
  flex: 1 1 auto;
  line-height: 1.4;
}
.um-mtable__time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--bz1, #8b6f3d);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══ um-cmp-divider — Section divider (2.3) ═══ */

/* ═══ um-conc-list — Conception bullet lista (2.3) ═══ */

/* ═══ 2.2 Measurable blok — JEDINA definicija (ostaje u tekst-kolini) ═══ */

/* ============================================================
   UM-MBLOCK TABELE — JEDNO CISTO PRAVILO
   ============================================================ */

/* ============================================================
   UM-MBLOCK — KOMPLETAN NOVI BLOK (napisan od nule)
   2.2 tabele (I-IV) + 2.4 tabele (A-D)
   ============================================================ */

/* ============================================================
   UM-MBLOCK — FINALNO OD NULE (identicno Dr Freiberg)
   Gasi globalni ul>li ">" (uzrok duplog znaka)
   ============================================================ */
/* 1. ugasi globalni > na mblock listama */

/* 2. red = grid: [kod] tekst dani */

/* 3. kod A.1 bronza */

/* 4. tekst sa JEDNIM > (samo na 2.2, gdje nema koda) */
/* 2.4 (sa kodom) — bez > */

/* 5. dani odmah iza teksta */

/* ============================================================
   UM-MBLOCK TABELE — TESTIRANO U PREVIEW (2.2 + 2.4)
   Grid na nivou liste + display:contents = crte se prate.
   ============================================================ */

/* ============================================================
   UM-MBLOCK — FINAL (identicno preview-u, prelom ispod teksta)
   ============================================================ */

/* ============================================================
   UM-MBLOCK — iz preview-a (display:contents grid)
   ============================================================ */

/* ============================================================
   UM-MBLOCK — FINALNI BLOK
   ============================================================ */

/* ============================================================
   UM-MBLOCK TABELE — System 2.2 (I-IV) + 2.4 (A-D)
   Grid na nivou liste + display:contents = crte se prate.
   ============================================================ */

/* ============================================================
   SYSTEM STRANICA — JEDINI CSS (sve klase, iz preview-a)
   ============================================================ */

/* ============================================================
   SYSTEM STRANICA — JEDINI CSS
   ============================================================ */
.um-hero{display:grid;grid-template-columns:200px 1fr;gap:56px;padding:48px 0 28px;align-items:start;}
.um-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.24em;color:#8b6f3d;text-transform:uppercase;margin-bottom:18px;}
.um-h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:60px;line-height:1.04;font-weight:500;color:#1a1814;margin:0 0 20px;}
.um-h1 em{font-style:italic;color:#8b6f3d;}
.um-h1 .um-tag{color:#8b6f3d;font-style:normal;}
.um-lede{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:20px;color:#3a342b;max-width:640px;margin:0 0 28px;line-height:1.55;}
.um-section{margin-top:56px;display:grid;grid-template-columns:200px 1fr;gap:56px;align-items:start;padding-top:36px;border-top:1px solid rgba(139,111,61,0.28);}
.um-section__num{font-family:'Cormorant Garamond',Georgia,serif;font-size:64px;line-height:1;color:#8b6f3d;font-weight:500;margin-bottom:10px;}
.um-section__label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;color:#6b6253;text-transform:uppercase;line-height:1.55;}
.um-section__note{margin-top:18px;font-family:'Newsreader',Georgia,serif;font-size:13px;color:#6b6253;font-style:italic;line-height:1.55;padding-top:14px;border-top:1px solid rgba(139,111,61,0.14);}
.um-section__body{border-left:1px solid rgba(139,111,61,0.28);padding-left:48px;}
.um-h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:40px;color:#1a1814;font-weight:500;margin:0 0 20px;line-height:1.12;}
.um-h2 em{font-style:italic;color:#8b6f3d;}
.um-p{font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;line-height:1.7;margin:0 0 14px;}
.um-block-head{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#6b6253;line-height:1.25;margin:40px 0 14px;padding-bottom:6px;border-bottom:1px solid rgba(139,111,61,0.28);}
.um-numlist{list-style:none;padding:0;margin:0 0 24px;}
.um-numlist li{display:flex;gap:10px;align-items:baseline;margin-bottom:0;font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;line-height:29px;}
.um-numlist__n{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:600;color:#8b6f3d;flex-shrink:0;min-width:30px;}
.um-numlist__t{flex:1 1 auto;min-width:0;}
.um-numlist__t .um-gold-em{font-style:italic;color:#8b6f3d;}
.um-cmp-divider{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;line-height:1.25;color:#3a342b;background:#efe9d7;border:1px solid #8b6f3e;border-left:3px solid #8b6f3d;padding:10px 24px 10px 18px;margin:24px 0 18px;display:flex;align-items:baseline;gap:12px;}
.um-cmp-divider .um-roman{font-style:normal;color:#8b6f3d;font-weight:600;}
.um-conc-list{list-style:none;padding:0;margin:0 0 20px;}
/* 2.3 conception lists — bar→text gap restored; bars themselves raised closer to text above (cmp-divider margin-top 52→24) */
.um-block-head:has(.um-conc-key){ margin-top:20px !important; }
.um-conc-list{ margin-bottom:10px !important; }
/* bars II & III only: equal vertical gap above and below (above 24→20 to match the collapsed 20px below) */
#sec-comparison .um-cmp-divider ~ .um-cmp-divider{ margin-top:20px !important; }
/* bars I/II/III continuation (last segment after the final |) — underline the word(s) only, normal (not italic/bold) */
#sec-comparison .um-cmp-divider .um-cmp-cont{ border-bottom:1px solid rgba(139,111,61,0.5); padding-bottom:1px; }
/* in-text underlines in this section (1.1 numbers, "Classical Conception" keys, italic Memory/Intelligence) — identical faint section-line look + same word↔line gap as the bar */
#sec-comparison .um-conc-num,
#sec-comparison .um-conc-key,
#sec-comparison .um-conc-it{ border-bottom:1px solid rgba(139,111,61,0.5) !important; padding-bottom:1px !important; }
#sec-comparison .um-conc-key:hover{ border-bottom-color:rgba(139,111,61,0.5) !important; }
/* 2.3 — remove the full-width horizontal line under each subheading (keep only the per-word underlines above) */
#sec-comparison .um-block-head{ border-bottom:none !important; }
/* 2.3 conception numbering (1.1, 1.2 … by traka) — underline like .um-conc-key */
.um-conc-num{ color:#8b6f3d; font-weight:600; margin-right:5px; border-bottom:1px solid #8b6f3d; padding-bottom:1px; }
/* GLOBAL: all figures are lining (clean) by default — kills Cormorant's ugly old-style numerals everywhere, once and for all */
body{ font-variant-numeric: lining-nums; font-feature-settings:"lnum" 1; }
.um-conc-list>li{position:relative;padding-left:22px;margin-bottom:0;line-height:29px;font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;}
.um-conc-list>li::before{content:">";position:absolute;left:0;color:#a88955;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.92em;}
.um-conc-list ul{list-style:none;padding:0;margin:6px 0 0;}
.um-conc-list ul li{position:relative;padding-left:22px;margin-bottom:0;color:#3a342b;font-family:'Newsreader',Georgia,serif;font-size:16px;line-height:29px;}
.um-conc-list ul li::before{content:"–";position:absolute;left:0;top:0;color:#a88955;font-family:'Newsreader',Georgia,serif;font-size:16px;line-height:1.6;}

/* MBLOCK redovi — neprekidna crta (::after) */

/* 2.4 — ukloni > SAMO gdje ima kod (pobjeduje sve) */

/* MBLOCK — PROVJERENO U PREVIEW */
.um-mblock{border:1px solid #8b6f3e;margin:28px 0 0;}
/* bronze horizontal line BETWEEN the tables (mblock boxes) + extra spacing */
.um-mblock + .um-mblock{ margin-top:48px !important; position:relative; }
.um-mblock + .um-mblock::before{ content:""; position:absolute; left:0; right:0; top:-24px; height:1px; background:#8b6f3e; }
.um-mblock__head{background:#efe9d7;padding:10px 24px;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;line-height:1.25;color:#3a342b;border-bottom:1px solid #8b6f3e;display:grid!important;align-items:baseline;grid-template-columns:max-content max-content 1fr!important;column-gap:12px!important;}
.um-mblock__num{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;color:#8b6f3d;font-weight:600;flex-shrink:0;}
.um-mblock__body{padding:22px 20px 14px;background:#fdfaf1;}
/* align the head num (A / Roman I) with the body content below at the same left start */
.um-mblock__head{ padding-left:18px !important; }
.um-mblock__intro{font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;line-height:1.55;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid rgba(139,111,61,.28);}
.um-mblock__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:var(--um-txtw,600px) max-content;justify-content:start;column-gap:10px;row-gap:0;align-items:baseline;}
.um-mblock__list li{display:contents;}
.um-mblock__list:has(.um-mblock__code){grid-template-columns:max-content var(--um-txtw,600px) max-content;}
.um-mblock__code{color:#8b6f3d;font-weight:500;font-family:'Newsreader',Georgia,serif;font-size:16px;line-height:1.5;}
.um-mblock__txt{position:relative;padding-left:22px;max-width:625px;font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;line-height:1.5;}
.um-mblock__txt::before{content:">";position:absolute;left:0;color:#8b6f3d;}
.um-mblock__list li:has(.um-mblock__code) .um-mblock__txt{padding-left:0;}
.um-mblock__list li:has(.um-mblock__code) .um-mblock__txt::before{content:none;}
.um-mblock__days{white-space:nowrap;color:#6b6253;font-family:'Newsreader',Georgia,serif;font-size:16px;line-height:1.5;}
.um-mblock__sep{color:#6b6253;margin-right:10px;}
.um-mblock__list > li > span{border-bottom:1px solid rgba(139,111,61,0.16);padding-top:9px;padding-bottom:9px;}
.um-mblock__list > li:last-child > span{border-bottom:none;}

/* Ukloni crte izmedju redova (razilaze se) — ostaje samo intro crta */
.um-mblock__txt,.um-mblock__days,.um-mblock__code{border-bottom:none !important;}

/* um-meta (bocni Section/Subsections blok) — mono font, kao original */
.um-meta{font-family:'IBM Plex Mono',monospace !important;font-size:10px !important;letter-spacing:.18em !important;color:#6b6253 !important;text-transform:uppercase !important;line-height:1.8 !important;}
.um-meta dt{color:#8b6f3d !important;font-weight:500 !important;margin-top:14px !important;}
.um-meta dt:first-child{margin-top:0 !important;}
.um-meta dd{margin:0 !important;}
.um-meta dd a{display:block !important;padding:3px 0 !important;color:#6b6253 !important;text-decoration:none !important;}
.um-meta dd a:hover{color:#8b6f3d !important;}

/* Vrati vertikalnu crtu koja dijeli sidebar od sadrzaja */
.um-section__body{border-left:1px solid rgba(139,111,61,0.28) !important;padding-left:48px !important;}
.um-hero__body{border-left:1px solid rgba(139,111,61,0.28) !important;padding-left:48px !important;}

/* Naslov tabele (III, C) — drugi red pocinje ispod prve rijeci, ne ispod broja */
.um-mblock__num{grid-column:1 !important;}

/* 3px papir-razmak ispod headera + fade sadržaja ispod trake */
/* finalna traka: vidljiv 3px razmak + fade pod traku */
/* === FORCE: traka neprozirna + gornja i donja crta + neproziran 3px razmak === */

/* ===== UM SUBMENU TRAKA — JEDINI BLOK ===== */
.um-stickybar{
  position:sticky; top:0; z-index:90;
  display:none;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0 !important;
  background:var(--paper,#f5f2ea) !important;
  border-top:3px solid var(--paper,#f5f2ea) !important;
  border-bottom:1px solid var(--bz2,#a88955) !important;
  overflow:visible;
}
.um-stickybar.is-visible{ display:block; }
.um-stickybar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--bz2,#a88955) !important; z-index:1;
}
.um-stickybar::after{
  content:""; position:absolute; left:0; right:0; top:calc(100% + 1px);
  height:calc(var(--um-fade-h,40px) - 10px);
  background:var(--paper,#f5f2ea) !important;
  pointer-events:none;
}
.um-stickybar__inner{
  max-width:none; margin:0; background:transparent; border:none;
  padding:10px 15px;
  display:flex; flex-wrap:nowrap; align-items:center; gap:16px;
  white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  font-family:var(--mono,'IBM Plex Mono',monospace); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15px,#000 calc(100% - 15px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 15px,#000 calc(100% - 15px),transparent 100%);
}
.um-stickybar__inner::-webkit-scrollbar{ display:none; }
.um-stickybar__section{ flex:0 0 auto; color:var(--bz1,#8b6f3d); padding-right:12px; margin-right:4px; border-right:1px solid rgba(139,111,61,.20); }
.um-stickybar__item{ flex:0 0 auto; display:inline-flex; align-items:baseline; gap:6px; color:var(--ink3,#6b6253); text-decoration:none; padding:3px 2px; border-bottom:2px solid transparent; }
.um-stickybar__item:hover{ color:var(--bz1,#8b6f3d); }
.um-stickybar__item.is-active{ color:var(--bz1,#8b6f3d); border-bottom-color:var(--bz1,#8b6f3d); }
.um-stickybar__num{ color:var(--bz1,#8b6f3d); font-weight:500; }


/* ── Memory page — proof corrections (3 · Memory) ─────────────────── */
.um-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--bz1,#8b6f3d);margin:30px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--rule,rgba(139,111,61,.28));max-width:66ch;}
.um-emph{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:20px;line-height:1.5;font-weight:500;color:var(--bz1,#8b6f3d);margin:14px 0 18px;display:inline-block;border-bottom:1px solid rgba(139,111,61,0.5);padding-bottom:4px;}
/* 3.2 pullquote — flush left (drop the default blockquote indent); quote text 20px + bronze underline like .um-emph; wraps on mobile */
.um-pullquote{ margin-left:0 !important; padding-left:0 !important; }
.um-pullquote p .um-gold-em{ display:inline-block; font-size:20px; border-bottom:1px solid rgba(139,111,61,0.5); padding-bottom:4px; }
/* footer (source) — small, single line, sits right under the quote */
.um-pullquote p{ margin:0 0 6px !important; }
.um-pullquote footer{ font-size:13px; white-space:nowrap; margin-top:0; }
.um-stmt{font-family:'Newsreader',Georgia,serif;font-size:17px;line-height:1.6;font-weight:600;color:var(--ink,#1a1814);margin:18px 0;}
.um-quote-line{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:17px;color:var(--ink3,#6b6253);margin:14px 0 18px;}
.um-val{font-style:italic;font-weight:500;color:var(--bz1,#8b6f3d);}
.um-hl{font-weight:500;color:var(--bz1,#8b6f3d);}
.um-idx{list-style:none;margin:0 0 10px;padding:0;max-width:70ch;}
.um-idx li{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--rule-soft,rgba(139,111,61,.14));font-family:'Newsreader',Georgia,serif;font-size:16px;color:var(--ink2,#3a342b);}
.um-idx-n{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--bz1,#8b6f3d);min-width:26px;letter-spacing:.04em;padding-top:2px;}
.um-crit{margin:34px 0 0;}
.um-crit-h{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;background:var(--paper4,#fdfaf1);border-top:1px solid var(--bz2,#a88955);border-bottom:1px solid var(--bz2,#a88955);padding:12px 18px;margin:0 0 16px;}
.um-crit-r{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;font-style:normal;color:var(--bz1,#8b6f3d);}
.um-crit-sep{color:var(--bz2,#a88955);font-size:18px;}
.um-crit-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;color:var(--ink,#1a1814);}
.um-conc{margin:0 0 16px;}
.um-conc-l{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink,#1a1814);padding-bottom:6px;border-bottom:1px solid var(--rule,rgba(139,111,61,.28));margin-bottom:9px;}
.um-conc-s{color:var(--bz1,#8b6f3d);}


/* MEM-FIX3 — Memory: isti ">" marker kao System (.um-conc-list) + header kriterija inline */
/* sve liste u Memory body-ju (3.1–3.4) i u razradama */
.um-list{list-style:none;padding:0;margin:0 0 18px;}
.um-list>li{position:relative;padding-left:22px;margin-bottom:8px;line-height:1.6;font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;}
.um-list>li::before{content:">";position:absolute;left:0;color:#a88955;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.92em;}
.um-conc .um-list>li::before{content:">";position:absolute;left:0;color:#a88955;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.92em;}

/* header kriterija: rimski broj + | + naslov u jednom toku (kao .um-cmp-divider) */
.um-crit-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:#fdfaf1;border-top:1px solid #a88955;border-bottom:1px solid #a88955;padding:14px 22px;margin:34px 0 16px;}
.um-crit-r{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;font-style:normal;color:#8b6f3d;flex-shrink:0;}
.um-crit-sep{color:#a88955;font-size:18px;flex-shrink:0;}
.um-crit-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;color:#1a1814;}

/* MEM-FIX4 — header kriterija u jednom redu; naslov se prelama ispod prve rijeci */
.um-crit-h{display:flex;flex-wrap:nowrap;align-items:baseline;gap:10px;background:#fdfaf1;border-top:1px solid #a88955;border-bottom:1px solid #a88955;padding:14px 22px;margin:34px 0 16px;}
.um-crit-r{flex:0 0 auto;font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;font-style:normal;color:#8b6f3d;}
.um-crit-sep{flex:0 0 auto;color:#a88955;font-size:18px;}
.um-crit-t{flex:1 1 auto;min-width:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;color:#1a1814;}
.um-conc-s{color:inherit !important;}

/* MEM-FIX5 — boje po proofu: podnaslovi INK (ne bronza); definicijski termini bronza italic */
.um-sub{color:#1a1814 !important;}
.um-term{font-style:italic;color:#8b6f3d;}
.um-list em{color:inherit;}

/* HOME-FIX1 — (UM) italic uz italic "Ultima Memoria"; broj "1" sa kvakom (Newsreader) */
.um-tag--it{font-style:italic !important;}
.um-section__num{font-family:'Newsreader',Georgia,serif !important;}

/* HOME-FIX2 — (UM) prati boju/stil "Ultima Memoria"; potpis = body; slika velika bez okvira */
/* (UM) nasljeđuje kontekst (boja+stil) — osim uz italic "Ultima Memoria" gdje je bronza italic */
.um-tag{color:inherit !important;font-style:inherit !important;}
.um-label-tag{color:inherit !important;font-style:inherit !important;}
.um-tag--it{color:#8b6f3d !important;font-style:italic !important;}
/* ④ potpis = ista veličina i forma kao body (.um-p) */
.um-signature{font-family:'Newsreader',Georgia,serif !important;font-size:16px !important;color:#1a1814 !important;font-style:normal !important;line-height:1.7 !important;}
.um-signature__name{font-family:'Newsreader',Georgia,serif !important;font-size:16px !important;color:#1a1814 !important;font-style:normal !important;font-weight:400 !important;margin-top:0 !important;}
/* Figure I — velika slika, bronzani okvir nevidljiv */
.um-figure__img{height:auto !important;min-height:0 !important;border:0 !important;background:transparent !important;display:block !important;overflow:visible !important;padding:0 !important;}
.um-figure__img img{width:100% !important;height:auto !important;display:block !important;}

/* BRAND-FIX — (UM) u logu (header+footer) bronza italic kao "Memoria"; perf-list ">" marker + bronza italic vrijednosti */
.um-brand .um-tag{font-style:italic !important;color:var(--bz1,#8b6f3d) !important;}
.um-footer__logo .um-tag{font-style:italic !important;color:var(--bz1,#8b6f3d) !important;}
/* performance lista: bronzani ">" marker (kao ostale liste) umjesto tačaka */
.um-perf-list{list-style:none !important;padding:0 !important;margin:0 0 24px !important;}
.um-perf-list>li{position:relative;padding-left:22px;margin-bottom:10px;line-height:1.6;font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;}
.um-perf-list>li::before{content:">";position:absolute;left:0;color:#a88955;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.92em;}
.um-perf-list__mult{font-style:italic;color:#8b6f3d;}
.um-perf-list__time{font-style:italic;color:#8b6f3d;}

/* HOME-FIX3 — bez breadcrumb linije, hero dignut do fadea, slika viša (banner) */
.um-hero--home{padding-top:14px !important;}
.um-figure__img{height:500px !important;min-height:500px !important;border:0 !important;background:transparent !important;display:block !important;overflow:hidden !important;padding:0 !important;}
.um-figure__img img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}

/* ANCHOR-FIX — klik u sidebaru ne reže naslov ispod sticky submenija + fade (sve stranice) */
html{scroll-padding-top:180px !important;}
.um-section, .um-hero{scroll-margin-top:180px !important;}

/* ============================================================
   HOME BODY TEXT TEST — .um-p 16px → 20px (prored 1.55)
   Test veličine teksta poslije naslova. Ne dira lede/H2/perf/potpis.
   ============================================================ */
.um-p {
  font-size: 20px !important;
  line-height: 1.55 !important;
}

/* ============================================================
   LARGE-SCREEN SCALING — širi sadržaj na 32"+ monitorima
   ============================================================ */
@media (min-width: 1600px){
  :root{ --content-max: 1400px; }
}
@media (min-width: 2000px){
  :root{ --content-max: 1640px; }
  .um-h1{ font-size: 72px; }
  .um-h2{ font-size: 48px; }
  .um-p{ font-size: 19px; }
  .um-lede{ font-size: 23px; }
}

/* ============================================================
   LARGE-SCREEN SCALING — 32" monitori (širi sadržaj + krupnije)
   ============================================================ */
@media (min-width: 1500px){
  :root{ --content-max: 1340px; }
}
@media (min-width: 1750px){
  :root{ --content-max: 1500px; }
  .um-h1{ font-size: 68px; }
  .um-h2{ font-size: 46px; }
  .um-lede{ font-size: 22px; }
  .um-p{ font-size: 18px; }
}
@media (min-width: 2200px){
  :root{ --content-max: 1680px; }
}

/* ============================================================
   HERO WIDEN v2 — hero lede prati širinu na velikim ekranima
   ============================================================ */
@media (min-width: 1280px){
  .um-lede{ max-width: 780px; }
}
@media (min-width: 1500px){
  .um-lede{ max-width: 860px; font-size: 22px; }
  .um-h1{ font-size: 68px; }
}
@media (min-width: 1750px){
  .um-lede{ max-width: 940px; font-size: 24px; }
  .um-h1{ font-size: 74px; }
}

/* ============================================================
   JUSTIFIED TEXT — tekst poravnat u blok (kao u novinama)
   ============================================================ */
.um-lede,
.um-p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ============================================================
   LEDE JUSTIFY FIX — uvodni tekst u blok (pobjeđuje sve)
   ============================================================ */
.um-hero .um-lede,
.um-lede {
  text-align: justify !important;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ============================================================
   FIGURE ALIGN — banner slika prati širinu teksta (lede)
   ============================================================ */
.um-figure{
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
}
@media (min-width: 1280px){ .um-figure{ max-width: 780px; } }
@media (min-width: 1500px){ .um-figure{ max-width: 860px; } }
@media (min-width: 1750px){ .um-figure{ max-width: 940px; } }

/* ============================================================
   BRAND (UM) — isto kao "Ultima": crna, Cormorant, uspravno
   (header + footer)
   ============================================================ */
.um-brand .um-tag,
.um-footer__logo .um-tag{
  color: var(--ink, #1a1814) !important;   /* ista crna kao "Ultima" */
  font-style: normal !important;            /* uspravno, NE italic */
  font-family: var(--serif), 'Cormorant Garamond', Georgia, serif !important;
}

/* ============================================================
   BRAND TAG — "(UM)" → "| UM" (bez zagrada, vertikalna crta, ravan space)
   header + footer
   ============================================================ */
.um-brand .um-tag,
.um-footer__logo .um-tag{
  font-size: 0 !important;                 /* sakrij stari tekst "(UM)" */
}
.um-brand .um-tag::before,
.um-footer__logo .um-tag::before{
  content: "|\00a0UM";
  font-size: 26px;
  color: var(--ink, #1a1814);
  font-style: normal;
  font-family: var(--serif), 'Cormorant Garamond', Georgia, serif;
  margin-left: 2px;
}

/* ============================================================
   MAIN NAV — glavni meni (System/Memory/Method...) na 15px
   ============================================================ */
.um-nav__link{
  font-size: 15px !important;
}

/* ============================================================
   HEADER MENU TWEAKS — veličine, boja, poravnanje sa "Welcome"
   ============================================================ */
/* 1. glavni meni: 12px + bronza (kao "Memoria") */
.um-nav__link{
  font-size: 12px !important;
  color: var(--bz1, #8b6f3d) !important;
}
/* 2. Apply: 15px */
.um-nav__apply{
  font-size: 15px !important;
}
/* 3. ikonice (globus/lupa/login): malo veće */
.um-nav__icons{
  font-size: 18px !important;
}
/* 4. "System" poravnat sa početkom "Welcome" (logo-zona = 200 + 56) */
@media (min-width: 1100px){
  .um-brand{ flex: 0 0 256px !important; width: 256px !important; }
  .um-topbar__nav-left{ margin-left: 0 !important; }
}

/* ============================================================
   NAV ALIGN — "System" tačno ispod "Welcome" (mjereno: +49px)
   ============================================================ */
.um-topbar__nav-left{
  margin-left: 49px !important;
}

/* ============================================================
   NAV-RIGHT — vertikalne crte: Apply │ globus │ lupa │ login
   ============================================================ */
/* veći razmak između ikona */
.um-nav__icons{
  gap: 18px !important;
  margin-left: 18px !important;
}
/* crta PRIJE ikona (poslije Apply) */
.um-nav__icons{
  border-left: 1px solid var(--bz2, #a88955);
  padding-left: 18px;
}
/* crta između svake ikone (prije svake osim prve) */
.um-nav__icons a + a{
  border-left: 1px solid var(--bz2, #a88955);
  padding-left: 18px;
}

/* ============================================================
   APPLY normalna težina + hover linija na svim nav stavkama
   ============================================================ */
/* 1. Apply: skini bold, boja ostaje ista */
.um-nav__apply{
  font-weight: 400 !important;
}

/* 2. nav linkovi: rezerviši mjesto za liniju (da nema skoka) */
.um-nav__link{
  border-bottom: 1px solid transparent !important;
}
/* 3. hover na System/Memory/Method... → ista linija kao aktivna */
.um-nav__link:hover{
  color: var(--bz1) !important;
  border-bottom: 1px solid var(--bz1) !important;
}

/* 4. Apply: linija na hover (kremasta, da se vidi na bronzi); bez promjene boje table */
.um-nav__apply{
  border-bottom: 1px solid transparent;
}
.um-nav__apply:hover{
  border-bottom: 1px solid #fff7e0 !important;
  transform: none !important;
}

/* ============================================================
   APPLY = isto kao System (bronza linija, bez bold, bez promjene boje)
   ============================================================ */
.um-nav__apply,
.um-nav__apply:hover{
  background: none !important;
  color: var(--bz1,#8b6f3d) !important;
  font-weight: 400 !important;
  transform: none !important;
}
.um-nav__apply{ border-bottom: 1px solid transparent !important; }
.um-nav__apply:hover{ border-bottom: 1px solid var(--bz1,#8b6f3d) !important; }

/* ============================================================
   AKTIVNA STAVKA — ostaje podvučena (zna se gdje si)
   ============================================================ */
.um-nav__link.is-active{
  color: var(--bz1,#8b6f3d) !important;
  border-bottom: 1px solid var(--bz1,#8b6f3d) !important;
}

/* ============================================================
   RESPONSIVE — srednji ekrani (981–1499px) da se header ne kupi
   ============================================================ */
@media (min-width:981px) and (max-width:1499px){
  .um-topbar__nav-left{ gap: 16px !important; }
  .um-nav__link{ font-size: 11px !important; letter-spacing: .10em !important; }
  .um-nav__apply{ font-size: 12px !important; }
  .um-nav__icons{ font-size: 15px !important; gap: 12px !important; margin-left: 12px !important; padding-left: 12px !important; }
  .um-nav__icons a + a{ padding-left: 12px !important; }
}

/* ============================================================
   APPLY — ista veličina kao System (12px)
   ============================================================ */
.um-nav__apply{ font-size: 12px !important; }

/* ============================================================
   BRAND SUB — "Foundations of the Intellect": širina = logo,
   ravnomjeran razmak slova, 3px niže
   ============================================================ */
.um-brand__sub{
  display: block !important;
  width: 100% !important;            /* prati širinu loga (Ultima Memoria | UM) */
  margin-top: 7px !important;        /* bilo ~4px → spušteno 3px niže */
  text-align: justify !important;    /* ravnomjerno raspoređeno po širini */
  text-align-last: justify !important;
}

/* ============================================================
   APPLY = ista veličina kao System na svim ekranima
   ============================================================ */
@media (min-width:981px) and (max-width:1499px){
  .um-nav__apply{ font-size: 11px !important; }   /* = System na ovom rasponu */
}

/* ============================================================
   BRAND SUB — širina = logo (221px), razmak po SLOVIMA, 3px niže
   ============================================================ */
@media (min-width:981px){
  .um-brand__sub{
    display: block !important;
    width: auto !important;            /* poništi raniji width:100% */
    margin-top: 7px !important;        /* 3px niže od loga */
    letter-spacing: 0.333em !important;/* slova raširena da sub == širina loga */
    text-align: left !important;       /* NE justify (to je bilo po riječima) */
    text-align-last: auto !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   SUB — smanji razmak između RIJEČI (ne slova) + Apply bliže crti
   ============================================================ */
@media (min-width:981px){
  .um-brand__sub{
    letter-spacing: 0.333em !important;   /* razmak slova ostaje (dobar je) */
    word-spacing: -0.30em !important;      /* smanji razmak IZMEĐU RIJEČI */
  }
}
/* Apply bliže vertikalnoj crti */
.um-nav__icons{
  margin-left: 10px !important;
  padding-left: 10px !important;
}

/* ============================================================
   ISPRAVKA — vrati crte/ikone kako su bile + samo Apply udesno
   ============================================================ */
/* 1. vrati .um-nav__icons na prethodne vrijednosti (NE diramo crte) */
.um-nav__icons{
  margin-left: 18px !important;
  padding-left: 18px !important;
}
/* 2. SAMO Apply primakni vertikalnoj crti (margina desno od Apply) */
.um-nav__apply{
  margin-right: 14px !important;
}

/* ============================================================
   NAV-RIGHT FINAL — jedan ujednačen razmak (16px) oko svake crte
   Apply │ globus │ lupa │ login  —  sve kao jedna cjelina
   ============================================================ */
.um-topbar__nav-right{ gap: 0 !important; }

/* Apply: prostor do prve crte (i poništi staro guranje) */
.um-nav__apply{
  margin-right: 0 !important;
  padding-right: 16px !important;
}

/* crta poslije Apply + jednak prostor do prve ikone */
.um-nav__icons{
  gap: 0 !important;
  margin-left: 0 !important;
  border-left: 1px solid var(--bz2,#a88955) !important;
  padding-left: 16px !important;
}

/* svaka ikona jednak prostor; crta između ikona */
.um-nav__icons a{ padding: 0 16px !important; }
.um-nav__icons a:first-child{ padding-left: 0 !important; }
.um-nav__icons a:last-child{ padding-right: 0 !important; }
.um-nav__icons a + a{
  border-left: 1px solid var(--bz2,#a88955) !important;
  padding-left: 16px !important;
}

/* ============================================================
   SUBMENU — sadržaj počinje na vertikalnoj liniji tijela (kao "Welcome")
   ============================================================ */
@media (min-width:981px){
  .um-stickybar__inner{
    max-width: var(--content-max) !important;
    margin: 0 auto !important;
    padding-left: var(--content-pad-x) !important;
    padding-right: var(--content-pad-x) !important;
  }
}

/* aktivna linija u submenuu = ista debljina kao glavni meni (1px) */
.um-stickybar__item{ border-bottom-width: 1px !important; }

/* ============================================================
   SIDEBAR META — standard za sve stranice
   (SECTION/SUBSECTIONS + fiksna linija + 12px + word-wrap)
   ============================================================ */

/* 1. font 12px (kao submenu) */
.um-meta{ font-size: 12px !important; }
.um-meta dd a, .um-meta-link{ font-size: 12px !important; }

/* 2. SECTION i SUBSECTIONS naslovi (dt) — fiksna bronzana linija ispod */
.um-meta dt{
  display: block !important;
  color: var(--bz1,#8b6f3d) !important;
  font-weight: 500 !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--bz1,#8b6f3d) !important;  /* FIKSNA linija (uvijek) */
}
.um-meta dt:first-child{ margin-top: 0 !important; }

/* 3. word-wrap: drugi red ispod RIJEČI, ne ispod broja (hanging indent) */
.um-meta dd a, .um-meta-link{
  display: block !important;
  padding: 4px 0 4px 2.6em !important;   /* prostor za broj */
  text-indent: -2.6em !important;         /* prvi red (broj) povučen nazad */
  line-height: 1.4 !important;
}
/* broj "1.1" da ne lomi indent */
.um-meta-num{ display: inline-block !important; }

/* ============================================================
   HOME — spusti hero 34px (14→48) da SECTION izađe ispod fadea
   i da se poravna sa System (SECTION 156, eyebrow 144)
   Samo Home (.um-hero--home) — ostale stranice netaknute
   ============================================================ */
.um-hero--home{
  padding-top: 48px !important;
}

/* ============================================================
   v=33 — SIDEBAR (.um-meta) PORAVNANJE
   1) vrh sidebara = eyebrow (ukloni margin-top)
   2) word-wrap: prelomljena rijec TACNO ispod prve rijeci (0px)
   3) broj na rub kolone (ukloni dvostruki text-indent)
   4) bronzane crte ispod SECTION/SUBSECTIONS viru 28px lijevo (iza brojeva)
   ============================================================ */
.um-meta{ margin-top:0 !important; }
.um-meta-num{ text-indent:0 !important; }
.um-meta dd a, .um-meta-link{ padding-left:3.05em !important; text-indent:-3.05em !important; }
.um-meta dt{ width:calc(100% + 28px) !important; margin-left:-28px !important; padding-left:28px !important; }

/* v=33 — SUBMENU (stickybar) brojevi normalni (ne bold), kao "1 HOME" */
.um-stickybar__num{ font-weight:400 !important; }

/* v=33 — EYEBROW kao SECTION + crta (+50px), sve stranice */
.um-eyebrow{
  font-size:12px;
  font-weight:500;
  letter-spacing:2.16px;
  display:inline-block;
  border-bottom:1px solid var(--bz1,#8b6f3d);
  padding-bottom:3.2px;
  padding-right:50px;
}

/* v=33 — SUBMENU brojevi: ista boja kao rijeci (inherit) -> na hover oboje bronza; tezina 400 */
.um-stickybar__num{ font-weight:400 !important; color:inherit !important; }

/* v=33 — veliki brojevi sekcija (.um-section__num): iskljuci bold (tezina 250), velicina ostaje 64px */
.um-section__num{ font-weight:250 !important; }

/* v=33 — section label 12px + note 16px (note ostaje italic) */
.um-section__label{ font-size:12px !important; }
.um-section__note{ font-size:16px !important; }

/* v=33 — footer logo identican headeru (glavni tekst crn, ne siv) */
.um-footer__logo .um-brand{ color:#1a1814 !important; }

/* v=33 — horizontalne crte sekcija (0.20) iste kao male crte unutar teksta */
.um-section{ border-top-color: rgba(139,111,61,0.20) !important; }

/* v=33 — eyebrow + SECTION/SUBSECTIONS crte IDENTICNE vertikalnom separatoru (1px solid bronza 0.28) */
.um-eyebrow{ border-bottom: 1px solid rgba(139,111,61,0.28) !important; }
.um-meta dt{ border-bottom: 1px solid rgba(139,111,61,0.28) !important; }

/* v=33 — section label: ljepse prelamanje (balance + tjesnji razmak slova) */
.um-section__label{ text-wrap:wrap; letter-spacing:0.10em !important; }

/* v=33 FINAL — section label: lomi se SAMO na <br> (nikad sam), tjesnji razmak */
.um-section__label{ white-space:nowrap !important; letter-spacing:0.02em !important; }

/* v=33 — tekst prati ISTI box kao lede/slika (responsivno 640/780/860/940) */
.um-p, .um-mblock__intro{ max-width:640px !important; }
@media (min-width:1280px){ .um-p, .um-mblock__intro{ max-width:780px !important; } }
@media (min-width:1500px){ .um-p, .um-mblock__intro{ max-width:860px !important; } }
@media (min-width:1750px){ .um-p, .um-mblock__intro{ max-width:940px !important; } }

/* v=33 — naslovi prate ISTI box kao tekst/slika (nista ne prelazi) */
.um-h2, .um-block-head, .um-mblock__head{ max-width:640px !important; }
@media (min-width:1280px){ .um-h2, .um-block-head, .um-mblock__head{ max-width:780px !important; } }
@media (min-width:1500px){ .um-h2, .um-block-head, .um-mblock__head{ max-width:860px !important; } }
@media (min-width:1750px){ .um-h2, .um-block-head, .um-mblock__head{ max-width:940px !important; } }

/* v=33 — sidebar podsekcije: ujednacen razmak + indent u ch (monospace) da prelom pocinje ispod prve rijeci */
.um-meta dd a, .um-meta-link{ letter-spacing:0 !important; padding-left:4ch !important; text-indent:-4ch !important; }
.um-meta-num{ text-indent:0 !important; }

/* v=33 — hover linija na sidebar podsekcijama (isto kao menu/submenu) */
.um-meta dd a, .um-meta-link{ border-bottom:1px solid transparent; }
.um-meta dd a:hover, .um-meta-link:hover{ color:var(--bz1,#8b6f3d) !important; border-bottom:1px solid var(--bz1,#8b6f3d) !important; }

/* v=33 — sidebar hover linija: width:fit-content da border prati tekst (ne cijelu kolonu) */
.um-meta dd a, .um-meta-link{
  width: fit-content !important;
  border-bottom: 1px solid transparent !important;
}
.um-meta dd a:hover, .um-meta-link:hover{
  color: var(--bz1,#8b6f3d) !important;
  border-bottom: 1px solid var(--bz1,#8b6f3d) !important;
}

/* v=33 — hover linija sidebar na SVIM stranicama */
/* System: bare <a> u dd (bez klase); Home: <a class="um-meta-link"> */
/* Oba selektora, !important, dolaze ZADNJI u kaskadi */
.um-meta dd a:not(:hover), .um-meta-link:not(:hover){
  border-bottom: 1px solid transparent !important;
}
.um-meta dd a:hover, .um-meta-link:hover{
  color: var(--bz1,#8b6f3d) !important;
  border-bottom: 1px solid var(--bz1,#8b6f3d) !important;
}

/* v=33 — Memory Performance lista: velicina kao paragraf + oznake S2/S3/S10 */
.um-perf-list>li{ font-size:20px !important; }
.um-perf-tag{ color:#3a342b !important; font-weight:400 !important; }

/* v=33 — Memory Performance: vertikalno centriraj marker */
.um-perf-list>li::before{ line-height:1.6 !important; top:0 !important; }

/* v=33 — To-top: prati box teksta (640/780/860/940), poravnato sa tijelom */
html{ scroll-behavior:smooth; }
.um-to-top{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:56px;
  margin-top:48px;
  margin-bottom:0;
  padding-top:36px;
  border-top:1px solid rgba(139,111,61,0.20);
}
.um-to-top__spacer{ display:block; }
.um-to-top__link{
  display:block;
  max-width:640px;
  text-align:center;
  border:1px solid var(--bz2,#a88955);
  padding:14px 24px;
  color:var(--bz1,#8b6f3d);
  text-decoration:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.um-to-top__link:hover{ background:rgba(139,111,61,.06); }
@media (min-width:1280px){ .um-to-top__link{ max-width:780px; } }
@media (min-width:1500px){ .um-to-top__link{ max-width:860px; } }
@media (min-width:1750px){ .um-to-top__link{ max-width:940px; } }

/* v=33 FIX — To-top poravnanje sa tekstom (body wrapper + padding-left:48) */
.um-to-top{ border-top:none !important; padding-top:0 !important; }
.um-to-top__body{
  padding-left:48px;
  padding-top:36px;
  border-top:1px solid rgba(139,111,61,0.20);
}
.um-to-top .um-to-top__link{ max-width:640px !important; }
@media (min-width:1280px){ .um-to-top .um-to-top__link{ max-width:780px !important; } }
@media (min-width:1500px){ .um-to-top .um-to-top__link{ max-width:860px !important; } }
@media (min-width:1750px){ .um-to-top .um-to-top__link{ max-width:940px !important; } }

/* v=33 FIX2 — To-top body max-width da border-top ne puca desno na velikim ekranima */
.um-to-top__body{ max-width:calc(640px + 48px); }
@media (min-width:1280px){ .um-to-top__body{ max-width:calc(780px + 48px); } }
@media (min-width:1500px){ .um-to-top__body{ max-width:calc(860px + 48px); } }
@media (min-width:1750px){ .um-to-top__body{ max-width:calc(940px + 48px); } }

/* v=33 — footer pozadina */
.um-footer{ background-color:#FDFAF1 !important; }

/* v=33 — Memory Performance: razmak + linije 1px 0.28 + velicina */
.um-perf-list{
  border-top:1px solid rgba(139,111,61,0.28) !important;
  border-bottom:1px solid rgba(139,111,61,0.28) !important;
  margin-top:24px !important;
  margin-bottom:24px !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
}

/* v=33 — footer: potpis velicina, copyright(c) na logo, nav razmak, nav hover */
/* 1) potpis = isti font-size kao body tekst (20px) */
.um-signature{ font-size:20px !important; }
.um-signature__name{ font-size:20px !important; }
/* 2) © simbol uz logo (gore-desno do UM) */
.um-footer__sym{ font-size:9px; vertical-align:super; color:var(--bz1,#8b6f3d); margin-left:2px; font-family:'IBM Plex Mono',monospace; }
/* 3) nav razmak: gap 22px→14px, letter-spacing 0.16em→0.10em */
.um-footer__nav{ gap:14px !important; }
.um-footer__nav a{ letter-spacing:0.10em !important; }
/* 4) nav hover: bronzana linija kao u glavnom meniju */
.um-footer__nav a{ border-bottom:1px solid transparent; }
.um-footer__nav a:hover{ border-bottom:1px solid var(--bz1,#8b6f3d) !important; }

/* v=33 REVERT — footer nav nazad na originalnu poziciju (gap 22px, letter-spacing 0.16em, bez border-bottom) */
.um-footer__nav{ gap:22px !important; }
.um-footer__nav a{ letter-spacing:0.16em !important; border-bottom:none !important; }
.um-footer__nav a:hover{ border-bottom:none !important; }

/* v=33 — footer top: 1px bronze + 2px razmak + 1px 0.28 linija */
.um-footer{ position:relative !important; padding-top:12px !important; }
.um-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--bz1,#8b6f3d); }
.um-footer::after{ content:""; position:absolute; top:3px; left:0; right:0; height:1px; background:rgba(139,111,61,0.28); }

/* v=33 — To-top: spusti 10px */
.um-to-top{ margin-top:58px !important; }

/* v=33 REVERT — section naslovi/brojevi nazad na original (ne-home stranice bile pokvarene) */
.um-section__num{ font-weight:500 !important; }
.um-section__label{ font-size:10px !important; letter-spacing:.22em !important; white-space:normal !important; text-wrap:initial !important; }
.um-section__note{ font-size:13px !important; }

/* v=33 — footer nav hover linija (isto kao menu) */
.um-footer__nav a{ border-bottom:1px solid transparent; }
.um-footer__nav a:hover{ color:var(--bz1,#8b6f3d) !important; border-bottom:1px solid var(--bz1,#8b6f3d) !important; }

/* v=33 — JEDAN box: var(--um-box) za sav sadrzaj */
/* Jedini izvor istine za sirinu sadrzaja — zamjenjuje sva rucna 640/780/860/940 */
:root{ --um-box:640px; }
@media (min-width:1280px){ :root{ --um-box:780px; } }
@media (min-width:1500px){ :root{ --um-box:860px; } }
@media (min-width:1750px){ :root{ --um-box:940px; } }

/* Sve "sadrzaj" klase koriste istu varijablu */
.um-p,
.um-h2,
.um-block-head,
.um-mblock__intro,
.um-lede,
.um-figure{
  max-width:var(--um-box) !important;
}
/* mblock title band fills the whole box (same width as the body below it) */
.um-mblock__head{ max-width:100% !important; }
/* To-top link = isti box; body = box + padding-left:48px */
.um-to-top .um-to-top__link{ max-width:var(--um-box) !important; }
.um-to-top__body{ max-width:calc(var(--um-box) + 48px) !important; }

/* v=35 — tabele vracene; panel+To-top+horizontalne linije na var(--um-box) */
/* mblock (panels, D-blokovi) i numlist strse desno → surgical constraint */
.um-mblock{ max-width:var(--um-box) !important; }
.um-numlist{ max-width:var(--um-box) !important; }
.um-list{ max-width:var(--um-box) !important; }
/* NOTE: .um-to-top__body vec je na calc(var(--um-box)+48px) i tocno poklapa tekst — ne mijenjamo */
/* NOTE: .um-tbl i .um-ladder nemaju max-width ovdje — ostaju originalno siroki */

/* v=35 FIX — mblock/numlist/list: width:100% da ne izlijecu pri manjim breakpointima */
.um-mblock, .um-numlist, .um-list{ width:100% !important; }

/* v=35 ROOT FIX — sprjecava 1fr grid ekspanziju zbog min-content mblockova */
.um-section__body, .um-hero__body{ min-width:0 !important; overflow:visible; }

/* v=36 — 3 kolone simetricno */
:root{ --content-max: 1400px; }
.um-section{ grid-template-columns: 200px 1fr 200px !important; }
.um-hero:not(.um-hero--home){ grid-template-columns: 200px 1fr 200px !important; }
.um-to-top{ grid-template-columns: 200px 1fr 200px !important; }
/* v=36b — content-max stepenasto, sadrzaj nikad ispod 768 */
:root{ --content-max: 1400px; }
@media (max-width:1320px){
  .um-section, .um-hero, .um-to-top{ grid-template-columns: 200px 1fr !important; }
  .um-section__aside--right{ display:none !important; }
  :root{ --content-max: 1120px; }
}
/* Below 900px the 200px in-page nav column squeezes the body (lede/text got
   much narrower than the rest). Collapse to a single full-width column;
   the in-page side nav hides (main nav still in the hamburger menu). */
@media (max-width:900px){
  .um-section, .um-hero, .um-hero:not(.um-hero--home), .um-to-top{ grid-template-columns: 1fr !important; }
  .um-section__aside{ display:none !important; }
  .um-hero__body, .um-section__body{ border-left:none !important; border-right:none !important; padding-left:0 !important; }
}

/* v=36c — desni notes koristi iste klase kao lijevi (nema duplikata stilova) */
/* .um-section__aside--right nasljedjuje sve od .um-section__aside */
/* Jedina razlika: bez border-left i padding-left (sadrzaj ima te linije) */
.um-section__aside--right{ border-left:none !important; padding-left:0 !important; }

/* v=36d — desna vertikalna linija, ogledalo lijeve */
/* Lijeva: border-left na .um-section__body (linija je NA lijevoj ivici body-a, ka lijevom asideu) */
/* Desna: border-left na desnom asideu (linija je NA lijevoj ivici desnog asidea, ka sadrzaju) — identicno ogledalo */
.um-section__aside--right{
  border-left: 1px solid rgba(139,111,61,0.28) !important;
  padding-left: 48px !important;
}

/* v=36e — desna linija = border-right na .um-section__body, identicna lijevoj */
/* Obje linije na istom elementu → ista visina, isti pocetak, isti kraj */
.um-section__body{ border-right:1px solid rgba(139,111,61,0.28) !important; }
.um-hero__body{ border-right:1px solid rgba(139,111,61,0.28) !important; }
/* Ukloni stari border-left sa desnog asidea (v=36d) — linija je sad na bodyu */
.um-section__aside--right{ border-left:none !important; }

/* v=38 — right lines mirror left, all pages */
.um-section__body,
.um-hero__body{
  border-left: 1px solid rgba(139,111,61,0.28) !important;
  border-right: 1px solid rgba(139,111,61,0.28) !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.um-hero--home{
  grid-template-columns: 200px 1fr 200px !important;
}

@media (max-width:1320px){
  .um-hero--home{
    grid-template-columns: 200px 1fr !important;
  }
}

/* v=40 — To-top width = horizontal line, text centered */
.um-to-top__body{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.um-to-top .um-to-top__link{
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

/* v=41 — table rows: within-days column separated, no collision */
.um-mblock{
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.um-mblock__body{
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.um-mblock__list{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) 128px !important;
  column-gap: 18px !important;
  justify-content: stretch !important;
}

.um-mblock__list:has(.um-mblock__code){
  grid-template-columns: max-content minmax(0, 1fr) 128px !important;
}

.um-mblock__txt{
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
}

.um-mblock__days{
  box-sizing: border-box !important;
  width: 128px !important;
  min-width: 128px !important;
  justify-self: stretch !important;
  text-align: left !important;
}

/* v=42 — right notes exact mirror of left (style + text layout) */
.um-section__aside--right{
  border-left: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: start !important;
}

.um-section__aside--right .um-section__num,
.um-section__aside--right .um-section__label,
.um-section__aside--right .um-section__note,
.um-section__aside--right .um-meta{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  text-align: inherit !important;
}

/* v=44 — footer matches header height + background */
.um-topbar .um-brand,
.um-topbar .um-brand__sub{
  white-space: nowrap !important;
}

.um-topbar{
  box-sizing: border-box !important;
  height: 72px !important;
  min-height: 72px !important;
}

.um-topbar__inner{
  box-sizing: border-box !important;
  height: 70px !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.um-footer{
  box-sizing: border-box !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  background: var(--paper2, #efe9d7) !important;
  border-top: 1px solid var(--bz2, #a88955) !important;
  border-bottom: 1px solid var(--bz2, #a88955) !important;
  display: flex !important;
  align-items: center !important;
}

.um-footer__row{
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: var(--content-max, 1120px) !important;
  margin: 0 auto !important;
  padding: 0 var(--content-pad-x, 48px) !important;
  display: flex !important;
  align-items: center !important;
}

/* v=45 — To-top in content width, centered, border = vertical lines */
.um-to-top__body{
  box-sizing: border-box !important;
  justify-self: start !important;
  width: calc(100% - 58px) !important;
  max-width: none !important;
  margin-left: 29px !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.um-to-top .um-to-top__link{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  border: 1px solid rgba(139, 111, 61, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* v=46 — horizontals equal width + centered on vertical axis; To-top side lines */
.um-to-top__body{
  box-sizing: border-box !important;
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  grid-template-columns: 200px minmax(0, 1fr) 200px !important;
  column-gap: 56px !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 1px solid rgba(139,111,61,0.28) !important;
}

.um-to-top__spacer{
  display: none !important;
}

.um-to-top .um-to-top__link{
  grid-column: 2 !important;
  justify-self: start !important;
  width: calc(100% - 58px) !important;
  max-width: none !important;
  margin-left: 29px !important;
  margin-right: 0 !important;
  border-left: 1px solid rgba(139,111,61,0.28) !important;
  border-right: 1px solid rgba(139,111,61,0.28) !important;
}

@media (max-width:1320px){
  .um-to-top__body{
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }
}

/* v=47 — To-top side lines aligned to vertical separators; even spacing on last line */
.um-to-top{
  margin-top: 36px !important;
}

.um-to-top__body{
  padding-top: 36px !important;
}

.um-to-top .um-to-top__link{
  justify-self: stretch !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 1px solid rgba(139,111,61,0.28) !important;
  border-right: 1px solid rgba(139,111,61,0.28) !important;
}

/* v=48 — To-top standalone side lines (element height) + equal spacing site-wide */
.um-section{
  margin-top: 36px !important;
  padding-top: 36px !important;
}

.um-to-top{
  margin-top: 36px !important;
}

.um-to-top__body{
  padding-top: 36px !important;
}

.um-to-top .um-to-top__link{
  position: relative !important;
  justify-self: start !important;
  width: calc(100% - 58px) !important;
  margin-left: 29px !important;
  margin-right: 0 !important;
}

.um-to-top .um-to-top__link::before,
.um-to-top .um-to-top__link::after{
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  bottom: -1px !important;
  width: 1px !important;
  background: rgba(139,111,61,0.28) !important;
  pointer-events: none !important;
}

.um-to-top .um-to-top__link::before{
  left: -30px !important;
}

.um-to-top .um-to-top__link::after{
  right: -30px !important;
}

/* v=49 — fix first-section vertical lines + To-top flanking boxes */
.um-hero{
  padding-top: 36px !important;
  padding-bottom: 0 !important;
}

.um-hero__body{
  align-self: stretch !important;
}

.um-to-top__body{
  position: relative !important;
}

.um-to-top__body::before,
.um-to-top__body::after{
  content: "" !important;
  position: absolute !important;
  top: 37px !important;
  bottom: auto !important;
  box-sizing: border-box !important;
  height: calc(100% - 36px) !important;
  width: 227px !important;
  border: 1px solid rgba(139,111,61,0.28) !important;
  pointer-events: none !important;
}

.um-to-top__body::before{
  left: 0 !important;
}

.um-to-top__body::after{
  right: 0 !important;
}

/* v=50 — footer taller, even spacing above + centered content */
.um-footer{
  height: auto !important;
  min-height: 108px !important;
  margin-top: 36px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  align-items: center !important;
}

.um-footer__row{
  height: auto !important;
  min-height: 70px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* v=51 — To-top arrows 2x size + 2x spacing */
.um-to-top .um-to-top__link{
  gap: 15.31px !important;
}

.um-to-top__arrow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.um-to-top__text{
  display: inline-block !important;
}

/* v=52 — To-top: arrows original+not bold, vertical lines (text height, text color) between arrows and text */
.um-to-top .um-to-top__link{
  gap: 7.66px !important;
}

.um-to-top__arrow{
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: normal !important;
}

.um-to-top__divider{
  box-sizing: border-box !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 1.25em !important;
  border-left: 1px solid currentColor !important;
}

.um-to-top__text{
  line-height: normal !important;
}

/* v=53 — To-top arrows same size as text */
.um-to-top__arrow{
  font-size: 15px !important;
  font-weight: 400 !important;
}

/* v=54 — To-top internal gaps doubled, symmetric */
.um-to-top .um-to-top__link{
  gap: 15.32px !important;
}

/* v=55 — footer 72px from bottom, © 2x in footer + © added to header */
.um-footer{
  height: 72px !important;
  min-height: 72px !important;
  padding-bottom: 0 !important;
}
.um-footer__row{
  min-height: 0 !important;
}
.um-footer__sym{ font-size: 18px !important; }
.um-topbar__sym{ font-size: 18px; vertical-align: super; color: var(--bz1,#8b6f3d); margin-left: 2px; font-family: 'IBM Plex Mono', monospace; }

/* v=56 — © hidden header+footer, restorable */
/* to restore: change display to inline */
.um-footer__sym{ display: none !important; }
.um-topbar__sym{ display: none !important; }

/* v=57 — footer content vertically centered */
.um-footer{
  padding-top: 0 !important;
}

/* v=58 — footer fixed to bottom, ALWAYS visible (z-index above the More menu so it never covers it) */
.um-footer{
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 140 !important;
  margin-top: 0 !important;
}
body{
  padding-bottom: 108px !important; /* fixed footer clearance */
}

/* v=59 — footer fade + fix bottom reserved space to restore 36px rhythm */
/* Fade: gradient above fixed footer, same concept as .um-stickybar::after below the sub-nav */
body::after{
  content: "";
  position: fixed;
  bottom: 72px;    /* sits flush on top of the 72px footer */
  left: 0; right: 0;
  height: 36px;    /* fills the 36px gap — transparent → paper2 */
  background: linear-gradient(to bottom, transparent, var(--paper2, #efe9d7));
  pointer-events: none;
  z-index: 99;     /* below footer (100), above page content */
}
/* Restore 36px rhythm: gap = body_padding − footer_height = 108 − 72 = 36px */
body{
  padding-bottom: 108px !important;
}

/* v=60 — footer fade = submenu fade (100%, identical) */
/* JS sets --um-fade-h on the stickybar element (not :root), so body::after can't inherit it.
   We anchor the default to the measured bar height (51px) so calc gives 41px everywhere. */
:root{ --um-fade-h: 51px; }
body::after{
  height: calc(var(--um-fade-h, 51px) - 10px) !important;
  background: var(--paper, #f5f2ea) !important;
}
/* footer fade STAYS; lift it above the More menu so it shows right above the fixed footer */
body::after{ z-index:139 !important; }

/* v=61 — top (submenu) fade height = footer fade height */
/* Footer fade height = calc(51px - 10px) = 41px — lock submenu to the same */
.um-stickybar::after{
  height: calc(var(--um-fade-h, 51px) - 10px) !important;
}

/* v=66 — fades restored to 33px both (lines not covered) */
body::after{
  height: 33px !important;
}
.um-stickybar::after{
  height: 33px !important;
}

/* v=67 — Memory Performance price rows: | separators aligned in one column + S10 double gap after */
.um-perf-prices > li{
  display:grid;
  grid-template-columns: 440px max-content 1fr;
  align-items:baseline;
  column-gap:16px;
}
.um-perf-prices > li .um-perf-desc{ white-space:nowrap; }
.um-perf-prices > li .um-perf-sep{ color:rgba(139,111,61,0.55); }
.um-perf-prices > li .um-perf-code{ white-space:nowrap; }
.um-perf-prices > li:last-child .um-perf-code{ margin-left:16px; }

/* v=68 — MP title unified font/size (Cormorant), prices left, | spacing */
.um-mp-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  color: #1a1814 !important;
  margin: 0 0 14px !important;
}
.um-mp-title .um-leadin {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: #8b6f3d !important;
  text-transform: none !important;
}
.um-perf-prices .um-perf-sep {
  margin: 0 10px !important;
  color: rgba(139,111,61,0.55) !important;
}
.um-perf-prices > li {
  display: block !important;
  text-align: left !important;
}
.um-perf-prices .um-perf-desc,
.um-perf-prices .um-perf-code { display: inline !important; }

/* v=69 — prices back to simple left flow, Memory Performance bold */
.um-perf-prices > li {
  display: list-item !important;
  grid-template-columns: none !important;
  text-align: left !important;
}
.um-perf-prices .um-perf-desc,
.um-perf-prices .um-perf-sep,
.um-perf-prices .um-perf-code { display: inline !important; }
.um-perf-prices .um-perf-sep {
  margin: 0 8px !important;
  color: rgba(139,111,61,0.55) !important;
}
.um-mp-title .um-leadin {
  font-weight: 700 !important;
}

/* v=70 — perf prices: aligned | column + aligned codes, 66px gaps */
.um-perf-prices { list-style: none !important; padding: 0 !important; }
.um-perf-prices > li {
  display: grid !important;
  grid-template-columns: max-content 1px max-content !important;
  column-gap: 66px !important;
  align-items: center !important;
  justify-content: start !important;
  padding-left: 0 !important;
}
.um-perf-prices > li::before { content: none !important; }
.um-perf-prices .um-perf-desc { justify-self: start !important; white-space: nowrap !important; }
.um-perf-prices .um-perf-sep {
  width: 1px !important; height: 22px !important;
  background: rgba(139,111,61,0.55) !important;
  color: transparent !important; font-size: 0 !important;
  margin: 0 !important;
  justify-self: center !important;
}
.um-perf-prices .um-perf-code { justify-self: start !important; }

/* v=71 — perf prices: 66px desc→|, 6px |→code, aligned column */
.um-perf-prices { list-style:none !important; padding:0 !important; }
.um-perf-prices > li {
  display:grid !important;
  grid-template-columns: max-content 1px max-content !important;
  column-gap: 0 !important;
  align-items:center !important;
  justify-content:start !important;
  padding-left:0 !important;
  margin-bottom:14px !important;
}
.um-perf-prices > li::before { content:none !important; }
.um-perf-prices .um-perf-desc { justify-self:start !important; white-space:nowrap !important; padding-right:66px !important; }
.um-perf-prices .um-perf-sep {
  width:1px !important; height:22px !important;
  background:rgba(139,111,61,0.55) !important;
  color:transparent !important; font-size:0 !important;
  justify-self:center !important;
}
.um-perf-prices .um-perf-code { justify-self:start !important; padding-left:6px !important; }

/* v=72 — perf prices verzija A (66px desc→|, 6px |→code, aligned), Memory Performance no bold */
.um-perf-prices { list-style:none !important; padding:0 !important; }
.um-perf-prices > li {
  display:grid !important;
  grid-template-columns: max-content 1px max-content !important;
  column-gap: 0 !important;
  align-items:center !important;
  justify-content:start !important;
  padding-left:0 !important;
  margin-bottom:14px !important;
}
.um-perf-prices > li::before { content:none !important; }
.um-perf-desc { justify-self:start !important; white-space:nowrap !important; padding-right:66px !important; }
.um-perf-sep {
  width:1px !important; height:22px !important;
  background:rgba(139,111,61,0.55) !important;
  color:transparent !important; font-size:0 !important;
  justify-self:center !important;
}
.um-perf-code { justify-self:start !important; padding-left:6px !important; }
.um-mp-title .um-leadin { font-weight:400 !important; }

/* v=73 — perf prices SHARED grid (aligned | column, 66px desc→|, 6px |→code, kill v=67), title weight 400 */
.um-perf-prices {
  display: grid !important;
  grid-template-columns: max-content 1px max-content !important;
  column-gap: 0 !important;
  justify-content: start !important;
  align-items: center !important;
  row-gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.um-perf-prices > li {
  display: contents !important;
}
.um-perf-prices > li::before { content: none !important; }
.um-perf-desc { white-space: nowrap !important; padding-right: 66px !important; }
.um-perf-sep {
  width: 1px !important; height: 22px !important;
  background: rgba(139,111,61,0.55) !important;
  color: transparent !important; font-size: 0 !important;
  justify-self: center !important;
}
.um-perf-code { margin-left: 6px !important; }
.um-perf-prices > li:last-child .um-perf-code { margin-left: 6px !important; }
.um-mp-title { font-weight: 400 !important; }

/* v=74 — footer nav: match main-menu size/font + vertical dividers, equal spacing */
.um-footer__nav a {
  font-size: 11px !important;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
}
.um-footer__nav { gap: 0 !important; align-items: center !important; }
.um-footer__nav a { padding: 0 16px !important; }
.um-footer__nav a:first-child { padding-left: 0 !important; }
.um-footer__nav a:last-child  { padding-right: 0 !important; }
.um-footer__nav a + a {
  border-left: 1px solid var(--bz2, #a88955) !important;
}

/* v=75 — main nav vertical dividers, equal spacing (match footer/icons) */
.um-topbar__nav-left { gap: 0 !important; align-items: center !important; }
.um-topbar__nav-left > .um-nav__link,
.um-topbar__nav-left > .um-nav__more { padding: 0 16px !important; }
.um-topbar__nav-left > :first-child { padding-left: 0 !important; }
.um-topbar__nav-left > * + * {
  border-left: 1px solid var(--bz2, #a88955) !important;
}

/* v=76 — main+footer nav underline = word width only (clears dividers) */
.um-topbar__nav-left .um-nav__link {
  border-bottom: none !important;
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d));
  background-repeat: no-repeat;
  background-position: 16px 100%;
  background-size: 0% 1px;
  transition: background-size 0.2s ease;
}
.um-topbar__nav-left .um-nav__link:hover,
.um-topbar__nav-left .um-nav__link.is-active {
  background-size: calc(100% - 32px) 1px;
  color: var(--bz1,#8b6f3d) !important;
}
.um-topbar__nav-left > :first-child.um-nav__link { background-position: 0 100%; }
.um-topbar__nav-left > :first-child.um-nav__link:hover,
.um-topbar__nav-left > :first-child.um-nav__link.is-active { background-size: calc(100% - 16px) 1px; }
.um-footer__nav a {
  border-bottom: none !important;
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d));
  background-repeat: no-repeat;
  background-position: 16px 100%;
  background-size: 0% 1px;
  transition: background-size 0.2s ease;
}
.um-footer__nav a:hover { background-size: calc(100% - 32px) 1px; color: var(--bz1,#8b6f3d) !important; }
.um-footer__nav a:first-child { background-position: 0 100%; }
.um-footer__nav a:first-child:hover { background-size: calc(100% - 16px) 1px; }

/* v=77 — footer nav: kill old border-bottom, single word-width underline (like main menu) */
.um-footer__nav a,
.um-footer__nav a:hover {
  border-bottom: none !important;
}
.um-footer__nav a {
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 16px 100% !important;
  background-size: 0% 1px !important;
  transition: background-size 0.2s ease !important;
}
.um-footer__nav a:hover {
  background-size: calc(100% - 32px) 1px !important;
  color: var(--bz1,#8b6f3d) !important;
}
.um-footer__nav a:first-child { background-position: 0 100% !important; }
.um-footer__nav a:first-child:hover { background-size: calc(100% - 16px) 1px !important; }

/* v=78 — footer last-child underline, Apply + icons word-underline, More triangle 5x */
/* 1) Footer Refund Policy (last-child: padL=16, padR=0) */
.um-footer__nav a:last-child:hover { background-size: calc(100% - 16px) 1px !important; }
/* 2) Apply (padL=0, padR=16 → position 0, size calc(100%-16px) → ulW = textW) */
.um-nav__apply {
  border-bottom: none !important;
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0% 1px !important;
  transition: background-size .2s ease !important;
}
.um-nav__apply:hover { background-size: calc(100% - 16px) 1px !important; }
/* 3) Icons (icon[0]: padL=0/padR=16; icon[1]: padL=16/padR=16; icon[2]: padL=16/padR=0) */
.um-nav__icons a {
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 16px 100% !important;
  background-size: 0% 1px !important;
  transition: background-size .2s ease !important;
}
.um-nav__icons a:hover { background-size: calc(100% - 32px) 1px !important; color: var(--bz1,#8b6f3d) !important; }
.um-nav__icons a:first-child { background-position: 0 100% !important; }
.um-nav__icons a:first-child:hover { background-size: calc(100% - 16px) 1px !important; }
.um-nav__icons a:last-child:hover  { background-size: calc(100% - 16px) 1px !important; }
/* 4) More triangle: 8.5px → 22px (2.6×; 5× would be 42px but 22 fits cleanly) */
.um-nav__more::after { font-size: 22px !important; line-height: 0 !important; vertical-align: middle !important; }
/* v=78 fix: Apply hover border-bottom — old :hover !important rule has higher specificity; kill it explicitly */
.um-nav__apply:hover { border-bottom: none !important; }

/* v=79 — More triangle reposition, Apply underline stable, footer == main menu (size+weight), refund underline */
/* 1) More ::after — 22px, snug + centered */
.um-nav__more::after {
  font-size: 22px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
}
/* 2) Apply — root cause: :hover { background: shorthand } clears background-image; re-assert */
.um-nav__apply,
.um-nav__apply:hover { border-bottom: none !important; }
.um-nav__apply {
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0% 1px !important;
  transition: background-size .2s ease !important;
}
.um-nav__apply:hover {
  background-color: var(--ink2) !important;
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: calc(100% - 16px) 1px !important;
}
/* 3) Footer font-weight == main nav (400, not 500) */
.um-footer__nav a { font-weight: 400 !important; }
/* 4) Footer Refund Policy (last-child: padL=16, padR=0) */
.um-footer__nav a:last-child:hover { background-size: calc(100% - 16px) 1px !important; }

/* v=80 — footer color = main nav, Apply no pill (word underline), More triangle 5px + centered */
/* 1) Footer color = main nav bronze rgb(139,111,61) = #8b6f3d */
.um-footer__nav a { color: var(--bz1, #8b6f3d) !important; }
/* 2) Apply — kill ALL background/pill; re-assert gradient underline on both states */
.um-nav__apply,
.um-nav__apply:hover,
.um-nav__apply:focus {
  background-color: transparent !important;
  background: none !important;
  border-radius: 0 !important;
}
/* rest: gradient hidden */
.um-nav__apply {
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0% 1px !important;
  transition: background-size .2s ease !important;
  color: var(--bz1,#8b6f3d) !important;
}
/* hover: re-assert gradient (same 0,2,0 specificity, later = wins over background:none above) */
/* padL=0, padR=16 → calc(100%-16px) = 43px = textWidth "Apply" */
.um-nav__apply:hover {
  background-image: linear-gradient(var(--bz1,#8b6f3d), var(--bz1,#8b6f3d)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: calc(100% - 16px) 1px !important;
}
/* 3) More ::after — 5px gap, vertically centered (top:0 keeps it on baseline) */
.um-nav__more::after {
  margin-left: 5px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
}

/* v=81 — footer matched to main nav (deep), More downward arrow 3px */
/* A) Footer line-height fix: main=18.7px footer=19.8px — all other props identical */
.um-footer__nav a { line-height: 18.7px !important; }
/* B) More ::after — ∨ (U+2228) mirrors To-top ∧ (U+2227), rotated to point down.
      Method: Unicode wedge character, same family as To-top arrow.
      font-size: 9px ≈ cap-height of 11px IBM Plex Mono (cap ratio ~0.72 → ~7.9px).
      margin-left: 3px gap to word "More". */
.um-nav__more::after {
  content: "\2228" !important;
  font-size: 9px !important;
  margin-left: 3px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
}

/* v=82 — More arrow height == letter height (8px = cap height), gap 6px, centered, down */
/* ∨ at 15px: canvas measures ascent+descent = 8px = exact cap height of "M" at 11px */
.um-nav__more::after {
  content: "\2228" !important;
  font-size: 15px !important;
  line-height: 0 !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
}

/* v=83 — More arrow up 2px (size unchanged) */
.um-nav__more::after { position: relative !important; top: -2px !important; }

/* v=84 — More: filled downward triangle (replaces ∨) */
.um-nav__more::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid var(--bz1,#8b6f3d) !important;
  margin-left: 6px !important;
  position: relative !important;
  top: -1px !important;
  vertical-align: middle !important;
  line-height: 0 !important;
}

/* v=85 — SECTION/SUBSECTIONS like eyebrow (no bold, line starts at word, color unchanged) */
/* BEFORE: eyebrow fw=500, dt fw=500, dt border-color=rgba(139,111,61,0.28), dt box-left is 28px before text */
/* font-size/letter-spacing/text-transform already identical — only weight + position need fixing */
/* 1) Remove bold from both (500 → 400) */
.um-eyebrow { font-weight: 400 !important; }
.um-meta dt { font-weight: 400 !important; }
/* 2) Fix dt underline overhang: v=33 set width:calc(100%+28px), margin-left:-28px, padding-left:28px */
/*    → remove so box starts at word left edge, matching eyebrow */
.um-meta dt {
  width: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* 3) Re-assert dt border-bottom color (rgba(139,111,61,0.28) — faint bronze, same as eyebrow, unchanged) */
.um-meta dt { border-bottom-color: rgba(139,111,61,0.28) !important; }

/* v=86 — SECTION label text height == eyebrow (SUBSECTIONS untouched) */
/* Confirmed: 4 dt total (2 Section + 2 Subsections across left+right asides) */
/* dt:first-of-type = "Section" only in each .um-meta parent — does NOT hit Subsections ✓ */
/* BEFORE: fontSize identical (12px=12px), capH identical (8=8). Only lineHeight differs: eyebrow=20.4px, Section=21.6px */
.um-meta dt:first-of-type {
  font-size: 12px !important;
  line-height: 20.4px !important;
}

/* v=87 — SECTION word-to-line gap == eyebrow (padding-bottom) */
/* BEFORE: eyebrow=3.2px, Section=6px, Subsections=6px. Only Section changes. */
.um-meta dt:first-of-type { padding-bottom: 3.2px !important; }

/* v=88 — SECTION nudged down 4px (underline aligns with eyebrow) */
.um-meta dt:first-of-type { margin-top: 4px !important; }

/* v=89 — SUBSECTIONS word-to-line gap == SECTION */
/* BEFORE: Section=3.2px, Subsections=6px. Setting Subsections to match. */
.um-meta dt:not(:first-of-type) { padding-bottom: 3.2px !important; }

/* v=90 — section note text centered under its line */
.um-section__note { text-align: center !important; }
.um-section__aside--right .um-section__note { text-align: center !important; }

/* v=91 — home right aside: Section+underline restored, note top-line removed, identical line below text */
.um-section__note--rightblock { border-top: none !important; padding-top: 0 !important; }
.um-section__note--rightblock {
  border-bottom: 1px solid rgba(139,111,61,0.28) !important;
  padding-bottom: 3.2px !important;
  margin-bottom: 0 !important;
}

/* v=92 — home right aside: bottom line gap == top gap (symmetry) */
.um-section__note--rightblock { padding-bottom: 18px !important; }

/* v=93 — right section asides: content right-aligned */
.um-section__aside--right .um-section__num,
.um-section__aside--right .um-section__label { text-align: right !important; }

/* v=94 — right section num gets small "a" (32px) directly beside the number, e.g. 1.2a */
.um-section__aside--right .um-section__num { position: relative !important; }
.um-section__aside--right .um-section__num::after {
  content: "a" !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  line-height: 1 !important;
  color: var(--bz1,#8b6f3d) !important;
  font-style: normal !important;
  margin-left: 2px !important;
  vertical-align: baseline !important;
}

/* v=95 — right num "a" doubled to 64px */
.um-section__aside--right .um-section__num::after { font-size: 64px !important; }

/* v=96 — left num "a", right num "b" (both 64px beside number) */
.um-section__aside:not(.um-section__aside--right) .um-section__num { position: relative !important; }
.um-section__aside:not(.um-section__aside--right) .um-section__num::after {
  content: "a" !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 64px !important;
  line-height: 1 !important;
  color: var(--bz1,#8b6f3d) !important;
  font-style: normal !important;
  margin-left: 2px !important;
  vertical-align: baseline !important;
}
.um-section__aside--right .um-section__num::after { content: "b" !important; }

/* v=97 — hero right aside: "Section" → "The Public Area", bronze italic 42px */
.um-section__aside--right .um-rightblock-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 42px !important;
  line-height: 1.05 !important;
  color: var(--bz1,#8b6f3d) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* v=98 — hero right aside: "The Public Area" italic 36px soft-black, line kept */
.um-section__aside--right dt.um-rightblock-title {
  font-size: 36px !important;
  line-height: 1.08 !important;
  color: var(--ink2,#3a342b) !important;
}

/* v=99 — The Public Area as SVG, stretched edge-to-edge to line width, one line */
.um-section__aside--right .um-rightblock-title-wrap { width: 100% !important; display: block !important; }
.um-section__aside--right .um-rightblock-svg { display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; }
.um-section__aside--right .um-rightblock-svg text { fill: var(--ink2,#3a342b) !important; }

/* v=100 — Public bronze, Area upright (non-italic); The unchanged; stretch+line kept */

/* v=101 — section 1.1 leadin (Public/Protected Area) bronze underline, word-width */
.um-p .um-leadin {
  border-bottom: 1px solid var(--bz1,#8b6f3d) !important;
  padding-bottom: 2px !important;
}

/* v=102 — MP prices box 20px inner padding + symmetric guaranteed gap (Option A) */
.um-perf-prices {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: 24px !important;
}

/* v=103 — Section/Subsections labels → Cormorant italic ~24px (match leadin) */
.um-meta dt {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 24px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.um-meta dt:first-of-type {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

/* v=104 — SUBSECTIONS word-to-line gap == SECTION */
.um-meta dt:not(:first-of-type) { line-height: 1.2 !important; }

/* v=105 — Section/Subsections labels color → soft black (ink2) */
.um-meta dt { color: var(--ink2,#3a342b) !important; }

/* v=106 — "The" (upright, full black) + Section/Subsections (bronze italic) */
.um-meta dt { color: var(--bz1,#8b6f3d) !important; }
.um-meta dt::before {
  content: "The " !important;
  font-style: normal !important;
  color: var(--ink,#1a1814) !important;
}

/* v=107 — restore home right block + suppress ::before on right aside dt + SVG font-size=24 matches left */
.um-section__aside--right .um-meta dt::before { content: none !important; }

/* v=108 — right title justified edge-to-edge via word-spacing, 20px kept */
.um-section__aside--right .um-rightblock-title {
  display: block !important;
  width: 100% !important;
  text-align: justify !important;
  text-align-last: justify !important;
  white-space: normal !important;
}

/* v=109 — right title no-stretch (natural width) + restore right line level (block stays connected) */
.um-section__aside--right .um-rightblock-title {
  text-align: left !important;
  text-align-last: auto !important;
  white-space: nowrap !important;
}

/* v=110 — back-to-top text → Cormorant italic (size/color/arrows/separators unchanged, spacing even) */
.um-to-top__text {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}

/* v=111 — back-to-top symbol → filled UP triangle (like More, height preserved) */
.um-to-top__arrow {
  color: transparent !important;
  position: relative !important;
}
.um-to-top__arrow::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-bottom: 8px solid var(--bz1,#8b6f3d) !important;
}

/* v=112 — "The" in The Subsections → bronze (word color unchanged; The Section untouched) */
.um-section__aside:not(.um-section__aside--right) .um-meta dt:not(:first-of-type)::before {
  color: var(--bz1,#8b6f3d) !important;
}

/* v=113 — The Subsections: word→soft black, "The"→bronze */
.um-section__aside:not(.um-section__aside--right) .um-meta dt:not(:first-of-type) {
  color: var(--ink2,#3a342b) !important;
}
.um-section__aside:not(.um-section__aside--right) .um-meta dt:not(:first-of-type) .um-meta-the {
  color: var(--bz1,#8b6f3d) !important;
}

/* v=114 — The Subsections: word→strong black (ink), "The"→bronze */
.um-section__aside:not(.um-section__aside--right) .um-meta dt:not(:first-of-type) {
  color: var(--ink,#1a1814) !important;
}
.um-section__aside:not(.um-section__aside--right) .um-meta dt:not(:first-of-type) .um-meta-the {
  color: var(--bz1,#8b6f3d) !important;
}

/* v=115 — right title right-aligned to end at line's right edge (no stretch) */
.um-section__aside--right .um-rightblock-title {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  text-align-last: right !important;
  white-space: nowrap !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* v=116 — right title: leading "( I )" — parentheses bronze, roman numeral pure black */
.um-section__aside--right .um-rightblock-title .um-roman__par{ color:var(--bz1,#8b6f3d) !important; }
.um-section__aside--right .um-rightblock-title .um-roman__num{ color:var(--ink,#1a1814) !important; }

/* v=117 — "( I )" starts at line start; roman numeral upright (not italic) */
.um-section__aside--right .um-rightblock-title{
  text-align:left !important;
  text-align-last:left !important;
  width:100% !important;
}
.um-section__aside--right .um-rightblock-title .um-roman__num{
  font-style:normal !important;
  color:var(--ink,#1a1814) !important;
}

/* v=118 — title: "( I )" at line start + "The Public Area" ends at line right edge (gap in middle) */
.um-section__aside--right .um-rightblock-title{
  display:block !important;
  width:100% !important;
  text-align:justify !important;
  text-align-last:justify !important;
  white-space:normal !important;
}

/* v=119 — "( )" parentheses upright (non-italic), bronze kept */
.um-section__aside--right .um-rightblock-title .um-roman__par{
  font-style: normal !important;
  color: var(--bz1,#8b6f3d) !important;
}

/* v=120 — section 1.1: "( I )" before Public, "( II )" before Protected (parens bronze upright, roman black upright) */
.um-p .um-roman__par{ font-style:normal !important; color:var(--bz1,#8b6f3d) !important; }
.um-p .um-roman__num{ font-style:normal !important; color:var(--ink,#1a1814) !important; }
.um-p .um-roman{ font-style:normal !important; }

/* v=121 — section 1.1: extend bronze underline under "( I )"/"( II )" too (continuous line) */
.um-p .um-roman{
  border-bottom: 1px solid var(--bz1,#8b6f3d) !important;
  padding-bottom: 2px !important;
  padding-right: 0.3em !important;
  margin-right: -0.3em !important;
}

/* v=122 — section 1.1: remove mismatched roman line; extend original .um-leadin underline to start at "(" */
.um-p .um-roman{
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* v=123 — roman "( I )"/"( II )" all black (hero + 1.1); hero parens tightened to numeral; hero layout (start-left, text ends right) kept */
.um-section__aside--right .um-rightblock-title .um-roman__par{ color:var(--ink,#1a1814) !important; letter-spacing:0 !important; }
.um-section__aside--right .um-rightblock-title .um-roman__num{ color:var(--ink,#1a1814) !important; margin:0 2px !important; }
.um-p .um-roman__par{ color:var(--ink,#1a1814) !important; }
.um-p .um-roman__num{ color:var(--ink,#1a1814) !important; }

/* v=124 — section 1.1 "( I )"/"( II )" parentheses tightened to numeral (match hero); text untouched */
.um-p .um-roman__num{ margin:0 2px !important; }
.um-p .um-roman__par{ letter-spacing:0 !important; }

/* v=125 — hero right title: remove justify stretch, natural word spacing (keep "( I )" black+tight) */
.um-section__aside--right .um-rightblock-title{
  text-align:left !important;
  text-align-last:left !important;
  word-spacing:normal !important;
  letter-spacing:normal !important;
}

/* v=126 — hero right title centered along its line (like the note) */
.um-section__aside--right .um-rightblock-title{
  text-align:center !important;
  text-align-last:center !important;
  width:100% !important;
}

/* v=127 — left "The Section"→"( I )", "The Subsections"→"( II )" (black, upright, tight) */
.um-section__aside:not(.um-section__aside--right) .um-meta dt .um-roman__par{
  color:var(--ink,#1a1814) !important; font-style:normal !important; letter-spacing:0 !important; }
.um-section__aside:not(.um-section__aside--right) .um-meta dt .um-roman__num{
  color:var(--ink,#1a1814) !important; font-style:normal !important; margin:0 2px !important; }

/* v=128 — left labels: append "( I )" after Section, "( II )" after Subsections (black, upright, tight) */
.um-section__aside:not(.um-section__aside--right) .um-meta dt .um-roman__par{
  color:var(--ink,#1a1814) !important; font-style:normal !important; letter-spacing:0 !important; }
.um-section__aside:not(.um-section__aside--right) .um-meta dt .um-roman__num{
  color:var(--ink,#1a1814) !important; font-style:normal !important; margin:0 2px !important; }

/* v=129 — section 1.3: remove ">" markers in front of (1)-(4) */
.um-perf-list:not(.um-perf-prices)>li::before{ content:"" !important; display:none !important; }
.um-perf-list:not(.um-perf-prices)>li{ padding-left:0 !important; }

/* v=130 — left labels match right submenu (Cormorant italic ~20px); home left reverted to plain Section/Subsections */
.um-section__aside:not(.um-section__aside--right) .um-meta dt::before{ content:none !important; }
.um-section__aside:not(.um-section__aside--right) .um-meta dt{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-size:24px !important;
}

/* v=131 — left "Subsections" forced to same bronze as "Section" */
.um-section__aside:not(.um-section__aside--right) .um-meta dt:not(:first-of-type){
  color: var(--bz1,#8b6f3d) !important;
}

/* v=132 — footer LEFT made identical to RIGHT (mirrored: same vertical lines, colors, spacing, start position; no logo) */
.um-footer__row{
  align-items:flex-start !important;
}
.um-footer__nav--left{
  text-align:left;
}

/* v=133 — footer RIGHT aligned to end flush with its line (true mirror of left); left untouched */
.um-footer__nav:not(.um-footer__nav--left){
  justify-content:flex-end !important;
  margin-left:auto !important;
}

/* v=134 — right submenu labels (Section/Subsections) right-aligned, end flush with line end (mirror of left) */
.um-section__aside--right .um-meta dt:not(.um-rightblock-title){
  text-align:right !important;
  width:100% !important;
}

/* v=135 — REVERT: right submenu labels back to left-aligned (undo the right-align mirror change) */
.um-section__aside--right .um-meta dt:not(.um-rightblock-title){
  text-align:left !important;
  width:auto !important;
}

/* v=136 — footer height reduced by 1/4 (cut from bottom), content re-centered with equal top/bottom space */
.um-footer{
  height:54px !important;
  min-height:54px !important;
}
.um-footer__row{
  min-height:0 !important;
  align-items:center !important;
}
body::after{
  bottom:54px !important;
}
body{
  padding-bottom:90px !important;
}

/* v=137 — footer horizontal line between Refund Policy & Imprint (gap = small-sep gap, thickness/color = big separator); eyebrow underline extended to right vertical separator (same gap as left); all pages */
.um-footer__hline{
  display:block !important;
  height:1px !important;
  background:rgba(139,111,61,0.28) !important;
  flex:1 !important;
  align-self:center !important;
  margin-left:16px !important;
  margin-right:16px !important;
}
.um-section__body .um-eyebrow,
.um-hero__body .um-eyebrow{
  display:block !important;
  width:100% !important;
  padding-right:0 !important;
}

/* v=138 — eyebrow underline: 30px gap punched right after the eyebrow word, line resumes to right separator; same height/thickness/color; all pages */
.um-section__body .um-eyebrow,
.um-hero__body .um-eyebrow{
  display:flex !important;
  align-items:flex-end !important;
  padding-right:0 !important;
  width:100% !important;
}
.um-section__body .um-eyebrow::after,
.um-hero__body .um-eyebrow::after{
  content:"" !important;
  width:30px !important;
  flex-shrink:0 !important;
  height:5px !important;
  background:var(--paper,#f5f2ea) !important;
  margin-bottom:-4.2px !important;
}

/* v=139 — eyebrow gap 30px→20px (all pages); home eyebrow text changed to "Home" */
.um-section__body .um-eyebrow::after,
.um-hero__body .um-eyebrow::after{
  width:20px !important;
}

/* v=140 — HOME 1.3: double the space after "(1)-(4)" before the word (one more equal space) */
.um-perf-list:not(.um-perf-prices) > li > span.um-perf-list__mult{
  margin-right:0.35em !important;
}

/* v=141 — Memory Performance list (um-perf-list, non-prices): font 18px, line-height 29px, item gap 0px, "(N)"→word 18px */
.um-perf-list:not(.um-perf-prices) > li{
  font-size:18px !important;
  line-height:29px !important;
  margin-bottom:0px !important;
}
.um-perf-list:not(.um-perf-prices) > li > span.um-perf-list__mult{
  margin-right:14px !important;
}

/* v=142 — prices list (um-perf-prices): font-size 18px + line-height 29px only; separators/columns/alignment untouched */
.um-perf-prices > li,
.um-perf-prices .um-perf-list__mult,
.um-perf-prices .um-perf-list__time,
.um-perf-prices .um-perf-code,
.um-perf-prices .um-perf-desc{
  font-size:18px !important;
  line-height:29px !important;
}

/* v=143 — prices list (um-perf-prices): vertical rhythm matched to Memory Performance list (row-gap + line-height 29px); separators/columns/alignment untouched */
.um-perf-prices{ row-gap:0px !important; }
.um-perf-prices .um-perf-list__mult,
.um-perf-prices .um-perf-list__time,
.um-perf-prices .um-perf-code,
.um-perf-prices .um-perf-desc{
  line-height:29px !important;
}

/* v=144 — System H1 (UM): bronze + italic per Dr. Freiberg */
.um-h1 .um-tag.um-tag--sys{ color:#8b6f3d !important; font-style:italic !important; }

/* v=145 — 2.2 numlist: bronze en-dash between number and text per Dr. Freiberg */
.um-numlist__n::before{ content:"("; color:#8b6f3d; }
.um-numlist__n::after{ content:")"; color:#8b6f3d; }
/* 2.2 (Learning System) — period inside the parentheses so the numbering reads (01.) … (10.) */
#sec-learning .um-numlist__n::after{ content:".)"; }
/* 2.4 (Performance Dimensions) — period inside the parentheses so the lettering reads (A.) … (D.) */
#sec-performance .um-numlist__n::after{ content:".)"; }

/* v=146 — 2.2 numlist numbers: switch to Newsreader (match the big section numbers) */
.um-numlist__n{ font-family:'Newsreader', Georgia, serif !important; font-weight:500 !important; font-size:16px !important; min-width:0 !important; font-style:italic !important; }

/* v=147 — mblock tables: "| within X days" sits right after the text (not pushed to the right edge); pipes align within each block. Overrides the earlier 1fr / 128px layout. */
.um-mblock__list{ grid-template-columns: minmax(0, max-content) max-content !important; column-gap: 16px !important; justify-content: start !important; }
.um-mblock__days{ width: auto !important; min-width: 0 !important; justify-self: start !important; }

/* v=148 — mblock: title band and body as two separate bordered elements with a 4px gap per Dr. Freiberg */
.um-mblock{ border:none !important; }
.um-mblock__head{ border:1px solid #8b6f3e !important; }
/* bronze thick left line on the table title bar (like the .um-cmp-divider trake) */
.um-mblock__head{ border-left:3px solid #8b6f3d !important; }
.um-mblock__body{ border:1px solid #8b6f3e !important; margin-top:4px !important; }

/* v=149 — 2.4 coded mblock tables (A.x/B.x/C.x/D.x): "| within X days" right after the text, not pushed to the right edge. Overrides the 3-col 1fr/128px layout. */
.um-mblock__list:has(.um-mblock__code){ grid-template-columns: max-content minmax(0, max-content) max-content !important; column-gap: 16px !important; justify-content: start !important; }

/* v=150 — 3.4 index-list numbers (um-idx): match System numbers (Newsreader) + bronze dash */
.um-idx-n{ font-family:'Newsreader', Georgia, serif !important; font-weight:500 !important; font-size:16px !important; letter-spacing:0 !important; padding-top:0 !important; }
.um-idx-n::after{ content:"–"; color:#8b6f3d; margin-left:8px; }

/* v=151 — 3.4 criterion bands (um-crit-h): tinted background + soft full border (match proposal / System head band) */
.um-crit-h{ background:#efe9d7 !important; border:1px solid rgba(139,111,61,.20) !important; }

/* v=152 — 3.4 index list: remove the thin horizontal rule under each item */
.um-idx li{ border-bottom:none !important; }

/* v=153 — 3.4 index list (um-idx): match System list vertical spacing (padding 5px 0, line-height 1.5) */
.um-idx li{ padding:5px 0 !important; line-height:1.5 !important; }

/* v=154 — body emphasis: <strong> in paragraphs → bronze italic (not bold black), per Dr. Freiberg */
.um-p strong{ color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important; }

/* v=155 — criterion band numbers (um-crit-r): Newsreader (match all other numbers), not Cormorant */
.um-crit-r{ font-family:'Newsreader', Georgia, serif !important; font-weight:500 !important; }

/* v=156 — criterion band number: nudge down to sit level with the title (was optically raised) */
.um-crit-r{ position:relative; top:2px; }

/* v=158 — Method tables: identical to our criterion/mblock style — header block + 4px gap + body block with fine inner lines; serif ink text */
.um-tbl{ background:transparent !important; border:none !important; margin:16px 0 8px !important; }

.um-tbl-head{
  background:#efe9d7 !important;
  border:1px solid rgba(139,111,61,.20) !important;
  margin-bottom:4px !important;
  font-family:'Newsreader',Georgia,serif !important;
  font-size:15px !important; letter-spacing:0 !important; text-transform:none !important;
  color:#6b6253 !important; font-weight:500 !important;
}

.um-tbl-row{
  background:#fdfaf1 !important;
  border-left:1px solid rgba(139,111,61,.20) !important;
  border-right:1px solid rgba(139,111,61,.20) !important;
  border-bottom:none !important; position:relative !important;
  font-family:'Newsreader',Georgia,serif !important;
  font-size:15px !important; letter-spacing:0 !important; color:#1a1814 !important;
}
.um-tbl-head + .um-tbl-row{ border-top:1px solid rgba(139,111,61,.20) !important; }
.um-tbl-row:not(:last-child)::after{
  content:"" !important; position:absolute !important;
  left:18px !important; right:18px !important; bottom:0 !important;
  height:1.5px !important; background:rgba(139,111,61,.28) !important;
}
.um-tbl-row:last-child{ border-bottom:1px solid rgba(139,111,61,.20) !important; }
.um-tbl-row:nth-child(even){ background:#fdfaf1 !important; }

.um-tbl-prog{ font-family:'Newsreader',Georgia,serif !important; font-size:15px !important; letter-spacing:0 !important; color:#8b6f3d !important; font-weight:600 !important; }
.um-tbl-total{ color:#1a1814 !important; font-weight:600 !important; }

/* v=159 — Method 4.2 code-led list (S1/100A–D): no chevron, bronze codes */
.um-list--codes>li::before{ content:none !important; }
.um-list--codes strong{ color:#8b6f3d !important; font-style:normal !important; font-weight:600 !important; }

/* v=160 — code-led lists (4.2/4.3): start at the text margin (no leftover chevron indent) */
.um-list--codes>li{ padding-left:0 !important; }
/* 5.1 codes list — vertical rhythm like home .um-perf-list (margin-bottom 10px, line-height 1.6) */
.um-list--codes>li{ margin-bottom:10px !important; line-height:1.6 !important; }
/* gold key words — override .um-list em{color:inherit} so .um-gold-em stays bronze */
.um-list--codes .um-gold-em{ color:#8b6f3d !important; font-style:italic !important; }
/* gap after the (A.) code so the text isn't crowded against the parenthesis */
.um-list--codes strong{ margin-right:8px !important; }

/* v=259 — More megamenu: page-style line construction (same 1px bronze .28 lines as the pages).
   Mirrored frame: left "More" eyebrow with the vertical line on ITS RIGHT, right "More" eyebrow with the vertical line on ITS LEFT, menu centred between the two lines. Desktop only; mobile single column. */
.um-megamenu__aside-l,
.um-megamenu__aside-r{ display:none; }
@media (min-width:900px){
  .um-megamenu__inner{ grid-template-columns:200px 1fr 200px !important; column-gap:56px !important; align-items:stretch !important; position:relative !important; }
  /* horizontal lines = section divider; inset by padding-x so they span the column area (68→1372), same as the page section */
  .um-megamenu__inner::before,
  .um-megamenu__inner::after{ content:"" !important; position:absolute !important; left:var(--content-pad-x,48px) !important; right:var(--content-pad-x,48px) !important; height:1px !important; background:rgba(139,111,61,0.2) !important; pointer-events:none !important; }
  .um-megamenu__inner::before{ top:0 !important; }
  .um-megamenu__inner::after{ bottom:0 !important; }
  .um-megamenu__aside-l{ display:block; grid-column:1 !important; }
  /* the two vertical lines sit on the MENU column edges — identical x to the page body's border-left/right (measured: 324 / 1116 @1440) */
  .um-megamenu__col{ grid-column:2 !important; border-left:1px solid rgba(139,111,61,0.28) !important; border-right:1px solid rgba(139,111,61,0.28) !important; padding-left:48px !important; }
  .um-megamenu__aside-r{ display:block; grid-column:3 !important; }
}

/* v=161 — 4.3 learning-objective list: aligned "| within X days" column (mblock pattern) */
.um-list--days{ display:grid !important; grid-template-columns:max-content max-content; row-gap:8px; }
.um-list--days>li{ display:contents !important; }
.um-list--days .um-dl-d{ color:#1a1814; white-space:nowrap; }
.um-list--days .um-dl-d::before{ content:"|"; color:rgba(139,111,61,.5); margin:0 14px; }

/* v=162 — Method 4.4 phase bands + per-programme breakdown */
.um-pb{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;background:#efe9d7;border:1px solid rgba(139,111,61,.20);padding:13px 20px;margin:22px 0 4px;}
.um-pb-n{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:20px;color:#8b6f3d;position:relative;top:2px;flex:0 0 auto;}
.um-pb-sep{color:#a88955;font-size:16px;flex:0 0 auto;}
.um-pb-t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:18px;color:#1a1814;}

.um-bd{border:1px solid rgba(139,111,61,.20);background:#fdfaf1;}
.um-bd-row{display:grid;grid-template-columns:120px 1fr 150px;align-items:stretch;padding:16px 20px;position:relative;}
.um-bd-row:not(:last-child)::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:1.5px;background:rgba(139,111,61,.28);}
.um-bd-code{color:#8b6f3d;font-weight:600;font-size:15px;font-family:'Newsreader',Georgia,serif;}
.um-bd-mid{padding:2px 18px;border-left:1px solid rgba(139,111,61,.35);line-height:1.5;font-size:15px;color:#1a1814;font-family:'Newsreader',Georgia,serif;}
.um-bd-dur{padding:2px 0 0 18px;border-left:1px solid rgba(139,111,61,.35);font-size:15px;color:#1a1814;white-space:nowrap;font-family:'Newsreader',Georgia,serif;}

/* v=163 — Method 4.5 comprehensive-assessment per-programme boxes */
.um-cat{border:1px solid rgba(139,111,61,.20);background:#fdfaf1;}
.um-cat-row{display:grid;grid-template-columns:118px 1fr;align-items:center;padding:22px 24px;position:relative;}
.um-cat-row:not(:last-child)::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:rgba(139,111,61,.20);}
.um-cat-prog{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:17px;color:#8b6f3d;}
.um-cat-track{display:flex;align-items:stretch;border-left:1px solid rgba(139,111,61,.30);padding-left:22px;}
.um-cat-node{display:flex;flex-direction:column;align-items:flex-start;}
.um-cat-box{width:84px;height:38px;border:1px solid #a88955;display:flex;align-items:center;justify-content:center;font-family:'Newsreader',Georgia,serif;font-size:16px;color:#1a1814;background:transparent;}
.um-cat-lbl{font-family:'Newsreader',Georgia,serif;font-size:14.5px;color:#1a1814;line-height:1.35;margin-top:10px;}
.um-cat-dash{align-self:flex-start;margin-top:16px;color:#a88955;padding:0 14px;}
.um-cat-final{flex:1;display:flex;align-items:center;justify-content:center;border:1px solid #a88955;margin-left:10px;padding:0 22px;text-align:center;}
.um-cat-final span{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:14.5px;color:#1a1814;line-height:1.35;}


/* v=164 — Programmes finished program card (S2 design, shared by S3/S10) */
/* Ported from tmp_cards/um-program-card-S2.html. Page-wrapper body and universal-star rules dropped (site has them globally). Scoped under .um-card so generic names like um-hero/um-footer do not collide with site classes. Brain asset at /img/um-brain.png */
:root {
    --um-navy: #061f38;
    --um-navy-2: #082743;
    --um-gold: #8B6F3E;
    --um-cream: #FDFAF1;
    --um-brain-bg: #F3EEE8;
    --um-muted-blue: #54667a;
    --um-white: #ffffff;
    --um-radius: 18px;
    --um-line: 1px solid var(--um-gold);
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }



  .umpc-card {
    width: min(780px, 100%);
    background: var(--um-cream);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(7, 28, 49, .14);
    border: 1px solid var(--um-gold);
    font-family: var(--font-serif);
  }

  .umpc-card .umpc-top {
    display: grid;
    grid-template-columns: 48% 37% 15%;
    height: 214px;
    background: #F3EEE8;
    border-bottom: 1px solid var(--um-gold);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .umpc-card .umpc-hero {
    position: relative;
    z-index: 5;
    background: radial-gradient(120% 100% at 0 0, #0b2a49 0%, var(--um-navy) 60%, #031629 100%);
    padding: 28px 22px 24px 30px;
    color: var(--um-white);
    border-bottom-right-radius: 42px;
  }

  .umpc-card .umpc-label {
    margin: 0 0 15px;
    font-family: var(--font-mono);
    color: var(--um-gold);
    font-size: clamp(10px, 1.45vw, 12.5px);
    line-height: 1;
    letter-spacing: .055em;
    font-weight: 600;
    text-transform: uppercase;
  }

  .umpc-card .umpc-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(25.5px, 3.85vw, 33px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  .umpc-card .umpc-title span { display: block; white-space: nowrap; }

  .umpc-card .umpc-title-line {
    width: 94px;
    height: 1.5px;
    margin: 15px 0 14px;
    background: var(--um-gold);
  }

  .umpc-card .umpc-claim {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(10.8px, 1.5vw, 13.5px);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.015em;
  }

  .umpc-card .umpc-claim strong {
    font-size: 1.12em;
    font-weight: 600;
  }

  .umpc-card .umpc-brain {
    position: relative;
    display: block;
    align-self: stretch;
    height: 214px;
    background: #F3EEE8;
    overflow: visible;
    z-index: 0;
  }

  .umpc-card .umpc-brain img {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center center;
    mix-blend-mode: normal;
    opacity: 1;
    display: block;
    z-index: 0;
  }

  .umpc-card .umpc-dur-wrap {
    background: #F3EEE8;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 5px;
    position: relative;
    z-index: 10;
  }

  .umpc-card .umpc-dur {
    width: 82%;
    height: 172px;
    justify-self: start;
    background: linear-gradient(180deg, #9b742d 0%, var(--um-gold) 100%);
    color: var(--um-white);
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    justify-items: center;
    align-content: start;
    text-align: center;
    padding: 24px 10px 12px;
    border-radius: 0 0 12px 12px;
    margin-left: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    position: relative;
    z-index: 11;
  }

  .umpc-card .umpc-dur small {
    margin: 0;
    font-size: clamp(8px, 1.1vw, 10px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
  }

  .umpc-card .umpc-dur .umpc-days-number {
    width: 100%;
    margin: 9px 0 3px;
    display: block;
    text-align: center;
    font-size: clamp(34px, 5vw, 50px);
    line-height: .92;
    font-weight: 500;
    position: relative;
    left: 2px;
  }

  .umpc-card .umpc-dur .umpc-days-label {
    margin: 0;
    font-size: clamp(12px, 1.7vw, 17px);
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
  }

  .umpc-card .umpc-dur svg { width: 29px; height: 29px; }


  .umpc-card .umpc-dur img.umpc-top-calendar-icon {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    position: relative;
    top: 6px;
  }

  .umpc-card .umpc-foot img.umpc-foot-icon {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .umpc-card .umpc-book img.umpc-book-icon {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
    justify-self: center;
    filter: brightness(0) invert(1);
    position: relative;
    left: -10px;
  }


  .umpc-card .umpc-body {
    background: var(--um-cream);
  }

  .umpc-card .umpc-row {
    position: relative;
    display: grid;
    grid-template-columns: 62px 52px 1fr;
    align-items: center;
    min-height: 86px;
    padding: 16px 25px 16px 25px;
    border-bottom: 0;
    column-gap: 12px;
  }

  .umpc-card .umpc-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 0;
    height: 1px;
    background: rgba(139, 111, 62, .55);
  }

  .umpc-card .umpc-letter {
    width: 50px;
    height: 50px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(100% 100% at 22% 10%, #0d3356 0%, var(--um-navy) 70%);
    color: var(--um-white);
    font-family: var(--font-serif);
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    padding: 0;
    box-shadow: 0 2px 7px rgba(3, 18, 31, .18);
  }

  .umpc-card .umpc-letter::before {
    content: attr(data-letter);
    display: block;
    transform: translateY(0.04em);
  }

  .umpc-card .umpc-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    justify-self: start;
    align-self: center;
    color: var(--um-gold);
  }

  .umpc-card .umpc-icon img { width: 100%; height: 100%; display: block; }

  .umpc-card .umpc-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--um-gold);
  }

  .umpc-card .umpc-row-text {
    min-width: 0;
    min-height: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position: relative;
    top: 2px;
  }

  .umpc-card .umpc-row-title,
  .umpc-card .umpc-row-sub {
    margin: 0;
    font-family: var(--font-serif);
    display: grid;
    grid-template-columns: 23px 7px minmax(0, 1fr);
    column-gap: 3px;
    align-items: baseline;
    white-space: nowrap;
    letter-spacing: -0.015em;
  }

  .umpc-card .umpc-row-title {
    color: var(--um-navy);
    font-size: 11.6px;
    line-height: 1.08;
    font-weight: 500;
    text-transform: uppercase;
  }

  .umpc-card .umpc-row-sub {
    color: #3a342b;
    font-size: clamp(10.0px, 1.18vw, 11.8px);
    line-height: 1.2;
    font-weight: 400;
  }

  .umpc-card .umpc-row-sub .umpc-row-code {
    color: var(--um-gold);
  }

  .umpc-card .umpc-row-code,
  .umpc-card .umpc-row-pipe {
    display: block;
  }

  .umpc-card .umpc-row-code {
    text-align: left;
  }

  .umpc-card .umpc-row-pipe {
    text-align: center;
  }

  .umpc-card .umpc-row-copy {
    display: block;
    min-width: 0;
  }

  .umpc-card .umpc-foot {
    display: grid;
    grid-template-columns: 175px 1px 230px 1fr;
    align-items: center;
    min-height: 84px;
    padding: 14px 22px 14px 29px;
    border-top: 1px solid var(--um-gold);
    background: #EFE9D7;
    column-gap: 22px;
  }

  .umpc-card .umpc-foot-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .umpc-card .umpc-foot-divider {
    width: 1px;
    height: 43px;
    background: rgba(139, 111, 62, .72);
  }

  .umpc-card .umpc-foot svg {
    width: 38px;
    height: 38px;
    color: var(--um-gold);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
  }

  .umpc-card .umpc-foot-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none !important;
    color: var(--um-navy);
    font-weight: 500;
  }

  .umpc-card .umpc-foot-value {
    display: block;
    margin-top: 5px;
    font-family: var(--font-serif);
    color: var(--um-navy);
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    text-transform: none !important;
  }

  .umpc-card .umpc-book {
    justify-self: end;
    width: min(275px, 100%);
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #9d762f, var(--um-gold));
    color: var(--um-white);
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .035em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 18px;
    cursor: pointer;
    text-decoration: none;
    color: var(--um-white);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }

  .umpc-card .umpc-book svg {
    width: 25px;
    height: 25px;
    color: var(--um-white);
    stroke-width: 1.8;
  }

  .umpc-card .umpc-book .umpc-chevron {
    width: 13px;
    height: 13px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    display: block;
    flex: 0 0 auto;
    position: relative;
    left: 10px;
  }

  @media (max-width: 680px) {
    .umpc-card .umpc-top {
      grid-template-columns: 1fr;
      height: auto !important;
      min-height: auto;
    }
    .umpc-card .umpc-hero { border-bottom-right-radius: 0; }
    .umpc-card .umpc-brain {
      height: 220px;
      overflow: hidden;
    }
    .umpc-card .umpc-brain img {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      object-fit: contain !important;
      object-position: center center !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      transform: none !important;
    }
    .umpc-card .umpc-dur-wrap,
    .umpc-card .umpc-dur { display: none !important; }
    .umpc-card .umpc-row {
      grid-template-columns: 48px 46px 1fr;
      column-gap: 9px;
      padding: 13px 13px;
    }
    .umpc-card .umpc-letter { width: 42px; height: 42px; font-size: 24px; }
    .umpc-card .umpc-icon { width: 34px; height: 34px; }
    .umpc-card .umpc-row-title,
    .umpc-card .umpc-row-sub {
      white-space: normal;
      grid-template-columns: 21px 6px minmax(0, 1fr);
      column-gap: 2px;
    }
    .umpc-card .umpc-foot {
      grid-template-columns: 1fr;
      row-gap: 12px;
      padding: 14px 18px;
    }
    .umpc-card .umpc-foot-divider { display: none; }
    .umpc-card .umpc-book { justify-self: stretch; width: 100%; }
  }

/* v=165 — Programmes per-card detail tables: continuous solid separators + lining (normal) figures */
.um-mblock--solid{ font-variant-numeric: lining-nums; font-feature-settings:"lnum" 1; }
.um-mblock--solid .um-mblock__body{ padding:6px 20px !important; }
.um-mblock--solid .um-mblock__list{ display:block !important; margin:0; padding:0; list-style:none; }
.um-mblock--solid .um-mblock__list li{ display:grid !important; grid-template-columns:max-content minmax(0, 510px) max-content !important; column-gap:16px !important; align-items:baseline; border-bottom:1px solid rgba(139,111,61,0.28); padding:12px 0; }
.um-mblock--solid .um-mblock__list li:last-child{ border-bottom:none; }
.um-mblock--solid .um-mblock__list > li > span{ border-bottom:none !important; padding-top:0 !important; padding-bottom:0 !important; }

/* v=166 — Evidence article card (F.2 SVG overlay design) */
.umec-wrap{position:relative;width:100%;max-width:1100px;line-height:0;
  filter:drop-shadow(0 24px 50px rgba(38,48,74,.28));}
.umec-wrap > svg{width:100%!important;height:auto!important;display:block;}
.umec-link{position:absolute;left:61.390%;top:88.280%;width:36.140%;height:7.610%;
  border-radius:14px;display:block;text-indent:-9999px;overflow:hidden;cursor:pointer;outline:none;}
.umec-link:focus-visible{box-shadow:0 0 0 3px rgba(139,111,61,.6);}

/* v=170 — bars: bronze italic lead, plain-black text, BLACK bold "tenfold (10x)"; framed table + bold-black table header; 4px stack */
.umpc-stack{ display:flex; flex-direction:column; gap:4px; width:min(780px,100%); }
.umpc-stack > *{ margin:0 !important; }

.umpc-bar{
  width:100%; box-sizing:border-box;
  background:#efe9d7;
  border:1px solid var(--um-gold,#8b6f3e);
  font-family:var(--font-serif);
  display:flex; align-items:center; flex-wrap:wrap;
  padding:14px 25px; line-height:1.12;
}
.umpc-bar__lead{ color:var(--um-gold,#8b6f3e); font-style:italic; font-weight:500;
  font-size:clamp(18px,3.1vw,25px); letter-spacing:-0.01em; white-space:nowrap; }
.umpc-bar__txt{ color:var(--ink,#1a1814); font-style:normal; font-weight:400;
  font-size:clamp(17px,2.9vw,23px); letter-spacing:-0.01em; }
.umpc-bar__hi{ color:var(--ink,#1a1814); font-style:normal; font-weight:700; }
.umpc-bar__sep{ display:inline-block; width:1px; height:24px; align-self:center;
  background:var(--um-gold,#8b6f3e); opacity:.55; margin:0 14px; font-size:0; }

.umpc-stack .um-mblock--solid{
  border:1px solid var(--um-gold,#8b6f3e) !important;
  background:var(--um-cream,#fdfaf1);
  box-sizing:border-box;
}

/* v=171 — S3 (ex-S10) detail-table header: bold black (was missing from v=170) */
.umpc-stack .um-mblock--solid .um-mblock__head{ color:var(--ink,#1a1814) !important; font-weight:700 !important; }

/* v=173 — S3 (ex-S10): table-title bold black; header/footer/table-header separators BLACK (table ROW separators stay grey) */
.umpc-stack .um-mblock--solid .um-mblock__head > span:last-child{ font-weight:700 !important; color:var(--ink,#1a1814) !important; }
.umpc-stack .um-mblock--solid .um-mblock__head .um-mblock__sep{ color:var(--ink,#1a1814) !important; }
.umpc-bar__sep{ background:var(--ink,#1a1814) !important; opacity:1 !important; }
.umpc-stack .umpc-card .umpc-foot-divider{ background:var(--ink,#1a1814) !important; }

/* v=175 — bar lead not bold: keep bronze + italic + size, weight 500 -> 400 (both bars, all cards) */
.umpc-stack .umpc-bar__lead{ font-weight:400 !important; }

/* v=176 — BOOK NOW: cart + chevron snug to words (remove outward ±10px offsets) + lock one line */
.umpc-stack .umpc-card .umpc-book img.umpc-book-icon{ left:0 !important; }
.umpc-stack .umpc-card .umpc-book .umpc-chevron{ left:0 !important; }
.umpc-stack .umpc-card .umpc-book span:not(.umpc-chevron){ white-space:nowrap !important; }

/* v=177 — detail-table header number badge: bold (700), bronze unchanged (S2/S3/S10) */
.umpc-stack .um-mblock--solid .um-mblock__head .um-mblock__num{ font-weight:700 !important; color:#8b6f3d !important; }

/* v=178 — hero claim highlight (Nx) -> eyebrow bronze var(--um-gold) (was white); all 3 cards */
.umpc-stack .umpc-card .umpc-claim strong{ color:var(--um-gold) !important; }

/* v=179 — footer divider back to original bronze (undo accidental --ink black from v=173) */
.umpc-stack .umpc-card .umpc-foot-divider{ background:rgba(139,111,62,.72) !important; }

/* v=180 — hero symmetric horizontal padding: right 22 -> 30 (= left), matches PDF; title stays 2 lines */
.umpc-stack .umpc-card .umpc-hero{ padding-right:30px !important; }

/* v=181 — Applications intro subhead upright per Freiberg (global .um-subhead stays italic) */
.um-subhead--upright{ font-style:normal !important; }

/* v=182 — Applications 7.1 module list */
.um-modlist > li{ padding-left:0 !important; display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.um-modlist > li::before{ content:none !important; }
.um-modlist__label{ font-family:'IBM Plex Mono','Courier New',monospace; font-size:13px; font-weight:500; color:var(--ink,#1a1814); font-style:normal; white-space:nowrap; min-width:106px; }
.um-modlist-link{ font-family:'Newsreader',Georgia,serif; font-size:16px; color:var(--bz1,#8b6f3d); font-style:italic; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s; display:inline; }
.um-modlist-link:hover{ border-bottom-color:var(--bz1,#8b6f3d); }

/* v=183 — Applications 7.1 module list label: serif (Newsreader) upright, not mono */
.um-modlist__label{ font-family:'Newsreader',Georgia,serif !important; font-size:16px !important; font-weight:400 !important; font-style:normal !important; color:var(--ink,#1a1814) !important; }

/* v=184 — Applications module image menu (umm-) */
.umm-wrap{ width:100%; margin-top:32px; }


.umm-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.umm-card{
  display:block;
  text-decoration:none;
  background:var(--paper,#fdfaf1);
  border:1px solid var(--rule,rgba(139,111,61,.28));
  border-radius:0;
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  color:inherit;
}
.umm-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold,#8B6F3E);
  box-shadow:0 8px 22px rgba(6,31,56,.13);
}

.umm-img-wrap{
  aspect-ratio:3/2;
  overflow:hidden;
  border-bottom:1px solid var(--rule,rgba(139,111,61,.28));
}
.umm-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .4s ease;
}
.umm-card:hover .umm-img-wrap img{
  animation:umm-pulse 4s ease-in-out infinite;
}
@keyframes umm-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
}

.umm-caption{
  padding:12px 14px 14px;
  text-align:center;
}
.umm-caption__name,
.umm-caption__spec{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  color:var(--navy,#061f38);
  display:block;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.umm-caption__name{ margin-bottom:3px; }


/* v=185 — module menu: gap 5px; bands serif Cormorant, one line, #efe9d7 bg, correct type */
.umm-grid{ gap:5px !important; }
/* keep the same 5px gap between stacked grids (they were touching → looked squeezed) */
.umm-grid + .umm-grid{ margin-top:5px !important; }
/* home grid section bars (trake) — uniform small 5px spacing (same as the first bar / the card gap) */
.umm-bar{ margin:5px 0 5px !important; }
.umm-wrap > .umm-bar:first-child{ margin-top:0 !important; }
/* bronze fill back, inset 3px from the outer line (cream gap) — cream text */
.umm-bar{ background:#8b6f3e !important; color:#fdfaf1 !important; }
.umm-bar .um-roman{ color:#fdfaf1 !important; }
/* SOLID grey outer line (clearly grey, not bronze); bronze fill inset 3px so it doesn't reach the edge */
.umm-bar{ border:1px solid #8f8d8a !important; box-shadow:inset 0 0 0 3px #f5f2ea !important; }
/* size + font + text pulled 5px left — applies to ALL home grid bars */
.umm-bar{ height:56px !important; min-height:56px !important; align-items:center !important; padding:0 24px 0 19px !important; font-size:15px !important; }
/* fix only the ugly old-style figures → lining numerals (font + weight stay as they were, no bold) */
.umm-bar{ font-variant-numeric:lining-nums !important; font-feature-settings:"lnum" 1 !important; }
/* bronze underline under the 1.3 (Welcome) heading — width of the heading text only */
#s-practice .um-h2{ display:inline-block !important; border-bottom:2px solid #8b6f3e !important; padding-bottom:10px !important; }
/* last bar: SAME bronze fill + grey line — text in normal case (NOT all-caps), serif, like the proposal */
.umm-bar--end{ justify-content:space-between !important; text-transform:none !important; letter-spacing:0 !important; font-size:18px !important; }
.umm-bar--end .umm-end__l em{ font-style:italic !important; }
.umm-bar--end .umm-end__r{ color:#fdfaf1 !important; font-size:14px !important; text-transform:none !important; letter-spacing:0 !important; }


/* v=186 — module menu cards: uniform #fdfaf1 background (image + caption, no two-tone seam) */
.umm-card,
.umm-card .umm-img-wrap,
.umm-card .umm-caption{ background:#fdfaf1 !important; }


/* v=189 — bands + grid: Cormorant old-style figures, clean single rule set */
.umm-banner, .umm-foot{
  background:#efe9d7;
  border:1px solid var(--rule,rgba(139,111,61,.28));
  padding:13px 28px;
  text-align:left;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink,#1a1814);
  white-space:nowrap;
}
.umm-banner{ margin-bottom:5px; }
.umm-foot{ margin-top:5px; }
.umm-banner__lead, .umm-foot__lead{ font-style:italic; color:var(--bz1,#8b6f3d); }
.umm-banner__ink{ font-style:normal; color:var(--ink,#1a1814); }


/* v=190 — bands + captions: Cormorant lining figures (no onum fallback to Georgia) */
.umm-banner, .umm-foot{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}


/* v=191 — module cards: name weight 600->500, spec aligned at 500 */

/* v=192 — module grid: smooth scroll + arrived highlight */
.umm-card{ scroll-margin-top:80px; }
.umm-card--arrived{
  border-color:var(--gold,#8B6F3E) !important;
  box-shadow:0 8px 22px rgba(6,31,56,.13) !important;
}
.umm-card--arrived .umm-img-wrap img{
  animation:umm-pulse 4s ease-in-out 1 !important;
}

/* v=193 — module grid captions: left-aligned, trimmed sizes to match doc */

/* v=194 — module grid: scroll-margin 120px + bronze bottom-line on hover/:target */
.umm-card{ position:relative; scroll-margin-top:120px; }
.umm-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--bz1,#8b6f3d);
  opacity:0;
  transition:opacity .15s;
}
.umm-card:hover::after,
.umm-card:target::after{ opacity:1; }

/* v=195 — module grid: is-selected persists hover/active state after subnav click */
.umm-card.is-selected::after{ opacity:1; }
.umm-card.is-selected{ border-color:var(--gold,#8B6F3E); }
.umm-card.is-selected .umm-img-wrap img{ animation:umm-pulse 4s ease-in-out infinite; }

/* v=196 — sticky strip: bronze underline on hover (active already has it) */
.um-stickybar__item:hover{
  color:var(--bz1,#8b6f3d);
  border-bottom-color:var(--bz1,#8b6f3d);
}

/* v=197 — module list labels: clickable links, black hover underline */
.um-modlist__label{
  color:var(--ink,#1a1814);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.um-modlist__label:hover{ border-bottom-color:var(--ink,#1a1814); }

/* v=198 — module list label hover: black underline -> bronze to match sentence link */
.um-modlist__label:hover{ border-bottom-color:var(--bz1,#8b6f3d); }

/* v=199 — module list label: remove min-width floor so hover line hugs text exactly */
.um-modlist__label{ min-width:0 !important; width:fit-content !important; }

/* v=200 — module list label: restore spacing (margin-right) without widening underline */
.um-modlist__label{ margin-right:29px; }

/* v=201 — UM-MP form: serif labels 18px, wider col 380px, type-label bottom-aligned, outlined serif buttons */

/* type row (2nd form-row): label aligns to bottom, beside the last/3rd radio row */
.um-mp-form .um-mp-form-row:nth-child(2) {
  align-items: end;
}

/* START button — outlined, paper4 bg, rule border, serif, ink, no fill */
.um-mp-btn--primary {
  background: #fdfaf1;
  color: var(--ink, #1a1814);
  border-color: rgba(139, 111, 61, .28);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .03em;
}
.um-mp-btn--primary:hover {
  background: var(--paper2, #efe9d7);
  color: var(--bz1, #8b6f3d);
  border-color: var(--bz1, #8b6f3d);
}

/* HOME/ghost button — serif to match START */
.um-mp-btn--ghost {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .03em;
}

/* v=202 — UM-MP form options: ONE row-box per row, 3-col grid, no per-radio borders */

/* Type: bottom-border on rows 1 & 2 (children 1–6) — kept for type grid row dividers */
.um-mp-form-controls--grid .um-mp-radio:nth-child(-n+6) {
  border-bottom: 1px solid rgba(139, 111, 61, .28);
}

/* v=203 — UM-MP test config: clean layout (aligned grid, type label bottom) */
.um-mp-form-row{
  display:grid;
  grid-template-columns:400px 1fr;
  gap:14px;
  margin-bottom:14px;
  align-items:stretch;
}
.um-mp-form-label{
  background:var(--paper2,#efe9d7);
  border:1px solid var(--rule,rgba(139,111,61,.28));
  display:flex; align-items:center;
  padding:18px 24px; margin:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink2,#3a342b);
  white-space:nowrap;
}
.um-mp-form-row:has(.um-mp-form-controls--grid) > .um-mp-form-label{ align-self:end; }
.um-mp-form-controls{
  background:var(--paper4,#fdfaf1);
  border:1px solid var(--rule,rgba(139,111,61,.28));
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-content:center;
}
.um-mp-radio{
  display:flex; align-items:center; gap:11px;
  padding:15px 24px; margin:0;
  border:none; background:none;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px; color:var(--ink,#1a1814);
  white-space:nowrap; cursor:pointer;
}

/* v=204 — tones notation diagram */
.um-tones{max-width:880px;margin:0 auto;}
.um-tones svg{width:100%;height:auto;display:block;}
.um-tones-stack{max-width:880px;margin:0 auto;}
.um-tones-stack .um-tones{max-width:100%;margin:0;}

/* v=172 — UM-MP test-config options (overflow-proof, doctor per-row) */
.umtc,.umtc *{box-sizing:border-box;}
.umtc{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr);gap:9px 12px;align-items:stretch;margin:8px 0 4px;}
.umtc-label{background:var(--paper2,#efe9d7);border:1px solid var(--rule,rgba(139,111,61,.30));display:flex;align-items:center;padding:10px 16px;font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;color:var(--ink2,#3a342b);line-height:1.2;}
.umtc-box{background:var(--paper4,#fdfaf1);border:1px solid var(--rule,rgba(139,111,61,.30));display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:12px 20px;min-height:52px;}
.umtc-opt{display:inline-flex;align-items:center;gap:8px;font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;color:var(--ink,#1a1814);cursor:pointer;}
.umtc-opt input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid var(--bz1,#8b6f3d);border-radius:50%;margin:0;flex:0 0 auto;}
.umtc-opt input:checked{background:var(--bz1,#8b6f3d);box-shadow:inset 0 0 0 3px var(--paper4,#fdfaf1);}
.umtc-start{grid-column:2;display:flex;justify-content:flex-end;gap:12px;margin-top:6px;}
.umtc-start .umtc-startbtn{background:var(--paper4,#fdfaf1);border:1px solid var(--rule,rgba(139,111,61,.30));padding:13px 36px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2,#3a342b);cursor:pointer;line-height:1;}
.umtc-start .umtc-startbtn:hover{background:var(--paper2,#efe9d7);}

/* v=205 — modlist current-item persistent underline */
.um-modlist li.is-current .um-modlist__label,
.um-modlist li.is-current .um-modlist-link{ border-bottom-color: var(--bz1,#8b6f3d); }
/* v=206 — Colours module top (umcol-): 2-3-3 groups + hover swatches + hex wheel + 8x8 fields. Scoped; no global overrides. */
.umcol-swatch{box-sizing:border-box}
.umcol-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:40px}
.umcol-glabel{font-family:var(--mono,'IBM Plex Mono','Courier New',monospace);letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--ink2,#3a342b);padding-bottom:8px;border-bottom:1px solid rgba(139,111,61,.5);margin-bottom:16px}
.umcol-sw{display:flex;gap:10px}
.umcol-swatch{display:inline-block;width:66px;height:66px;border:1px solid rgba(139,111,61,.5);transition:transform .16s cubic-bezier(.2,.7,.3,1.3);cursor:pointer}
.umcol-swatch:hover{transform:scale(1.12);position:relative;z-index:3;box-shadow:0 5px 16px rgba(0,0,0,.28)}
.umcol-gdesc{font-family:var(--read,'Newsreader',Georgia,serif);font-size:14.5px;line-height:1.55;color:var(--ink2,#3a342b);margin-top:16px}
.umcol-gdesc em{color:var(--bz1,#8b6f3d);font-style:italic}
.umcol-fields{margin-top:48px}/* v=207 — Colours module (umcol-): 2-3-3 groups + hover swatches + 8x8 fields (no hex wheel). Scoped; no global overrides. */
.umcol-swatch{box-sizing:border-box}
.umcol-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:40px}
.umcol-glabel{font-family:var(--mono,'IBM Plex Mono','Courier New',monospace);letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--ink2,#3a342b);padding-bottom:8px;border-bottom:1px solid rgba(139,111,61,.5);margin-bottom:16px}
.umcol-sw{display:flex;gap:10px}
.umcol-swatch{display:inline-block;width:66px;height:66px;border:1px solid rgba(139,111,61,.5);transition:transform .16s cubic-bezier(.2,.7,.3,1.3);cursor:pointer}
.umcol-swatch:hover{transform:scale(1.12);position:relative;z-index:3;box-shadow:0 5px 16px rgba(0,0,0,.28)}
.umcol-gdesc{font-family:var(--read,'Newsreader',Georgia,serif);font-size:14.5px;line-height:1.55;color:var(--ink2,#3a342b);margin-top:16px}
.umcol-gdesc em{color:var(--bz1,#8b6f3d);font-style:italic}
.umcol-fields{margin-top:48px}/* v=208 — Colours module (umcol-): 2-3-3 groups + hover swatches + hex wheel + 8x8 fields; cells box-in-box. Scoped; no global overrides. */
.umcol-swatch{box-sizing:border-box}
.umcol-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:40px}
.umcol-glabel{font-family:var(--mono,'IBM Plex Mono','Courier New',monospace);letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--ink2,#3a342b);padding-bottom:8px;border-bottom:1px solid rgba(139,111,61,.5);margin-bottom:16px}
.umcol-sw{display:flex;gap:10px}
.umcol-swatch{display:inline-block;width:66px;height:66px;border:1px solid rgba(139,111,61,.5);transition:transform .16s cubic-bezier(.2,.7,.3,1.3);cursor:pointer}
.umcol-swatch:hover{transform:scale(1.12);position:relative;z-index:3;box-shadow:0 5px 16px rgba(0,0,0,.28)}
.umcol-gdesc{font-family:var(--read,'Newsreader',Georgia,serif);font-size:14.5px;line-height:1.55;color:var(--ink2,#3a342b);margin-top:16px}
.umcol-gdesc em{color:var(--bz1,#8b6f3d);font-style:italic}
.umcol-fields{margin-top:48px}/* v=209 — umcol-wheel figure: double-frame (outer paper+border, inner border) for colour-wheel image */
.umcol-wheel{border:1px solid #8b6f3d;background:var(--paper4,#fdfaf1);padding:13px;margin:0}
.umcol-wheel__in{border:1px solid #8b6f3d;line-height:0;font-size:0}
.umcol-wheel__in img{display:block;width:100%;height:auto}
/* v=210 — shared module figure frame (box-in-box) — koristi se na SVIM modulima */
.um-mp-frame{border:1px solid #8b6f3d;background:var(--paper4,#fdfaf1);padding:13px;margin:0}
.um-mp-frame__in{border:1px solid #8b6f3d;line-height:0;font-size:0}
.um-mp-frame__in img{display:block;width:100%;height:auto}
/* v=211 — Letters 8×8 grid stack (um-letters-stack): two inline SVGs, seam-fix via nth-of-type */
.um-letters-stack svg{display:block;width:100%;height:auto}
.um-letters-stack svg:nth-of-type(2){margin-top:-9.7%}
/* v=212 — Letters 8×8 grid stack (um-letters-stack / um-letters) */
.um-letters-stack{max-width:880px;margin:0 auto;}
.um-letters-stack .um-letters{max-width:100%;margin:0;}
.um-letters{max-width:880px;margin:0 auto;}
.um-letters svg{width:100%;height:auto;display:block;}

/* v=213 — Chess interactive board (umchess); scoped; Dr. Freiberg pieces + board colours */
.umchess-wrap{display:flex;flex-direction:column;align-items:center;margin:10px 0 4px;}
.umchess-frame{background:#f7eede;border:1px solid var(--bz1,#8b6f3d);padding:16px;}
.umchess-board{--umc:min(520px,80vw);width:var(--umc);height:var(--umc);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:2px solid var(--bz1,#8b6f3d);touch-action:none;}
.umchess-sq{position:relative;display:flex;align-items:center;justify-content:center;}
.umchess-sq.is-light{background:#f7eede;}
.umchess-sq.is-dark{background:#d6aa62;}
.umchess-sq.is-hot{box-shadow:inset 0 0 0 3px var(--bz1,#8b6f3d);}
.umchess-rank,.umchess-file{position:absolute;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;color:var(--ink3,#6b6253);pointer-events:none;}
.umchess-rank{left:5px;top:3px;}.umchess-file{right:6px;bottom:2px;}
.umchess-pc{width:84%;height:84%;background-size:contain;background-repeat:no-repeat;background-position:center;cursor:grab;touch-action:none;transition:transform .14s cubic-bezier(.2,.7,.3,1.3),filter .14s;will-change:transform;}
.umchess-pc:hover{transform:translateY(-3px) scale(1.07);}
.umchess-pc.is-dragging{cursor:grabbing;position:fixed;z-index:50;pointer-events:none;width:calc(var(--umc,520px)/8*.84);height:calc(var(--umc,520px)/8*.84);filter:drop-shadow(0 6px 8px rgba(26,24,20,.3));}
.umchess-bar{display:flex;gap:14px;align-items:center;margin-top:16px;}
.umchess-btn{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#f5e9c8;background:var(--bz1,#8b6f3d);border:none;padding:10px 16px;cursor:pointer;transition:background .15s;}
.umchess-btn:hover{background:var(--ink,#1a1814);}
.umchess-legend{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:9.5px;letter-spacing:.14em;color:var(--ink3,#6b6253);text-transform:uppercase;}
.pc-wK{background-image:url('/img/modules/chess/wK.svg');}
.pc-wQ{background-image:url('/img/modules/chess/wQ.svg');}
.pc-wR{background-image:url('/img/modules/chess/wR.svg');}
.pc-wB{background-image:url('/img/modules/chess/wB.svg');}
.pc-wN{background-image:url('/img/modules/chess/wN.svg');}
.pc-wP{background-image:url('/img/modules/chess/wP.svg');}
.pc-bK{background-image:url('/img/modules/chess/bK.svg');}
.pc-bQ{background-image:url('/img/modules/chess/bQ.svg');}
.pc-bR{background-image:url('/img/modules/chess/bR.svg');}
.pc-bB{background-image:url('/img/modules/chess/bB.svg');}
.pc-bN{background-image:url('/img/modules/chess/bN.svg');}
.pc-bP{background-image:url('/img/modules/chess/bP.svg');}
/* v=214 — Chess outer labels: panel wrapper + 3×3 stage grid + file/rank label strips */
.umchess-panel{display:inline-block;background:#f7eede;border:1px solid var(--bz1,#8b6f3d);padding:18px;margin:8px 0 4px;}
.umchess-stage{--umc:min(520px,82vw);--lab:26px;display:grid;grid-template-columns:var(--lab) var(--umc) var(--lab);grid-template-rows:var(--lab) var(--umc) var(--lab);align-items:center;justify-items:center;}
.umchess-stage .umchess-board{--umc:min(520px,82vw);width:var(--umc);height:var(--umc);}
.umchess-files{width:var(--umc);display:grid;grid-template-columns:repeat(8,1fr);}
.umchess-files span{text-align:center;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:17px;color:var(--ink3,#6b6253);}
.umchess-ranks{height:var(--umc);display:grid;grid-template-rows:repeat(8,1fr);}
.umchess-ranks span{display:flex;align-items:center;justify-content:center;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:17px;color:var(--ink3,#6b6253);}
/* v=215 — Chess move log (umchess-moves) */
.umchess-moves{margin-top:16px;width:min(560px,86vw);background:var(--paper4,#fdfaf1);border:1px solid var(--rule,rgba(139,111,61,.28));padding:12px 16px;}
.umchess-moves__label{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bz1,#8b6f3d);margin-bottom:8px;}
.umchess-moves__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px 18px;}
.umchess-moves__list li{font-family:var(--read,'Newsreader',Georgia,serif);font-size:14px;color:var(--ink2,#3a342b);display:flex;align-items:baseline;gap:6px;}
.umchess-moves__list li::before{content:"";width:7px;height:7px;border:1px solid var(--ink2,#3a342b);display:inline-block;flex:0 0 auto;}
.umchess-moves__list li.is-w::before{background:#fff;}
.umchess-moves__list li.is-b::before{background:var(--ink,#1a1814);}
.umchess-moves__n{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;color:var(--ink3,#6b6253);}
.umchess-moves__empty{font-family:var(--read,'Newsreader',Georgia,serif);font-style:italic;color:var(--ink3,#6b6253);}
.umchess-moves__empty::before{display:none!important;}
/* v=216 — Amiri font for Arabic harfs cells */
.um-harfs__cell span{font-family:'Amiri','Geeza Pro','Noto Naskh Arabic',serif;font-weight:400;font-size:clamp(24px,4vw,40px);line-height:1;color:var(--bz1,#8b6f3d);}

/* v=217 — Arabic harfs grid (um-harfs): stack wrapper, 8-col grid, bronze double-border cells, hover scale + Quran calligraphy image */
.um-harfs-stack{max-width:880px;margin:0 auto 8px;}
.um-harfs{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;}
.um-harfs__cell{position:relative;aspect-ratio:1/1;background:var(--paper4,#fdfaf1);border:1px solid var(--bz1,#8b6f3d);display:flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s cubic-bezier(.2,.7,.3,1.3);}
.um-harfs__cell::before{content:"";position:absolute;inset:7px;border:1px solid var(--bz1,#8b6f3d);pointer-events:none;}
.um-harfs__cell:hover{transform:scale(1.07);z-index:2;}
.um-quran-kareem{text-align:center;margin:30px 0 8px;}
.um-quran-kareem img{width:52%;max-width:560px;height:auto;display:inline-block;}

/* v=218 — Quran layout like PDF: Bismillah full width + frame (img flush to inner frame), sura centered, translations 2-col */
.um-mp-quran-banner{text-align:center;margin:18px 0;}
.um-mp-quran-banner .um-mp-frame{display:block;width:100%;}
.um-mp-quran-banner .um-mp-frame__in{line-height:0;font-size:0;}
.um-mp-quran-banner .um-mp-frame__in img{display:block;width:100%;height:auto;}
.um-mp-sura-ar{text-align:center;max-width:760px;margin:24px auto;}
.um-mp-sura-ar__title{font-family:'Amiri',serif;font-weight:700;font-size:30px;color:var(--bz1,#8b6f3d);margin:0 0 2px;}
.um-mp-sura-ar__sub{font-family:'Amiri',serif;font-size:17px;color:var(--ink3,#6b6253);margin:0 0 18px;}
.um-mp-sura-ar .ayah{font-family:'Amiri',serif;font-size:27px;line-height:2.15;color:var(--ink,#1a1814);margin:2px 0;}
.um-mp-quran-trans{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:20px 0 4px;}
.um-mp-quran-trans .col__title{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-style:italic;font-weight:600;color:var(--bz1,#8b6f3d);font-size:20px;margin:0 0 2px;}
.um-mp-quran-trans .col__sub{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-style:italic;color:var(--ink3,#6b6253);font-size:15px;margin:0 0 10px;}
.um-mp-quran-trans p{font-family:var(--read,'Newsreader',Georgia,serif);font-size:15px;line-height:1.6;color:var(--ink2,#3a342b);margin:3px 0;}
.um-mp-quran-trans .translit p{font-style:italic;}
@media(max-width:800px){.um-mp-quran-trans{grid-template-columns:1fr;}}

/* v=219 — Bismillah: frame img fills naturally, no crop/distort */
.um-mp-quran-banner .um-mp-frame__in{height:auto;}
.um-mp-quran-banner .um-mp-frame__in img{width:100%;height:auto;display:block;}

/* v=220 — override old .um-mp-quran-banner img max-width:320px cap so Bismillah fills full frame */
.um-mp-quran-banner .um-mp-frame__in img{max-width:none;width:100%;height:auto;display:block;}

/* v=222 — module anchor: cancel the doubled 180+180 offset so #module lands just below the sticky topbar */
#module{scroll-margin-top:-90px !important;}

/* v=223 — lightbox: click module images to open fullscreen, X to close */
#um-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(15,12,8,.88);align-items:center;justify-content:center;cursor:zoom-out;}
#um-lightbox.is-open{display:flex;}
#um-lightbox__img{max-width:92vw;max-height:90vh;object-fit:contain;display:block;box-shadow:0 12px 60px rgba(0,0,0,.6);cursor:default;}
#um-lightbox__close{position:fixed;top:16px;right:20px;width:42px;height:42px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:26px;line-height:42px;text-align:center;cursor:pointer;user-select:none;transition:background .15s;}
#um-lightbox__close:hover{background:rgba(255,255,255,.22);}
.um-mp-frame__in img{cursor:zoom-in;}

/* v=224 — Arabic harfs grid: RTL flow so Alif starts top-right, reads right→left */
.um-harfs{direction:rtl;}

/* v=225 — Quran sura: bronze hairline under the Arabic subtitle, same width as text */
.um-mp-sura-ar__sub{display:inline-block;border-bottom:1px solid var(--bz1,#8b6f3d);padding-bottom:6px;}

/* v=226 — Quran sura header: title + subtitle on one line with full bronze underline */
.um-mp-sura-ar__header{font-family:'Amiri',serif;font-size:21px;font-weight:400;color:var(--bz1,#8b6f3d);margin:0 0 20px;padding-bottom:8px;border-bottom:1px solid var(--bz1,#8b6f3d);white-space:nowrap;}
/* remove old sub border now replaced */
.um-mp-sura-ar__sub{display:inline-block;border-bottom:none;padding-bottom:0;}

/* v=227 — sura header underline: match hr thickness/colour, inset 30px each side */
.um-mp-sura-ar__header{margin:0 30px 20px;border-bottom:1px solid var(--rule,rgba(139,111,61,.28));}

/* v=228 — sura header underline: inset 60px each side */
.um-mp-sura-ar__header{margin:0 60px 20px;}

/* v=229 — sura header underline: extra 50px inset each side (total 110px) */
.um-mp-sura-ar__header{margin:0 110px 20px;}

/* v=230 — Quran trans: bronze underline on col__title, cherry underline+hover on iqra spans */
.um-mp-quran-trans .col__title{display:inline-block;border-bottom:1px solid var(--bz1,#8b6f3d);padding-bottom:3px;margin-bottom:10px;transition:opacity .18s;cursor:default;}
.um-mp-quran-trans .col__title:hover{opacity:.6;}
.um-iqra{color:#8B2635;border-bottom:1px solid #8B2635;padding-bottom:1px;cursor:default;transition:border-bottom-width .12s,opacity .12s;}
.um-iqra:hover{border-bottom-width:2px;opacity:.75;}

/* v=231 — Quran trans: scale hover on titles + iqra (same cubic-bezier as harfs grid) */
.um-mp-quran-trans .col__title{transition:transform .18s cubic-bezier(.2,.7,.3,1.3);transform-origin:left center;}
.um-mp-quran-trans .col__title:hover{transform:scale(1.08);opacity:1;}
.um-iqra{display:inline-block;transition:transform .18s cubic-bezier(.2,.7,.3,1.3);transform-origin:center bottom;}
.um-iqra:hover{transform:scale(1.12);opacity:1;}

/* v=232 — sura header: same scale hover as col__title and um-iqra */
.um-mp-sura-ar__header{display:inline-block;transition:transform .18s cubic-bezier(.2,.7,.3,1.3);transform-origin:center bottom;cursor:default;}
.um-mp-sura-ar__header:hover{transform:scale(1.06);}

/* v=233 — (evidence card separator removed; replaced by v=247) */

/* ═══════════════════════════════════════════════════════════════════════
   v=234 — MOBILE RESPONSIVE (≤720px)
   Sve što je rađeno u ovoj sesiji + osnova layouta
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── BODY PADDING + OVERFLOW ─────────────────────────────────────────────
     Reset external CSS (um-evidence-cards, um-press-archive) that adds
     body padding and pushes topbar away from edges. */
  body{
    padding-top:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Clip horizontal overflow at html level (doesn't break sticky).
     Also clip the stickybar itself so its inner scroll items
     don't bleed into the page layout on evidence/method/etc. */
  html{ overflow-x:clip; }
  .um-stickybar{ overflow-x:clip !important; }

  /* ── TOPBAR — full-width + MENU button pinned to right corner ───────── */
  .um-topbar{
    width:100% !important;
    left:0 !important;
    right:0 !important;
    box-sizing:border-box !important;
  }
  .um-menu-toggle{
    margin-left:auto !important;
  }

  /* ── STICKYBAR FADE — remove fade below strip (swallows eyebrows) ───── */
  .um-stickybar::after{ display:none !important; }

  /* ── PERFORMANCE PRICES LIST (Twofold/Threefold/Tenfold) ────────────── */
  /* Parent <ul> is display:grid; li has display:contents (v=73) so spans
     land in the 3-col parent grid. Need 2-class selectors to beat specificity. */
  .um-perf-prices{
    display:block !important;
    row-gap:0 !important;
  }
  .um-perf-prices > li{
    display:block !important;
    margin-bottom:18px !important;
    padding-left:0 !important;
  }
  .um-perf-prices > li::before{ content:none !important; }
  .um-perf-prices .um-perf-desc{
    display:block !important;
    white-space:normal !important;
    padding-right:0 !important;
    justify-self:unset !important;
  }
  .um-perf-prices .um-perf-sep{ display:none !important; }
  .um-perf-prices .um-perf-code{
    display:block !important;
    padding-left:0 !important;
    margin-left:0 !important;
    font-style:italic !important;
    color:var(--bz1,#8b6f3d) !important;
  }

  /* ── BACK TO TOP — hidden on mobile, desktop untouched ──────────────── */
  .um-to-top{ display:none !important; }

  /* ── FOOTER mobile — keep links in a single horizontal row ──────────── */
  .um-footer__row{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    padding:0 16px !important;
    gap:0 !important;
    overflow:hidden !important;
  }
  .um-footer__nav a{
    font-size:10px !important;
    padding:2px 4px !important;
    white-space:nowrap;
  }
  /* Show only the left nav (has all 4 links), hide the duplicate right nav and separator */
  .um-footer__nav:not(.um-footer__nav--left){ display:none !important; }
  .um-footer__hline{ display:none !important; }
  .um-footer__nav--left{
    display:flex !important;
    flex-direction:row !important;
    gap:0 !important;
    flex-wrap:nowrap;
  }
  .um-footer__nav--left a::after{
    content:" |";
    color:rgba(139,111,61,0.4);
    margin:0 2px;
  }
  .um-footer__nav--left a:last-child::after{ content:none; }

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  .um-h1{font-size:clamp(28px,8vw,44px) !important;line-height:1.1;}
  .um-h2{font-size:clamp(22px,6vw,34px) !important;line-height:1.2;}
  .um-h3{font-size:18px !important;}
  .um-lede{font-size:16px !important;line-height:1.6;}
  .um-p{font-size:15px !important;}

  /* ── LAYOUT: collapse 3-col → 1-col ─────────────────────── */
  .um-hero,
  .um-hero:not(.um-hero--home){
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:24px 20px 16px !important;
  }
  .um-section{
    grid-template-columns:1fr !important;
    gap:20px !important;
    padding-top:24px !important;
    margin-top:32px !important;
  }
  .um-to-top{
    grid-template-columns:1fr !important;
    gap:0 !important;
    margin-top:32px !important;
  }
  .um-to-top__spacer{display:none !important;}
  .um-to-top__body{
    border-top:1px solid rgba(139,111,61,0.20) !important;
    padding-top:24px !important;
    padding-left:0 !important;
  }
  /* Hide both asides on mobile */
  .um-section__aside,
  .um-section__aside--right{
    display:none !important;
  }
  /* Remove side borders from body (were separating asides) */
  .um-section__body,
  .um-hero__body{
    border-left:none !important;
    border-right:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* ── STICKY BREADCRUMB STRIP ─────────────────────────────── */
  .um-breadstrip,
  .um-modelbar,
  [class*="strip"],[class*="breadcrumb"]{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }

  /* ── CONTENT PADDING — container 24px je dovoljan razmak ────── */
  .um-section--bare,
  .um-mp-block{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* ── MODULE FRAME IMAGES ─────────────────────────────────── */
  .um-mp-frame{
    width:100% !important;
    flex:unset !important;
    max-width:100% !important;
  }
  /* Flex rows with image + text → stack vertically */
  div[style*="display:flex"][style*="gap:32px"],
  div[style*="display: flex"][style*="gap: 32px"]{
    flex-direction:column !important;
    gap:16px !important;
  }

  /* ── HARFS GRID 8×8 ──────────────────────────────────────── */
  .um-harfs{gap:5px !important;}
  .um-harfs__cell span{font-size:clamp(14px,3.5vw,24px) !important;}

  /* ── NUMBERS / LETTERS / TONES GRIDS ────────────────────── */
  .um-numbers,
  .um-letters,
  .um-tones{gap:5px !important;}

  /* ── MODULE LIST (.um-modlist) ───────────────────────────── */
  .um-modlist{font-size:13px !important;}
  .um-modlist__label{display:block !important;margin-bottom:2px;}

  /* ── EVIDENCE CARDS — wrapper rule removed (v=247) ──────── */

  /* ── PRESS ARCHIVE ───────────────────────────────────────── */
  .press-archive,.press-item,.um-reference-master{
    width:100% !important;
    max-width:100% !important;
  }

  /* ── QURANIC LAYOUT ──────────────────────────────────────── */
  .um-mp-sura-ar{max-width:100% !important;padding:0 8px;}
  .um-mp-sura-ar .ayah{font-size:clamp(18px,5vw,27px) !important;}
  .um-mp-sura-ar__header{margin:0 20px 16px !important;font-size:16px !important;}
  .um-mp-quran-trans{grid-template-columns:1fr !important;gap:20px !important;}

  /* ── BISMILLAH BANNER ────────────────────────────────────── */
  .um-mp-quran-banner{margin:12px 0 !important;}

  /* ── CHESS BOARD ─────────────────────────────────────────── */
  .umchess-stage{
    --umc:min(280px,72vw) !important;
    --lab:20px !important;
  }
  .umchess-stage .umchess-board{
    --umc:min(280px,72vw) !important;
  }
  .umchess-panel{
    padding:10px !important;
  }

  /* ── LIGHTBOX ────────────────────────────────────────────── */
  #um-lightbox__img{max-width:96vw !important;max-height:80vh !important;}
  #um-lightbox__close{top:8px !important;right:8px !important;width:36px !important;height:36px !important;font-size:22px !important;line-height:36px !important;}

  /* ── SECTION CMP-DIVIDER HEADINGS ───────────────────────── */
  .um-cmp-divider{font-size:16px !important;padding:11px 14px !important;}

  /* ── APPLICATIONS GRID (3×3 module cards) ────────────────── */
  .umm-grid{grid-template-columns:repeat(2,1fr) !important;}
  .umm-card{min-height:160px !important;}

  /* ── MODULE MENU BANDS (banner + foot) ──────────────────── */
  /* white-space:nowrap causes horizontal overflow on narrow screens */
  .umm-banner,.umm-foot{
    white-space:normal !important;
    font-size:14px !important;
    padding:10px 14px !important;
  }
  .umm-wrap{overflow-x:hidden;}

  /* ── SUBHEADING (upright caps strip) ────────────────────── */
  .um-subhead{font-size:15px !important;line-height:1.4 !important;}
  .um-subhead--upright{font-size:12px !important;letter-spacing:.08em !important;}

  /* ── MBLOCK TABLE LAYOUT ─────────────────────────────────── */
  /* Default 600px grid column overflows on 375px screens */
  .um-mblock__list{
    grid-template-columns:1fr auto !important;
  }
  .um-mblock__list:has(.um-mblock__code){
    grid-template-columns:auto 1fr auto !important;
  }
  .um-mblock__head{
    padding:11px 14px !important;
    font-size:16px !important;
  }
  .um-mblock__body{padding:14px 12px !important;}

  /* Solid mblock (programme detail tables) */
  .um-mblock--solid .um-mblock__list li{
    grid-template-columns:max-content 1fr auto !important;
    column-gap:10px !important;
  }

  /* ── PROGRAMME BARS (umpc-bar) ───────────────────────────── */
  .umpc-bar{padding:10px 14px !important;}
  .umpc-bar__lead,.umpc-bar__txt{font-size:clamp(14px,4vw,18px) !important;}
  .umpc-bar__sep{display:none !important;}

  /* ── HERO--HOME specific ─────────────────────────────────── */
  .um-hero--home{padding:20px 20px 12px !important;}

  /* ── FOOTER: collapse dual nav → single centered row ────────── */
  .um-footer__nav:not(.um-footer__nav--left){display:none !important;}
  .um-footer__nav--left{justify-content:center !important;}
  .um-footer__row{padding:10px 20px !important;}
}

/* ── EXTRA SMALL (≤420px) ─────────────────────────────────────────── */
@media (max-width: 420px) {
  .um-harfs{grid-template-columns:repeat(8,1fr) !important;gap:3px !important;}
  .um-harfs__cell span{font-size:11px !important;}
  .umm-grid{grid-template-columns:1fr !important;}
  .umm-banner,.umm-foot{font-size:12px !important;}
  /* .um-evidence-cards-grid removed (v=247) */
  .um-h1{font-size:26px !important;}
}

/* v=235 — 10.3 four-dimension terms: bronze italic, scoped via em.um-dim (global .um-list em untouched) */
.um-list em.um-dim{ font-style:italic; color:var(--bz1); }

/* v=236 — general bronze-italic emphasis for body text (em.um-dim); also applies in lists by source order */
em.um-dim{ font-style:italic; color:var(--bz1); }

/* v=237 — (evidence card gap removed; replaced by v=247) */

/* v=238 — category dividers: marker gutter + title block so wrapped lines align under the title's first word */
.um-cmp-divider__m{ flex:0 0 auto; white-space:nowrap; }
.um-cmp-divider__t{ flex:1 1 auto; }

/* v=239 — al-Qur'an harf grid: smaller glyph + clearance from inner frame */
.um-harfs__cell span{font-size:clamp(18px,2.7vw,28px);padding:6px 0 2px;}

/* v=240 — category-name (h3.um-h3) wrap: line 2 aligns under the first label word */
.um-section__body > h3.um-h3:has(> .um-roman){
  padding-left: 1.71em;
  text-indent: -1.71em;
}

/* v=241 — Section 6 design: category bars + airy serif tables (Freiberg) */
.um-cat{display:grid;grid-template-columns:max-content max-content 1fr;align-items:baseline;column-gap:14px;
  background:var(--paper2,#efe9d7);border:1px solid rgba(139,111,61,.32);padding:13px 24px;margin:24px 0 14px;}
.um-cat__n{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:600;color:var(--bz1,#8b6f3d);line-height:1;}
.um-cat__sep{color:var(--bz1,#8b6f3d);font-size:17px;line-height:1;opacity:.65;}
.um-cat__t{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2,#3a342b);line-height:1.3;}
.um-t-head{display:grid;grid-template-columns:1fr 1fr;gap:26px;background:var(--paper2,#efe9d7);border:1px solid rgba(139,111,61,.32);padding:15px 26px;margin:0 0 5px;font-family:'Newsreader',Georgia,serif;font-size:16.5px;font-weight:500;color:var(--bz1,#8b6f3d);}
.um-t-body{border:1px solid rgba(139,111,61,.32);background:var(--paper4,#fdfaf1);}
.um-t-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:14px 26px;border-bottom:1px solid rgba(139,111,61,.16);font-family:'Newsreader',Georgia,serif;font-size:16.5px;line-height:1.4;}
.um-t-row:last-child{border-bottom:none;}
.um-t-row .ph{color:var(--bz1,#8b6f3d);}
.um-t-row .el{color:var(--ink2,#3a342b);}
@media (max-width:800px){
  .um-t-head,.um-t-row{gap:14px;padding:12px 16px;font-size:14px;}
  .um-cat{padding:11px 16px;}
}

/* v=242 — bronze inline code/label (upright, not bold) */
.um-code{color:var(--bz1,#8b6f3d);font-weight:500;font-style:normal;}

/* gold + italic emphasis (Dr. Freiberg corrections — recurring) */
.um-gold-em{color:#8b6f3d;font-style:italic;}

/* 2.3 conception key words: bronze (no italic) + underline directly under the words + hover */
.um-conc-key{color:#8b6f3d;font-style:normal;border-bottom:1px solid #8b6f3d;padding-bottom:1px;cursor:pointer;transition:color .15s ease,border-color .15s ease;}
.um-conc-key:hover{color:#6e5630;border-bottom-color:#6e5630;}
/* 2.3 conception subject (Memory / Intelligence / Memory and Intelligence) → italic + line under */
.um-conc-it{font-style:italic;border-bottom:1px solid currentColor;padding-bottom:1px;}

/* v=243 — 6.4 process flow (numeral chips + accent boxes) */
.um-flow{display:flex;align-items:flex-start;gap:6px;flex-wrap:nowrap;background:var(--paper4,#fdfaf1);border:1px solid rgba(139,111,61,.32);padding:24px 22px;margin:22px 0;overflow-x:auto;}
.um-flow__step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 0 auto;width:112px;}
.um-flow__chip{border:1px solid rgba(139,111,61,.32);background:var(--paper,#f5f2ea);width:66px;height:48px;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:600;color:var(--bz1,#8b6f3d);}
.um-flow__lbl{font-family:'Newsreader',Georgia,serif;font-size:13.5px;color:var(--ink2,#3a342b);margin-top:10px;line-height:1.32;}
.um-flow__box{border:1px solid rgba(139,111,61,.32);background:var(--paper4,#fdfaf1);width:152px;height:94px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Newsreader',Georgia,serif;font-size:15px;font-weight:500;color:var(--bz1,#8b6f3d);line-height:1.34;padding:0 14px;flex:0 0 auto;}
.um-flow__arrow{flex:0 0 auto;color:var(--bz1,#8b6f3d);font-size:18px;margin-top:15px;}

/* v=244 — 6.5: sequence-flow ink boxes + performance-cell sublabel */
.um-flow__box--ink{color:var(--ink2,#3a342b);}
.um-flow--seq .um-flow__box{width:170px;height:auto;min-height:88px;font-weight:400;}
.um-t-row .el small{display:block;font-size:inherit;}

/* v=245 — category-bar number font → Newsreader (numeral with serif foot) */
.um-cat__n{font-family:'Newsreader',Georgia,serif;}

/* v=246 — category-bar number: same height as label, lighter weight */
.um-cat__n{font-size:18px;font-weight:500;}

/* All "traka" title bars get the bronze thick left line (like .um-cmp-divider).
   Scoped via :has(.um-cat__t) so the .um-cat progression TABLE keeps its plain border. */
.um-cat:has(.um-cat__t){ border-left:3px solid #8b6f3d !important; }


/* v=247 — evidence cards final (12 cards, self-contained, no wrapper needed) */
/* spacing between bare-stacked cards (replaces v=233 + v=237; matches grid gap:36px) */
.um-evidence-card + .um-evidence-card{ margin-top:36px; }

/* Local fallback: if Newsreader is installed on the computer, the browser can use it even without Google Fonts. No font file is embedded here. */
:root {
  --um-cream: #FDFAF1;
  --um-cream-deep: #EFE9D7;
  --um-navy: #1F2E4B;
  --um-gold: #8B6F3E;
  --um-line: rgba(139, 111, 62, .36);
  --um-line-soft: rgba(139, 111, 62, .22);
  --um-white: #fff;

  --card-radius: 22px;
  --card-width: 1200px;
}

* { box-sizing: border-box; }

.um-evidence-card,
.um-evidence-card * {
  font-family: "UM Newsreader", "Newsreader", Georgia, "Times New Roman", serif !important;
}

.um-font-check {
  width: min(100%, var(--card-width));
  margin: 0 auto 12px;
  color: #8B6F3E;
  font-family: "UM Newsreader", "Newsreader", Georgia, "Times New Roman", serif !important;
  font-size: 18px;
  line-height: 1.2;
}


.um-evidence-card {
  width: min(100%, var(--card-width));
  margin: 0 auto;
  background: var(--um-cream);
  border: 1px solid var(--um-gold);
  border-radius: var(--card-radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 9px 24px rgba(31, 46, 75, .10);
}

.um-evidence-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--um-line);
  border-radius: calc(var(--card-radius) - 8px);
  pointer-events: none;
  z-index: 5;
}

.um-evidence-card__inner {
  position: relative;
  z-index: 1;
  padding: 40px 42px 0;
}

.um-evidence-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  column-gap: 56px;
  align-items: start;
}

.um-evidence-card__kicker {
  margin: 0 0 36px;
  color: var(--um-gold);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.um-evidence-card__title {
  margin: 0;
  max-width: 820px;
  color: var(--um-navy);
  font-size: clamp(46px, 5vw, 70px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.025em;
}

.um-evidence-card__badge {
  min-height: 232px;
  padding: 27px 24px 24px;
  border-radius: 9px;
  background: var(--um-gold);
  color: var(--um-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.um-evidence-card__badge-icon {
  width: 118px;
  height: 68px;
  margin-bottom: 13px;
}

.um-evidence-card__badge-label {
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.um-evidence-card__badge-rule {
  width: 74px;
  border-top: 1px solid rgba(255,255,255,.45);
  margin: 20px 0 12px;
}

.um-evidence-card__badge-year {
  font-size: 57px;
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.02em;
}

.um-evidence-card__badge-sub {
  margin-top: 6px;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
}

.um-evidence-card__divider {
  height: 1px;
  background: var(--um-line);
  margin: 52px 0 24px;
}

.um-evidence-card__body {
  display: grid;
  grid-template-columns: 1fr 1.07fr;
  column-gap: 62px;
  padding-bottom: 28px;
}

.um-evidence-meta {
  display: grid;
  grid-template-rows: repeat(4, auto);
  border-right: 1px solid var(--um-line-soft);
  padding-right: 30px;
}

.um-evidence-meta__item {
  min-height: 132px;
  display: grid;
  grid-template-columns: 120px 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--um-line-soft);
}

.um-evidence-meta__item:last-child { border-bottom: 0; }

.um-evidence-meta__rule {
  height: 74%;
  background: var(--um-line-soft);
}

.um-icon-circle {
  width: 82px;
  height: 82px;
  border: 2px solid var(--um-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--um-gold);
}

.um-icon-circle svg {
  width: 52px;
  height: 52px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.um-label {
  margin: 0 0 12px;
  color: var(--um-gold);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.um-meta-text {
  margin: 0;
  color: var(--um-navy);
  font-size: 28px;
  line-height: 1.17;
  font-weight: 400;
}

.um-keyfinding {
  padding: 18px 0 0;
  text-align: center;
}

.um-keyfinding__ornament {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
  gap: 34px;
  margin: 0 0 26px;
}

.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after {
  content: "";
  height: 1px;
  background: var(--um-line-soft);
}

.um-keyfinding__icon {
  width: 86px;
  height: 86px;
  margin: 0 auto;
  border: 2px solid var(--um-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--um-gold);
  position: relative;
}

.um-keyfinding__icon::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(139,111,62,.36) 0 1.2deg, transparent 1.2deg 8deg);
  opacity: .42;
  z-index: -1;
}

.um-keyfinding__icon svg {
  width: 54px;
  height: 54px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.um-keyfinding .um-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 25px;
  letter-spacing: .1em;
}

.um-keyfinding__label-rule {
  width: 250px;
  max-width: 55%;
  height: 1px;
  margin: 7px auto 16px;
  background: var(--um-line-soft);
}

.um-keyfinding__text {
  max-width: 560px;
  margin: 0 auto;
  color: var(--um-navy);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 400;
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

.um-keyfinding__text em {
  font-style: italic;
}

.um-evidence-card__footer {
  min-height: 132px;
  background: var(--um-cream-deep);
  border-top: 1px solid var(--um-line);
  padding: 29px 31px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px minmax(320px, 444px);
  align-items: center;
  gap: 30px;
}

.um-footer-ornament {
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  gap: 26px;
  align-items: center;
  color: var(--um-gold);
}

.um-footer-ornament::before,
.um-footer-ornament::after {
  content: "";
  height: 1px;
  background: var(--um-line-soft);
}

.um-footer-ornament svg {
  width: 88px;
  height: 58px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.um-publication-button {
  min-height: 74px;
  padding: 0 33px;
  border-radius: 9px;
  background: var(--um-gold);
  color: var(--um-white);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.um-publication-button:hover,
.um-publication-button:focus-visible {
  filter: brightness(.95);
  outline: 2px solid rgba(31, 46, 75, .3);
  outline-offset: 4px;
}

.um-publication-button__arrow {
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}






/* Exact SVG icons supplied from the design file */
.um-evidence-card__badge-icon,
.um-embedded-icon,
.um-footer-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.um-icon-circle:has(.um-embedded-icon),
.um-keyfinding__icon:has(.um-embedded-icon) {
  border: 0;
  color: inherit;
}

.um-keyfinding__icon:has(.um-embedded-icon)::before {
  display: none;
}

.um-footer-ornament .um-footer-icon {
  width: 96px;
  height: 70px;
}

.um-evidence-card__badge-icon {
  width: 128px;
  height: 58px;
  margin-bottom: 14px;
}

.um-icon-circle--embedded,
.um-keyfinding__icon--embedded {
  border: 0 !important;
}
.um-keyfinding__icon--embedded::before {
  display: none !important;
}


/* 734 px website target width: compact desktop layout aligned to the Corel/SVG card proportions. */
:root {
  --card-width: 734px;
  --card-radius: 14px;
}

.um-font-check {
  font-size: 13px;
}

@media (min-width: 641px) {
  .um-evidence-card::before {
    inset: 6px;
    border-radius: calc(var(--card-radius) - 5px);
  }

  .um-evidence-card__inner {
    padding: 24px 26px 0;
  }

  .um-evidence-card__header {
    grid-template-columns: minmax(0, 1fr) 175px;
    column-gap: 34px;
    align-items: start;
  }

  .um-evidence-card__kicker {
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.1;
  }

  .um-evidence-card__title {
    max-width: 500px;
    font-size: 43px;
    line-height: 1.08;
    letter-spacing: -.025em;
  }

  .um-evidence-card__badge {
    min-height: 142px;
    padding: 16px 15px 15px;
    border-radius: 6px;
  }

  .um-evidence-card__badge-icon {
    width: 72px;
    height: 42px;
    margin-bottom: 8px;
  }

  .um-evidence-card__badge-label {
    font-size: 13px;
  }

  .um-evidence-card__badge-rule {
    width: 45px;
    margin: 12px 0 7px;
  }

  .um-evidence-card__badge-year {
    font-size: 35px;
  }

  .um-evidence-card__badge-sub {
    margin-top: 4px;
    font-size: 15px;
  }

  .um-evidence-card__divider {
    margin: 32px 0 15px;
  }

  .um-evidence-card__body {
    grid-template-columns: 1fr 1.07fr;
    column-gap: 38px;
    padding-bottom: 17px;
  }

  .um-evidence-meta {
    border-right: 1px solid var(--um-line-soft);
    padding-right: 18px;
  }

  .um-evidence-meta__item {
    min-height: 81px;
    grid-template-columns: 73px 1px minmax(0, 1fr);
    column-gap: 20px;
    padding: 13px 0;
  }

  .um-evidence-meta__rule {
    height: 74%;
  }

  .um-icon-circle {
    width: 50px;
    height: 50px;
    border-width: 1.25px;
  }

  .um-icon-circle svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.2;
  }

  .um-label {
    margin-bottom: 7px;
    font-size: 13px;
    letter-spacing: .06em;
  }

  .um-meta-text {
    font-size: 17px;
    line-height: 1.17;
  }

  .um-keyfinding {
    padding-top: 11px;
  }

  .um-keyfinding__ornament {
    grid-template-columns: 1fr 56px 1fr;
    gap: 21px;
    margin-bottom: 16px;
  }

  .um-keyfinding__icon {
    width: 53px;
    height: 53px;
    border-width: 1.25px;
  }

  .um-keyfinding__icon::before {
    inset: -9px;
  }

  .um-keyfinding__icon svg {
    width: 33px;
    height: 33px;
    stroke-width: 2.1;
  }

  .um-keyfinding .um-label {
    margin-bottom: 4px;
    font-size: 15px;
    letter-spacing: .1em;
  }

  .um-keyfinding__label-rule {
    width: 153px;
    margin: 4px auto 10px;
  }

  .um-keyfinding__text {
    max-width: 343px;
    font-size: 16px;
    line-height: 1.25;
  }

  .um-evidence-card__footer {
    min-height: 81px;
    padding: 18px 19px;
    grid-template-columns: minmax(110px, 1fr) 104px minmax(196px, 272px);
    gap: 18px;
  }

  .um-footer-ornament {
    grid-template-columns: 1fr 54px 1fr;
    gap: 16px;
  }

  .um-footer-ornament svg {
    width: 54px;
    height: 36px;
    stroke-width: 2;
  }

  .um-publication-button {
    min-height: 45px;
    padding: 0 20px;
    border-radius: 6px;
    gap: 13px;
    font-size: 15px;
  }

  .um-publication-button__arrow {
    font-size: 26px;
  }
}


/* Final target dimensions supplied from website/Corel comparison: 734 × 580 px.
   The card remains responsive below 734 px, but the desktop design is fixed to the requested visual proportion. */
@media (min-width: 735px) {
  .um-evidence-card {
    width: 734px;
    height: 580px;
  }

  .um-evidence-card__inner {
    height: calc(580px - 81px);
    display: flex;
    flex-direction: column;
  }

  .um-evidence-card__body {
    flex: 1;
    align-items: stretch;
  }

  .um-evidence-card__footer {
    min-height: 81px;
    height: 81px;
  }
}



/* ------------------------------------------------------------------
   Corel-based fine adjustment supplied by the client.
   Important: the point values below are Corel design sizes, translated
   to CSS pixel sizes for the 734 × 580 px website card.
   Conversion used here: 6.425 Corel pt = 43.0 CSS px.
   ------------------------------------------------------------------ */
@media (min-width: 735px) {
  .um-font-check { display: none; }

  .um-evidence-card {
    width: 734px;
    height: 580px;
  }

  .um-evidence-card::before {
    inset: 6.75px;
    border-radius: 7px;
  }

  .um-evidence-card__inner {
    height: 508px;
    padding: 27px 25px 0;
    display: flex;
    flex-direction: column;
  }

  .um-evidence-card__header {
    grid-template-columns: minmax(0, 1fr) 176px;
    column-gap: 25px;
    align-items: start;
  }

  .um-evidence-card__kicker {
    margin: 0 0 16px;
    font-size: 23.4px; /* 3.5 pt */
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: .02em;
  }

  .um-evidence-card__title {
    max-width: 480px;
    font-size: 43px; /* 6.425 pt */
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.025em;
  }

  .um-evidence-card__badge {
    width: 176px;
    height: 135px;
    min-height: 135px;
    padding: 13px 12px 12px;
    border-radius: 5.5px;
  }

  .um-evidence-card__badge-icon {
    width: 74px;
    height: 35px;
    margin-bottom: 7px;
  }

  .um-evidence-card__badge-label {
    font-size: 17.2px; /* 2.57 pt */
    line-height: 1;
    font-weight: 600;
    letter-spacing: .015em;
  }

  .um-evidence-card__badge-rule {
    width: 45px;
    margin: 9px 0 6px;
  }

  .um-evidence-card__badge-year {
    font-size: 32px;
    line-height: .95;
  }

  .um-evidence-card__badge-sub {
    margin-top: 2px;
    font-size: 17.2px;
    line-height: 1;
  }

  .um-evidence-card__divider {
    margin: 21px 0 0;
  }

  .um-evidence-card__body {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    padding: 0;
    align-items: stretch;
  }

  .um-evidence-card__body::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--um-line-soft);
    transform: translateX(-.5px);
  }

  .um-evidence-meta {
    border-right: 0;
    padding: 0 22px 0 0;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
  }

  .um-evidence-meta__item {
    min-height: 0;
    height: auto;
    grid-template-columns: 63px 1px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0;
    border-bottom: 1px solid var(--um-line-soft);
    align-items: center;
  }

  .um-evidence-meta__item:last-child {
    border-bottom: 0;
  }

  .um-evidence-meta__rule {
    height: 62%;
  }

  .um-icon-circle,
  .um-icon-circle--embedded {
    width: 48.3px;
    height: 48.3px;
    border-width: 1.2px;
  }

  .um-icon-circle svg,
  .um-icon-circle img,
  .um-icon-circle .um-embedded-icon {
    width: 48.3px;
    height: 48.3px;
  }

  .um-label {
    margin: 0 0 4px;
    font-size: 17.2px; /* 2.57 pt */
    line-height: 1;
    font-weight: 600;
    letter-spacing: .055em;
  }

  .um-meta-text {
    font-size: 21.4px; /* 3.2 pt */
    line-height: 1.08;
    font-weight: 400;
  }

  .um-evidence-meta__item:first-child .um-meta-text {
    font-size: 23.4px; /* 3.5 pt */
  }

  .um-evidence-meta__item:nth-child(2) .um-meta-text {
    font-size: 21.4px; /* 3.2 pt */
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }

  .um-keyfinding {
    padding: 28px 0 0 22px;
    text-align: center;
  }

  .um-keyfinding__ornament {
    grid-template-columns: 1fr 48.3px 1fr;
    gap: 18px;
    margin: 0 0 14px;
  }

  .um-keyfinding__icon,
  .um-keyfinding__icon--embedded {
    width: 48.3px;
    height: 48.3px;
  }

  .um-keyfinding__icon svg,
  .um-keyfinding__icon img,
  .um-keyfinding__icon .um-embedded-icon {
    width: 48.3px;
    height: 48.3px;
  }

  .um-keyfinding .um-label {
    margin-bottom: 4px;
    font-size: 21.9px; /* 3.27 pt */
    line-height: 1;
    letter-spacing: .095em;
  }

  .um-keyfinding__label-rule {
    width: 114px;
    margin: 5px auto 10px;
  }

  .um-keyfinding__text {
    max-width: 285px;
    font-size: 23.3px; /* 3.48 pt */
    line-height: 1.12;
    font-weight: 400;
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
  }

  .um-evidence-card__footer {
    height: 72px;
    min-height: 72px;
    padding: 12px 19px;
    grid-template-columns: minmax(90px, 1fr) 76px 233px;
    gap: 18px;
  }

  .um-footer-ornament {
    grid-template-columns: 1fr 54px 1fr;
    gap: 14px;
  }

  .um-footer-ornament .um-footer-icon,
  .um-footer-ornament svg {
    width: 54px;
    height: 38px;
  }

  .um-publication-button {
    min-height: 43px;
    padding: 0 18px;
    border-radius: 5.5px;
    gap: 12px;
    font-size: 17.2px;
    line-height: 1;
    font-weight: 600;
  }

  .um-publication-button__arrow {
    font-size: 24px;
  }
}



/* ------------------------------------------------------------------
   CORRECTED TYPOGRAPHY PASS
   The previous version inflated the Corel point sizes. This override
   uses the supplied point values literally as CSS pt values.
   1 CSS pt = 1.333 CSS px.
   ------------------------------------------------------------------ */
@media (min-width: 735px) {
  .um-evidence-card__kicker {
    font-size: 3.5pt !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  .um-evidence-card__title {
    font-size: 6.425pt !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .um-evidence-card__badge-label {
    font-size: 2.57pt !important;
    line-height: 1.1 !important;
  }

  .um-evidence-card__badge-year {
    font-size: 6.425pt !important;
    line-height: 1 !important;
  }

  .um-evidence-card__badge-sub {
    font-size: 2.57pt !important;
    line-height: 1 !important;
  }

  .um-label {
    font-size: 2.57pt !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
  }

  .um-meta-text {
    font-size: 3.2pt !important;
    line-height: 1.18 !important;
  }

  .um-evidence-meta__item:first-child .um-meta-text {
    font-size: 3.5pt !important;
    line-height: 1.15 !important;
  }

  .um-evidence-meta__item:nth-child(2) .um-meta-text,
  .um-evidence-meta__item:nth-child(3) .um-meta-text,
  .um-evidence-meta__item:nth-child(4) .um-meta-text {
    font-size: 3.2pt !important;
    line-height: 1.18 !important;
  }

  .um-keyfinding .um-label {
    font-size: 3.27pt !important;
    line-height: 1.1 !important;
  }

  .um-keyfinding__text {
    font-size: 3.48pt !important;
    line-height: 1.22 !important;
  }

  .um-publication-button {
    font-size: 2.57pt !important;
    line-height: 1 !important;
  }

  .um-publication-button__arrow {
    font-size: 6pt !important;
  }
}



/* Adjustment: remove the inner all-around frame. Outer card border remains. */
.um-evidence-card::before {
  display: none !important;
}


/* Adjustment: footer background colour. */
.um-evidence-card__footer {
  background: #EFE9D7 !important;
}


/* Adjustment: structural line colour and upper/middle divider length. */
:root {
  --um-line: #8B6F3E;
  --um-line-soft: #8B6F3E;
}

.um-evidence-card__divider,
.um-evidence-meta__rule,
.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after,
.um-keyfinding__label-rule,
.um-footer-ornament::before,
.um-footer-ornament::after {
  background: #8B6F3E !important;
}

.um-evidence-card,
.um-evidence-card__footer,
.um-evidence-meta,
.um-evidence-meta__item,
.um-icon-circle,
.um-keyfinding__icon {
  border-color: #8B6F3E !important;
}

@media (min-width: 735px) {
  .um-evidence-card__divider {
    width: 698px !important;
    max-width: none !important;
    align-self: center !important;
    height: 1px !important;
    background: #8B6F3E !important;
  }
}





/* Adjustment: all CSS-drawn structural lines set to hairline thickness.
   0.5px is the thinnest practical visible line in modern browsers;
   some displays round it to 1 physical pixel. */
:root {
  --um-line: #8B6F3E;
  --um-line-soft: #8B6F3E;
}

.um-evidence-card,
.um-evidence-card__badge,
.um-evidence-card__footer,
.um-evidence-meta,
.um-evidence-meta__item,
.um-icon-circle,
.um-keyfinding__icon {
  border-color: #8B6F3E !important;
  border-width: 0.5px !important;
}

.um-evidence-card__divider,
.um-evidence-meta__rule,
.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after,
.um-keyfinding__label-rule,
.um-footer-ornament::before,
.um-footer-ornament::after {
  background: #8B6F3E !important;
  height: 0.5px !important;
}

.um-evidence-card__body::before {
  background: #8B6F3E !important;
  width: 0.5px !important;
}

.um-evidence-meta__item {
  border-bottom-width: 0.5px !important;
}

.um-evidence-meta__item:last-child {
  border-bottom-width: 0 !important;
}

.um-evidence-card__divider {
  height: 0.5px !important;
}



/* Adjustment: align the upper gold badge to the 698 px divider line.
   Card width: 734 px; divider width: 698 px; side offset: (734 - 698) / 2 = 18 px.
   Badge right edge aligns with divider right edge; top offset equals the same 18 px. */
@media (min-width: 735px) {
  .um-evidence-card {
    position: relative !important;
  }

  .um-evidence-card__header {
    display: block !important;
    position: relative !important;
    padding-right: 168px !important; /* 138px badge width + 30px breathing room */
  }

  .um-evidence-card__badge {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 138px !important;
    height: 180px !important;
    min-height: 180px !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    border-radius: 5.5px !important;
    box-sizing: border-box !important;
  }
}



/* Final correction: top-right gold badge should not depend on viewport media queries.
   It is positioned directly on the 734×580 desktop card:
   - card width: 734px
   - divider width: 698px, centered => 18px outer margin on left and right
   - badge size: 138px × 180px
   - badge right edge aligns with divider right edge
   - top offset equals right outer margin => 18px */
.um-evidence-card {
  position: relative !important;
  width: 734px !important;
  height: 580px !important;
}
.um-evidence-card__inner {
  padding-top: 18px !important;
}
.um-evidence-card__header {
  display: block !important;
  position: relative !important;
  padding-right: 156px !important; /* 138px badge + 18px safety */
  min-height: 180px !important;
}
.um-evidence-card__badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: 138px !important;
  height: 180px !important;
  min-height: 180px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.um-evidence-card__divider {
  width: 698px !important;
  max-width: 698px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Correction: badge dimensions were swapped.
   Correct size: width 180px, height 138px.
   Right edge aligns with the 698px divider line.
   Card width 734px, divider width 698px => right/top offset 18px. */
.um-evidence-card__header {
  padding-right: 198px !important; /* 180px badge + 18px safety */
  min-height: 138px !important;
}

.um-evidence-card__badge {
  top: 18px !important;
  right: 18px !important;
  width: 180px !important;
  height: 138px !important;
  min-height: 138px !important;
}


/* Correction: badge distance must be measured from the outer card edge, not from the header.
   Previous positioning was inside the header, which already had top padding.
   Therefore the visible top distance became larger than 18px.
   The badge is now positioned relative to the whole card. */
.um-evidence-card {
  position: relative !important;
}

.um-evidence-card__header {
  position: static !important;
  padding-right: 198px !important; /* reserve space for 180px badge + 18px gap */
  min-height: 138px !important;
}

.um-evidence-card__badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: 180px !important;
  height: 138px !important;
  min-height: 138px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* Header alignment correction:
   - the 698px divider line is centered in the 734px card
   - line start = (734px - 698px) / 2 = 18px
   - kicker and title start at the same x-position: 18px
   - kicker top aligns with badge top: 18px
*/
.um-evidence-card__inner {
  padding: 18px 18px 0 18px !important;
  box-sizing: border-box !important;
}

.um-evidence-card__header {
  position: static !important;
  display: block !important;
  padding: 0 198px 0 0 !important; /* 180px badge + 18px clear space */
  margin: 0 !important;
  min-height: 138px !important;
  box-sizing: border-box !important;
}

.um-evidence-card__kicker {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.um-evidence-card__title {
  margin-left: 0 !important;
}

.um-evidence-card__divider {
  width: 698px !important;
  max-width: 698px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Kicker size correction:
   Target: the visible kicker text should be approximately 174px wide.
   Text: "B.1 | MEMORY CAPACITY".
   Font size is increased and constrained only by typography, not by a fixed box. */
.um-evidence-card__kicker {
  font-size: 11.2px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}


/* Title block adjustment:
   - left edge starts at 18px from the card edge
   - right edge stops 18px before the gold badge
   - usable title block width approx. 498px
   - title sized for a 3-line layout
   - justified text
   - character spacing increased by approx. 15% */
.um-evidence-card__header {
  padding-right: 198px !important; /* reserve 180px badge + 18px gap */
  min-height: 138px !important;
}

.um-evidence-card__title {
  display: block !important;
  width: 498px !important;
  max-width: 498px !important;
  margin: 6px 0 0 0 !important;
  font-size: 24px !important;
  line-height: 1.06 !important;
  font-weight: 400 !important;
  text-align: justify !important;
  text-align-last: left !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0 !important;
}


/* Title refinement:
   - slightly lower overall position for more distance from the kicker
   - 3 lines should occupy about 93px total height
   - with 24px type, 93px / 3 ≈ 31px line box => line-height ≈ 1.29 */
.um-evidence-card__title {
  margin: 14px 0 0 0 !important;
  line-height: 1.29 !important;
}


/* Kicker correction: use regular weight instead of semibold */
.um-evidence-card__kicker {
  font-weight: 400 !important;
}


/* Badge icon adjustment:
   - width approx. 69px
   - centered horizontally in the gold badge
   - approx. 11px distance from the top edge of the gold badge */
.um-evidence-card__badge-icon {
  display: block !important;
  width: 69px !important;
  max-width: 69px !important;
  height: auto !important;
  margin: 11px auto 7px auto !important;
}


/* Badge icon correction:
   - only centered horizontally
   - top distance to the gold badge edge should be 11px total
   - therefore remove extra top padding from the badge and place the icon 11px from the top */
.um-evidence-card__badge {
  padding-top: 0 !important;
}

.um-evidence-card__badge-icon {
  display: block !important;
  width: 69px !important;
  max-width: 69px !important;
  height: auto !important;
  margin-top: 11px !important;
  margin-right: auto !important;
  margin-bottom: 7px !important;
  margin-left: auto !important;
}


/* Badge icon hard correction:
   Previous margin-based positioning was still affected by the badge's internal layout.
   The icon is now positioned absolutely inside the gold badge:
   - top: 11px from the gold badge edge
   - left/right centered
   - width: 69px */
.um-evidence-card__badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 180px !important;
  height: 138px !important;
  min-height: 138px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.um-evidence-card__badge-icon {
  position: absolute !important;
  top: 11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 69px !important;
  max-width: 69px !important;
  height: auto !important;
  margin: 0 !important;
}

.um-evidence-card__badge-label {
  margin-top: 52px !important;
}


/* Badge typography refinement:
   Peer-reviewed ≈ 88px wide
   2001 ≈ 60px wide
   Year ≈ 42px wide
   White divider line slightly shorter than the year width */
.um-evidence-card__badge-label {
  display: block !important;
  width: 88px !important;
  margin: 54px auto 0 !important;
  text-align: center !important;
  font-size: 10.6px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
}

.um-evidence-card__badge-rule {
  display: block !important;
  width: 50px !important; /* slightly shorter than the year width */
  height: 0.5px !important;
  margin: 8px auto 7px !important;
  background: #ffffff !important;
}

.um-evidence-card__badge-year {
  display: block !important;
  width: 60px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 25.5px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
}

.um-evidence-card__badge-sub {
  display: block !important;
  width: 42px !important;
  margin: 4px auto 0 !important;
  text-align: center !important;
  font-size: 12.2px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
}


/* Badge text correction:
   Keep "Peer-reviewed" on one line. */
.um-evidence-card__badge-label {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: none !important;
  text-align: center !important;
}


/* Gold badge spacing refinement:
   - top padding 11px
   - bottom padding 11px, so "Year" ends with the same outer distance
   - inner elements distributed evenly
   - icon remains horizontally centered, not absolutely positioned */
.um-evidence-card__badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 0 !important;
  box-sizing: border-box !important;
}

.um-evidence-card__badge-icon {
  position: static !important;
  transform: none !important;
  display: block !important;
  width: 69px !important;
  max-width: 69px !important;
  height: auto !important;
  margin: 0 !important;
}

.um-evidence-card__badge-label {
  margin: 0 !important;
  white-space: nowrap !important;
}

.um-evidence-card__badge-rule {
  margin: 0 !important;
}

.um-evidence-card__badge-year {
  margin: 0 !important;
}

.um-evidence-card__badge-sub {
  margin: 0 !important;
}


/* Icon background correction:
   Left metadata icons and Key Finding icon background colour. */
.um-icon-circle,
.um-keyfinding__icon {
  background: #EFE9D7 !important;
}


/* Correction: the coloured background must be limited to the circular icon area only. */
.um-icon-circle,
.um-icon-circle--embedded,
.um-keyfinding__icon,
.um-keyfinding__icon--embedded {
  background: #EFE9D7 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

/* Remove the larger halo behind the Key Finding icon so the fill stays inside the circle only. */
.um-keyfinding__icon::before,
.um-keyfinding__icon--embedded::before {
  display: none !important;
  content: none !important;
}


/* Correction: only the INNER area of the circle should be coloured.
   The border ring itself stays separate. */
.um-icon-circle,
.um-icon-circle--embedded,
.um-keyfinding__icon,
.um-keyfinding__icon--embedded {
  background: transparent !important;
  position: relative !important;
  overflow: visible !important;
}

/* Inner circular fill only */
.um-icon-circle::after,
.um-icon-circle--embedded::after,
.um-keyfinding__icon::after,
.um-keyfinding__icon--embedded::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 50% !important;
  background: #EFE9D7 !important;
  z-index: 0 !important;
}

/* Keep the actual icon artwork above the inner fill */
.um-icon-circle svg,
.um-icon-circle img,
.um-icon-circle .um-embedded-icon,
.um-keyfinding__icon svg,
.um-keyfinding__icon img,
.um-keyfinding__icon .um-embedded-icon {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* No outer halo behind key finding icon */
.um-keyfinding__icon::before,
.um-keyfinding__icon--embedded::before {
  display: none !important;
  content: none !important;
}


/* Refinement: make the coloured inner fill smaller.
   The fill now sits further inside the circular border/artwork. */
.um-icon-circle::after,
.um-icon-circle--embedded::after,
.um-keyfinding__icon::after,
.um-keyfinding__icon--embedded::after {
  inset: 4px !important;
}


/* Left-column icon refinement:
   Add a vertical line to the left of each icon.
   - distance from line to icon: 20px
   - line height: 48px
   - line colour: #8B6F3E
*/
.um-evidence-meta__item {
  position: relative !important;
  padding-left: 20px !important;
  box-sizing: border-box !important;
}

.um-evidence-meta__item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.5px !important;
  height: 48px !important;
  background: #8B6F3E !important;
}


/* Correction:
   The vertical line should be to the RIGHT of each left-side icon, not to the left.
   - distance from icon to line: 20px
   - line height: 48px
   - line colour: #8B6F3E
*/
.um-evidence-meta__item {
  padding-left: 0 !important;
}

.um-evidence-meta__item::before {
  display: none !important;
  content: none !important;
}

.um-icon-circle,
.um-icon-circle--embedded {
  position: relative !important;
}

.um-icon-circle::before,
.um-icon-circle--embedded::before {
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 20px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.5px !important;
  height: 48px !important;
  background: #8B6F3E !important;
}


/* Left metadata text alignment:
   Icon -> 20px gap -> vertical line -> 20px gap -> text start.
   Existing metadata grid has: icon column | rule column | text column.
   We set:
   - icon column width: 48.3px
   - first gap after icon: 20px
   - rule column: 0.5px
   - second gap before text: 20px
*/
.um-evidence-meta__item {
  grid-template-columns: 48.3px 0.5px minmax(0, 1fr) !important;
  column-gap: 20px !important;
  padding-left: 0 !important;
}

/* Use the original grid line between icon and text, not the pseudo-line on the icon. */
.um-icon-circle::before,
.um-icon-circle--embedded::before {
  display: none !important;
  content: none !important;
}

.um-evidence-meta__rule {
  width: 0.5px !important;
  height: 48px !important;
  background: #8B6F3E !important;
  align-self: center !important;
  justify-self: center !important;
}


/* Gold metadata labels:
   - all four labels use the same size
   - calibrated so "Author" is about 49px wide
   - the label starts at the same top level as the 48px vertical line
*/
.um-evidence-meta__item {
  align-items: start !important;
}

.um-evidence-meta__rule {
  align-self: start !important;
  margin-top: 0 !important;
  height: 48px !important;
}

.um-evidence-meta__item > div:last-child {
  align-self: start !important;
  margin-top: 0 !important;
}

.um-label {
  display: inline-block !important;
  margin: 0 0 4px 0 !important;
  font-size: 12.6px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  width: max-content !important;
}


/* Correction:
   The gold labels should align with the TOP of the vertical line beside each icon,
   not with the horizontal separator line of the metadata row.

   Method:
   - icon, vertical line and text column are vertically centred as a group
   - the vertical line is 48px high
   - the text block is also treated as a 48px-high top-aligned block
   - therefore the first label line starts at the same height as the vertical line
*/
.um-evidence-meta__item {
  align-items: center !important;
}

.um-evidence-meta__rule {
  align-self: center !important;
  height: 48px !important;
  margin-top: 0 !important;
}

.um-evidence-meta__item > div:last-child {
  align-self: center !important;
  height: 48px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: block !important;
  overflow: visible !important;
}

.um-label {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Gold metadata labels:
   - uppercase labels
   - "AUTHOR" must not exceed approx. 49px width
   - therefore the label font size is reduced */
.um-label {
  text-transform: uppercase !important;
  font-size: 9.4px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  max-width: none !important;
  white-space: nowrap !important;
}


/* Author-name reference size:
   The current example name "Nelson Cowan" should be about 92px wide.
   This sets the font size for the metadata value text; other names may naturally
   become longer or shorter depending on their actual length. */
.um-evidence-meta__item:first-child .um-meta-text {
  font-size: 12.7px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}


/* University / Institution reference size:
   The current example text "University of Missouri" should be about 136px wide. */
.um-evidence-meta__item:nth-child(3) .um-meta-text {
  font-size: 10.8px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}


/* Field text:
   - may extend to the right end of the left-column content area
   - wraps automatically within a text field of about 242px
   - in this example it should break into:
     "Short-Term Memory · Working Memory"
     "Capacity Limits"
*/
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  white-space: normal !important;
  line-height: 1.08 !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Field text correction:
   The text field remains about 242px wide, but the font is enlarged.
   Target line break remains:
   "Short-Term Memory · Working Memory"
   "Capacity Limits"
*/
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 12.7px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Field text update:
   longer example text should still fit in two lines within ~242px width */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 9.4px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Field text refinement:
   Enlarge the field text so that "interval" moves to the second line. */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  font-size: 10.2px !important;
  line-height: 1.12 !important;
}


/* Field text refinement:
   Increase the field text further so that "interval" moves to the second line. */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  font-size: 11.4px !important;
  line-height: 1.12 !important;
}


/* Field text refinement:
   Increase the field text a few more pixels. */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  font-size: 13.2px !important;
  line-height: 1.12 !important;
}


/* Field text correction:
   Reduce from the previous too-large size.
   The field text is constrained to two lines. */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 12.1px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Field text refinement:
   Keep the text at two lines, but increase the line spacing slightly. */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  line-height: 1.18 !important;
}


/* Published in text:
   Match the Field text field:
   - width: 242px
   - two-line layout
   - same line spacing approach */
.um-evidence-meta__item:nth-child(2) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  white-space: normal !important;
  text-align: left !important;
  text-align-last: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
}


/* Metadata text weight correction:
   The value text under AUTHOR, PUBLISHED IN, UNIVERSITY / INSTITUTION and FIELD
   is regular, not semibold. Gold labels remain semibold unless changed separately. */
.um-evidence-meta .um-meta-text {
  font-weight: 400 !important;
}


/* Gold metadata labels:
   Requested refinement:
   font-weight: 400;
   letter-spacing: 0.06em; */
.um-evidence-meta .um-label {
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
}


/* Right side alignment:
   Align the Key Finding icon vertically with the Author icon on the left side. */
.um-keyfinding {
  padding-top: 0 !important;
}

.um-keyfinding__ornament {
  margin-top: 0 !important;
  align-items: center !important;
}

.um-keyfinding__icon,
.um-keyfinding__icon--embedded {
  align-self: center !important;
}


/* Right side alignment refinement:
   The TOP of the Key Finding icon should align with the TOP of the Author icon.
   The left metadata rows centre a 48.3px icon within the first row; this offset is
   reproduced on the Key Finding side. */
.um-keyfinding {
  padding-top: 18px !important;
}

.um-keyfinding__ornament {
  margin-top: 0 !important;
  align-items: center !important;
}


/* Key Finding label:
   - same typography parameters as the gold labels on the left
   - font-weight: 400
   - letter-spacing: 0.06em
   - calibrated so "KEY FINDING" is about 95px wide */
.um-keyfinding .um-label {
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  font-size: 11.2px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


/* Key Finding text block:
   Geometry check:
   Card width = 734px.
   Central vertical line at 50% = 367px.
   Right outer content line/margin = 734px - 18px = 716px.
   Text block starts 18px to the right of the central line: 367px + 18px = 385px.
   Available width = 716px - 385px = 331px.

   Therefore: right-side column receives 18px left and right padding;
   the text field itself is 331px wide.
*/
.um-keyfinding {
  box-sizing: border-box !important;
  width: 367px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.um-keyfinding__text {
  width: 331px !important;
  max-width: 331px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  text-align: justify !important;
  text-align-last: left !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Correction: right Key Finding text spacing.
   The previous 331px field used the full distance from text start to the right line,
   so the 18px right margin was not actually reserved.

   Correct geometry:
   divider line width: 698px
   half of divider area: 349px
   left padding from centre line: 18px
   right padding to right line: 18px
   text width: 349px - 18px - 18px = 313px
*/
.um-keyfinding {
  box-sizing: border-box !important;
  width: 349px !important;
  max-width: 349px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.um-keyfinding__text {
  width: 313px !important;
  max-width: 313px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  text-align: justify !important;
  text-align-last: left !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Structural line visibility correction:
   Important structural lines are set to 1px so they remain visible at 100% browser zoom.
   Fine icon artwork remains unchanged. */
.um-evidence-card__divider,
.um-evidence-meta__rule,
.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after,
.um-keyfinding__label-rule,
.um-footer-ornament::before,
.um-footer-ornament::after {
  height: 1px !important;
  background: #8B6F3E !important;
}

.um-evidence-card__body::before {
  width: 1px !important;
  background: #8B6F3E !important;
}

.um-evidence-meta__item {
  border-bottom-width: 1px !important;
}

.um-evidence-card,
.um-evidence-card__badge,
.um-evidence-card__footer,
.um-evidence-meta,
.um-evidence-meta__item,
.um-icon-circle,
.um-keyfinding__icon {
  border-width: 1px !important;
  border-color: #8B6F3E !important;
}


/* Middle-section line colour refinement:
   Set the middle-area structure lines to #D8CDBB:
   - long horizontal divider below the header
   - central vertical divider
   - left metadata vertical and horizontal lines
   - Key Finding left/right ornament lines
*/
.um-evidence-card__divider,
.um-evidence-card__body::before,
.um-evidence-meta__rule,
.um-evidence-meta__item,
.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after,
.um-keyfinding__label-rule {
  border-color: #D8CDBB !important;
  background-color: #D8CDBB !important;
  background: #D8CDBB !important;
}


/* Correction:
   Only the LINES in the middle section should use #D8CDBB.
   Do NOT colour the backgrounds of the metadata rows or other content areas. */

/* Remove accidental row/background colouring (exempt .um-evidence-meta__rule — it IS the visible line) */
.um-evidence-meta__item,
.um-evidence-meta__item > div:not(.um-evidence-meta__rule),
.um-evidence-card__body,
.um-evidence-meta,
.um-keyfinding {
  background: transparent !important;
  background-color: transparent !important;
}

/* Long horizontal divider below the header */
.um-evidence-card__divider {
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  border-color: #D8CDBB !important;
}

/* Central vertical divider */
.um-evidence-card__body::before {
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
}

/* Left-side vertical lines beside the icons */
.um-evidence-meta__rule {
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  border-color: #D8CDBB !important;
}

/* Left-side horizontal separators between the metadata rows */
.um-evidence-meta__item {
  border-bottom-color: #D8CDBB !important;
}

.um-evidence-meta__item:last-child {
  border-bottom-color: transparent !important;
}

/* Key Finding ornament lines and label line */
.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after,
.um-keyfinding__label-rule {
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  border-color: #D8CDBB !important;
}

/* Keep icon circles and card borders gold unless separately changed */
.um-icon-circle,
.um-keyfinding__icon,
.um-evidence-card,
.um-evidence-card__badge,
.um-evidence-card__footer {
  border-color: #8B6F3E !important;
}

/* Preserve the intended inner icon fill */
.um-icon-circle::after,
.um-icon-circle--embedded::after,
.um-keyfinding__icon::after,
.um-keyfinding__icon--embedded::after {
  background: #EFE9D7 !important;
}


/* Correction:
   Restore the vertical lines between the left icons and the text.
   They disappeared because later rules made line/background handling too broad.
   These rules explicitly redraw the metadata rule column. */
.um-evidence-meta__rule {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 48px !important;
  align-self: center !important;
  justify-self: center !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  border: 0 !important;
}

/* Keep the left row grid: icon -> 20px -> vertical line -> 20px -> text */
.um-evidence-meta__item {
  display: grid !important;
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 20px !important;
  align-items: center !important;
}

/* Keep row separator lines light, without filling backgrounds */
.um-evidence-meta__item {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid #D8CDBB !important;
}

.um-evidence-meta__item:last-child {
  border-bottom: 0 !important;
}


/* Hard fix:
   The original .um-evidence-meta__rule element is being suppressed/overridden somewhere
   in the accumulated CSS. Therefore the vertical line is now drawn directly as a
   pseudo-element on each metadata row.

   Geometry:
   icon width = 48.3px
   distance icon -> line = 20px
   line x-position = 48.3px + 20px = 68.3px
   line height = 48px
   line colour = #D8CDBB
*/
.um-evidence-meta__item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 20px !important;
  align-items: center !important;
  background: transparent !important;
  border-bottom: 1px solid #D8CDBB !important;
}

.um-evidence-meta__item:last-child {
  border-bottom: 0 !important;
}

.um-evidence-meta__item::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 68.3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 48px !important;
  background: #D8CDBB !important;
  opacity: 1 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Keep the original rule element invisible to avoid double lines */
.um-evidence-meta__rule {
  display: none !important;
}


/* Left metadata spacing correction:
   Icon -> 18px -> vertical line -> 18px -> text.

   Geometry:
   icon width = 48.3px
   distance icon to line = 18px
   line x-position = 48.3px + 18px = 66.3px
*/
.um-evidence-meta__item {
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 18px !important;
}

.um-evidence-meta__item::after {
  left: 66.3px !important;
  width: 1px !important;
  height: 48px !important;
  background: #D8CDBB !important;
}


/* Correction:
   Keep the text in the third grid column so the 18px distance after the vertical line
   is actually reserved.

   Final geometry:
   icon 48.3px | 18px gap | 1px line | 18px gap | text
*/
.um-evidence-meta__item {
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 18px !important;
}

.um-evidence-meta__item .um-icon-circle,
.um-evidence-meta__item .um-icon-circle--embedded {
  grid-column: 1 !important;
}

.um-evidence-meta__rule {
  display: block !important;
  grid-column: 2 !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 48px !important;
  background: transparent !important;
  border: 0 !important;
  opacity: 0 !important;
}

.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
}

/* Visible line remains the forced pseudo-line */
.um-evidence-meta__item::after {
  left: 66.3px !important;
  width: 1px !important;
  height: 48px !important;
  background: #D8CDBB !important;
}


/* Right-side Key Finding icon centring:
   Centre the icon horizontally between the middle vertical line and the right card edge.

   Geometry:
   card width = 734px
   middle vertical line at x = 367px
   right card edge at x = 734px
   centre of that area = (367px + 734px) / 2 = 550.5px

   The Key Finding column starts at the middle line, so the ornament row is made
   367px wide and the icon is centred inside that full right half.
*/
.um-keyfinding {
  width: 367px !important;
  max-width: 367px !important;
  box-sizing: border-box !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.um-keyfinding__ornament {
  width: 367px !important;
  max-width: 367px !important;
  margin-left: -18px !important;
  margin-right: -18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.um-keyfinding__icon,
.um-keyfinding__icon--embedded {
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 auto !important;
}

/* Preserve the text block spacing below: 18px from the middle line and 18px from the right edge */
.um-keyfinding__text {
  width: 331px !important;
  max-width: 331px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* Correction: centre the Key Finding icon by absolute card geometry, not by the
   local ornament container.

   Target:
   middle vertical line = 734px / 2 = 367px
   right card edge = 734px
   centre between them = 550.5px

   The icon is now positioned from the whole card/body coordinate system, so it
   no longer depends on padding, negative margins or the internal flex layout.
*/
.um-evidence-card__body {
  position: relative !important;
}

.um-keyfinding {
  position: relative !important;
}

.um-keyfinding__ornament {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

.um-keyfinding__icon,
.um-keyfinding__icon--embedded {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

/* Keep the ornament lines balanced around the geometrically centred icon */
.um-keyfinding__ornament::before,
.um-keyfinding__ornament::after {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #D8CDBB !important;
}

.um-keyfinding__ornament::before {
  left: 0 !important;
  right: calc(50% + 34px) !important;
}

.um-keyfinding__ornament::after {
  left: calc(50% + 34px) !important;
  right: 0 !important;
}


/* Right-side correction:
   Shift the entire Key Finding content group 18px to the left:
   - ornament lines
   - icon
   - label
   - text block

   This compensates for the visual imbalance of the right half.
*/
.um-keyfinding {
  transform: translateX(-18px) !important;
}

/* Keep the internal geometry unchanged after the global shift */
.um-keyfinding__ornament,
.um-keyfinding__icon,
.um-keyfinding__icon--embedded,
.um-keyfinding .um-label,
.um-keyfinding__label-rule,
.um-keyfinding__text {
  transform-origin: center center !important;
}

/* Preserve previous icon centring logic inside the shifted group */
.um-keyfinding__icon,
.um-keyfinding__icon--embedded {
  left: 50% !important;
  transform: translateX(-50%) !important;
}


/* Correction:
   The complete right Key Finding group should move 18px to the RIGHT, not left.
   This overrides the previous translateX(-18px). */
.um-keyfinding {
  transform: translateX(18px) !important;
}


/* University / Institution text size:
   Match the blue metadata text size used for Field and Published in. */
.um-evidence-meta__item:nth-child(3) .um-meta-text {
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
}


/* Footer separator line:
   Set the long separator line between the middle section and the footer to #D8CDBB. */
.um-evidence-card__footer {
  border-top-color: #D8CDBB !important;
}


/* Footer button position:
   The gold publication button starts 18px from the right card edge. */
.um-evidence-card__footer {
  position: relative !important;
}

.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  position: absolute !important;
  right: 18px !important;
}


/* Footer button width:
   Set the gold publication button to approximately 270px. */
.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  width: 270px !important;
  max-width: 270px !important;
  box-sizing: border-box !important;
}


/* Correction:
   Keep the button dimensions unchanged:
   - button width remains 270px
   - button remains 18px from the right edge

   Only adjust the typography so "Link to Publication" is about 160px wide,
   and centre the text inside the button horizontally and vertically.
*/
.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  width: 270px !important;
  max-width: 270px !important;
  right: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  font-size: 15.8px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}


/* Footer button arrow:
   Set the arrow icon in the publication button to 13px × 13px. */
.um-publication-link svg,
.um-footer-button svg,
.um-evidence-card__footer a svg,
.um-publication-link img,
.um-footer-button img,
.um-evidence-card__footer a img {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
}


/* Correct footer arrow sizing:
   The arrow was a text span, not an image/SVG in the previous version.
   It is now a real SVG with a controlled 13px × 13px viewbox. */
.um-publication-button__arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  margin-left: 10px !important;
  line-height: 1 !important;
}

.um-publication-button__arrow svg {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  overflow: visible !important;
}


/* Footer button text:
   Make "Link to Publication" slightly smaller while keeping the button geometry unchanged. */
.um-publication-button,
.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  font-size: 14.8px !important;
  line-height: 1 !important;
}


/* Footer button text refinement:
   Make the label smaller and centre the complete text+arrow group inside the button. */
.um-publication-button,
.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  font-size: 13.8px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 0 !important;
}

.um-publication-button span:first-child,
.um-publication-link span:first-child,
.um-footer-button span:first-child,
.um-evidence-card__footer a span:first-child {
  display: inline-block !important;
  margin: 0 !important;
  text-align: center !important;
}

.um-publication-button__arrow {
  margin-left: 0 !important;
}


/* Footer button text weight:
   Set "Link to Publication" to font-weight 500. */
.um-publication-button,
.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  font-weight: 500 !important;
}


/* Footer icon:
   Set the footer icon to approximately 62px wide and centre it horizontally
   within the complete footer area. */
.um-evidence-card__footer {
  position: relative !important;
}

.um-footer-ornament {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.um-footer-icon,
.um-footer-ornament svg,
.um-footer-ornament img {
  width: 62px !important;
  max-width: 62px !important;
  height: auto !important;
}


/* Footer lines:
   Colour: #D8CDBB
   Vertically centred between top and bottom of the footer.

   Geometry:
   Card width = 734px
   Footer icon width = 62px, centred at x = 367px
   Icon left edge = 367px - 31px = 336px
   Icon right edge = 367px + 31px = 398px

   Button width = 270px, right distance = 18px
   Button left edge = 734px - 18px - 270px = 446px

   Left footer line:
   starts 18px from left edge, ends 18px before icon
   x: 18px to 318px

   Right footer line:
   starts 18px after icon, ends 18px before button
   x: 416px to 428px
*/
.um-evidence-card__footer {
  position: relative !important;
}

.um-footer-ornament::before,
.um-footer-ornament::after,
.um-footer-ornament span {
  display: none !important;
}

/* left line */
.um-evidence-card__footer::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  width: 300px !important;
  height: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  z-index: 1 !important;
}

/* right line */
.um-evidence-card__footer::after {
  content: "" !important;
  position: absolute !important;
  left: 416px !important;
  width: 12px !important;
  height: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  z-index: 1 !important;
}

.um-footer-icon,
.um-footer-ornament img {
  position: relative !important;
  z-index: 2 !important;
}

.um-publication-button,
.um-publication-link,
.um-footer-button,
.um-evidence-card__footer a {
  z-index: 2 !important;
}


/* Footer line visual correction:
   The previous calculation used the 62px image box of the footer icon.
   The visible SVG motif is not optically balanced inside that box, so the
   left gap looked smaller than the right gap.

   Correction:
   - keep line colour #D8CDBB
   - keep vertical centring
   - increase the left visual gap slightly
   - reduce the right visual gap slightly
*/
.um-evidence-card__footer::before {
  left: 18px !important;
  width: 296px !important; /* previous 300px: ends 4px earlier */
  height: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #D8CDBB !important;
}

.um-evidence-card__footer::after {
  left: 412px !important;  /* previous 416px: starts 4px closer to the icon */
  width: 16px !important;  /* still ends 18px before the button */
  height: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #D8CDBB !important;
}



/* =========================================================
   MULTI-CARD PACKAGE
   ========================================================= */

/* =========================================================
   CARD-SPECIFIC ADJUSTMENT AREA
   Later refinements can be added here without changing the
   master card structure.
   Example:
   .um-evidence-card[data-card-id="D.2"] .um-keyfinding__text {
     font-size: 11.6px !important;
   }
   ========================================================= */

/* Initial fitting for longer Key Finding texts */
.um-evidence-card[data-card-id="B.2"] .um-keyfinding__text,
.um-evidence-card[data-card-id="B.3"] .um-keyfinding__text,
.um-evidence-card[data-card-id="C.1"] .um-keyfinding__text,
.um-evidence-card[data-card-id="D.1"] .um-keyfinding__text,
.um-evidence-card[data-card-id="D.2"] .um-keyfinding__text,
.um-evidence-card[data-card-id="F.2"] .um-keyfinding__text {
  font-size: 11.55px !important;
  line-height: 1.15 !important;
}

/* Initial fitting for long Field / Institution entries */
.um-evidence-card[data-card-id="B.3"] .um-evidence-meta__item:nth-child(4) .um-meta-text,
.um-evidence-card[data-card-id="F.1"] .um-evidence-meta__item:nth-child(4) .um-meta-text,
.um-evidence-card[data-card-id="F.2"] .um-evidence-meta__item:nth-child(4) .um-meta-text {
  font-size: 11.2px !important;
  line-height: 1.13 !important;
}

.um-evidence-card[data-card-id="D.2"] .um-evidence-meta__item:nth-child(3) .um-meta-text,
.um-evidence-card[data-card-id="F.2"] .um-evidence-meta__item:nth-child(3) .um-meta-text {
  font-size: 9.8px !important;
  line-height: 1.05 !important;
}

.um-evidence-card[data-card-id="C.2"] .um-evidence-card__title,
.um-evidence-card[data-card-id="F.2"] .um-evidence-card__title {
  font-size: 22px !important;
  line-height: 0.95 !important;
}


/* Global correction for all cards:
   The central vertical line must not run down to the footer.
   It starts at the same height as the short Author vertical line
   and ends at the same height as the short Field vertical line.

   Four metadata rows:
   4 × 48px line height + 3 separators/row gaps area already included visually
   Final visual line height is limited to the metadata block only.
*/
.um-evidence-card__body::before {
  top: 18px !important;
  bottom: auto !important;
  height: 246px !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
}


/* Global correction:
   The central vertical line should end at the BOTTOM of the Field short vertical line,
   not at its top. Previous height was too short by approximately one short-line height. */
.um-evidence-card__body::before {
  top: 18px !important;
  bottom: auto !important;
  height: 294px !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
}


/* Global Key Finding text alignment:
   Calibrated from the longest Key Finding text on card F.2.
   Only text typography is changed; the central vertical line remains unchanged.

   Goal:
   The last line of the F.2 Key Finding text visually ends at the same height
   as the bottom of the central vertical line. The same font size and line
   height are then applied to all cards for consistency.
*/
.um-keyfinding__text,
.um-evidence-card[data-card-id] .um-keyfinding__text {
  font-size: 12.1px !important;
  line-height: 14.7px !important;
  font-weight: 400 !important;
}


/* Global Key Finding text size update:
   Set Key Finding text font-size to 12.5px on all cards. */
.um-keyfinding__text,
.um-evidence-card[data-card-id] .um-keyfinding__text {
  font-size: 12.5px !important;
}


/* Global Key Finding text size update:
   Set Key Finding text font-size to 13px on all cards. */
.um-keyfinding__text,
.um-evidence-card[data-card-id] .um-keyfinding__text {
  font-size: 13px !important;
}


/* Global Key Finding text line-height update:
   Set Key Finding text line-height to 15px on all cards. */
.um-keyfinding__text,
.um-evidence-card[data-card-id] .um-keyfinding__text {
  line-height: 15px !important;
}


/* Global Key Finding text line-height update:
   Set Key Finding text line-height to 15.5px on all cards. */
.um-keyfinding__text,
.um-evidence-card[data-card-id] .um-keyfinding__text {
  line-height: 15.5px !important;
}


/* Global Key Finding text line-height update:
   Set Key Finding text line-height to 15.2px on all cards. */
.um-keyfinding__text,
.um-evidence-card[data-card-id] .um-keyfinding__text {
  line-height: 15.2px !important;
}


/* Global title typography update:
   Set all card titles to font-size 22px and line-height 23px. */
.um-evidence-card__title,
.um-evidence-card[data-card-id] .um-evidence-card__title {
  font-size: 22px !important;
  line-height: 23px !important;
}


/* Global title typography update:
   Keep title font-size at 22px and set title line-height to 30px. */
.um-evidence-card__title,
.um-evidence-card[data-card-id] .um-evidence-card__title {
  font-size: 22px !important;
  line-height: 30px !important;
}


/* Author text field:
   Give Author the same text-field width and wrapping behaviour as Field and Published in.
   Long author lines can wrap to a second line instead of overflowing or staying nowrap. */
.um-evidence-meta__item:nth-child(1) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
  text-align-last: left !important;
}


/* Left metadata horizontal separator lines:
   The horizontal lines between the left metadata fields should run with
   18px spacing on both sides:
   - 18px from the left outer content line
   - 18px before the central vertical line.

   Left half width = 367px.
   Line start = 18px.
   Line end = 367px - 18px = 349px.
   Line width = 331px.
*/
.um-evidence-meta__item {
  border-bottom: 0 !important;
  position: relative !important;
}

.um-evidence-meta__item:not(:last-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 0 !important;
  height: 1px !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  opacity: 1 !important;
  z-index: 4 !important;
  pointer-events: none !important;
}


/* Title alignment only:
   Set all card titles left-aligned instead of justified. */
.um-evidence-card__title,
.um-evidence-card[data-card-id] .um-evidence-card__title {
  text-align: left !important;
  text-align-last: left !important;
}


/* =========================================================
   CLEAN LEFT METADATA GEOMETRY
   This resets the left metadata line system in one controlled block.
   It replaces the conflicting accumulated pseudo-element rules.

   Left half width: 367px.
   Horizontal separator lines:
   - start 18px from the left edge
   - end 18px before the central vertical line
   - width 331px

   Metadata row geometry:
   Icon 48.3px | 18px gap | 1px vertical line | 18px gap | text
   ========================================================= */

/* Left metadata block: controlled line background only */
.um-evidence-meta {
  position: relative !important;
  width: 367px !important;
  max-width: 367px !important;
  box-sizing: border-box !important;
  padding: 0 !important;

  background-image:
    linear-gradient(#D8CDBB, #D8CDBB),
    linear-gradient(#D8CDBB, #D8CDBB),
    linear-gradient(#D8CDBB, #D8CDBB) !important;
  background-repeat: no-repeat !important;
  background-size:
    331px 1px,
    331px 1px,
    331px 1px !important;
  background-position:
    18px 25%,
    18px 50%,
    18px 75% !important;
}

/* Remove all older row separator mechanisms */
.um-evidence-meta__item {
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative !important;

  display: grid !important;
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Disable old pseudo-lines on the row itself */
.um-evidence-meta__item::before,
.um-evidence-meta__item::after {
  display: none !important;
  content: none !important;
}

/* Disable old pseudo-line attached to the icon */
.um-evidence-meta__item .um-icon-circle::before,
.um-evidence-meta__item .um-icon-circle--embedded::before {
  display: none !important;
  content: none !important;
}

/* Keep the actual icon in column 1 */
.um-evidence-meta__item .um-icon-circle,
.um-evidence-meta__item .um-icon-circle--embedded {
  grid-column: 1 !important;
}

/* Draw the vertical line between icon and text using the existing rule element */
.um-evidence-meta__rule {
  display: block !important;
  grid-column: 2 !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 48px !important;
  align-self: center !important;
  justify-self: center !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Text stays in column 3, preserving the 18px gap after the vertical line */
.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
}


/* Position correction:
   1) Left horizontal metadata lines were visually 18px too far to the right.
      They are shifted 18px left inside the metadata block.
   2) The complete right Key Finding area was 18px too far to the right.
      The previous translateX(18px) is neutralised.
*/

/* Left horizontal separator lines: shift 18px left */
.um-evidence-meta {
  background-position:
    0 25%,
    0 50%,
    0 75% !important;
}

/* Right Key Finding area: remove the 18px right shift */
.um-keyfinding {
  transform: translateX(0) !important;
}


/* Right side position correction:
   The entire Key Finding area is still 18px too far to the right.
   Shift the complete right-side content group 18px left. */
.um-keyfinding {
  transform: translateX(-18px) !important;
}


/* University / Institution text field:
   Give University / Institution the same text-field width and wrapping behaviour
   as Author, Published in and Field.
   Long institution entries can wrap to two or three lines. */
.um-evidence-meta__item:nth-child(3) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
  text-align-last: left !important;
}


/* =========================================================
   FINAL FIX: LEFT METADATA VERTICAL SEPARATOR LINES
   Restore stable vertical lines between icon and text.

   Geometry:
   icon 48.3px | 18px gap | 1px vertical line | 18px gap | text
   ========================================================= */

.um-evidence-meta__item {
  display: grid !important;
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  position: relative !important;
}

.um-evidence-meta__item .um-icon-circle,
.um-evidence-meta__item .um-icon-circle--embedded {
  grid-column: 1 !important;
}

.um-evidence-meta__rule {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background: #D8CDBB !important;
  background-color: #D8CDBB !important;
  border: 0 !important;
  z-index: 10 !important;
}

.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
}

/* Disable older forced pseudo-line that conflicted with the real rule element. */
.um-evidence-meta__item::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   DEFINITIVE FIX: LEFT VERTICAL SEPARATOR LINES
   The previous .um-evidence-meta__rule element is still unreliable in the
   accumulated CSS. Therefore the vertical separator is now drawn as a
   background line on each metadata row.

   Geometry:
   icon width 48.3px + 18px gap = x-position 66.3px
   line: 1px × 48px
   ========================================================= */

.um-evidence-meta__item {
  display: grid !important;
  grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  position: relative !important;

  background-image: linear-gradient(#D8CDBB, #D8CDBB) !important;
  background-repeat: no-repeat !important;
  background-size: 1px 48px !important;
  background-position: 66.3px center !important;
}

.um-evidence-meta__item .um-icon-circle,
.um-evidence-meta__item .um-icon-circle--embedded {
  grid-column: 1 !important;
}

.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
}



/* Published in + Field text weight:
   Set the text below Published in and Field to font-weight 300. */
.um-evidence-meta__item:nth-child(2) .um-meta-text,
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  font-weight: 300 !important;
}


/* Published in + Field text weight:
   Reset the text below Published in and Field to font-weight 400. */
.um-evidence-meta__item:nth-child(2) .um-meta-text,
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  font-weight: 400 !important;
}


/* Field hyphenation:
   Enable automatic hyphenation in the Field text on all cards so line breaks can be tighter. */
.um-evidence-meta__item:nth-child(4) .um-meta-text {
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Left metadata label alignment:
   The gold labels AUTHOR / PUBLISHED IN / UNIVERSITY / INSTITUTION / FIELD
   are visually aligned with the top edge of the 48px vertical separator line. */

.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

/* Compensate for the Newsreader font's internal ascender space so that the
   visible top of the gold letters sits on the same visual height as the line top. */
.um-evidence-meta .um-label {
  display: block !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  transform: translateY(-2px) !important;
  transform-origin: left top !important;
}

.um-evidence-meta .um-meta-text {
  display: block !important;
  margin-top: -2px !important;
}


/* LEFT LABEL ALIGNMENT – v2
   The previous -2px upward optical correction was too strong.
   Reset the label shift: the label block now starts at the top of the
   48px separator line, without lifting the letters above the line. */

.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.um-evidence-meta .um-label {
  display: block !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  transform: translateY(0) !important;
  transform-origin: left top !important;
}

.um-evidence-meta .um-meta-text {
  display: block !important;
  margin-top: 0 !important;
}


/* LEFT METADATA VERTICAL LINES – 60px
   Extend the short vertical separator lines from 48px to 60px and keep them
   vertically centred on the icon axis. */
.um-evidence-meta__item {
  background-size: 1px 60px !important;
  background-position: 66.3px center !important;
}

/* Keep the invisible rule column in the same height so the grid geometry remains stable. */
.um-evidence-meta__rule {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
}


/* LEFT GOLD LABEL ALIGNMENT TO 60px VERTICAL LINES
   The left text block is now also 60px high, so the gold label starts at the
   top edge of the 60px separator line. */
.um-evidence-meta__item > div:last-child {
  grid-column: 3 !important;
  align-self: center !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.um-evidence-meta .um-label {
  display: block !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  transform: translateY(0) !important;
  transform-origin: left top !important;
}

.um-evidence-meta .um-meta-text {
  display: block !important;
  margin-top: 0 !important;
}


/* D.2 + F.2 University / Institution normalization:
   Make the text below University / Institution identical to the standard
   metadata text used on the other cards. */
.um-evidence-card[data-card-id="D.2"] .um-evidence-meta__item:nth-child(3) .um-meta-text,
.um-evidence-card[data-card-id="F.2"] .um-evidence-meta__item:nth-child(3) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
  text-align-last: left !important;
}


/* B.3 + F.1 + F.2 Field normalization:
   Make the Field text on these cards identical to the standard Field text
   used on the other cards. */
.um-evidence-card[data-card-id="B.3"] .um-evidence-meta__item:nth-child(4) .um-meta-text,
.um-evidence-card[data-card-id="F.1"] .um-evidence-meta__item:nth-child(4) .um-meta-text,
.um-evidence-card[data-card-id="F.2"] .um-evidence-meta__item:nth-child(4) .um-meta-text {
  width: 242px !important;
  max-width: 242px !important;
  font-size: 12.1px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
  text-align-last: left !important;
}


/* Author text size:
   Set the text below Author to 13px on all cards. */
.um-evidence-meta__item:nth-child(1) .um-meta-text {
  font-size: 13px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
}


/* Title test:
   Set all card titles to font-weight 500 for visual comparison. */
.um-evidence-card__title,
.um-evidence-card[data-card-id] .um-evidence-card__title {
  font-weight: 500 !important;
}


/* Card shadow:
   Remove the shadow behind every evidence card. */
.um-evidence-card {
  box-shadow: none !important;
}

/* =========================================================
   MOBILE STACKED LAYOUT – CLEAN SINGLE MOBILE BLOCK
   Applies only below 735px. Desktop CSS remains unchanged.
   ========================================================= */





/* =========================================================
   MOBILE FIX v5 – REAL HTML CLASS TARGETS
   Desktop is untouched. These rules only apply below 735px.
   ========================================================= */



/* Prevent the older extra-narrow badge rule from putting the year underneath. */



/* =========================================================
   MOBILE BADGE REFINEMENT v6
   Mobile only:
   - rounded badge corners restored
   - icon slightly larger
   - publication type centred
   - year remains in its current right-side position
   ========================================================= */






/* =========================================================
   MOBILE BADGE REFINEMENT v7
   Mobile only:
   - publication type starts 15px after the icon
   - publication type is left-aligned
   - year remains right-aligned in its existing position
   ========================================================= */






/* =========================================================
   MOBILE BADGE REFINEMENT v8
   Mobile only:
   - shorten the gold badge vertically
   - equalise the visual top/bottom spacing around the year
   ========================================================= */






/* =========================================================
   MOBILE HEADER SPACING v9
   Mobile only:
   Set the distance from the bottom of the gold badge to the lower header line
   to exactly 18px.
   ========================================================= */




/* =========================================================
   MOBILE HEADER SPACING v10
   Mobile only:
   Set the distance from the bottom of the gold badge to the lower header line
   to 14px, matching the distance between title and badge.
   ========================================================= */




/* =========================================================
   MOBILE HEADER SPACING v11
   Mobile only:
   Replace the old absolute ::after header line with a real border-bottom.
   This makes the visual gap from badge to line exactly controlled by
   padding-bottom.
   ========================================================= */




/* =========================================================
   MOBILE HEADER LINE COLOUR v12
   Mobile only:
   Match the lower header line to the other fine separator lines.
   ========================================================= */




/* =========================================================
   MOBILE HEADER SPACING v13
   Mobile only:
   Set the distance from the bottom of the gold badge to the lower header line
   to 18px. The line colour remains #D8CDBB.
   ========================================================= */




/* =========================================================
   MOBILE METADATA TOP ALIGNMENT v14
   Mobile only:
   - remove the redundant second horizontal line above Author
   - move the metadata block up so the top of the Author vertical line is
     6px below the header line under the gold badge
   ========================================================= */




/* =========================================================
   MOBILE METADATA TOP ALIGNMENT v15
   Mobile only. Desktop is not touched.

   Purpose:
   - keep only the header line under the gold badge
   - remove every possible extra line above Author
   - pull the mobile metadata block up so the Author vertical line begins
     6px below the header line
   ========================================================= */




/* =========================================================
   MOBILE METADATA TOP LINE REMOVAL v16
   Mobile only. Desktop is not touched.

   The remaining extra line above Author is removed by disabling all top-line
   mechanisms on the first metadata row and redrawing only the separator line
   BELOW Author. This keeps the Author → Published in divider, but removes the
   redundant line above Author.
   ========================================================= */




/* =========================================================
   MOBILE METADATA TOP ALIGNMENT v17
   Mobile only. Desktop is not touched.

   New construction:
   - the header no longer draws a line
   - the only line under the gold badge is the top border of the Author row
   - the Author vertical separator is 60px high inside a 72px row:
     (72px - 60px) / 2 = 6px
   ========================================================= */




/* =========================================================
   MOBILE METADATA TOP ALIGNMENT v18
   Mobile only. Desktop is not touched.

   Corrections:
   - only ONE horizontal line remains under the gold badge: the header border
   - all upper lines on/above Author are removed
   - the whole middle section is pulled up by 50px
   ========================================================= */




/* =========================================================
   MOBILE METADATA TOP ALIGNMENT v19
   Mobile only. Desktop is not touched.

   Fix for v18:
   The -50px upward shift placed the header line inside the word AUTHOR.
   This removes the overlap and keeps only one clean line above Author.
   ========================================================= */




/* =========================================================
   MOBILE AUTHOR TOP LINE REMOVAL v20
   Mobile only. Desktop is not touched.

   Remove every horizontal line above AUTHOR in the mobile layout:
   - no header bottom border
   - no header pseudo-line
   - no body top line
   - no metadata top line
   - no first-row top line
   The divider below AUTHOR remains.
   ========================================================= */




/* =========================================================
   MOBILE AUTHOR TOP LINE REMOVAL v21
   Mobile only. Desktop is not touched.

   The visible line between the gold badge and AUTHOR is forcibly removed
   from every possible source in the mobile layout.
   ========================================================= */




/* =========================================================
   MOBILE HEADER / AUTHOR SEPARATOR LINE v22
   Mobile only. Desktop is not touched.

   The visible line between the badge and AUTHOR is kept, but it is no longer
   a full-width border. It is redrawn as a controlled short separator with the
   same left/right inset as the other mobile horizontal lines.
   ========================================================= */




/* =========================================================
   MOBILE AUTHOR TOP LINE KILL SWITCH v23
   Mobile only. Desktop is not touched.

   This removes the unwanted horizontal line above AUTHOR in two ways:
   1) all known technical line sources are disabled
   2) a very small background mask is placed at the top of the mobile body
      to cover any remaining legacy background-line artefact
   ========================================================= */




/* =========================================================
   MOBILE TITLE / BODY SEPARATOR v24
   Mobile only. Desktop is not touched.

   The persistent line is the title/body separator from the desktop header.
   On mobile it is now controlled directly:
   - no full-width header separator
   - one shortened separator is drawn below the gold badge
   - the separator uses the same side inset as the other horizontal lines
   ========================================================= */

/* =========================================================
   MOBILE LAYOUT v25 – CLEAN REBUILD
   Desktop CSS is unchanged. All older max-width mobile rules have been removed.
   This is the only mobile block in the file.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #FDFAF1 !important;
    border: 1px solid #8B6F3E !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }

  .um-evidence-card__inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #FDFAF1 !important;
    border-radius: 18px !important;
  }

  /* Header: no separator line underneath. */
  .um-evidence-card__header {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 18px 18px 18px !important;
    display: block !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-image: none !important;
  }

  .um-evidence-card__header::before,
  .um-evidence-card__header::after {
    display: none !important;
    content: none !important;
  }

  .um-evidence-card__kicker {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 10px 0 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .um-evidence-card__title,
  .um-evidence-card[data-card-id] .um-evidence-card__title {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 23px !important;
    line-height: 1.16 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-align-last: left !important;
  }

  /* Gold badge */
  .um-evidence-card__badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 14px 0 0 0 !important;
    padding: 5px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-rows: 42px !important;
    column-gap: 15px !important;
    align-items: center !important;
    background: #8B6F3E !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .um-evidence-card__badge-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .um-evidence-card__badge-label {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .um-evidence-card__badge-rule,
  .um-evidence-card__badge-sub {
    display: none !important;
    content: none !important;
  }

  .um-evidence-card__badge-year {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }

  /* Body starts directly after header. No horizontal line above Author. */
  .um-evidence-card__body {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 18px 18px 18px !important;
    margin: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }

  .um-evidence-card__body::before,
  .um-evidence-card__body::after {
    display: none !important;
    content: none !important;
  }

  .um-evidence-meta {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }

  .um-evidence-meta::before,
  .um-evidence-meta::after {
    display: none !important;
    content: none !important;
  }

  .um-evidence-meta__item {
    min-height: 72px !important;
    height: auto !important;
    padding: 6px 0 !important;
    display: grid !important;
    grid-template-columns: 48.3px 1px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    border-top: 0 !important;
    border-bottom: 1px solid #D8CDBB !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient(#D8CDBB, #D8CDBB) !important;
    background-repeat: no-repeat !important;
    background-size: 1px 60px !important;
    background-position: 66.3px center !important;
  }

  .um-evidence-meta__item:first-child {
    border-top: 0 !important;
  }

  .um-evidence-meta__item::before,
  .um-evidence-meta__item::after {
    display: none !important;
    content: none !important;
  }

  .um-evidence-meta__item .um-icon-circle,
  .um-evidence-meta__item .um-icon-circle--embedded {
    grid-column: 1 !important;
    width: 48.3px !important;
    height: 48.3px !important;
  }

  .um-evidence-meta__rule {
    display: block !important;
    grid-column: 2 !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 60px !important;
    opacity: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .um-evidence-meta__item > div:last-child {
    grid-column: 3 !important;
    height: auto !important;
    min-height: 60px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .um-evidence-meta .um-label {
    display: block !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    color: #8B6F3E !important;
    font-size: 9.4px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .um-meta-text,
  .um-evidence-meta__item:nth-child(1) .um-meta-text,
  .um-evidence-meta__item:nth-child(2) .um-meta-text,
  .um-evidence-meta__item:nth-child(3) .um-meta-text,
  .um-evidence-meta__item:nth-child(4) .um-meta-text,
  .um-evidence-card[data-card-id] .um-evidence-meta__item .um-meta-text {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #061944 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    text-align: left !important;
    text-align-last: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .um-evidence-meta__item:nth-child(4) .um-meta-text {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
  }

  /* Key Finding */
  .um-keyfinding {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 18px 0 0 0 !important;
    border-top: 0 !important;
  }

  .um-keyfinding__ornament {
    position: relative !important;
    height: 58px !important;
    margin: 0 0 11px 0 !important;
    display: block !important;
  }

  .um-keyfinding__ornament::before,
  .um-keyfinding__ornament::after {
    top: 29px !important;
  }

  .um-keyfinding__icon,
  .um-keyfinding__icon--embedded {
    position: absolute !important;
    left: 50% !important;
    top: 5px !important;
    width: 48px !important;
    height: 48px !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    background: #FDFAF1 !important;
  }

  .um-keyfinding__label-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 9px 0 !important;
  }

  .um-keyfinding__text {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 15.2px !important;
    font-weight: 400 !important;
    text-align: left !important;
    text-align-last: left !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
  }

  /* Footer */
  .um-evidence-card__footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    padding: 16px 18px 18px 18px !important;
    margin: 0 !important;
    background: #EFE9D7 !important;
    border-top: 1px solid #D8CDBB !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:first-child {
    display: none !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    display: block !important;
    position: relative !important;
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2)::before,
  .um-evidence-card__footer > .um-footer-ornament:nth-child(2)::after {
    display: none !important;
    content: none !important;
  }

  .um-footer-icon,
  .um-footer-icon--embedded {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .um-publication-button {
    width: min(270px, 100%) !important;
    max-width: 270px !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 auto !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 13px !important;
    align-items: center !important;
    column-gap: 12px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .um-publication-button span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* =========================================================
   MOBILE DIVIDER FIX v27
   Mobile only. Desktop is not touched.

   The persistent line is the actual HTML divider element:
   <div class="um-evidence-card__divider"></div>

   Hide this divider only in the mobile layout.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__divider {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .um-evidence-card__body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* =========================================================
   MOBILE AUTHOR TOP LINE v28
   Mobile only. Desktop is not touched.

   The old desktop divider stays hidden. Instead, the Author row receives
   its own top border, matching the separator line between Author and Published in.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__divider {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .um-evidence-meta__item:first-child {
    border-top: 1px solid #D8CDBB !important;
  }
}


/* =========================================================
   MOBILE FIELD BOTTOM LINE v29
   Mobile only. Desktop is not touched.

   Add the same separator line below the Field row as the line above Author
   and between the metadata fields.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-meta__item:last-child {
    border-bottom: 1px solid #D8CDBB !important;
  }
}


/* =========================================================
   MOBILE FOOTER REFINEMENT v30
   Mobile only. Desktop is not touched.

   - remove the footer line
   - place the footer icon centred above the button
   - set Link to Publication to the same mobile width and height as the
     gold badge above
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    border-top: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px 18px 18px !important;
    background: #EFE9D7 !important;
  }

  /* Remove all footer ornament lines. */
  .um-footer-ornament::before,
  .um-footer-ornament::after,
  .um-evidence-card__footer > .um-footer-ornament::before,
  .um-evidence-card__footer > .um-footer-ornament::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Hide the empty ornament/line holder, keep only the icon holder. */
  .um-evidence-card__footer > .um-footer-ornament:first-child {
    display: none !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    display: block !important;
    position: relative !important;
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .um-footer-icon,
  .um-footer-icon--embedded {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Same visible width as the gold badge:
     both live inside 18px left/right card padding and use width: 100%. */
  .um-publication-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 13px !important;
    align-items: center !important;
    column-gap: 12px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .um-publication-button span {
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   MOBILE FOOTER REBUILD v31
   Mobile only. Desktop is not touched.

   Directly rebuild the actual footer structure:
   footer children are:
   1) .um-footer-ornament  = empty line holder
   2) .um-footer-ornament  = icon holder
   3) .um-publication-button = link button
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 62px 52px !important;
    row-gap: 14px !important;
    column-gap: 0 !important;

    align-items: center !important;
    justify-items: center !important;

    padding: 16px 18px 18px 18px !important;
    margin: 0 !important;

    background: #EFE9D7 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* First footer ornament is only the old horizontal line holder: remove it. */
  .um-evidence-card__footer > .um-footer-ornament:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Second ornament is the icon holder: place it top-centred. */
  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;

    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2)::before,
  .um-evidence-card__footer > .um-footer-ornament:nth-child(2)::after,
  .um-footer-ornament::before,
  .um-footer-ornament::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .um-footer-icon,
  .um-footer-icon--embedded {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 62px !important;
    height: 62px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Actual link button, same mobile width/height as the gold badge:
     footer and header both have 18px side padding, so width 100% matches. */
  .um-evidence-card__footer > .um-publication-button {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    align-self: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 13px !important;
    column-gap: 12px !important;
    align-items: center !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .um-evidence-card__footer > .um-publication-button span {
    display: block !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .um-evidence-card__footer > .um-publication-button svg,
  .um-evidence-card__footer > .um-publication-button img {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
  }
}


/* =========================================================
   MOBILE FOOTER BUTTON WIDTH v32
   Mobile only. Desktop is not touched.

   Match the Link to Publication button width to the visible width of the
   gold badge above. Both now use the same full header/footer content width.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .um-evidence-card__footer > .um-publication-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* =========================================================
   MOBILE FOOTER BUTTON POSITION FIX v33
   Mobile only. Desktop is not touched.

   Older desktop CSS positions footer links absolutely:
   .um-evidence-card__footer a { position:absolute; right:18px; }

   This explicitly neutralises that rule in mobile, so the button can take the
   same content width as the gold badge above.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer > .um-publication-button,
  .um-evidence-card__footer a.um-publication-button {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    justify-self: stretch !important;
    align-self: center !important;

    box-sizing: border-box !important;
  }
}


/* =========================================================
   MOBILE FOOTER LINE REMOVAL v34
   Mobile only. Desktop is not touched.

   Remove the remaining visible line above the Link to Publication button:
   - footer top border
   - old ornament line holder
   - pseudo-lines from footer ornaments
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    border-top: 0 !important;
    border-top-width: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-image: none !important;
  }

  .um-evidence-card__footer::before,
  .um-evidence-card__footer::after,
  .um-footer-ornament::before,
  .um-footer-ornament::after,
  .um-evidence-card__footer > .um-footer-ornament::before,
  .um-evidence-card__footer > .um-footer-ornament::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}


/* =========================================================
   MOBILE FOOTER REFINEMENT v35
   Mobile only. Desktop is not touched.

   - make the footer area vertically more compact
   - restore the separator line between the card content and the footer
   - keep the mobile button width/height from the previous version
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    border-top: 1px solid #D8CDBB !important;
    border-top-width: 1px !important;
    padding-top: 10px !important;
    padding-bottom: 14px !important;
    row-gap: 10px !important;
    gap: 10px !important;
  }

  .um-evidence-card__footer::before,
  .um-evidence-card__footer::after {
    display: none !important;
    content: none !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
  }

  .um-footer-icon,
  .um-footer-icon--embedded {
    width: 56px !important;
    height: 56px !important;
  }

  .um-evidence-card__footer > .um-publication-button,
  .um-evidence-card__footer a.um-publication-button {
    height: 52px !important;
    min-height: 52px !important;
  }
}


/* =========================================================
   MOBILE FOOTER HEIGHT REDUCTION v36
   Mobile only. Desktop is not touched.

   Reduce the mobile footer height by at least 15px:
   - smaller vertical padding
   - smaller icon
   - smaller gap between icon and button
   - button height remains unchanged
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    padding-top: 6px !important;
    padding-bottom: 7px !important;
    row-gap: 6px !important;
    gap: 6px !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
  }

  .um-footer-icon,
  .um-footer-icon--embedded {
    width: 50px !important;
    height: 50px !important;
  }
}


/* =========================================================
   MOBILE BUTTON TEXT CENTERING v37
   Mobile only. Desktop is not touched.

   Centre "Link to Publication" visually between the left and right edges
   of the button. The arrow remains positioned on the right.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer > .um-publication-button,
  .um-evidence-card__footer a.um-publication-button {
    position: relative !important;
    display: block !important;
    padding: 0 18px !important;
    text-align: center !important;
  }

  .um-evidence-card__footer > .um-publication-button span:first-child,
  .um-evidence-card__footer a.um-publication-button span:first-child {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 72px) !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .um-evidence-card__footer > .um-publication-button .um-publication-button__arrow,
  .um-evidence-card__footer a.um-publication-button .um-publication-button__arrow {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
  }
}


/* =========================================================
   MOBILE FOOTER ICON CENTERING v38
   Mobile only. Desktop is not touched.

   Centre the footer icon horizontally within the card/footer area.
   The button geometry remains unchanged.
   ========================================================= */

@media (max-width: 734px) {
  .um-evidence-card__footer {
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .um-evidence-card__footer > .um-footer-ornament:nth-child(2) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 50px !important;
    height: 50px !important;
  }

  .um-footer-icon,
  .um-footer-icon--embedded {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   MOBILE KEY FINDING TEXT JUSTIFICATION v39
   Mobile only. Desktop is not touched.

   Set the text below Key Finding to justified alignment.
   ========================================================= */

@media (max-width: 734px) {
  .um-keyfinding__text {
    text-align: justify !important;
    text-align-last: left !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
  }
}

/* end v=247 */

/* v=248 — evidence cards: restore full gold border + vertical spacing */
.um-evidence-card{
  border:1px solid var(--um-gold,#8b6f3d) !important;
  border-radius:22px !important;
  margin-bottom:34px !important;
}
.um-evidence-card + .um-evidence-card{
  margin-top:36px !important;
}

/* v=249 — module page: stack UM-MP configurator on mobile */
@media (max-width:800px){
  .umtc{grid-template-columns:1fr !important;}
  .umtc-label,.umtc-box,.umtc-start,.umtc-rule{grid-column:1 !important;grid-row:auto !important;}
  .umtc-start{justify-content:stretch;margin-top:4px;}
  .umtc-start .umtc-startbtn{flex:1;}
}

/* v=250 — mobile: kill drawer-bleed hscroll; stack umtc options; 100p grid internal scroll */
body{overflow-x:hidden;}
@media (max-width:800px){
  /* options within each configurator box stack vertically */
  .umtc-box{flex-direction:column;align-items:flex-start;gap:10px 0;}
  /* 100-parameter model grid: minmax(0,1fr) ispravno skalira na sirinu containera */
  .um-100p-grid{overflow-x:visible;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,1.15fr);gap:3px;}
  .um-100p-h{font-size:10px;padding:3px 0;}
  .um-100p-h--sum{font-size:8px;padding:3px 4px;word-break:break-all;line-height:1.3;}
  .um-100p-cell--sum{font-size:8px;padding:3px 4px;line-height:1.4;}
  .um-100p-cell--sc{font-size:7px;padding:3px 4px;line-height:1.4;}
  .um-100p-bar{flex-wrap:wrap;gap:6px 14px;}
  .um-100p-bar__sub{margin-left:0;}
}


/* v=251 — landscape phones (801–1024px wide, ≤520px tall): umtc stack + chess height + footer */
@media (min-width:801px) and (max-width:1024px) and (max-height:520px){
  /* configurator: single column (same as portrait) */
  .umtc{grid-template-columns:1fr !important;}
  .umtc-label,.umtc-box,.umtc-start,.umtc-rule{grid-column:1 !important;grid-row:auto !important;}
  .umtc-start{justify-content:stretch;margin-top:4px;}
  .umtc-start .umtc-startbtn{flex:1;}
  .umtc-box{flex-direction:column;align-items:flex-start;gap:10px 0;}
  /* chess: size board by viewport HEIGHT so it doesn't overflow vertically */
  .umchess-stage{--umc:min(280px,60vh) !important;--lab:20px !important;}
  .umchess-stage .umchess-board{--umc:min(280px,60vh) !important;}
  .umchess-panel{padding:10px !important;}
  /* footer: collapse dual nav → single centered row */
  .um-footer__nav:not(.um-footer__nav--left){display:none !important;}
  .um-footer__nav--left{justify-content:center !important;}
  .um-footer__row{padding:10px 20px !important;}
}

/* v=253 — Section 9 (Technology & Memory): right-aside info box component */
.um-ai-infobox{
  box-sizing:border-box;
  width:100%;
  border:1px solid rgba(139,111,61,0.45);
  font-family:var(--serif);
  font-size:8px;
  line-height:1.45;
  color:var(--ink,#1a1814);
  background:var(--paper,#f5f2ea);
}
.um-ai-infobox__header{
  background:var(--paper2,#efe9d7);
  border-bottom:1px solid rgba(139,111,61,0.5);
  padding:5px 7px;
  text-align:center;
}
.um-ai-infobox__en-title{
  font-size:7.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink,#1a1814);
}
.um-ai-infobox__en-sub{
  font-size:7px;
  color:var(--ink2,#3a342b);
  margin-top:1px;
}
.um-ai-infobox__hero{
  text-align:center;
  padding:8px 7px 4px;
  border-bottom:1px solid rgba(139,111,61,0.3);
}
.um-ai-infobox__big-num{
  display:block;
  font-size:40px;
  font-weight:700;
  line-height:1;
  color:var(--ink,#1a1814);
  letter-spacing:-0.01em;
}
.um-ai-infobox__big-label{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--bz1,#8b6f3d);
  margin-top:2px;
}
.um-ai-infobox__de-header{
  text-align:center;
  padding:3px 7px 4px;
  border-bottom:1px solid rgba(139,111,61,0.25);
}
.um-ai-infobox__de-title{
  font-size:7.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink,#1a1814);
}
.um-ai-infobox__de-sub{
  font-size:7px;
  color:var(--ink2,#3a342b);
  margin-top:1px;
  font-style:italic;
}
.um-ai-infobox__block{
  padding:4px 7px;
  border-bottom:1px solid rgba(139,111,61,0.2);
}
.um-ai-infobox__block:last-of-type{
  border-bottom:none;
}
.um-ai-infobox__block-title{
  font-size:7.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:1px;
}
.um-ai-infobox__block-sub{
  font-size:7px;
  color:var(--ink2,#3a342b);
  font-style:italic;
  margin-bottom:2px;
}
.um-ai-infobox__rows{
  margin:0;
  padding:0;
  list-style:none;
}
.um-ai-infobox__rows li{
  font-size:7.5px;
  line-height:1.45;
  padding:1px 0;
  color:var(--ink,#1a1814);
}
.um-ai-infobox__rows li+li{
  border-top:1px dotted rgba(139,111,61,0.18);
}
.um-ai-infobox__footer{
  font-size:7px;
  color:var(--ink3,#6b6253);
  padding:3px 7px;
  text-align:center;
  border-top:1px solid rgba(139,111,61,0.25);
  font-style:italic;
  background:var(--paper2,#efe9d7);
}

/* v=254 — ai-memory: Information Age infographic wrapper. (The old `.um-aicard img{width:100%}`
   rule was removed at v=484 — the card is now the HTML uic-* component whose icon <img>s must
   keep their own 48px sizing, not stretch to 100%.) */
.um-aicard{margin:28px 0 10px;}

/* v=255 — ai-memory 9.6 */
.um-aiPartnerCap{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:500;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3,#6b6253);font-style:normal;line-height:1.3;margin:22px 0 14px;}
.um-aiUline{text-decoration:underline;text-decoration-color:var(--ink,#1a1814);text-decoration-thickness:1px;text-underline-offset:5px;line-height:1.9;}

/* v=256 — home top grid: programme preview cards shown full (no crop), redundant caption hidden */
.umm-card--preview .umm-img-wrap{aspect-ratio:6402/5974 !important;border-bottom:none;}
.umm-card--preview .umm-caption{display:none;}
/* Public/Protected area cards: full baked design, no caption (like the preview cards) */
.umm-card--area .umm-img-wrap{aspect-ratio:6405/5977 !important;border-bottom:none;}
.umm-card--area .umm-caption{display:none;}

/* ===== MEMORY (3.x) — unify subheadings / bars / percentages with System (Dr. corrections) ===== */
/* sub-headings (.um-sub) and 3.4 conception labels (.um-conc-l) → grey #6b6253, 17px, line close (like .um-block-head) */
.um-sub{ font-size:17px !important; color:#6b6253 !important; padding-bottom:6px !important; line-height:1.25 !important; }
.um-conc-l{ font-size:17px !important; color:#6b6253 !important; padding-bottom:6px !important; }
/* percentages (.um-hl) → normal text colour, not bronze */
.um-hl{ color:inherit !important; }
/* 3.2 "Around 1,400 neurones…" statement → not bold */
.um-stmt{ font-weight:400 !important; }
/* 3.4 criterion bars (.um-crit-h) → like the trake (.um-cmp-divider): bronze border + 3px left line, tighter */
.um-crit-h{ background:#efe9d7 !important; border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; padding:10px 24px !important; }
.um-crit-t{ font-size:17px !important; }
/* 3.4 index list (.um-idx) → match System numlist: (NN) parens italic bronze, no separators, 29px rhythm */
.um-idx li{ padding:0 !important; border-bottom:none !important; margin-bottom:0 !important; line-height:29px !important; gap:10px !important; align-items:baseline; }
.um-idx-n{ font-family:'Newsreader',Georgia,serif !important; font-weight:500 !important; font-size:16px !important; color:#8b6f3d !important; font-style:italic !important; letter-spacing:0 !important; min-width:0 !important; padding-top:0 !important; }
.um-idx-n::before{ content:"("; color:#8b6f3d; margin-right:0 !important; }
.um-idx-n::after{ content:")"; color:#8b6f3d; margin-left:0 !important; }
/* v=258 — Memory 3.4: match System 2.3 refinements
   (a) list numbers read (01.) … (10.); (b) conception underlines faint section-line (rgba .5), like #sec-comparison; (c) remove the full-width line under the conception subheadings */
#m-requirements .um-idx-n::after{ content:".)" !important; }
#m-requirements .um-conc-key,
#m-requirements .um-conc-it{ border-bottom:1px solid rgba(139,111,61,0.5) !important; padding-bottom:1px !important; }
#m-requirements .um-conc-key:hover{ border-bottom-color:rgba(139,111,61,0.5) !important; }
#m-requirements .um-conc-l{ border-bottom:none !important; }
/* crit trake raised closer (margin-top 34→24) + bottom 18, like System cmp-divider */
#m-requirements .um-crit-h{ margin:24px 0 18px !important; }

/* ===== HOME GRID — every card is now a full baked design (text in image): full aspect, no caption ===== */
.umm-card .umm-img-wrap{ aspect-ratio:6405/5977 !important; border-bottom:none !important; }
.umm-card .umm-caption{ display:none !important; }

/* ===== METHOD 4.5 — progression flow table: stack the S2/S3/S10 rows (the shared .um-cat rule
   was forcing display:grid → rows sat side-by-side and spilled into the right column). ===== */
.um-cat:has(.um-cat-row){ display:block !important; background:#fdfaf1 !important; }
.um-cat-final span{ font-weight:600 !important; color:#6b6253 !important; }
/* 4.x tables — "days" + numbers → bolder + #6b6253 (Dr. corrections) */
.um-tbl-total, .um-list--days .um-dl-d, .um-bd-dur{ color:#6b6253 !important; font-weight:600 !important; }
/* 4 Method hero lede — key terms: same bronze italic + 0.5 underline + live hover (matches the 4.1 terms) */
.um-hero .um-lede .um-key{ color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important; border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important; cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
.um-hero .um-lede .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }
/* 4.1 — indent the lists under the criterion boxes so they start under the title ("Preparation"), not flush-left */
#me-process .um-list{ padding-left:40px; }
/* 4.1 phases list — keep the original .um-p strong look (bronze + italic) now that the phases moved into a list */
#me-process .um-list strong{ color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important; font-size:1em !important; border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important; }
/* 4.1 nabrajanja — ONE fixed size on every screen (no breakpoints), so it never differs between machines */
#me-process .um-list>li{ font-size:20px !important; }
/* 4.1 — "The Preparation and Admission Phase" gets the bronze underline (0.5) on top of the bronze-italic */
#me-process .um-bz-uline{ border-bottom:1px solid rgba(139,111,61,0.5) !important; padding-bottom:1px !important; }
/* 4.1 intro — key terms: keep the same bronze/gold italic, add a thin 0.5 underline */
#me-process .um-p .um-key{ border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important; }
/* 4.1 — "7, 10 or 14 days": same size as the body text, oldstyle figures so the digits sit at text height (not the tall lining ones) */
#me-process .um-p .um-num{ font-size:1em !important; font-variant-numeric:oldstyle-nums !important; font-feature-settings:"onum" 1 !important; }
/* 4.1 — EVERY bronze italic term comes alive on hover: a minimal, light warm tint (no dark band) */
#me-process .um-p strong, #me-process .um-list strong, #me-process .um-bz-uline{ cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
#me-process .um-p strong:hover, #me-process .um-list strong:hover, #me-process .um-bz-uline:hover{ color:#6b5a2f !important; background-color:rgba(139,111,61,0.05); }
/* the underlined terms also strengthen their line on hover */
#me-process .um-p .um-key:hover, #me-process .um-bz-uline:hover, #me-process .um-list strong:hover{ border-bottom-color:rgba(139,111,61,0.95) !important; }
/* 4.4 phase bars (.um-pb) → match the trake: bronze border + 3px left line, same padding/font */
.um-pb{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; padding:10px 24px !important; }
.um-pb-t{ font-size:17px !important; }
/* 4.1 table header bars (.um-tbl-head) → match the trake: bronze border + 3px left line, lower height */
.um-tbl-head{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; padding:10px 24px !important; }
/* criterion bar number was 22px → made .um-crit-h taller than the table bars; bring it to 17px (same as the roman in other trake) so heights match */
.um-crit-r{ font-size:17px !important; }
.um-idx-t{ flex:1 1 auto; min-width:0; }
/* v=257 — "Back to the top of the page": table cream (#fdfaf1) in central box + two flanking boxes; text 17px (like the trake), bronze, upright; hover smoothly LIGHTENS toward white (not creamier, not pure white) */
.um-to-top .um-to-top__link{ background:#efe9d7 !important; color:#5e4a26 !important; border-color:#8b6f3e !important; transition:background-color .2s ease !important; }
.um-to-top .um-to-top__link:hover{ background:#f6f2e4 !important; }
.um-to-top__text{ font-size:14px !important; font-style:normal !important; }
/* center "Back to the top…" — keep base UPPERCASE, make it italic */
.um-to-top .um-to-top__link .um-to-top__text{ font-style:italic !important; }
/* side boxes are now real links (left = Home, right = next page) — hide the old decorative pseudo boxes, replicate their geometry on the anchors */
.um-to-top__body::before,
.um-to-top__body::after{ display:none !important; }
.um-to-top__side{ position:absolute !important; top:37px !important; bottom:auto !important; height:calc(100% - 36px) !important; width:227px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; font-family:inherit !important; color:#5e4a26 !important; text-decoration:none !important; background:#efe9d7 !important; border:1px solid #8b6f3e !important; transition:background-color .2s ease !important; }
.um-to-top__side--left{ left:0 !important; }
.um-to-top__side--right{ right:0 !important; }
.um-to-top__side:hover{ background:#f6f2e4 !important; }
/* bronze 3px left line on each of the three bottom boxes (like the trake) */
.um-to-top .um-to-top__link,
.um-to-top__side{ border-left:3px solid #8b6f3d !important; }

/* v=260 — /method phases table only: bronze outer frame + 5px gap + hover; fonts untouched */
.um-tbl--phases .um-tbl-head{ border:1.5px solid #8b6f3d !important; border-left-width:3px !important; margin-bottom:5px !important; }
.um-tbl--phases .um-tbl-row{ border-left:3px solid #8b6f3d; border-right:1.5px solid #8b6f3d; transition:background .15s ease; }
.um-tbl--phases .um-tbl-head + .um-tbl-row{ border-top:1.5px solid #8b6f3d; }
.um-tbl--phases .um-tbl-row:last-child{ border-bottom:1.5px solid #8b6f3d; }
.um-tbl--phases .um-tbl-row:hover{ background:#f3ecd9; }
.um-tbl--phases .um-tbl-at{ display:block; font-style:italic; font-size:12.5px; color:#8b6f3d; margin-top:4px; }

/* v=261 — /method phases table: smaller assessment sublabel, row hover, full bronze frame */
.um-tbl--phases .um-tbl-at{ display:block !important; font-style:italic !important; font-size:10.5px !important; color:#8b6f3d !important; margin-top:5px !important; line-height:1.25 !important; }
.um-tbl--phases .um-tbl-row{ border-left:3px solid #8b6f3d !important; border-right:1.5px solid #8b6f3d !important; transition:background .18s ease !important; }
.um-tbl--phases .um-tbl-head + .um-tbl-row{ border-top:1.5px solid #8b6f3d !important; }
.um-tbl--phases .um-tbl-row:last-child{ border-bottom:1.5px solid #8b6f3d !important; }
.um-tbl--phases .um-tbl-row:hover{ background:#f3ecd9 !important; }

/* v=262 — /method tables: thinner bronze frame + top-align header labels (phases); second table gets same frame+hover but NO bronze header bar */
.um-tbl--phases .um-tbl-head{ align-items:start !important; border-top-width:1px !important; border-right-width:1px !important; border-bottom-width:1px !important; border-left-width:2px !important; }
.um-tbl--phases .um-tbl-row{ border-left-width:2px !important; border-right-width:1px !important; }
.um-tbl--phases .um-tbl-head + .um-tbl-row{ border-top-width:1px !important; }
.um-tbl--phases .um-tbl-row:last-child{ border-bottom-width:1px !important; }
/* second table (Total Duration) — frame around the rows + hover, header left as-is (no traka) */
.um-tbl--frame2 .um-tbl-row{ border-left:2px solid #8b6f3d !important; border-right:1px solid #8b6f3d !important; transition:background .18s ease !important; }
.um-tbl--frame2 .um-tbl-head + .um-tbl-row{ border-top:1px solid #8b6f3d !important; }
.um-tbl--frame2 .um-tbl-row:last-child{ border-bottom:1px solid #8b6f3d !important; }
.um-tbl--frame2 .um-tbl-row:hover{ background:#f3ecd9 !important; }

/* v=263 — /method tables: sublabel same size as label, plain black names (no bold), row separators span full width to the frame */
.um-tbl--phases .um-tbl-at{ font-size:15px !important; margin-top:3px !important; }
.um-tbl--phases .um-tbl-prog, .um-tbl--phases .um-tbl-total,
.um-tbl--frame2 .um-tbl-prog, .um-tbl--frame2 .um-tbl-total{ color:#1a1814 !important; font-weight:400 !important; }
.um-tbl--phases .um-tbl-row:not(:last-child)::after,
.um-tbl--frame2 .um-tbl-row:not(:last-child)::after{ left:0 !important; right:0 !important; }

/* v=264 — /method tables: sublabel bronze but NOT italic; min-width:0 so header & row 1fr columns line up exactly (Programme/Phase I were pushed wider by their header content) */
.um-tbl--phases .um-tbl-at{ font-style:normal !important; }
.um-tbl--phases .um-tbl-head > div, .um-tbl--phases .um-tbl-row > div,
.um-tbl--frame2 .um-tbl-head > div, .um-tbl--frame2 .um-tbl-row > div{ min-width:0 !important; }

/* v=265 — /method tables: REAL alignment fix — header had 24px side padding (global !important) vs rows' 18px, shifting every header label right of its column body. Match them so numbers start exactly under the titles. + wider column gap on the phases table. */
.um-tbl--phases .um-tbl-head, .um-tbl--frame2 .um-tbl-head{ padding-left:18px !important; padding-right:18px !important; }
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ gap:24px !important; }

/* v=266 — phases table: a bit more column gap (24px -> 36px); head & rows share it so numbers stay aligned */
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ gap:36px !important; }

/* v=267 — REVERT v=266: 36px gap shrank the phase columns and wrapped the labels into many lines. Back to the good 24px. */
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ gap:24px !important; }

/* v=268 — phases table: lock header labels + sublabels to a SINGLE line each (no wrapping into extra rows), back to the good 24px gap. Fonts untouched. */
.um-tbl--phases .um-tbl-head{ gap:24px !important; }
.um-tbl--phases .um-tbl-head > div{ white-space:nowrap !important; }
.um-tbl--phases .um-tbl-at{ white-space:nowrap !important; }

/* v=269 — phases table: MORE horizontal space between columns (24px -> 48px). Head & rows share the gap so numbers stay aligned; nowrap (v=268) keeps labels on one line. */
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ gap:48px !important; }

/* v=270 — REVERT v=269: back to 24px gap. */
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ gap:24px !important; }

/* v=271 — phases table: fixed content-sized columns + uniform 24px gap so EVERY column gap matches the Programme->Phase I gap. Same template on head & rows keeps numbers aligned; last col 1fr fills the rest. */
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ grid-template-columns:110px 175px 185px 200px 1fr !important; gap:24px !important; }

/* v=272 — phases table: all 5 columns EQUAL width => even spacing between every name; Final Phase column restored (no collapsing 1fr). column-gap only + row-gap:0 so vertical spacing is unchanged. Nothing removed. */
.um-tbl--phases .um-tbl-head, .um-tbl--phases .um-tbl-row{ grid-template-columns:repeat(5,1fr) !important; column-gap:24px !important; row-gap:0 !important; }

/* v=273 — 4.2 entrance list: bronze-italic descriptions get the same 0.5 underline + live hover as the 4.1 key terms (scoped to #me-entrance only) */
#me-entrance .um-gold-em{ border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important; cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
#me-entrance .um-gold-em:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }

/* v=274 — 4.2 entrance list: same 0.5 underline under the S1/100x codes (line only, no hover) */
#me-entrance .um-list--codes strong{ border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important; }

/* v=275 — 4.2 entrance list: same live hover on the S1/100x codes (now that they have the underline) */
#me-entrance .um-list--codes strong{ cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
#me-entrance .um-list--codes strong:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }

/* v=276 — 4.2 entrance list: pull the dash + description a touch closer to the S1/100x code (margin-right 8px -> 3px) */
#me-entrance .um-list--codes strong{ margin-right:3px !important; }

/* v=277 — 4.3 objective table (um-tbl--obj): same look as the phases table — bronze header bar + 3px left line, row hover, full-width separators, header padding matched to rows so columns align. 3 columns. */
.um-tbl--obj .um-tbl-head{ grid-template-columns:120px 1fr 140px !important; border:1px solid #8b6f3d !important; border-left-width:3px !important; margin-bottom:5px !important; padding-left:18px !important; padding-right:18px !important; align-items:start !important; }
.um-tbl--obj .um-tbl-row{ grid-template-columns:120px 1fr 140px !important; border-left:3px solid #8b6f3d !important; border-right:1px solid #8b6f3d !important; transition:background .18s ease !important; }
.um-tbl--obj .um-tbl-head + .um-tbl-row{ border-top:1px solid #8b6f3d !important; }
.um-tbl--obj .um-tbl-row:last-child{ border-bottom:1px solid #8b6f3d !important; }
.um-tbl--obj .um-tbl-row:hover{ background:#f3ecd9 !important; }
.um-tbl--obj .um-tbl-row:not(:last-child)::after{ left:0 !important; right:0 !important; }
.um-tbl--obj .um-tbl-prog{ color:#1a1814 !important; font-weight:400 !important; }
.um-tbl--obj .um-tbl-head > div, .um-tbl--obj .um-tbl-row > div{ min-width:0 !important; }

/* v=278 — 4.2 entrance list: match the 4.1 list font-size (fixed 20px) */
#me-entrance .um-list>li{ font-size:20px !important; }

/* v=279 — 4.2 entrance list: S1/100x codes — plain bronze, not bold */
#me-entrance .um-list--codes strong{ font-weight:400 !important; }

/* v=280 — 4.2 entrance list: S1/100x codes are all-caps+digits so they read bigger than the italic sentences at the same px; bring them down to match optically */
#me-entrance .um-list--codes strong{ font-size:16px !important; }

/* v=281 — 4.2 codes: explicitly same font as the italic descriptions (Newsreader) + smaller 15px so the all-caps codes never read bigger than the sentences */
#me-entrance .um-list--codes strong{ font-size:15px !important; font-family:'Newsreader',Georgia,serif !important; }

/* v=282 — 4.2 codes: make the S1/100x codes IDENTICAL to the italic bronze descriptions (same family already, now same italic style + same 20px size) so the whole line reads as one font */
#me-entrance .um-list--codes strong{ font-style:italic !important; font-size:20px !important; }

/* v=283 — programmes (umx) cards: rows come alive on hover — subtle lift + navy badge pop, no colour change */
.umx-row{ transition:transform .2s ease; }
.umx-row:hover{ transform:translateY(-2px); }
.umx-row .umx-letter{ transition:transform .2s ease, box-shadow .2s ease; }
.umx-row:hover .umx-letter{ transform:scale(1.08); box-shadow:0 6px 16px rgba(20,30,60,.28); }

/* v=284 — programmes: top process squares (01-07) + text rubrics come alive on hover too (motion only, no colour change) */
.umx-process-item{ transition:transform .2s ease; }
.umx-process-item:hover{ transform:translateY(-3px) scale(1.05); }
.umx-intro{ transition:transform .2s ease; }
.umx-intro:hover{ transform:translateY(-2px); }

/* v=285 — programmes: 06+07 (Examine+Certify) + Certification heading blocks come alive on hover too */
.umx-final-heading-wrap{ transition:transform .2s ease; }
.umx-final-heading-wrap:hover{ transform:translateY(-2px); }

/* v=286 — method 4.7: certificate preview bar (evidence-style toggle) that reveals the UM certificate.
   Full bronze frame all around + 3px bronze vertical accent on the left; revealed certificate framed the same way. */
.um-cert-bar{ margin-top:34px; }
.um-cert-bar summary{ list-style:none; cursor:pointer; display:block; }
.um-cert-bar summary::-webkit-details-marker{ display:none; }
.um-cert-bar-title{
  display:block; position:relative; width:100%; box-sizing:border-box;
  padding:16px 44px 9px 14px;
  background:#EFE9D7;
  border:1px solid #8B6F3E; border-left:3px solid #8B6F3E;
  font-family:"Newsreader","Times New Roman",Times,serif;
  font-size:20px; line-height:1.1; font-weight:400; font-style:normal;
  letter-spacing:-0.02em; color:#8B6F3E;
  transition:padding-left .22s ease;
}
.um-cert-bar summary:hover .um-cert-bar-title{ padding-left:20px; }
.um-cert-bar-indicator{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:12px; height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1 L6 7 L11 1 Z' fill='none' stroke='%238B6F3E' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:12px 8px; background-position:center;
}
.um-cert-bar[open] .um-cert-bar-indicator{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 7 L6 1 L11 7 Z' fill='none' stroke='%238B6F3E' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.um-cert-reveal{
  margin-top:16px; padding:20px;
  background:#fff;
  border:1px solid #8B6F3E; border-left:3px solid #8B6F3E;
}
.um-cert-img{
  display:block; width:100%; max-width:620px; height:auto; margin:0 auto;
  background:#fff;
  box-shadow:0 12px 34px rgba(20,30,60,.14);
}
@media (max-width:640px){
  .um-cert-bar-title{ font-size:19px; padding:13px 40px 8px 12px; }
  .um-cert-reveal{ padding:14px; }
}

/* v=287 — More megamenu: heading separators should look like the page section separators —
   a 1px bronze line below the heading, FULL content width, EQUALLY inset from both vertical frame
   lines. The column has 48px left padding but 0 right padding, so the original line touched the
   RIGHT vertical line. Keep the border on the block h3 (full-width like the page) and add a 48px
   right inset so the gap to the left and right vertical lines is the same. */
.um-megamenu__col h3{
  border-bottom:1px solid rgba(139,111,61,0.28) !important;
  padding-bottom:6px !important;
  margin-right:48px !important;
  transition:border-bottom-color .2s ease;
}
.um-megamenu__col h3:hover{ border-bottom-color:#8b6f3d !important; }
.um-megamenu h3 a,
.um-megamenu__col h3 a{
  display:inline !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
  padding-right:0 !important;
}

/* v=288 — method hero H1: the bronze "Ultima Memoria (UM)" comes alive on hover with the SAME
   animation as the 4.1 key terms (.um-key): thin 0.5px bronze underline in the base, then on hover
   the colour deepens (#6b5a2f), the underline strengthens (0.45 -> 0.95) and a light warm tint
   appears — .18s ease. Scoped to .um-h1-key so only this title (not other pages' h1 em) is affected. */
.um-h1 em.um-h1-key{
  border-bottom:0.5px solid rgba(139,111,61,0.45);
  padding-bottom:1px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.um-h1 em.um-h1-key:hover{
  color:#6b5a2f;
  border-bottom-color:rgba(139,111,61,0.95);
  background-color:rgba(139,111,61,0.05);
}

/* v=289 — method hero H1: drop the underline on "Ultima Memoria (UM)" (per feedback — no line on
   the big title). Keep ONLY the warm-tint band + slight colour deepen on hover. */
.um-h1 em.um-h1-key{ border-bottom:none !important; padding-bottom:0 !important; }

/* v=290 — method hero H1: base stays clean (no line), but ON HOVER a very thin bronze line appears
   under "Ultima Memoria (UM)" (in addition to the warm-tint band). Reserve the line as transparent
   in the base so it fades in smoothly with the existing .18s transition. */
.um-h1 em.um-h1-key{ border-bottom:1px solid transparent !important; padding-bottom:2px !important; }
.um-h1 em.um-h1-key:hover{ border-bottom-color:#8b6f3d !important; }

/* v=291 — method hero H1 hover line: it sat too low and nearly touched "Method" on the next line.
   Pull the line up tight under the words (padding-bottom 2px -> 0). */
.um-h1 em.um-h1-key{ padding-bottom:0 !important; }

/* v=292 — method hero H1 hover line: the border-bottom sat at the font's DESCENT (measured ≈10px
   BELOW the cap of "Method" on the next line), so padding couldn't lift it. Switch to a real text
   underline that sits just under the BASELINE of "Ultima Memoria (UM)" — right against the letters
   and well clear of the line below. Thin 1px, fades in on hover; the warm-tint band stays. */
.um-h1 em.um-h1-key{
  border-bottom:none !important; padding-bottom:0 !important;
  text-decoration-line:underline !important;
  text-decoration-color:transparent !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:2px !important;
  transition:color .18s ease, background-color .18s ease, text-decoration-color .18s ease !important;
}
.um-h1 em.um-h1-key:hover{ text-decoration-color:#8b6f3d !important; }

/* v=293 — method hero H1: per feedback, turn OFF the warm-tint band + colour deepen — on hover ONLY
   the thin bronze underline appears. Drop the line a touch so it sits just BELOW the "(UM)"
   parentheses without cutting the tops of "Method" below (offset 2px -> 6px). */
.um-h1 em.um-h1-key{ text-underline-offset:6px !important; }
.um-h1 em.um-h1-key:hover{
  color:#8b6f3d !important;                 /* no colour deepen */
  background-color:transparent !important;  /* no band */
}

/* v=294 — method hero H1 hover line: drop one more pixel (offset 6 -> 7) and make it a touch
   thinner (thickness 1px -> 0.75px). */
.um-h1 em.um-h1-key{ text-underline-offset:7px !important; text-decoration-thickness:0.75px !important; }

/* v=295 — method section headings (.um-h2): selected words get the SAME hover treatment as the hero
   H1 — a thin (0.75px) bronze underline that fades in on hover only (base stays clean). Applied per
   word via .um-uline: 4.1 "Process"; 4.2 "Entrance Test" + "Admission" (NOT "and"). */
.um-h2 .um-uline{
  text-decoration-line:underline !important;
  text-decoration-color:transparent !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:4px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-h2 .um-uline:hover{ text-decoration-color:#8b6f3d !important; }

/* v=296 — method 4.1 (#me-process) ONLY: the two underlined sub-headings "Phases of the Training
   Process" and "Structure of the Training Process" go 17px -> 24px. Everything else unchanged; the
   4.2 .um-sub ("Selection and Definition…") stays as-is. */
#me-process .um-sub{ font-size:24px !important; }

/* v=297 — method 4.1 sub-headings: 24px -> 20px. */
#me-process .um-sub{ font-size:20px !important; }

/* v=298 — method 4.1 sub-headings: drop the long static 66ch underline; instead, ON HOVER a line
   the WIDTH OF THE WORDS appears just below, in the sub-heading's own colour (#6b6253) — same hover
   behaviour as the h2 heading words, thin 0.75px. Base stays clean. */
#me-process .um-sub{
  border-bottom:none !important;
  text-decoration-line:underline !important;
  text-decoration-color:transparent !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:3px !important;
  transition:text-decoration-color .18s ease !important;
}
#me-process .um-sub:hover{ text-decoration-color:#6b6253 !important; }

/* v=299 — INVERT the behaviour for the 4.x heading words (.um-uline) and the 4.1 sub-headings: the
   line now STAYS by default and DISAPPEARS on hover (was: clean base, line appears on hover). Colours
   unchanged — bronze for the heading words, grey #6b6253 for the sub-headings. */
.um-h2 .um-uline{ text-decoration-color:#8b6f3d !important; }
.um-h2 .um-uline:hover{ text-decoration-color:transparent !important; }
#me-process .um-sub{ text-decoration-color:#6b6253 !important; }
#me-process .um-sub:hover{ text-decoration-color:transparent !important; }

/* v=300 — main hero H1 "Ultima Memoria (UM)": same inversion — the bronze underline now STAYS by
   default and DISAPPEARS on hover (was: clean base, line on hover). */
.um-h1 em.um-h1-key{ text-decoration-color:#8b6f3d !important; }
.um-h1 em.um-h1-key:hover{ text-decoration-color:transparent !important; }

/* v=301 — make ALL these lines fully STATIC (always there, no hover toggle): base == hover. Heading
   words stay bronze, 4.1 sub-headings stay grey. The hero H1 line is a touch LIGHTER than the rest
   (bronze at 60% so it reads softer on the big title). */
.um-h2 .um-uline,
.um-h2 .um-uline:hover{ text-decoration-color:#8b6f3d !important; }
#me-process .um-sub,
#me-process .um-sub:hover{ text-decoration-color:#6b6253 !important; }
.um-h1 em.um-h1-key,
.um-h1 em.um-h1-key:hover{ text-decoration-color:rgba(139,111,61,0.6) !important; }

/* v=302 — bring back the warm "traka" (band) on hover, identical to the body key terms: the static
   underlines stay, and on hover a light warm band fades in behind the word. The hero H1 line goes
   back to the same SOLID bronze as the rest, and its hover band is a touch LIGHTER than the others
   (the "lighter" now refers to the band, not the line). */
.um-h2 .um-uline,
#me-process .um-sub,
.um-h1 em.um-h1-key{ transition:background-color .18s ease, text-decoration-color .18s ease !important; }
/* H1 line: solid bronze like the others (override the v=301 lighter line) */
.um-h1 em.um-h1-key,
.um-h1 em.um-h1-key:hover{ text-decoration-color:#8b6f3d !important; }
/* hover bands */
.um-h2 .um-uline:hover{ background-color:rgba(139,111,61,0.05) !important; color:#6b5a2f !important; }
/* sub-headings: inline-block so the band hugs the text (text-width, like the body), not the full row */
#me-process .um-sub{ display:inline-block !important; }
#me-process .um-sub:hover{ background-color:rgba(139,111,61,0.05) !important; }
.um-h1 em.um-h1-key:hover{ background-color:rgba(139,111,61,0.03) !important; }

/* v=303 — final: REMOVE the hover bands/animations entirely; only the static lines remain. Heading
   words stay bronze, sub-headings grey, hero H1 bronze — nothing changes on hover. */
.um-h2 .um-uline:hover{ background-color:transparent !important; color:#8b6f3d !important; }
#me-process .um-sub:hover{ background-color:transparent !important; }
.um-h1 em.um-h1-key:hover{ background-color:transparent !important; }

/* v=304 — doctor: re-apply the DISAPPEAR-on-hover for the main H1, the 4.1 sub-headings and the
   heading words (Process / Entrance Test / Admission) — the static line STAYS by default and
   DISAPPEARS on hover. Does NOT touch the body key terms (e.g. "three"/"phases", .um-key). */
.um-h2 .um-uline:hover{ text-decoration-color:transparent !important; }
#me-process .um-sub:hover{ text-decoration-color:transparent !important; }
.um-h1 em.um-h1-key:hover{ text-decoration-color:transparent !important; }

/* v=306 — extend the 4.1 key-term treatment (0.5px bronze underline + live hover band) to the
   .um-key terms in 4.2 (#me-entrance) and 4.3 (#me-plan). They were bronze italic but had no
   underline/hover because the original rules were scoped to #me-process only. */
#me-entrance .um-p .um-key,
#me-plan .um-p .um-key{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#me-entrance .um-p .um-key:hover,
#me-plan .um-p .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=307 — same key-term treatment for 4.4–4.7: #me-phases, #me-comprehensive, #me-final, #me-cert. */
#me-phases .um-p .um-key,
#me-comprehensive .um-p .um-key,
#me-final .um-p .um-key,
#me-cert .um-p .um-key{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#me-phases .um-p .um-key:hover,
#me-comprehensive .um-p .um-key:hover,
#me-final .um-p .um-key:hover,
#me-cert .um-p .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=308 — method 4.1 "Structure of the Training Process": the first criterion block after the
   sub-heading sat 48px below it. The .um-crit-h header carries a 34px top margin which collapses
   THROUGH the border/padding-less .um-crit wrapper, adding the extra space. Zero both for the first
   block after the sub-heading so the gap matches the 14px sub-heading→text gap used above. */
#me-process .um-sub + .um-crit{ margin-top:0 !important; }
/* v=309 — nudge the box down ~6px so its top border lines up visually with where the paragraph TEXT
   begins under the other sub-heading (text sits ~5px below its box top due to line-height; a hard
   box border does not), making the two sub-heading gaps look identical. */
#me-process .um-sub + .um-crit .um-crit-h{ margin-top:6px !important; }

/* v=310 — method 4.1 Learning Phase list: align into clean columns so "the" and "with" each start
   at the same x on every row (one below the other). The first two clauses vary in width
   (one/two/three), so give them fixed min-widths; the gaps may differ but the columns line up. */
.um-list--lp .lp-the{ display:inline-block; min-width:36px; }
.um-list--lp .lp-ph{ display:inline-block; min-width:206px; }
/* v=311 — give "with" a right gap (~10px) equal to the left gap before it, so the second clause sits
   symmetrically and starts at a fixed x on every row (the text space after "with" was removed). */
.um-list--lp .lp-w{ display:inline-block; padding-right:10px; }
@media (max-width:680px){
  .um-list--lp .lp-the, .um-list--lp .lp-ph{ display:inline; min-width:0; }
  .um-list--lp .lp-w{ display:inline; padding-right:0; }
}

/* v=312 — method 4.7 performance list: align on the "=". Right-align the code so "=" sits at the
   same x with an EQUAL gap on both sides; "increase…to" is identical text so the percentages start
   at the same x; a fixed min-width on the percentage lines up "of the baseline value" too. */
.um-list--perf .s-code{ display:inline-block; min-width:72px; text-align:left; }
/* .um-list--codes strong carries a margin-right:8px — kill it here so the code hits the column edge
   and the "=" gaps stay symmetric; we control all spacing via the column spans. */
.um-list--perf .s-code strong, .um-list--perf .s-pct strong{ margin-right:0 !important; }
.um-list--perf .s-eq{ display:inline-block; padding:0 14px; }
/* percentage: 16px left gap (after "to") == the right gap to "of" for the longest value (1,000%);
   shorter values just get a bigger right gap. */
.um-list--perf .s-pct{ display:inline-block; min-width:70px; margin-left:16px; }
@media (max-width:680px){
  .um-list--perf .s-code, .um-list--perf .s-pct{ display:inline; min-width:0; text-align:left; margin-left:0; }
  .um-list--perf .s-pct{ margin-left:6px; }
  .um-list--perf .s-eq{ padding:0 8px; }
}

/* v=313 — method 4.7 certificate preview: even mat all around the cert inside the white frame.
   Was 20px padding (top/bottom 21px) but the image's max-width centering left ~45px on the sides,
   so the frame looked uneven. Make the padding itself the gap (45px == the old side gap) and let the
   image fill that padded box, so top/bottom == left/right on every width. Lock the cert box to A4
   proportion (aspect-ratio 1.412 portrait); this also stops the lazy SVG collapsing to 0 height. */
.um-cert-reveal{ padding:45px; }
.um-cert-img{
  width:100%; max-width:none; margin:0;
  aspect-ratio:1 / 1.412; object-fit:contain;
}
@media (max-width:640px){
  .um-cert-reveal{ padding:18px; }
}

/* v=314 — method 4.7: the S2/S3/S10 performance targets moved out of the code list into a 3-column
   table (Programme | Performance Objective | Valuation). Reuses um-tbl--obj for the exact same look,
   header bar and row hover as the 4.2 objective table; only the column track differs because the
   Valuation phrase ("1,000% of the baseline value") is longer than "within N days" — give col 3
   more room so it stays on one line. The % keeps the bold emphasis it had in the old list. */
.um-tbl--perf .um-tbl-head,
.um-tbl--perf .um-tbl-row{ grid-template-columns:150px 310px 1fr !important; }
/* the % is the key figure: bronze, lightly weighted (not heavy bold), thin bronze underline UNDER
   the percentage only (it's an inline <strong>, so the line hugs just "200%", not the whole phrase) */
.um-tbl--perf .um-tbl-row > div strong{ color:#8b6f3d !important; font-weight:500 !important; border-bottom:1px solid rgba(139,111,61,.5) !important; padding-bottom:1px !important; }
/* same thin underline under the S2/S3/S10 code only — fit-content shrinks the cell to the code width
   so the line hugs "S2/200", not the full 150px column */
/* line-height:1 collapses the block's half-leading so the line hugs the text with the SAME 1px gap
   as the inline % underline (a block border otherwise sits ~8px below because of line-height) */
.um-tbl--perf .um-tbl-prog{ width:fit-content !important; line-height:1 !important; border-bottom:1px solid rgba(139,111,61,.5) !important; padding-bottom:1px !important; }
@media (max-width:640px){
  .um-tbl--perf .um-tbl-head,
  .um-tbl--perf .um-tbl-row{ grid-template-columns:84px 1fr 130px !important; }
}

/* v=315 — method 4.7 certificate preview bar: title CENTERED + ITALIC, −4px from the original
   (20→16, mobile 19→15); no hover text-slide; the WHOLE bar lights up on hover EXACTLY like the
   "Back to the top of the page" bar (colour direction is SWAPPED in v=316 below).
   Symmetric left/right padding (44px) so the text sits in the TRUE centre; the chevron stays
   absolute on the right and floats over the padding. Hover padding == base padding → no slide. */
/* v=316 — same bar, two tweaks: (1) SWAP the hover colours — the lighter #f6f2e4 is now the resting
   colour and hover darkens to the original #efe9d7. (2) Underline UNDER THE TITLE TEXT ONLY (text-
   decoration, not a full-width border) that DISAPPEARS on hover, exactly like the .um-uline heading
   words: bronze #8b6f3d, 0.75px, 4px offset, fades to transparent on hover. */
.um-cert-bar-title{ font-size:16px !important; font-style:italic !important; text-align:center !important; padding-left:44px !important; background:#f6f2e4 !important; text-decoration-line:underline !important; text-decoration-color:#8b6f3d !important; text-decoration-thickness:0.75px !important; text-underline-offset:4px !important; transition:background-color .2s ease, text-decoration-color .18s ease !important; }
.um-cert-bar summary:hover .um-cert-bar-title{ padding-left:44px !important; background:#efe9d7 !important; text-decoration-color:transparent !important; }
@media (max-width:640px){
  .um-cert-bar-title{ font-size:15px !important; padding-left:40px !important; }
  .um-cert-bar summary:hover .um-cert-bar-title{ padding-left:40px !important; }
}

/* v=317 — method 4.7 certificate reveal: matte it like a framed print. The mat (the even 45px gap we
   added in v=313) goes from white to the table cream #fdfaf1; the OUTER bronze frame (v=286/313)
   stays as-is; ADD a thin 0.75px bronze frame around the certificate image itself. Drop the old
   card shadow so the look stays flat/framed like the tables. */
.um-cert-reveal{ background:#fdfaf1 !important; }
.um-cert-img{ border:0.75px solid #8b6f3d !important; box-shadow:none !important; }

/* v=318 — right section asides: drop the "…b" number; frame the label (e.g. "Process") between TWO
   identical hairlines — the existing one above the note (the line below the label) PLUS a NEW matching
   one above the label — same 1px rgba(139,111,61,.14) line. The label's own top padding (18px) equals
   the note's top margin (18px) so the label sits equidistant from the line above and below it. */
.um-section__aside--right .um-section__num{ display:none !important; }
.um-section__aside--right .um-section__label{
  border-top:1px solid rgba(139,111,61,0.14) !important;
  padding-top:18px !important;
  text-align:center !important; /* centre the name between the two lines (was right-aligned, v=93) */
}

/* v=319 — apply the aside treatment everywhere. RIGHT side (v=318) is already global. LEFT side: drop
   the "a" suffix on the number, CENTRE the number + label (to match the right and the centred note),
   and add the SAME hairline below the number (= above the label), like the right's line above the
   name. Label sits equidistant between that line and the note's line below it (padding-top 18px). */
.um-section__aside:not(.um-section__aside--right) .um-section__num::after{ display:none !important; }
.um-section__aside:not(.um-section__aside--right) .um-section__num{ text-align:center !important; }
.um-section__aside:not(.um-section__aside--right) .um-section__label{
  text-align:center !important;
  border-top:1px solid rgba(139,111,61,0.14) !important;
  padding-top:18px !important;
}

/* v=320 — section 4.5 (#me-comprehensive) ONLY: the "(3)" in "Learning Assessment Test (3)" should be
   italic like the bronze key text around it. The global `.um-p .um-roman{font-style:normal}` forces it
   upright; an ID-scoped rule re-italicises it just here. */
#me-comprehensive .um-roman{ font-style:italic !important; }

/* v=321 — hero RIGHT aside (every page): drop the Subsections LINK LIST only. Keep "Section" + its
   value, the "Subsections" label and its underline. The right aside is decorative (aria-hidden); the
   left aside keeps the full list. Targets the dd holding the numbered links so it works on any page. */
.um-section__aside--right .um-meta dd:has(.um-meta-num){ display:none !important; }

/* v=322 — hero right aside note: the "Subsections" dt already carries the divider line, so the copied
   note must NOT add its own border-top (that made a double line). Drop the note's top line and let the
   text begin just under the Subsections line. Scoped to .um-hero so section 4.1's note keeps its line. */
.um-hero .um-section__aside--right .um-section__note{ border-top:none !important; padding-top:0 !important; margin-top:14px !important; }

/* v=323 — hero right aside: centre ONLY the section value ("4 · Method") on the line. "Section" and
   "Subsections" (the dt labels) stay left-aligned as before; the note below stays centred too. */
.um-hero .um-section__aside--right .um-meta dd{ text-align:center !important; }
.um-hero .um-section__aside--right .um-meta dd a,
.um-hero .um-section__aside--right .um-meta-link{ display:block !important; width:auto !important; text-align:center !important; padding-left:0 !important; text-indent:0 !important; }

/* v=324 — home body sections: same .um-key treatment as the method sections. The global `.um-p strong`
   already gives bronze italic; these add the 0.5px bronze underline + live hover (the method version
   was scoped to #me-* ids, so home's #s-* sections need their own copy). */
#s-welcome .um-p .um-key,
#s-system .um-p .um-key,
#s-practice .um-p .um-key{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#s-welcome .um-p .um-key:hover,
#s-system .um-p .um-key:hover,
#s-practice .um-p .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=325 — home title underline: the "(UM)" parentheses dipped into the .um-uline (offset was only 4px
   at the 40px H2). Lift the underline a touch so it clears the parens cleanly, like the hero H1. */
#s-welcome .um-h2 .um-uline,
#s-system .um-h2 .um-uline,
#s-practice .um-h2 .um-uline{ text-underline-offset:7px !important; }

/* v=326 — system page body sections: .um-key AND .um-gold-em get the 0.5px bronze underline + live
   hover (global `.um-p strong`/`.um-gold-em` already give bronze italic; method's rule was scoped to
   #me-*, so #sec-* need a copy). Section-level so it also catches the list/numlist gold-em terms. */
#sec-overview .um-key, #sec-overview .um-gold-em,
#sec-learning .um-key, #sec-learning .um-gold-em,
#sec-comparison .um-key, #sec-comparison .um-gold-em,
#sec-performance .um-key, #sec-performance .um-gold-em{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#sec-overview .um-key:hover, #sec-overview .um-gold-em:hover,
#sec-learning .um-key:hover, #sec-learning .um-gold-em:hover,
#sec-comparison .um-key:hover, #sec-comparison .um-gold-em:hover,
#sec-performance .um-key:hover, #sec-performance .um-gold-em:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=327 — bracketed figures like (2×), (7), (10) stay UPRIGHT (not italic), parens included, even
   inside an italic key term. Wrap the number in <span class="um-fig">…</span>. */
.um-fig{ font-style:normal !important; }

/* v=328 — numlist markers "(01.)" were italic (v=... set font-style:italic). The bracketed numbers
   should be UPRIGHT (parens included), like the rest of the figures. */
.um-numlist__n{ font-style:normal !important; }

/* v=335 — memory page body sections: .um-key gets bronze italic + the 0.5px underline + hover, like
   the method/system sections (global .um-p strong only covers .um-p; .um-emph/.um-list need this too). */
#m-brain .um-key, #m-neuro .um-key, #m-foundation .um-key, #m-requirements .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#m-brain .um-key:hover, #m-neuro .um-key:hover, #m-foundation .um-key:hover, #m-requirements .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=331 — 2.3 conc-list key terms: the global `.um-p strong` bronze-italic only applies inside .um-p,
   so .um-key inside the comparison <li>s needs its own bronze italic (underline + hover already come
   from v=326's #sec-comparison .um-key). */
#sec-comparison .um-conc-list .um-key{ color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important; }

/* v=332 — system section H2 titles: the bronze em word now uses .um-uline (underline that fades on
   hover, like the hero/main title). Lift the offset to 7px so the "(UM)" parens in 2.4 clear the line. */
#sec-overview .um-h2 .um-uline,
#sec-learning .um-h2 .um-uline,
#sec-comparison .um-h2 .um-uline,
#sec-performance .um-h2 .um-uline{ text-underline-offset:7px !important; }

/* v=333 — ALL bars (trake) site-wide (system + method + memory): table head bars, block/phase/criterion
   bars and dividers. Resting stays the darker #efe9d7 (their natural bg); hover lights up to the lighter
   #f6f2e4 (transition .2s), like the "Back to the top of the page" bar. */
.um-tbl-head,
.um-mblock__head,
.um-cmp-divider,
.um-crit-h,
.um-pb{ transition:background-color .2s ease !important; }
.um-tbl-head:hover,
.um-mblock__head:hover,
.um-cmp-divider:hover,
.um-crit-h:hover,
.um-pb:hover{ background:#f6f2e4 !important; }

/* v=330 — 2.2/2.4 mblock rows: ONLY add a full-width separator line per row + a full-row hover that
   reach the frame, like the method tables. Each row is pulled out to the body edges (margin -20px ==
   body padding) so the line/hover touch the frame, then re-padded so the text stays EXACTLY where it
   was. Column gap (10px) and the spans' 9px vertical padding are left untouched → spacing unchanged. */
#sec-learning .um-mblock__list,
#sec-performance .um-mblock__list{ display:block !important; }
#sec-learning .um-mblock__list > li,
#sec-performance .um-mblock__list > li{
  display:grid !important; align-items:baseline !important; column-gap:10px !important;
  grid-template-columns:1fr 190px !important;
  margin:0 -20px !important; padding:0 20px !important;
  border-bottom:1px solid rgba(139,111,61,0.20) !important;
  transition:background-color .18s ease !important;
}
#sec-performance .um-mblock__list > li:has(.um-mblock__code){
  grid-template-columns:max-content 1fr 190px !important;
}
#sec-learning .um-mblock__list > li:last-child,
#sec-performance .um-mblock__list > li:last-child{ border-bottom:none !important; margin-bottom:-14px !important; padding-bottom:14px !important; }
/* first row: pull up over the 16px gap left by the intro's bottom margin so its hover fills right up to
   the intro line (content stays put — the pull is re-added as padding). No unfilled strip after intro. */
#sec-learning .um-mblock__list > li:first-child,
#sec-performance .um-mblock__list > li:first-child{ margin-top:-16px !important; padding-top:16px !important; }
#sec-learning .um-mblock__list > li:hover,
#sec-performance .um-mblock__list > li:hover{ background:#f3ecd9 !important; }
/* the intro paragraph at the top is a row too: its separator line runs full-width to the frame (it was
   capped at max-width 640 so the line stopped short) and it gets the same full-row hover fill. */
#sec-learning .um-mblock__intro,
#sec-performance .um-mblock__intro{
  max-width:none !important;
  margin:-22px -20px 16px !important; padding:22px 20px 16px !important;
  transition:background-color .18s ease !important;
}
#sec-learning .um-mblock__intro:hover,
#sec-performance .um-mblock__intro:hover{ background:#f3ecd9 !important; }
/* mobile body padding is 12px (≤720px) — match the full-bleed pull so the line/hover still hit the frame */
@media (max-width:720px){
  #sec-learning .um-mblock__list > li,
  #sec-performance .um-mblock__list > li{ margin:0 -12px !important; padding:0 12px !important; grid-template-columns:1fr max-content !important; }
  #sec-performance .um-mblock__list > li:has(.um-mblock__code){ grid-template-columns:max-content 1fr max-content !important; }
  #sec-learning .um-mblock__list > li:last-child,
  #sec-performance .um-mblock__list > li:last-child{ margin-bottom:-14px !important; padding-bottom:14px !important; }
  #sec-learning .um-mblock__intro,
  #sec-performance .um-mblock__intro{ margin:-14px -12px 16px !important; padding:14px 12px 16px !important; }
}

/* v=336 — 3.4 (#m-requirements) index-list markers upright: v=... (line ~14480) set .um-idx-n
   font-style:italic, so the figures 01..10 AND their "(" ".)" parens rendered slanted. The doctor
   wants these numbers + brackets vertical/plain (not cursive) in this section. Numbers only — text
   beside them is untouched. Scoped to #m-requirements so other pages' um-idx are unaffected. */
#m-requirements .um-idx-n,
#m-requirements .um-idx-n::before,
#m-requirements .um-idx-n::after{ font-style:normal !important; }

/* v=337 — memory page: the doctor highlights numeric figures (.um-val: 1,500 / 86 / 10^79 /
   10^150 / 1,375 g …) and percentages (.um-hl: 2% / 25%) as key terms too, but they were missing
   the bronze underline (.um-val had none + was italic; .um-hl was color:inherit black, v=14472).
   Give them the SAME 0.5px bronze line + hover as .um-key — but UPRIGHT (figures vertical, per the
   user). Scoped to the four memory sections so other pages are unaffected. */
#m-brain .um-val, #m-neuro .um-val, #m-foundation .um-val, #m-requirements .um-val,
#m-brain .um-hl,  #m-neuro .um-hl,  #m-foundation .um-hl,  #m-requirements .um-hl{
  color:#8b6f3d !important; font-style:normal !important; font-weight:500 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#m-brain .um-val:hover, #m-neuro .um-val:hover, #m-foundation .um-val:hover, #m-requirements .um-val:hover,
#m-brain .um-hl:hover,  #m-neuro .um-hl:hover,  #m-foundation .um-hl:hover,  #m-requirements .um-hl:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=338 — memory section H2 titles: the bronze <em> now uses .um-uline (global, bronze underline that
   FADES on hover, like method/system). Match home/system 7px underline-offset (base .um-uline is 4px). */
#m-brain .um-h2 .um-uline,
#m-neuro .um-h2 .um-uline,
#m-foundation .um-h2 .um-uline,
#m-requirements .um-h2 .um-uline{ text-underline-offset:7px !important; }

/* v=339 — programmes 5.1 (#p-overview) body: .um-key gets bronze italic + 0.5px underline + hover
   like the other pages (global .um-p strong only colours; lists/.um-list--codes need this). The
   (01.) codes are plain <strong> (stay upright bronze via .um-list--codes); reset the 8px
   margin-right that rule adds, but only on the .um-key terms (the code keeps its gap). */
#p-overview .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#p-overview .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }
#p-overview .um-list--codes .um-key{ margin-right:0 !important; }

/* v=340 — programmes 5.2/5.3/5.4 (#p-s2/#p-s3/#p-s10) intro paragraphs: same .um-key bronze italic +
   0.5px underline + hover. The (Nx)/(N) figures use .um-fig (global, upright). Only affects the new
   .um-key spans in the lede paragraph; the expectation cards / umpc rows use other classes. */
#p-s2 .um-key, #p-s3 .um-key, #p-s10 .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#p-s2 .um-key:hover, #p-s3 .um-key:hover, #p-s10 .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=341 — HERO H1 bronze <em> (memory "Memory"; programmes "Ultima Memoria (UM)") gets the SAME
   underline that is VISIBLE by default and FADES OUT on hover, like the .um-h2 .um-uline word —
   NOT the .um-h1-key behaviour (that fades IN on hover). Self-contained, independent of the .um-h2
   cascade. (text-decoration-skip-ink:auto default makes the line skip the "y" descender cleanly.)
   Plus the programmes h2 titles (.um-uline) get the 7px offset like home/system/memory. */
.um-h1 .um-uline{
  text-decoration-line:underline !important;
  text-decoration-color:#8b6f3d !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:7px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-h1 .um-uline:hover{ text-decoration-color:transparent !important; }

#p-overview .um-h2 .um-uline,
#p-s2 .um-h2 .um-uline,
#p-s3 .um-h2 .um-uline,
#p-s10 .um-h2 .um-uline{ text-underline-offset:7px !important; }

/* v=342 — measurement/tests page section h2 titles get the .um-uline 7px offset like the other pages.
   (Hero H1 .um-uline = v=341; hero lede .um-key = v=14504. Section-body .um-key scopes added per
   segment as the body text is marked.) */
#m-core .um-h2 .um-uline, #m-entrance .um-h2 .um-uline, #m-learning .um-h2 .um-uline,
#m-final-assess .um-h2 .um-uline, #m-final-exam .um-h2 .um-uline, #m-results .um-h2 .um-uline{ text-underline-offset:7px !important; }

/* v=345 — measurement 6.1 (#m-core): body .um-key (bronze italic underline + hover); the um-cat
   "1|2|3" category bars get the standard trake look (bronze frame + 3px left + #efe9d7 rest →
   #f6f2e4 hover); the um-t alignment table gets the bronze frame + 3px left + head-bar hover
   (#f6f2e4) + row hover (#f3ecd9) like the method tables. Grid layout untouched. */
#m-core .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#m-core .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }

#m-core .um-cat{ background:#efe9d7 !important; border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; transition:background-color .2s ease !important; }
#m-core .um-cat:hover{ background:#f6f2e4 !important; }

#m-core .um-t-head{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; transition:background-color .2s ease !important; }
#m-core .um-t-head:hover{ background:#f6f2e4 !important; }
#m-core .um-t-body{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; }
#m-core .um-t-row{ transition:background-color .18s ease !important; }
#m-core .um-t-row:hover{ background:#f3ecd9 !important; }

/* v=346 — 6.1 alignment table .ph column: phase CODE (PP/LP/FP) + a bronze pipe separator (replaces
   a slash); code is fixed-width so the pipes line up vertically. */
#m-core .um-t-row .ph .ph-code{ display:inline-block; min-width:2.4em; font-weight:600; color:#8b6f3d !important; }
#m-core .um-t-row .ph .ph-sep{ color:#8b6f3d; opacity:.5; margin-right:11px; }

/* v=347 — measurement 6.2 (#m-entrance): body .um-key bronze italic + 0.5px underline + hover
   (paras, the "basis for" list, the S1/100 dimensions list, footnote). Block-heads left unmarked
   per the established convention (sub-headings stay plain). */
#m-entrance .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#m-entrance .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }

/* v=348 — measurement 6.3 (#m-learning): .um-key scope + the "Overview by Training Programme"
   um-t table gets the same bronze frame + 3px left + head/row hover as #m-core's tables. */
#m-learning .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#m-learning .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }
#m-learning .um-t-head{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; transition:background-color .2s ease !important; }
#m-learning .um-t-head:hover{ background:#f6f2e4 !important; }
#m-learning .um-t-body{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; }
#m-learning .um-t-row{ transition:background-color .18s ease !important; }
#m-learning .um-t-row:hover{ background:#f3ecd9 !important; }

/* v=349 — measurement 6.4/6.5/6.6 (#m-final-assess/#m-final-exam/#m-results): .um-key scope.
   6.5 Performance table gets the bronze frame + 3px + head/row hover; 6.6 um-cat "1|2|3" bars get
   the trake look (bronze frame + 3px left + #efe9d7 rest → #f6f2e4 hover) like #m-core's. */
#m-final-assess .um-key, #m-final-exam .um-key, #m-results .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#m-final-assess .um-key:hover, #m-final-exam .um-key:hover, #m-results .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }

#m-final-exam .um-t-head{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; transition:background-color .2s ease !important; }
#m-final-exam .um-t-head:hover{ background:#f6f2e4 !important; }
#m-final-exam .um-t-body{ border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; }
#m-final-exam .um-t-row{ transition:background-color .18s ease !important; }
#m-final-exam .um-t-row:hover{ background:#f3ecd9 !important; }

#m-results .um-cat{ background:#efe9d7 !important; border:1px solid #8b6f3e !important; border-left:3px solid #8b6f3d !important; transition:background-color .2s ease !important; }
#m-results .um-cat:hover{ background:#f6f2e4 !important; }

/* v=350 — programmes expectation cards (.umx-expectation-card, S2/S3/S10). (a) DISABLE the lift/scale
   hover "movement" (v=... 14653-14666: translateY/scale/box-shadow on .umx-row/.umx-process-item/
   .umx-intro/.umx-letter/.umx-final-heading-wrap). (b) Give the WORDS our text-hover instead: the
   process-strip step labels (Measure…Certify) and the section heading copy below (01|Measure, A|
   Capacity of the Memory …) turn BRONZE + ITALIC with a thin underline that FADES IN when you hover
   the box/row. Numbers/codes (.umx-process-number, .umx-row-code) untouched. All 3 cards share these
   classes. */
.umx-expectation-card .umx-row:hover,
.umx-expectation-card .umx-process-item:hover,
.umx-expectation-card .umx-intro:hover,
.umx-expectation-card .umx-final-heading-wrap:hover{ transform:none !important; }
.umx-expectation-card .umx-row:hover .umx-letter{ transform:none !important; box-shadow:none !important; }

.umx-expectation-card .umx-process-label,
.umx-expectation-card .umx-intro-title .umx-row-copy,
.umx-expectation-card .umx-row-title .umx-row-copy{
  text-decoration-line:underline !important; text-decoration-color:transparent !important;
  text-underline-offset:4px !important; text-decoration-thickness:0.75px !important;
  transition:color .18s ease, text-decoration-color .18s ease !important;
}
.umx-expectation-card .umx-process-item:hover .umx-process-label,
.umx-expectation-card .umx-intro:hover .umx-intro-title .umx-row-copy,
.umx-expectation-card .umx-row:hover .umx-row-title .umx-row-copy{
  color:#8b6f3d !important; font-style:italic !important; text-decoration-color:#8b6f3d !important;
}

/* v=351 — extend the same hover text-reveal to the remaining marked card copy: the row sub-line
   descriptions (A.1/B.1/…/L1.1/E1.1…) and the 06+07 "Examine + Certify" final heading copy. On
   hovering the row / final-heading-wrap the text turns bronze + italic with the thin underline
   fading in (same as the boxes). */
.umx-expectation-card .umx-row-sub .umx-row-copy,
.umx-expectation-card .umx-final-heading .umx-row-copy{
  text-decoration-line:underline !important; text-decoration-color:transparent !important;
  text-underline-offset:3px !important; text-decoration-thickness:0.75px !important;
  transition:color .18s ease, text-decoration-color .18s ease !important;
}
.umx-expectation-card .umx-row:hover .umx-row-sub .umx-row-copy,
.umx-expectation-card .umx-final-heading-wrap:hover .umx-final-heading .umx-row-copy{
  color:#8b6f3d !important; font-style:italic !important; text-decoration-color:#8b6f3d !important;
}

/* v=352 — BUG FIX: italic on hover widened the long, wrapping card copies (C "Form of Expression…",
   C.1, the long sub-lines) so they re-wrapped to a different line count → the row (align-items:center)
   re-centred → the badge + text visibly shifted ("C / C.1 moves up"). Short copies (A "Capacity…")
   never wrapped so never moved. Fix: keep the bronze + underline reveal but DROP the italic on every
   wrapping copy (titles, subs, intro/final headings) → layout can't reflow → nothing moves. The
   process-strip labels (one word, never wrap) keep their italic. */
.umx-expectation-card .umx-intro:hover .umx-intro-title .umx-row-copy,
.umx-expectation-card .umx-row:hover .umx-row-title .umx-row-copy,
.umx-expectation-card .umx-row:hover .umx-row-sub .umx-row-copy,
.umx-expectation-card .umx-final-heading-wrap:hover .umx-final-heading .umx-row-copy{
  font-style:normal !important;
}

/* v=353 — the evidence "LINK TO PUBLICATION" frame goes ONLY around the card's APPLY button
   (.umx-book), nowhere else. Identical to .um-publication-button:hover — brightness(.95) + a 2px
   outline offset 4px. All 3 cards (shared class). */
.umx-expectation-card .umx-book{ transition:outline-color .18s ease, filter .18s ease !important; outline:2px solid transparent; outline-offset:4px; }
.umx-expectation-card .umx-book:hover,
.umx-expectation-card .umx-book:focus-visible{ outline-color:rgba(31,46,75,.3) !important; filter:brightness(.95) !important; }

/* v=354 — per-WORD reveal in the card DESCRIPTIONS: the doctor's marked words are wrapped in
   <span class="umx-hw">; on hovering their segment (row/intro/final-heading-wrap) ONLY those words
   light bronze + thin underline (no italic → no reflow/movement). The sub-line / paragraph copy no
   longer lights as a whole — override v=351's row-sub rule so only the marked words do. Titles,
   intro-titles and process labels keep their existing whole-copy reveal (they ARE the marked term). */
.umx-expectation-card .umx-hw{
  text-decoration-line:underline; text-decoration-color:transparent;
  text-underline-offset:3px; text-decoration-thickness:0.75px;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.umx-expectation-card .umx-row:hover .umx-row-sub .umx-row-copy{ color:inherit !important; text-decoration-color:transparent !important; }
.umx-expectation-card .umx-row:hover .umx-hw,
.umx-expectation-card .umx-intro:hover .umx-hw,
.umx-expectation-card .umx-final-heading-wrap:hover .umx-hw{
  color:#8b6f3d !important; text-decoration-color:#8b6f3d !important;
}

/* v=355 — per user: the marked WORDS (description .umx-hw + the row/intro/final heading copy) are
   now shown ALWAYS bronze + underline (like the body-text um-key the doctor asked for); the
   "animation" is WORD-level — hovering the individual word turns it ITALIC. Process-strip boxes
   (01-07) left untouched (they keep their on-hover reveal). */
.umx-expectation-card .umx-hw,
.umx-expectation-card .umx-row-title .umx-row-copy,
.umx-expectation-card .umx-intro-title .umx-row-copy,
.umx-expectation-card .umx-final-heading .umx-row-copy{
  color:#8b6f3d !important;
  text-decoration-line:underline !important; text-decoration-color:#8b6f3d !important;
  text-underline-offset:3px !important; text-decoration-thickness:0.75px !important;
}
.umx-expectation-card .umx-hw:hover,
.umx-expectation-card .umx-row .umx-row-title .umx-row-copy:hover,
.umx-expectation-card .umx-intro .umx-intro-title .umx-row-copy:hover,
.umx-expectation-card .umx-final-heading-wrap .umx-final-heading .umx-row-copy:hover{
  font-style:italic !important;
}

/* v=343 — /method phases table header bar: give it more height (~2 body rows ≈ 100px, ref the rows
   below) and let the two-line cells breathe — a thin bronze divider BETWEEN "Learning Phase (N)" and
   the "Assessment Test (N)" sub-line. The divider is border-top on .um-tbl-at, so it spans ONLY the 3
   phase columns (Programme / Final Phase have no sub-line → no divider; NOT a full bar-width rule).
   Body rows + all hover colours untouched. */
.um-tbl--phases .um-tbl-head{ padding-top:16px !important; padding-bottom:16px !important; }
.um-tbl--phases .um-tbl-at{
  margin-top:8px !important; padding-top:12px !important;
  border-top:1px solid rgba(139,111,61,0.30) !important;
}
/* v=344 — phases table divider was sitting low (visual gap 17.5px above / 10px below): raise it so the
   line is CENTERED between "Learning Phase" and "Assessment Test" — margin-top 12→8, padding-top 8→12
   (LP leading-below ≈5.5px, AT leading-above ≈2px → ~13.5 above / ~14 below). Bar height unchanged. */

/* v=356 — Target Groups: marked words use the same bronze + thin underline + warm hover as the
   Method/System/Programmes/Home pages. Scoped to section 8 so other pages keep their current tuning. */
#g-primary .um-key, #g-secondary .um-key, #g-university .um-key, #g-working .um-key,
#g-jobseekers .um-key, #g-seniors .um-key, #g-chess .um-key, #g-athletes .um-key,
#g-musicians .um-key, #g-actors .um-key, #g-quran .um-key, #g-educators .um-key{
  color:#8b6f3d !important;
  font-style:italic !important;
  font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#g-primary .um-key:hover, #g-secondary .um-key:hover, #g-university .um-key:hover, #g-working .um-key:hover,
#g-jobseekers .um-key:hover, #g-seniors .um-key:hover, #g-chess .um-key:hover, #g-athletes .um-key:hover,
#g-musicians .um-key:hover, #g-actors .um-key:hover, #g-quran .um-key:hover, #g-educators .um-key:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}
#g-primary .um-h2 .um-uline, #g-secondary .um-h2 .um-uline, #g-university .um-h2 .um-uline,
#g-working .um-h2 .um-uline, #g-jobseekers .um-h2 .um-uline, #g-seniors .um-h2 .um-uline,
#g-chess .um-h2 .um-uline, #g-athletes .um-h2 .um-uline, #g-musicians .um-h2 .um-uline,
#g-actors .um-h2 .um-uline, #g-quran .um-h2 .um-uline, #g-educators .um-h2 .um-uline{
  text-underline-offset:7px !important;
}

/* v=357 — modules / applications page, 7.1 "Module Overview" (#a-overview). REFERENCE block: the exact
   pattern to copy for each remaining page/section — bronze italic .um-key + 0.5px underline + hover,
   scoped by section-id; the title <em> gets .um-uline at 7px offset. (Body um-key'd in the 7.1 intro.) */
#a-overview .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#a-overview .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }
#a-overview .um-h2 .um-uline{ text-underline-offset:7px !important; }

/* v=358 — ai-memory (Section 9: Technology & Memory) body sections: the doctor's highlighted key
   terms (.um-key) get the same bronze italic + 0.5px underline + warm hover as Method/System/
   Programmes/Tests/Target-Groups. The global `.um-p strong` only COLOURS bronze-italic — the
   underline + hover must be re-declared, scoped to the six ai-* section-ids. The hero lede .um-key
   is already covered globally (.um-hero .um-lede .um-key, v=14504). */
#ai-abundance .um-key, #ai-assistance .um-key, #ai-opportunities .um-key,
#ai-risks .um-key, #ai-techage .um-key, #ai-partnership .um-key{
  color:#8b6f3d !important;
  font-style:italic !important;
  font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#ai-abundance .um-key:hover, #ai-assistance .um-key:hover, #ai-opportunities .um-key:hover,
#ai-risks .um-key:hover, #ai-techage .um-key:hover, #ai-partnership .um-key:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}
/* 9.3 percentages (.um-hl: 40% / 18% / 14%) are key VALUES → same bronze line + hover, but UPRIGHT
   (figures vertical, per the user). Overrides the global .um-hl{color:inherit} reset (v=14472). */
#ai-abundance .um-hl, #ai-assistance .um-hl, #ai-opportunities .um-hl,
#ai-risks .um-hl, #ai-techage .um-hl, #ai-partnership .um-hl{
  color:#8b6f3d !important;
  font-style:normal !important;
  font-weight:500 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#ai-abundance .um-hl:hover, #ai-assistance .um-hl:hover, #ai-opportunities .um-hl:hover,
#ai-risks .um-hl:hover, #ai-techage .um-hl:hover, #ai-partnership .um-hl:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}
/* Section H2 titles: bronze <em> uses .um-uline (global, bronze underline that FADES on hover, like
   method/system/memory). Match the 7px underline-offset used across the other pages. */
#ai-abundance .um-h2 .um-uline, #ai-assistance .um-h2 .um-uline, #ai-opportunities .um-h2 .um-uline,
#ai-risks .um-h2 .um-uline, #ai-techage .um-h2 .um-uline, #ai-partnership .um-h2 .um-uline{
  text-underline-offset:7px !important;
}

/* v=359 — Modules / Applications (Section 7) + the per-module practice-preview pages: apply the same
   bronze italic + 0.5px underline + warm hover as the other pages to the doctor's highlighted key
   terms. Two homes for this content: (a) the /applications hero intro paragraph and (b) each module's
   description on /practice/test/N (colours inline + the _*.ejs partials, all rendered inside the
   active #module section). 7.1 (#a-overview) is already scoped at v=357; the hero lede is global
   (.um-hero .um-lede .um-key, v=14504). */
.um-hero .um-p .um-key,
#module .um-key{
  color:#8b6f3d !important;
  font-style:italic !important;
  font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.um-hero .um-p .um-key:hover,
#module .um-key:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}
/* 7.9 Arabic figure (.um-hl: "500") is a key VALUE → same bronze line + hover, but UPRIGHT (figures
   vertical, per the user). Overrides the global .um-hl{color:inherit} reset (v=14472). */
#module .um-hl{
  color:#8b6f3d !important;
  font-style:normal !important;
  font-weight:500 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#module .um-hl:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}

/* v=360 — ai-memory 9.6: the emphasised paragraph .um-aiUline already carries a full-width ink
   underline (text-decoration, v=14458). Inside it the doctor's .um-key terms would add a SECOND
   (bronze 0.5px border-bottom) line right under the words — a messy double underline. Drop the
   border on .um-key there so those words keep only the bronze italic colour over the single shared
   underline. (Hover still recolours; the section .um-key scope is v=358.) */
#ai-partnership .um-aiUline .um-key{
  border-bottom:none !important;
  padding-bottom:0 !important;
}

/* v=361 — Evidence (Section 10: 10.1 Developer / 10.2 Media / 10.3 Scientific Context, incl. the A–F
   research dividers nested inside 10.3): the doctor's highlighted key terms (.um-key) get the same
   bronze italic + 0.5px underline + warm hover as the other pages. The page also uses em.um-dim for a
   stronger emphasis tier (left untouched — bronze italic, no underline); plain <strong> stays bronze
   italic via the global .um-p strong. Hero lede .um-key is global (v=14504). */
#ev-developer .um-key, #ev-media .um-key, #ev-scientific .um-key{
  color:#8b6f3d !important;
  font-style:italic !important;
  font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#ev-developer .um-key:hover, #ev-media .um-key:hover, #ev-scientific .um-key:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}
/* Section H2 titles: bronze <em> uses .um-uline (global, fades on hover) at the shared 7px offset. */
#ev-developer .um-h2 .um-uline, #ev-media .um-h2 .um-uline, #ev-scientific .um-h2 .um-uline{
  text-underline-offset:7px !important;
}

/* v=362 — programmes expectation cards: the per-WORD italic-on-hover (v=355) drags whole sentences
   (the italic widens the run → the wrapping card copy reflows → visible shift), per the doctor "ovaj
   kursiv povlači cijele rečenice, nije to to". Replace it, for the card BODY marked text (.umx-hw
   descriptions + the row/intro/final-heading copies), with the SAME hover as body um-key text: NO
   italic — just "light up our colours" (darker bronze + darker underline + a faint warm tint). The
   words stay always-on bronze + underline (v=355 base kept). The process-strip boxes 01-07
   (.umx-process-label, single words → no reflow) KEEP their italic-on-hover reveal (v=350) — untouched.
   Same selectors as v=355's hover so this wins by source order. */
.umx-expectation-card .umx-hw,
.umx-expectation-card .umx-row-title .umx-row-copy,
.umx-expectation-card .umx-intro-title .umx-row-copy,
.umx-expectation-card .umx-final-heading .umx-row-copy{
  transition:color .18s ease, text-decoration-color .18s ease, background-color .18s ease !important;
}
.umx-expectation-card .umx-hw:hover,
.umx-expectation-card .umx-row .umx-row-title .umx-row-copy:hover,
.umx-expectation-card .umx-intro .umx-intro-title .umx-row-copy:hover,
.umx-expectation-card .umx-final-heading-wrap .umx-final-heading .umx-row-copy:hover{
  font-style:normal !important;
  color:#6b5a2f !important;
  text-decoration-color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05) !important;
}
/* .umx-hw sits inside a hovered row/intro/final-heading-wrap, where v=354's segment rule
   (.umx-row:hover .umx-hw, specificity 0,4,0) pins the colour to base bronze and out-specifies the
   plain :hover above. Re-darken ONLY the directly-hovered word with a higher-specificity selector. */
.umx-expectation-card .umx-row:hover .umx-hw:hover,
.umx-expectation-card .umx-intro:hover .umx-hw:hover,
.umx-expectation-card .umx-final-heading-wrap:hover .umx-hw:hover{
  color:#6b5a2f !important;
  text-decoration-color:#6b5a2f !important;
}

/* v=363 — expectation cards: the row-title heading copy (.umx-row-title .umx-row-copy) is display:block
   in a GRID cell, so its box stretches to the full cell width (~474px) while the text is only ~185px —
   the v=362 hover tint then filled the whole row. Shrink the box to its text (width:fit-content) so the
   highlight hugs ONLY the words. Rest state is visually unchanged (the box has no bg/border at rest;
   the underline already tracks the text, not the box). The .umx-hw words (inline) and the intro/final-
   heading copies (flex children, already shrink to content) hug correctly — left untouched. */
.umx-expectation-card .umx-row-title .umx-row-copy{
  width:fit-content !important;
  max-width:100% !important;
}

/* v=364 — programmes expectation-card navy header (.umx-hero), all 3 cards (S2/S3/S10): COLOUR-ONLY
   hover, nothing moves (per the doctor). The big white title (.umx-title) goes BRONZE on hover; the
   bronze "twofold/threefold/tenfold (Nx)" claim word (.umx-claim strong) goes WHITE on hover — a clean
   swap. Base styles live in /css/um-expectation-cards.css (which loads after foundations.css, so the
   :hover both out-specifies the base AND is locked with !important). The eyebrow text change
   "S# PROGRAMME"→"S#/NNN PROGRAMME" is in programmes.ejs. `.umx-title` / `.umx-claim` are used ONLY by
   the 3 expectation cards. */
.umx-title{ transition:color .2s ease; }
.umx-title:hover{ color:#8B6F3E !important; }
.umx-claim strong{ transition:color .2s ease, text-decoration-color .2s ease; }
.umx-claim strong:hover{ color:#AFB4BD !important; text-decoration-color:#AFB4BD !important; }

/* v=365 — same colour-only hover for the card eyebrow `.umx-program-label` (the "S#/NNN PROGRAMME"
   code, all 3 cards): bronze → WHITE on hover, underline too. Matches the .umx-claim strong behaviour. */
.umx-program-label{ transition:color .2s ease, text-decoration-color .2s ease; }
.umx-program-label:hover{ color:#AFB4BD !important; text-decoration-color:#AFB4BD !important; }

/* v=366 — a little more breathing room around the claim word .umx-claim strong ("twofold/threefold/
   tenfold (Nx)"): ~one extra space of horizontal margin each side (all 3 cards). margin (not padding)
   so the underline keeps hugging just the word. */
.umx-claim strong{ margin-left:0.3em !important; margin-right:0.3em !important; }

/* v=367 — programmes expectation cards: the .umx-section-label dividers ("Measured Abilities of
   Memory", "Learning and Assessment Phases", "Certification"). They are ALREADY bronze + underlined
   (v79 in um-expectation-cards.css). Per the doctor, the hover = the underline FADES AWAY: the bronze
   line sits there by default and VANISHES on hover (like the .um-uline title underlines elsewhere).
   Text colour unchanged, nothing moves. The :hover (0,3,0) out-specifies v79 (0,2,0), so transparent
   wins; the transition fades it. */
.umx-expectation-card .umx-section-label{
  transition:text-decoration-color .18s ease;
  cursor:default;
}
.umx-expectation-card .umx-section-label:hover{
  text-decoration-color:transparent !important;
}

/* v=368 — those same .umx-section-label underlines were too thick (they take the auto thickness from
   v79's `text-decoration:underline`). Thin them to 0.5px. The repeated class
   (.umx-section-label.umx-section-label = specificity 0,3,0) beats v79 (0,2,0), which loads after
   foundations.css. Only these three divider labels — nothing else. */
.umx-expectation-card .umx-section-label.umx-section-label{
  text-decoration-thickness:0.5px !important;
}

/* v=369 — ALL the lettered row TITLES in the expectation cards (.umx-row-title .umx-row-copy:
   A/B/C/D "Measured Abilities", L1/L2/L3 "Learning Phases", E1/E2, and the S# certification row) →
   text in the card's dark navy (--um-navy #061f38, like the header). Title text ONLY — the underline
   stays bronze and the .umx-row-sub below is untouched. The step intro-titles (01 / 02+03 / 04+05) use
   .umx-intro-title (not .umx-row-title) so they are NOT affected. Rest rule (0,3,0) loads after v=355;
   the hover rule matches v=362's (0,5,0) and loads later, so the title stays navy on hover (no bronze
   flash), no bg. */
.umx-expectation-card .umx-row-title .umx-row-copy{
  color:#061f38 !important;
}
.umx-expectation-card .umx-row .umx-row-title .umx-row-copy:hover{
  color:#8b6f3d !important;   /* navy → bronze on hover (the card animation) */
  background-color:transparent !important;
}

/* v=370 — all the CODES / NUMBERS in the expectation cards → the same navy (#061f38): the process-strip
   numbers .umx-process-number (01–07), every .umx-row-code (01 / 02+03 / 04+05 intro codes, A/B/C/D /
   L1-L3 / E1/E2 / S# row codes, and the A.1/B.1… sub codes), and the step intro-titles
   .umx-intro-title .umx-row-copy (Measure / Analyse + Plan / Train + Assess). Hover kept navy on the
   intro-titles (override v=362). Big letter badges (white) + descriptions + bronze-marked words
   untouched. */
.umx-expectation-card .umx-row-code,
.umx-expectation-card .umx-process-number,
.umx-expectation-card .umx-intro-title .umx-row-copy{
  color:#061f38 !important;
}
.umx-expectation-card .umx-intro .umx-intro-title .umx-row-copy:hover{
  color:#8b6f3d !important;   /* navy → bronze on hover */
  background-color:transparent !important;
}

/* v=371 — the last remaining bronze labels in the cards → navy too, "like the rest": the three
   .umx-section-label dividers (Measured Abilities of Memory / Learning and Assessment Phases /
   Certification) and the .umx-final-heading copy ("Examine + Certify | 1 Day"). Section-label TEXT
   navy; its underline kept BRONZE (like the row titles) and still FADES on hover (v=367) + thin
   (v=368). Repeated class (0,3,0)/(0,4,0) beats v79's currentColor underline. Final-heading copy: navy
   text, bronze underline kept, hover stays navy. */
.umx-expectation-card .umx-section-label{
  color:#061f38 !important;                       /* navy text */
}
.umx-expectation-card .umx-section-label.umx-section-label{
  text-decoration-color:#8b6f3d !important;       /* bronze line, always (don't follow the navy text) */
}
.umx-expectation-card .umx-section-label.umx-section-label:hover{
  color:#8b6f3d !important;                        /* navy → bronze on hover (line stays bronze) */
  text-decoration-color:#8b6f3d !important;
}
.umx-expectation-card .umx-final-heading .umx-row-copy{
  color:#061f38 !important;                        /* navy text */
}
.umx-expectation-card .umx-final-heading-wrap .umx-final-heading .umx-row-copy:hover{
  color:#8b6f3d !important;                         /* navy → bronze on hover */
  background-color:transparent !important;
}

/* v=372 — the navy→bronze hover must fire ONLY when you hover the WORD/title itself, NOT when the
   pointer merely enters the row/segment. The old v=350/352 rules used `.umx-row:hover` / `.umx-intro:hover`
   / `.umx-final-heading-wrap:hover` (whole-row triggers). Step 1: on row/segment hover keep the titles
   navy (cancel the whole-row light-up). Step 2 (same specificity, declared AFTER step 1 so it wins when
   the element is the one hovered): the element's OWN :hover goes bronze. Result: hover the row → nothing;
   hover the actual title → it turns bronze. */
.umx-expectation-card .umx-row:hover .umx-row-title .umx-row-copy,
.umx-expectation-card .umx-intro:hover .umx-intro-title .umx-row-copy,
.umx-expectation-card .umx-final-heading-wrap:hover .umx-final-heading .umx-row-copy{
  color:#061f38 !important;
}
.umx-expectation-card .umx-row .umx-row-title .umx-row-copy:hover,
.umx-expectation-card .umx-intro .umx-intro-title .umx-row-copy:hover,
.umx-expectation-card .umx-final-heading-wrap .umx-final-heading .umx-row-copy:hover{
  color:#8b6f3d !important;
}

/* v=373 — 5.1 (#p-overview) programme tables. `.um-mblock--solid` (8773-8776) ALREADY lays each row out
   as a grid <li> with a full-width bottom line + 12px vertical padding (and 0-padding spans). So the
   rows + lines already exist — they just (a) stopped 20px short of the frame and (b) had no hover.
   This block ONLY: extends each <li> out to the body's 20px frame padding so its existing line + the
   hover reach the border (margin:0 -20px re-padded by padding-x:20px → the CONTENT does not move), keeps
   the existing 12px vertical padding, and adds the full-row hover. NO columns / text / spacing touched. */
#p-overview .um-mblock__list > li{
  margin:0 -20px !important;
  padding:12px 20px !important;
  transition:background-color .18s ease !important;
}
#p-overview .um-mblock__list > li:hover{ background:#f3ecd9 !important; }
/* first/last row: pull over the body's top/bottom padding so their hover fills the full cell — up to the
   header bar (first) and down to the bottom frame (last). Content stays put (the pull is re-added as
   padding). */
#p-overview .um-mblock__list > li:first-child{ margin-top:-6px !important; padding-top:18px !important; }
#p-overview .um-mblock__list > li:last-child{ margin-bottom:-6px !important; padding-bottom:18px !important; }
@media (max-width:720px){
  #p-overview .um-mblock__list > li{ margin:0 -12px !important; padding:12px 12px !important; }
}
/* a horizontal divider between the (A.)–(D.) list and the FIRST table — the same thin bronze line that
   sits between consecutive tables (6060). The first table follows the .um-list--codes list. */
#p-overview .um-list--codes + .um-mblock{ position:relative !important; margin-top:48px !important; }
#p-overview .um-list--codes + .um-mblock::before{
  content:"" !important; position:absolute !important; left:0; right:0; top:-24px; height:0.5px; background:#8b6f3e;
}
/* between consecutive tables: thin the same divider to 0.5px (scoped to #p-overview so the system
   2.2/2.4 tables keep their 1px). */
#p-overview .um-mblock + .um-mblock::before{ height:0.5px !important; }
/* and the SAME divider ABOVE the (A.)–(D.) list — between the intro paragraph and the list — so the
   list is bracketed by an identical line top & bottom with the same 48px gap. */
#p-overview .um-p + .um-list--codes{ position:relative !important; margin-top:48px !important; }
#p-overview .um-p + .um-list--codes::before{
  content:"" !important; position:absolute !important; left:0; right:0; top:-24px; height:0.5px; background:#8b6f3e;
}

/* v=374 — card footer "Total duration" value ("(7) seven days" … "(14) fourteen days"): hang the (N)
   bracket as its own column so, when the words wrap to a 2nd line, the wrapped word starts UNDER the
   word — not under the "(N)". inline-grid: col 1 = (N), col 2 = the word(s)+days which wrap within
   their own column (aligned to each other). */
.umx-footer-value:has(.um-fig){
  display:inline-grid;
  grid-template-columns:auto minmax(0, max-content);
  column-gap:0.3em;
  align-items:baseline;
  justify-items:start !important;
  text-align:left !important;
}
.umx-footer-value:has(.um-fig) > *{ text-align:left !important; }

/* v=375 — gold duration badge (.umx-duration-top): hover EACH element on its own → only the element under
   the cursor turns NAVY (#061f38), like the rest of the card's per-element hovers (NOT the whole badge).
   "DURATION", the big number, "DAYS" each react alone; the calendar icon (img) is tinted toward navy via
   filter, also only when itself hovered. Smooth transition. */
.umx-duration-top small,
.umx-duration-top .umx-days-number,
.umx-duration-top .umx-days-label{ transition:color .2s ease; }
.umx-duration-top small:hover,
.umx-duration-top .umx-days-number:hover,
.umx-duration-top .umx-days-label:hover{ color:#061f38 !important; }
.umx-duration-top .umx-top-calendar-icon{ transition:filter .2s ease; }
.umx-duration-top .umx-top-calendar-icon:hover{
  filter:brightness(0) saturate(100%) invert(8%) sepia(64%) saturate(3147%) hue-rotate(196deg) brightness(96%) contrast(101%) !important;
}

/* ============================================================================================
   v=376 — "Today" dashboard MOCKUP (#dash-today). Lives inside the site shell (foundations-layout:
   real header + footer), so it must speak the same visual language: bronze #8b6f3e / navy #061f38 /
   warm paper, Cormorant display + Newsreader body + IBM Plex Mono for figures. Principle of the
   screen: ONE number (your multiplier toward the target), ONE next step, ONE clock.
   ============================================================================================ */
#dash-today{
  --dt-bronze:#8b6f3e; --dt-bronze-d:#6b5a2f; --dt-navy:#061f38; --dt-ink:#4a4133;
  --dt-line:rgba(139,111,61,0.28); --dt-line-strong:#8b6f3e;
  --dt-paper:#fdfaf1; --dt-card:#fffdf8; --dt-cream:#f3ecd9; --dt-silver:#9ba1ab;
  --dt-good:#5d7a52;
  max-width:1060px; margin:0 auto; padding:8px 0 40px; color:var(--dt-ink);
  font-family:'Newsreader',Georgia,serif;
}
#dash-today *{ box-sizing:border-box; }

/* greeting */
#dash-today .dt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:0.5px solid var(--dt-line); }
#dash-today .dt-hello{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0; }
#dash-today .dt-hello em{ font-style:italic; color:var(--dt-bronze); }
#dash-today .dt-sub{ margin:6px 0 0; font-size:14px; color:var(--dt-ink); opacity:.8; }
#dash-today .dt-prog-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dt-bronze); border:1px solid var(--dt-line);
  border-radius:999px; padding:6px 12px; white-space:nowrap; background:var(--dt-card); }

/* top grid: gauge (hero) + side column (clock + next step) */
#dash-today .dt-top{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:20px; align-items:stretch; }
#dash-today .dt-card{ background:var(--dt-card); border:1px solid var(--dt-line);
  border-radius:14px; padding:24px; position:relative; }
#dash-today .dt-card__eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dt-bronze); margin:0 0 4px; }

/* gauge card */
#dash-today .dt-gauge-card{ display:flex; flex-direction:column; align-items:center; text-align:center;
  border-left:3px solid var(--dt-bronze); }
#dash-today .dt-gauge-wrap{ position:relative; width:100%; max-width:340px; margin:6px auto 0; }
#dash-today .dt-gauge-wrap svg{ display:block; width:100%; height:auto; overflow:visible; }
#dash-today .dt-gauge-center{ position:absolute; left:0; right:0; top:52%; transform:translateY(-50%); }
#dash-today .dt-mult{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--dt-navy);
  font-size:64px; line-height:.9; }
#dash-today .dt-mult span{ font-size:30px; color:var(--dt-bronze); }
#dash-today .dt-mult-cap{ font-size:13px; color:var(--dt-ink); opacity:.85; margin-top:2px; }
#dash-today .dt-iu{ display:flex; justify-content:center; gap:0; width:100%; margin-top:14px;
  border-top:0.5px solid var(--dt-line); padding-top:16px; }
#dash-today .dt-iu div{ flex:1; }
#dash-today .dt-iu div + div{ border-left:0.5px solid var(--dt-line); }
#dash-today .dt-iu b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:24px; color:var(--dt-navy); line-height:1; }
#dash-today .dt-iu small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dt-bronze); margin-top:6px; }
#dash-today .dt-iu .dt-iu--target b{ color:var(--dt-bronze); }
#dash-today .dt-line-note{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:19px; color:var(--dt-navy); margin:18px 0 0; }

/* side column */
#dash-today .dt-side{ display:flex; flex-direction:column; gap:20px; }
#dash-today .dt-clock{ background:linear-gradient(180deg,#9b742d 0%,#8b6f3e 100%); color:#fff;
  border:none; }
#dash-today .dt-clock .dt-card__eyebrow{ color:rgba(255,255,255,.78); }
#dash-today .dt-clock-day{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:34px;
  line-height:1; margin:2px 0 0; }
#dash-today .dt-clock-day b{ font-weight:600; }
#dash-today .dt-bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.25); margin:14px 0 10px;
  overflow:hidden; }
#dash-today .dt-bar > i{ display:block; height:100%; border-radius:999px; background:#fff; }
#dash-today .dt-clock-left{ font-size:13.5px; color:rgba(255,255,255,.92); }
#dash-today .dt-clock-left b{ color:#fff; }

#dash-today .dt-next{ display:flex; flex-direction:column; flex:1; border-left:3px solid var(--dt-navy); }
#dash-today .dt-next-title{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:27px; line-height:1.05; margin:2px 0 6px; }
#dash-today .dt-next-due{ font-size:13.5px; color:var(--dt-ink); opacity:.85; margin:0 0 16px; }
#dash-today .dt-next-due b{ color:var(--dt-bronze-d); opacity:1; }
#dash-today .dt-btn{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--dt-navy); border:1px solid var(--dt-navy); border-radius:999px;
  padding:12px 22px; text-decoration:none; cursor:pointer; transition:background .18s ease,color .18s ease; }
#dash-today .dt-btn:hover{ background:var(--dt-bronze); border-color:var(--dt-bronze); }
#dash-today .dt-btn .dt-arrow{ transition:transform .18s ease; }
#dash-today .dt-btn:hover .dt-arrow{ transform:translateX(3px); }

/* 4 metrics row */
#dash-today .dt-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
#dash-today .dt-metric{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:12px;
  padding:16px 16px 14px; transition:background .18s ease,border-color .18s ease; }
#dash-today .dt-metric:hover{ background:var(--dt-cream); border-color:var(--dt-line-strong); }
#dash-today .dt-metric-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dt-bronze); margin:0 0 8px; }
#dash-today .dt-metric-val{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--dt-navy);
  font-size:30px; line-height:.95; }
#dash-today .dt-metric-val u{ text-decoration:none; font-size:14px; color:var(--dt-ink); opacity:.7;
  font-family:'IBM Plex Mono',monospace; }
#dash-today .dt-metric-delta{ font-size:13px; color:var(--dt-good); margin-top:7px; font-style:italic; }
#dash-today .dt-metric-delta::before{ content:"\2191  "; font-style:normal; }

/* journey strip */
#dash-today .dt-journey{ margin-top:30px; background:var(--dt-card); border:1px solid var(--dt-line);
  border-radius:14px; padding:24px 18px 22px; }
#dash-today .dt-journey-head{ display:flex; justify-content:space-between; align-items:baseline;
  padding:0 6px 18px; }
#dash-today .dt-journey-head h3{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:22px; margin:0; }
#dash-today .dt-journey-head span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--dt-bronze);
  letter-spacing:.05em; }
#dash-today .dt-steps{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; position:relative; }
#dash-today .dt-step{ position:relative; text-align:center; padding:0 6px; }
/* connector line behind the dots */
#dash-today .dt-step::before{ content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px;
  background:var(--dt-line); z-index:0; }
#dash-today .dt-step:first-child::before{ display:none; }
#dash-today .dt-step.is-done::before, #dash-today .dt-step.is-now::before{ background:var(--dt-bronze); }
#dash-today .dt-dot{ position:relative; z-index:1; width:32px; height:32px; border-radius:50%; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px;
  background:var(--dt-paper); border:2px solid var(--dt-line); color:var(--dt-silver); }
#dash-today .dt-step.is-done .dt-dot{ background:var(--dt-bronze); border-color:var(--dt-bronze); color:#fff; }
#dash-today .dt-step.is-now .dt-dot{ background:#fff; border-color:var(--dt-navy); color:var(--dt-navy);
  box-shadow:0 0 0 4px rgba(6,31,56,.10); }
#dash-today .dt-step-label{ font-size:13px; line-height:1.2; color:var(--dt-navy); }
#dash-today .dt-step.is-locked .dt-step-label{ color:var(--dt-silver); }
#dash-today .dt-step-sub{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.04em;
  text-transform:uppercase; margin-top:5px; color:var(--dt-bronze); }
#dash-today .dt-step.is-now .dt-step-sub{ color:var(--dt-navy); }
#dash-today .dt-step.is-locked .dt-step-sub{ color:var(--dt-silver); }

/* tiny preview tag */
#dash-today .dt-tag{ position:fixed; right:14px; bottom:14px; z-index:50; font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(6,31,56,.85);
  border-radius:999px; padding:7px 13px; }

@media (max-width:880px){
  #dash-today .dt-top{ grid-template-columns:1fr; }
  #dash-today .dt-metrics{ grid-template-columns:repeat(2,1fr); }
  #dash-today .dt-steps{ grid-template-columns:repeat(4,1fr); row-gap:22px; }
  #dash-today .dt-step:nth-child(5)::before{ display:none; }
}
@media (max-width:520px){
  #dash-today .dt-metrics{ grid-template-columns:1fr 1fr; }
  #dash-today .dt-steps{ grid-template-columns:repeat(2,1fr); }
  #dash-today .dt-step:nth-child(3)::before{ display:none; }
  #dash-today .dt-step:nth-child(5)::before{ display:block; }
}

/* v=377 — "Today" extra states: payment banner, onboarding (pre-entry / graduated) card, overdue clock,
   flat (no-improvement-yet) metric delta. Same #dash-today tokens. */
#dash-today .dt-pay-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 22px; padding:15px 22px; border-radius:12px; text-decoration:none;
  background:linear-gradient(180deg,#9b742d 0%,#8b6f3e 100%); color:#fff;
  font-family:'Newsreader',serif; font-size:15px; transition:filter .18s ease; }
#dash-today .dt-pay-banner:hover{ filter:brightness(1.05); }
#dash-today .dt-pay-banner .dt-arrow{ font-size:20px; }

#dash-today .dt-onboard{ text-align:center; max-width:680px; margin:0 auto; padding:40px 30px;
  border-left:3px solid var(--dt-bronze); }
#dash-today .dt-onboard-title{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:clamp(28px,4vw,40px); line-height:1.05; margin:6px 0 14px; }
#dash-today .dt-onboard-copy{ font-size:16px; line-height:1.65; color:var(--dt-ink); margin:0 auto 26px;
  max-width:520px; }
#dash-today .dt-onboard-copy em{ font-style:italic; color:var(--dt-bronze); }
#dash-today .dt-onboard .dt-btn{ align-self:center; }

#dash-today .dt-clock.is-overdue{ background:linear-gradient(180deg,#8a3a2a 0%,#73302a 100%); }
#dash-today .dt-metric-delta.is-flat{ color:var(--dt-silver); font-style:normal; }
#dash-today .dt-metric-delta.is-flat::before{ content:""; }

/* ============================================================================================
   v=378 — ADMIN dashboard (#dash-admin). Same visual language as #dash-today; staff console:
   stat tiles + participants table + tool links to the existing /application/controlpanel.
   ============================================================================================ */
#dash-admin{
  --dt-bronze:#8b6f3e; --dt-bronze-d:#6b5a2f; --dt-navy:#061f38; --dt-ink:#4a4133;
  --dt-line:rgba(139,111,61,0.28); --dt-line-strong:#8b6f3e;
  --dt-paper:#fdfaf1; --dt-card:#fffdf8; --dt-cream:#f3ecd9; --dt-silver:#9ba1ab; --dt-warn:#8a3a2a;
  max-width:1100px; margin:0 auto; padding:8px 0 44px; color:var(--dt-ink);
  font-family:'Newsreader',Georgia,serif;
}
#dash-admin *{ box-sizing:border-box; }
/* shared header (re-declared for this id) */
#dash-admin .dt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:0.5px solid var(--dt-line); }
#dash-admin .dt-hello{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0; }
#dash-admin .dt-hello em{ font-style:italic; color:var(--dt-bronze); }
#dash-admin .dt-sub{ margin:6px 0 0; font-size:14px; color:var(--dt-ink); opacity:.8; }
#dash-admin .dt-sub em{ font-style:italic; color:var(--dt-bronze); }
#dash-admin .dt-prog-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dt-bronze); border:1px solid var(--dt-line);
  border-radius:999px; padding:6px 12px; white-space:nowrap; background:var(--dt-card); }

/* stat tiles */
#dash-admin .da-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:26px; }
#dash-admin .da-stat{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:12px;
  padding:16px 16px 14px; border-top:3px solid var(--dt-bronze); transition:background .18s ease; }
#dash-admin .da-stat:hover{ background:var(--dt-cream); }
#dash-admin .da-stat.is-warn{ border-top-color:var(--dt-warn); }
#dash-admin .da-stat-val{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--dt-navy);
  font-size:38px; line-height:.9; }
#dash-admin .da-stat.is-warn .da-stat-val{ color:var(--dt-warn); }
#dash-admin .da-stat-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dt-bronze); margin-top:8px; }
#dash-admin .da-stat-note{ font-size:12px; color:var(--dt-ink); opacity:.7; margin-top:5px; }

/* panel + table */
#dash-admin .da-panel{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px;
  padding:22px 22px 10px; margin-bottom:26px; }
#dash-admin .da-panel-head{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:14px; }
#dash-admin .da-panel-head h3{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:22px; margin:0; }
#dash-admin .da-panel-head span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--dt-bronze); }
#dash-admin .da-table-wrap{ overflow-x:auto; }
#dash-admin .da-table{ width:100%; border-collapse:collapse; font-size:14px; }
#dash-admin .da-table th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dt-bronze); font-weight:500;
  padding:10px 12px; border-bottom:1px solid var(--dt-line); white-space:nowrap; }
#dash-admin .da-table td{ padding:13px 12px; border-bottom:0.5px solid var(--dt-line); color:var(--dt-ink);
  vertical-align:middle; }
#dash-admin .da-table tbody tr{ transition:background .15s ease; }
#dash-admin .da-table tbody tr:hover{ background:var(--dt-cream); }
#dash-admin .da-table tbody tr:last-child td{ border-bottom:none; }
#dash-admin .da-table .da-c{ text-align:center; }
#dash-admin .da-name{ font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--dt-navy); font-weight:500; white-space:nowrap; }
#dash-admin .da-mut{ color:var(--dt-ink); opacity:.7; }
#dash-admin .da-mono{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; }
#dash-admin .da-mult{ color:var(--dt-bronze-d); }
#dash-admin .da-pill{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.04em;
  color:var(--dt-navy); background:rgba(139,111,61,0.10); border:1px solid var(--dt-line);
  border-radius:999px; padding:3px 10px; white-space:nowrap; }
#dash-admin .da-yes{ color:#5d7a52; font-weight:600; }
#dash-admin .da-no{ color:var(--dt-silver); }
#dash-admin .da-table tr.is-overdue .da-pill{ color:var(--dt-warn); border-color:var(--dt-warn);
  background:rgba(138,58,42,0.08); }
#dash-admin .da-empty{ text-align:center; color:var(--dt-silver); padding:30px 0; font-style:italic; }

/* tool links */
#dash-admin .da-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
#dash-admin .da-tool{ display:block; background:var(--dt-card); border:1px solid var(--dt-line);
  border-radius:14px; padding:22px; text-decoration:none; border-left:3px solid var(--dt-bronze);
  transition:background .18s ease,transform .18s ease; }
#dash-admin .da-tool:hover{ background:var(--dt-cream); }
#dash-admin .da-tool-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dt-bronze); }
#dash-admin .da-tool-title{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:23px; margin:6px 0 8px; }
#dash-admin .da-tool-copy{ font-size:14px; line-height:1.55; color:var(--dt-ink); opacity:.85; }
#dash-admin .da-tool-go{ display:inline-block; margin-top:14px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:.05em; color:var(--dt-navy); }
#dash-admin .da-tool:hover .da-tool-go{ color:var(--dt-bronze-d); }

@media (max-width:980px){
  #dash-admin .da-stats{ grid-template-columns:repeat(3,1fr); }
  #dash-admin .da-tools{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  #dash-admin .da-stats{ grid-template-columns:repeat(2,1fr); }
}

/* v=379 — expectation-card navy letter tiles (.umx-letter: A–D, L1–L3, E1/E2, S2…): on hover of EACH tile,
   its white letter turns BRONZE (#8b6f3e). Per-element only (the tile under the cursor); the navy box is
   unchanged. The letter is the ::before, which inherits the tile's color. */
.umx-expectation-card .umx-letter{ transition:color .2s ease; }
.umx-expectation-card .umx-letter::before{ transition:color .2s ease; }
.umx-expectation-card .umx-letter:hover{ color:#8b6f3e !important; cursor:default; }

/* v=380 — neuroplasticity hover on the expectation-card brain. On .umx-brain hover, synapse lines "draw in"
   (stroke-dashoffset via pathLength=1) and nodes light up + gently pulse, like neurons connecting. Pure
   CSS+SVG (CSP-safe); fully reverses on leave. The .umx-neuro svg is sized & centred exactly like the brain
   <img> (same viewBox aspect 2048×1130), so the network overlays the brain. Per-element stagger via --d. */
.umx-neuro{
  position:absolute; top:0; left:calc(50% + 15px); transform:translateX(-50%);
  height:100%; width:auto; z-index:2; pointer-events:none; overflow:visible;
}
/* brain dims slightly on hover so the lit network pops over its texture */
.umx-brain img{ transition:filter .4s ease; }
.umx-brain:hover img{ filter:brightness(.82) saturate(1.05); }
/* base wiring: faint gold lines that draw in */
.umx-neuro__links line{
  fill:none; stroke:#caa258; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset .55s ease var(--d,0s), opacity .3s ease var(--d,0s);
}
.umx-brain:hover .umx-neuro__links line{ stroke-dashoffset:0; opacity:.55; }
/* travelling signals: a short bright dash runs along each synapse, looping (the "firing") */
.umx-neuro__pulses line{
  fill:none; stroke:#fff3d2; stroke-width:9; stroke-linecap:round;
  stroke-dasharray:.16 .84; stroke-dashoffset:1; opacity:0;
}
.umx-brain:hover .umx-neuro__pulses line{ opacity:1; animation:umxTravel 1.7s linear var(--d,0s) infinite; }
@keyframes umxTravel{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
/* nodes: glowing dots that pulse */
.umx-neuro__nodes circle{
  fill:#fff1cf; opacity:0;
  transform-box:fill-box; transform-origin:center; transform:scale(.2);
  transition:opacity .35s ease var(--d,0s), transform .45s cubic-bezier(.2,1.5,.4,1) var(--d,0s);
}
.umx-brain:hover .umx-neuro__nodes circle{ opacity:1; transform:scale(1);
  animation:umxNeuroPulse 2.2s ease-in-out .8s infinite; }
@keyframes umxNeuroPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
/* warm bloom so the lines/nodes read as light */
.umx-brain:hover .umx-neuro{ filter:drop-shadow(0 0 3px rgba(255,228,150,.95)) drop-shadow(0 0 8px rgba(220,170,80,.55)); }
@media (prefers-reduced-motion: reduce){
  .umx-neuro__links line, .umx-neuro__nodes circle{ transition-duration:.01s; }
  .umx-brain:hover .umx-neuro__pulses line{ animation:none; opacity:.9; stroke-dasharray:1; stroke-dashoffset:0; }
  .umx-brain:hover .umx-neuro__nodes circle{ animation:none; }
}

/* v=381 — expectation-card footer + APPLY micro-interactions:
   (1) footer words (label + value, both navy) turn BRONZE on their OWN hover — per element, like the rest
       of the card's navy↔bronze family.
   (2) the APPLY cart icon gently rolls toward the word on hover (slow ~0.6s). The APPLY hover frame is v=353. */
.umx-expectation-card .umx-footer-label,
.umx-expectation-card .umx-footer-value{ transition:color .2s ease; }
.umx-expectation-card .umx-footer-label:hover,
.umx-expectation-card .umx-footer-value:hover,
.umx-expectation-card .umx-footer-value:hover *{ color:#8b6f3e !important; }
.umx-expectation-card .umx-book-icon{ transition:transform .6s ease; }
.umx-expectation-card .umx-book:hover .umx-book-icon{ transform:translateX(8px); }

/* v=382 — expectation-card header alignment (hover animations all unchanged):
   (1) centre the duration number inside the gold badge (kill its 2px right nudge);
   (2) raise the "S#/NNN PROGRAMME" eyebrow ~4px;
   (3) extend the title underline to the end of the word "Memoria" (231px desktop; mobile keeps 94px). */
.umx-duration-top .umx-days-number{ left:0 !important; }
.umx-expectation-card .umx-program-label{ position:relative; top:-4px; }
.umx-expectation-card .umx-title-line{ width:231px !important; }
@media (max-width:720px){ .umx-expectation-card .umx-title-line{ width:94px !important; } }

/* v=383 — expectation-card title line + eyebrow refinements:
   (1) thin the title line (1.5px → 1px) and make it the SAME WIDTH as the 2nd title line "S2/NNN
       Programme" (303px), so it sits exactly under it;
   (2) the "S#/NNN PROGRAMME" eyebrow: +2px font (12.5 → 14.5) and a touch more letter-spacing (.12em). */
.umx-expectation-card .umx-title-line{ height:1px !important; }
/* match each card's own 2nd title line TEXT width ("S#/NNN Programme"): S2/S3 = 277px, S10/1000 = 315px */
.umx-card-s2 .umx-title-line, .umx-card-s3 .umx-title-line{ width:277px !important; }
.umx-card-s10 .umx-title-line{ width:315px !important; }
@media (max-width:720px){ .umx-expectation-card .umx-title-line{ width:94px !important; } }
.umx-expectation-card .umx-program-label{ font-size:14.5px !important; letter-spacing:.12em !important; }

/* v=384 — correct the two header lines (doctor's note):
   (1) the LOWER line (.umx-title-line) was wrongly extended — return it to its ORIGINAL length (94px);
       it stays thin (1px from v=383, which was the wanted change).
   (2) the UPPER line — the eyebrow's underline under "S#/NNN PROGRAMME" — EXTEND it to the end of the
       word "Memoria" (231px, same on every card). Done with a pseudo-line replacing the text underline,
       keeping the gold→silver hover. */
.umx-expectation-card .umx-title-line{ width:94px !important; }
.umx-card-s2 .umx-title-line, .umx-card-s3 .umx-title-line,
.umx-card-s10 .umx-title-line{ width:94px !important; }
.umx-expectation-card .umx-program-label{ text-decoration:none !important; }
.umx-expectation-card .umx-program-label::after{
  content:""; position:absolute; left:0; top:calc(100% + 1px);
  width:231px; height:1px; background:var(--um-gold); transition:background-color .2s ease;
}
.umx-expectation-card .umx-program-label:hover::after{ background:#AFB4BD; }

/* ============================================================================================
   v=385 — real-dashboard tab nav (.dt-nav, shared) + PROGRESS screen (#dash-progress). Same visual
   language as #dash-today. Honest line chart: % improvement from baseline across the test events.
   ============================================================================================ */
.dt-nav{ border-bottom:0.5px solid rgba(139,111,61,0.28); margin-bottom:18px; }
.dt-nav-inner{ display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.dt-nav-link{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:#061f38; text-decoration:none; padding:12px 15px;
  border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease; }
.dt-nav-link:hover{ color:#8b6f3e; }
.dt-nav-link.is-active{ color:#8b6f3e; border-bottom-color:#8b6f3e; }
.dt-nav-out{ margin-left:auto; color:#9ba1ab; }
.dt-nav-out:hover{ color:#8b6f3e; }

#dash-progress{
  --dt-bronze:#8b6f3e; --dt-bronze-d:#6b5a2f; --dt-navy:#061f38; --dt-ink:#4a4133;
  --dt-line:rgba(139,111,61,0.28); --dt-card:#fffdf8; --dt-cream:#f3ecd9; --dt-silver:#9ba1ab; --dt-good:#5d7a52;
  max-width:1060px; margin:0 auto; padding:8px 0 44px; color:var(--dt-ink); font-family:'Newsreader',Georgia,serif;
}
#dash-progress *{ box-sizing:border-box; }
#dash-progress .dt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:0.5px solid var(--dt-line); }
#dash-progress .dt-hello{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0; }
#dash-progress .dt-hello em{ font-style:italic; color:var(--dt-bronze); }
#dash-progress .dt-sub{ margin:6px 0 0; font-size:14px; color:var(--dt-ink); opacity:.8; }
#dash-progress .dt-prog-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dt-bronze); border:1px solid var(--dt-line); border-radius:999px;
  padding:6px 12px; white-space:nowrap; background:var(--dt-card); }
/* onboard reuse for pre-entry */
#dash-progress .dt-card{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:24px; }
#dash-progress .dt-onboard{ text-align:center; max-width:680px; margin:0 auto; padding:40px 30px; border-left:3px solid var(--dt-bronze); }
#dash-progress .dt-card__eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dt-bronze); margin:0 0 4px; }
#dash-progress .dt-onboard-title{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy); font-size:clamp(28px,4vw,40px); line-height:1.05; margin:6px 0 14px; }
#dash-progress .dt-onboard-copy{ font-size:16px; line-height:1.65; color:var(--dt-ink); margin:0 auto 26px; max-width:520px; }
#dash-progress .dt-onboard-copy em{ font-style:italic; color:var(--dt-bronze); }
#dash-progress .dt-btn{ display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--dt-navy);
  border:1px solid var(--dt-navy); border-radius:999px; padding:12px 22px; text-decoration:none; transition:background .18s ease; }
#dash-progress .dt-btn:hover{ background:var(--dt-bronze); border-color:var(--dt-bronze); }

/* chart card */
#dash-progress .dp-card{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:20px 20px 14px; }
#dash-progress .dp-legend{ display:flex; flex-wrap:wrap; gap:16px; padding:0 4px 14px; }
#dash-progress .dp-leg{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--dt-ink); }
#dash-progress .dp-leg i{ width:13px; height:13px; border-radius:3px; display:inline-block; }
#dash-progress .dp-leg--goal i{ background:transparent; border-top:2px dashed var(--dt-bronze); border-radius:0; height:0; width:16px; }
#dash-progress .dp-chart{ width:100%; height:auto; display:block; }
#dash-progress .dp-grid{ stroke:rgba(139,111,61,0.16); stroke-width:1; vector-effect:non-scaling-stroke; }
#dash-progress .dp-ylabel{ font-family:'IBM Plex Mono',monospace; font-size:10px; fill:#a99a78; }
#dash-progress .dp-target{ stroke:var(--dt-bronze); stroke-width:1.4; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; opacity:.85; }
#dash-progress .dp-target-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; fill:var(--dt-bronze); letter-spacing:.02em; }
#dash-progress .dp-xlabel{ font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--dt-silver); letter-spacing:.03em; }
#dash-progress .dp-xlabel.is-done{ fill:var(--dt-navy); }
#dash-progress .dp-line{ fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
#dash-progress .dp-line.is-primary{ stroke-width:3.2; }
#dash-progress .dp-dot{ stroke:#fffdf8; stroke-width:1.5; }

#dash-progress .dp-note{ font-size:13.5px; color:var(--dt-ink); opacity:.8; font-style:italic; margin:14px 4px 0; }

/* metric table */
#dash-progress .dp-table{ margin-top:24px; background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:6px 20px; }
#dash-progress .dp-thead,#dash-progress .dp-row{ display:grid; grid-template-columns:1.6fr 1fr 24px 1fr 1fr; align-items:center; gap:8px; }
#dash-progress .dp-thead{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dt-bronze); padding:14px 0 10px; border-bottom:0.5px solid var(--dt-line); }
#dash-progress .dp-row{ padding:14px 0; border-bottom:0.5px solid var(--dt-line); }
#dash-progress .dp-row:last-child{ border-bottom:none; }
#dash-progress .dp-row-label{ display:inline-flex; align-items:center; gap:9px; font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--dt-navy); }
#dash-progress .dp-row-label i{ width:11px; height:11px; border-radius:3px; }
#dash-progress .dp-row-base,#dash-progress .dp-row-latest{ font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--dt-navy); }
#dash-progress .dp-row-base{ opacity:.6; }
#dash-progress .dp-row-base small,#dash-progress .dp-row-latest small{ font-family:'IBM Plex Mono',monospace; font-size:11px; opacity:.7; }
#dash-progress .dp-row-arrow{ color:var(--dt-bronze); text-align:center; }
#dash-progress .dp-row-delta{ font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--dt-silver); text-align:right; }
#dash-progress .dp-row-delta.is-up{ color:var(--dt-good); }

@media (max-width:620px){
  #dash-progress .dp-thead{ display:none; }
  #dash-progress .dp-row{ grid-template-columns:1fr auto; row-gap:2px; }
  #dash-progress .dp-row-arrow,#dash-progress .dp-row-base{ display:none; }
}

/* ============================================================================================
   v=386 — PRACTICE screen (#dash-practice): the 9 memory modules as a grid, in the site shell.
   ============================================================================================ */
#dash-practice{
  --dt-bronze:#8b6f3e; --dt-bronze-d:#6b5a2f; --dt-navy:#061f38; --dt-ink:#4a4133;
  --dt-line:rgba(139,111,61,0.28); --dt-card:#fffdf8; --dt-cream:#f3ecd9; --dt-silver:#9ba1ab; --dt-paper:#fdfaf1;
  max-width:1060px; margin:0 auto; padding:8px 0 44px; color:var(--dt-ink); font-family:'Newsreader',Georgia,serif;
}
#dash-practice *{ box-sizing:border-box; }
#dash-practice .dt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:0.5px solid var(--dt-line); }
#dash-practice .dt-hello{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy);
  font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0; }
#dash-practice .dt-hello em{ font-style:italic; color:var(--dt-bronze); }
#dash-practice .dt-sub{ margin:6px 0 0; font-size:14px; color:var(--dt-ink); opacity:.8; max-width:560px; }
#dash-practice .dt-prog-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dt-bronze); border:1px solid var(--dt-line); border-radius:999px;
  padding:6px 12px; white-space:nowrap; background:var(--dt-card); }

#dash-practice .dpr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
#dash-practice .dpr-card{ position:relative; display:flex; flex-direction:column; background:var(--dt-card);
  border:1px solid var(--dt-line); border-radius:14px; padding:16px; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .18s ease; }
#dash-practice .dpr-card:hover{ background:var(--dt-cream); border-color:var(--dt-bronze); transform:translateY(-2px); }
#dash-practice .dpr-num{ position:absolute; top:14px; left:16px; z-index:2; font-family:'IBM Plex Mono',monospace;
  font-size:11px; color:#fff; background:var(--dt-navy); width:24px; height:24px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; }
#dash-practice .dpr-card:hover .dpr-num{ background:var(--dt-bronze); }
#dash-practice .dpr-thumb{ width:100%; aspect-ratio:16/10; border-radius:9px; overflow:hidden;
  background:var(--dt-paper); display:flex; align-items:center; justify-content:center; }
#dash-practice .dpr-thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease; }
#dash-practice .dpr-card:hover .dpr-thumb img{ transform:scale(1.04); }
#dash-practice .dpr-meta{ padding:14px 2px 0; }
#dash-practice .dpr-name{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--dt-navy); font-size:23px; line-height:1; }
#dash-practice .dpr-pattern{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em;
  color:var(--dt-bronze); margin-top:7px; }
#dash-practice .dpr-go{ margin-top:14px; padding-top:12px; border-top:0.5px solid var(--dt-line);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-navy); }
#dash-practice .dpr-card:hover .dpr-go{ color:var(--dt-bronze-d); }
#dash-practice .dpr-go .dt-arrow{ transition:transform .18s ease; display:inline-block; }
#dash-practice .dpr-card:hover .dpr-go .dt-arrow{ transform:translateX(3px); }

@media (max-width:820px){ #dash-practice .dpr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ #dash-practice .dpr-grid{ grid-template-columns:1fr; } }

/* ============================================================================================
   v=387 — ACCOUNT + MATERIALS screen (#dash-account): profile/programme/preferences + the doctor's
   learning materials modernised (Document / Slides / Audio / Video, played/viewed inline).
   ============================================================================================ */
#dash-account{
  --dt-bronze:#8b6f3e; --dt-bronze-d:#6b5a2f; --dt-navy:#061f38; --dt-ink:#4a4133;
  --dt-line:rgba(139,111,61,0.28); --dt-card:#fffdf8; --dt-cream:#f3ecd9; --dt-silver:#9ba1ab; --dt-paper:#fdfaf1;
  --dt-good:#5d7a52; --dt-warn:#8a3a2a;
  max-width:1060px; margin:0 auto; padding:8px 0 44px; color:var(--dt-ink); font-family:'Newsreader',Georgia,serif;
}
#dash-account *{ box-sizing:border-box; }
#dash-account .dt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-bottom:18px; margin-bottom:22px; border-bottom:0.5px solid var(--dt-line); }
#dash-account .dt-hello{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy); font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0; }
#dash-account .dt-hello em{ font-style:italic; color:var(--dt-bronze); }
#dash-account .dt-sub{ margin:6px 0 0; font-size:14px; color:var(--dt-ink); opacity:.8; max-width:560px; }
#dash-account .dt-prog-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-bronze); border:1px solid var(--dt-line); border-radius:999px; padding:6px 12px; white-space:nowrap; background:var(--dt-card); }
#dash-account .dt-card__eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dt-bronze); margin:0 0 8px; }

/* profile/programme/prefs */
#dash-account .dac-top{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:30px; }
#dash-account .dac-card{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:20px; }
#dash-account .dac-name{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--dt-navy); font-size:25px; line-height:1.05; margin-bottom:12px; }
#dash-account .dac-dl{ margin:0; }
#dash-account .dac-dl > div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:0.5px solid var(--dt-line); }
#dash-account .dac-dl dt{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-bronze); }
#dash-account .dac-dl dd{ margin:0; font-size:14px; color:var(--dt-navy); text-align:right; }
#dash-account .dac-ok{ color:var(--dt-good); font-weight:600; }
#dash-account .dac-warn{ color:var(--dt-warn); font-weight:600; }
#dash-account .dac-mut{ font-size:13.5px; color:var(--dt-ink); opacity:.75; }
#dash-account .dac-link{ display:inline-block; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.05em; color:var(--dt-navy); text-decoration:none; }
#dash-account .dac-link:hover{ color:var(--dt-bronze-d); }

/* materials */
#dash-account .dac-mat-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:0 2px 16px; border-bottom:0.5px solid var(--dt-line); margin-bottom:20px; }
#dash-account .dac-mat-head h2{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy); font-size:26px; margin:0; }
#dash-account .dac-formats{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--dt-bronze); text-transform:uppercase; }
#dash-account .dac-parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
#dash-account .dac-part{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:16px; border-top:3px solid var(--dt-bronze); }
#dash-account .dac-part-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
#dash-account .dac-part-num{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--dt-navy); font-size:20px; }
#dash-account .dac-part-count{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--dt-silver); }
#dash-account .dac-empty{ font-size:13px; color:var(--dt-silver); font-style:italic; margin:6px 0 2px; }
#dash-account .dac-tag{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#fff; border-radius:5px; padding:3px 7px; white-space:nowrap; }
#dash-account .dac-tag--video{ background:#3f6c8c; }
#dash-account .dac-tag--audio{ background:#5f7d57; }
#dash-account .dac-tag--doc{ background:var(--dt-navy); }
#dash-account .dac-tag--slides{ background:#8a5f78; }
#dash-account .dac-media{ margin-bottom:12px; }
#dash-account .dac-media-top{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
#dash-account .dac-media-name{ font-size:12px; color:var(--dt-ink); opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dash-account .dac-media video{ width:100%; border-radius:9px; display:block; background:#000; }
#dash-account .dac-media audio{ width:100%; }
#dash-account .dac-file{ display:flex; align-items:center; gap:9px; padding:11px 12px; margin-bottom:9px; border:1px solid var(--dt-line); border-radius:10px; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
#dash-account .dac-file:hover{ background:var(--dt-cream); border-color:var(--dt-bronze); }
#dash-account .dac-file-name{ flex:1; font-size:13px; color:var(--dt-navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dash-account .dac-file-go{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--dt-bronze-d); white-space:nowrap; }
#dash-account .dac-note{ font-size:13.5px; color:var(--dt-ink); opacity:.8; margin:18px 2px 0; }
#dash-account .dac-note b{ color:var(--dt-navy); font-weight:600; }

@media (max-width:880px){ #dash-account .dac-top{ grid-template-columns:1fr; } #dash-account .dac-parts{ grid-template-columns:1fr; } }

/* v=388 — gold duration badge spacing + card title weight:
   (1) calendar icon: make its gap to the BOTTOM edge equal the top gap (edge→DURATION = 24px) — lower it
       (was 29px below → 24px) via the existing relative top (6 → 11px);
   (2) the big number: equal vertical gap to DURATION (above) and DAYS (below) — was 9/3, now 6/6;
   (3) the main card title: turn off the semibold — font-weight 500 → 400. */
.umx-duration-top .umx-top-calendar-icon{ top:11px !important; }
.umx-duration-top .umx-days-number{ margin-top:6px !important; margin-bottom:6px !important; }
.umx-expectation-card .umx-title{ font-weight:400 !important; }


/* v=389 — duration badge: distribute all FOUR rows (DURATION · number · DAYS · calendar) EVENLY top to
   bottom (equal gaps). flex column + space-evenly over the full height; reset the v=388 number margin and
   the calendar's relative offset so flex alone controls the vertical rhythm. */
.umx-duration-top{ display:flex !important; flex-direction:column; align-items:center !important;
  justify-content:space-evenly !important; padding-top:0 !important; padding-bottom:0 !important; }
.umx-duration-top .umx-days-number{ margin:0 !important; }
.umx-duration-top .umx-top-calendar-icon{ top:0 !important; }

/* v=390 — duration badge number: the big glyph sits optically HIGH in its tall line-box (empty descent
   space below it), so even with equal box-gaps it reads as closer to DURATION. Nudge it down a touch so
   it's optically centred between DURATION and DAYS. */
.umx-duration-top .umx-days-number{ transform:translateY(5px) !important; }

/* v=391 — duration badge: a 1px white line under EACH element (DURATION · number · DAYS · calendar),
   2px below it, the width of "DURATION" (63px), centred. On hover of an element its line fades out (the
   navy text hover from v=375 stays). The calendar <img> is wrapped in .umx-cal-wrap so it can carry a line. */
.umx-duration-top .umx-cal-wrap{ display:inline-flex; }
.umx-duration-top small,
.umx-duration-top .umx-days-number,
.umx-duration-top .umx-days-label,
.umx-duration-top .umx-cal-wrap{ position:relative; }
.umx-duration-top small::after,
.umx-duration-top .umx-days-number::after,
.umx-duration-top .umx-days-label::after,
.umx-duration-top .umx-cal-wrap::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 1px);
  width:63px; height:1px; background:rgba(255,255,255,0.6); transition:opacity .2s ease; pointer-events:none;
}
/* the big number sits high in its tall line-box (empty descent below) — anchor its line to the box bottom */
.umx-duration-top .umx-days-number::after{ top:auto; bottom:7px; }
.umx-duration-top small:hover::after,
.umx-duration-top .umx-days-number:hover::after,
.umx-duration-top .umx-days-label:hover::after,
.umx-duration-top .umx-cal-wrap:hover::after{ opacity:0; }

/* ============================================================================================
   v=392 — CERTIFICATE screen (#dash-cert): the certificate preview + what it certifies. Same tokens.
   ============================================================================================ */
#dash-cert{
  --dt-bronze:#8b6f3e; --dt-bronze-d:#6b5a2f; --dt-navy:#061f38; --dt-ink:#4a4133;
  --dt-line:rgba(139,111,61,0.28); --dt-card:#fffdf8; --dt-cream:#f3ecd9; --dt-silver:#9ba1ab; --dt-good:#5d7a52;
  max-width:1060px; margin:0 auto; padding:8px 0 44px; color:var(--dt-ink); font-family:'Newsreader',Georgia,serif;
}
#dash-cert *{ box-sizing:border-box; }
#dash-cert .dt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-bottom:18px; margin-bottom:22px; border-bottom:0.5px solid var(--dt-line); }
#dash-cert .dt-hello{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy); font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0; }
#dash-cert .dt-hello em{ font-style:italic; color:var(--dt-bronze); }
#dash-cert .dt-sub{ margin:6px 0 0; font-size:14px; color:var(--dt-ink); opacity:.8; max-width:560px; }
#dash-cert .dt-prog-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-bronze); border:1px solid var(--dt-line); border-radius:999px; padding:6px 12px; white-space:nowrap; background:var(--dt-card); }
#dash-cert .dt-card__eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dt-bronze); margin:0 0 6px; }
/* onboarding (pre-entry) */
#dash-cert .dt-card{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:24px; }
#dash-cert .dt-onboard{ text-align:center; max-width:680px; margin:0 auto; padding:40px 30px; border-left:3px solid var(--dt-bronze); }
#dash-cert .dt-onboard-title{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy); font-size:clamp(28px,4vw,40px); line-height:1.05; margin:6px 0 14px; }
#dash-cert .dt-onboard-copy{ font-size:16px; line-height:1.65; color:var(--dt-ink); margin:0 auto 26px; max-width:520px; }
#dash-cert .dt-onboard-copy em{ font-style:italic; color:var(--dt-bronze); }
/* buttons */
#dash-cert .dt-btn{ display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--dt-navy); border:1px solid var(--dt-navy); border-radius:999px; padding:12px 22px; text-decoration:none; transition:background .18s ease,color .18s ease; }
#dash-cert .dt-btn:hover{ background:var(--dt-bronze); border-color:var(--dt-bronze); }
#dash-cert .dt-btn--ghost{ background:transparent; color:var(--dt-navy); }
#dash-cert .dt-btn--ghost:hover{ background:var(--dt-cream); color:var(--dt-bronze-d); border-color:var(--dt-bronze); }
#dash-cert .dt-btn .dt-arrow{ transition:transform .18s ease; }
#dash-cert .dt-btn:hover .dt-arrow{ transform:translateX(3px); }

/* main grid: paper preview + details */
#dash-cert .dc-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:22px; align-items:start; }
#dash-cert .dc-paper-wrap{ position:relative; }
#dash-cert .dc-paper{ width:100%; aspect-ratio:1.412; border-radius:12px; border:1px solid var(--dt-line);
  background-size:cover; background-position:center; box-shadow:0 12px 30px rgba(3,18,31,.12); }
#dash-cert .dc-paper--locked{ filter:grayscale(.25) brightness(.96); }
#dash-cert .dc-lock{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:rgba(6,31,56,.34); border-radius:12px; color:#fff; font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
#dash-cert .dc-lock span{ font-size:30px; }

#dash-cert .dc-side{ display:flex; flex-direction:column; gap:18px; }
#dash-cert .dc-card{ background:var(--dt-card); border:1px solid var(--dt-line); border-radius:14px; padding:22px; }
#dash-cert .dc-title{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--dt-navy); font-size:27px; line-height:1.05; margin:0 0 10px; }
#dash-cert .dc-copy{ font-size:15px; line-height:1.6; color:var(--dt-ink); margin:0 0 18px; }
#dash-cert .dc-copy b{ color:var(--dt-navy); font-weight:600; }
#dash-cert .dc-prog{ margin-bottom:18px; }
#dash-cert .dc-prog-top{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--dt-bronze); margin-bottom:7px; }
#dash-cert .dc-bar{ height:7px; border-radius:999px; background:rgba(139,111,61,0.18); overflow:hidden; }
#dash-cert .dc-bar > i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#b89244,#8b6f3e); }
/* metrics */
#dash-cert .dc-metrics{ display:flex; flex-direction:column; }
#dash-cert .dc-metric{ display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:10px; padding:11px 0; border-top:0.5px solid var(--dt-line); }
#dash-cert .dc-metric:first-child{ border-top:none; }
#dash-cert .dc-metric-label{ font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--dt-navy); }
#dash-cert .dc-metric-val{ font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--dt-navy); }
#dash-cert .dc-metric-val u{ text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:10.5px; opacity:.7; }
#dash-cert .dc-metric-delta{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--dt-silver); text-align:right; min-width:48px; }
#dash-cert .dc-metric-delta.is-up{ color:var(--dt-good); }

@media (max-width:780px){ #dash-cert .dc-grid{ grid-template-columns:1fr; } }

/* v=393 — home 1.3 (#s-practice): the bronze PERFORMANCE terms (the (1)-(4) words, the Twofold/Threefold/
   Tenfold + day spans) and the "Memory Performance" leadin in the title were missing the 0.5px bronze
   underline + live hover that the .um-key terms have. Add the same treatment (NOT on the (1)/(2)/(3)
   markers — those are span.um-perf-list__mult in the non-prices list). */
#s-practice em.um-perf-list__mult,
#s-practice .um-perf-prices .um-perf-list__mult,
#s-practice .um-perf-prices .um-perf-list__time,
#s-practice .um-mp-title .um-leadin{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#s-practice em.um-perf-list__mult:hover,
#s-practice .um-perf-prices .um-perf-list__mult:hover,
#s-practice .um-perf-prices .um-perf-list__time:hover,
#s-practice .um-mp-title .um-leadin:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}
/* remove the thick (1px full-width) line directly below the 1.3 title — the thin underline under
   "Memory Performance" is now the separator, so the section reads uniformly. */
#s-practice .um-mp-title + .um-perf-list{ border-top:none !important; }

/* v=394 — home 1.3: (a) the "(1)-(4)" list markers stay AS THEY WERE — parenthesised, bronze, with their
   original gap to the word — only set UPRIGHT (not italic). Scoped to the marker SPANS in the non-prices
   list, so the words (em) and the prices terms stay italic. (b) remove the 2px bronze line under the 1.3 h2
   "Welcome to Memory in Practice" — the .um-uline under "Welcome"/"Practice" is the accent now. */
#s-practice .um-perf-list:not(.um-perf-prices) > li > span.um-perf-list__mult{
  font-style:normal !important;
}
#s-practice .um-h2{ border-bottom:none !important; padding-bottom:0 !important; }

/* v=395 — home 1.1 (#s-welcome): the .um-leadin ("The Public Area" / "The Protected Area") had a heavier
   1px SOLID-bronze underline (looked thicker). Match it to the .um-key thin line (0.5px, 0.45 opacity) and
   add the same live hover (darken + 0.95 border + faint bg). */
#s-welcome .um-p .um-leadin{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#s-welcome .um-p .um-leadin:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05);
}

/* v=396 — home 1.3: match the marker→text gap to the SYSTEM page numbered list (10px; was 14px). */
#s-practice .um-perf-list:not(.um-perf-prices) > li > span.um-perf-list__mult{ margin-right:10px !important; }

/* v=397 — home 1.3: put the thin divider line BACK between the "Memory Performance" title and the list,
   identical to the one below the list (1px rgba(139,111,61,0.28)), with equal vertical spacing above and
   below it (20px each = the list's padding-top). */
#s-practice .um-mp-title + .um-perf-list{
  border-top:1px solid rgba(139,111,61,0.28) !important; margin-top:20px !important;
}

/* v=398 — home 1.3: the bottom divider (the .um-signature border-top) sat 38px below the text — too far vs
   the other ~20px dividers. Bring it to the same 20px gap above the line. */
#s-practice .um-signature{ margin-top:20px !important; }

/* v=399 — system 2.4 (#sec-performance .um-numlist): add the same thin horizontal divider lines as home 1.3
   — a line above and below the (01.)-(04.) list (1px rgba(139,111,61,0.28)), with 20px padding inside and a
   20px gap to the surrounding text. */
#sec-performance .um-numlist{
  border-top:1px solid rgba(139,111,61,0.28) !important;
  border-bottom:1px solid rgba(139,111,61,0.28) !important;
  padding-top:20px !important; padding-bottom:20px !important;
  margin-top:20px !important; margin-bottom:20px !important;
}

/* v=400 — memory 3.4 (#m-requirements): (a) add the same horizontal divider lines around the .um-idx list
   (1px rgba(139,111,61,0.28), 20px padding inside + 20px gap to surroundings) as home 1.3 / system 2.4.
   (b) remove the odd partial (66ch) underline under the "What must a high-performing memory system…"
   heading — the list's top divider is the separator now. */
#m-requirements .um-idx{
  border-top:1px solid rgba(139,111,61,0.28) !important;
  border-bottom:1px solid rgba(139,111,61,0.28) !important;
  padding-top:20px !important; padding-bottom:20px !important;
  margin-top:20px !important; margin-bottom:20px !important;
}
#m-requirements .um-sub{ border-bottom:none !important; padding-bottom:0 !important; }

/* v=401 — evidence 10.3 (#ev-scientific): both chevron ">" lists (.um-list — the 4 dimensions, twice) get
   the same horizontal divider lines as home 1.3 / system 2.4 / memory 3.4 (1px rgba(139,111,61,0.28),
   20px padding inside + 20px gap outside). Zero the last <li>'s 8px margin so the bottom gap is a clean
   20px (top line→first item 20px == last item→bottom line 20px). */
#ev-scientific .um-list{
  border-top:1px solid rgba(139,111,61,0.28) !important;
  border-bottom:1px solid rgba(139,111,61,0.28) !important;
  padding-top:20px !important; padding-bottom:20px !important;
  margin-top:20px !important; margin-bottom:20px !important;
}
#ev-scientific .um-list > li:last-child{ margin-bottom:0 !important; }

/* v=402 — evidence: per the doctor, EVERY bronze term in the body text gets the same 0.5px underline +
   warm hover as .um-key. um-key already has it (v=361); this adds the two remaining bronze tiers that were
   left plain — em.um-dim (the four-dimension words in the lists + inline emphases, 44×) and plain bronze
   <strong> (e.g. "four-dimensional framework", "four chunks", 8×). Scoped to the three evidence sections. */
#ev-developer .um-dim, #ev-media .um-dim, #ev-scientific .um-dim,
#ev-developer .um-p strong:not(.um-key), #ev-media .um-p strong:not(.um-key), #ev-scientific .um-p strong:not(.um-key){
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding-bottom:1px !important;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#ev-developer .um-dim:hover, #ev-media .um-dim:hover, #ev-scientific .um-dim:hover,
#ev-developer .um-p strong:not(.um-key):hover, #ev-media .um-p strong:not(.um-key):hover, #ev-scientific .um-p strong:not(.um-key):hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}

/* v=403 — modules 2D/3D preview: the old top "legend" (named reference shapes) is baked vector art whose
   shapes drift out of alignment with the practice grid columns below. Replace it with a clean HTML row of
   boxed shapes (kočkice) + names on an 8-column grid whose centers match the practice grid EXACTLY
   (measured: first centre 5.98%, pitch 12.57% over a 734px stack → width 100.5% + margin-left -0.25% on
   repeat(8,1fr); box centred in each 1fr cell so its centre == the grid column centre). */
.um-mlegend-wrap{ margin:0 0 2px; }
.um-mlegend{ width:100.5%; margin:0 0 0 -0.25%; display:grid; grid-template-columns:repeat(8,1fr); align-items:start; }
.um-mlegend__cell{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.um-mlegend__box{ position:relative; width:91%; aspect-ratio:1; border:1px solid rgba(139,111,61,.5); }
.um-mlegend__box::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(139,111,61,.26); pointer-events:none; }
.um-mlegend__box svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.um-mlegend__box svg *{ stroke:#8b6f3d; fill:none; }
.um-mlegend__box svg .gd{ stroke-width:.7; stroke-dasharray:3 2.4; opacity:.7; }
.um-mlegend__box svg .sh{ stroke-width:1; }
.um-mlegend__box svg .dot{ fill:#8b6f3d; stroke:none; }
.um-mlegend__name{ margin-top:9px; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:15px; line-height:1.2; color:#8b6f3d; text-align:center; }
.um-mlegend-rule{ border-bottom:1px solid rgba(139,111,61,.28); margin:14px 0 18px; }
@media (max-width:560px){ .um-mlegend__name{ font-size:11px; } .um-mlegend__box::before{ inset:3px; } }

/* v=404 — modules legend now uses the doctor's EXACT shape SVGs (Downloads fwdsvg2dshapes / fwdsvg3dshapes),
   inlined and re-classed to bronze: .sh = solid visible edge, .gd = dashed hidden-edge / guide, .dot =
   centre point. Their CorelDRAW viewBoxes are 413–425 units, so use non-scaling-stroke to keep ~1px lines
   at the small legend size, with a simple dash for the guides. */
.um-mlegend__box svg *{ vector-effect:non-scaling-stroke; }
.um-mlegend__box svg .sh{ stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.um-mlegend__box svg .gd{ stroke-width:1; stroke-dasharray:3.4 2.6; opacity:.7; stroke-linecap:round; }
.um-mlegend__box svg .dot{ fill:#8b6f3d; stroke:none; }

/* v=405 — modules legend: per the doctor, drop the kočkica FRAME in the legend row — the shapes are already
   perfectly aligned & centred to the grid columns, so the doctor's SVGs sit cleanly on those positions
   without a frame (matches the original frameless legend look). The square sizing container stays so the
   glyphs keep a uniform size/centre; a touch bigger now that the frame padding is gone. */
.um-mlegend__box{ border:none !important; width:96%; }
.um-mlegend__box::before{ display:none !important; }
.um-mlegend__name{ margin-top:7px; }

/* v=406 — modules legend: import the doctor's COMPLETE drawings (the "w.square" variants: cream box + grey
   frame + the shape with its dashed guides & centre point + the vertical side measure-bars) EXACTLY as
   drawn. Class styles were flattened to inline styles so the doctor's colours are preserved verbatim (no
   recolour). Strokes scale with the viewBox (like the grid shapes below), so the legend reads consistently. */
.um-mlegend__cell svg.um-docglyph{ display:block; width:96%; height:auto; }

/* v=407 — modules legend: TRUE 3D rotation. Each glyph is now two overlaid SVGs in a .um-mlegend__stage —
   a STATIC frame layer (the box + the vertical side measure-bars) and a SHAPE layer that rotates. The
   stage carries `perspective`, so the JS (legend-rotate.js) tilting the shape with rotateX/rotateY
   foreshortens it in real 3D — drag left/right to turn, up/down for forward/back — pivoting on the central
   axis. The frame & side-bars never move; the centre stays put. */
.um-mlegend__stage{ position:relative; width:96%; aspect-ratio:1; margin:0 auto; perspective:600px; perspective-origin:50% 50%; cursor:grab; touch-action:none; }
.um-mlegend__stage.is-grabbing{ cursor:grabbing; }
.um-mlegend__stage svg.um-docglyph{ position:absolute; inset:0; width:100%; height:100%; }
.um-mlegend__stage .um-glyph-shape{ transform-origin:50% 50%; transform-style:preserve-3d; will-change:transform; }

/* v=408 — modules legend: hover = "active" feedback. When the pointer is over a shape's field the box
   lights up (faint bronze wash + bronze frame & side-bars), and legend-rotate.js auto-rotates the shape
   while hovered (eases back to the identical rest pose on leave). */
.um-mlegend__stage .um-glyph-frame rect,
.um-mlegend__stage .um-glyph-frame line{ transition:fill .2s ease, stroke .2s ease; }
.um-mlegend__stage:hover .um-glyph-frame rect{ fill:rgba(139,111,61,0.07) !important; stroke:#8b6f3d !important; }
.um-mlegend__stage:hover .um-glyph-frame line{ stroke:#bfa46a !important; }

/* v=409 — modules 2D/3D bottom grid (the 64 fields): rebuilt as an HTML 8×8 grid using the SAME doctor's
   shapes as the legend (inlined once as <symbol>, referenced 64× via <use>), drawn in BLACK on a lighter
   cream cell (#FDFAF1) like the legend up top. Same column geometry as .um-mlegend so the columns line up. */
.um-mgrid-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.um-mgrid{ width:100.5%; margin:0 0 0 -0.25%; display:grid; grid-template-columns:repeat(8,1fr); column-gap:0; row-gap:0; }
.um-mgrid__cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.um-mgrid__box{ position:relative; width:90%; height:90%; box-sizing:border-box; background:#FDFAF1; border:1px solid #929190; }
.um-mgrid__box::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(146,145,144,0.4); pointer-events:none; }
.um-mgrid__glyph{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* v=410 — modules grid polish: the doctor shapes were too big (spilled past the inner frame in most cells)
   and the lines too thick. Shrink each glyph and centre it well inside the inner frame, and make the inner
   frame inset RELATIVE (%) so it scales with the cell (the old fixed 5px got tiny on small cells, so shapes
   crossed it). Stroke weights were thinned in the symbols (0.8 / 0.6). */
.um-mgrid__box::before{ inset:8% !important; }
.um-mgrid__glyph{ left:12% !important; top:12% !important; right:auto !important; bottom:auto !important; width:76% !important; height:76% !important; }

/* v=411 — modules grid: every cell now gets the SAME hover highlight + 3D rotate as the legend
   (legend-rotate.js targets .um-mgrid__box). The cream box + inner frame are KEPT; the shape rotates
   INSIDE the inner frame — 3D rotation foreshortens the projection so it stays within the frame without a
   hard clip (clipping would flatten the 3D). No side measure-bars (plain shapes). Lines/size match the
   legend (grey doctor styles, scaling strokes — set in the symbols). */
.um-mgrid__box{ perspective:480px; perspective-origin:50% 50%; cursor:grab; touch-action:none; transition:background-color .2s ease, border-color .2s ease; }
.um-mgrid__box.is-grabbing{ cursor:grabbing; }
.um-mgrid__box:hover{ background:rgba(139,111,61,0.07) !important; border-color:#8b6f3d !important; }
.um-mgrid__box:hover::before{ border-color:rgba(139,111,61,0.5) !important; }
.um-mgrid__glyph.um-glyph-shape{ transform-origin:50% 50%; transform-style:preserve-3d; will-change:transform; }

/* v=412 — modules grid: shrink the shapes a touch (76%→68%) so they sit a bit smaller than the legend
   shapes up top — grid only, legend untouched. */
.um-mgrid__glyph{ left:16% !important; top:16% !important; width:68% !important; height:68% !important; }

/* v=413 — modules sub-nav unified: the per-module pages (/practice/test/:id) now carry the same Modules
   sidebar nav as /applications, which auto-drives the horizontal sticky submenu (legend... no — the
   stickybar). Highlight the CURRENT module both in the sidebar and in the sticky submenu, and space the
   secondary module-info meta below the nav. */
.um-meta .um-meta-link.is-current{ color:#8b6f3d !important; font-style:italic !important; }
.um-meta--mod{ margin-top:22px; }
.um-stickybar__item.is-current{ color:#8b6f3d; }
.um-stickybar__item.is-current .um-stickybar__num{ color:#8b6f3d; }

/* v=414 — modules: the submenu/cards open a module via /practice/test/N#module and must land at the TOP of
   the module segment, just BELOW the sticky header (topbar+stickybar ≈ 123px). The old #module rule used a
   NEGATIVE scroll-margin-top (-90px) which buried the segment title behind the header (landing on the grid).
   Set a positive offset so the segment title is visible. */
#module{ scroll-margin-top:16px !important; }

/* v=415 — module frame images (umm-N-*.png on every module): bring the OUTER frame closer to the inner one
   by ~2/3 — the gap is the .um-mp-frame padding (was 13px) → 4px (≈ 1/3). Applies to all modules. */
.um-mp-frame{ padding:4px; }

/* v=416 — module image+text: FLOAT the image so the body copy wraps AROUND it (beside it at the top, then
   flowing UNDER it), framing the image, instead of a rigid side-by-side flex row that left the image
   taller than a short text column. The container becomes a block that contains the float. */
div[style*="display:flex"][style*="gap:32px"]{ display:block !important; overflow:hidden; }
div[style*="display:flex"][style*="gap:32px"] > .um-mp-frame{ float:left !important; width:290px; margin:7px 30px 12px 0; }
@media (max-width:900px){
  div[style*="display:flex"][style*="gap:32px"] > .um-mp-frame{ float:none !important; width:100%; margin:0 0 18px 0; }
}

/* v=417 — practice-preview test-config form (.umtc): match the SITE font (Newsreader, not Cormorant
   Garamond) on the radio labels / group labels / Start button / Home button; thin-rule dividers
   between the groups (.umtc-rule, full-width); and a SMALLER font on Home than on Start.
   Form lives only in practice-preview.ejs. */
.umtc-label, .umtc-opt, .umtc-start .umtc-startbtn{ font-family:'Newsreader',Georgia,serif !important; }
.umtc-start .um-mp-btn--ghost{ font-family:'Newsreader',Georgia,serif !important; font-size:13px !important; }
.umtc-rule{ grid-column:1 / -1; border:none; border-top:1px solid var(--rule,rgba(139,111,61,.28)); margin:0; width:100%; }

/* v=418 — practice-preview config-form section title (.um-h3 <em class="um-uline">) gets the same
   bronze underline that VANISHES on hover as the h1/h2 title words across the site. */
.um-h3 .um-uline{
  text-decoration-line:underline !important;
  text-decoration-color:#8b6f3d !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:6px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-h3 .um-uline:hover{ text-decoration-color:transparent !important; }

/* v=419 — module eyebrow + title (EVERY module: 8 practice partials + the inline Colours in
   practice-preview): tighten the eyebrow's letter/word spacing a touch (only the module eyebrows,
   which carry an <em>); and the title's value "continuation" after the | (the part that wraps to a
   2nd line) drops ~6px. The UM + topic words get .um-uline (bronze italic + fading underline) inline
   in the markup, reusing .um-h2 em + .um-h2 .um-uline — no new rule needed for them. */
.um-eyebrow em{ letter-spacing:.16em; word-spacing:-.05em; }
.um-modtitle-cont{ font-size:0.85em; }

/* v=420 — module eyebrow hover: light up the same warm "band" as the underlined key terms (.um-key)
   — a soft bronze wash behind the text + a slightly darker bronze, fading in. Only the module
   eyebrows carry an <em>, so this is scoped to them (the plain eyebrows stay inert). */
.um-eyebrow em{ padding-bottom:1px; border-radius:2px; transition:background-color .18s ease, color .18s ease; cursor:default; }
.um-eyebrow em:hover{ background-color:rgba(139,111,61,0.05); color:#6b5a2f; }

/* v=421 — generic framed "banner" image block (same look as the quran bismillah .um-mp-quran-banner):
   centered, full-width .um-mp-frame (bronze double frame + cream mat). Used for the Tones "Tonleiter"
   image placed above the tones grid; reusable for any module banner. */
.um-mp-banner{ text-align:center; margin:18px 0; }
.um-mp-banner .um-mp-frame{ display:block; width:100%; }
.um-mp-banner .um-mp-frame__in{ line-height:0; font-size:0; height:auto; }
.um-mp-banner .um-mp-frame__in img{ display:block; width:100%; height:auto; }

/* v=422 — main header brand: STATIC "Ultima Memoria | UM" wordmark. (The load-reveal animation was
   removed per the doctor — too attention-grabbing. The subtle hover underline below, v=423, stays.)
   "Memoria" = bronze italic via .um-brand em; "| UM" = a thin vertical rule + ink UM. */
.um-brand-mark{ position:relative; display:inline-block; white-space:nowrap; vertical-align:top; }
.um-bm-pipe{ display:inline-block; width:1.4px; height:.64em; background:var(--ink2); opacity:.5; vertical-align:.04em; margin:0 .18em 0 .30em; border-radius:1px; }

/* v=423 — header logo hover: a thin bronze underline draws in under the wordmark — the site's
   signature bronze-underline interaction, applied to the brand. Signals "click = home" + keeps it
   feeling alive, but stays subtle/professional (no heavy re-play). Pure CSS. */
.um-brand:hover{ opacity:1; }
.um-brand-mark::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--bz1); opacity:.75; transform:scaleX(0); transform-origin:left center; transition:transform .30s cubic-bezier(.45,0,.2,1); pointer-events:none; }
.um-brand:hover .um-brand-mark::after{ transform:scaleX(1); }
@media(prefers-reduced-motion:reduce){ .um-brand-mark::after{ transition:none; } }


/* v=424 — home grid bars (.umm-bar, all: I | Programmes, II | Areas, III | Modules + the end bar):
   REST is now the programmes-card navy (#061f38) as the constant colour; HOVER animates to bronze
   (#8b6f3e). (Swapped from the earlier bronze-rest / navy-hover, per the doctor.) Text + roman stay
   white/cream in BOTH states. Overrides v=185 (rest bronze) and the site-wide .um-cmp-divider:hover. */
.umm-bar{ background:#8b6f3e !important; }  /* REVERTED navy→bronze (pre-navy) */
.umm-bar:hover{ background:#8b6f3e !important; }
.umm-bar,
.umm-bar .um-roman,
.umm-bar--end .umm-end__r{ color:#fdfaf1 !important; }


/* v=425 — home 1.1 (#s-welcome) leadin: split the ONE joined underline (that ran under all of
   "(I) The Public Area") into TWO SEPARATE fading lines — one under the roman "(I)"/"(II)", one
   under "The Public/Protected Area". Each line disappears on its OWN hover (the site's um-uline
   behaviour), independently — no shared whole-phrase highlight. Overrides v=395 / v=122. */
#s-welcome .um-p .um-leadin{ border-bottom:none !important; padding-bottom:0 !important;
  background:none !important; cursor:default; }
#s-welcome .um-p .um-leadin:hover{ color:inherit !important; background:none !important; }
#s-welcome .um-p .um-leadin .um-lead-rom,
#s-welcome .um-p .um-leadin .um-lead-txt{
  border-bottom:0.5px solid rgba(139,111,61,0.55) !important; padding-bottom:1px !important;
  transition:border-color .18s ease, color .18s ease !important; cursor:pointer;
}
#s-welcome .um-p .um-leadin .um-lead-rom:hover,
#s-welcome .um-p .um-leadin .um-lead-txt:hover{ border-bottom-color:transparent !important; color:#6b5a2f !important; }


/* v=426 — enumerator markers that appear IN BODY TEXT lists (NOT titles, captions, module cards or
   inline prose numbers): the parenthesised list markers like (A.)…(D.) get the signature bronze
   fading underline (present at rest, disappears on that marker's own hover), like the section key
   terms. Applied via .um-enum ONLY on genuine body-text list markers — NEVER on "(2×)" multipliers,
   "(7) seven days", "Learning Phase (1)" references, S1/100A codes, or citations. */
.um-enum{
  border-bottom:0.5px solid rgba(139,111,61,0.55) !important;
  padding-bottom:1px;
  transition:border-color .18s ease, color .18s ease;
}
.um-enum:hover{ border-bottom-color:transparent !important; }


/* v=427 — memory (3.x) index lists: the numbered markers .um-idx-n → rendered "(01)"…"(10)" via
   ::before/::after parens — are body-text enumerators, so they get the SAME bronze fading underline
   (under the whole "(01)" incl. its parens), gone on that number's own hover. .um-idx-n is used only
   on the memory index / requirements lists, so this stays scoped to body text. */
.um-idx-n{
  border-bottom:none !important;
  text-decoration-line:underline !important;
  text-decoration-color:rgba(139,111,61,0.55) !important;
  text-decoration-thickness:0.5px !important;
  text-underline-offset:5px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-idx-n:hover{ text-decoration-color:transparent !important; }


/* v=428 — system (2.x) numbered enumeration lists: the markers .um-numlist__n → rendered "(01)"…"(04)"
   (".)" in the learning/performance sections) via ::before/::after parens — SAME body-text enumerator
   treatment as memory's .um-idx-n. Bronze fading underline under the whole "(01.)", gone on that
   number's own hover. .um-numlist__n is used ONLY on system. This is the ENUMERATION marker — NOT the
   inline "(2×)" / "(7) seven days" numbers inside the 2.x blocks (those are not enumerators). */
/* .um-numlist__n is a FLEX child that stretches to ~31px tall, so a border-bottom sat ~9px below the
   glyph (vs home's ~2px). Use text-decoration underline instead — it's drawn from the text baseline,
   not the box bottom — so the number→line gap matches home. */
.um-numlist__n{
  border-bottom:none !important;
  text-decoration-line:underline !important;
  text-decoration-color:rgba(139,111,61,0.55) !important;
  text-decoration-thickness:0.5px !important;
  text-underline-offset:5px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-numlist__n:hover{ text-decoration-color:transparent !important; }


/* v=429 — enumeration markers ((01.)…(10.), (A.)…(D.)) [.um-enum, .um-idx-n, .um-numlist__n], per
   the doctor's screenshots: (a) the number + parens go ITALIC; (b) they take the SAME live hover as
   the text key terms (.um-key / .um-gold-em) — colour darkens to #6b5a2f + a faint warm band; (c) the
   bronze underline now STAYS ALWAYS — no longer fades on hover (overrides the :hover fade of v=426/
   427/428). */
.um-enum, .um-idx-n, .um-numlist__n{
  font-style:italic !important;
  color:#8b6f3d !important;
  border-radius:2px;
  transition:color .18s ease, background-color .18s ease, text-decoration-color .18s ease, border-color .18s ease !important;
}
/* line STAYS on hover (darkens, does not vanish) */
.um-idx-n:hover, .um-numlist__n:hover{ text-decoration-color:rgba(139,111,61,0.95) !important; }
.um-enum:hover{ border-bottom-color:rgba(139,111,61,0.95) !important; }
/* live key-term hover: darken + warm band */
.um-enum:hover, .um-idx-n:hover, .um-numlist__n:hover{
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05) !important;
}


/* v=430 — make the v=429 marker treatment reach the two contexts where a MORE SPECIFIC rule was
   still blocking the italic: (a) MEMORY 3.4 (#m-requirements .um-idx-n) — v=336 had forced these
   markers upright; the doctor now wants them ITALIC like all the rest, incl. the "(" ".)" parens;
   (b) PROGRAMMES (A.)…(D.) — .um-list--codes strong forced upright/bold. */
#m-requirements .um-idx-n,
#m-requirements .um-idx-n::before,
#m-requirements .um-idx-n::after{ font-style:italic !important; }
.um-list--codes strong.um-enum{ font-style:italic !important; font-weight:400 !important; }


/* v=431 — "Back to the top of the page" bar: SWAP the CENTRAL box (.um-to-top__link) only — the
   former hover colour (#f6f2e4, lighter) becomes the constant/resting colour, and hover now animates
   to the former resting colour (#efe9d7, darker). The left/right side boxes (.um-to-top__side = Home
   / next page) are left exactly as they were. Overrides v=257 for the central link. */
.um-to-top .um-to-top__link{ background:#f6f2e4 !important; }
.um-to-top .um-to-top__link:hover{ background:#efe9d7 !important; }


/* v=432 — make ALL enumeration lists match HOME (18px). Home's list is 18px (its original); system,
   memory and the programmes (A.)…(D.) list were 16px. Bump those three UP to 18px so everything looks
   like home. Programmes is scoped to the li that holds a .um-enum marker, so method's S1/100A codes
   list is NOT touched. Marker→text gap stays ~10px on all. */
.um-numlist__n, .um-numlist__t{ font-size:18px !important; }
.um-idx-n, .um-idx-t{ font-size:18px !important; }
/* markers were weight 500 (looked bold) on system/memory; home + programmes are 400 — match to 400 */
.um-numlist__n, .um-idx-n, #m-requirements .um-idx-n{ font-weight:400 !important; }
.um-list--codes li:has(> strong.um-enum),
.um-list--codes li:has(> strong.um-enum) strong{ font-size:18px !important; }
/* programmes (A.)…(D.) marker→text gap → ~10px (was 12px at 18px via strong margin-right:8px) */
.um-list--codes strong.um-enum{ margin-right:6px !important; }


/* v=433 — memory pullquote ("Our brain is capable…"): replace the ONE continuous line under the whole
   quote (v=... .um-pullquote p .um-gold-em border-bottom) with SEPARATE animated underlines on the key
   words (brain, improving, adapting, integrating, new cells, networks) — each its OWN bronze line +
   the signature key-term hover (darken to #6b5a2f + warm band), independently. */
.um-pullquote p .um-gold-em{ border-bottom:none !important; padding-bottom:0 !important; }
.um-pullquote .um-qkey{
  border-bottom:0.5px solid rgba(139,111,61,0.55) !important;
  padding-bottom:1px; border-radius:2px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.um-pullquote .um-qkey:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05) !important;
}


/* v=434 — method 4.1 (#me-process) "phases" lists + 4.2 (#me-entrance) S1/100 codes list: bracket
   each list with a thin bronze rule ABOVE and BELOW, with SYMMETRIC spacing (equal gap line↔list and
   equal gap around the block), like the other dividers on the site. Line 0.5px bronze; inner gap 14px
   (line→list), outer gap 18px. */
#me-process .um-list--phases,
#me-entrance .um-list--codes{
  border-top:0.5px solid rgba(139,111,61,0.28) !important;
  border-bottom:0.5px solid rgba(139,111,61,0.28) !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
  margin-top:18px !important;
  margin-bottom:18px !important;
}


/* v=435 — programme-card L-row titles ("Learning Phase (1) | Learning Assessment Test (1) | (2) days"):
   the bronze underline used to run as ONE joined line under the whole copy (the " | " pipes included).
   Split it into SEPARATE per-segment underlines — each only as wide as its own words, the pipes left
   bare — via .umx-seg. Matches the original line (0.75px, 3px offset, bronze). Single-segment titles
   (A/B/C/D) are untouched: no .umx-seg, so :has() doesn't match them. On every programme card. */
.umx-row-title .umx-row-copy:has(.umx-seg){ text-decoration:none !important; }
.umx-row-title .umx-seg{
  text-decoration-line:underline !important;
  text-decoration-color:rgb(139,111,61) !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:3px !important;
}


/* v=436 — certificate preview bar: a small RED asterisk (*) right after "Preview" (footnote marker,
   raised like a superscript, upright — not italic like the title). */
.um-cert-star{
  color:#c0392b !important;
  font-style:normal !important;
  font-weight:600 !important;
  vertical-align:super;
  font-size:0.66em;
  margin-left:2px;
}


/* v=437 — programme detail titles ("S2/200 – (7) Seven Days" …): the .um-uline underline ran as ONE
   joined line under the whole em (the " – " dash included). BREAK it at the dash — "S2/200" and
   "(7) Seven Days" each get their OWN line via .um-useg, the dash left bare. Same fade-on-hover
   animation (hovering the title fades both segment lines together). Matches the line (0.75px, 7px). */
.um-h2 .um-uline:has(.um-useg){ text-decoration:none !important; }
.um-h2 .um-uline .um-useg{
  text-decoration-line:underline !important;
  text-decoration-color:#8b6f3d !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:7px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-h2 .um-uline:hover .um-useg{ text-decoration-color:transparent !important; }


/* v=438 — modules page (applications) top banner (.umm-banner) + bottom foot (.umm-foot): make them
   the SAME as the home grid bars (.umm-bar) — programme-navy (#061f38) at rest, animate to bronze
   (#8b6f3e) on hover; cream text (lead + ink); 56px tall; the same cream inset + grey border edge and
   left-pull padding; full width to the frame. */
.umm-banner, .umm-foot{
  background:#8b6f3e !important;  /* REVERTED navy→bronze (pre-navy) */
  color:#fdfaf1 !important;
  border:1px solid #8f8d8a !important;
  box-shadow:inset 0 0 0 3px #f5f2ea !important;
  height:56px !important; min-height:56px !important;
  display:flex !important; align-items:center !important;
  padding:0 24px 0 19px !important;
  font-size:15px !important;
  transition:background-color .2s ease !important;
}
.umm-banner:hover, .umm-foot:hover{ background:#8b6f3e !important; }
.umm-banner__lead, .umm-foot__lead{ color:#fdfaf1 !important; }
.umm-banner__ink{ color:#fdfaf1 !important; }
.umm-foot .um-tag{ color:#fdfaf1 !important; }


/* v=439 — L-row titles were split into .umx-seg (v=435), but the card's hover still darkened the WHOLE
   copy at once (.umx-row-copy:hover → #6b5a2f + warm band → all three segments lit together). Now that
   they're separate lines, separate the ANIMATION too: on a SEGMENTED copy, the whole-copy hover is
   neutralised (stays navy), and each .umx-seg animates ONLY on its OWN hover (darken #6b5a2f + underline
   darken + warm band). Non-segmented titles (A/B/C/D) keep the whole-copy hover. On every card. */
.umx-expectation-card .umx-row:hover .umx-row-title .umx-row-copy:has(.umx-seg),
.umx-expectation-card .umx-row .umx-row-title .umx-row-copy:has(.umx-seg):hover{
  color:#061f38 !important;
  background-color:transparent !important;
}
.umx-expectation-card .umx-row-title .umx-seg{
  transition:color .18s ease, text-decoration-color .18s ease, background-color .18s ease !important;
  border-radius:2px;
}
.umx-expectation-card .umx-row-title .umx-seg:hover{
  color:#6b5a2f !important;
  text-decoration-color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05) !important;
}


@media not all {  /* ===== BLUE DISABLED (revert to pre-navy). Delete this wrapper to restore navy ===== */
/* v=440 — NAVY header + footer: the sticky header (.um-topbar) and the footer (.um-footer) go to the
   programme-navy (#061f38). ALL header/footer text → white, EXCEPT "Memoria" in the wordmark → sand
   (#cbb98f). Hover accents → sand (readable on navy, not the dark bronze). */

/* ---------- HEADER ---------- */
.um-topbar{
  background:#061f38 !important;
  border-top-color:#061f38 !important;
  border-bottom-color:rgba(255,255,255,0.14) !important;
}
.um-topbar .um-brand,
.um-topbar .um-brand-mark,
.um-topbar .um-brand__sub,
.um-topbar .um-nav__link,
.um-topbar .um-nav__apply,
.um-topbar .um-nav__icons a,
.um-topbar .um-menu-toggle{ color:#ffffff !important; }
.um-topbar .um-brand-mark em{ color:#cbb98f !important; }     /* Memoria → sand */
.um-topbar .um-bm-pipe{ background:#ffffff !important; opacity:.55 !important; }
.um-topbar .um-nav__link:hover,
.um-topbar .um-nav__apply:hover,
.um-topbar .um-nav__icons a:hover{ color:#cbb98f !important; }
.um-topbar .um-brand-mark::after{ background:#cbb98f !important; }   /* brand hover underline → sand */
/* nav links: base white (above); the underline gradient + hover/active colour were bronze → sand */
.um-topbar__nav-left .um-nav__link{ background-image:linear-gradient(#cbb98f,#cbb98f) !important; }
.um-topbar__nav-left .um-nav__link:hover,
.um-topbar__nav-left .um-nav__link.is-active{ color:#cbb98f !important; }
.um-nav__apply{ background-image:linear-gradient(#cbb98f,#cbb98f) !important; }
.um-nav__icons a{ background-image:linear-gradient(#cbb98f,#cbb98f) !important; }
.um-nav__icons a:hover{ color:#cbb98f !important; }

/* ---------- FOOTER ---------- */
.um-footer{ background-color:#061f38 !important; }
.um-footer,
.um-footer a,
.um-footer__nav a{ color:#ffffff !important; }
.um-footer a:hover,
.um-footer__nav a:hover{ color:#cbb98f !important; border-bottom-color:#cbb98f !important; }
}  /* ===== end BLUE DISABLED (v=440 header/footer navy) ===== */


/* v=441 — colours groups (practice-preview): (a) the group headings (.umcol-glabel) already have a
   bronze line below — make it DISAPPEAR on hover (the site's fade-on-hover). (b) the bronze in-text
   terms (.umcol-gdesc em: "Neutral colours" / "primary colours" / "secondary colours") get the SAME
   bronze line below that fades out on hover. */
.umcol-glabel{ transition:border-color .2s ease !important; }
.umcol-glabel:hover{ border-bottom-color:transparent !important; }
.umcol-gdesc em{
  border-bottom:0.5px solid rgba(139,111,61,0.55) !important;
  padding-bottom:1px; border-radius:2px;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease !important;
  cursor:pointer;
}
/* v=442 — colours DESCRIPTION terms: the line STAYS (does not fade); on hover the same live
   key-term animation as in the text — darken to #6b5a2f + warm band + line darkens. */
.umcol-gdesc em:hover{
  border-bottom-color:rgba(139,111,61,0.95) !important;
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05) !important;
}


/* v=443 — module-preview subtitle ("Artistic and Visual Memory | Development of Artistic and Visual
   Abilities"): the key words (Artistic, Visual, Development, Abilities) go bronze with a line below +
   the site's key-term hover (darken #6b5a2f + warm band; line stays). */
.um-mp-key{
  color:#8b6f3d !important;
  border-bottom:0.5px solid rgba(139,111,61,0.55) !important;
  padding-bottom:1px; border-radius:2px;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
  cursor:pointer;
}
.um-mp-key:hover{
  color:#6b5a2f !important;
  border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05) !important;
}


/* v=444 — test-config form (.umtc) dividers: (a) the difficulty divider (row 4) BREAKS at the rubric
   column and continues under the OPTIONS element only (grid-column 2) — the difficulty rubric box is
   one row tall while its options span three, so a full-width line looked detached from the empty left
   area; (b) a full continuous divider at the BOTTOM (below the ART group, .umtc-rule--full); (c) uniform
   vertical spacing around EVERY divider (~16px each side = 9px grid gap + 7px margin). */
.umtc-rule{ margin:7px 0 !important; }
.umtc-rule--opt{ grid-column:2 !important; }
.umtc-rule--c1{ grid-column:1 !important; }
.umtc-rule--full{ grid-column:1 / -1 !important; }
/* v=446 — the divider between the Easy row and the Tones row (below the "Select the difficulty" rubric)
   is now a normal .umtc-rule in its OWN grid row, so it gets the SAME ~16px vertical spacing as every
   other divider (previously it was placed with a negative margin → only 4px, looked off). */


/* v=447 — /more page: a clean index of the remaining top-level pages (replaces the dropdown megamenu).
   Left-aligned page names, generous vertical rhythm; a persistent full-width rule between rows (stays
   always), plus a NAME-WIDTH bronze underline that appears on hover. */
.um-more-page{ max-width:760px; margin:0 auto; padding:36px 0 90px; }
.um-more-page__h1{ margin:8px 0 30px; }
.um-morelist{ display:flex; flex-direction:column; border-top:1px solid rgba(139,111,61,0.28); }
.um-morelink{ display:block; padding:22px 2px; border-bottom:1px solid rgba(139,111,61,0.28); text-decoration:none; }
.um-morelink__t{
  font-family:'Cormorant Garamond',Georgia,serif; font-size:30px; font-weight:500; letter-spacing:.01em;
  color:var(--ink,#1a1814);
  border-bottom:2px solid transparent; padding-bottom:3px;
  transition:color .18s ease, border-color .18s ease;
}
.um-morelink:hover .um-morelink__t{ color:var(--bz1,#8b6f3d); border-bottom-color:var(--bz1,#8b6f3d); }

/* v=448 — command palette: "More" (and later, search) opens a searchable index of the top-level
   pages only (no subsections). Navy scrim + sand box, bronze accents. Current page row stays lit
   (.is-current); keyboard cursor = .is-active. Markup in um-palette.ejs, behaviour in foundations.js. */
.um-palette{ position:fixed; inset:0; z-index:210; display:none; }
.um-palette.is-open{ display:block; }
.um-palette__scrim{ position:absolute; inset:0; background:rgba(6,31,56,.34); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.um-palette__box{
  position:absolute; top:12vh; left:50%; transform:translateX(-50%);
  width:min(560px,92vw); max-height:76vh; display:flex; flex-direction:column;
  background:var(--sand,#fdfaf1); border:1px solid var(--rule);
  border-radius:12px; box-shadow:0 40px 80px -30px rgba(6,31,56,.6); overflow:hidden;
  animation:umPalPop .2s ease;
}
@keyframes umPalPop{ from{ opacity:0; transform:translateX(-50%) translateY(-10px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.um-palette__search{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--rule); flex:none; }
.um-palette__mag{ font-size:16px; color:var(--bz1); line-height:1; }
.um-palette__input{ flex:1; min-width:0; border:0; background:transparent; font-family:var(--read); font-size:18px; color:var(--ink); outline:none; }
.um-palette__input::placeholder{ color:var(--ink3); }
.um-palette__esc{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); background:transparent; border:1px solid var(--rule); border-radius:5px; padding:4px 7px; cursor:pointer; flex:none; }
.um-palette__esc:hover{ color:var(--bz1); border-color:var(--bz1); }
.um-palette__list{ list-style:none; margin:0; padding:8px; overflow-y:auto; }
.um-pal__row{ display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--ink2); border-left:3px solid transparent; }
.um-pal__row:hover, .um-pal__row.is-active{ background:var(--paper2); }
.um-pal__badge{ width:28px; height:28px; flex:none; display:grid; place-items:center; border:1px solid var(--rule); border-radius:7px; font-family:var(--serif); font-size:15px; color:var(--bz1); }
.um-pal__main{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.um-pal__name{ font-size:15.5px; color:var(--ink); }
.um-pal__path{ font-family:var(--mono); font-size:11px; color:var(--ink3); }
.um-pal__cur{ margin-left:auto; flex:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bz1); border:1px solid var(--rule); border-radius:20px; padding:3px 9px; display:none; }
.um-pal__enter{ margin-left:auto; flex:none; font-family:var(--mono); font-size:14px; color:var(--ink3); opacity:0; }
.um-pal__row.is-active .um-pal__enter{ opacity:1; }
.um-pal__row.is-current{ background:rgba(139,111,61,.10); border-left-color:var(--bz1); }
.um-pal__row.is-current .um-pal__name{ color:var(--bz1); }
.um-pal__row.is-current .um-pal__cur{ display:inline-block; }
.um-pal__row.is-current .um-pal__enter{ display:none; }
.um-palette__empty{ padding:26px 18px 30px; text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink3); }
@media (max-width:560px){ .um-palette__box{ top:7vh; width:94vw; } }

/* v=449 — Search & Help palette (header search icon). Same shell as the "More" palette (.um-palette),
   but its content is the FAQ: each row is a question that expands its answer inline. Markup in
   um-search.ejs, behaviour in foundations.js. Mirrors the FAQ accordion in contact.ejs (11.6). */
.um-faqrow{ border-bottom:1px solid var(--rule-soft); }
.um-faqrow:last-child{ border-bottom:0; }
.um-faqrow__q{
  width:100%; display:flex; align-items:center; gap:13px; padding:13px 12px;
  background:transparent; border:0; border-left:3px solid transparent; border-radius:8px;
  cursor:pointer; text-align:left; font-family:var(--read); color:var(--ink);
}
.um-faqrow__q:hover, .um-faqrow.is-active > .um-faqrow__q{ background:var(--paper2); }
.um-faqrow.is-open > .um-faqrow__q{ border-left-color:var(--bz1); }
.um-faqrow__num{ font-family:var(--mono); font-size:11px; color:var(--bz1); min-width:22px; flex:none; }
.um-faqrow__text{ flex:1; font-size:15.5px; line-height:1.3; }
.um-faqrow.is-open .um-faqrow__text{ color:var(--bz1); }
.um-faqrow__chev{ flex:none; font-family:var(--mono); font-size:18px; line-height:1; color:var(--ink3); transition:transform .2s ease, color .2s ease; }
.um-faqrow.is-open .um-faqrow__chev{ transform:rotate(45deg); color:var(--bz1); }
.um-faqrow__a{ display:none; padding:0 12px 15px 47px; }
.um-faqrow.is-open .um-faqrow__a{ display:block; animation:umFaqIn .2s ease; }
@keyframes umFaqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.um-faqrow__a p{ margin:0; font-family:var(--read); font-size:14px; line-height:1.6; color:var(--ink3); }
.um-faqrow__a a{ color:var(--bz1); }
.um-palette__foot{
  display:block; flex:none; padding:13px 18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink3);
  text-decoration:none; text-align:center;
}
.um-palette__foot:hover{ color:var(--bz1); }

@media not all {  /* ===== BLUE-ERA POLISH DISABLED (revert to pre-navy). Delete this wrapper to restore ===== */
/* v=450 — three design tweaks requested by the doctor:
   (1) The horizontal sub-nav strip (.um-stickybar) below the header → WHITE background (was --paper).
   (2) In the main header (.um-topbar): the vertical nav dividers and the nav word-underlines
       → WHITE instead of bronze/sand.
   (3) Home grid bars (.umm-bar) + modules page banner/foot (.umm-banner/.umm-foot): the bar no longer
       animates to bronze on hover — it STAYS navy (#061f38); instead the TEXT animates navy → bronze. */

/* (1) sub-nav strip → white */
.um-stickybar{ background:#ffffff !important; }

/* (2) header lines → white (dividers between items + the word-underline under nav / Apply / icons) */
.um-topbar__nav-left > * + *{ border-left-color:rgba(255,255,255,0.55) !important; }
.um-topbar__nav-left .um-nav__link{ background-image:linear-gradient(#ffffff,#ffffff) !important; }
.um-nav__apply{ background-image:linear-gradient(#ffffff,#ffffff) !important; }
.um-nav__icons a{ background-image:linear-gradient(#ffffff,#ffffff) !important; }
.um-topbar .um-brand-mark::after{ background:#ffffff !important; }

/* (3) grid bars: bar stays navy at rest AND on hover; only the TEXT goes bronze (that IS the animation) */
.umm-bar, .umm-bar *,
.umm-banner, .umm-banner *,
.umm-foot, .umm-foot *{ transition:color .2s ease !important; }
.umm-bar:hover{ background:#061f38 !important; }
.umm-bar:hover, .umm-bar:hover *{ color:#8b6f3e !important; }
.umm-banner:hover, .umm-foot:hover{ background:#061f38 !important; }
.umm-banner:hover, .umm-banner:hover *,
.umm-foot:hover, .umm-foot:hover *{ color:#8b6f3e !important; }

/* v=451 — finish the "white header lines" pass (v=450): the last bronze bits in the header.
   (a) MORE dropdown triangle (::after CSS triangle) → white (was a bronze border-top).
   (b) right-zone vertical separators (line before the icons + between each icon) → white.
   (c) APPLY hover underline → white — a bronze gradient re-appeared on :hover (v=79/v=80 rules at
       (0,2,0) beat the v=450 base rule); re-assert white at the same specificity, later in the file. */
.um-nav__more::after{ border-top-color:#ffffff !important; }
.um-nav__icons{ border-left-color:rgba(255,255,255,0.55) !important; }
.um-nav__icons a + a{ border-left-color:rgba(255,255,255,0.55) !important; }
.um-nav__apply:hover{ background-image:linear-gradient(#ffffff,#ffffff) !important; }

/* v=452 — brand wordmark pipe (│ between "Memoria" and "UM"): restore its FULL length. It was .64em
   (≈ cap height) which looked short next to the tall wordmark; take it up to the ascender line so it
   reads as a full divider. Stays white (v=440). */
.um-topbar .um-bm-pipe{ height:0.92em !important; vertical-align:-0.10em !important; }

/* v=453 — FINAL unified rule for every header + footer line (so we don't revisit this):
   • STRUCTURAL vertical lines (dividers between items + the logo pipe) and the footer's top rule →
     PURE WHITE (#fff), not the silvery rgba. They are STATIC — never change on hover.
   • The UNDERLINES that APPEAR under a name on hover/active FOLLOW THE TEXT COLOUR (currentColor), so
     the name and its underline are always the SAME colour ("ujednačeno" — reads bronze/sand on navy).
   • Logo pipe: opaque white, 1px wide — the same thickness as the nav dividers. */

/* -- static vertical dividers → pure white -- */
.um-topbar__nav-left > * + *{ border-left-color:#ffffff !important; }
.um-nav__icons{ border-left-color:#ffffff !important; }
.um-nav__icons a + a{ border-left-color:#ffffff !important; }
.um-footer__nav a + a{ border-left-color:#ffffff !important; }

/* -- footer top rule(s) → white (border-top + its ::before line + faint 3px echo) -- */
.um-footer{ border-top-color:#ffffff !important; }
.um-footer::before{ background:#ffffff !important; }
.um-footer::after{ background:rgba(255,255,255,0.28) !important; }

/* -- logo pipe → opaque white, 1px like the nav dividers -- */
.um-topbar .um-bm-pipe{ background:#ffffff !important; opacity:1 !important; width:1px !important; }

/* -- appearing underlines follow the text colour (name + underline uniform) -- */
.um-topbar__nav-left .um-nav__link,
.um-nav__apply, .um-nav__apply:hover,
.um-nav__icons a,
.um-footer__nav a, .um-footer__nav a:hover{ background-image:linear-gradient(currentColor,currentColor) !important; }
.um-footer__nav a:hover{ border-bottom-color:currentColor !important; }
/* logo hover underline is an appearing line too → bronze (the brand text stays white, so it can't
   follow currentColor; set it explicitly to the same bronze/sand as the nav underlines) */
.um-topbar .um-brand-mark::after{ background:#cbb98f !important; }

/* v=454 — logo hover underline geometry: START flush with the text's LEFT edge, OVERHANG 5px on the
   RIGHT, and track the WIDEST logo text (the sub-line "Foundations of the Intellect"). Move the
   reveal onto the sub-line so it matches that width; on desktop shrink the sub-line box to its text
   (it otherwise fills the 256px brand zone) so "5px" is measured from the real text edge. */
.um-topbar .um-brand-mark::after{ display:none !important; }   /* retire the old wordmark-width line */
@media (min-width:981px){ .um-brand__sub{ width:max-content !important; } }
.um-brand__sub{ position:relative; }
.um-brand__sub::before{
  content:''; position:absolute; left:0; right:-5px; top:-4px; height:1px;
  background:#cbb98f; opacity:.75; transform:scaleX(0); transform-origin:left center;
  transition:transform .30s cubic-bezier(.45,0,.2,1); pointer-events:none;
}
.um-brand:hover .um-brand__sub::before{ transform:scaleX(1); }
@media(prefers-reduced-motion:reduce){ .um-brand__sub::before{ transition:none; } }

/* v=455 — grid bars (home .umm-bar + modules .umm-banner/.umm-foot), per the doctor:
   (1) fill the navy right up to the frame — drop the 3px cream inset ring.
   (2) drop the navy→bronze text animation; the text stays cream/white in both states.
   (3) on hover, an underline appears UNDER THE TEXT — text colour (white), 1px like the main-menu
       underline, exactly the width of the text. Laid out transparent, fades in on hover. */

/* (1) fill to the frame */
.umm-bar, .umm-banner, .umm-foot{ box-shadow:none !important; }

/* (2) text stays cream/white on hover (no bronze) */
.umm-bar:hover, .umm-bar:hover *,
.umm-banner:hover, .umm-banner:hover *,
.umm-foot:hover, .umm-foot:hover *{ color:#fdfaf1 !important; }

/* (3) hover underline = text colour, 1px, text width */
.umm-bar, .umm-bar *,
.umm-banner, .umm-banner *,
.umm-foot, .umm-foot *{
  text-decoration-line:underline !important;
  text-decoration-color:transparent !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:5px !important;
  transition:text-decoration-color .2s ease, color .2s ease !important;
}
.umm-bar:hover, .umm-bar:hover *,
.umm-banner:hover, .umm-banner:hover *,
.umm-foot:hover, .umm-foot:hover *{ text-decoration-color:currentColor !important; }

/* v=456 — logo balance: the sub-line "Foundations of the Intellect" was letter-spaced WIDER than the
   wordmark, so the logo looked top-narrow / bottom-wide. Tune the letter-spacing per breakpoint so the
   sub-line renders at EXACTLY the wordmark width (measured: 0.30em ≥721px, 0.108em ≤720px), left-align
   both (shared left + right edge), and lift the hover underline up so it sits under the wordmark
   instead of hugging the sub-line. */
.um-brand__sub{ text-align:left !important; text-align-last:auto !important; width:max-content !important; white-space:nowrap !important; }
@media (min-width:721px){ .um-brand__sub{ letter-spacing:0.30em !important; word-spacing:-0.30em !important; } }
@media (max-width:720px){ .um-brand__sub{ letter-spacing:0.108em !important; word-spacing:normal !important; } }
.um-brand__sub::before{ top:-6px !important; }

/* v=457 — three line tweaks:
   (1) logo pipe: EQUAL space on both sides (was left .30em / right .18em → it sat closer to "UM").
   (2) every header + footer vertical divider + the logo pipe → THINNER (0.5px hairline), to match the
       thin "|" in the home grid bars.
   (3) the long full-width HORIZONTAL lines in the header + footer → BRONZE (#a88955, the same as the
       footer's bottom rule the doctor likes), instead of white/silver. */

/* (1) pipe: equal margins */
.um-topbar .um-bm-pipe{ margin:0 0.24em !important; }

/* (2) thin vertical lines → true 1-device-px hairline. A CSS border can't go under 1px (Chrome rounds
   0.5px → 1px), so render each divider as a 0.5px pseudo-element block, which PAINTS as 1 device px —
   the same trick as the logo pipe. */
.um-topbar__nav-left > * + *,
.um-nav__icons,
.um-nav__icons a + a,
.um-footer__nav a + a{ border-left:0 !important; position:relative; }
.um-topbar__nav-left > * + *::before,
.um-nav__icons::before,
.um-nav__icons a + a::before,
.um-footer__nav a + a::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0.5px;
  background:#ffffff; pointer-events:none;
}
.um-topbar .um-bm-pipe{ width:0.5px !important; }

/* (3) long horizontal lines → bronze #a88955 (matches the footer's bottom rule) */
.um-topbar{ border-bottom-color:#a88955 !important; }
.um-footer{ border-top-color:#a88955 !important; }
.um-footer::before{ background:#a88955 !important; }
.um-footer::after{ background:rgba(168,137,85,0.28) !important; }
}  /* ===== end BLUE-ERA POLISH DISABLED (v=450–457) ===== */

/* v=458 — logo polish restored on the (reverted) PAPER header, WITHOUT any hover animation. Only the
   logo — nothing else touched.
   (a) sub-line "Foundations of the Intellect" = EXACTLY the wordmark width, left-aligned, on desktop
       AND mobile (base is letter-spaced wider → top-narrow / bottom-wide). Tuned per breakpoint.
   (b) the wordmark pipe │ : BLACK/ink (not the faint silver base), full height, EQUAL space both sides. */
/* v=460 — sub-line: EVEN letter-spacing (no justify — justify spread the words apart), tuned so the
   VISIBLE last letter (T) lands under the wordmark's right edge and (F) under (U). max-content box. */
.um-brand__sub{ text-align:left !important; text-align-last:auto !important; width:max-content !important; white-space:nowrap !important; }
@media (min-width:721px){ .um-brand__sub{ letter-spacing:0.313em !important; word-spacing:-0.30em !important; } }
@media (max-width:720px){ .um-brand__sub{ letter-spacing:0.113em !important; word-spacing:normal !important; } }
.um-topbar .um-bm-pipe{
  background:#1a1814 !important; opacity:1 !important;
  width:1.4px !important; height:0.94em !important;
  margin:0 0.24em !important; vertical-align:-0.05em !important;
}
/* v=459 — no elastic/rubber-band overscroll: the page can't be "stretched" past the top/bottom,
   so the sticky header + fixed footer stay put when you over-pull the scroll. */
html, body{ overscroll-behavior:none !important; }

/* ============================================================
   v=461 — grid BARS hanging-wrap (mobile). When a bar's text wraps to a
   second line, the continuation must align under the first WORD, not under
   the leading number. Achieved by splitting each bar into a nowrap number
   span (.um-roman / .umm-num / .umm-foot__lead) + a flexible content span
   (.umm-cont). The content becomes its own flex column that wraps inside
   itself, so wrapped lines hang under the content's left edge — auto-adjusts
   to any number width (I / II / III / 112 / 3.35). Also keeps the number
   token from breaking apart, and fixes the scattered modules foot.
   ============================================================ */
.umm-bar{ gap:.32em !important; }
/* number + vertical pipe belong to the FIRST line (not vertically centred against the wrapped block) */
.umm-bar:not(.umm-bar--end){ align-items:baseline !important; }
.umm-bar .um-roman,
.umm-bar--end .umm-num,
.umm-foot__lead{ white-space:nowrap !important; flex:0 0 auto !important; }
.umm-bar .umm-cont,
.umm-bar--end .umm-end__l .umm-cont,
.umm-foot .umm-cont{ flex:1 1 auto !important; min-width:0 !important; }

/* end bar (home) left column: italic number + hanging title */
.umm-bar--end .umm-end__l{ display:flex !important; align-items:baseline !important; gap:.4em !important; min-width:0 !important; }
.umm-bar--end .umm-num{ font-style:italic !important; }

/* modules foot: number stays put on its own, the rest hangs under the first word */
.umm-foot{ display:flex !important; align-items:baseline !important; gap:.42em !important; }

/* bars must GROW in height when their text wraps (fixed 56px was clipping wrapped lines) */
.umm-bar{ height:auto !important; min-height:56px !important; padding-top:8px !important; padding-bottom:8px !important; }

/* narrow screens: the end bar's two columns (112/3.35 title  ·  UM signature) don't fit side by
   side — stack them so each gets full width and hangs cleanly under its own first word */
@media (max-width:640px){
  .umm-bar--end{ flex-direction:column !important; align-items:stretch !important; gap:.25em !important; }
  .umm-bar--end .umm-end__l{ width:100% !important; }
  .umm-bar--end .umm-end__r{ width:100% !important; }
}

/* ============================================================
   v=462 — mobile: language / search / login inside the command-palette menu.
   The header language·search·login icons are hidden ≤720px (only the "Menu"
   button shows), so surface those three actions as a footer INSIDE the menu.
   Hidden ≥721px (there the icons live in the header).
   ============================================================ */
.um-palette__list{ flex:1 1 auto; min-height:0; }   /* let the list scroll above the pinned footer */
.um-palette__actions{ display:none; }
@media (max-width:720px){
  .um-palette__actions{
    display:flex; gap:8px; flex:0 0 auto;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--rule,rgba(139,111,61,.28));
    background:var(--paper2,#efe9d7);
  }
  .um-pal__act{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:11px 6px; border:1px solid var(--rule,rgba(139,111,61,.35)); border-radius:9px;
    background:var(--sand,#fdfaf1); color:var(--ink,#1a1814); text-decoration:none;
    font-size:12px; letter-spacing:.02em; text-align:center; line-height:1.15;
  }
  .um-pal__act i{ font-size:19px; color:var(--bz1,#8b6f3d); }
  .um-pal__act:hover, .um-pal__act:active{ background:#f3ecd9; }
  .um-pal__act:focus-visible{ outline:2px solid var(--bz1,#8b6f3d); outline-offset:2px; }
}

/* ============================================================
   v=463 — the intro LEDE now matches the body-text width at every screen width.
   Two separate causes made the lede narrower than the paragraphs below it:

   (1) 901–1320px: the content-page hero kept a 3-column grid (200px 1fr 200px) while the
       sections dropped to 2 columns. Cause: `.um-hero:not(.um-hero--home)` (line ~6844) out-
       specifies the ≤1320 `.um-hero{200px 1fr}` media rule, so it never switched — the empty
       (aside hidden) right column still reserved 200px and squeezed the lede to ~half width.
       Fix: force the same 2-column grid as the sections in that range (equal specificity, later
       in source → wins). Scoped 901–1320 so the ≤900 single-column collapse is untouched.

   (2) ≤720px: the hero had `padding:24px 20px 16px` (20px on the sides) while `.um-section`
       has no side padding, so the lede sat 40px (20px×2) narrower than the body. Fix: drop the
       hero's horizontal padding on mobile so its content aligns to the same edge as the body.
   Home hero (.um-hero--home) is intentionally left as-is. */
@media (min-width:901px) and (max-width:1320px){
  .um-hero:not(.um-hero--home){ grid-template-columns:200px 1fr !important; }
}
@media (max-width:720px){
  .um-hero:not(.um-hero--home){ padding-left:0 !important; padding-right:0 !important; }
}

/* ============================================================
   v=464 — HOME hero (.um-hero--home): its lede AND the programme grid (.umm-wrap) were narrower
   than the body text below. Same family of causes as v=463, but the home hero has its own grid
   rules so it needed its own fix:

   (1) 721–900px — the WORST case: the left in-page-nav aside hides at ≤900 (line ~6858) but the
       home hero kept `grid-template-columns:200px 1fr` (line ~6895 out-specifies the ≤900
       `.um-hero{1fr}` collapse). The 200px track stayed but was empty, so the hero body
       auto-placed into it → lede + grid collapsed to ~200px wide while the body text stayed full
       width. Fix: collapse the home hero to a single column at ≤900 (matches the content heroes).

   (2) ≤720px — the home hero had `padding:20px …` sides (line ~9561) while `.um-section` has none,
       leaving the lede/grid 40px narrower than the body. Fix: drop the horizontal padding.

   Result: on Home the lede and the programme grid now share the body's width at every breakpoint. */
@media (max-width:900px){
  .um-hero--home{ grid-template-columns:1fr !important; }
}
@media (max-width:720px){
  .um-hero--home{ padding-left:0 !important; padding-right:0 !important; }
}
/* (3) The programme grid (.umm-wrap) had no width cap, so once the hero body went full-width it
   grew WIDER than the lede/body (which cap at the reading-column max-width). Give the grid the
   SAME max-width steps as .um-lede so the bars/cards line up with the text at every width. */
.um-hero--home .umm-wrap{ max-width:640px; }
@media (min-width:1280px){ .um-hero--home .umm-wrap{ max-width:780px; } }
@media (min-width:1500px){ .um-hero--home .umm-wrap{ max-width:860px; } }
@media (min-width:1750px){ .um-hero--home .umm-wrap{ max-width:940px; } }

/* ============================================================
   v=465 — the PAGE would not scroll up/down on Android / Samsung Chrome (Blink); the menu and
   everything else worked, but vertical scrolling on a page was stuck. iOS (WebKit) was fine.

   Cause: the base rule `body{ overflow-x:hidden }` (used to block sideways scroll). Per the CSS
   Overflow spec, when one axis is `hidden` and the other is `visible`, the `visible` axis is
   FORCED to compute to `auto`. So `overflow-x:hidden` silently made `overflow-y:auto`, turning
   <body> into its own scroll container. On Blink/Android that competes with the normal document
   (viewport) scroll and the page jams partway. WebKit tolerates it, which is why iOS was fine.

   Fix (v2, was overflow-x:clip): on REAL iOS, `overflow-x:clip` on html/body triggers ANOTHER
   WebKit bug — infinite page height (endless scrolling past the content) and broken
   position:fixed (the fixed footer scrolled away and vanished). So html/body get NO overflow-x
   at all: `visible` restores the browser default on both axes. The original reason for
   `body{overflow-x:hidden}` (mobile drawer bleeding off-canvas) is gone — the drawer was retired
   (the Menu opens the command palette). Horizontal overflow is instead handled where it can
   occur: tables/mblocks scroll inside their own boxes (v=467). */
html, body{ overflow-x:visible !important; overflow-y:visible !important; }
/* Stray horizontal bleed (a few px from decorative pseudo-elements; ~155px on /memory) is
   contained at the content wrapper instead — <main> holds no fixed/sticky elements on mobile,
   so clipping it is safe and the viewport scroller stays untouched. */
@media (max-width:720px){
  main.um-container{ overflow-x:clip; }
}

/* ============================================================
   v=466 — two small requests:
   (1) Logo line (.um-brand-mark::after, the bronze rule under the "Ultima Memoria | UM" wordmark):
       INVERT the animation — it now sits VISIBLE by default and FADES OUT on hover
       (was hidden by default, appeared on hover). The transition still animates the change.
   (2) Mobile "Menu" button: give it the same light background as the "Back to top" element
       (#f6f2e4 rest / #efe9d7 hover), with dark text (was transparent bg + white text). */
.um-topbar .um-brand-mark::after{ transform:scaleX(1) !important; }
.um-topbar .um-brand:hover .um-brand-mark::after{ transform:scaleX(0) !important; }

.um-topbar .um-menu-toggle{ background:#f6f2e4 !important; color:#5e4a26 !important; border-color:#8b6f3e !important; }
.um-topbar .um-menu-toggle:hover{ background:#efe9d7 !important; }

/* ============================================================
   v=467 — mobile (≤720px), two changes:

   (1) TABLES keep their DESKTOP layout and scroll horizontally inside their own box
       (per-device tuning was fragile — one robust behaviour everywhere):
       • method .um-tbl (phases/objectives/performance): the wrapper always had overflow-x:auto,
         but the 1fr columns SHRANK to fit 390px and the header texts overlapped. A min-width on
         head+rows keeps the desktop column proportions, so the wrapper scrolls right instead.
       • system + programmes §5.1 .um-mblock: the old ≤720 rules re-wrapped rows into multiple
         lines. Restore the desktop one-row grids and let the block body scroll right.

   (2) "Back to the top of the page" is VISIBLE on mobile again (was display:none) at the bottom
       of every page — but only the central link; the left (Home) / right (next page) side boxes
       stay hidden. The existing ≤720 rules already collapse it to one column and keep the
       border-top on the body. */
@media (max-width:720px){
  /* (1a) method tables */
  .um-tbl{ overflow-x:auto !important; }
  .um-tbl .um-tbl-head,
  .um-tbl .um-tbl-row{ min-width:720px !important; }   /* ≈ desktop table width (734) so headers keep their air */

  /* (1b) system + programmes 5.1 mblock tables */
  .um-mblock__body{ overflow-x:auto !important; }
  .um-mblock__list{ grid-template-columns:var(--um-txtw,600px) max-content !important; }
  .um-mblock__list:has(.um-mblock__code){ grid-template-columns:max-content var(--um-txtw,600px) max-content !important; }
  .um-mblock--solid .um-mblock__list li{
    grid-template-columns:max-content minmax(0,510px) max-content !important;
    column-gap:16px !important; min-width:640px !important;
  }
  /* system page mblocks (#sec-learning / #sec-performance): here each li is its own grid
     (1fr 190px) — the 1fr shrank and wrapped. Restore desktop columns → body scrolls. */
  #sec-learning .um-mblock__list > li,
  #sec-performance .um-mblock__list > li{ grid-template-columns:1fr 190px !important; }
  #sec-performance .um-mblock__list > li:has(.um-mblock__code){ grid-template-columns:max-content 1fr 190px !important; }

  /* Lines FRAME-TO-FRAME, exactly like the web version (desktop: intro + rows span the full box,
     354→1086 inside a 353→1087 frame). Inside the scrollable body (12px side padding) every
     line-bearing element — the intro sentence (border-bottom) and each row — bleeds -12px into
     that padding and compensates with 12px inner padding: the text keeps its inset, while the
     rules run edge-to-edge at scroll start AND at full right scroll. Content width 600 (system)
     / 640 (solid programmes 5.1) + 2×12 bleed = min-width 624 / 664 (border-box). */
  #sec-learning .um-mblock__list,
  #sec-performance .um-mblock__list{ min-width:600px !important; }
  #sec-learning .um-mblock__intro,
  #sec-performance .um-mblock__intro,
  #sec-learning .um-mblock__list > li,
  #sec-performance .um-mblock__list > li{
    box-sizing:border-box !important; min-width:624px !important;
    margin-left:-12px !important; margin-right:-12px !important;
    padding-left:12px !important; padding-right:12px !important;
  }
  .um-mblock--solid .um-mblock__list{ min-width:640px !important; }
  /* solid body keeps its own 20px side padding (more specific rule than the generic 12px), so
     the bleed here is -20px: content 640 + 2×20 = 680 → rules touch the frame on both ends.
     The #p-overview selector matches the old v=373 mobile rule (line ~15763, ID specificity,
     margin:0 -12px) — this later block wins and corrects the bleed to the actual 20px padding. */
  .um-mblock--solid .um-mblock__list li,
  #p-overview .um-mblock__list > li{
    box-sizing:border-box !important; min-width:680px !important;
    margin-left:-20px !important; margin-right:-20px !important;
    padding-left:20px !important; padding-right:20px !important;
  }

  /* (2) back-to-top: central link only. The body keeps a desktop grid (200px 1fr [200px]) with the
     link pinned to column 2 — on a phone column 2 is ~90px and the text stacked letter-by-letter.
     Collapse to one full-width column and let the link span it. */
  .um-to-top{ display:grid !important; }
  .um-to-top__side{ display:none !important; }
  .um-to-top__body{ grid-template-columns:1fr !important; column-gap:0 !important; padding-left:0 !important; max-width:none !important; }
  .um-to-top .um-to-top__link{ grid-column:1 !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; }
}

/* ============================================================
   v=468 — mobile HOME 1.3 fixes (≤720px):
   (1) "S10/1000" in the performance list drifted right: `.um-perf-prices > li:last-child
       .um-perf-code` carries margin-left:16px (desktop spacing next to the "|" separator), but on
       mobile the code wraps onto its own line and that margin became a stray indent — S3/300 sat
       flush while S10/1000 hung 16px to the right.
   (2) the signature ("Yours sincerely," / "Dr. M.Freiberg") kept its desktop 20px while the
       surrounding body text (.um-p) is 15px on mobile — unify with the body size. */
@media (max-width:720px){
  .um-perf-prices > li:last-child .um-perf-code{ margin-left:0 !important; }
  .um-signature, .um-signature__name{ font-size:15px !important; }
}

/* ============================================================
   v=469 — memory 3.4 index list (.um-idx) on mobile: the "(NN.)" markers are proportional italic
   figures, so each number box had a different width (25–36px) and the text column started at a
   different x in every row ((06.) touched the text, wrapped lines hung at random depths).
   Rule that HOLDS: the marker gets a FIXED grid column, the text always starts at the same x,
   and wrapped lines hang exactly under the text — on any phone width. */
@media (max-width:720px){
  .um-idx li{ display:grid !important; grid-template-columns:46px 1fr !important; column-gap:0 !important; align-items:baseline !important; }
  .um-idx-n{ white-space:nowrap !important; }
}

/* ============================================================
   v=470 — method (4.1/4.2) list alignment on mobile (≤720px):
   (A) ">" lists (.um-list): the TEXT ("the …") now sits on the same vertical as the number in
       the criterion band above ("1 | Preparation…") — measured: band number x=51, list text was
       x=86 → shift −35px; the ">" marker moves further left (that's fine, per Dr. Freiberg).
   (B) codes list (.um-list--codes, "S1/100C – the form of expression…"): wrapped lines used to
       fall back flush-left under the code; hanging indent so a wrap ("of the memory") starts
       under the SENTENCE text ("the …" after the dash), not under the code.
   SCOPED TO THE METHOD PAGE ONLY via the body page class (um-page-method, added to
   foundations-layout from `currentPage`) — the first, unscoped version of this rule leaked onto
   /memory (its 3.1 lists have no bands) and pushed those lists out of line. */
@media (max-width:720px){
  .um-page-method .um-list:not(.um-list--codes) > li{ margin-left:-35px !important; }
  /* 100px = measured x of "the" after "S1/100X – " so a wrap starts EXACTLY under "the" */
  .um-page-method .um-list--codes > li{ padding-left:100px !important; text-indent:-100px !important; }
}

/* ============================================================
   v=471 — method 4.1 "Learning Phase" list (.um-list--lp) on phones: the v=310 markup has NO
   literal spaces between the clause spans (desktop aligns them as inline-block columns), and the
   ≤680 rule flattens the spans to `display:inline` — so the words fused ("theLearning Phase (1)
   onewithLearning…"). Re-create the word gaps with margins on the inline spans. */
@media (max-width:680px){
  .um-list--lp .lp-the{ margin-right:.30em !important; }
  .um-list--lp .lp-w{ margin-left:.30em !important; margin-right:.30em !important; }
}

/* ============================================================
   v=472 — programmes page, mobile (≤720px):
   (1) 5.1 codes list "(A.) Measurable increase …": wraps fell flush-left; hanging indent so a
       wrapped line starts under "Measurable" (measured: marker "(A.) " = 36px).
   (2) programme-card gold DURATION badge: on mobile the desktop side-badge stretched into a tall
       full-width block with stray hairlines ("lines fused with the number"). Turn it into a slim
       full-width bronze BAND — DURATION · number DAYS · calendar in one centred row, hairlines off. */
@media (max-width:720px){
  .um-page-programmes .um-list--codes > li{ padding-left:36px !important; text-indent:-36px !important; }

  .umx-duration-top{
    flex-direction:row !important; justify-content:center !important; align-items:center !important;
    gap:18px !important; padding:13px 14px !important;
    width:100% !important; max-width:none !important;
    height:auto !important; min-height:0 !important;
    box-sizing:border-box !important; border-radius:0 !important;
  }
  /* the old v33 mobile rule pushes every child apart with margin:auto — zero it so the row sits
     as ONE centred group with EQUAL gaps: DURATION · 7 DAYS · calendar. The .um-page-programmes
     prefix out-ranks um-expectation-cards.css (loaded AFTER foundations on this page). */
  .um-page-programmes .umx-expectation-card .umx-duration-top > *{
    margin:0 !important; width:auto !important; flex:0 0 auto !important;
  }
  .um-page-programmes .umx-expectation-card .umx-duration-top .umx-days-number{ transform:none !important; margin:0 !important; font-size:24px !important; line-height:1 !important; }
  .um-page-programmes .umx-expectation-card .umx-duration-top small{ width:auto !important; display:inline-block !important; }
  .um-page-programmes .umx-expectation-card .umx-duration-top .umx-cal-wrap{ display:inline-flex !important; align-items:center !important; }
  .umx-duration-top small::after,
  .umx-duration-top .umx-days-number::after,
  .umx-duration-top .umx-days-label::after,
  .umx-duration-top .umx-cal-wrap::after{ display:none !important; }
}

/* ============================================================
   v=473 — topbar language menu: clicking the globe now opens a small options menu
   (English / Deutsch / العربية) instead of blind-toggling ?lang. CSP-safe: logic in
   foundations.js ([data-lang-toggle]). Content translations come later — selecting a language
   navigates with ?lang=xx as before. */
.um-nav__icons{ position:relative; }
.um-lang__menu{
  display:none; position:absolute; top:calc(100% + 12px); right:0; z-index:300;
  min-width:150px; padding:6px; background:#fdfaf1;
  border:1px solid rgba(139,111,61,.35); border-radius:8px;
  box-shadow:0 18px 40px -18px rgba(6,31,56,.35);
}
.um-lang__menu.is-open{ display:block; }
.um-lang__menu a{
  display:block; padding:8px 12px; color:#1a1814; text-decoration:none;
  font-family:'Newsreader',Georgia,serif; font-size:14px; letter-spacing:0; text-transform:none;
  border-radius:5px;
}
.um-lang__menu a:hover{ background:#f3ecd9; }
.um-lang__menu a.is-current{ color:#8b6f3d; font-style:italic; }
.um-lang__menu a.is-current::after{ content:"·"; margin-left:8px; }
.um-lang__soon{
  display:none; padding:6px 12px 4px; font-family:ui-monospace,'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8b6f3d;
  border-top:1px solid rgba(139,111,61,.22); margin-top:4px;
}
.um-lang__menu.is-soon .um-lang__soon{ display:block; }

/* ============================================================
   v=474 — modules list (/applications, ≤720px): "Module (1):" is typographically narrower than
   "Module (2):" (proportional figures), so each row's value started at a different x and wraps
   drifted. Fixed label column (grid) → every value starts at the same x and wraps hang under the
   value's first word. */
@media (max-width:720px){
  .um-page-applications .um-modlist > li{
    display:grid !important; grid-template-columns:100px 1fr !important;
    column-gap:12px !important; align-items:baseline !important;
  }
  .um-page-applications .um-modlist__label{ white-space:nowrap !important; }
}

/* v=476 — aside labels "Section" / "Subsections": the underline behaves like the main-heading
   .um-uline lines — the old full-width border-bottom (spanned the whole aside column) is replaced
   by a text-decoration underline that sits ONLY under the word, is THIN (0.75px, like the h2
   titles) and DISAPPEARS on hover. (The dead v=475 upright + v=476 uppercase + v=477 18px were
   consolidated away — sentence case / 20px / 600 / italic live in the v=557 block at file end.) */
.um-meta dt,
.um-section__aside:not(.um-section__aside--right) .um-meta dt{
  border-bottom:none !important;
  text-decoration-line:underline !important;
  text-decoration-color:#8b6f3d !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:6px !important;
  transition:text-decoration-color .18s ease !important;
}
.um-meta dt:hover,
.um-section__aside:not(.um-section__aside--right) .um-meta dt:hover{
  text-decoration-color:transparent !important;
}

/* v=478 — FIX (desktop): the grid bars (.umm-bar, e.g. "I | Programmes | UM – S2/200 …")
   had their text shoved to the TOP. v=461 set align-items:baseline globally on
   :not(.umm-bar--end) for the mobile hanging-wrap; on desktop the single-line text then
   sits at the top of the 56px bar (measured 9px top / 28px bottom). Restore vertical
   centring at >=721px only; the <=720px hanging-wrap tuned on mobile stays exactly as is.
   The end bar (.umm-bar--end) was already centred and is untouched. */
@media (min-width:721px){
  .umm-bar:not(.umm-bar--end){ align-items:center !important; }
}

/* v=479 — the home right-aside title "(I) The Public Area" (.um-rightblock-title): doctor
   wants it to match Section/Subsections — 18px + UPPERCASE. Its own rules (7756/7762,
   specificity 0,2,1) set 42px + text-transform:none; this equal-specificity block placed
   later wins. */
.um-section__aside--right .um-rightblock-title{
  font-size:18px !important;
  text-transform:uppercase !important;
}

/* v=480 — header logo (.um-topbar), per doctor:
   (1) the horizontal rule under "Ultima Memoria | UM" (.um-brand-mark::after): THINNER
       1px -> 0.75px (same as the .um-uline heading underlines), and its hover no longer
       WIPES (scaleX) but FADES OUT exactly like the main-heading underlines
       (opacity .75 -> 0 over .18s ease). Overrides the v=466 scaleX rest/hover.
   (2) the vertical divider "|" (.um-bm-pipe): THINNER 1.4px -> 1px. */
.um-topbar .um-brand-mark::after{
  height:0.75px !important;
  transform:none !important;
  opacity:.75 !important;
  transition:opacity .18s ease !important;
}
.um-topbar .um-brand:hover .um-brand-mark::after{
  transform:none !important;
  opacity:0 !important;
}
.um-topbar .um-bm-pipe{ width:1px !important; }

/* v=481 — sticky sub-nav (.um-stickybar), per doctor: a thin vertical divider BETWEEN each
   subsection item — the SAME 1px rgba(139,111,61,.20) rule as the existing one after the
   section label "Home" — plus a bit more, SYMMETRIC left/right spacing. Drop the 16px flex
   gap and use equal 14px item padding so every divider (section + items) gets equal air on
   both sides. Global: the bar is built the same on every page. */
.um-stickybar__inner{ gap:0 !important; }
.um-stickybar__section{ padding-right:14px !important; margin-right:0 !important; }
.um-stickybar__item{ padding-left:14px !important; padding-right:14px !important; }
.um-stickybar__item + .um-stickybar__item{ border-left:1px solid rgba(139,111,61,.20) !important; }

/* v=482 — the sticky item's hover/active underline was a full-width border-bottom, so it
   met the neighbouring vertical dividers at the bottom corner (they touched). Redraw it as
   an INSET ::after line that spans the TEXT only (left/right:14px = the item padding), so it
   stops 14px short of each divider — equal clearance both sides — and hide the old border. */
.um-stickybar__item{ position:relative; }
.um-stickybar__item::after{
  content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:1px;
  background:transparent; transition:background-color .15s ease; pointer-events:none;
}
.um-stickybar__item:hover::after,
.um-stickybar__item.is-active::after{ background:var(--bz1,#8b6f3d); }
.um-stickybar__item:hover,
.um-stickybar__item.is-active{ border-bottom-color:transparent !important; }

/* v=484 — integrate the doctor's official "Information Age" card (developer package) as HTML.
   Styles live in /css/aic-card.css (classes uic-*). The package desktop card is a fixed 734x580
   box; the site content column is ~710-746px, so on desktop scale the fixed card to the column
   width with a container query (stays pixel-faithful). On phones (<=734px) the package's own
   fluid grid layout takes over, no scaling. Replaces the earlier v=483 .umai hand-recreation. */
.aic-fit{ width:100%; }
@media (min-width:735px){
  .aic-fit{ position:relative; container-type:inline-size; aspect-ratio:734 / 580; overflow:hidden; }
  .aic-fit > .uic-information-card{ position:absolute; top:0; left:0; transform-origin:top left; transform:scale(calc(100cqw / 734px)); }
}
/* v=486 — Target Groups naslovi: riječi se smjenjuju CRNA / BRONZA / CRNA / BRONZA…
   Markup (target-groups.ejs): svaka riječ je svoj element — crna = <span class="um-uline">
   (USPRAVNA, ne kurziv), bronza = <em class="um-uline"> (kurziv, kao do sada). Pošto je
   svaka riječ zaseban .um-uline element, SVAKA dobija SVOJU liniju (razmak između riječi
   nije podvučen) + istu fade animaciju na hover. Ovdje samo: span riječi su ink-crne i
   uspravne, i OSTAJU crne na hover (globalno hover pravilo v=310 bi ih obojilo u bronzu). */
.um-h1 span.um-uline, .um-h2 span.um-uline{ color:#1a1814 !important; font-style:normal !important; }
.um-h1 span.um-uline:hover, .um-h2 span.um-uline:hover{ color:#1a1814 !important; }

/* v=487 — Target Groups POČECI PASUSA: broj na početku ("820 million", "3.597 billion"…)
   izdvojen u svoj element .um-key.um-knum → CRN (#1a1814), USPRAVAN (ne kurziv, BEZ bolda), a
   njegova tanka linija ispod je ODVOJENA od linije ostatka fraze (razmak između elemenata
   nije podvučen) — isti princip kao naslovi u v=486. Linija + hover animacija ostaju iste
   (0.5px bronza iz v=356); broj OSTAJE crn i na hover. Id-lista mora pratiti v=356 da bi
   je nadjačala (id specifičnost). */
#g-primary .um-key.um-knum, #g-secondary .um-key.um-knum, #g-university .um-key.um-knum,
#g-working .um-key.um-knum, #g-jobseekers .um-key.um-knum, #g-seniors .um-key.um-knum,
#g-chess .um-key.um-knum, #g-athletes .um-key.um-knum, #g-musicians .um-key.um-knum,
#g-actors .um-key.um-knum, #g-quran .um-key.um-knum, #g-educators .um-key.um-knum{
  color:#1a1814 !important;
  font-style:normal !important;
  font-weight:400 !important;
}
#g-primary .um-key.um-knum:hover, #g-secondary .um-key.um-knum:hover, #g-university .um-key.um-knum:hover,
#g-working .um-key.um-knum:hover, #g-jobseekers .um-key.um-knum:hover, #g-seniors .um-key.um-knum:hover,
#g-chess .um-key.um-knum:hover, #g-athletes .um-key.um-knum:hover, #g-musicians .um-key.um-knum:hover,
#g-actors .um-key.um-knum:hover, #g-quran .um-key.um-knum:hover, #g-educators .um-key.um-knum:hover{
  color:#1a1814 !important;
}

/* v=488 — RE-ADD (originally appended as v=484+v=485, lost in a concurrent overwrite of this
   file): sticky sub-nav (.um-stickybar) vertical dividers IDENTICAL to the main-menu dividers
   AND all the SAME height.
   (a) colour/thickness = main header nav dividers (v=75): 1px solid var(--bz2,#a88955) full
       bronze (was faint rgba(139,111,61,.20)).
   (b) equal height: the section divider ("Home |") was a 20px border on the __section box,
       item dividers were 27px borders on padded item boxes, 3px higher — uneven. Kill the
       borders; draw EVERY divider as a 1px pseudo-element with ONE fixed height (20px),
       vertically centred on its box (all boxes share the same visual centre). One number to
       tune: height below. */
.um-stickybar__section{ border-right:0 !important; position:relative; }
.um-stickybar__item + .um-stickybar__item{ border-left:0 !important; }
.um-stickybar__section::after,
.um-stickybar__item + .um-stickybar__item::before{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--bz2,#a88955); pointer-events:none;
}
.um-stickybar__section::after{ right:0; }
.um-stickybar__item + .um-stickybar__item::before{ left:0; }

/* v=489 — VELIKI brojevi sekcija u LIJEVOM aside-u (.um-section__num, 64px "8.1" itd., sve
   stranice): (1) tanka linija ISPOD broja kao ispod naslova (.um-uline stil: 0.75px bronza,
   7px odmak, samo širina teksta — ne cijeli blok); (2) hover animacija kao ključne riječi u
   TEKSTU (.um-key v=356): POJAVI se topla boja — pozadina rgba(139,111,61,.05) + broj potamni
   u #6b5a2f, mekani .18s prelaz. Desni aside broj je ionako skriven (v=345-era pravilo). */
.um-section__aside:not(.um-section__aside--right) .um-section__num{
  text-decoration-line:underline !important;
  text-decoration-color:#8b6f3d !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:7px !important;
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease, text-decoration-color .18s ease;
}
.um-section__aside:not(.um-section__aside--right) .um-section__num:hover{
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05);
}

/* v=490 — hover traka na velikom lijevom broju (v=489): još malo VISINE — ISPOD broja je bilo
   dobro, sad ISTO toliko zraka i IZNAD vrha broja. padding-top + isti negativni margin-top:
   broj ostaje tačno gdje je bio, samo se traka (pozadina) proširi prema gore. */
.um-section__aside:not(.um-section__aside--right) .um-section__num{
  padding-top:10px !important;
  margin-top:-10px !important;
}

/* v=491 — po doktoru: INVERT animacije velikog lijevog broja (v=489/490). "Animacija" (topla
   pozadinska traka + tamnija bronza #6b5a2f) sada STOJI STALNO u mirnom stanju, a kada dođeš
   mišem na broj — UGASI SE (čista bronza #8b6f3d, bez trake), istim mekim .18s prelazom.
   Isti princip kao v=299 invert naslovnih linija (vidljivo → gasi se na hover). */
.um-section__aside:not(.um-section__aside--right) .um-section__num{
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05);
}
.um-section__aside:not(.um-section__aside--right) .um-section__num:hover{
  color:#8b6f3d !important;
  background-color:transparent;
}

/* v=489 — home 1.1 leadins "The Public Area" / "The Protected Area" (#s-welcome .um-leadin):
   per doctor, the underline now STAYS and LIGHTS UP on hover like the body key terms (.um-key),
   instead of fading out (was v=425). Rest keeps the 0.5px bronze line; hover darkens the text +
   the line and adds the same warm tint as .um-key. */
#s-welcome .um-p .um-leadin .um-lead-rom,
#s-welcome .um-p .um-leadin .um-lead-txt{ transition:border-color .18s ease, color .18s ease, background-color .18s ease !important; }
#s-welcome .um-p .um-leadin .um-lead-rom:hover,
#s-welcome .um-p .um-leadin .um-lead-txt:hover{
  border-bottom-color:rgba(139,111,61,0.95) !important;
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05) !important;
}

/* v=492 — SAMO Target Groups: note u bočnim asideovima ("820 million worldwide"…), LIJEVO i
   DESNO — (1) tanka linija ISPOD teksta kao ključne riječi u tekstu (0.5px, bronza 45%,
   text-decoration pa prati samo širinu teksta, ne cijeli blok; postojeća gornja crta iznad
   note ostaje); (2) na hover se UPALI naša animacija kao u tekstu: topla pozadina
   rgba(139,111,61,.05) + boja potamni u #6b5a2f + linija ojača na 95%. Nazivi u asideovima
   usklađeni s naslovima podsekcija u target-groups.ejs (8.8/8.9/8.10/8.12 + hero liste). */
#g-primary .um-section__note, #g-secondary .um-section__note, #g-university .um-section__note,
#g-working .um-section__note, #g-jobseekers .um-section__note, #g-seniors .um-section__note,
#g-chess .um-section__note, #g-athletes .um-section__note, #g-musicians .um-section__note,
#g-actors .um-section__note, #g-quran .um-section__note, #g-educators .um-section__note{
  text-decoration-line:underline;
  text-decoration-color:rgba(139,111,61,0.45);
  text-decoration-thickness:0.5px;
  text-underline-offset:4px;
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease, text-decoration-color .18s ease;
}
#g-primary .um-section__note:hover, #g-secondary .um-section__note:hover, #g-university .um-section__note:hover,
#g-working .um-section__note:hover, #g-jobseekers .um-section__note:hover, #g-seniors .um-section__note:hover,
#g-chess .um-section__note:hover, #g-athletes .um-section__note:hover, #g-musicians .um-section__note:hover,
#g-actors .um-section__note:hover, #g-quran .um-section__note:hover, #g-educators .um-section__note:hover{
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05);
  text-decoration-color:rgba(139,111,61,0.95);
}

/* v=493 — UM-MP konfigurator (#um-mp-form-section), intro pasus: doktorove žute riječi
   markirane kao .um-key u practice-preview.ejs ("the level of difficulty", "the form",
   "topic", "the type", "start", "the practical application", "training", "exercise",
   "test"). Global daje bronzu+kurziv, ali TANKA CRTA + HOVER animacija su scoped po
   sekcijama — dodano ovdje po referentnom obrascu (v=357): 0.5px linija 45% bronze,
   hover = tamnija bronza #6b5a2f + linija na 95% + topla pozadina. */
#um-mp-form-section .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#um-mp-form-section .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05);
}

/* v=494 — traka "PRACTICAL APPLICATIONS | TRAINING | …" (.um-subhead): svaki pojam zamotan
   u <span class="um-shk"> (applications.ejs vrh + practice-preview.ejs vrh + konfigurator).
   SVAKI pojam ima SVOJU tanku liniju ispod (0.5px bronza 45%, pipe separatori | NISU
   podvučeni) i na hover se UPALI naša animacija kao u tekstu: tamnija bronza #6b5a2f +
   linija na 95% + topla pozadina. */
.um-subhead .um-shk{
  border-bottom:0.5px solid rgba(139,111,61,0.45);
  padding-bottom:1px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.um-subhead .um-shk:hover{
  color:#6b5a2f;
  border-bottom-color:rgba(139,111,61,0.95);
  background-color:rgba(139,111,61,0.05);
}

/* v=490 — chess module: featured game viewer (Edward Lasker – George A. Thomas, London 1912).
   Game title + rule ABOVE the board; the game record sits to the RIGHT of the board at board
   height; the board is shrunk to 360px so both fit the content column. Stacks on phones. */
.umchess-gamehead{ margin-top:26px; }
.umchess-gametitle{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:21px; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink2,#3a342b); margin:0; line-height:1.25; }
.umchess-gametitle__meta{ white-space:nowrap; }
.umchess-gamesub{ font-family:var(--read,'Newsreader',Georgia,serif); font-style:italic; font-size:15px;
  color:var(--ink3,#6b6253); margin:2px 0 0; }
.umchess-game{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px; }
.umchess-panel--game{ margin:0 !important; }
.umchess-panel--game .umchess-stage,
.umchess-panel--game .umchess-stage .umchess-board{ --umc:360px !important; --lab:22px !important; }
.umchess-record{ list-style:none; margin:0; padding:0; flex:1 1 210px; min-width:190px;
  font-family:var(--read,'Newsreader',Georgia,serif); font-size:14px; color:var(--ink2,#3a342b); }
.umchess-record > li{ display:flex; align-items:baseline; gap:10px; padding:0.5px 0; line-height:1.32;
  border-bottom:1px solid rgba(139,111,61,.12); }
.umchess-record > li:last-child{ border-bottom:none; }
.umchess-record__n{ font-family:var(--mono,'IBM Plex Mono',monospace); font-size:12px; color:var(--ink3,#6b6253);
  min-width:2.1em; text-align:right; flex:0 0 auto; }
.umchess-record__end{ font-style:italic; color:var(--ink3,#6b6253); margin-top:8px; padding-top:9px !important; }
@media (max-width:720px){
  .umchess-game{ flex-direction:column; gap:16px; }
  .umchess-panel--game .umchess-stage,
  .umchess-panel--game .umchess-stage .umchess-board{ --umc:min(300px,78vw) !important; --lab:20px !important; }
  .umchess-record{ width:100%; flex-basis:auto; }
}

/* v=495 — šah: naslov partije "Edward Lasker / George A. Thomas [ 1912 | London | 1:0 ]" +
   "(A game in 18 moves)" → BRONZA, a svaki pojam zamotan u .um-shk (_chess.ejs) dobija svoju
   tanku liniju + upali-se hover, kao traka v=494. Separatori ( / | [ ] i zagrade ) NISU
   podvučeni. Ujedno .um-shk postaje GLOBALNA klasa (v=494 je bila scoped na .um-subhead) —
   ista pravila, upotrebljiva svuda ubuduće. */
.umchess-gametitle{ color:#8b6f3d !important; }
.umchess-gamesub{ color:#8b6f3d !important; }
.um-shk{
  border-bottom:0.5px solid rgba(139,111,61,0.45);
  padding-bottom:1px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.um-shk:hover{
  color:#6b5a2f;
  border-bottom-color:rgba(139,111,61,0.95);
  background-color:rgba(139,111,61,0.05);
}

/* v=496 — chess game record: hover lights up like body key terms; click plays that move.
   Active move highlighted; the last move's from/to squares get a bronze ring. */
.umchess-record > li{ cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.umchess-record > li.umchess-record__end{ cursor:default; }
.umchess-record > li:not(.umchess-record__end):hover{ background-color:rgba(139,111,61,0.07); border-bottom-color:rgba(139,111,61,0.55); color:#6b5a2f; }
.umchess-record > li.is-current{ background-color:rgba(139,111,61,0.13); color:#6b5a2f; }
.umchess-record > li.is-current .umchess-record__n{ color:#8b6f3d; }
.umchess-sq.is-played{ box-shadow:inset 0 0 0 3px rgba(139,111,61,0.6); }
.umchess-btn--play{ font-weight:600 !important; }

/* v=496 — system 2.2 (#sec-learning), oba nabrajanja (Memory Conception 01–10 + Extract from
   the Summary 01–04): linija IZNAD već postoji (border-bottom naslova bloka .um-block-head,
   1px rgba(139,111,61,.28)); dodata IDENTIČNA linija ISPOD svake liste, sa ~14px zraka od
   zadnje stavke (isto koliko naslov ima do prve) — pa je svako nabrajanje uokvireno gore i
   dole kao na ostalim stranicama. */
#sec-learning .um-numlist{
  border-bottom:1px solid rgba(139,111,61,0.28);
  padding-bottom:14px;
}

/* v=497 — system 2.2 nabrajanja: VERTIKALNI RAZMAK linija↔lista IZJEDNAČEN s home
   "Memory Performance" listom (.um-perf-list ima liniju na listi s padding 20px, mjereno:
   linija→prva stavka 20px, zadnja stavka→linija 20px; korak stavki je već isti, 29px).
   Kod nas je bilo 14/15px (v=496 + margin naslova) → sada oba na 20px. */
#sec-learning .um-block-head{ margin-bottom:20px !important; }
#sec-learning .um-numlist{ padding-bottom:20px; }

/* v=497 — traka "Practical Applications | Training | …" (.um-subhead--upright, page top +
   configurator): per doctor, BLACK letters + Title Case (text changed in the EJS). The thin
   underline under each term and the light-up hover (v=494) stay. Scoped to --upright so the
   chess game title (also .um-shk) keeps its bronze. */
.um-subhead--upright{ color:#1a1814 !important; }

/* v=498 — system 2.2 nabrajanja = TAČNA home struktura (.um-perf-list, mjereno na živoj
   stranici: naslov → 20px → linija → 21px → stavke → 21px → linija → 24px dalje). Do sada je
   linija bila border-bottom NASLOVA (zalijepljena uz tekst, 6px) — a na home linija stoji na
   SAMOJ LISTI, odvojena i od naslova i od stavki. Preslikano: naslovu se linija gasi, lista
   dobija border gore I dole s padding 20px 0. Važi za OBA nabrajanja (01–10 i 01–04). */
#sec-learning .um-block-head{ border-bottom:none !important; padding-bottom:0 !important; margin-bottom:20px !important; }
#sec-learning .um-numlist{
  border-top:1px solid rgba(139,111,61,0.28);
  border-bottom:1px solid rgba(139,111,61,0.28);
  padding:20px 0;
  margin:0 0 24px;
}

/* v=498 — strip "Practical Applications | …" (.um-subhead--upright): back to ALL CAPS per
   doctor. text-transform keeps the source Title Case but renders uppercase; black colour
   (v=497), per-term underline + light-up hover (v=494) all stay. */
.um-subhead--upright{ text-transform:uppercase !important; }

/* v=499 — system numbered lists: even the vertical rhythm around the horizontal rules. The
   gap from a list's bottom rule to the NEXT section heading was 40px while every other
   rule-gap is 20px, so the heading sat 40px above / 20px below its two rules (off-centre).
   Match it to 20px so every rule has equal 20px breathing room and the heading is centred
   between its rules. Only lists + the heading that directly follows a list are touched. */
.um-numlist{ margin-bottom:20px !important; }
.um-numlist + .um-block-head{ margin-top:20px !important; }

/* v=500 — home + system framed lists: bring the rule spacing up to the site-wide 36px
   equidistant (was 20px). Each framing rule (list border-top/bottom) now has 36px above +
   36px below, matching the section dividers and the in-text hr dividers. */
/* home 1.3 Memory Performance list (.um-perf-list) */
.um-perf-list{ padding-top:36px !important; padding-bottom:36px !important; margin-top:36px !important; margin-bottom:36px !important; }
/* system 2.2 / 2.4 numbered lists */
#sec-learning .um-numlist, #sec-performance .um-numlist{ padding-top:36px !important; padding-bottom:36px !important; margin-bottom:36px !important; }
#sec-learning .um-block-head, #sec-performance .um-block-head{ margin-bottom:36px !important; }
#sec-learning .um-numlist + .um-block-head, #sec-performance .um-numlist + .um-block-head{ margin-top:36px !important; }

/* v=500 cont. — home 1.3 first perf-list sits right after the mp-title, whose 0,3,0 rule pinned
   its margin-top to 20px; lift to 36px so its top rule is 36px equidistant too. */
#s-practice .um-mp-title + .um-perf-list{ margin-top:36px !important; }

/* v=501 — memory 3.4 (#m-requirements) index list (.um-idx "What must a high-performing memory
   system be capable of?"): 36px equidistant rule spacing like the home/system framed lists and
   the section dividers (was 20px). */
#m-requirements .um-idx{ padding-top:36px !important; padding-bottom:36px !important; margin-top:36px !important; margin-bottom:36px !important; }

/* v=502 — the remaining framed in-text lists → the site-wide 36px equidistant rule spacing
   (were: method .um-list--phases / .um-list--codes 14/18px; evidence .um-list 20px). Now every
   framed list on the site (home .um-perf-list, system .um-numlist, memory .um-idx, method,
   evidence) has 36px above + below each rule, matching the section dividers + in-text hr's. */
#me-process .um-list--phases,
#me-entrance .um-list--codes,
#ev-scientific .um-list{
  padding-top:36px !important; padding-bottom:36px !important;
  margin-top:36px !important; margin-bottom:36px !important;
}

/* v=503 — new module grid images (060726): the 9 baked designs are 6405×5673 (ratio 1.1290),
   not the old 6405×5977. Scope the new ratio to ONLY the module cards (src contains /modules/umm-)
   so object-fit:cover shows the full baked design with no crop. Programmes (preview-s*) and Areas
   (areas/*) cards are NOT touched — they stay at their 6405/5977 ratio. */
.umm-img-wrap:has(img[src*="/modules/umm-"]){ aspect-ratio:6405/5673 !important; }

/* v=504 — Chess board (module 07): Dr. Freiberg's numbered board (7.08 NEW 060726).
   Each of the 64 squares carries a 1–64 index (column-major, bottom-up: A1=1…H8=64) in a
   thin-bordered box tucked into the top-left corner. Geometry matched 1:1 from the SVG:
   box = 106.31/389.8 ≈ 27.3% wide × 70.87/389.8 ≈ 18.2% tall of the cell, flush to the corner,
   hairline #3B352C border, number #3B352C. The board is a CSS grid so the spacing is
   mathematically even at every size (the whole point). Coordinates stay only on the 4 outer
   strips — the old inline rank/file labels were dropped in foundations.js build(). */
.umchess-sq .umchess-num{
  position:absolute; top:0; left:0;
  width:27.3%; height:24%;   /* width flush to SVG (106.31/389.8); height nudged from 18.2% so a
                                legible number still breathes on the small (300–360px) live board */
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border:0.5px solid #3B352C;   /* hairline box (Dr.: thinner) */
  color:#3B352C;
  font-family:var(--read,'Newsreader',Georgia,serif);
  font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(6.5px, calc(var(--umc, 480px) / 8 * 0.15), 18px);
  line-height:1;
  letter-spacing:.02em;
  pointer-events:none;
  z-index:1;
}
/* push the A–H / 1–8 edge labels off the board's inner frame (Dr.: they sat too close) */
.umchess-stage{ gap:7px !important; }
/* the dragged/played piece must sit above the corner index */
.umchess-sq .umchess-pc{ position:relative; z-index:2; }

/* v=505 — Chess game layout (Dr.): the record used flex:1 1 210px, i.e. it GREW to eat the whole
   ~734px column → too wide, long underlines, board left needlessly small. Rebalance within the
   column: bigger board, record fixed-narrow + pinned right (its border-bottom rules narrow with
   it automatically), and a touch more air between record lines. Desktop only — mobile stacks. */
@media (min-width:721px){
  .umchess-game{ gap:22px !important; }
  .umchess-panel--game .umchess-stage,
  .umchess-panel--game .umchess-stage .umchess-board{ --umc:400px !important; }
  .umchess-record{ flex:0 0 186px !important; min-width:0 !important; margin-left:auto !important; }
}
.umchess-record > li{ padding:2.5px 0 !important; line-height:1.36 !important; }

/* v=506 — Chess board breathing room (Dr.): match the site-wide 36px equidistant rule spacing
   (same as the module list hr margin:36px 0 in practice-preview) — 36px above the board (off the
   horizontal rule) and 36px below (before the Play/Reset/Clear bar). Set on both sides so the gap
   is exactly 36px regardless of margin-collapsing. */
.umchess-gamerule{ margin-bottom:36px !important; }
.umchess-game{ margin-bottom:0 !important; }
.umchess-bar{ margin-top:36px !important; }
/* same 36px gap below the bar, before the Moves log (was 16px) */
.umchess-moves{ margin-top:36px !important; }

/* v=507 — Admission page re-skin: foundations-styled result / payment / dev-shortcut blocks
   (replaces the old Bootstrap admission markup; page now lives in the foundations shell). */
.um-adm-levels{ list-style:none; margin:20px 0 26px; padding:0; }
.um-adm-level{ display:flex; align-items:baseline; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(139,111,61,.14);
  font-family:var(--read,'Newsreader',Georgia,serif); font-size:17px; color:var(--ink3,#6b6253); }
.um-adm-level:last-child{ border-bottom:none; }
.um-adm-level__mark{ min-width:1.1em; color:var(--bz1,#8b6f3d); font-weight:600; }
.um-adm-level.is-admitted{ color:var(--ink,#1a1814); }
.um-adm-level.is-admitted .um-adm-level__label{ color:var(--bz1,#8b6f3d); font-style:italic; }
.um-adm-result{ margin-top:6px; padding:14px 20px;
  border:1px solid var(--bz1,#8b6f3d); border-left:3px solid var(--bz1,#8b6f3d); background:#efe9d7;
  font-family:var(--read,'Newsreader',Georgia,serif); font-size:16px; color:var(--ink2,#3a342b); }
.um-adm-result strong{ color:var(--ink,#1a1814); }
.um-adm-result .um-key,
.um-adm-status .um-key{
  color:var(--bz1,#8b6f3d) !important; font-style:italic !important; font-weight:400 !important;
  text-decoration:none !important; border-bottom:.5px solid rgba(139,111,61,.45) !important;
  padding-bottom:1px; cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease; }
.um-adm-result .um-key:hover,
.um-adm-status .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,.95) !important;
  background-color:rgba(139,111,61,.05); }
.um-adm-status{ margin-top:30px !important; }

.um-adm-pay{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:26px; margin:24px 0 6px;
  padding:22px 24px; border:1px solid rgba(139,111,61,.28); background:var(--paper4,#fdfaf1); }
.um-adm-pay__field{ display:flex; flex-direction:column; gap:6px; }
.um-adm-pay__label{ font-family:var(--mono,'IBM Plex Mono',monospace); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3,#6b6253); }
.um-adm-pay__value{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:23px; color:var(--ink,#1a1814); }
.um-adm-pay__value--charge{ color:var(--bz1,#8b6f3d); font-weight:600; font-variant-numeric:lining-nums tabular-nums; }
.um-adm-pay__action{ margin-left:auto; }
.um-adm-pay__note{ font-family:var(--read,'Newsreader',Georgia,serif); font-style:italic; font-size:14px; color:var(--ink3,#6b6253); max-width:26ch; }

.um-adm-dev{ margin-top:18px; padding:16px 20px; border:1px dashed rgba(139,111,61,.45); background:rgba(139,111,61,.05); }
.um-adm-dev__label{ font-family:var(--mono,'IBM Plex Mono',monospace); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3,#6b6253); margin:0 0 12px; }
.um-adm-dev__row{ display:flex; flex-wrap:wrap; gap:12px; }
.um-adm-dev .um-btn{ border-color:rgba(139,111,61,.5); color:var(--ink2,#3a342b); background:#fff; }
.um-adm-dev .um-btn:hover{ background:var(--bz1,#8b6f3d); color:#f5e9c8; border-color:var(--bz1,#8b6f3d); }
@media (max-width:640px){
  .um-adm-pay{ gap:16px; }
  .um-adm-pay__action{ margin-left:0; width:100%; }
  .um-adm-pay__action .um-btn{ width:100%; justify-content:center; }
}
/* v=499 — moduli: NASTAVAK naziva iza | ("C – D – E – F – G – A – H – C", "A, B, C…", "4 – 16
   – 36 – 64"…) zamotan u <span class="um-uline um-mtc-band"> (svih 9 modula). um-uline mu daje
   ISTU liniju ispod kao riječi naslova (i njen fade na hover); um-mtc-band = ona TRAJNA topla
   traka kao na velikim aside brojevima (v=491) — STOJI stalno, na hover se aktivira/ugasi.
   Padding+negativni margin: traka malo šira od teksta (kao selekcija), layout se ne pomjera.
   Cijev | prije nastavka NIJE u traci. Tekst ostaje ink (v=486 span.um-uline pravilo). */
.um-h2 .um-mtc-band{
  background-color:rgba(139,111,61,0.05);
  padding:0.10em 0.18em;
  margin:-0.10em -0.18em;
  transition:background-color .18s ease;
}
.um-h2 .um-mtc-band:hover{ background-color:transparent; }

/* v=508 — nastavak naziva u modulima (.um-mtc-band, v=499): LINIJA ispod OSTAJE STALNO —
   ne gasi se na hover (globalno .um-h2 .um-uline:hover pravilo ju je gasilo). Na hover se
   mijenja SAMO pozadina (traka se ugasi); linija konstantno bronza. */
.um-h2 .um-mtc-band,
.um-h2 .um-mtc-band:hover{ text-decoration-color:#8b6f3d !important; }

/* v=509 — Checkout page (foundations shell around the Stripe embed).
   NB: v=508 was taken by a parallel session (.um-mtc-band) — this block is v=509. */
.um-checkout-note{ margin:0 0 22px; padding:14px 20px;
  border:1px solid var(--bz1,#8b6f3d); border-left:3px solid var(--bz1,#8b6f3d); background:#efe9d7;
  font-family:var(--read,'Newsreader',Georgia,serif); font-size:15px; line-height:1.5; color:var(--ink2,#3a342b); }
.um-checkout-note strong{ color:var(--ink,#1a1814); font-variant-numeric:lining-nums tabular-nums; }
.um-checkout-embed{ margin-top:6px; }
.um-checkout-embed #checkout{ min-height:120px; }
.um-checkout-after{ margin-top:24px; }

/* v=510 — Error page (401/404/500) in the foundations shell: centered panel */
.um-err__body{ text-align:center; max-width:640px; margin:56px auto; padding:40px 24px; }
.um-err__body .um-eyebrow{ display:inline-block; }
.um-err__code{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:104px; line-height:1; color:var(--bz1,#8b6f3d); margin:10px 0 18px; font-variant-numeric:lining-nums; }
.um-err__msg{ margin:0 auto 12px; }
.um-err__return{ margin:0 auto 28px; color:var(--ink3,#6b6253); }
.um-err__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.um-err__actions .um-btn{ border-color:rgba(139,111,61,.5); color:var(--ink2,#3a342b); background:#fff; }
.um-err__actions .um-btn:hover{ background:var(--bz1,#8b6f3d); color:#f5e9c8; border-color:var(--bz1,#8b6f3d); }

/* v=511 — šahovska dugmad (.umchess-btn): hover boja iz CRNE (--ink #1a1814) u TAMNO PLAVU
   (--um-navy #061f38, ista kao programmes moduli) — doktor ne želi crnu. */
.umchess-btn:hover{ background:#061f38 !important; }

/* v=512 — module-preview 100-Parameter grid (/practice/test/N#module, .um-100p-* in
   practice-preview.ejs). Dr.'s dialed values restored + latest tweaks: compact number bands
   (2px air, numbers 8px), 70px answer cells, 2px gap; frame lines a touch thicker + darker bronze. */
.um-100p-grid{ gap:2px !important; margin:2px 0 !important; }
.um-100p-h{ padding:3px 0 1px !important; line-height:1 !important; min-height:0 !important; font-size:8px !important; }
.um-100p-cell{ aspect-ratio:auto !important; height:70px !important; }
/* number / column-header cells (01–08, A1–H8) → bronze fill, light numbers, vertically centred,
   and NAVY outer lines (a bronze border on the bronze fill was invisible). The navy sum cells
   keep their bronze border — untouched. */
.um-100p-h:not(.um-100p-h--sum){ background:#8b6f3d !important; color:#f3ecd9 !important;
  align-items:center !important; justify-content:center !important; border-color:#061f38 !important; }
/* only the SMALL sum-header cells (N/3.35, SC00) → programmes navy; the big C1/C2 & SC result
   cells stay as they were (Dr.: don't colour the big ones) */
.um-100p-h--sum{ background:#061f38 !important; color:#eadfc6 !important; }
/* top + bottom bars → 48px tall, programmes navy fill, light text, sat 2px off the grid */
.um-100p-bar{ background:#061f38 !important; height:48px !important; align-items:center !important; padding:0 20px !important; }
.um-100p-bar__suffix,
.um-100p-bar__title,
.um-100p-bar__sub{ color:#eadfc6 !important; }
/* borders left as the original 1px bronze (Dr.: keep the lines from the first version) */

/* Two grid versions render in the DOM (decorative). Desktop shows the 8-wide (per-8 sums);
   mobile shows the 4-wide (4 numbers + own result per row). Toggle here. */
.um-100p-grid--mob{ display:none !important; }
@media (max-width: 640px){
  .um-100p-grid--desk{ display:none !important; }
  .um-100p-grid--mob{ display:grid !important; grid-template-columns: repeat(4, 1fr) minmax(80px, 96px) !important; }
  /* bars grow to fit the wrapped title (the fixed 48px clipped it on phones) */
  .um-100p-bar{ height:auto !important; min-height:48px !important; align-items:flex-start !important; padding:8px 14px !important; }
}

/* v=513 — home cjenovnik (.um-perf-prices "Twofold … days | S2/200"): kod PRIBLIŽEN "days" i
   razmak oko separatora | JEDNAK lijevo i desno. Bilo: desc→| 66px (v=73), |→kod 6px (asimetrično,
   kod daleko). Sada: OBA 18px → | jednako diše, kod hvata days. Vertikalne linije (visina 22px),
   poravnanje kolona i raspored ostaju isti (dijeljeni grid). */
.um-perf-desc{ padding-right:18px !important; }
.um-perf-code{ margin-left:18px !important; }
.um-perf-prices > li:last-child .um-perf-code{ margin-left:18px !important; }

/* v=514 — FIX v=513: prošli selektor (.um-perf-desc, spec 0,1,0) je gubio od ranijeg
   .um-perf-prices .um-perf-desc (0,2,0 = 66px) — zato se lijeva strana NIJE pomjerila. Sada
   isti (0,2,0) selektor + poništen padding/margin na kodu da ne bude dupli razmak. Rezultat:
   VIDLJIVI razmak days→| == |→kod == 20px (na najširem redu; kolone ostaju poravnate). */
.um-perf-prices .um-perf-desc{ padding-right:20px !important; }
.um-perf-prices .um-perf-code{ padding-left:20px !important; margin-left:0 !important; }
.um-perf-prices > li:last-child .um-perf-code{ padding-left:20px !important; margin-left:0 !important; }

/* v=515 — method 4.1 (#me-process): sve ">" liste (.um-list, .um-list--phases) POČINJU od
   početka teksta — uklonjena uvlaka (padding-left:40px iz linije 14483). Sada ">" marker sjeda
   na lijevu ivicu pasusa (kao i .um-p tekst), stavka ima svojih 22px do teksta (iz .um-list>li).
   Vertikalni okvir (36px + linije na --phases) netaknut. */
#me-process .um-list{ padding-left:0 !important; }

/* v=516 — ai-memory 9.6 (#ai-partnership): the emphasised paragraph .um-aiUline carries a
   full-width continuous underline (v=255, was 1px dark ink). Doctor wants it kept the same
   continuous full-width line + 5px offset, only (a) thinned to the hairline weight of the
   key-term underlines that sit permanently under the words, and (b) recoloured to bronze so it
   matches those key-term lines exactly (border-bottom:0.5px rgba(139,111,61,0.45), v=358). So drop
   the decoration thickness 1px -> 0.5px and swap the ink colour for that bronze. */
#ai-partnership .um-aiUline{
  text-decoration-thickness:0.5px !important;
  text-decoration-color:rgba(139,111,61,0.45) !important;
}

/* v=517 — ai-memory 9.6 (#ai-partnership): frame the .um-aiPartnerCap caption ("Ultima Memoria (UM)
   Strengthens the Human Capability to Engage with Artificial Intelligence (AI)") with the same thin
   bronze horizontal divider rules + 36px equidistant rhythm used on home 1.3's framed list
   (rgba(139,111,61,0.28), padding/margin 36px, v=500). A rule above and below, 36px inside and out,
   so the caption reads as a calm divider band — more harmony/legibility, per doctor. */
#ai-partnership .um-aiPartnerCap{
  border-top:1px solid rgba(139,111,61,0.28) !important;
  border-bottom:1px solid rgba(139,111,61,0.28) !important;
  padding-top:36px !important;
  padding-bottom:36px !important;
  margin-top:36px !important;
  margin-bottom:36px !important;
}

/* v=518 — Numbers module (practice/test/:id → _digits): the SVG's own tiny "0-1-2…9" legend row
   is cropped out (SVG1 viewBox now starts at y=672, same as SVG2) and replaced by a REAL text
   legend sized to the grid digits, with a bronze hover band. Dr.'s SVG grid glyphs untouched. */
.um-numlegend{
  max-width:880px; margin:0 auto 22px; padding:14px 4px 12px;
  border-top:1px solid rgba(139,111,61,.32); border-bottom:1px solid rgba(139,111,61,.32);
  font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:42px; line-height:1;
  color:#8b6f3d; text-align:center; letter-spacing:.02em; word-spacing:.04em; white-space:nowrap;
}
.um-numlegend > span{
  position:relative; display:inline-block; padding:1px 3px 7px; cursor:default;
  transition:color .18s ease;
}
.um-numlegend > span::after{
  content:""; position:absolute; left:8%; right:8%; bottom:1px; height:3px;
  background:#8b6f3d; transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.7,.3,1.3);
}
.um-numlegend > span:hover{ color:#6f5730; }
.um-numlegend > span:hover::after{ transform:scaleX(1); }
@media (max-width:640px){
  .um-numlegend{ font-size:26px; padding:10px 2px 9px; }
}

/* v=519 — ai-memory 9.2–9.6 h2 titles: selected upright parts ("Artificial Intelligence (AI)",
   "Technological Support", "Cognitive Outsourcing", "Attention & Judgement", "Ultima Memoria (UM)")
   are wrapped in <span class="um-uline um-mtc-band"> so they get the SAME treatment as the module
   title continuations — a thin permanent underline + the always-on warm band that clears on hover
   (.um-mtc-band, v=499/508). Per doctor these now read fully BRONZE: both the TEXT and the underline
   go #8b6f3d (matching the em.um-uline terms like "Cognitive Assistance" in the same headings),
   overriding the v=486 ink text-colour. Everything else stays — 0.75px line, upright form, the warm
   band + hover-clear. Scoped to the ai-* section-ids so module titles keep their own colour. */
#ai-abundance .um-h2 .um-mtc-band, #ai-abundance .um-h2 .um-mtc-band:hover,
#ai-assistance .um-h2 .um-mtc-band, #ai-assistance .um-h2 .um-mtc-band:hover,
#ai-opportunities .um-h2 .um-mtc-band, #ai-opportunities .um-h2 .um-mtc-band:hover,
#ai-risks .um-h2 .um-mtc-band, #ai-risks .um-h2 .um-mtc-band:hover,
#ai-techage .um-h2 .um-mtc-band, #ai-techage .um-h2 .um-mtc-band:hover,
#ai-partnership .um-h2 .um-mtc-band, #ai-partnership .um-h2 .um-mtc-band:hover{
  color:#8b6f3d !important;
  text-decoration-color:#8b6f3d !important;
}

/* v=520 — ai-memory hero H1 "Technology": doctor wants the same always-on warm band + hover-clear on
   EVERY bronze underlined heading word on this page, the main title included. The band base (v=499)
   and the "line stays on hover" (v=508) rules are .um-h2-scoped, so mirror them for .um-h1. The em
   stays bronze italic (v=341 gives the 0.75px/7px line); on hover the warm band clears and the bronze
   line now STAYS (overriding v=341's fade-to-transparent). Generic .um-h1 .um-mtc-band, but only
   "Technology" opts in via the class here, so other pages' H1s are untouched. */
.um-h1 .um-mtc-band{
  background-color:rgba(139,111,61,0.05);
  padding:0.10em 0.18em;
  margin:-0.10em -0.18em;
  transition:background-color .18s ease;
}
.um-h1 .um-mtc-band:hover{ background-color:transparent; }
.um-h1 .um-mtc-band,
.um-h1 .um-mtc-band:hover{ text-decoration-color:#8b6f3d !important; }

/* v=521 — /health page (Ultima Memoria & Health): condition list + reference blocks (foundations tone) */
.um-hlist{ list-style:none; margin:10px 0 0; padding:0; }
.um-hlist li{ font-family:'Newsreader',Georgia,serif; font-size:20px; line-height:1.5; color:#29251d;
  padding:11px 2px; border-bottom:1px solid rgba(139,111,61,.28); }
.um-hlist li:first-child{ border-top:1px solid rgba(139,111,61,.28); }
.um-hlist__sub{ color:#8b6f3d; font-style:italic; font-size:.85em; }
.um-ref{ display:flex; gap:18px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(139,111,61,.22); }
.um-ref:first-child{ border-top:1px solid rgba(139,111,61,.22); }
.um-ref__tag{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid #8b6f3d; color:#8b6f3d; font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:600; }
.um-ref__body{ flex:1; min-width:0; }
.um-ref__body .um-p{ margin:0 0 6px; }
.um-ref__link{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.02em; color:#8b6f3d;
  text-decoration:none; border-bottom:1px solid rgba(139,111,61,.45); word-break:break-all; }
.um-ref__link:hover{ color:#061f38; border-bottom-color:#061f38; }

/* v=522 — /framework page (Human Ability & Performance): domain blocks (name + description + includes) */
.um-fw-item{ padding:18px 0; border-top:1px solid rgba(139,111,61,.20); }
.um-fw-item:first-child{ border-top:none; }
.um-fw-item__h{ font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; font-weight:600; color:#29251d; margin:0 0 6px; line-height:1.15; }
.um-fw-item .um-p{ margin:0 0 8px; }
.um-fw-inc{ font-family:'Newsreader',Georgia,serif; font-size:16px; line-height:1.55; color:#3a342b; margin:0;
  padding-left:14px; border-left:2px solid rgba(139,111,61,.30); }
.um-fw-inc__label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#8b6f3d; margin-right:9px; }

/* v=523 — More-menu (palette): divider + "available soon" tag for the two new reading pages */
.um-pal__sep{ display:flex; align-items:center; padding:16px 20px 7px; margin-top:6px;
  border-top:1px solid rgba(139,111,61,.25); }
.um-pal__sep span{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#8b6f3d; }
.um-pal__soon{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:#8b6f3d; border:1px solid rgba(139,111,61,.42);
  padding:1px 6px; margin-left:9px; vertical-align:1px; }

/* v=524 — 2-digit chapter asides (/health ch.11, /framework ch.12): "12.1 " is 5ch (4-digit number
   + space), so the wrapped-line hang must be 5ch, not the default 4ch tuned for single-digit chapters.
   Without this the continuation lines sit 1ch left of the first word. */
.um-meta--w2 dd a, .um-meta--w2 .um-meta-link{ padding-left:5ch !important; text-indent:-5ch !important; }

/* v=525 — desktop header utility icons (globe/search/login): bigger icon + a small label below it
   (Language / Search / Login). NO frame — original vertical-line separators + spacing untouched.
   Every glyph gets an equal-height flex box so the three labels sit on one row (consolidated here
   from an earlier session's duplicate-numbered v=533; the bi-person optical fix — translateY(-1px)
   scale(1.32) — lives in the v=557 consolidation block at the end of the file). */
.um-nav__ico{ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; }
.um-nav__ico i{ font-size:21px !important; height:22px !important; display:inline-flex !important;
  align-items:center !important; justify-content:center !important; line-height:1 !important; }
.um-nav__ico-lbl{ font-family:'IBM Plex Mono',monospace !important; font-size:9px !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; color:#8b6f3d !important; line-height:1 !important; }

/* v=526 — contact FAQ answer sub-blocks (verbatim doctor text): bullet list, labelled defs, footnote */
.um-faq__a ul.um-faq__ul{ margin:8px 0; padding-left:22px; }
.um-faq__a ul.um-faq__ul li{ margin:3px 0; }
.um-faq__a .um-faq__def{ font-family:'Newsreader',Georgia,serif; line-height:1.7; padding-left:14px;
  border-left:2px solid rgba(139,111,61,.30); margin:8px 0; }
.um-faq__a .um-faq__note{ font-size:.9em; color:#6b6253; font-style:italic; }

/* (the duplicate-numbered v=532–534 login-icon blocks of an earlier session were consolidated
   into v=525 above + the v=557 consolidation block at the end of the file) */

/* v=527 — contact form (foundations style): 2-col grid, paper inputs, bronze accents, native select */
.um-cform{ margin-top:18px; }
.um-cform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.um-cform__field{ display:flex; flex-direction:column; gap:6px; }
.um-cform__field--full{ grid-column:1 / -1; }
.um-cform__label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#6b6253; }
.um-cform__req{ color:#8b6f3d; }
.um-cform__input{ font-family:'Newsreader',Georgia,serif; font-size:17px; color:#29251d; background:#fdfaf1;
  border:1px solid rgba(139,111,61,.30); border-radius:0; padding:11px 14px; width:100%; box-sizing:border-box; transition:border-color .15s ease; }
.um-cform__input::placeholder{ color:#a99f8c; }
.um-cform__input:focus{ outline:none; border-color:#8b6f3d; }
.um-cform__select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1 L6 7 L11 1' fill='none' stroke='%238b6f3d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px; padding-right:36px; }
.um-cform__textarea{ resize:vertical; min-height:130px; line-height:1.5; }
.um-cform__foot{ display:flex; align-items:center; gap:18px; margin-top:18px; flex-wrap:wrap; }
.um-cform__msg{ margin:0; font-family:'Newsreader',Georgia,serif; font-size:15px; }
.um-cform__msg.is-ok{ color:#3a6b3a; }
.um-cform__msg.is-error{ color:#a3432b; }
.um-cform__btn{ margin-left:auto; background:#8b6f3d; color:#fdfaf1; border:1px solid #8b6f3d; border-radius:0;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  padding:13px 28px; cursor:pointer; transition:filter .15s ease; }
.um-cform__btn:hover{ filter:brightness(1.08); }
.um-cform__btn:disabled{ opacity:.6; cursor:default; }
@media (max-width:640px){ .um-cform__grid{ grid-template-columns:1fr; } }

/* v=528 — programme tables (5.1) reused inside FAQ 02 answer — match #p-overview (hover, first/last
   pulls, 0.5px divider between tables). Text column flexes to the FAQ width so it never overflows. */
.um-faq__a .um-mblock__list{ --um-txtw: minmax(0, 1fr); }
.um-faq__a .um-mblock__list > li{ margin:0 -20px !important; padding:12px 20px !important; transition:background-color .18s ease !important; }
.um-faq__a .um-mblock__list > li:hover{ background:#f3ecd9 !important; }
.um-faq__a .um-mblock__list > li:first-child{ margin-top:-6px !important; padding-top:18px !important; }
.um-faq__a .um-mblock__list > li:last-child{ margin-bottom:-6px !important; padding-bottom:18px !important; }
.um-faq__a .um-mblock + .um-mblock::before{ height:0.5px !important; }
@media (max-width:720px){ .um-faq__a .um-mblock__list > li{ margin:0 -12px !important; padding:12px 12px !important; } }

/* v=529 — FAQ 02 reuses the 5.1 (A.)–(D.) enumeration list: mirror #p-overview .um-key bronze italic +
   0.5px underline + hover, and the 0.5px dividers above the list and between list & first table. */
.um-faq__a .um-key{ color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
.um-faq__a .um-key:hover{ color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }
.um-faq__a .um-list--codes .um-key{ margin-right:0 !important; }
.um-faq__a .um-list--codes{ position:relative !important; margin-top:48px !important; }
.um-faq__a .um-list--codes::before{ content:"" !important; position:absolute !important; left:0; right:0; top:-24px; height:0.5px; background:#8b6f3e; }
.um-faq__a .um-list--codes + .um-mblock{ position:relative !important; margin-top:48px !important; }
.um-faq__a .um-list--codes + .um-mblock::before{ content:"" !important; position:absolute !important; left:0; right:0; top:-24px; height:0.5px; background:#8b6f3e; }

/* v=530 — FAQ 01 (contact) reuses the method 4.2 (#me-entrance) S1/100 list style: .um-gold-em keyword
   and .um-list--codes strong code get bronze italic + 0.5px underline + live hover, at FAQ text size. */
.um-faq__a .um-gold-em,
.um-faq__a .um-list--codes strong{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
.um-faq__a .um-gold-em:hover,
.um-faq__a .um-list--codes strong:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important; background-color:rgba(139,111,61,0.05); }
.um-faq__a .um-list--codes strong{ font-style:italic !important; font-weight:400 !important; }

/* v=531 — FAQ 04 module list (.um-modlist) uses its own explicit <hr> above/below (like the Modules
   page); cancel the v=529 .um-list--codes ::before divider + 48px margin so there is no double line. */
.um-faq__a .um-modlist{ margin-top:0 !important; }
.um-faq__a .um-modlist::before{ content:none !important; }

/* ============================================================================
   v=557 — CONSOLIDATION of v=532–v=556 (framework + health + aside labels,
   2026-07-10). Override chains flattened to their FINAL values, dead blocks
   removed. NO visual change — verified by full-page pixel diff of all 13
   pages (desktop + mobile) before/after. Full history is in git.
   ============================================================================ */

/* /framework hero — A–F tile list (A/C/E lit by default, hover fades them out; B/D/F inverse) */
.um-fw-af{ margin:34px 0 40px; max-width:640px; }
.um-fw-af a.um-ref{ text-decoration:none; color:inherit; transition:background-color .18s ease; }
.um-fw-af a.um-ref:hover{ background-color:rgba(139,111,61,0.04); }
.um-fw-af .um-ref__body .um-p{ margin:0; font-size:18px; line-height:34px; }
.um-fw-af a.um-ref:hover .um-ref__body .um-p{ color:#8b6f3d; }
.um-fw-af a.um-ref:nth-child(odd){ background-color:rgba(139,111,61,0.04); }
.um-fw-af a.um-ref:nth-child(odd) .um-ref__body .um-p{ color:#8b6f3d; }
.um-fw-af a.um-ref:nth-child(odd):hover{ background-color:transparent; }
.um-fw-af a.um-ref:nth-child(odd):hover .um-ref__body .um-p{ color:#1a1814; }

/* /framework hero — intro paragraphs (document rhythm, full hero column width) + marked phrases */
.um-fw-intro .um-p{ font-size:17px; line-height:1.65; margin:0 0 18px; }
.um-fw-intro .um-p:last-child{ margin-bottom:0; }
.um-fw-intro .um-p.um-fw-band{ margin:28px 0; }
.um-fw-intro .um-key{
  border-bottom:0.5px solid rgba(139,111,61,0.45); padding-bottom:1px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
.um-fw-intro .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95); background-color:rgba(139,111,61,0.05); }

/* /framework hero — repeated document title (bronze italic segments, connectors plain) */
.um-fw-doctitle{ font-family:'Newsreader',Georgia,serif; font-size:20px; line-height:1.5; margin:0 0 28px; }
.um-fw-doctitle .um-key{
  color:#8b6f3d; font-style:italic; font-weight:400;
  border-bottom:0.5px solid rgba(139,111,61,0.45); padding-bottom:1px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
.um-fw-doctitle .um-key:hover{
  color:#6b5a2f; border-bottom-color:rgba(139,111,61,0.95); background-color:rgba(139,111,61,0.05); }

/* /framework sections — paragraph openings that repeat their title (markLead in framework.ejs):
   bronze ITALIC + 0.5px line + hover (bronze colour comes from the global .um-p strong rule) */
[id^="fw-"] .um-p .um-key{
  font-style:italic !important;
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
[id^="fw-"] .um-p .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05); }

/* /framework domain blocks — sub-headings: UPRIGHT bronze in the warm band, persistent 0.75px
   line, hover fades the band only; connector words (and/of/in — .um-fw-hx, outside the em) plain
   ink; description paragraph indented 38px left (full width to the right) */
.um-fw-item__h .um-uline{
  font-style:normal; color:#8b6f3d;
  text-decoration-line:underline; text-decoration-color:#8b6f3d;
  text-decoration-thickness:0.75px; text-underline-offset:5px;
}
.um-fw-item__h .um-mtc-band{
  background-color:rgba(139,111,61,0.05); padding:0.10em 0.18em; margin:-0.10em -0.18em;
  transition:background-color .18s ease;
}
.um-fw-item__h .um-mtc-band:hover{ background-color:transparent; }
.um-fw-hx{ text-transform:none; font-style:normal; color:var(--ink,#1a1814); }
.um-fw-item > .um-p{ margin-left:38px; }

/* /framework domain blocks — 'This domain…' box: warm fill + 1px bronze frame, justified text
   (same line-break rules as body paragraphs), hover lightens into the tile tone; the first three
   words carry a 2px bronze line */
.um-fw-inc{
  border-left:none; padding:14px 18px; margin:12px 0 0;
  background:#efe9d7; border:1px solid rgba(139,111,61,.35);
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto;
  transition:background-color .18s ease;
}
.um-fw-inc:hover{ background-color:#f0ece2; }
.um-fw-inc__lead{ border-bottom:2px solid rgba(139,111,61,0.45); padding-bottom:1px; }

@media (max-width:640px){
  .um-fw-inc{ padding:12px 14px; }
  .um-fw-item > .um-p{ margin-left:24px; }
}

/* /health 11.1 conditions list — framework-style rows with A–H letter tiles, odd rows lit by
   default (hover fades), even rows light on hover */
#h-conditions .um-hlist{ margin:34px 0 40px; }
#h-conditions .um-hlist li{
  display:flex; align-items:center; gap:18px;
  padding:16px 8px; border-bottom:1px solid rgba(139,111,61,.22);
  transition:background-color .18s ease, color .18s ease;
}
#h-conditions .um-hlist li:first-child{ border-top:1px solid rgba(139,111,61,.22); }
#h-conditions .um-hlist li:hover{ background-color:rgba(139,111,61,0.04); color:#8b6f3d; }
#h-conditions .um-hlist li:nth-child(odd){ background-color:rgba(139,111,61,0.04); color:#8b6f3d; }
#h-conditions .um-hlist li:nth-child(odd):hover{ background-color:transparent; color:#29251d; }
.um-hlist__tag{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid #8b6f3d; color:#8b6f3d; font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:600; }

/* header LOGIN icon (bi-person): the person glyph is drawn smaller in its em box than
   bi-globe/bi-search — scaled + raised so its visual height matches the other two */
.um-nav__ico i.bi-person{ transform:translateY(-1px) scale(1.32) !important; }

/* aside labels "Section"/"Subsections" (ALL pages): sentence case, 20px, 600, bronze ITALIC;
   the thin 0.75px word-underline + hover fade come from v=476 */
.um-meta dt,
.um-meta dt:first-of-type,
.um-section__aside:not(.um-section__aside--right) .um-meta dt{
  text-transform:none !important;
  font-size:20px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  font-style:italic !important;
}

/* v=558 — contact page: doctor's markup round (doc 2026-07-11) + login tweaks.
   (1) marked terms in 13.3/13.4/13.5/13.8 and login 12.2 get the um-key 0.5px line + hover
       (bronze italic comes from the global .um-p strong; .um-contact-note needs it explicitly);
   (2) CTA lines (hero + sections) — mono bronze link to the form, arrow, hover to navy;
   (3) Founders & Developers rubric — warm tiles (role mono / name Cormorant), placeholder names. */
#general-enquiries .um-p .um-key, #course-enquiries .um-p .um-key,
#institutions .um-p .um-key, #partners .um-p .um-key,
#technical-support .um-p .um-key, #company .um-p .um-key,
#faq > .um-section__body > .um-p .um-key,
#forgot-form .um-p .um-key, .um-hero .um-p .um-key,
#h-conditions .um-p .um-key, #h-human .um-p .um-key,
#h-strength .um-p .um-key, #h-society .um-p .um-key, #h-science .um-p .um-key,
#technical-support .um-contact-note .um-key, #company .um-contact-note .um-key{
  border-bottom:0.5px solid rgba(139,111,61,0.45) !important; padding-bottom:1px !important;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
#technical-support .um-contact-note .um-key, #company .um-contact-note .um-key{
  color:#8b6f3d !important; font-style:italic !important; font-weight:400 !important;
  font-family:inherit !important; font-size:inherit !important; text-transform:none !important;
  letter-spacing:normal !important; background:transparent !important;
  border:none !important; border-bottom:0.5px solid rgba(139,111,61,0.45) !important;
  padding:0 0 1px !important; margin:0 !important; display:inline !important; }
#general-enquiries .um-p .um-key:hover, #course-enquiries .um-p .um-key:hover,
#institutions .um-p .um-key:hover, #partners .um-p .um-key:hover,
#technical-support .um-p .um-key:hover, #company .um-p .um-key:hover,
#faq > .um-section__body > .um-p .um-key:hover,
#forgot-form .um-p .um-key:hover, .um-hero .um-p .um-key:hover,
#h-conditions .um-p .um-key:hover, #h-human .um-p .um-key:hover,
#h-strength .um-p .um-key:hover, #h-society .um-p .um-key:hover, #h-science .um-p .um-key:hover,
#technical-support .um-contact-note .um-key:hover, #company .um-contact-note .um-key:hover{
  color:#6b5a2f !important; border-bottom-color:rgba(139,111,61,0.95) !important;
  background-color:rgba(139,111,61,0.05); }

.um-ctaline-wrap{ margin:16px 0 0; }
.um-ctaline{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#8b6f3d; text-decoration:none; border-bottom:1px solid rgba(139,111,61,.45); padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease; }
.um-ctaline:hover{ color:#061f38; border-bottom-color:#061f38; }
.um-cta-arrow{ margin-left:4px; }

.um-people__h{ font-family:'Newsreader',Georgia,serif; font-size:20px; line-height:1.5; margin:34px 0 16px; }
.um-people__h .um-key{
  color:#8b6f3d; font-style:italic; font-weight:400;
  border-bottom:0.5px solid rgba(139,111,61,0.45); padding-bottom:1px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
.um-people__h .um-key:hover{
  color:#6b5a2f; border-bottom-color:rgba(139,111,61,0.95); background-color:rgba(139,111,61,0.05); }
.um-people{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.um-person{ border:1px solid rgba(139,111,61,.35); background:#efe9d7; padding:16px 18px;
  transition:background-color .18s ease; }
.um-person:hover{ background:#f0ece2; }
.um-person__role{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:#8b6f3d; margin-bottom:8px; }
.um-person__name{ font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:#29251d; }
@media (max-width:760px){
  .um-people{ grid-template-columns:1fr; }
}

/* v=559 — /framework: doctor's markup round (whole marked PDF, 2026-07-11). Bronze um-key marks
   added through 12.1–12.7 body text (framework.ejs). The only container without a bronze um-key
   rule was the 'This domain…' box — the doctor marks the Perception ('covers') and Attention
   ('includes') lists. Same treatment as [id^="fw-"] .um-p .um-key: bronze italic + 0.5px line. */
[id^="fw-"] .um-fw-inc .um-key{
  color:#8b6f3d; font-style:italic; font-weight:400;
  border-bottom:0.5px solid rgba(139,111,61,0.45); padding-bottom:1px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
[id^="fw-"] .um-fw-inc .um-key:hover{
  color:#6b5a2f; border-bottom-color:rgba(139,111,61,0.95);
  background-color:rgba(139,111,61,0.05); }

/* v=560 — dashboard announcement ticker (.dt-ticker, in _dash_nav.ejs): a second bar with the
   SAME metrics as the .dt-nav submenu (0.5px bronze hairline below, 18px bottom margin, IBM Plex
   Mono 11.5px uppercase, 12px vertical padding + 2px transparent border = identical bar height).
   Continuous CSS marquee — 4 identical segments, loop shifts -50% (2 segments) so it never gaps;
   ~34s per loop ("ni sporo ni prebrzo"), pauses on hover, honours reduced-motion. NO edge fade. */
.dt-ticker{ border-bottom:0.5px solid rgba(139,111,61,0.28); margin-bottom:18px; overflow:hidden; }
.dt-ticker-inner{ overflow:hidden; }
.dt-ticker-track{ display:inline-flex; white-space:nowrap; will-change:transform;
  animation:dt-ticker-move 34s linear infinite; }
.dt-ticker:hover .dt-ticker-track{ animation-play-state:paused; }
.dt-ticker-seg{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.07em; text-transform:uppercase; color:#061f38;
  padding:12px 0; border-bottom:2px solid transparent; }
.dt-ticker-seg b{ font-weight:500; color:#8b6f3e; }
@keyframes dt-ticker-move{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .dt-ticker-track{ animation:none; } }

/* Dashboard header transition — match the full-width double rule used on Home:
   the topbar supplies the first rule; this supplies the second after a paper gap.
   currentPage=dashboard is shared by the real dashboard and every preview screen. */
body.um-page-dashboard main.um-container::before,
body.um-testskin .dt-chrome::before{
  content:"";
  display:block;
  width:100vw;
  height:3px;
  margin-left:calc(50% - 50vw);
  border-bottom:1px solid var(--bz2,#a88955);
  pointer-events:none;
}

/* v=561 — Today: the 'Next deadline' clock card joins the white-card family (user, 2026-07-13).
   The gold gradient AND the maroon is-overdue gradient are retired: paper bg + hairline border
   like every other .dt-card, navy type, bronze eyebrow; the progress bar fills BRONZE on a soft
   bronze track. (Old v=385 .dt-clock rules overridden here — append-only.) */
#dash-today .dt-clock,
#dash-today .dt-clock.is-overdue{
  background:var(--dt-card); color:var(--dt-navy); border:1px solid var(--dt-line); }
#dash-today .dt-clock .dt-card__eyebrow{ color:var(--dt-bronze); }
#dash-today .dt-clock-day{ color:var(--dt-navy); }
#dash-today .dt-bar{ background:rgba(139,111,61,.16); }
#dash-today .dt-bar > i{ background:var(--dt-bronze); }
#dash-today .dt-clock-left{ color:var(--dt-ink); }
#dash-today .dt-clock-left b{ color:var(--dt-navy); }

/* v=562 — Today: the journey stepper moved ABOVE the gauge + deadline/next-step cards (user,
   2026-07-13). As the first block it drops its old 30px top margin and takes a 20px bottom
   margin instead (same rhythm as the .dt-metrics gap). Old v=385 margin overridden — append-only. */
#dash-today .dt-journey{ margin-top:0; margin-bottom:20px; }

/* v=563 — /dashboard/test: the engine page (test.ejs) rendered with the dashboard chrome.
   .dt-chrome wraps the ticker + tab nav on the engine page at the same width/position the
   dashboard sections give them (max-width 1060, centred, 8px top like #dash-* containers). */
.dt-chrome{ max-width:1060px; margin:0 auto; padding:8px 0 0; }
@media (max-width:1100px){ .dt-chrome{ padding-left:20px; padding-right:20px; } }

/* v=564 — TEST looks the SAME everywhere as the modules-page configurator (user, 2026-07-13).
   test.ejs now uses the .umtc grid verbatim (labels/boxes/rules/start button). Engine additions:
   disabled decorative rows, serif status line (old red/green retired), model bars in the
   .um-100p-bar band language. Plus: clickable Today journey steps and the locked upcoming-test
   preview on /dashboard/test (test-idle.ejs .dt-testprev). */
.umtc-opt input:disabled{ opacity:.4; cursor:default; }
.umtc-opt input:disabled ~ span{ color:var(--ink3,#6b6253); }
.umtc-startbtn:disabled{ opacity:.5; cursor:not-allowed; }
.umtc-startbtn:disabled:hover{ background:var(--paper4,#fdfaf1); }
.um-ts-status{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:19px !important;
  font-weight:500 !important; color:var(--ink2,#3a342b) !important; }
.um-ts-status--live{ color:var(--bz1,#8b6f3d) !important; }
body.um-testskin .app-model-bar{ background:var(--paper2,#efe9d7) !important; border:1px solid var(--bz1,#8b6f3d) !important; }
body.um-testskin .app-model-bar p, body.um-testskin .app-model-bar p *{ color:var(--ink,#1a1814) !important;
  font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:400 !important; font-size:17px !important; }
/* Today journey — steps are links now (locked steps stay plain divs) */
#dash-today a.dt-step{ text-decoration:none; color:inherit; }
#dash-today a.dt-step:hover .dt-step-label{ color:var(--dt-bronze); }
/* /dashboard/test — locked preview of the upcoming test */
#dash-account .dt-testprev{ margin-top:22px; }
#dash-account .dt-testprev h2{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:30px; color:var(--bz1,#8b6f3d); margin:0 0 2px; }
#dash-account .dt-testprev .dt-testprev-det{ font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600; font-size:17px; color:#1a1814; margin:0 0 12px; }
#dash-account .dt-testprev .dt-testprev-p{ font-family:'Cormorant Garamond',Georgia,serif;
  font-size:17.5px; color:#3a342b; line-height:1.55; max-width:860px; }
#dash-account .dt-testprev hr{ border:none; border-top:1px solid rgba(139,111,61,.28); margin:14px 0; }

/* v=565 — engine test page: the Test-configuration section is now the modules block VERBATIM
   (um-section M.P aside + UM–MP heading + subhead + intro + .umtc). Inside the 1040px engine
   shell the global um-section 3-column grid (200px rails) doesn't fit — narrow it here. */
body.um-testskin #um-mp-form-section.um-section{ grid-template-columns:150px 1fr !important;
  gap:36px; margin-top:30px; padding-top:28px; }
body.um-testskin #um-mp-form-section .um-section__body{ padding-left:36px !important; }
@media (max-width:760px){
  body.um-testskin #um-mp-form-section.um-section{ grid-template-columns:1fr !important; gap:0; }
  body.um-testskin #um-mp-form-section .um-section__body{ padding-left:0 !important; border-left:none !important; }
}

/* v=566 — test GRID + bars = the modules 100-Parameter grid EXACTLY (user, 2026-07-14;
   values MEASURED live from /practice/test/4): NAVY bar (#061f38, bronze frame, light serif
   text), THIN solid-bronze number bands (tiny light Newsreader numbers, navy frame), NAVY sum
   bands ("8 / 3.35", bronze frame), paper cells with FULL 1px bronze borders, 16.5px Newsreader
   cell type, C1/C2 12.5px ink on paper. body+ID specificity beats testskin.css load order.
   Also: .umtc-start row wraps cleanly (3 buttons were squashing into vertical slivers). */
body.um-testskin #headerAboveTable, body.um-testskin #footerBelowTable, body.um-testskin #headerOfKeyboard{
  background:#061f38 !important; border:1px solid #8b6f3d !important; }
body.um-testskin #headerAboveTable *, body.um-testskin #footerBelowTable *, body.um-testskin #headerOfKeyboard *{
  color:#eadfc6 !important; font-family:'Cormorant Garamond',Georgia,serif !important;
  font-weight:400 !important; font-size:17px !important; }
body.um-testskin .test-table th:not(:last-child){
  background:#8b6f3d !important; color:#f3ecd9 !important; border:1px solid #061f38 !important;
  font-family:'Newsreader',Georgia,serif !important; font-weight:400 !important; font-size:8px !important;
  padding:3px 0 1px !important; text-align:center !important;
  font-variant-numeric:lining-nums tabular-nums !important; }
body.um-testskin .test-table th:last-child{
  background:#061f38 !important; color:#eadfc6 !important; border:1px solid #8b6f3d !important;
  font-family:'Newsreader',Georgia,serif !important; font-weight:400 !important; font-size:8px !important;
  padding:3px 0 1px !important; text-align:center !important;
  font-variant-numeric:lining-nums tabular-nums !important; }
body.um-testskin .test-table td{
  background:#fdfaf1 !important; border:1px solid #8b6f3d !important;
  font-family:'Newsreader',Georgia,serif !important; font-weight:400 !important; font-size:16.5px !important;
  color:#3a342b !important; font-variant-numeric:lining-nums tabular-nums !important; }
body.um-testskin .test-table td.row-result div{ background:#fdfaf1 !important; }
body.um-testskin .test-table td.row-result p{
  font-family:'Newsreader',Georgia,serif !important; font-size:12.5px !important;
  font-weight:400 !important; color:#3a342b !important; }
.umtc-start{ flex-wrap:wrap !important; }
.umtc-start .umtc-startbtn, .umtc-start .um-mp-btn--ghost{ white-space:nowrap; }

/* v=567 — engine test page: the M.P rail is gone (aside removed from test.ejs) — the
   configurator now spans the FULL shell width, exactly as wide as the test grid below it
   (user, 2026-07-14). Overrides the v=565 two-column layout. */
body.um-testskin #um-mp-form-section.um-section{ grid-template-columns:1fr !important; gap:0 !important; }
body.um-testskin #um-mp-form-section .um-section__body{ padding-left:0 !important; border-left:none !important; }

/* v=568 — topbar: bi-person-plus (REGISTER) gets the SAME optical fix as bi-person — the
   glyph is drawn smaller in its em box → scale 1.32 (rule proven for Login earlier). The
   icons-group left rule (which used to separate the old APPLY text) goes — Register is now
   the first icon, no divider before it. (user, 2026-07-14) */
.um-nav__ico i.bi-person-plus{ transform:translateY(-1px) scale(1.32) !important; }
.um-nav__icons{ border-left:none !important; padding-left:0 !important; }

/* v=569 — hero aside "Section" / "Subsections" liste (.um-meta dd a / .um-meta-link, SVE
   stranice): NAŠA invert animacija s velikih brojeva sekcija (v=491) i brojeva u naslovima
   modula (.um-mtc-band v=499/508) — topla traka (rgba(139,111,61,.05)) + tanka bronzana
   linija ispod + tamnija bronza (#6b5a2f) STOJE STALNO u mirnom stanju; kada se pređe mišem
   — traka se UGASI (transparent) i tekst pređe u čistu bronzu #8b6f3d, linija OSTAJE (princip
   v=508: linija se nikad ne gasi). Mora nadjačati v=33 pravila (transparent border u :not(:hover),
   bronza linija tek na hover) — isti selektori + !important, kasnije u kaskadi. is-current
   (16637-era) ostaje italic i sada se od ostalih razlikuje svjetlijom bronzom. (user, 2026-07-14) */
.um-meta dd a, .um-meta-link{
  color:#6b5a2f !important;
  background-color:rgba(139,111,61,0.05);
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.um-meta dd a:not(:hover), .um-meta-link:not(:hover){
  border-bottom:1px solid #8b6f3d !important;
}
.um-meta dd a:hover, .um-meta-link:hover{
  color:var(--bz1,#8b6f3d) !important;
  background-color:transparent;
  border-bottom:1px solid #8b6f3d !important;
}
.um-meta .um-meta-link.is-current{ color:#8b6f3d !important; }

/* v=569 — (a) topbar Register icon: bi-person-plus was ink-measured 30×42 (short & WIDE — any
   height-matching scale reads oversized). Swapped to the compact bi-person-add (35×36 ink) with
   the MEASURED factor 41/36 ≈ 1.14 to match the 41px globe/search ink. (b) Learning materials =
   uniform 12-card grid (3 parts × Video/Audio/Document/Slides), media window dominates the card. */
.um-nav__ico i.bi-person-add{ transform:translateY(-1px) scale(1.14) !important; }

#dash-account .dac-grid12{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
#dash-account .dacg-card{ background:var(--dt-card,#fffdf8); border:1px solid var(--dt-line,rgba(139,111,61,.28));
  border-radius:14px; padding:14px; display:flex; flex-direction:column; }
#dash-account .dacg-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#dash-account .dacg-part{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dt-bronze,#8b6f3e); }
#dash-account .dacg-media{ height:150px; display:flex; align-items:center; justify-content:center; }
#dash-account .dacg-media video{ width:100%; height:100%; background:#000; border-radius:8px; object-fit:cover; }
#dash-account .dacg-media audio{ width:100%; }
#dash-account .dacg-file{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; text-decoration:none; color:var(--dt-bronze,#8b6f3e);
  background:rgba(139,111,61,.05); border:1px dashed rgba(139,111,61,.35); border-radius:8px;
  transition:background-color .18s ease; }
#dash-account .dacg-file:hover{ background:rgba(139,111,61,.10); }
#dash-account .dacg-file i{ font-size:34px; line-height:1; }
#dash-account .dacg-open{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
#dash-account .dacg-name{ margin-top:10px; font-size:12.5px; color:var(--dt-ink,#4a4133); opacity:.85;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1000px){ #dash-account .dac-grid12{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #dash-account .dac-grid12{ grid-template-columns:1fr; } }

/* v=570 — hero aside "Section"/"Subsections": the parallel-session v=569 warm-band+permanent-line
   treatment belongs ONLY to the dt headings (user, 2026-07-14) — band hugs the word and fades on
   hover; the 0.75px text-decoration line the headings already carry stays. The dd items BELOW
   return to the v=33 quiet state: plain ink, no band, bronze line only on hover. */
.um-meta dt{
  background-color:rgba(139,111,61,0.05) !important;
  width:fit-content !important; padding:0 .3em 1px .15em !important; margin-left:-.15em !important;
  transition:background-color .18s ease;
}
.um-meta dt:hover{ background-color:transparent !important; }
.um-meta dd a, .um-meta-link{ color:#6b6253 !important; background-color:transparent !important; }
.um-meta dd a:not(:hover), .um-meta-link:not(:hover){ border-bottom:1px solid transparent !important; }
.um-meta dd a:hover, .um-meta-link:hover{ color:var(--bz1,#8b6f3d) !important;
  background-color:transparent !important; border-bottom:1px solid var(--bz1,#8b6f3d) !important; }
.um-meta .um-meta-link.is-current{ color:#8b6f3d !important; font-style:italic !important; }

/* v=571 — Learning materials grid: 3 per row like the modules grid (was 4), rows grouped by
   type (Video / Audio / Document / Slides × Part I-III), cards a touch bigger (media window
   150 → 200px, roomier padding). Overrides the v=569 base; the ≤1000px→2 and ≤560px→1 column
   fallbacks from v=569 still apply. (user, 2026-07-14) */
#dash-account .dac-grid12{ grid-template-columns:repeat(3,1fr); gap:16px; }
#dash-account .dacg-card{ padding:16px; }
#dash-account .dacg-media{ height:200px; }

/* v=572 — entrance-test text round (doctor's doc, 2026-07-14). Title inside the engine h3 gets
   the SITE heading treatment (bronze, warm band that fades on hover, persistent 0.75px line —
   replaces the doc's too-thick underline). um-key marks (bronze italic + 0.5px line + hover)
   work ANYWHERE on the engine page (guide, A–D list, select-line, popup). Guide text follows
   the test width (#test-description widened; #testClock keyed on .col-sm-6 so the JS runtime
   layout switch at test start stays intact). The stray right border on the configurator
   section body is gone. "(inactive):" note above the decorative option rows. */
body.um-testskin h3 .um-uline{ font-style:normal; color:#8b6f3d;
  text-decoration-line:underline; text-decoration-color:#8b6f3d;
  text-decoration-thickness:0.75px; text-underline-offset:7px; }
body.um-testskin h3 .um-mtc-band{ background-color:rgba(139,111,61,0.05);
  padding:0.08em 0.15em; margin:-0.08em -0.15em; transition:background-color .18s ease; }
body.um-testskin h3 .um-mtc-band:hover{ background-color:transparent; }
body.um-testskin .um-key{ font-style:italic; color:#8b6f3d; font-weight:500;
  border-bottom:0.5px solid rgba(139,111,61,.45); padding-bottom:1px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
body.um-testskin .um-key:hover{ color:#6b5a2f; border-bottom-color:rgba(139,111,61,.95);
  background-color:rgba(139,111,61,.05); }
body.um-testskin #um-mp-form-section .um-section__body{ border-right:none !important; }
body.um-testskin #test-description{ width:66.666% !important; }
body.um-testskin #testClock.col-sm-6{ width:33.333% !important; }
.umtc-inactive{ display:block; width:100%; font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-size:14px; color:#6b6253; margin:0 0 2px; }
.umtc-box--inactive-space::before{ content:""; display:block; width:100%; height:24px; }

/* v=573 — entrance/engine page rhythm fixes (user, 2026-07-14): ONE hairline between the guide
   and the configurator with a 36px gap (second <hr> removed from test.ejs; the section's own
   top border + extra padding retired — the global .um-section 36px padding-top was re-opening
   the hole). Configurator now EXACTLY as wide as the test grid (the 28px right padding on the
   section body was the 856-vs-884 difference). Title h3 carries no extra underline anywhere
   (belt-and-braces against old bundle rules). */
body.um-testskin #um-mp-form-section.um-section{ margin-top:20px !important; padding-top:0 !important;
  border-top:none !important; } /* 20 + the hr's own 16px bottom margin ≈ the site 36px rhythm */
body.um-testskin #um-mp-form-section .um-section__body{ padding-right:0 !important; }
body.um-testskin .custom-mt h3{ border-bottom:none !important; }
body.um-testskin h3 .um-uline{ border-bottom:none !important; }

/* v=574 — the PHANTOM thick hover line on engine pages: hovering a heading made the H3 ITSELF
   paint text-decoration underline (auto thickness ≈3px at 34px — the "debela linija"), source
   untraceable in our sheets (old bundle/global toggle). Killed wholesale: on um-testskin pages
   headings never carry their own underline — the em.um-uline inside keeps its 0.75px line and
   the band animation. (user, 2026-07-14) */
body.um-testskin h1, body.um-testskin h2, body.um-testskin h3,
body.um-testskin h4, body.um-testskin h5, body.um-testskin h6,
body.um-testskin h1:hover, body.um-testskin h2:hover, body.um-testskin h3:hover,
body.um-testskin h4:hover, body.um-testskin h5:hover, body.um-testskin h6:hover{
  text-decoration:none !important; }

/* v=575 — public dashboard preview: registration prompt stays on-page and matches UM. */
.um-preview-modal[hidden]{ display:none !important; }
.um-preview-modal{ position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:24px; }
.um-preview-modal__backdrop{ position:absolute; inset:0; background:rgba(6,31,56,.58); backdrop-filter:blur(6px); }
.um-preview-modal__card{ position:relative; width:min(560px,100%); max-height:calc(100vh - 28px); overflow-y:auto; padding:40px 42px 36px;
  background:#fdfaf1; border:1px solid rgba(139,111,61,.58); box-shadow:0 28px 80px rgba(6,31,56,.28); }
.um-preview-modal__card:before{ content:""; position:absolute; inset:7px; border:1px solid rgba(139,111,61,.18); pointer-events:none; }
.um-preview-modal__close{ position:absolute; z-index:1; top:14px; right:16px; width:34px; height:34px;
  border:0; background:transparent; color:#6b6253; font:300 28px/1 Georgia,serif; cursor:pointer; }
.um-preview-modal__eyebrow{ position:relative; margin:0 40px 15px 0; color:#8b6f3d;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; }
.um-preview-modal__card h2{ position:relative; margin:0 0 14px; color:#061f38;
  font-family:'Cormorant Garamond',Georgia,serif; font-size:36px; font-weight:600; line-height:1.08; }
.um-preview-modal__card #um-preview-copy{ position:relative; margin:0; color:#3a342b;
  font-family:'Newsreader',Georgia,serif; font-size:18px; line-height:1.58; }
.um-preview-key{ color:#8b6f3d; font-style:italic; font-weight:500;
  border-bottom:.5px solid rgba(139,111,61,.55); padding-bottom:1px;
  background-color:rgba(139,111,61,.05);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease; }
.um-preview-key:hover{ color:#6b5a2f; border-bottom-color:rgba(139,111,61,.95); background-color:transparent; }
.um-preview-modal__actions{ position:relative; display:flex; justify-content:flex-end; align-items:center; gap:12px;
  margin-top:28px; padding-top:20px; border-top:1px solid rgba(139,111,61,.25); }
.um-preview-modal__later,.um-preview-modal__register{ min-height:42px; padding:11px 16px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.055em; text-transform:uppercase; cursor:pointer; }
.um-preview-modal__later{ border:1px solid rgba(139,111,61,.34); background:transparent; color:#6b6253; }
.um-preview-modal__register{ display:inline-flex; align-items:center; gap:14px; border:1px solid #8b6f3d;
  background:#8b6f3d; color:#fff; text-decoration:none; }
.um-preview-modal__later:hover{ background:#efe9d7; }
.um-preview-modal__register:hover{ color:#fff; filter:brightness(1.07); }
body.um-preview-modal-open{ overflow:hidden; }
@media(max-width:560px){
  .um-preview-modal{ padding:14px; }
  .um-preview-modal__card{ padding:34px 25px 26px; }
  .um-preview-modal__card h2{ font-size:30px; }
  .um-preview-modal__actions{ align-items:stretch; flex-direction:column-reverse; }
  .um-preview-modal__later,.um-preview-modal__register{ width:100%; justify-content:center; text-align:center; }
}

/* v=576 — final optical alignment round.
   Header text menu begins on the same vertical axis as the hero eyebrow; the icon group stays put. */
@media(min-width:1100px){
  .um-topbar__nav-left{ transform:translateX(-37px); }
}

/* Section/Subsections use the same warm-band height and invert animation as the large Notes
   section numbers, without changing the labels' established layout metrics. */
.um-meta dt{
  position:relative;
  z-index:0;
  background-color:transparent !important;
}
.um-meta dt::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-10px;
  right:-.3em;
  bottom:0;
  left:-.15em;
  background-color:rgba(139,111,61,0.05);
  transition:background-color .18s ease;
  pointer-events:none;
}
.um-meta dt:hover::after{ background-color:transparent; }

/* Full-column title-row rule: Home uses it below "Welcome to"; System below
   "Learning System". The original word underline under Ultima Memoria stays intact. */
.um-hero__body .um-h1 .um-h1-rowline{
  display:flex;
  align-items:baseline;
  width:100%;
  padding-bottom:14px;
  margin-bottom:0;
  color:inherit;
  font-style:normal;
}
.um-hero__body .um-h1 .um-h1-rowline__text{
  text-decoration-line:underline;
  text-decoration-color:#8b6f3d;
  text-decoration-thickness:0.75px;
  text-underline-offset:7px;
  text-decoration-skip-ink:auto;
  transition:text-decoration-color .18s ease;
}
.um-hero__body .um-h1 .um-h1-rowline::after{
  content:"";
  flex:1 1 auto;
  min-width:0;
  height:1px;
  margin-left:-4px;
  background-color:#8b6f3d;
  transform:translateY(8px);
  transition:background-color .18s ease;
  pointer-events:none;
}
.um-hero__body .um-h1 .um-h1-rowline:hover .um-h1-rowline__text{
  text-decoration-color:transparent;
}
.um-hero__body .um-h1 .um-h1-rowline:hover::after{ background-color:transparent; }

/* Modules overview banner: balanced 10px breathing room around the small separator. */
.umm-banner__sep{
  display:inline-block;
  width:1px;
  height:.9em;
  margin:0 10px;
  background:currentColor;
  vertical-align:-.05em;
  opacity:.75;
}

/* Programme detail headings: deliberate air between the programme/duration row and its result row. */
.um-prog-title-cont{
  display:block;
  margin-top:10px;
}

/* Hero right aside: Section/Subsections bands span the same full column width as on the left. */
.um-section__aside--right .um-meta dt{
  box-sizing:border-box;
  width:100% !important;
  margin-left:0 !important;
}
.um-section__aside--right .um-meta dt::after{
  left:0;
  right:0;
}

/* Hero left aside: match the full-width Section/Subsections bands on the right. */
.um-section__aside:not(.um-section__aside--right) .um-meta dt{
  box-sizing:border-box;
  width:100% !important;
  margin-left:0 !important;
}
.um-section__aside:not(.um-section__aside--right) .um-meta dt::after{
  left:0;
  right:0;
}

/* v=577 — heading lines = TEXT line weight (user, 2026-07-16, chat 15.07): every line under a
   heading — hero h1 words (incl. the full-row line "Welcome to ————"), section h2/h3 words,
   method #me-process um-sub, framework item headings, programme-title segments (.um-useg),
   ENGINE h3 titles (um-testskin) — drops 0.75px → 0.5px, the SAME hairline as the .um-key marks
   in body text. ONLY the thickness changes: hover fades, warm bands and all transitions stay.
   Deliberately NOT touched: umx card rows, .um-meta dt labels, aside section numbers, cert bar. */
.um-h1 em, .um-h1 .um-uline, .um-h1 em.um-h1-key, .um-h1 span.um-uline,
.um-h2 em, .um-h2 .um-uline, .um-h2 span.um-uline, .um-h2 .um-uline .um-useg,
.um-h3 em, .um-h3 .um-uline, .um-h4 em, .um-h4 .um-uline,
#me-process .um-sub,
.um-fw-item__h .um-uline,
body.um-testskin h3 .um-uline,
.um-hero__body .um-h1 .um-h1-rowline__text{
  text-decoration-thickness:0.5px !important;
}
.um-hero__body .um-h1 .um-h1-rowline::after{ height:0.5px; }

/* v=578 — hero row lines are ONE piece + heading lines in the SEPARATOR colour (user, 2026-07-16,
   chat 15.07). (1) The full-row title line was built from TWO segments (text-decoration under the
   words + a flex ::after filler) — they overlapped at the join and read as a visible "spoj".
   Killed: the words carry NO underline; the whole line is ONE absolutely-positioned 0.5px hairline
   across the row (calibrated to the old spot: baseline+7px → 18px above the wrapper bottom, 4px on
   the padding-less --em row). Hover still fades the whole line (existing :hover::after rule).
   (2) Home h1 second row "Ultima Memoria (UM)" wrapped in .um-h1-rowline--em (home.ejs) so its
   line runs the SAME full width as the "Welcome to" row; --em has no extra bottom padding so the
   hero rhythm doesn't move. (3) ALL heading lines (h1 words on other pages, h2/h3 section words,
   um-useg segments, framework item headings, engine h3) go from bronze #8b6f3d to the ordinary
   separator colour var(--rule) — same as the eyebrow/section hairlines. TEXT um-key marks stay
   bronze; aside dt/numbers + umx cards untouched; #me-process .um-sub excluded (hover-reveal). */
.um-hero__body .um-h1 .um-h1-rowline{ position:relative; }
.um-hero__body .um-h1 .um-h1-rowline__text{ text-decoration-line:none !important; }
.um-hero__body .um-h1 .um-h1-rowline em{ text-decoration-line:none !important; }
.um-hero__body .um-h1 .um-h1-rowline::after{
  position:absolute; left:0; right:0; bottom:18px; height:0.5px;
  margin-left:0; transform:none;
  background-color:var(--rule,rgba(139,111,61,.28));
  transition:background-color .18s ease;
}
.um-hero__body .um-h1 .um-h1-rowline--em{ padding-bottom:0; }
.um-hero__body .um-h1 .um-h1-rowline--em::after{ bottom:4px; }
.um-h1 em, .um-h1 .um-uline, .um-h1 em.um-h1-key, .um-h1 span.um-uline,
.um-h2 em, .um-h2 .um-uline, .um-h2 span.um-uline, .um-h2 .um-uline .um-useg,
.um-h3 em, .um-h3 .um-uline, .um-h4 em, .um-h4 .um-uline,
.um-fw-item__h .um-uline,
body.um-testskin h3 .um-uline{
  text-decoration-color:var(--rule,rgba(139,111,61,.28)) !important;
}

/* v=579 — heading lines a TOUCH thicker (user, 2026-07-16, chat 15.07): 0.5px → 0.75px on the
   same set v=577/578 defined — hero full-row lines + h1/h2/h3 heading words, um-useg segments,
   framework item headings, engine h3. Smallest visible step on Retina (1.0 → 1.5 device px);
   colour stays var(--rule), hovers/bands untouched. Text um-key marks stay 0.5px. */
.um-h1 em, .um-h1 .um-uline, .um-h1 em.um-h1-key, .um-h1 span.um-uline,
.um-h2 em, .um-h2 .um-uline, .um-h2 span.um-uline, .um-h2 .um-uline .um-useg,
.um-h3 em, .um-h3 .um-uline, .um-h4 em, .um-h4 .um-uline,
#me-process .um-sub,
.um-fw-item__h .um-uline,
body.um-testskin h3 .um-uline{
  text-decoration-thickness:0.75px !important;
}
.um-hero__body .um-h1 .um-h1-rowline::after{ height:0.75px; }

/* v=581 — aside "Section"/"Subsections" labels: the LINE as wide as the band was, the band and
   ALL animations OFF (user, 2026-07-16, chat 15.07). The word-width text-decoration underline is
   retired; the ::after that used to be the warm band becomes the line itself — full column width
   (left:0/right:0 under the width:100% dts, SAME width on the left and right aside), bronze
   0.75px, parked 3px above the box bottom (pixel-measured = the old underline spot). No band
   background, no hover fade — the label and its line are fully static. dd links untouched. */
.um-meta dt,
.um-section__aside--right .um-meta dt,
.um-section__aside:not(.um-section__aside--right) .um-meta dt{
  text-decoration-line:none !important;
  background-color:transparent !important;
  transition:none !important;
}
.um-meta dt:hover,
.um-section__aside--right .um-meta dt:hover,
.um-section__aside:not(.um-section__aside--right) .um-meta dt:hover{
  text-decoration-line:none !important;
  background-color:transparent !important;
}
.um-meta dt::after,
.um-section__aside--right .um-meta dt::after,
.um-section__aside:not(.um-section__aside--right) .um-meta dt::after{
  top:auto; left:0; right:0; bottom:3px; height:0.75px;
  background-color:#8b6f3d;
  transition:none;
}
.um-meta dt:hover::after,
.um-section__aside--right .um-meta dt:hover::after,
.um-section__aside:not(.um-section__aside--right) .um-meta dt:hover::after{
  background-color:#8b6f3d;
}

/* v=582 — aside "Section"/"Subsections" line = IDENTICAL to the hero "Welcome to" row line
   (user, 2026-07-16, chat 15.07): same colour var(--rule) and same 0.75px weight as the
   .um-h1-rowline::after hairline (v=578/579), still full column width both asides (v=581).
   And the fade animation is back ON for the LINE only: hovering the label fades the line to
   transparent, .18s — the warm band stays retired. */
.um-meta dt::after,
.um-section__aside--right .um-meta dt::after,
.um-section__aside:not(.um-section__aside--right) .um-meta dt::after{
  background-color:var(--rule,rgba(139,111,61,.28));
  transition:background-color .18s ease;
}
.um-meta dt:hover::after,
.um-section__aside--right .um-meta dt:hover::after,
.um-section__aside:not(.um-section__aside--right) .um-meta dt:hover::after{
  background-color:transparent;
}

/* v=583 — SAFARI thickness fix (user, 2026-07-16, chat 15.07: "nije iste debljine"): a 0.75px
   hairline is rendered by SUBPIXEL PHASE — WebKit painted the hero row line as 2 device rows but
   the aside dt line (different fractional Y) as only 1 device row, so in Safari the Section/
   Subsections line looked thinner than the "Welcome to" one (Chromium happened to paint both as
   2 rows — measured). Both lines go to height:1px = ALWAYS the same ink (2 device rows at DPR2)
   at every position in every engine; with the light var(--rule) colour the painted result is
   what the hero already looked like (lum ~204 vs ~206 measured). Colour/width/hover untouched. */
.um-hero__body .um-h1 .um-h1-rowline::after{ height:1px; }
.um-meta dt::after,
.um-section__aside--right .um-meta dt::after,
.um-section__aside:not(.um-section__aside--right) .um-meta dt::after{ height:1px; }

/* v=584 — eyebrow lines: INDEPENDENT hover segments + ALL main-heading lines full width (user,
   2026-07-16, chat 15.07). EYEBROW: the hero eyebrow line was ONE continuous border with a
   20px paper patch punching the gap after the word — segments couldn't fade separately. The
   word is now wrapped in .um-eyebrow__t (14 hero eyebrows): the div's border goes transparent
   (geometry untouched), the SHORT segment is the span's absolute ::after (same y: +3.2px under
   the text), the LONG segment is the div's ::before as a flex item (order:5 → after the 20px
   gap patch, flex:1, nudged -4.2px to the same y). Hover the WORD → only the short segment
   fades; hover the LINE strip → only the long one (:not(:has(...)) keeps them exclusive).
   H1: word-underlines inside a rowline are killed wholesale (covers span/em .um-uline on the
   newly wrapped pages — target-groups, tests, memory, evidence, applications, ai-memory,
   framework, contact, health, method, system/programmes row 1). */
.um-hero__body .um-eyebrow:has(.um-eyebrow__t){ border-bottom-color:transparent !important; }
.um-eyebrow__t{ position:relative; }
.um-eyebrow__t::after{
  content:""; position:absolute; left:0; right:0; bottom:-4.2px; height:1px;
  background-color:var(--rule,rgba(139,111,61,.28));
  transition:background-color .18s ease;
}
.um-eyebrow__t:hover::after{ background-color:transparent; }
.um-hero__body .um-eyebrow:has(.um-eyebrow__t)::before{
  content:""; order:5; flex:1 1 auto; align-self:flex-end; height:1px; margin-bottom:-4.2px;
  background-color:var(--rule,rgba(139,111,61,.28));
  transition:background-color .18s ease;
}
.um-hero__body .um-eyebrow:hover:not(:has(.um-eyebrow__t:hover))::before{ background-color:transparent; }
.um-hero__body .um-h1 .um-h1-rowline .um-uline{ text-decoration-line:none !important; }

/* v=585 — topbar icon labels (REGISTER/LANGUAGE/SEARCH/DASHBOARD): the hover underline sat
   glued to the label (~1px below the caps, measured), while the main-menu links carry ~5px of
   air under SYSTEM/METHOD…. The gradient paints at the box bottom (background-position 100%),
   so the box is extended 4px down (padding) and pulled back with a negative margin — layout
   and icon/label positions unchanged, only the line drops to the same visual gap as the menu. */
.um-nav__icons a.um-nav__ico{ padding-bottom:4px !important; margin-bottom:-4px !important; }
.um-nav__icons a.um-nav__ico:first-child{ padding-left:0 !important; }
.um-nav__icons a.um-nav__ico:last-child{ padding-right:0 !important; }

/* v=586 — doctor's DASHBOARD text round (doc 2026-07-16, chat 15.07). (1) um-key marks now appear
   in dashboard copy (Today greeting, Progress/Practice/Account subs, Test tab paragraph + idle
   card, Certificate letter) and in the login ACCESS lede — none of those containers were covered
   by the page-scoped um-key rules, so one dashboard-scope rule mirrors the standard look
   (bronze italic, 0.5px line, warm hover — same as v=572 engine marks). (2) The registration
   preview modal gets the doctor's proportion: Höhe 100 : Breite 116,8 → aspect-ratio 116.8/100
   (content scrolls inside if it runs long). */
#dash-today .um-key, #dash-progress .um-key, #dash-practice .um-key,
#dash-account .um-key, #dash-cert .um-key,
.um-hero .um-lede .um-key{
  font-style:italic; color:#8b6f3d; font-weight:500;
  border-bottom:0.5px solid rgba(139,111,61,.45); padding-bottom:1px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#dash-today .um-key:hover, #dash-progress .um-key:hover, #dash-practice .um-key:hover,
#dash-account .um-key:hover, #dash-cert .um-key:hover,
.um-hero .um-lede .um-key:hover{
  color:#6b5a2f; border-bottom-color:rgba(139,111,61,.95);
  background-color:rgba(139,111,61,.05);
}
.um-preview-modal__card{ aspect-ratio:116.8/100; height:auto; }
/* v=586b — the journey stepper now has EIGHT nodes (Comprehensive Assessment Test added by the
   doctor's doc): 7 → 8 columns on desktop; the 4/2-column mobile fallbacks still apply. */
#dash-today .dt-steps{ grid-template-columns:repeat(8,1fr); }
@media (max-width:1000px){ #dash-today .dt-steps{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ #dash-today .dt-steps{ grid-template-columns:repeat(2,1fr); } }
/* v=586c — progress chart x-axis: six long event names (two-line tspans) need a smaller size to
   clear each other at the 720-unit viewBox. */
#dash-progress .dp-xlabel{ font-size:9.5px; }

/* v=587 — gauge caption BELOW the semicircle (user, 2026-07-17): the doctor's full target
   sentence used to sit in the gauge centre and cut across the arc; now the centre keeps only
   the big multiplier and the sentence runs as a centred caption under the whole gauge. */
#dash-today .dt-mult-cap--below{
  text-align:center; max-width:420px; margin:2px auto 12px;
  font-size:13.5px; line-height:1.5; color:#6b6253;
}

/* v=588 — progress table polish (user, 2026-07-17): the metric-name column widens so "Form of
   expression and precision of the memory" fits on ONE line; the INCREASE header right-aligns
   over its values (it floated mid-card over an empty gap). Mobile stacked fallback untouched. */
@media (min-width:721px){
  #dash-progress .dp-thead, #dash-progress .dp-row{ grid-template-columns:2.6fr 1fr 24px 1fr .9fr; }
}
#dash-progress .dp-thead span:last-child{ text-align:right; }

/* v=589 — journey stepper = the doctor's PHASE-GROUP sketch (2026-07-17): five dashed boxes
   (Preparation and Admission / Learning Phase 1-3 / Final Phase), mono phase title inside the
   top of each box, the dots + labels inside, the step SUBS below the box bottom edge (the
   dashed rectangle stops above them via ::before inset). The connector line keeps running
   THROUGH the boxes: within a phase the old .dt-step::before works; across phases the first
   step of each following phase stretches its segment over the gap (~22px = padding+gap).
   Box widths follow the step count (flex:<n>). Mobile: phases stack full-width, no cross links. */
#dash-today .dt-steps--phases{ display:flex; gap:14px; align-items:stretch; }
#dash-today .dt-phase{ position:relative; min-width:0; padding:10px 4px 30px; }
#dash-today .dt-phase::before{ content:""; position:absolute; inset:0 0 26px 0;
  border:1px dashed rgba(139,111,61,.5); pointer-events:none; }
#dash-today .dt-phase-title{ position:relative; font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dt-bronze);
  text-align:center; line-height:1.5; margin:2px 8px 16px; }
#dash-today .dt-phase-steps{ display:grid; gap:0; }
#dash-today .dt-phase + .dt-phase .dt-phase-steps .dt-step:first-child::before{
  display:block; left:calc(-50% - 22px); width:calc(100% + 22px); }
@media (max-width:1000px){
  #dash-today .dt-steps--phases{ flex-wrap:wrap; }
  #dash-today .dt-steps--phases .dt-phase{ flex:1 1 100% !important; }
  #dash-today .dt-phase + .dt-phase .dt-phase-steps .dt-step:first-child::before{ display:none; }
}
/* v=589b — sketch-exact polish: the step SUBS drop BELOW the dashed rectangle (absolute at the
   equal-height step bottom; the ::before border stops 26px above the phase bottom, i.e. above
   them); the title zone gets a fixed 2-line height so every dot sits on ONE line regardless of
   how the phase name wraps; the 1-step first box widens a touch so "Preparation and Admission
   Phase" breaks into two lines like the doctor drew it. */
#dash-today .dt-steps--phases .dt-step{ position:relative; padding:0 6px 34px; }
#dash-today .dt-steps--phases .dt-step-sub{ position:absolute; left:0; right:0; bottom:8px; margin-top:0; }
#dash-today .dt-steps--phases .dt-phase{ padding:12px 4px 0; }
#dash-today .dt-phase-title{ min-height:30px; }
#dash-today .dt-steps--phases .dt-phase:first-child{ flex:1.3 1 0 !important; }
#dash-today .dt-steps--phases .dt-step-sub{ white-space:nowrap; }
#dash-today .dt-steps--phases .dt-step-sub{ font-size:8.5px; letter-spacing:.03em; }

/* v=590 — Today breathing round (user, 2026-07-17): the doctor's announcement paragraph runs
   right below the header rule ("after Dear Amir"), roomy serif with air above and below; the
   phase boxes get more vertical space — taller boxes, more room between title, dots, labels
   and the sub line under the box. */
#dash-today .dt-announce{
  margin:28px 4px 6px; max-width:980px;
  font-family:'Newsreader',Georgia,serif; font-size:16px; line-height:1.75; color:#3a342b;
}
#dash-today .dt-steps--phases .dt-phase{ padding:16px 4px 0; }
#dash-today .dt-phase-title{ margin:4px 8px 22px; }
#dash-today .dt-steps--phases .dt-step{ padding:0 6px 44px; }
#dash-today .dt-steps--phases .dt-step .dt-dot{ margin-bottom:14px; }
#dash-today .dt-phase::before{ inset:0 0 30px 0; }
#dash-today .dt-steps--phases .dt-step-sub{ bottom:9px; }
/* v=590b — the ET box's "100%" clipped on the dashed edge: phases become flex columns and the
   steps block fills the stretched height, so every sub lands on the same baseline below the box. */
#dash-today .dt-steps--phases .dt-phase{ display:flex; flex-direction:column; }
#dash-today .dt-phase-steps{ flex:1 1 auto; }
/* v=590c — equal air BELOW the announcement: rule→text 28px, text→progress element 28px (user). */
#dash-today .dt-announce{ margin-bottom:28px; }

/* v=590f — preview materials tail rubrics framed PROPERLY (user, 2026-07-17 "napravi kako
   treba"): a hairline BETWEEN the grid and the S3/300 title (border-top on the first tail head)
   and a uniform rhythm — line → 22px → title → 16px → line → 22px → title → 16px → line. */
#dash-account .dac-mat-head--tail{ margin-top:22px; }
#dash-account .dac-mat-head--tail-first{ border-top:0.5px solid var(--dt-line); padding-top:22px; margin-top:34px; }

/* v=591 — programme chip AT TITLE HEIGHT on every dashboard screen (user, 2026-07-17): the
   header becomes a plain block with the chip absolutely pinned top-right beside the title, so
   the sub text (e.g. the certificate letter) spreads across the full width below instead of
   being squeezed next to the chip. Mobile: the chip drops back into flow under the text. */
#dash-today .dt-head, #dash-progress .dt-head, #dash-practice .dt-head,
#dash-account .dt-head, #dash-cert .dt-head{
  position:relative; display:block;
}
#dash-today .dt-prog-chip, #dash-progress .dt-prog-chip, #dash-practice .dt-prog-chip,
#dash-account .dt-prog-chip, #dash-cert .dt-prog-chip{
  position:absolute;
  top:calc(10px - (8px / var(--um-zoom,1)));
  right:0;
}
@media (max-width:760px){
  #dash-today .dt-prog-chip, #dash-progress .dt-prog-chip, #dash-practice .dt-prog-chip,
  #dash-account .dt-prog-chip, #dash-cert .dt-prog-chip{
    position:static; display:inline-flex; margin-top:4px;
  }
}
/* v=591b — the sub text uses the freed width (the 560px caps predate the chip move): wide but
   still readable — 900px on cert/account/practice. */
#dash-practice .dt-sub, #dash-account .dt-sub, #dash-cert .dt-sub{ max-width:900px; }
/* v=591c — ONE text width everywhere (user, 2026-07-17): every dashboard sub/paragraph runs to
   the same measure as the Today announcement (980px) — no more screens where the text stops
   short at 560/900 while others run wide. Applies to preview and the real dashboard alike. */
#dash-today .dt-sub, #dash-progress .dt-sub, #dash-practice .dt-sub,
#dash-account .dt-sub, #dash-cert .dt-sub{ max-width:980px; }

/* v=592 — certificate preview matches the right column height (user, 2026-07-17): the locked
   paper stretches to the same height as the two cards beside it (grid stretch + the wrap as a
   flex column). Single-column mobile keeps the 1.412 paper proportion. */
#dash-cert .dc-grid{ align-items:stretch; }
#dash-cert .dc-paper-wrap{ display:flex; }
#dash-cert .dc-paper{ flex:1 1 auto; height:auto; aspect-ratio:auto; min-height:420px; }
@media (max-width:780px){ #dash-cert .dc-paper{ aspect-ratio:1.412; min-height:0; } }

/* v=593 — aside Section/Subsections ITEM hover lines = IDENTICAL to the heading lines above
   them (user, 2026-07-17): full column width (links stretch to the column like the dt), same
   1px thickness, same var(--rule) colour — instead of the old text-wide solid bronze. */
.um-meta dd a, .um-meta-link{ display:block; width:100% !important; box-sizing:border-box; }
.um-meta dd a:hover, .um-meta-link:hover{
  border-bottom:1px solid var(--rule,rgba(139,111,61,.28)) !important;
}

/* v=594 — the connector is CUT between Entrance Test and Learning Phase (1) one (doctor, via
   user 2026-07-17): the ET→LP1 segment is the second phase's first-step ::before — hidden.
   Every other horizontal connector stays. */
#dash-today .dt-steps--phases .dt-phase:nth-child(2) .dt-phase-steps .dt-step:first-child::before{ display:none; }

/* v=594c — test-tab guide text on the SAME 980px measure as every other dashboard text, and
   more air between the guide (its closing hairline) and the configurator (user, 2026-07-17). */
.dt-testprev-p{ max-width:980px; }
.dt-testprev .umtc{ margin-top:30px; }
/* v=594d — the guide paragraph uses the FULL available width (user: "nemoj da je uzak") —
   the 980px cap from v=594c comes off this one; the 30px gap to the configurator stays. */
.dt-testprev-p{ max-width:none; }
/* v=594e — guide text truly full-width where the right side is EMPTY (user, 2026-07-17):
   (1) the preview test tab's old 860px cap comes off (the id-scoped v=network rule outweighed
   v=594d's class selector); (2) on the ENGINE the guide takes 100% ONLY while #testClock is
   hidden (entrance test guide) — the moment the clock appears (control tests / test start)
   the v=572 66.666/33.333 split applies untouched. */
#dash-account .dt-testprev .dt-testprev-p{ max-width:none; }
body.um-testskin div:has(> #testClock[hidden]) #test-description{ width:100% !important; }

/* v=595 — PREVIEW certificate page: the certificate UNLOCKED, full size, central; the two
   cards (UM Certificate progress + Certified memory performance) side by side BELOW it
   (user, 2026-07-17). Real dashboard keeps the locked two-column grid. */
#dash-cert .dc-grid--preview{ grid-template-columns:1fr; }
#dash-cert .dc-grid--preview .dc-paper-wrap{ display:block; }
#dash-cert .dc-grid--preview .dc-paper{ aspect-ratio:1828/3155; height:auto; min-height:0; max-width:780px; margin:0 auto; }
#dash-cert .dc-grid--preview .dc-side{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; margin-top:4px; }
@media (max-width:900px){ #dash-cert .dc-grid--preview .dc-side{ grid-template-columns:1fr; } }
/* v=595b — natural paper margins on the unlocked certificate (user, 2026-07-17: the source PNG
   is cropped flush to its content, so the UMAID header and the barcode label sat ON the edge):
   the image now sits contained inside a padded white sheet — breathing room on every side. */
#dash-cert .dc-grid--preview .dc-paper{
  background-size:contain; background-origin:content-box; background-position:center;
  background-repeat:no-repeat; background-color:#fffdf8; padding:34px; box-sizing:border-box;
}

/* v=596 — dashboard texts run FULL WIDTH, edge to edge (user, 2026-07-17, FINAL — no more
   measure fiddling): every sub / announcement / guide paragraph on the preview AND the real
   dashboard spans the whole content width and wraps naturally where it must. All previous
   caps (560/900/980) are OFF for these. */
#dash-today .dt-sub, #dash-progress .dt-sub, #dash-practice .dt-sub,
#dash-account .dt-sub, #dash-cert .dt-sub,
#dash-today .dt-announce, .dt-testprev-p{ max-width:none; }

/* v=596b — dashboard paragraphs JUSTIFIED (user, 2026-07-17): every line fills the full measure
   edge to edge, first line included — newspaper block without columns. Hanging "the" before
   "Comprehensive Assessment Test" / "Final Examination" is bound with nbsp in the markup. */
#dash-today .dt-announce, #dash-today .dt-sub, #dash-progress .dt-sub, #dash-practice .dt-sub,
#dash-account .dt-sub, #dash-cert .dt-sub, .dt-testprev-p{ text-align:justify; }
/* v=596d — the unlocked preview certificate sits LEFT, not centred (user, 2026-07-17). */
#dash-cert .dc-grid--preview .dc-paper{ margin:0; }

/* v=597 — HOME hero right-aside note line activated (user, 2026-07-18): hovering the note fades
   its bottom line like every other activated line (.18s to transparent). Home only
   (.um-hero--home scope) — the same note elsewhere stays static. */
.um-hero--home .um-section__note--rightblock{ transition:border-bottom-color .18s ease !important; }
.um-hero--home .um-section__note--rightblock:hover{ border-bottom-color:transparent !important; }

/* v=598 — preview-gate modal proportion corrected: Höhe 100 : Breite 161,8 (the golden ratio —
   116.8 was a misread of the doctor's note). Card widened so the text fits the flatter shape
   without an inner scrollbar. */
.um-preview-modal__card{ aspect-ratio:161.8/100; width:min(780px,100%); }
/* v=598b — with the fixed golden shape the actions row anchors to the card BOTTOM (flex column,
   margin-top:auto) so no dead space gapes under the buttons. */
.um-preview-modal__card{ display:flex; flex-direction:column; }
.um-preview-modal__card .um-preview-modal__actions{ margin-top:auto; }

/* v=599 — LOGIN page: the full-width line below the header that every other page gets from the
   sticky subnav's bottom border (login has none). Same strip height (51px incl. the border),
   same gold 1px rgb(168,137,85), same paper fill — content starts at the identical y (123px). */
.um-login-topline{ box-sizing:border-box; height:51px; background:#f5f2ea;
  border-bottom:1px solid rgb(168,137,85); }
/* v=599b — the strip runs FULL BLEED like the subnav (the layout container capped it at 1304). */
.um-login-topline{ margin-left:calc(50% - 50vw); width:100vw; }

/* v=600 — (1) dashboard tab underline sits 1px BELOW the label (user, 2026-07-25): the active
   line was the box border, 12px under the text; it becomes an ::after raised to bottom:9px
   (12px pad − 1px gap − 2px line) — row metrics and the .dt-nav hairline untouched.
   (2) LOGIN: the gap between the subnav bar and the content equals the dashboard ticker strip
   height (47px, was 36) — .um-hero--centered is used by login only. */
.dt-nav-link{ position:relative; }
.dt-nav-link.is-active{ border-bottom-color:transparent; }
.dt-nav-link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:16.5px;
  height:2px; background:#8b6f3e; }
.um-hero.um-hero--centered{ padding-top:47px !important; }

/* v=601 — dashboard tab strip COMPACT like the marketing submenu strip (user, 2026-07-25):
   the 18px gap between the ticker hairline and the tab row goes; the row itself becomes 51px
   (padding 14/14) so hairline→hairline = 51px, text vertically centred — the same band
   geometry as the sticky subnav. The active line sits close under the label like the MAIN
   menu underlines (~5px), not at the strip bottom. Login untouched. */
.dt-ticker{ margin-bottom:0; }
.dt-nav-link{ padding-top:14px; padding-bottom:14px; }
.dt-nav-link.is-active::after{ bottom:12px; }

/* v=602 — Today polish (user, 2026-07-25): (1) the journey heading "Your progress through …"
   sits in a RECTANGLE (same hairline border as the lower configurator boxes) and on hover
   LIGHTS UP with their beige fill (#efe9d7, .18s). (2) "Dear Amir," — the name in italic
   bronze like the h1, and the greeting carries a hairline BELOW it. */
#dash-today .dt-journey-head h3{ border:1px solid rgba(139,111,61,.30); padding:8px 14px;
  transition:background-color .18s ease; }
#dash-today .dt-journey-head h3:hover{ background-color:var(--paper2,#efe9d7); }
#dash-today .dt-sub .dt-dear{ display:inline-block;
  border-bottom:1px solid var(--rule,rgba(139,111,61,.28)); padding-bottom:3px; margin-bottom:5px; }
#dash-today .dt-sub .dt-dear em{ font-style:italic; color:var(--dt-bronze); }

/* v=603 — FIXED "Participant #N" pill, top-right corner of every dashboard screen, always
   visible while scrolling (doctor, 2026-07-25). Sits just under the sticky topbar (72px),
   same look as the programme chip. Hidden on narrow screens (it would cover content). */
.dt-fixed-participant{ position:fixed; top:84px; right:16px; z-index:60;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dt-bronze,#8b6f3e);
  border:1px solid var(--dt-line,rgba(139,111,61,.30)); border-radius:999px;
  padding:6px 12px; white-space:nowrap; background:var(--dt-card,#fdfaf1); }
@media (max-width:1000px){ .dt-fixed-participant{ display:none; } }

/* v=604 (ispravka 2026-07-25): SAMO druga donja linija — IDENTIČNA postojećoj (0.5px, ista
   boja), 3px top-to-top kao gornji par. Ticker OSTAJE STATIČAN — fade na skrol je izbačen
   (korisnik ga nije tražio; JS blok uklonjen iz foundations.js). */
.dt-nav{ position:relative; }
.dt-nav::before{ content:""; position:absolute; top:2px; left:0; right:0; height:0.5px;
  background:rgba(139,111,61,0.28); pointer-events:none; }
/* v=604b — MIRROR par i POVIŠ hodajućeg teksta (korisnik, 2026-07-25): iste dvije linije
   (0.5px, ista boja, 3px top-to-top) 3px iznad teksta poruke — ogledalo para ispod. */
.dt-ticker{ position:relative; }
.dt-ticker::before{ content:""; position:absolute; top:11.5px; left:0; right:0; height:0.5px;
  background:rgba(139,111,61,0.28); pointer-events:none; }
.dt-ticker::after{ content:""; position:absolute; top:14.5px; left:0; right:0; height:0.5px;
  background:rgba(139,111,61,0.28); pointer-events:none; }
/* v=604c — hodajuća poruka NE NESTAJE pri skrolu (korisnik, 2026-07-25, konačno): traka je
   STICKY odmah ispod sticky topbara (72px) — stoji non-stop kao i header; puna podloga da
   sadržaj ne prosijava ispod nje. */
.dt-ticker{ position:sticky; top:72px; z-index:120; background:var(--paper,#f5f2ea); }

/* v=605 — dashboard ticker traka = IDENTIČNA marketing submenu traci (korisnik, 2026-07-25):
   puna širina ekrana (full-bleed), 51px visine, ista podloga #f5f2ea, zlatna 1px linija na dnu
   (rgb(168,137,85)) kao um-stickybar na svim stranicama; unutra SAMO hodajući tekst, vertikalno
   centriran. Dodatne unutrašnje linije (v=604/604b parovi) se gase — submenu ih nema. */
.dt-ticker{ box-sizing:border-box; margin-left:calc(50% - 50vw); width:100vw; height:51px;
  display:flex; align-items:center; background:#f5f2ea;
  border-bottom:1px solid rgb(168,137,85); }
.dt-ticker::before, .dt-ticker::after{ content:none; }
.dt-nav::before{ content:none; }
.dt-ticker-inner{ width:100%; }
/* v=606 — ticker = stickybar 1:1 PO STRUKTURI (korisnik, 2026-07-25): ista ukupna visina
   51.39px (3px paper border-top + sadržaj + 1px zlatni border-bottom), ISTA unutrašnja zlatna
   linija odmah ispod topbara (::before na vrhu padding-boxa = y75) koja je DIO sticky trake pa
   ne nestaje pri skrolu, i tekst koji izranja/nestaje tačno na x=68 kao '1 · HOME' (inner
   1304px centriran, overflow:hidden na njegovim ivicama). */
.dt-ticker{ height:51.4px; border-top:3px solid #f5f2ea;
  border-bottom:1px solid rgb(168,137,85); }
.dt-ticker::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:rgb(168,137,85); pointer-events:none; }
.dt-ticker-inner{ width:auto; max-width:1304px; margin:0 auto; overflow:hidden; }
/* v=606b — KRIVAC nađen: main.um-container::before (3px + zlatna linija, NIJE sticky → gurao je
   traku na y83 i njegova linija je nestajala pri skrolu). Na dashboard stranicama se gasi —
   traka nosi SVOJU identičnu liniju (v=606 ::before, sticky s njom) — i section-ov 8px
   padding-top ide na 0 da traka legne na y72 kao stickybar na home. */
body.um-page-dashboard main.um-container::before{ display:none; }
body.um-page-dashboard main.um-container > section{ padding-top:0 !important; }
/* v=606c — isti EDGE FADE kao na home stickybaru (korisnik, 2026-07-25): 15px maska na obje
   ivice unutrašnjeg boxa — tekst mekano blijedi tačno tamo gdje ulazi/izlazi (x=68/x=1372),
   identičan gradijent kao um-stickybar__inner. */
.dt-ticker-inner{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 15px, #000 calc(100% - 15px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 15px, #000 calc(100% - 15px), rgba(0,0,0,0) 100%);
}

/* v=607 — (1) journey naslov = PILULA kao chipovi (border-radius:999px; hover beige iz v=602
   ostaje); (2) fiksna Participant pilula je bila POKRIVENA novom sticky trakom (72–123px) —
   spušta se tik ispod trake (top:132px) i diže iznad sadržaja. */
#dash-today .dt-journey-head h3{ border-radius:999px; padding:8px 18px; }
.dt-fixed-participant{ top:132px; z-index:121; }

/* v=608 — (1) FADE ISPOD trake kao na home (korisnik, 2026-07-25): identičan ::after paper blok
   (30px, top:calc(100%+1px)) ispod sticky trake — sadržaj koji skrola nestaje pod njom; outer
   ticker overflow:visible (klip marqueea drži .dt-ticker-inner). (2) Fiksna Participant pilula
   u DVA reda, centrirano. (3) Programme chip: dva reda (program / Participant A …), centriran,
   hover pali beige kao ostale pilule. */
.dt-ticker{ overflow:visible; }
.dt-ticker::after{ content:""; position:absolute; left:0; right:0; top:calc(100% + 1px);
  height:calc(var(--um-fade-h,40px) - 10px); background:var(--paper,#f5f2ea); pointer-events:none; }
.dt-fixed-participant{ text-align:center; line-height:1.6; padding:6px 16px; }
#dash-today .dt-prog-chip, #dash-progress .dt-prog-chip, #dash-practice .dt-prog-chip,
#dash-account .dt-prog-chip, #dash-cert .dt-prog-chip{
  display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 16px; text-align:center; transition:background-color .18s ease;
}
#dash-today .dt-prog-chip:hover, #dash-progress .dt-prog-chip:hover, #dash-practice .dt-prog-chip:hover,
#dash-account .dt-prog-chip:hover, #dash-cert .dt-prog-chip:hover{
  background-color:var(--paper2,#efe9d7);
}
/* v=608b — (1) fiksna Participant pilula: ista hover boja kao ostale pilule; (2) demo/preview
   broj je sada A 000.000.000.001 (korisnikov prvi registrovani broj), ne 1042. */
.dt-fixed-participant{ transition:background-color .18s ease; }
.dt-fixed-participant:hover{ background-color:var(--paper2,#efe9d7); }
/* v=608c — fade zona NE SMIJE jesti sadržaj (korisnik, 2026-07-25): tabovi (TODAY/PROGRESS…)
   kreću ISPOD fade bloka — margin-top istom formulom kojom home računa fade visinu, pa je
   geometrija bar→zrak→sadržaj identična home stranici; pri skrolu sadržaj i dalje nestaje
   TAČNO u fade zoni. */
.dt-nav{ margin-top:calc(var(--um-fade-h,40px) - 10px); }
/* v=608d — 100% iste dimenzije fade-a kao home: --um-fade-h na dashboardu = home vrijednost
   (43px → fade 33px); tabovi +1px da ne ulaze u zonu ni pixelom. */
body.um-page-dashboard{ --um-fade-h:43px; }
.dt-nav{ margin-top:calc(var(--um-fade-h,40px) - 9px); }
/* v=609 — programme chip nazad u JEDAN red (korisnik, 2026-07-25): participant red uklonjen iz
   markupa (broj živi na fiksnoj piluli u ćošku); vraćena originalna zbijena dimenzija pilule
   (6px 12px), beige hover animacija OSTAJE. */
#dash-today .dt-prog-chip, #dash-progress .dt-prog-chip, #dash-practice .dt-prog-chip,
#dash-account .dt-prog-chip, #dash-cert .dt-prog-chip{ padding:6px 12px; gap:0; }
/* v=609b — linija ispod "Dear Amir," = kao um-key linije u tekstu (ista debljina 0.5px, ista
   boja .45, isti 1px razmak od riječi — bila je 1px/.28 s 3px razmaka pa je djelovala daleko). */
#dash-today .dt-sub .dt-dear{ border-bottom:0.5px solid rgba(139,111,61,.45); padding-bottom:1px; margin-bottom:6px; }

/* v=610 — participant pilula UZ "Your progress" pilulu (korisnik, 2026-07-25): ista dvoredna
   pilula, stoji desno od naslova, prati mu visinu, ima isti beige hover; skrola se s sadržajem
   (fiksna corner verzija uklonjena iz markupa). "Learning Phases" u announcement tekstu
   kapitalizovano. */
#dash-today .dt-jh-left{ display:flex; align-items:center; gap:12px; }
#dash-today .dt-journey-pn{ font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--dt-bronze,#8b6f3e);
  border:1px solid var(--dt-line,rgba(139,111,61,.30)); border-radius:999px;
  padding:4px 16px; text-align:center; line-height:1.55; white-space:nowrap;
  background:var(--dt-card,#fdfaf1); transition:background-color .18s ease; }
#dash-today .dt-journey-pn:hover{ background-color:var(--paper2,#efe9d7); }
/* v=610b — harmonija dvije pilule (korisnik, 2026-07-25): "Your progress" pilula smanjena
   (font 19px, uži padding) da visinom sjedne uz participant pilulu — obje iste visine. */
#dash-today .dt-journey-head h3{ font-size:19px; padding:0 18px; display:inline-flex; align-items:center; }
#dash-today .dt-jh-left{ align-items:stretch; }
#dash-today .dt-journey-pn{ display:inline-flex; flex-direction:column; justify-content:center; }

/* v=612 — doktorova formula (2026-07-26): veličina v=611 skaliranja × 75% ("od one veličine
   kao kad stavim na 75%"). Pragovi: 1.15/1.3/1.5/1.7 × 0.75 = 0.8625/0.975/1.125/1.275.
   Full-bleed trake dijele vw sa faktorom (kompenzacija kao v=611); stickybar sync() u JS već
   dijeli sa zoomom (v=611b). Ispod 1680px ništa se ne mijenja. */
:root{ --um-zoom:1; }
@media (min-width:1680px){ :root{ --um-zoom:.8625; } body{ zoom:.8625; } }
@media (min-width:1920px){ :root{ --um-zoom:.975; }  body{ zoom:.975; } }
@media (min-width:2240px){ :root{ --um-zoom:1.125; } body{ zoom:1.125; } }
@media (min-width:2560px){ :root{ --um-zoom:1.275; } body{ zoom:1.275; } }
.um-stickybar, .dt-ticker, .um-login-topline{
  width:calc(100vw / var(--um-zoom, 1));
  margin-left:calc(50% - (50vw / var(--um-zoom, 1)));
}
/* v=613 — ljestvica proširena NADOLJE (korisnik, 2026-07-26): i laptop klasa (1200–1679px,
   npr. 13.3") na 100% browsera prikazuje kao na 75% — pa se od te tačke veličina penje kroz
   v=612 pragove (0.75 → 0.8625 → 0.975 → 1.125 → 1.275). Mobiteli/tableti (<1200) netaknuti. */
@media (min-width:1200px) and (max-width:1679.98px){ :root{ --um-zoom:.75; } body{ zoom:.75; } }

/* v=614 — journey head po doktoru (2026-07-26): (1) "Your progress through …" IZVAĐEN iz
   pilule — čist naslov (22px kao prije v=602, bez bordera/hovera) iznad kapsule, s vertikalnim
   razmakom; (2) PARTICIPANT kapsula povučena LIJEVO na početak reda, ista lijeva ravan kao
   fazni boxovi ispod (head padding 6px ukinut); (3) kapsula i programme chip (svi ekrani)
   nisu više pilule (999px) nego zaobljeni kao velika journey kartica — border-radius:14px. */
#dash-today .dt-journey-head{ display:block; padding:0 0 18px; }
#dash-today .dt-journey-head h3{ border:0; border-radius:0; padding:0; background:transparent;
  font-size:22px; display:block; margin:0 0 14px; }
#dash-today .dt-journey-head h3:hover{ background-color:transparent; }
#dash-today .dt-jh-row{ display:flex; justify-content:space-between; align-items:center; }
#dash-today .dt-journey-pn{ border-radius:14px; }
#dash-today .dt-prog-chip, #dash-admin .dt-prog-chip, #dash-progress .dt-prog-chip,
#dash-practice .dt-prog-chip, #dash-account .dt-prog-chip, #dash-cert .dt-prog-chip{
  border-radius:14px; }

/* v=615 — ISPRAVKA v=614 (korisnik, 2026-07-26): "Your progress through …" NIJE goli tekst u
   kartici nego OSTAJE kapsula (ista visina 44px koju je imao, font 19px, border, beige hover),
   samo izvučena SKROZ VAN velike journey kartice — stoji IZNAD nje, ćoškovi 14px kao kartica.
   U kartici ostaje samo red: participant kapsula lijevo + "N of 8 complete" desno. */
#dash-today .dt-journey-title{ font-family:'Cormorant Garamond',serif; font-weight:500;
  color:var(--dt-navy); font-size:19px; margin:0 0 14px;
  border:1px solid rgba(139,111,61,.30); border-radius:14px; background:var(--dt-card,#fdfaf1);
  padding:0 18px; height:44px; display:inline-flex; align-items:center;
  transition:background-color .18s ease; }
#dash-today .dt-journey-title:hover{ background-color:var(--paper2,#efe9d7); }

/* v=616 — (korisnik, 2026-07-26): (1) "Your progress through …" kapsula se proteže CIJELOM
   ŠIRINOM velike journey kartice ispod (display:flex umjesto inline — h3 je blok, puni red);
   (2) programme chip ("S2 / 200 PROGRAMME", svi ekrani) dobija ISTU VISINU 44px kao ta
   kapsula — vertikalno centriran (chip je flex kolona iz v=608), širi horizontalni padding
   da prati kapsulu. */
#dash-today .dt-journey-title{ display:flex; }
#dash-today .dt-prog-chip, #dash-admin .dt-prog-chip, #dash-progress .dt-prog-chip,
#dash-practice .dt-prog-chip, #dash-account .dt-prog-chip, #dash-cert .dt-prog-chip{
  height:44px; justify-content:center; padding:0 16px; }

/* v=617 — vertikalne linije umjesto kosih (korisnik, 2026-07-26): (1) PARTICIPANT kapsula u
   JEDAN red s "|" iza riječi — "PARTICIPANT | A 000.000.000.001" (br uklonjen iz markupa),
   visina ista 44px kao naslovna kapsula i chip; (2) u programme chipu (svi ekrani) i u
   "Your progress through …" naslovu kosa "/" postaje vertikalna "|" (replace u viewovima). */
#dash-today .dt-journey-pn{ flex-direction:row; align-items:center; height:44px; padding:0 16px; }

/* v=618 — doktorov naglasak (2026-07-26): dvije italic rečenice ispod gaugea postaju ČETIRI
   kartice u 2+2 mreži jednakih širina — red 1 IU sistem (started/current), red 2 procentni
   sistem (achieved/target), jer su to različiti sistemi. Tekst doslovan, samo raspoređen:
   mono label (riječi rečenice) + italic serif vrijednost kao dosadašnji line-note. Kartice
   ne prate dimenzije donjih kartica (doktor); 14px ćoškovi, beige hover kao pilule; na uskim
   ekranima 2+2 → 1 kolona. */
#dash-today .dt-iu-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;
  margin-top:18px; }
#dash-today .dt-iuc{ background:var(--dt-paper,#fdfaf1); border:1px solid var(--dt-line);
  border-radius:14px; padding:14px 16px; text-align:center;
  display:flex; flex-direction:column; justify-content:center;
  transition:background-color .18s ease; }
#dash-today .dt-iuc:hover{ background-color:var(--paper2,#efe9d7); }
#dash-today .dt-iuc-label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dt-bronze); margin-bottom:6px; }
#dash-today .dt-iuc b{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
  font-size:20px; color:var(--dt-navy); line-height:1.25; }
@media (max-width:600px){ #dash-today .dt-iu-cards{ grid-template-columns:1fr; } }

/* v=619 — vrijednosti u naglasnim karticama (korisnik, 2026-07-26): tekst i brojevi USPRAVNI
   (bez italica), BEZ bolda i malo manji (20px → 18px). */
#dash-today .dt-iuc b{ font-style:normal; font-weight:400; font-size:18px; }

/* v=620 — donje dvije kartice na VISINU gornjih (korisnik, 2026-07-26): dugi tekst treće
   kartice ("1.55× of the baseline | 155% of baseline") stane u JEDAN red na 15px (izmjereno:
   16px prelama, 15.5px = 233/233 bez zraka) — obje kartice procentnog reda dobijaju 15px da
   red ostane ujednačen; bez nowrap, pa na uskim ekranima smije uredno prelomiti. */
#dash-today .dt-iuc:nth-child(3) b, #dash-today .dt-iuc:nth-child(4) b{ font-size:15px; }
#dash-today .dt-iu-cards{ grid-auto-rows:1fr; } /* oba reda = visina višeg → sve četiri jednake */

/* v=621 — zrak oko IU reda (korisnik, 2026-07-26): (1) luk/skala brojčanika malo manji
   (340 → 300px); (2) red "= 20.0 / = 30.0 / ≥ 40.0" dobija horizontalnu liniju i ISPOD sebe,
   istu kao iznad (0.5px --dt-line), sa simetričnim 16px paddingom; (3) veći vertikalni razmak
   prema četiri naglasne kartice ispod (18 → 22px). */
#dash-today .dt-gauge-wrap{ max-width:300px; }
#dash-today .dt-iu{ border-bottom:0.5px solid var(--dt-line); padding-bottom:16px; }
#dash-today .dt-iu-cards{ margin-top:22px; }

/* v=622 — BL/CL/T red AKTIVAN (korisnik, 2026-07-26): tri vrijednosti podijeljene u TRI
   kartice istog stila kao naglasne ispod (paper pozadina, --dt-line border, 14px ćoškovi,
   beige hover .18s) — vertikalne linije između njih i horizontalne iznad/ispod reda otpadaju
   (kartice same nose strukturu). Tipografija unutra netaknuta (BL = 20.0 serif + mono label). */
#dash-today .dt-iu{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;
  border-top:0; border-bottom:0; padding-top:0; padding-bottom:0; margin-top:18px; }
#dash-today .dt-iu div{ background:var(--dt-paper,#fdfaf1); border:1px solid var(--dt-line);
  border-radius:14px; padding:14px 16px; transition:background-color .18s ease; }
#dash-today .dt-iu div + div{ border-left:1px solid var(--dt-line); } /* pregazi staru 0.5px djeliteljsku */
#dash-today .dt-iu div:hover{ background-color:var(--paper2,#efe9d7); }

/* v=623 — modul otvoren U DASHBOARDU (/dashboard/practice/test/:id, 2026-07-27): submeni
   modula (um-stickybar) je sticky pa mu prazan flow-slot (52px) gura ticker ispod headera —
   na dashboard stranicama postaje fixed (ne rezerviše prostor; sync() u foundations.js ga
   pinuje ispod tickera/tabova). margin-left iz full-bleed formule (v=611) se resetuje jer
   je fixed već u viewport koordinatama. Ostali dashboard ekrani nemaju vidljiv stickybar
   pa pravilo ništa ne mijenja. */
body.um-page-dashboard #um-stickybar{ position:fixed; left:0; margin-left:0; }
/* fixed submeni više ne zauzima tok — sadržaj modula vraća taj prostor da ga bar ne prekrije */
#dash-practice-mod{ padding-top:52px; }

/* v=623b — submeni modula NE HODA (korisnik, 2026-07-27): umjesto fixed + JS pomjeranja sa
   svakim scrollom, foundations.js ga JEDNOM premjesti u tok odmah ispod tab trake, a ovdje je
   sticky ispod tickera (72 + 51.5 = 123.5px): u mirovanju stoji na svom mjestu ispod tabova
   i skrola se sa stranicom, a kad tabovi otklizaju — zakači se ispod sticky tickera i miruje.
   Full-bleed margin formula (v=612) vraćena jer je bar opet u toku. padding kompenzacija iz
   v=623 više ne treba (bar opet zauzima tok). */
body.um-page-dashboard #um-stickybar{ position:sticky; top:123.5px; left:auto;
  margin-left:calc(50% - (50vw / var(--um-zoom, 1))); }
#dash-practice-mod{ padding-top:0; }

/* v=623c — KONAČNO rješenje vrha modul stranice (korisnik, 2026-07-27): sve se ponaša KAO NA
   OSTALIM dashboard stranicama — tabovi se uvlače normalno, ticker ostaje sticky, a
   horizontalna submeni traka modula se NE PRIKAZUJE (lijeva "Subsections" rubrika je
   navigacija — korisnikov izbor "možda nam ne treba ova horizontalna traka"). Time otpada
   sve pinovanje iz v=623/623b. Klik iz Practice grida vodi na #module — dubina sticky sklopa
   (header 72 + ticker 51.4) ista je kao na javnoj strani (header + submeni), pa postojeći
   #module scroll-margin važi i ovdje. */
body.um-page-dashboard #um-stickybar{ display:none; }

/* v=624 — doktorov "7. Modules" tekst IZNAD Practice grida (doc + korisnik, 2026-07-27):
   isti odobreni tekst i um-key markup kao na modul stranicama, PUNOM širinom dashboard
   kolone (bez marketing asidea); "Module overview" kao serif podnaslov; tanke linije oko
   subhead reda kao na modul stranici. Grid ispod je sama lista modula. */
#dash-practice .dp-modtext{ margin:4px 0 36px; }
#dash-practice .dp-modtext-rule{ border:none; border-top:1px solid var(--rule,rgba(139,111,61,.28));
  margin:18px 0; }
#dash-practice .dp-modtext .um-subhead{ margin-bottom:0; }
#dash-practice .dp-modtext-h{ font-family:'Cormorant Garamond',serif; font-weight:500;
  color:var(--dt-navy,#061f38); font-size:26px; margin:30px 0 10px; }
/* !important jer globalno pravilo max-width:var(--um-box)!important drži sve tekst klase */
#dash-practice .dp-modtext .um-lede, #dash-practice .dp-modtext .um-p{ max-width:none !important; }

/* v=624b — sletanje na #module bez praznine (korisnik, 2026-07-27): naslov modula sjeda ~26px
   ispod trake (sekcija počinje 113px od vrha viewporta — 10px joj se skrije pod sticky
   traku, eyebrow je na ~150). Ista vrijednost važi za dashboard (header+ticker ≈ 123) i za
   javnu stranu (header+submeni ≈ 124). Uz to foundations.js radi tihi re-snap nakon što se
   slike učitaju (anchor je skakao prije slika pa je meta bježala naniže). */
/* html{scroll-padding-top:180px!important} (6199) se SABIRA s marginom, i to u ROOT prostoru
   (van body zooma) — pa se ovdje oduzima 180px podijeljeno zoomom da meta uvijek sjedne na
   113px u body prostoru, na svakom zoom pragu. */
#module{ scroll-margin-top:calc(113px - (180px / var(--um-zoom, 1))) !important; }

/* v=624c — "Module overview" naslov na Practice ekranu (korisnik, 2026-07-27): "Module"
   ostaje navy, "overview" bronza; svaka riječ podvučena ODVOJENO (0.5px .45 kao um-key
   linije), na hover se pali ista um-key animacija (jača crta + blagi bronzani sjaj;
   bronzana riječ potamni kao ključne riječi u tekstu). */
#dash-practice .dp-modtext-h .dp-mh{ padding-bottom:2px;
  border-bottom:0.5px solid rgba(139,111,61,.45);
  transition:color .18s ease, border-color .18s ease, background-color .18s ease; }
#dash-practice .dp-modtext-h .dp-mh--bronze{ color:#8b6f3d; }
#dash-practice .dp-modtext-h .dp-mh:hover{ border-bottom-color:rgba(139,111,61,.95);
  background-color:rgba(139,111,61,.05); }
#dash-practice .dp-modtext-h .dp-mh--bronze:hover{ color:#6b5a2f; }

/* v=624d — naslovi modula ISTO NA SVAKOM EKRANU (korisnik, 2026-07-27): vertikalna linija
   i obrazac iza nje idu DOSLJEDNO u red ispod — "UM and Tones" pa "| C – D – E – F – G –
   A – H – C" ispod. Kod doktora se lomilo, kod korisnika ne, pa je prikaz bio različit;
   sad je deterministički dvoredan na svim širinama. Važi za sve module, javno i dashboard
   (isti partial). */
.um-mp-block .um-h2 .um-modtitle-cont{ display:block; margin-top:8px; }

/* v=625 — linija i IZNAD tab reda (korisnik, 2026-07-28): ista tanka crta kao ispod
   (0.5px rgba .28, puna širina sadržaja). margin-top ide s -9 na -8px (1px zraka više)
   da fade zona ispod tickera (završava tačno na staroj ivici) NE pojede crtu — provjereno
   pixel-scanom na visini crte. Labeli su 14px od obje crte (simetrično kao dole). */
.dt-nav{ border-top:0.5px solid rgba(139,111,61,0.28);
  margin-top:calc(var(--um-fade-h,40px) - 8px); }

/* v=625b — pukotine u gornjem chrome pojasu pri skrolu (korisnik, 2026-07-28): pod body
   zoomom se sticky slojevi (header / ticker / fade) crtaju sa sub-pixel zaokruživanjem pa
   se na njihovim SPOJEVIMA, zavisno od pozicije skrola, otvore prorezi od ~1px kroz koje
   proviri sadržaj. Umjesto krpljenja svakog spoja: PAPER PODLOGA iza cijelog pojasa
   (0 → dno fade zone = 123.4 + 33 ≈ 156px), z ISPOD traka (119 < ticker 120) a IZNAD
   sadržaja — svaki prorez sad pokazuje papir, ne sadržaj. Samo dashboard ekrani s tickerom
   (:has), desktop širine. */
@media (min-width:1200px){
  body.um-page-dashboard:has(.dt-ticker)::before{ content:""; position:fixed; top:0; left:0;
    right:0; height:156px; background:var(--paper,#f5f2ea); z-index:119; pointer-events:none; }
}

/* v=625c — MORE/Search meni ODSJEČEN kod doktora (2026-07-28): kutija koristi 12vh/76vh, a
   vh se pod body zoomom (v=612/613) rendera × faktor — na 1.275 (2560) kutija ispadne 112%
   visine ekrana: dno s "Human Abilities" ispod ivice, unutrašnji skrol ne pomaže jer mu je
   donji dio van ekrana. Na 0.75 (korisnikov laptop) ispadne 57% pa "kod mene radi". Visine
   se dijele zoomom → tačno 12% + ≤76% stvarnog ekrana na SVAKOM pragu; lista unutra ionako
   ima overflow-y:auto pa se do zadnje stavke uvijek dođe skrolom menija. */
.um-palette__box{ top:calc(12vh / var(--um-zoom, 1)); max-height:calc(76vh / var(--um-zoom, 1)); }

/* v=626 — TAB RED POSTAJE TRAKA ispod hodajuće poruke (korisnik, 2026-07-28): tabovi se
   dižu odozdo u sticky bar odmah ispod tickera (123px) — navigacija uvijek pri ruci; traka
   je full-bleed (vw / zoom kao ticker), labeli počinju na lijevoj ravni sadržaja (inner
   1060 centriran), LOG OUT na desnom kraju iste ravni. ISPOD trake dvije linije cijelom
   širinom — deblja (1px --bz2, kao ispod headera) + tanja (0.5px) 4px niže. Fade/maska:
   paper podloga (v=625b) se produžava do ispod trake (206px) i preuzima masku — sadržaj
   nestaje pod trakom; razmak do sadržaja preko margin-bottom (stara fade formula). Gornja
   crta iz v=625 se gasi (tu ulogu sad igra donja ivica tickera). */
.dt-nav{ position:sticky; top:123px; z-index:119; background:var(--paper,#f5f2ea);
  width:calc(100vw / var(--um-zoom, 1)); margin-left:calc(50% - (50vw / var(--um-zoom, 1)));
  margin-top:0; margin-bottom:calc(var(--um-fade-h,43px) - 9px);
  border-top:0; border-bottom:1px solid var(--bz2,#8b6f3d); }
.dt-nav::before{ content:""; position:absolute; top:calc(100% + 4px); left:0; right:0;
  height:0.5px; background:rgba(139,111,61,.45); }
.dt-nav-inner{ max-width:1060px; margin:0 auto; }
body.um-page-dashboard:has(.dt-ticker)::before{ height:206px; z-index:118; }
/* stari fade blok tickera (v=608) sad stoji TAČNO preko labela podignute trake (z 120 > 119,
   neproziran) — labeli su bili nevidljivi; masku je preuzela podloga, blok se gasi */
.dt-ticker::after{ content:none; }
/* sidro modula: chrome je dublji (traka do ~178) — meta sjeda ispod nje */
#module{ scroll-margin-top:calc(167px - (180px / var(--um-zoom, 1))) !important; }

/* v=627 — Home | hodajući tekst | Next U TICKER TRACI (doktor, 2026-07-28): ista konstrukcija
   kao donja traka stranice, samo gore — kutije u stilu donjih (beige #efe9d7, border #8b6f3e,
   hover #f6f2e4, serif), red poravnat s ravni sadržaja (1060 centriran kao tabovi), marquee
   prolazi kroz prazan prostor između (postojeći edge fade mask ostaje na inner-u). Home →
   Today, Next → sljedeći ekran dashboarda. */
.dt-ticker .dt-tk-row{ max-width:1060px; margin:0 auto; height:100%;
  display:flex; align-items:center; gap:16px; }
.dt-ticker .dt-ticker-inner{ flex:1; min-width:0; }
.dt-tk-btn{ flex:none; display:flex; align-items:center; justify-content:center;
  width:122px; height:33px; box-sizing:border-box;
  font-family:'Cormorant Garamond',serif; font-size:15px; color:#5e4a26; text-decoration:none;
  background:#efe9d7; border:1px solid #8b6f3e; transition:background-color .2s ease; }
.dt-tk-btn:hover{ background:#f6f2e4; }
@media (max-width:760px){ .dt-tk-btn{ width:80px; font-size:13px; } }

/* v=627b — "Back to the top of the page" u sredini trake (korisnik, 2026-07-28): ČIST natpis
   bez kutije, identična slova donjem (serif, razmaknuta verzala, strelice + crtice); marquee
   se provlači ISPOD kroz mekani paper prelaz (gradient, bez ivica). Klik → vrh stranice. */
.dt-ticker .dt-tk-row{ position:relative; }
.dt-tk-top{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:10px; padding:4px 26px; text-decoration:none;
  background:linear-gradient(to right, rgba(245,242,234,0) 0, var(--paper,#f5f2ea) 22px,
    var(--paper,#f5f2ea) calc(100% - 22px), rgba(245,242,234,0) 100%);
  z-index:2; }
.dt-tk-top__text{ font-family:'Cormorant Garamond',serif; font-size:13.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#5e4a26; white-space:nowrap;
  transition:color .18s ease; }
.dt-tk-top__arrow{ font-family:'Cormorant Garamond',serif; font-size:12px; color:#8b6f3e; }
.dt-tk-top__div{ width:1px; height:12px; background:rgba(139,111,62,.55); }
.dt-tk-top:hover .dt-tk-top__text{ color:#8b6f3e; }

/* v=627d — KONAČNO po doktoru (2026-07-28): sva tri elementa u traci su PRAVOUGAONICI kao
   u donjoj traci — Home i Next iste beige kutije (#efe9d7, 1px #8b6f3e, hover #f6f2e4),
   Home počinje na liniji logoa, Next završava na liniji Dashboard ikonice (red klonira
   header inner: 1400 + 48px padding → 328/1632); "Back to the top" dobija SVOJ PROŠIRENI
   pravougaonik (paper pozadina, border kao donji centralni #a88955, hover blagi bronzani
   tint), centriran. Hodajući tekst prolazi kroz dva prazna polja i nestaje pod kutijama.
   (Međuverzija bez okvira isprobana pa odbačena — doktorova odluka.) */
.dt-ticker .dt-tk-row{ max-width:1400px; padding:0 48px; box-sizing:border-box; }
.dt-tk-side{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  display:flex; align-items:center; justify-content:center; width:122px; height:33px;
  box-sizing:border-box; text-decoration:none; white-space:nowrap;
  font-family:'Cormorant Garamond',serif; font-size:15px; color:#5e4a26;
  background:#efe9d7; border:1px solid #8b6f3e; transition:background-color .2s ease; }
.dt-tk-side:hover{ background:#f6f2e4; }
.dt-tk-side--home{ left:48px; }
.dt-tk-side--next{ right:48px; }
.dt-tk-top{ width:620px; height:33px; box-sizing:border-box; justify-content:center; padding:0;
  background:transparent; border:1px solid var(--bz2,#a88955);
  transition:background-color .2s ease; }
.dt-tk-top:hover{ background:rgba(139,111,61,.06); }
/* okvir je proziran — marquee prolazi KROZ njega; samo natpis nosi meki paper prelaz */
.dt-tk-top__in{ display:flex; align-items:center; gap:10px; height:100%; padding:0 26px;
  background:linear-gradient(to right, rgba(245,242,234,0) 0, var(--paper,#f5f2ea) 22px,
    var(--paper,#f5f2ea) calc(100% - 22px), rgba(245,242,234,0) 100%); }
@media (max-width:900px){ .dt-tk-side{ display:none; } .dt-tk-top{ width:auto; padding:0 20px; } }

/* v=627e — centralni pravougaonik IDENTIČNE širine kao donji (korisnik, 2026-07-28):
   donji "Back to the top" renderuje 734px (izmjereno, konstantno na 1470 i 1920) — gornji
   sa 620 ide na istih 734. */
.dt-tk-top{ width:734px; }

/* v=627f — i Home/Next na širinu donjih kutija (korisnik, 2026-07-28): donje strane su
   227px (izmjereno obje) — gornje sa 122 idu na istih 227. Centralni provjeren: 734 = 734. */
.dt-tk-side{ width:227px; }

/* v=627g — DOSLOVNO IDENTIČNO donjoj traci (korisnik, 2026-07-28: "kao da si uzeo odozdo i
   prenio gore"): sve mjere i tipografija prekopirane s donjih elemenata (computed): kutije
   227×50.7, tekst Cormorant 14px #5e4a26; centar 734×50.7, italic VERZAL 14px ls 1.68px,
   border #8b6f3e kao kutijama; strelice = puni CSS trouglovi (baza 10px, visina 8px, --bz1)
   kao dole; crtice 1px × 1.25em; razmak 15px. JEDINI izuzetak (korisnikov): centar ostaje
   PROZIRAN — hodajući tekst prolazi kroz njega. Traka raste 51→69px da elementi od 50.7
   dišu kao prije (9px sa svake strane); chrome ispod pomjeren za +18: tabovi 123→141,
   podloga 206→224, sidro modula 167→185. */
.dt-ticker{ height:69px; }
.dt-nav{ top:141px; }
body.um-page-dashboard:has(.dt-ticker)::before{ height:224px; }
#module{ scroll-margin-top:calc(185px - (180px / var(--um-zoom, 1))) !important; }
.dt-tk-side{ height:50.7px; font-size:14px; }
.dt-tk-top{ width:734px; height:50.7px; border-color:#8b6f3e; }
.dt-tk-top__in{ gap:15px; }
.dt-tk-top__text{ font-size:14px; letter-spacing:1.68px; font-style:italic; }
.dt-tk-top__arrow{ color:transparent; position:relative; width:10px; height:8px; }
.dt-tk-top__arrow::before{ content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:8px solid var(--bz1,#8b6f3d); }
.dt-tk-top__div{ width:0; height:1.25em; border-left:1px solid #5e4a26; background:none; }

/* v=627h — i bronzane vertikalne linije prenesene (korisnik, 2026-07-28, po inspectu donje
   trake): (1) LIJEVA ivica svakog elementa je deblja — 2px #8b6f3d (ostale ostaju 1px),
   kao dole; (2) u RAZMACIMA između kutija stoje 1px × 50px linije rgba(139,111,61,.28) na
   -30px od centralnog elementa, kao dole (link::before/::after). */
.dt-tk-side, .dt-tk-top{ border-left:2px solid #8b6f3d; }
.dt-tk-top::before, .dt-tk-top::after{ content:""; position:absolute; top:50%;
  transform:translateY(-50%); width:1px; height:50px; background:rgba(139,111,61,.28); }
.dt-tk-top::before{ left:-30px; }
.dt-tk-top::after{ right:-30px; }

/* v=627i — hodajući tekst SAMO u centralnom pravougaoniku (doktor, 2026-07-28): natpis
   "back to the top" izvađen iz gornjeg centra (donji ga zadržava), marquee živi unutar
   okvira i gasi se ~10px (2–3 mm) PRIJE ivica — ne umire na linijama nego u zraku. Centar
   više nije link pa hover tint otpada. BITNO: kad je marquee ušao u okvir, red je ostao
   bez in-flow sadržaja pa se skupio na vlastiti padding (96px) i sve se zbilo u sredinu —
   width:100% ga drži razvučenim. */
.dt-ticker .dt-tk-row{ width:100%; }
.dt-tk-top{ display:flex; align-items:center; overflow:hidden; }
.dt-tk-top:hover{ background:transparent; }
.dt-tk-top .dt-ticker-inner{ width:100%; flex:1; min-width:0;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 10px,
    #000 calc(100% - 10px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 10px,
    #000 calc(100% - 10px), rgba(0,0,0,0) 100%); }
/* linije u razmacima: overflow:hidden okvira je klipovao njegove ::before/::after na -30px —
   sele na RED, iste pozicije (30px od ivica okvira 734 → calc(50% − 397px) sa obje strane) */
.dt-tk-top::before, .dt-tk-top::after{ content:none; }
.dt-tk-row::before, .dt-tk-row::after{ content:""; position:absolute; top:50%;
  transform:translateY(-50%); width:1px; height:50px; background:rgba(139,111,61,.28); }
.dt-tk-row::before{ left:calc(50% - 397px); }
.dt-tk-row::after{ right:calc(50% - 397px); }

/* v=627k — ~3mm ČISTOG ZRAKA uz ivice okvira (korisnik, 2026-07-28): tekst se potpuno gasi
   12px prije ivice pa tek onda izranja (prije je fade počinjao NA ivici pa su slova dirala
   liniju) — isto iznutra s obje strane. */
.dt-tk-top .dt-ticker-inner{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 12px,
    #000 26px, #000 calc(100% - 26px), rgba(0,0,0,0) calc(100% - 12px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 12px,
    #000 26px, #000 calc(100% - 26px), rgba(0,0,0,0) calc(100% - 12px), rgba(0,0,0,0) 100%); }

/* v=627l — doktor (2026-07-28): (1) centralni element PROŠIREN prema Home/Next tako da je
   horizontalni razmak do njih JEDNAK vertikalnom zraku kutija do linija trake (izmjereno
   9.16px; okvir 734 → 831.7); (2) deblje bronzane vertikalne linije (2px lijeve ivice) ne
   trebaju NI U JEDNOM gornjem elementu — sve ivice nazad na 1px (donja traka netaknuta);
   s njima odlaze i 1px linije iz razmaka (u 9px polju nemaju mjesta). */
.dt-tk-top{ width:831.7px; }
.dt-tk-side, .dt-tk-top{ border-left-width:1px; }
.dt-tk-row::before, .dt-tk-row::after{ content:none; }

/* v=627m — (korisnik, 2026-07-28): (1) tanka 0.5px linija ISPOD tab trake uklonjena
   (ostaje samo deblja 1px); paper podloga (224px) i dalje pokriva cijeli pojas do ispod
   trake pa iza uklanjanja NEMA pukotine ni praznine između zadnje linije i fadea;
   (2) unutrašnjost centralnog elementa = ista beige boja kao bočne kutije (#efe9d7) —
   hodajući tekst sada teče po istoj podlozi. */
.dt-nav::before{ content:none; }
.dt-tk-top{ background:#efe9d7; }

/* v=627n — elementi 3px BLIŽE headeru + stegnute linije (korisnik, 2026-07-28): tri kutije
   dižu se 3px iznad centra trake; druga zlatna linija (bila na ~75, 4px ispod headerove na
   ~71) diže se 2px pa je razmak para 4 → 2px. */
.dt-tk-side, .dt-tk-top{ top:calc(50% - 3px); }
.dt-ticker::before{ top:-2px; }
/* v=627n-b — druga zlatna linija VRAĆENA na staro mjesto (korisnik: linije se ne guraju
   uz header) — pogrešno sam "razmak linija" stegnuo pomjeranjem linije ka headeru; par
   ostaje 71/75 kako je bio, podignute su samo kutije (3px). */
.dt-ticker::before{ top:0; }

/* v=627p — LAJSNA KAO CJELINA bliže elementima (korisnik potvrdio plan, 2026-07-28):
   prazan pojas ISPOD kutija u traci (bio ~12px) izjednačava se s gornjim (~6.8px) —
   kutije se fiksiraju na 6.8px od vrha trake (umjesto centriranja), traka se skraćuje
   69 → 64.3px, pa se njena donja linija i cijela lajsna (TODAY/…, unutrašnjih 14/14
   NETAKNUTO) dižu zajedno ~4.7px. Prate samo zavisni: tabovi sticky 141→136.4,
   podloga 224→219, sidro modula 185→180. */
.dt-tk-side{ top:4.1px; transform:none; }
.dt-tk-top{ top:4.1px; transform:translateX(-50%); }
/* 4.1 a ne 6.8: red (dt-tk-row) počinje 2.7px ispod vrha trake, pa se offset umanjuje da
   kutije ostanu TAČNO gdje su bile (6.8 od vrha trake) — gornji razmak se NE mijenja */
.dt-ticker{ height:64.3px; }
.dt-nav{ top:136.4px; }
body.um-page-dashboard:has(.dt-ticker)::before{ height:219px; }
#module{ scroll-margin-top:calc(180px - (180px / var(--um-zoom, 1))) !important; }

/* v=627s — donja linija trake + cijela lajsna GORE za 2.6px (korisnik, 2026-07-28):
   pixel-scan pokazao vidljive razmake oko kutija 3.4 gore / 6.0 dole (jednakost sam ranije
   pogrešno mjerio od nevidljive ivice trake) — traka se skraćuje 64.3 → 61.7 pa je i dole
   3.4px; lajsna prati, zavisni također (tabovi 133.8, podloga 216, sidro 177). */
.dt-ticker{ height:61.7px; }
.dt-nav{ top:133.8px; }
body.um-page-dashboard:has(.dt-ticker)::before{ height:216px; }
#module{ scroll-margin-top:calc(177px - (180px / var(--um-zoom, 1))) !important; }

/* v=627t — po JEDNA vertikalna linija TAČNO NA SREDINI svakog razmaka (korisnik,
   2026-07-28): 1px, ista bronza kao donje (.28), visinom PORAVNATA s kutijama
   (top 4.1 / h 50.7 — od vrha do dna kutija). Sredina razmaka: 50% ∓ 420.45. */
.dt-tk-row::before, .dt-tk-row::after{ content:""; position:absolute;
  top:4.1px; height:50.7px; width:1px; background:rgba(139,111,61,.28); }
.dt-tk-row::before{ left:calc(50% - 420.9px); }
.dt-tk-row::after{ right:calc(50% - 420.9px); }

/* v=627u — (korisnik, 2026-07-28): (1) vertikalne linije u razmacima — SREDINA po formuli
   koja važi na SVAKOJ širini reda (sredina lijevog polja = 25% − 70.9px; fiksni offset
   50%−420.9 je na užim prozorima lijepio liniju uz okvir), visina/pozicija ISTA kao kutije
   (top 4.1 / 50.7, isti koordinatni sistem reda); (2) DOLE ispod trake drugi horizontalni
   par kao gore ispod headera: donja ivica trake pojačana na 1px #a88955 + druga linija
   4px niže (identičan par 71/75 → 132/136), pune širine. */
.dt-tk-row::before{ left:calc(25% - 70.9px); }
.dt-tk-row::after{ right:auto; left:calc(75% + 69.9px); }
/* v=627v — KOREN korisnikove "prekratke linije gore": iz v=627j bloka je u kaskadi OSTAO
   transform:translateY(-50%) pa je liniju vukao ~25px iznad (header joj prekrije vrh, pa
   izgleda ko da ide od vrha trake do pola kutije). Kutije imaju transform:none od v=627p —
   sad i linije: top 4.1 + 50.7 u koordinatama reda = tačno raspon kutija. */
.dt-tk-row::before, .dt-tk-row::after{ transform:none; }
.dt-ticker{ border-bottom:1px solid #a88955; }
.dt-ticker::after{ content:""; position:absolute; top:calc(100% + 3px); left:0; right:0;
  height:1px; background:#a88955; pointer-events:none; }

/* v=627x — donji par: DEBLJA GORE (1.5px — 2px se na korisnikovom ekranu crtao kao greda),
   TANKA DOLE (0.5px); pozicije iste (deblja top 132, tanka top 136, par 4px kao gornji),
   visina trake 61.5 (border-box) drži liniju na 132. */
.dt-ticker{ border-bottom:1.5px solid #a88955; height:61.5px; }
.dt-ticker::after{ height:0.5px; top:calc(100% + 2.5px); }

/* v=628 — journey: BEZ linija između faznih kutija (korisnik, 2026-07-30): prelazni
   segmenti konektora (pravilo na ~19260 koje ih je crtalo "kroz" razmak) gase se za SVE
   kutije — kao što već nema linije između Entrance Testa i prve faze (19353). Linija ostaje
   samo UNUTAR kutije, između njena dva kružića. */
#dash-today .dt-phase + .dt-phase .dt-phase-steps .dt-step:first-child::before{ display:none; }

/* v=628b — SVE ispod deblje linije spušteno za TAČNO 1px (korisnik, 2026-07-30): tanka
   linija (136→137) i kompletna lajsna s tabovima kao cjelina (sticky 133.8→134.8 +
   margin-top:1px za tok); deblja linija i unutrašnjost lajsne netaknute; podloga i sidro
   prate (+1). */
.dt-ticker::after{ top:calc(100% + 3.5px); }
.dt-nav{ top:134.8px; margin-top:1px; }
body.um-page-dashboard:has(.dt-ticker)::before{ height:217px; }
#module{ scroll-margin-top:calc(178px - (180px / var(--um-zoom, 1))) !important; }

/* v=628c — vertikalne linije u razmacima ISTE TEŽINE kao ramovi kutija (korisnik,
   2026-07-30): bile 1px rgba .28 (blijede pa djeluju tanje) → puna bronza rama #8b6f3e,
   1px kao i ramovi. */
.dt-tk-row::before, .dt-tk-row::after{ background:#8b6f3d; }

/* v=628d — desna linija nije bila na sredini kod korisnika: linije se SIDRE ZA ELEMENTE
   (pseudo Home kutije desno / Next kutije lijevo, na pola razmaka od ruba) umjesto
   procentne matematike reda — ne mogu omanuti ni na jednoj širini. Mjere preslikane s
   lijeve (dobre): 1px #8b6f3d, visina = puna visina kutije (s ramovima). */
.dt-tk-row::before, .dt-tk-row::after{ content:none; }
.dt-tk-side--home::before, .dt-tk-side--home::after,
.dt-tk-side--next::before, .dt-tk-side--next::after{ content:""; position:absolute;
  top:-1px; height:calc(100% + 2px); width:1px; background:#8b6f3d; }
.dt-tk-side--home::before{ left:-6.1px; }
.dt-tk-side--home::after{ right:-6.1px; } /* egzaktno na sredinu (computed) */
.dt-tk-side--next::before{ left:-6.1px; } /* egzaktno: centar linije = sredina razmaka (computed) */
.dt-tk-side--next::after{ right:-6.1px; }

/* v=628e — centralni element UVUČEN po 1px sa obje strane (korisnik, 2026-07-30):
   831.7 → 829.7, ostaje centriran; linije i sve ostalo NETAKNUTO. */
.dt-tk-top{ width:829.7px; }

/* v=628g — fazni kvadratići journey trake se AKTIVIRAJU na hover (korisnik, 2026-07-30):
   ista beige animacija kao kartice ispod (#efe9d7, .18s). */
#dash-today .dt-phase{ transition:background-color .18s ease; }
#dash-today .dt-phase:hover{ background-color:var(--paper2,#efe9d7); }

/* v=628h — kvadratići ZAOBLJENI kao ostale kartice (14px) + hover POPRAVLJEN da se beige
   pojavljuje UNUTAR zaobljene forme (korisnik, 2026-07-30): okvir je ::before pseudo
   (inset 0 0 26px — sub-red je ispod njega), pa radius i fill idu na NJEGA; četvrtasti
   fill cijele kolone iz v=628g se gasi. */
#dash-today .dt-phase::before{ border-radius:14px; transition:background-color .18s ease; }
#dash-today .dt-phase:hover{ background-color:transparent; }
#dash-today .dt-phase:hover::before{ background-color:var(--paper2,#efe9d7); }

/* ============ v=629 (2026-07-30) — /memory sitnice (doctor):
   (1) "Neuroplasticity" in the 3.2 title wrapped as em.um-uline in memory.ejs (same bronze italic
       + static line + hover as "Learning") — view change, no CSS needed. The big aside number
       ("3.2") already carries the sitewide v=489–491 bronze/underline/hover — untouched.
   (2) the block sub-heads ("The brain in numbers", "The brain — a supercomputer…") get the SAME
       treatment as the method 4.1 sub-heads (v=298→v=304): the long static 66ch rule dropped,
       a text-width 0.75px grey #6b6253 line instead, disappearing on hover.
   Scoped to body.um-page-memory. ============ */
body.um-page-memory .um-sub{
  border-bottom:none !important;
  /* NB: stays display:block (unlike method's inline-block) — an inline-block h4 glues itself
     to a preceding inline intro line ("One of its most important capabilities…" + THE BRAIN IN
     NUMBERS on one row); the text-decoration underline hugs the text width on a block anyway. */
  text-decoration-line:underline !important;
  text-decoration-color:#6b6253 !important;
  text-decoration-thickness:0.75px !important;
  text-underline-offset:3px !important;
  transition:text-decoration-color .18s ease !important;
}
body.um-page-memory .um-sub:hover{ text-decoration-color:transparent !important; }

/* ============ v=629b (2026-07-30, user) — /memory blok-podnaslovi, dvije popravke:
   (1) ANIMACIJA kao na velikim aside brojevima (v=491 invert): topla traka rgba(139,111,61,.05)
       STOJI u mirnom stanju i NESTANE na hover; linija ispod ostaje STATIČNA u oba stanja
       (identično ponašanju broja — poništava v=629 gašenje linije na hover). Traka grli tekst
       (width:fit-content, blok ostaje u svom redu) s 8px zraka lijevo/desno (negativna margina
       drži tekst na mjestu) i 3px iznad (margin-top kompenzovan 30px→27px).
   (2) UZROK USKIH podnaslova: naslijeđeni max-width:66ch (535px layout) reže ih ispod stvarne
       širine kolone (~717px layout), pa se npr. "…UNIMAGINABLE | STORAGE CAPACITY" lomio iako
       tekst staje — cap skinut, lome se tek na pravoj širini kolone. ============ */
body.um-page-memory .um-sub{
  max-width:none !important;
  width:fit-content;
  background-color:rgba(139,111,61,0.05);
  padding-top:3px !important; padding-left:8px !important; padding-right:8px !important;
  margin-top:27px !important; margin-left:-8px !important;
  transition:background-color .18s ease !important;
}
body.um-page-memory .um-sub,
body.um-page-memory .um-sub:hover{ text-decoration-color:#6b6253 !important; }
body.um-page-memory .um-sub:hover{ background-color:transparent; }

/* ============ v=629c (2026-07-30, user) — /method 4.1 podnaslovi ("Phases…", "Structure of the
   Training Process"): ISTA animacija kao /memory v=629b (= kao veliki aside brojevi v=491):
   topla traka rgba(139,111,61,.05) STOJI u miru i NESTANE na hover; linija ispod ostaje
   STATIČNA u oba stanja (poništava v=304 gašenje linije na hover). Već su inline-block pa traka
   grli tekst; isti 8px zrak sa strana + 3px iznad, negativne margine drže tekst na mjestu.
   4.2 podnaslov ("Selection and Definition…") namjerno NIJE diran — on zadržava stari stil
   duge crte (odluka iz v=294-ere "stays as-is"). ============ */
#me-process .um-sub{
  background-color:rgba(139,111,61,0.05);
  padding-top:3px !important; padding-left:8px !important; padding-right:8px !important;
  margin-top:27px !important; margin-left:-8px !important;
  transition:background-color .18s ease !important;
}
#me-process .um-sub,
#me-process .um-sub:hover{ text-decoration-color:#6b6253 !important; }
#me-process .um-sub:hover{ background-color:transparent; }

/* ============ v=630 (2026-07-30, user) — main chroma header navigation:
   each primary item uses the same 44px / 14px capsule geometry as the dashboard
   programme chip. Old dividers and word underlines are removed; hover and the
   current page use the shared warm beige activation colour. ============ */
.um-topbar__nav-left{
  gap:0 !important;
}
.um-topbar__nav-left > .um-nav__link{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px !important;
  border:1px solid rgba(139,111,61,0.28) !important;
  border-radius:14px;
  background-color:#fffdf8;
  background-image:none !important;
  background-size:0 0 !important;
  transition:background-color .18s ease, color .18s ease;
}
.um-topbar__nav-left > .um-nav__link:hover,
.um-topbar__nav-left > .um-nav__link.is-active{
  color:var(--bz1,#8b6f3d) !important;
  background-color:var(--paper2,#efe9d7);
  background-image:none !important;
  background-size:0 0 !important;
}
.um-topbar__nav-left > * + *::before{
  content:none !important;
}

/* v=630b — nav rectangles: the text-width underline appears on hover and
   remains visible for the current page, matching the dashboard section tabs. */
.um-topbar__nav-left > .um-nav__link{
  border-radius:0;
  background-color:transparent;
  text-decoration-line:none !important;
  text-decoration-color:transparent !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:3px !important;
  transition:background-color .18s ease, color .18s ease, text-decoration-color .18s ease;
}
.um-topbar__nav-left > .um-nav__link:hover,
.um-topbar__nav-left > .um-nav__link.is-active{
  color:var(--bz1,#8b6f3d) !important;
  background-color:#f6f2e4;
  text-decoration-color:var(--bz1,#8b6f3d) !important;
}

/* v=630bb — primary header labels use the same sentence-case typography as
   the dashboard section rectangles. Markup already contains title case. */
.um-topbar__nav-left > .um-nav__link{
  font-family:'Cormorant Garamond',serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  line-height:1 !important;
  text-transform:none !important;
  padding-left:29px !important;
  padding-right:29px !important;
}
.um-topbar__nav-left > .um-nav__link:not([href="/programmes"]){
  padding-left:33px !important;
  padding-right:33px !important;
}
.um-topbar__nav-left > .um-nav-sep{
  display:block;
  width:calc(1px / var(--um-zoom,1));
  height:44px;
  flex:0 0 calc(1px / var(--um-zoom,1));
  margin:0 calc(7px / var(--um-zoom,1));
  border:0 !important;
  background:rgba(139,111,61,0.55);
  opacity:1;
  pointer-events:none;
}
.um-topbar__nav-left .um-nav__label{
  position:relative;
  display:inline-block;
  text-decoration:none;
}
.um-topbar__nav-left .um-nav__label::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% + .5em + 1px);
  width:150%;
  height:calc(1px / var(--um-zoom,1));
  background:#8b6f3d;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.um-topbar__nav-left > .um-nav__link:hover .um-nav__label::after,
.um-topbar__nav-left > .um-nav__link:focus-visible .um-nav__label::after,
.um-topbar__nav-left > .um-nav__link.is-active .um-nav__label::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* v=630c — bottom Home / Next boxes: reveal a centred bronze rule beneath
   the label on hover. At 2.5x the word width it reads as a deliberate marker,
   while leaving the box geometry and text position untouched. */
.um-to-top__side .um-to-top__text{
  position:relative;
  display:inline-block;
}
.um-to-top__side .um-to-top__text::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% + .5em + 1px);
  bottom:auto;
  width:250%;
  height:1px;
  background:#8b6f3d;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.um-to-top__side:hover .um-to-top__text::after,
.um-to-top__side:focus-visible .um-to-top__text::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* v=630d — dashboard ticker Home / Next from _dash_nav.ejs: the same wide,
   close hover marker as the bottom navigation, without consuming the side
   anchors' pseudo-elements (they already draw the vertical gap dividers). */
.dt-tk-side__label{
  position:relative;
  display:inline-block;
}
.dt-tk-side__label::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% + .5em + 1px);
  width:250%;
  height:1px;
  background:#8b6f3d;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.dt-tk-side:hover .dt-tk-side__label::after,
.dt-tk-side:focus-visible .dt-tk-side__label::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* v=630e — dashboard section tabs: sharp 44px rectangles matching the main
   header controls, vertically centred inside the existing 49px nav strip so
   its chrome geometry does not move. Every label keeps a word-width rule;
   only the current screen receives the light warm fill. Log out is excluded. */
.dt-nav-inner{
  max-width:1400px;
  height:49px;
  padding:0 calc(48px + (45.354px / var(--um-zoom,1)));
  box-sizing:border-box;
  gap:0;
  align-items:center;
}
.dt-nav-link{
  box-sizing:border-box;
  height:36px;
  transform:translateY(1px);
  padding:0 15px;
  font-size:11.5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(139,111,61,0.28);
  border-radius:0;
  background:transparent;
  text-decoration:none;
  overflow:hidden;
}
.dt-nav-link:not(.dt-nav-out),
.dt-nav-link:not(.dt-nav-out):hover,
.dt-nav-link:not(.dt-nav-out).is-active{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:#5e4a26;
}
.dt-nav-link{
  width:calc((1304px - (167.708px / var(--um-zoom,1))) / 8);
  flex:0 0 calc((1304px - (167.708px / var(--um-zoom,1))) / 8);
}
.dt-nav-sep{
  display:block;
  flex:0 0 calc(1px / var(--um-zoom,1));
  width:calc(1px / var(--um-zoom,1));
  height:36px;
  margin:0 calc(5px / var(--um-zoom,1));
  background:rgba(139,111,61,0.28);
  transform:translateY(1px);
  pointer-events:none;
}
.dt-nav-link:hover{
  background:#fffdf8;
}
.dt-nav-link.is-active{
  background:#fffdf8;
  border-bottom-color:rgba(139,111,61,0.28);
}
.dt-nav .dt-nav-link::after{
  content:none !important;
}
.dt-nav-link__label{
  position:relative;
  display:inline-block;
}
.dt-nav-link__label::after{
  content:"" !important;
  position:absolute;
  left:50%;
  right:auto;
  top:calc(50% + .5em + 1px);
  bottom:auto;
  width:180%;
  height:calc(1px / var(--um-zoom,1));
  background:#8b6f3d;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.dt-nav-link:nth-of-type(1) .dt-nav-link__label::after,
.dt-nav-link:nth-of-type(5) .dt-nav-link__label::after{
  width:250%;
}
.dt-nav-link:nth-of-type(7) .dt-nav-link__label::after,
.dt-nav-link:nth-of-type(8) .dt-nav-link__label::after{
  width:140%;
}
.dt-nav-link:hover .dt-nav-link__label::after,
.dt-nav-link:focus-visible .dt-nav-link__label::after,
.dt-nav-link.is-active .dt-nav-link__label::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}
.dt-nav-out{
  margin-left:0;
}

/* v=631 — compact dashboard navigation on phones: one swipeable row instead of
   wrapped boxes. The current screen is centred on entry and every item remains
   a comfortably sized touch target. Desktop geometry above is unchanged. */
@media (max-width:760px){
  .dt-nav{
    overflow:hidden;
  }
  .dt-nav-inner{
    width:100%;
    max-width:none;
    height:49px;
    margin:0;
    padding:0 12px;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .dt-nav-inner::-webkit-scrollbar{
    display:none;
  }
  .dt-nav-link{
    width:auto;
    min-width:88px;
    height:34px;
    flex:0 0 auto;
    padding:0 15px;
    transform:none;
    scroll-snap-align:center;
  }
  .dt-nav-link--materials,
  .dt-nav-link:nth-of-type(7){
    min-width:104px;
  }
  .dt-nav-sep{
    width:1px;
    height:34px;
    flex:0 0 1px;
    margin:0 5px;
    transform:none;
  }
  .dt-nav-link:active{
    background:#fffdf8;
  }
  .dt-nav-link__label::after{
    height:1px;
  }
}

/* v=632 — programme code in the materials rubric: editorial italic with an
   active-style rule at rest; hovering the heading quietly removes the rule. */
#dash-account .dac-mat-head .dac-programme-label,
#dash-account .dac-mat-head .dac-programme-code{
  text-decoration-line:underline;
  text-decoration-color:#8b6f3d;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color .18s ease;
}
#dash-account .dac-mat-head .dac-programme-code{
  font-style:italic;
}
#dash-account .dac-mat-head .dac-programme-label{
  font-size:1.08em;
}
#dash-account .dac-mat-head .dac-programme-label:hover,
#dash-account .dac-mat-head .dac-programme-code:hover{
  text-decoration-color:transparent;
}

/* v=633 — every current dashboard H1 carries its own bronze title rule.
   Each semantic mark responds independently, notably greeting and first name. */
.dt-hello .dt-title-mark{
  text-decoration-line:underline;
  text-decoration-color:#8b6f3d;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color .18s ease;
}
.dt-hello .dt-title-mark:hover{
  text-decoration-color:transparent;
}

/* v=633b — stronger dashboard sign-out label, matching H1 navy. */
.dt-nav-link.dt-nav-out[href="/logout"]{
  color:var(--dt-navy,#061f38);
}
.dt-nav-link.dt-nav-out[href="/logout"] .dt-nav-link__label{
  text-decoration-line:underline;
  text-decoration-color:#8b6f3d;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color .18s ease;
}
.dt-nav-link.dt-nav-out[href="/logout"]:hover .dt-nav-link__label{
  text-decoration-color:transparent;
}
.dt-nav-link.dt-nav-out[href="/logout"] .dt-nav-link__label::after{
  content:none !important;
}

/* v=633c — materials intro and its shared header rule sit 5px lower; the
   programme chip and every other dashboard header remain untouched. */
#dash-account[aria-label="Learning materials"] .dt-sub{
  margin-top:11px;
}

/* v=633d — each materials-format label is marked independently; separators
   stay clean while the label receives the standard warm dashboard hover. */
#dash-account .dac-formats .dac-format-mark{
  border-bottom:0.5px solid rgba(139,111,61,.45);
  padding-bottom:1px;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#dash-account .dac-formats .dac-format-mark:hover{
  color:#6b5a2f;
  border-bottom-color:rgba(139,111,61,.95);
  background-color:rgba(139,111,61,.05);
}

/* v=634 — primary-header and dashboard-tab rules share one exact stroke. */
.um-topbar__nav-left .um-nav__label::after,
.dt-nav-link__label::after{
  height:calc(1px / var(--um-zoom,1)) !important;
  background-color:#8b6f3d !important;
}

/* v=635 — every public sticky submenu mirrors the dashboard section tabs:
   numberless title-case rectangles, real separators, and independent active
   or hover rules. The rail remains horizontally scrollable on narrow screens. */
.um-stickybar__inner{
  height:51px !important;
  padding:0 15px !important;
  gap:0 !important;
  align-items:center !important;
  font-family:'Cormorant Garamond',serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
.um-stickybar__item,
.um-stickybar__section{
  position:relative !important;
  box-sizing:border-box !important;
  height:36px !important;
  min-width:88px;
  padding:0 15px !important;
  margin:0 !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  overflow:hidden;
  color:#5e4a26 !important;
  background:transparent !important;
  border:1px solid rgba(139,111,61,0.28) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease !important;
}
.um-stickybar__item:hover,
.um-stickybar__item.is-active{
  color:#5e4a26 !important;
  background:#fffdf8 !important;
  border-bottom-color:rgba(139,111,61,0.28) !important;
}
.um-stickybar__item::before,
.um-stickybar__item::after,
.um-stickybar__section::before,
.um-stickybar__section::after{
  content:none !important;
}
.um-stickybar__sep{
  display:block;
  width:calc(1px / var(--um-zoom,1));
  height:36px;
  flex:0 0 calc(1px / var(--um-zoom,1));
  margin:0 calc(5px / var(--um-zoom,1));
  background:rgba(139,111,61,0.28);
  pointer-events:none;
}
.um-stickybar__label{
  position:relative;
  display:inline-block;
}
.um-stickybar__label::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% + .5em + 1px);
  width:100%;
  height:calc(1px / var(--um-zoom,1));
  background:#8b6f3d;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.um-stickybar__item--short .um-stickybar__label::after{
  width:180%;
}
.um-stickybar__item:hover .um-stickybar__label::after,
.um-stickybar__item:focus-visible .um-stickybar__label::after,
.um-stickybar__item.is-active .um-stickybar__label::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* v=636 — public ticker/submenu junction uses the dashboard double-rule
   unchanged; only duplicate stickybar chrome is suppressed. */
.um-public-ticker + .um-stickybar{
  border-top:0 !important;
  z-index:119 !important;
}
.um-public-ticker + .um-stickybar::before{
  content:none !important;
}
.um-public-ticker + .um-stickybar .um-stickybar__inner{
  width:100% !important;
  max-width:1400px !important;
  height:49px !important;
  box-sizing:border-box !important;
  padding-left:calc(41.9px - (5px / var(--um-zoom,1))) !important;
  padding-right:calc(41.9px - (5px / var(--um-zoom,1))) !important;
}

/* v=637 — centre the complete desktop topbar as one rigid group.  The
   scale-aware optical correction balances both outside edges across desktop
   zoom levels; no spacing inside the brand, nav or icon groups moves. */
@media (min-width:1300px){
  .um-topbar__inner{
    transform:translateX(calc(12px - (57px / var(--um-zoom,1))));
  }
}

/* v=638 — dark lead-in phrases inside the shared announcement ticker. */
.dt-ticker-seg .dt-ticker-ink{
  color:#061f38;
}

/* v=639 — announcement copy matches the Today / Progress tab typography. */
.dt-ticker-seg{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  line-height:1;
  text-transform:uppercase;
}
.dt-ticker-stars{
  display:inline-block;
  font-size:.65em;
  font-weight:400;
  color:#8b6f3e;
  opacity:.65;
  vertical-align:.08em;
}

/* v=640 — (doktor, 2026-08-01) OBRNUTI KROV, pojednostavljena verzija: javni submenu je
   sada DOSLOVNO ista traka kao dashboard sekcijski tabovi (.dt-nav-inner, v=630e) — 8
   jednakih pravougaonika koji ravnomjerno popune isti 1400px rail. Lijeva i desna margina
   su zato jednake PO KONSTRUKCIJI na svakoj širini, bez ijednog magičnog broja: rail je
   centriran (margin:0 auto, već iz bloka na 6534), inset je isti kao na dashboardu
   (48px + 45.354px/zoom), a slotovi dijele ostatak (flex:1 1 0). Na 1400px railu to daje
   iste brojke kao dashboardova formula (1304px − 167.708px/zoom)/8, a na užem railu se
   slotovi skupe umjesto da iscure van trake. Blokovi su PRAZNI (brojevi 1–8) dok doktor
   ne odredi natpise — pa nema ni dugih naziva koji bi se sabijali ili rezali.
   NIJE dirano: dashboard traka (.dt-nav), ticker (Home/Next kutije, njihovi razmaci i
   vertikalne linije), horizontalne linije lajsni, visine, fontovi, boje, hover/aktivno.
   Ispod 981px traka ostaje kakva je bila — horizontalno scrollabilna. */
@media (min-width:981px){
  .um-public-ticker + .um-stickybar .um-stickybar__inner{
    padding-left:calc(48px + (45.354px / var(--um-zoom,1))) !important;
    padding-right:calc(48px + (45.354px / var(--um-zoom,1))) !important;
  }
  .um-public-ticker + .um-stickybar .um-stickybar__slot{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
  }
}
/* hover/aktivna linija: pod BROJEM fiksnih 26px (100% širine jedne znamenke dalo bi crticu
   od ~8px), a pod IMENOM stranice 180% širine riječi — tačno kao .dt-nav-link__label na
   dashboard tabovima (v=630e); debljina i boja su već iste */
.um-stickybar__slot .um-stickybar__label::after{ width:26px; }
.um-stickybar__slot--page .um-stickybar__label::after{ width:180%; }

/* v=640b — glavni header (najširi nivo krova) centriran POŠTENO. Dosad: kutija je bila
   max-width:1400px + 48px padding, ali PRIRODNA širina sadržaja (logo → Dashboard ikonica)
   je veća od te kutije i mijenja se sa zoom ljestvicom (izmjereno: 1434.6px na zoom .75,
   1414.7 na .8625, 1397.6 na .975, 1369.9 na 1.275), pa je sadržaj curio desno, a v=637 ga
   je vraćao fiksnim translateX-om — konstanta ne može pratiti nešto što se mijenja za 65px,
   pa je ostajao promašaj (~2px na 1470/1680) i, ispod 1300px gdje korekcije nema, Dashboard
   ikonica je izlazila do 92px VAN ekrana. Sada je kutija = tačno širina sadržaja
   (width:fit-content) i centrirana je sa margin:auto — lijeva i desna margina su jednake na
   svakoj širini, same od sebe. Unutrašnji razmaci se NE mijenjaju: sadržaj je i dosad bio
   širi od kutije pa je margin-left:auto na .um-topbar__nav-right ionako bio 0. */
@media (min-width:1200px){
  .um-topbar__inner{
    width:fit-content;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    margin-left:auto;
    margin-right:auto;
    transform:none;
  }
}

/* v=640c — (korisnik, 2026-08-01: "od Ultima logoa razmak nije isti kao do Dashboard ikonice")
   KRIVAC NAĐEN, i nije centriranje. Pravilo iz v=? na 6524 —
   .um-nav__icons a:last-child{ padding-right:0 } — NIKAD nije pogodilo Dashboard link, jer
   POSLIJE njega u markupu (um-topbar.ejs) stoji <span class="um-lang__menu"> (padajući meni
   jezika), pa je :last-child taj span. Dashboard je zato zadržao punih 16px desnog paddinga:
   KUTIJA headera je bila savršeno centrirana (izmjereno 278.64 lijevo / 278.66 desno na 1920),
   ali VIDLJIVI natpis "DASHBOARD" završava 16px ranije nego što bi trebao — pa oko vidi
   veći razmak desno. Ista greška je i razlog zašto je stara v=637 formula morala nagađati.
   Rješenje: pravilo gađa zadnji LINK (> a:last-of-type), ne zadnje DIJETE. Time se kutija
   priljubi uz tekst, a fit-content centriranje iz v=640b onda centrira ono što se VIDI.
   Razmaci između ikona i vertikalne crte (border-left + 16px) ostaju netaknuti. */
.um-nav__icons > a:last-of-type{ padding-right:0 !important; }

/* v=640e — (korisnik, 2026-08-01) LOG OUT u dashboard traci dobija ISTI FONT kao Today /
   Progress / Practice … (Cormorant Garamond 14px, normalna težina, bez razmicanja) da se
   upari s ostalih sedam tabova — ali OSTAJE u velikim slovima. Dosad je jedini bio izuzet
   iz tog pravila (v=630e ga isključuje s :not(.dt-nav-out)) pa je stajao u mono slovima.
   Navy boja i bronzana podvlaka iz v=633b se NE diraju — mijenja se samo pismo. Isto važi
   i za "Register →" koji stoji na istom, osmom mjestu u preview modu. */
.dt-nav-link.dt-nav-out,
.dt-nav-link.dt-nav-out:hover,
.dt-nav-link.dt-nav-out.is-active{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:uppercase;
}

/* v=640f — (korisnik, 2026-08-01) EFEKAT KROVA S JEDNAKIM STEPENIKOM NA SVAKOM EKRANU.
   Dolje je stepenik ticker→submenu konstantan 45.354px (jer je inset trake pisan kao
   48px + 45.354px/zoom, pa u vidljivim pikselima ne mrda). Gore je stepenik logo→Home
   bio PROMJENLJIV — 42.97px na 1200–1679, 40.77 na 1680, 37.86 na 1920, 31.79 na 2560 —
   jer je header dosad bio širok koliko mu treba (fit-content, v=640b), a prirodna širina
   teksta pod body zoomom pada (1418.6 → 1349.9 layout px). Konstanta tu ne pomaže.
   Sada header dobija TAČNU ciljanu širinu: W = 1304px + 90.708px/zoom. Izvod:
     stepenik = (W − 1400)/2 + 48 = 45.354/zoom  (layout)  →  45.354px u pikselima ekrana,
   dakle isti kao dolje, na SVAKOJ širini i svakom zoom stepenu. Kutija je i dalje
   centrirana (margin:auto iz v=640b), pa je i desno isto: Next → ikonica = 45.354px.
   Višak prostora (6–25px, ovisno o zoomu) ide TAMO GDJE JE KORISNIK REKAO — logo i meni
   se povlače ulijevo, ikonice udesno, a zrak se otvara u sredini između "More" i REGISTER
   (nav-right već ima margin-left:auto). Razmaci UNUTAR logotipa, menija i grupe ikonica
   se ne mijenjaju, kao ni traka Home/Next ni submenu. */
@media (min-width:1200px){
  .um-topbar__inner{
    width:calc(1304px + (90.708px / var(--um-zoom,1)));
  }
}

/* v=640g — (korisnik, 2026-08-01) linija u logotipu produžena za po 36px lijevo i desno.
   To je POSTOJEĆA linija .um-brand-mark::after (ista koju su dirali v=480 i v=466): 0.75px,
   rgb(139,111,61), opacity .75, sidrena left:0/right:0 na širinu natpisa "Ultima Memoria|UM"
   (218.625px). Ništa novo se ne crta i ne spaja — samo joj se pomjeraju dvije sidrene tačke
   na -36px, pa raste u OBA smjera. Debljina, boja, prozirnost, visina i hover (gasi se na
   .18s, v=480) ostaju netaknuti, kao i natpis iznad i "FOUNDATIONS OF THE INTELLECT" ispod. */
.um-topbar .um-brand-mark::after{
  left:-36px !important;
  right:-36px !important;
}

/* v=640j — (korisnik, 2026-08-01) u traci Home | poruka | Next gase se SAMO dvije VANJSKE
   vertikalne linije: ona ISPRED Home kutije i ona IZA Next kutije. Linije IZMEĐU (Home →
   centralni okvir i centralni okvir → Next) OSTAJU netaknute — to su .dt-tk-side--home::after
   i .dt-tk-side--next::before iz v=628d, i njih ovo pravilo ne dira. Ništa se ne pomjera:
   linije su pseudo-elementi izvan toka (position:absolute), pa kutije, njihovi razmaci i
   horizontalne linije trake ostaju na milimetar gdje jesu. */
.dt-tk-side--home::before,
.dt-tk-side--next::after{ content:none !important; }

/* v=640k — (doktor preko korisnika, 2026-08-01) svaki pravougaonik glavnog menija +8px
   UDESNO, prema ikonicama; grupa ikonica se NE SMIJE pomjeriti ni pod koju cijenu.
   (1) rast: padding-right 16 → 24px, pa kutija raste desno a natpis ostaje gdje jeste.
   (2) ikonice fiksirane: 6 kutija × 8px = 48px layout px, i taj rast se poništava
       negativnom margin-right:-48px na .um-topbar__nav-left — nav-left u TOKU zauzima
       istu širinu kao prije, pa .um-topbar__nav-right (margin-left:auto) ostaje zalijepljen
       za desnu ivicu inner-a, tačno gdje je i bio. Bez position:absolute, da se ne mijenja
       sidro padajućeg meni jezika (.um-lang__menu je absolute na topbar).
   (3) provjereno da ne dolazi do preklapanja: vidljivi zrak More→prva ikona je 63.35px
       (1470) / 67.76 (1920) / 70.03 (2560), pa poslije 48px rasta ostaje 15.35 / 19.76 /
       22.03px zraka. Razmaci i vertikalne crte IZMEĐU kutija (20px) su netaknuti, logo,
       ikonice, ticker, submenu i korak krova 45.354px također.
   PAŽNJA na postojeće vrijednosti: desni padding NIJE 16px (to je stari v=630 blok) —
   nadjačan je kasnijim pravilima: 33px za svih pet, a 29px za "Programmes" (uže pravilo
   .um-nav__link:not([href="/programmes"]) ima veću specifičnost). Zato +8px ide na TE
   brojke: 33 → 41 i 29 → 37, i selektori moraju biti iste specifičnosti kao originali. */
@media (min-width:1200px){
  .um-topbar__nav-left > .um-nav__link{
    padding-right:37px !important;             /* Programmes: 29 + 8 */
  }
  .um-topbar__nav-left > .um-nav__link:not([href="/programmes"]){
    padding-right:41px !important;             /* ostali:     33 + 8 */
  }
  .um-topbar__nav-left{
    margin-right:-48px !important;
  }
}

/* v=640l — (korisnik, 2026-08-01) linija koja se pojavljuje na hover ispod ikonica
   (REGISTER / LANGUAGE / SEARCH / DASHBOARD) širi se za po 3px lijevo i desno od natpisa.
   Linija je pozadinski gradijent na samom <a> (v=77 blok): crta se preko sadržajnog polja,
   a ono je široko tačno koliko natpis. Zato se pozicija pomjera 3px ulijevo, a širina raste
   za 6px — mehanizam i animacija (background-size 0 → puna, .2s) ostaju isti.
   USPUT POPRAVLJENO: DASHBOARD linija je bila 15.8px PREKRATKA. Stari selektor
   `.um-nav__icons a:last-child:hover` nikad je nije pogodio — poslije Dashboard linka u
   markupu stoji <span class="um-lang__menu">, pa je :last-child taj span (ista zamka koju
   je v=640c riješio za padding). Dashboard je zato dobijao generičku formulu
   calc(100% − 32px) iako mu je desni padding 0. Sada ide na svoj a:last-of-type.
   Mjere po elementu (lijevi/desni padding → pozicija i širina):
     REGISTER   0/16 → pozicija −3px, širina calc(100% − 10px)
     LANGUAGE  16/16 → pozicija 13px, širina calc(100% − 26px)
     SEARCH    16/16 → pozicija 13px, širina calc(100% − 26px)
     DASHBOARD 16/0  → pozicija 13px, širina calc(100% − 10px) */
.um-nav__icons > a{ background-position:13px 100% !important; }
.um-nav__icons > a:hover{ background-size:calc(100% - 26px) 1px !important; }
.um-nav__icons > a:first-child{ background-position:-3px 100% !important; }
.um-nav__icons > a:first-child:hover{ background-size:calc(100% - 10px) 1px !important; }
.um-nav__icons > a:last-of-type{ background-position:13px 100% !important; }
.um-nav__icons > a:last-of-type:hover{ background-size:calc(100% - 10px) 1px !important; }

/* v=640m — (korisnik: "nisu se proširile") REGISTER i DASHBOARD su ostali bez virenja, i to
   se PIKSEL-SKANOM potvrdilo: lijevo 0.00 na REGISTER, desno 0.33 na DASHBOARD (druga dva
   su bila u redu). Uzrok: linija je pozadina elementa, a pozadina se NE CRTA izvan njegove
   kutije. REGISTER ima padding-left:0 (prvi u nizu) i DASHBOARD padding-right:0 (v=640c),
   pa im kutija završava tačno na riječi — višak od 3px je bio odsječen.
   Rješenje bez pomjeranja ičega: tim dvjema stranama se doda 3px paddinga i istovremeno
   -3px margine. Kutija naraste 3px (pa pozadina ima gdje da se nacrta), a vanjska mjera
   elementa (margin + kutija) ostaje ista — natpisi, razmaci, vertikalne crte, grupa ikonica
   i desna ivica headera (korak krova 45.354px) se ne mrdaju ni za piksel.
   Nove mjere: REGISTER padding 3/16 → pozicija 0px, širina calc(100% − 13px);
               DASHBOARD padding 16/3 → pozicija 13px, širina calc(100% − 13px). */
.um-nav__icons > a:first-child{
  padding-left:3px !important;
  margin-left:-3px !important;
  background-position:0px 100% !important;
}
.um-nav__icons > a:first-child:hover{ background-size:calc(100% - 13px) 1px !important; }
.um-nav__icons > a:last-of-type{
  padding-right:3px !important;
  margin-right:-3px !important;
  background-position:13px 100% !important;
}
.um-nav__icons > a:last-of-type:hover{ background-size:calc(100% - 13px) 1px !important; }

/* v=640n — REGISTER je i dalje imao 0.00 virenja lijevo: pravilo iz v=? na 19196
   (.um-nav__icons a.um-nav__ico:first-child{padding-left:0 !important}) ima VEĆU
   specifičnost od v=640m selektora, pa je vraćalo padding na nulu i pozadina je opet
   bila odsječena na riječi. Isti selektor s klasom .um-nav__ico → pravilo prolazi.
   Vertikalne crte se ne dodiruju: linija počinje 13px od crte iza koje stoji. */
.um-nav__icons a.um-nav__ico:first-child{
  padding-left:3px !important;
  margin-left:-3px !important;
}

/* v=640p — (korisnik, 2026-08-02) linija ispod LOG OUT ostala je tačno širine riječi i nije
   se dala produžiti: jedina je u traci crtana kao text-decoration:underline (v=633b), a
   podvlaka teksta po definiciji prati slova. Ostalih sedam tabova koriste
   .dt-nav-link__label::after — traku koja viri po strani (izmjereno: Certificate 11.78px,
   Progress 18.18, Today 25.07). LOG OUT se prebacuje na TAJ isti mehanizam:
   text-decoration se gasi, ::after se pali sa 140% širine riječi — ista vrijednost koju
   stari blok već propisuje za osmi tab, pa viri 12.17px po strani i uparuje se sa svojim
   susjedom Certificate (11.78). Ponašanje iz v=633b ostaje: linija STOJI u mirovanju i
   gasi se na hover (obrnuto od ostalih tabova). Boja je ista bronza #8b6f3d. */
.dt-nav-link.dt-nav-out[href="/logout"] .dt-nav-link__label{
  text-decoration-line:none !important;
}
.dt-nav-link.dt-nav-out[href="/logout"] .dt-nav-link__label::after{
  content:"" !important;
  width:140%;
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}
.dt-nav-link.dt-nav-out[href="/logout"]:hover .dt-nav-link__label::after{
  opacity:0;
  transform:translateX(-50%) scaleX(1);
}

/* v=640q — (korisnik, 2026-08-02) lijeve rubrike "Section / Subsections" (.um-meta): linija
   ispod svake stavke sada STOJI u mirovanju i GASI SE na prelazu mišem — obrnuto od dosad
   (v=? na 18840 ju je držao prozirnom u miru, v=? na 19348 palio na hover). Isti obrazac
   kao LOG OUT, linija u logotipu i podnaslovi u /method i /memory.
   Mijenja se SAMO boja ivice — debljina (1px/zoom), širina (puna širina kolone) i postojeći
   prelaz (transition već sadrži border-color, pa se gasi mekano) ostaju netaknuti. Vrijedi
   na svim stranicama koje imaju tu rubriku (home, method, modules, target-groups, moduli…). */
.um-meta dd a:not(:hover), .um-meta-link:not(:hover){
  border-bottom-color:var(--rule,rgba(139,111,61,.28)) !important;
}
.um-meta dd a:hover, .um-meta-link:hover{
  border-bottom-color:transparent !important;
}

/* v=640r — (doktor preko korisnika, 2026-08-02) uvodni tekst (.um-lede) je na velikim
   ekranima izgledao KRUPNIJI od teksta ispod njega, a na 13.3" laptopu jednak — i to nije
   bio zoom (zoom uvećava oba jednako) nego CSS prag: .um-lede raste sa širinom prozora
   (20px → 22px od 1500px → 24px od 1750px), dok je .um-p zakovan na 20px !important
   (linija 6207, što poništava starija pravila koja su ga htjela smanjiti na 19/18px).
   Ispod 1500px oba su 20px pa izgledaju isto; iznad 1750px odnos je 24/20 = 1.20.
   Lede se zato pina na 20px od 1500px naviše — odnos postaje 1.000 na SVAKOM ekranu,
   tačno kao što je već na korisnikovom laptopu. Ispod 1500px se ne dira ništa (tamo je
   ionako 20px), a mobilnih 16px iz @media(max-width:720px) ovo pravilo ne dohvaća.
   max-width lede-a (780/860/940px) ostaje kakav je — mijenja se samo veličina slova. */
@media (min-width:1500px){
  .um-lede{ font-size:20px !important; }
}

/* v=644 — (doktor, 2026-08-02) IZREKE u desnoj koloni, probni prikaz na 1.1–1.3.
   Bilješka u desnom asideu (.um-section__note) postaje citat s potpisom: sam citat zadržava
   postojeći stil bilješke (Newsreader kurziv 13px, gornja tanka linija — ništa se ne mijenja),
   a ispod njega dolaze dva nova reda u mono pismu sajta: AUTOR (verzal, bronza, kao
   .um-section__label) i izvor (djelo · poglavlje · godina, sitnije, siva). Taj izvor je
   razlog zbog kojeg stranica djeluje kao naučni tekst a ne kao zbirka parola.
   LIJEVA kolona (.um-section__aside bez --right) NIJE dirana — tamo ostaje sažetak pasusa.
   Klasa se koristi samo tamo gdje je citat, pa ostale bilješke ostaju kakve jesu. */
.um-quote .um-quote__t{ display:block; }
.um-quote .um-quote__a{
  display:block; margin-top:11px;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; font-style:normal; color:var(--bz1,#8b6f3d);
}
.um-quote .um-quote__s{
  display:block; margin-top:3px;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.04em;
  font-style:normal; color:var(--ink3,#6b6253);
}

/* v=645 — numerisani pravougaonici (2–8) u javnoj traci su klikabilni: pokazivač ruke i
   vidljiv fokus s tastature. Sam dijalog koristi klase dashboard preview gatea
   (.um-preview-modal…, v=?) pa mu nije potreban nikakav novi stil — izgleda identično.
   Prvi pravougaonik (ime stranice, .um-stickybar__slot--page) je pravi link i ne dira se. */
.um-stickybar__slot:not(.um-stickybar__slot--page){ cursor:pointer; }
.um-stickybar__slot:not(.um-stickybar__slot--page):focus-visible{
  outline:1px solid #8b6f3d; outline-offset:2px;
}

/* v=646 — (korisnik, 2026-08-03) natpis "Back to the top of the page" u donjoj traci piše
   NORMALNO, ne verzalom. U markupu je oduvijek pisalo malim slovima — velika su dolazila iz
   text-transform:uppercase. Font ostaje isti (Cormorant Garamond 14px, kurziv, #5e4a26);
   mijenja se samo veličina slova. Bočne kutije (Home / Next) se ne diraju — one već pišu
   normalno preko svog pravila. */
.um-to-top .um-to-top__link .um-to-top__text{ text-transform:none !important; }

/* v=646b — (korisnik, 2026-08-03) natpis u donjoj traci malo krupniji: 14 → 15px.
   Izmjereno prije promjene: pokretni tekst gore, Home kutija gore i ovaj natpis dolje su
   SVI bili 14px Cormorant Garamond. Djelovao je sitnije jer je jedini kurziv i malim
   slovima, a gornji je verzal — velika slova zauzimaju punu visinu pa izgledaju krupnije.
   Zato 15, a ne 16: jedan korak veći nego prije, a optički i dalje malkice manji od
   verzala gore, kako je korisnik i tražio. Sve ostalo (kurziv, boja, razmak slova,
   strelice, crtice, okvir) ostaje. */
.um-to-top .um-to-top__link .um-to-top__text{ font-size:15px !important; }

/* v=646c — (doktor preko korisnika, 2026-08-03) natpis u donjoj traci VIŠE NIJE KURZIV.
   Doktor ga hoće krupnijim: uspravna slova pri istoj veličini djeluju krupnije od kurziva,
   pa se dobija efekat bez daljeg povećavanja brojke. Veličina OSTAJE 15px iz v=646b —
   nije dirana. Boja, razmak slova, strelice, crtice i okvir također netaknuti. */
.um-to-top .um-to-top__link .um-to-top__text{ font-style:normal !important; }

/* v=646d — (korisnik, 2026-08-03) natpis u donjoj traci dobija ISTI razmak između slova kao
   glavni meni gore (System / Memory / Method…). Izmjereno: meni ima letter-spacing:normal,
   a natpis dolje je nasljeđivao .14em sa .um-to-top__link (= 1.68px pri 15px) — otud je
   dolje bio širi razmak. Pismo je već bilo isto (Cormorant Garamond u oba slučaja, dolje
   samo s Georgia kao rezervom) pa se font ne dira; mijenja se SAMO razmak, i to samo na
   tekstu — strelice i uspravne crtice zadržavaju svoj razmak sa .um-to-top__link, kao i
   bočne kutije Home / Next (one su ionako oduvijek na normal). */
.um-to-top .um-to-top__link .um-to-top__text{ letter-spacing:normal !important; }

/* v=647 — (korisnik, 2026-08-03) duga horizontalna linija ispod pravougaonika 1–8 diže se
   3px prema njima. Ta linija je border-bottom trake; da traka ne bi promijenila visinu (i
   pomjerila sve ispod sebe), border ostaje na mjestu ali proziran, a linija se crta kao
   pozadinska pruga 3px više. Debljina, boja i puna širina su iste, pravougaonici se ne
   pomjeraju, visina trake i sav sadržaj ispod ostaju gdje jesu. */
.um-stickybar{
  border-bottom-color:transparent !important;
  background-image:linear-gradient(var(--bz2,#a88955),var(--bz2,#a88955)) !important;
  background-repeat:no-repeat !important;
  background-origin:border-box !important;
  background-clip:border-box !important;
  background-size:100% calc(1px / var(--um-zoom,1)) !important;
  background-position:left calc(100% - (3px / var(--um-zoom,1))) !important;
}

/* v=648 — (korisnik, 2026-08-03) home 1.3: rečenica "is guaranteed to improve measurably:"
   između dvije performance liste dobija tačno 24px zraka do linije iznad i 24px do linije
   ispod (bilo 27px na obje strane). Linije su donji rub prve i gornji rub druge liste, pa
   se mjeri i mijenja njihova margina prema rečenici — same liste, njihov unutrašnji razmak
   (padding 36px) i sve ostalo ostaju netaknuti. Brojka je u ekranskim pikselima preko
   /var(--um-zoom) da bude 24px na svakoj ljestvici zooma. */
#s-practice .um-perf-list:not(.um-perf-prices){
  margin-bottom:calc(24px / var(--um-zoom,1)) !important;
}
#s-practice .um-perf-list.um-perf-prices{
  margin-top:calc(24px / var(--um-zoom,1)) !important;
}

/* v=649 — (korisnik, 2026-08-03) potpis na home 1.3 ide u JEDAN red: umjesto zareza stoji
   uspravna crta, a ime dolazi odmah pored nje. Crta je ista kao ona u cjenovnoj listi iznad
   (1px, ista bronzana boja rgba(139,111,61,.55)), a razmak lijevo i desno je isti PO
   KONSTRUKCIJI — flex gap, ne dva ručno upisana broja. Font, veličina, boja, gornja linija
   potpisa i njegov razmak od teksta iznad ostaju netaknuti. */
#s-practice .um-signature{
  display:flex !important;
  align-items:center !important;
  gap:calc(12px / var(--um-zoom,1)) !important;
}
#s-practice .um-signature__name{
  display:inline !important;
  margin-top:0 !important;
}
.um-signature__sep{
  display:block;
  flex:0 0 auto;
  width:calc(1px / var(--um-zoom,1));
  height:1.15em;
  background:rgba(139,111,61,0.55);
}

/* v=650 — (korisnik, 2026-08-03) sve tri kutije u donjoj traci (Home, "Back to the top of
   the page", Next) dobijaju debelu bronzanu uspravnu crtu i S DESNE strane — dosad je
   postojala samo lijeva (v=257: border-left:3px solid #8b6f3d). Ista debljina i ista boja
   kao lijeva, pa je svaka kutija sada zatvorena s obje strane. Gornja i donja tanka ivica,
   pozadine, hover, veličine i razmaci ostaju netaknuti. */
.um-to-top .um-to-top__link,
.um-to-top__side{ border-right:3px solid #8b6f3d !important; }

/* v=651 — (korisnik, 2026-08-03) i središnji natpis "Back to the top of the page" dobija na
   prelazu mišem istu bronzanu crtu ispod kao Home i Next (v=630c): ista debljina, boja,
   visina ispod teksta i isti prelaz. Razlika je SAMO širina — Home/Next imaju 250% širine
   riječi, a ovdje bi to udarilo u uspravne crtice ispred trokutića, pa je crta široka kao
   natpis + po 3px sa svake strane. Sam natpis, trokutići, crtice i okvir se ne pomjeraju. */
.um-to-top .um-to-top__link .um-to-top__text{
  position:relative;
  display:inline-block;
}
.um-to-top .um-to-top__link .um-to-top__text::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% + .5em + 1px);
  bottom:auto;
  width:calc(100% + (6px / var(--um-zoom,1)));
  height:1px;
  background:#8b6f3d;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.um-to-top .um-to-top__link:hover .um-to-top__text::after,
.um-to-top .um-to-top__link:focus-visible .um-to-top__text::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* v=652 — (korisnik, 2026-08-03) sat u gornjem desnom pravougaoniku javne trake. Kutija
   zadržava SVE što je imala kao Next (mjesto, širina, visina, okvir, pozadina, font i
   veličina slova) — mijenja se samo sadržaj.
   v=652e: na korisnikov zahtjev kutija zadržava i OBA ponašanja na prelazu mišem koja je
   imala kao Next — posvjetljenje pozadine (bazno pravilo .dt-tk-side:hover) i bronzanu
   crtu ispod natpisa. Zato ovdje više nema nijednog "gašenja"; ostaje samo pokazivač
   strelice, jer sat nije link i nema kuda voditi.
   Dashboard traka (.dt-nav, isti .dt-tk-* razredi) NIJE dirana — pravilo traži
   .um-public-ticker. */
.um-public-ticker .dt-tk-side--clock{ cursor:default; }
/* v=652b — ISPRAVKA: gornji red je tražio samo tabular-nums, a font-variant-numeric je JEDNO
   svojstvo — time je poništen `lining-nums` koji cijelom sajtu stoji na body (linija 6020),
   pa je Cormorant vratio stare, "spuštene" cifre (6 i 9 pod linijom, jedinica sitna). Sada se
   traže OBA svojstva zajedno: uspravne cifre pune visine + jednaka širina svake cifre. */
.um-public-ticker .dt-tk-side--clock .dt-tk-side__label{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* v=652c/652d — ispred vremena stoji mjesto i zona: "Paris · UTC+2  16:15:02". Prvo je bilo
   u mono pismu i verzalom (652c), pa je korisnik tražio da izgleda kao natpis Home: ISTI
   font, ISTA veličina i normalna slova — samo veliko P (652d). Zato ovdje nema nijednog
   pisma ni veličine: sve se nasljeđuje od kutije, kao kod Home i Next. Sve stoji u JEDNOM
   redu unutar postojeće kutije. */
.um-public-ticker .dt-tk-side--clock .dt-tk-side__label{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}
.um-public-ticker .um-clock__dot{ opacity:.55; }
/* v=652e — crta ispod natpisa se VRAĆA (ista debljina, boja, visina ispod teksta i isti
   prelaz kao kod Home i Next, jer se sve nasljeđuje od pravila v=630d). Razlika je samo
   širina: Home/Next imaju 250% širine riječi, a ovaj natpis je tri puta duži pa bi 250%
   izašlo van kutije — zato se crta mjeri od natpisa. Prvo po 3px sa svake strane, pa je
   korisnik tražio šire: po 24px (natpis 98.7 + 48 = 146.7px u kutiji od 170.3px, ostaje
   po ~10px zraka do ivica). */
.um-public-ticker .dt-tk-side--clock .dt-tk-side__label::after{
  content:"";
  width:calc(100% + (48px / var(--um-zoom,1)));
}

/* v=653 — (doktorov dokument „ausgesuchte Zitate", 03.08.2026) IZREKE u desnoj koloni.
   Izreka nosi klasu .um-section__note (da naslijedi razmak i gornju crtu bilješke), pa ju je
   na /target-groups pokupilo pravilo v=492 koje tamošnje bilješke ("820 million worldwide")
   crta podvučeno i pravi ih naizgled klikabilnim. Izreka nije podatak nego citat — ovdje se
   to podvlačenje i pokazivač ruke gase, u miru i na prelazu mišem. Same bilješke u LIJEVOJ
   koloni ostaju kakve jesu; pravilo dohvaća isključivo .um-quote. */
.um-section__aside .um-quote,
.um-section__aside .um-quote:hover{
  text-decoration:none !important;
  cursor:auto !important;
  background-color:transparent !important;
  color:inherit !important;
}

/* v=654 — (doktor preko korisnika, 2026-08-03) izreka se prikazuje na SVIM jezicima koje
   dokument ima za nju: engleski (glavni, ostaje kakav je bio), pa njemački, pa original
   ako postoji (kineski, latinski, francuski, ruski, bosanski). Redoslijed nosi markup.
   Njemački i original su sitniji i blijeđi da se čita hijerarhija — jedna izreka, tri
   glasa, a ne tri odvojena citata. Original nije kurziv (kineski i ćirilica se u kurzivu
   izobliče) i dobija pismo koje pokriva ta pisma. Autor i izvor ostaju nedirnuti ispod. */
.um-quote .um-quote__de{
  display:block;
  margin-top:9px;
  font-size:12px;
  line-height:1.5;
  color:rgba(107,98,83,.82);
}
.um-quote .um-quote__o{
  display:block;
  margin-top:7px;
  font-family:'Newsreader',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Georgia,serif;
  font-style:normal;
  font-size:11.5px;
  line-height:1.6;
  color:rgba(107,98,83,.7);
}

/* v=656 — (korisnik, 04.08.2026) IZREKA se na prelaz mišem uveća. Zamjenjuje nekomitovani
   v=655 (bio prevelik i uvećavao cijeli blok, pa se s njim širila i tanka crta iznad izreke,
   a papirna maska je gutala duge crte između sekcija).
   Sada:
   • uvećava se SAMO TEKST — omotač .um-quote__z u markupu. Tanka crta iznad izreke, razmaci
     i položaj bloka sjede na <p> i ostaju netaknuti, iste širine kao crta kod naslova.
   • faktor 16/13 = 1.2308 (izreka miruje na 13px): primjetno veće, ali umjereno.
   • NEMA maske: duge crte između sekcija i okomita crta kolone se više ne gase. Uvećani
     tekst se iscrtava preko njih (z-index), pa nijedna crta ne nestaje.
   Zašto TRANSFORM a ne font-size: izreka je zadnji element desne kolone i na gustim
   stranicama (/target-groups, /contact) drži visinu cijele sekcije — font-size bi preračunao
   stranicu i sve ispod bi skakalo dok se prelazi mišem. transform ne pomjera ništa i ne
   prelama tekst (redovi ostaju isti, samo krupniji).
   Hvatište je GORE-SREDINA: tekst raste nadolje i simetrično u stranu — po 20px lijevo i
   desno, a razmak do glavne kolone je 42px, pa ostaje preko 20px zraka na svakom koraku zuma.
   Samo miš (hover:hover); ispod ~1330px desne kolone ionako nema.
   DOPUNA (isti dan, korisnik): isto vrijedi za SVE bilješke u bočnim kolonama — sažetke u
   lijevoj koloni i blok gore desno ispod javne trake (.um-section__note--rightblock). Zato
   omotač nosi neutralno ime .um-note__z i pravilo hvata .um-section__note, a ne samo izreku.
   Na /target-groups te bilješke imaju svoju hover-animaciju iz v=492 (topla podloga + jača
   linija): podloga se seli na omotač da se uvećava zajedno s tekstom, inače bi tekst iskočio
   iz obojene trake. */
/* display:block stoji IZVAN @media — omotač mora biti blok svugdje (i na dodiru), inače bi
   se na uređajima bez miša inline span razlomio oko svojih blokovskih djece. */
.um-section__note .um-note__z{ display:block; }
@media (hover:hover){
  .um-section__aside .um-section__note{
    position:relative;
    z-index:1;
  }
  .um-section__aside .um-section__note .um-note__z{
    transform-origin:top center;
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .um-section__aside .um-section__note:hover{
    z-index:20;
  }
  .um-section__aside .um-section__note:hover .um-note__z{
    transform:scale(1.2308);
  }
  /* /target-groups (v=492): topla podloga ide na omotač, ne na cijeli blok */
  #g-primary .um-section__note:hover, #g-secondary .um-section__note:hover, #g-university .um-section__note:hover,
  #g-working .um-section__note:hover, #g-jobseekers .um-section__note:hover, #g-seniors .um-section__note:hover,
  #g-chess .um-section__note:hover, #g-athletes .um-section__note:hover, #g-musicians .um-section__note:hover,
  #g-actors .um-section__note:hover, #g-quran .um-section__note:hover, #g-educators .um-section__note:hover{
    background-color:transparent !important;
  }
  #g-primary .um-section__note:hover .um-note__z, #g-secondary .um-section__note:hover .um-note__z,
  #g-university .um-section__note:hover .um-note__z, #g-working .um-section__note:hover .um-note__z,
  #g-jobseekers .um-section__note:hover .um-note__z, #g-seniors .um-section__note:hover .um-note__z,
  #g-chess .um-section__note:hover .um-note__z, #g-athletes .um-section__note:hover .um-note__z,
  #g-musicians .um-section__note:hover .um-note__z, #g-actors .um-section__note:hover .um-note__z,
  #g-quran .um-section__note:hover .um-note__z, #g-educators .um-section__note:hover .um-note__z{
    background-color:rgba(139,111,61,0.05);
  }
}
@media (prefers-reduced-motion:reduce){
  .um-section__aside .um-section__note .um-note__z{ transition:none !important; }
}

/* v=657 — ispravka pisma za ORIGINAL (.um-quote__o) iz v=654. Redoslijed je bio
   'Newsreader',"PingFang SC",…,Georgia: Newsreader nema ćirilicu, pa je ruski original
   (12.2, Tolstoj) padao na kineski PingFang SC — a kineska pisma ćirilicu crtaju punom
   širinom, pa su slova izgledala razmaknuto kao razmaci. Georgia ima i ćirilicu i pravi
   serif oblik, zato ide odmah iza Newsreadera; kineski originali i dalje padaju na PingFang
   jer Georgia nema kineske znakove. Ništa drugo se ne mijenja. */
.um-quote .um-quote__o{
  font-family:'Newsreader',Georgia,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;
}

/* v=658 — (doktor preko korisnika, 04.08.2026) REDOSLIJED JEZIKA u izreci: prvo ORIGINAL,
   pa engleski, pa njemački (a kad je original njemački — njemački prvi, pa engleski).
   Redoslijed nosi markup (generator), ovdje je samo posljedica: hijerarhija se više ne veže
   za JEZIK nego za MJESTO u redu. Vodeći red (.um-quote__l1) je onaj koji se prvi čita —
   veličina i boja bilješke; drugi i treći red su sitniji i blijeđi, tačno onako kako su do
   sada izgledali njemački i original. Klase jezika (__t/__de/__o) ostaju jer nose pismo
   (Georgia/PingFang za original) i navodnike. */
.um-quote .um-quote__l1{ margin-top:0;   font-size:13px;   color:var(--ink3,#6b6253); }
.um-quote .um-quote__l2{ margin-top:9px;  font-size:12px;   color:rgba(107,98,83,.82); }
.um-quote .um-quote__l3{ margin-top:7px;  font-size:11.5px; color:rgba(107,98,83,.7); }
.um-quote .um-quote__l4{ margin-top:7px;  font-size:11.5px; color:rgba(107,98,83,.7); }

/* v=659 — (korisnik, 04.08.2026) SAMO izreka Maka Dizdara na naslovnoj (1.2): rečenice se
   slažu jedna ispod druge da „Čovjek" stoji ispod „Čovjeka" — ista figura koju pjesma ima.
   Tekst se ne dira: rečenice su podijeljene na mjestu razmaka iza uskličnika/tačke, razmak
   ostaje unutar reda, navodnici su uvučeni u prvu i zadnju rečenicu da ne padnu u svoj red.
   Blok je širok koliko najduža rečenica (max-content) i centriran u koloni, a unutra je
   poravnat lijevo — tako se početne riječi poklapaju. Duža rečenica od kolone se prelomi
   (max-width:100%), pa ništa ne izlazi iz kolone. Vrijedi za sva tri jezika te izreke. */
.um-quote--stack .um-quote__sent{ display:block; }
.um-quote--stack .um-quote__l1,
.um-quote--stack .um-quote__l2,
.um-quote--stack .um-quote__l3{
  width:max-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

/* v=660 — original na LATINICI (bosanski, latinski, francuski) ide kurzivom kao i ostali
   citati na sajtu; kineski i ćirilica ostaju uspravni jer se u kurzivu izobliče. Klasu
   dodjeljuje generator po pismu teksta, ne ručno. Bitno otkad original stoji PRVI (v=658):
   vodeći red inače ne bi izgledao kao citat. */
.um-quote .um-quote__o--lat{ font-style:italic; }

/* v=661 — (korisnik, 04.08.2026) PRAVNE STRANICE iz podnožja: /imprint, /privacy, /terms,
   /refund (poglavlja 14–17). Stranice koriste isti um-section partial kao ostale, pa im
   trebaju samo dvije nove sitnice:
   • .um-fill — mjesto koje operator mora popuniti ([ime firme], [adresa], [rok]…). Bronzana
     isprekidana crta ispod i vrlo blaga topla podloga: u tekstu se vidi na prvi pogled šta
     nedostaje, a ne viče kao greška. Kad se praznina popuni, klasa se briše i tekst izgleda
     kao svaki drugi.
   • .um-legal-flag — traka „ovo je nacrt / ovo treba odlučiti" na vrhu stranice i uz jedno
     mjesto u 17.6. Namjerno je jedan <p> pa se briše jednim potezom kad tekst bude potvrđen.
   Ništa drugo se ne dira — ostatak izgleda dolazi iz postojećih klasa (um-lede, um-p,
   um-hlist, um-section…). */
.um-fill{
  font-style:normal;
  color:#6b5a2f;
  background:rgba(139,111,61,0.05);
  border-bottom:1px dashed rgba(139,111,61,0.5);
  padding:0 2px;
  white-space:normal;
}
.um-legal-flag{
  margin:18px 0 26px;
  padding:12px 16px;
  font-family:'Newsreader',Georgia,serif;
  font-size:14px;
  line-height:1.6;
  color:#6b6253;
  background:rgba(139,111,61,0.045);
  border-top:1px solid rgba(139,111,61,0.28);
  border-bottom:1px solid rgba(139,111,61,0.14);
}
.um-legal-flag__tag{
  display:inline-block;
  margin-right:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bz1,#8b6f3d);
  vertical-align:1px;
}
.um-legal-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.06em;
  color:rgba(107,98,83,.75);
}

/* v=662 — nabrajanja (A/B/C…) na pravnim stranicama. Osnovni .um-hlist li je običan blok, a
   .um-hlist__tag je flex-kutija, pa kvadratić sa slovom padne u svoj red; red u red slaže ga
   tek pravilo scopeovano na #h-conditions (/health).
   Ovdje NE koristim flex kao tamo: pravne stavke imaju ključne riječi (<strong class="um-key">)
   unutar rečenice, a u flex-redu bi svaka od njih postala zasebna kolona i rečenica bi se
   raspala. Zato kvadratić ide apsolutno u lijevu marginu, a tekst teče normalno — kvadratić
   stoji uz PRVI red teksta i kod stavki od nekoliko redova.
   Blagi topli hover kao drugdje na sajtu; bez naizmjeničnih traka — ovo se čita, ne skenira.
   Scope je po stranici (.um-page-imprint…), da ne dira nijedno drugo nabrajanje. */
.um-page-imprint .um-hlist li,
.um-page-privacy .um-hlist li,
.um-page-terms .um-hlist li,
.um-page-refund .um-hlist li{
  position:relative;
  padding:14px 8px 14px 60px;
  border-bottom:1px solid rgba(139,111,61,.22);
  transition:background-color .18s ease;
}
.um-page-imprint .um-hlist li:first-child,
.um-page-privacy .um-hlist li:first-child,
.um-page-terms .um-hlist li:first-child,
.um-page-refund .um-hlist li:first-child{ border-top:1px solid rgba(139,111,61,.22); }
.um-page-imprint .um-hlist li:hover,
.um-page-privacy .um-hlist li:hover,
.um-page-terms .um-hlist li:hover,
.um-page-refund .um-hlist li:hover{ background-color:rgba(139,111,61,0.04); }
.um-page-imprint .um-hlist__tag,
.um-page-privacy .um-hlist__tag,
.um-page-terms .um-hlist__tag,
.um-page-refund .um-hlist__tag{ position:absolute; left:8px; top:15px; }

/* v=663 — (mobilna provjera, 05.08.2026) POLJA U FORMAMA na telefonu moraju imati bar 16px.
   iOS Safari automatski ZUMIRA stranicu čim se fokusira polje s fontom manjim od 16px, pa
   registracija (sva polja su bila 15px) skoči i uveća se pri svakom kliku u polje, a korisnik
   se poslije mora ručno vraćati prstima. Prijava je već bila 16px, kontakt forma također —
   ovo diže samo ono što je ispod granice, i to SAMO na telefonu (≤720px), pa se desktop ne
   mijenja ni za piksel. Visina polja i razmaci ostaju kakvi jesu. */
@media (max-width:720px){
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"], input[type="url"],
  select, textarea{
    font-size:16px !important;
  }
}

/* v=664 — (doktor preko korisnika, 05.08.2026) TABELA CIJENA na /pricing (pogl. 18).
   Nova varijanta postojećeg .um-tbl sistema (v=158), pa nasljeđuje sve: papirno zaglavlje,
   tanke linije između redova, serifni tekst. Novo je samo šest kolona i tri vrste reda:
     • obična stavka — (01.)–(38.), broj i iznosi u mono pismu da se cifre poravnaju;
     • red GRUPE (1.–8.) — topla podloga i bronzani naziv, kao međuzbir u dokumentu;
     • red ZBIRA (Total) — jača gornja crta i tamnije slovo.
   Kolona "Description" je u doktorovom listu prazna; ostaje u tabeli jer je dio dokumenta.
   MOBILNO ide po obrascu v=467: tabela zadržava desktop raspored i skrola se u SVOJOJ kutiji
   (min-width na zaglavlju i redovima), pa se stranica nikad ne pomjera bočno. */
.um-tbl--price{ margin-top:22px !important; }
.um-tbl--price .um-tbl-head,
.um-tbl--price .um-tbl-row{
  display:grid !important;
  grid-template-columns:56px minmax(200px,1fr) 58px 76px 96px 58px !important;
  align-items:center !important;
  gap:0 10px !important;
  padding:9px 14px !important;
}
.um-tbl--price .um-tbl-head{ font-size:13px !important; }
.um-tbl--price .um-tbl-head > div:nth-child(3),
.um-tbl--price .um-tbl-head > div:nth-child(4),
.um-tbl--price .um-tbl-head > div:nth-child(5){ text-align:right !important; }
.um-tbl--price .um-tbl-row{ font-size:14px !important; }
.um-tbl--price .um-tbl-row > div:nth-child(1),
.um-tbl--price .um-tbl-row > div:nth-child(3),
.um-tbl--price .um-tbl-row > div:nth-child(4),
.um-tbl--price .um-tbl-row > div:nth-child(5){
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11.5px !important;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:.02em !important;
}
.um-tbl--price .um-tbl-row > div:nth-child(3),
.um-tbl--price .um-tbl-row > div:nth-child(4),
.um-tbl--price .um-tbl-row > div:nth-child(5){ text-align:right !important; }
.um-tbl--price .um-tbl-row > div:nth-child(1){ color:var(--bz1,#8b6f3d) !important; }

/* red grupe (1.–8.) */
.um-tbl--price .um-tbl-row--grp{
  background:#efe9d7 !important;
  padding-top:11px !important; padding-bottom:11px !important;
}
.um-tbl--price .um-tbl-row--grp > div:nth-child(2){
  font-weight:600 !important; color:var(--bz1,#8b6f3d) !important; font-size:15px !important;
}
.um-tbl--price .um-tbl-row--grp > div:nth-child(1){ font-weight:600 !important; }
.um-tbl--price .um-tbl-row--grp::after{ display:none !important; }

/* zbirni red */
.um-tbl--price .um-tbl-row--sum{
  background:#efe9d7 !important;
  border-top:1.5px solid rgba(139,111,61,.5) !important;
  padding-top:12px !important; padding-bottom:12px !important;
}
.um-tbl--price .um-tbl-row--sum > div:nth-child(2){
  font-family:'IBM Plex Mono',monospace !important; font-size:10px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color:var(--bz1,#8b6f3d) !important;
}
.um-tbl--price .um-tbl-row--sum > div:nth-child(4),
.um-tbl--price .um-tbl-row--sum > div:nth-child(5){ color:#1a1814 !important; font-size:12.5px !important; }
.um-tbl--price .um-tbl-row--sum::after{ display:none !important; }

/* bočni blok iz lista (UM - System / Entrance / Programme …) */
.um-price-side__t, .um-price-side__i{ display:block; font-style:normal; }
.um-price-side__t{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bz1,#8b6f3d); margin-bottom:6px;
}
.um-price-side__i{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(107,98,83,.85); line-height:1.9; }

.um-price__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.um-price__hint{ display:none; }
@media (max-width:720px){
  /* min-width mora stajati i na SAMOJ tabeli: kutija koja skrola mjeri svoje dijete, a to je
     .um-tbl — bez ovoga redovi jesu 610px, ali tabela ostane 342px pa skrolanja nema. */
  .um-tbl--price{ min-width:610px !important; }
  .um-tbl--price .um-tbl-head,
  .um-tbl--price .um-tbl-row{ min-width:610px !important; }
  .um-price__hint{
    display:block; margin:6px 0 0;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(139,111,61,.75);
  }
}

/* v=665 — (korisnik, 05.08.2026) tabela cijena dobija ISTO ponašanje kao tabele na /method i
   /system (v=277 .um-tbl--obj, v=261 .um-tbl--phases):
   • crte između redova idu od ivice do ivice — osnovni .um-tbl-row::after ih uvlači po 18px
     sa svake strane, pa izgledaju kao kratke crtice u sredini; ovdje left:0/right:0;
   • red se na prelaz mišem pali toplom podlogom #f3ecd9 uz .18s prelaz — ista boja i isto
     trajanje kao tamo, da se sajt ponaša jednako svugdje.
   Redovi grupa (1.–8.) i zbirni red imaju svoju podlogu i NE pale se — oni nisu stavke nego
   naslovi i zbir; kad bi i oni treperili, izgubio bi se ritam tabele. */
.um-tbl--price .um-tbl-row{ transition:background-color .18s ease !important; }
.um-tbl--price .um-tbl-row:not(:last-child)::after{ left:0 !important; right:0 !important; }
.um-tbl--price .um-tbl-row:not(.um-tbl-row--grp):not(.um-tbl-row--sum):hover{
  background:#f3ecd9 !important;
}

/* v=666 — (korisnik, 05.08.2026) dvije stvari na /pricing:

   (1) FONT BROJEVA kao na tabelama /system: tamo su brojevi u Newsreaderu s lining-nums
   (izmjereno: Newsreader 16px, lining-nums), a ne u mono pismu. Cifre u tabeli cijena zato
   prelaze s IBM Plex Mono 11.5px na Newsreader 14px — isti serif kao i nazivi stavki, samo
   s tabular-nums da se kolone iznosa poravnaju jedna ispod druge. Kolona "No." ((01.)…)
   ostaje u mono bronzi jer to nije iznos nego oznaka pozicije, kao brojevi sekcija na sajtu.

   (2) TABELA 18.2 — ista tabela s praznim poljima za vlastite cijene. Polje izgleda kao red
   tabele, ne kao obrazac: bez okvira dok se ne dodirne, tanka bronzana crta ispod, iznos
   poravnat udesno kao i ostali. Popunjeno polje potamni. Ispod tabele stoji mjesto za poruku
   (najmanja cijena) — prazno dok doktor ne kaže iznos. */
.um-tbl--price .um-tbl-row > div:nth-child(1){
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11.5px !important;
}
.um-tbl--price .um-tbl-row > div:nth-child(3),
.um-tbl--price .um-tbl-row > div:nth-child(4),
.um-tbl--price .um-tbl-row > div:nth-child(5){
  font-family:'Newsreader',Georgia,serif !important;
  font-size:14px !important;
  letter-spacing:normal !important;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.um-tbl--price .um-tbl-row--sum > div:nth-child(4),
.um-tbl--price .um-tbl-row--sum > div:nth-child(5){ font-size:15px !important; font-weight:600 !important; }
.um-tbl--price .um-tbl-row--grp > div:nth-child(4),
.um-tbl--price .um-tbl-row--grp > div:nth-child(5){ color:var(--bz1,#8b6f3d) !important; font-weight:600 !important; }

/* traka s dugmadima iznad tabele 18.2 */
.um-calc__bar{ display:flex; align-items:center; gap:10px; margin:18px 0 2px; flex-wrap:wrap; }
.um-calc__btn{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bz1,#8b6f3d);
  background:transparent; border:1px solid rgba(139,111,61,.45);
  padding:7px 12px; cursor:pointer; transition:background-color .18s ease, color .18s ease;
}
.um-calc__btn:hover{ background:#f3ecd9; color:#6b5a2f; }
.um-calc__btn:focus-visible{ outline:1px solid #8b6f3d; outline-offset:2px; }
.um-calc__filled{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  color:rgba(107,98,83,.75); margin-left:auto;
}

/* polje za unos — dio reda, ne obrazac */
.um-calc__in{
  width:100%; box-sizing:border-box;
  font-family:'Newsreader',Georgia,serif; font-size:14px; text-align:right;
  font-variant-numeric:lining-nums tabular-nums;
  color:rgba(107,98,83,.9); background:transparent;
  border:none; border-bottom:1px solid rgba(139,111,61,.3);
  padding:2px 2px 3px; margin:0;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.um-calc__in::placeholder{ color:rgba(107,98,83,.35); }
.um-calc__in:hover{ border-bottom-color:rgba(139,111,61,.6); }
.um-calc__in:focus{ outline:none; border-bottom-color:#8b6f3d; background:#fdfaf1; color:#1a1814; }
.um-calc__in.is-filled{ color:#1a1814; }
.um-tbl--calc .um-tbl-row > div:nth-child(5){ color:rgba(107,98,83,.9) !important; }
.um-calc__msg{
  margin:10px 0 0; padding:10px 14px;
  font-family:'Newsreader',Georgia,serif; font-size:14px; line-height:1.55; color:#6b5a2f;
  background:rgba(139,111,61,.05);
  border-top:1px solid rgba(139,111,61,.4);
}
@media (max-width:720px){
  .um-calc__filled{ margin-left:0; width:100%; }
}


/* v=667 — (doktorov dokument OFFEN 06.08.2026 + korisnikove upute) NAŠ POTPIS na mjestima
   koja je doktor označio. Efekat nije nov: to je pravilo v=499/508 (.um-mtc-band) — topla
   traka rgba(139,111,61,.05) STOJI stalno, a na prelaz mišem se UGASI (.18s). Radi se
   isključivo stilom, tekst se ne dira.

   Šta gdje (brojevi su stavke iz doktorovog dokumenta):
   • 12 — u naslovima traka ide SAMO oko riječi "Ultima Memoria (UM)" (.um-h1-key).
   • 08, 09, 10, 13, 17 — u podnaslovima preko KURZIVNIH bronzanih riječi (.um-h2 .um-uline):
     "Entrance Test", "Admission", "Learning", "S2/200 – (7) Seven Days".
   • 16, 18 — nastavak istog podnaslova ("Twofold (2x) Increase in Performance").
   • 14, 15 — naziv i bilješka u bočnoj koloni na /programmes (veliki broj 5.2 traku već ima
     od v=491, pa blok postaje cjelina).
   Sve ostale animacije tih elemenata ostaju (linija ispod naslova, hover boje).

   ⚠️ ZAŠTO box-shadow A NE padding: prvi pokušaj je koristio skraćeni `padding`/`margin` kao
   original v=499 i time PREGAZIO postojeće razmake — .um-h1-key ima svoj padding-bottom
   (v=270+), a .um-section__note svoj padding-top:14px, pa je /programmes izgubio 22px visine.
   box-shadow sa spreadom crta traku malo širu od teksta, na svim stranama, i NE ULAZI u
   raspored: izmjereno, visina svake stranice ostaje na piksel ista.

   ISPRAVKA (korisnik, 05.08.2026): prva verzija je traku upalila NA SVIM naslovima (h1 na
   svakoj stranici) i na bilješkama u bočnim kolonama — to niko nije tražio. Traka sada stoji
   ISKLJUČIVO na pet podnaslova koje je doktor označio u dokumentu: 4.2 Entrance Test and
   Admission, 4.3 Learning Plan, 4.4 Learning Phases (stavke 08–10) i 5.2 / 5.3 / 5.4 s njihovim
   nastavcima (stavke 13, 16, 17, 18; 5.4 dodana na korisnikov zahtjev — isti tip sekcije). Glavni naslovi (.um-h1-key) i bilješke (.um-section__note,
   .um-section__label) su vraćeni u prijašnje stanje. */
#me-entrance .um-h2 .um-uline,
#me-plan .um-h2 .um-uline,
#me-phases .um-h2 .um-uline,
#p-s2 .um-h2 .um-uline,
#p-s2 .um-h2 .um-prog-title-cont,
#p-s3 .um-h2 .um-uline,
#p-s3 .um-h2 .um-prog-title-cont,
#p-s10 .um-h2 .um-uline,
#p-s10 .um-h2 .um-prog-title-cont{
  background-color:rgba(139,111,61,0.05);
  box-shadow:0 0 0 0.14em rgba(139,111,61,0.05);
  transition:background-color .18s ease, box-shadow .18s ease;
}
#me-entrance .um-h2 .um-uline:hover,
#me-plan .um-h2 .um-uline:hover,
#me-phases .um-h2 .um-uline:hover,
#p-s2 .um-h2 .um-uline:hover,
#p-s2 .um-h2 .um-prog-title-cont:hover,
#p-s3 .um-h2 .um-uline:hover,
#p-s3 .um-h2 .um-prog-title-cont:hover,
#p-s10 .um-h2 .um-uline:hover,
#p-s10 .um-h2 .um-prog-title-cont:hover{
  background-color:transparent;
  box-shadow:0 0 0 0.14em transparent;
}

/* 05, 07 — traka podsekcije (.um-crit-h): unutar trake, ODMAH ISPOD naslova stoji tanka
   bronzana linija koja se na prelaz mišem gasi. Postojeća animacija trake (podloga se
   posvijetli) i crte trake (dolje, desno) ostaju netaknute. */
.um-crit-h .um-crit-t{
  text-decoration-line:underline;
  text-decoration-color:rgba(139,111,61,.75);
  text-decoration-thickness:0.5px;
  text-underline-offset:4px;
  transition:text-decoration-color .18s ease;
}
.um-crit-h:hover .um-crit-t{ text-decoration-color:transparent; }

/* 20 — lista modula: linija ispod naziva dolazila je TEK na prelaz mišem; obrnuto je, po
   istom pravilu kao traka — STOJI stalno i nestaje kad se pređe mišem. Oznaka "Module (01):"
   ispred nje se ne dira. */
.um-modlist-link{ border-bottom-color:var(--bz1,#8b6f3d) !important; }
.um-modlist-link:hover{ border-bottom-color:transparent !important; }

/* v=668 — (korisnik, 05.08.2026) dvije stvari:

   (1) NAZIV u bočnoj koloni (.um-section__label, npr. "THE BRAIN") ponaša se sada isto kao
   bilješka ispod njega: na prelaz mišem se UVEĆA (v=656, omotač .um-note__z, faktor 1.2308,
   hvatište gore-sredina). Zato je naziv u markupu dobio isti omotač. Crte iznad i ispod naziva
   ostaju na mjestu jer se uvećava samo tekst unutar omotača — kao i kod bilješki.
   Vrijedi u OBJE bočne kolone, na svim stranicama, jer je to isti element svugdje.

   (2) /memory — traka na SVIM naslovima osim glavnog: manji naslovi (h4.um-sub) traku već
   imaju od ranije (stoji u miru, gasi se na hover), a veliki naslovi sekcija je nisu imali.
   Sada je imaju, po istom pravilu: preko kurzivnih bronzanih riječi ("Brain", "Learning",
   "Neuroplasticity", "Memory", "Requirements"). Glavni naslov stranice ("The Memory") ostaje
   bez trake. Traka se crta box-shadowom pa ne ulazi u raspored. */
.um-section__aside .um-section__label .um-note__z{
  display:block;
  transform-origin:top center;
}
@media (hover:hover){
  .um-section__aside .um-section__label{ position:relative; z-index:1; }
  .um-section__aside .um-section__label .um-note__z{
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .um-section__aside .um-section__label:hover{ z-index:20; }
  .um-section__aside .um-section__label:hover .um-note__z{ transform:scale(1.2308); }
}
@media (prefers-reduced-motion:reduce){
  .um-section__aside .um-section__label .um-note__z{ transition:none !important; }
}

.um-page-memory .um-h2 .um-uline:not(.um-mtc-band){
  background-color:rgba(139,111,61,0.05);
  box-shadow:0 0 0 0.14em rgba(139,111,61,0.05);
  transition:background-color .18s ease, box-shadow .18s ease;
}
.um-page-memory .um-h2 .um-uline:not(.um-mtc-band):hover{
  background-color:transparent;
  box-shadow:0 0 0 0.14em transparent;
}

/* v=669 — (korisnik, 05.08.2026) /memory: traka ide CIJELOM ŠIRINOM naslova, ne samo oko
   pojedinih riječi. Dvije izmjene, obje samo na toj stranici:
   • veliki naslovi (.um-h2) — traka se seli s kurzivnih riječi (v=668) na cijeli naslov, pa
     stoji kao puna traka preko širine kolone i visine teksta; mali prelaz preko ivica ostaje
     jer se crta box-shadowom (0.14em), tako da raspored ostaje netaknut;
   • mali naslovi (h4.um-sub) — dosad je traka grlila tekst (width:fit-content iz v=629b);
     sada ide punom širinom kolone, ista boja i isto ponašanje.
   Oba se, kao i dosad, GASE na prelaz mišem. Glavni naslov stranice ostaje bez trake. */
.um-page-memory .um-h2 .um-uline:not(.um-mtc-band),
.um-page-memory .um-h2 .um-uline:not(.um-mtc-band):hover{
  background-color:transparent;
  box-shadow:none;
}
.um-page-memory .um-h2{
  background-color:rgba(139,111,61,0.05);
  box-shadow:0 0 0 0.14em rgba(139,111,61,0.05);
  transition:background-color .18s ease, box-shadow .18s ease;
}
.um-page-memory .um-h2:hover{
  background-color:transparent;
  box-shadow:0 0 0 0.14em transparent;
}
body.um-page-memory .um-sub{ width:auto !important; }

/* v=670 — (korisnik, 08.08.2026) TRAKA NA NASLOVIMA SEKCIJA (.um-h2) na cijelom sajtu —
   glavni naslov stranice (.um-h1) ostaje bez nje, a kad se naslov lomi u dva reda traka ide
   SAMO PREKO PRVOG REDA.

   Kako: traka se crta pseudo-elementom ::before iza teksta, pune širine naslova, s malim
   prelazom preko ivica (0.14em), a visina joj je manje od dvoje — visina samog naslova ili
   visina jednog reda (jedinica lh). Zato jednoredni naslov dobije traku tačno oko sebe, a
   dvoredni samo preko prvog reda. Pseudo-element ne ulazi u raspored, pa se ništa ne pomjera:
   izmjereno, visina svake stranice ostaje na piksel ista. Gasi se na prelaz mišem (.18s).

   ISPRAVKA (korisnik, isti dan): prva verzija je traku stavila na deset vrsta naslova — i na
   sitne naslove unutar kartica (.umx-row-title "A | Capacity of the Memory"), na stavke
   /framework, kartice /evidence, blokove /system i /tests. Traženi su bili SAMO naslovi
   sekcija, pa je ostao jedino .um-h2.
   NIJE dirano: glavni naslov (.um-h1), trake koje su i prije postojale (.um-cmp-divider,
   .um-crit-h, .um-mblock__head, .um-sub) i nazivi/bilješke u bočnim kolonama. */
.um-h2{ position:relative; }
.um-h2::before{
  content:"";
  position:absolute;
  left:-0.14em; right:-0.14em; top:-0.14em;
  height:calc(100% + 0.28em);
  height:min(calc(100% + 0.28em), calc(1lh + 0.28em));
  background-color:rgba(139,111,61,0.05);
  transition:opacity .18s ease;
  pointer-events:none;
  z-index:-1;
}
.um-h2:hover::before{ opacity:0; }
/* /memory je traku dobio blok-pozadinom u v=669 — sada je nosi isti ::before kao svi ostali,
   pa se stara gasi da se boja ne udvostruči. */
.um-page-memory .um-h2{ background-color:transparent; box-shadow:none; }

/* v=671 — (korisnik, 08.08.2026) GLAVNI NASLOV NIGDJE nema traku. Na devet stranica ona nije
   dolazila iz našeg pravila nego iz klase um-mtc-band upisane u sam naslov: /ai-memory,
   /contact, /health, /framework (doktorova markup runda, commit 79e4936) te /pricing, /imprint,
   /privacy, /terms, /refund (napravljene po istom obrascu). Umjesto mijenjanja teksta na devet
   mjesta, traka se gasi jednim pravilom — u naslovima sekcija (.um-h2) ostaje kakva jest. */
h1 .um-mtc-band{ background-color:transparent !important; }

/* v=672 — (korisnik, 08.08.2026) traka u naslovu 1.3 na naslovnoj nije išla punom širinom.
   Uzrok: taj jedini naslov je bio display:inline-block (v=?, red 8911) da bi bronzana crta
   ispod njega grlila tekst — a ta crta je kasnije uklonjena (border-bottom:none, red 16462).
   Razlog je time nestao, a uski okvir je ostao, pa je i traka bila široka koliko tekst.
   Vraćen je na block kao svi ostali naslovi sekcija: provjereno, ništa se ne pomjera (visina
   naslovne 3277 kao prije, nijedan naslov ne mijenja položaj), a traka sada ide punom širinom
   kolone kao i drugdje. Ovo je jedini takav naslov na cijelom sajtu. */
#s-practice .um-h2{ display:block !important; }

/* v=673 — (korisnik, 08.08.2026) naziv sekcije u DESNOJ koloni ("2 · SYSTEM", "3 · MEMORY"…),
   onaj red između "Section" i "Subsections", počinje od početka kao i u lijevoj koloni.
   Bio je centriran zbog pravila `.um-hero .um-section__aside--right .um-meta dd{text-align:center}`
   koje hvata SVE vrijednosti u desnoj koloni; ovdje se vraća na lijevo samo prvi red — sam naziv.
   Poravnanje se mora postaviti i na sam LINK unutar tog reda — on nosi svoj text-align:center,
   pa je tekst ostajao uvučen iako je red bio lijevo poravnat.
   Spisak podsekcija ispod ostaje kako je bio, dok se ne kaže drukčije. */
.um-hero .um-section__aside--right .um-meta dd:first-of-type,
.um-hero .um-section__aside--right .um-meta dd:first-of-type a{ text-align:left !important; }

/* v=674 — (korisnik, 08.08.2026) kalkulator 18.2: kvačica iza rednog broja + zaglavlje bez ($).
   • Kvadratić stoji odmah iza broja pozicije. Kliknut — u njemu se pojavi kvačica i taj red
     ulazi u zbir; otkvačen — cijena ostaje zapisana, ali se ne sabira. Ko samo kuca cijene ne
     mora ništa klikati: upisana cijena sama označi svoj red (obrisana ga otkvači).
   • Zaglavlje "Your price ($)" se lomilo u dva reda; oznaka valute je skinuta jer iznosi u
     redovima ionako nose $. Kolona "No." je zato malo šira, da broj i kvadratić stanu u red.
   Kvadratić je pravo polje za označavanje (checkbox) — radi tastaturom i čitačem ekrana; ovdje
   mu je samo dat izgled sajta: tanki bronzani okvir i kvačica u istoj boji. */
.um-tbl--calc .um-tbl-head,
.um-tbl--calc .um-tbl-row{
  grid-template-columns:84px minmax(190px,1fr) 58px 76px 96px 58px !important;
}
.um-calc__no{ margin-right:8px; }
.um-calc__pick{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; vertical-align:-2px; cursor:pointer; position:relative;
}
.um-calc__pick input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.um-calc__tick{
  width:14px; height:14px; box-sizing:border-box;
  border:1px solid rgba(139,111,61,.55); background:transparent;
  transition:border-color .18s ease, background-color .18s ease;
}
.um-calc__pick:hover .um-calc__tick{ border-color:var(--bz1,#8b6f3d); background:rgba(139,111,61,.06); }
.um-calc__pick input:focus-visible + .um-calc__tick{ outline:1px solid #8b6f3d; outline-offset:2px; }
.um-calc__tick{ display:flex; align-items:center; justify-content:center; }
.um-calc__pick input:checked + .um-calc__tick{ border-color:var(--bz1,#8b6f3d); }
/* kvačica: klasična — pravougaonik s dvije ivice, zarotiran 45°; crta se čisto na svakom
   ekranu, za razliku od gradijenata koji na sitnoj veličini izgledaju kao križić */
.um-calc__pick input:checked + .um-calc__tick::after{
  content:"";
  width:4px; height:8px;
  margin-top:-2px;
  border:solid var(--bz1,#8b6f3d);
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
/* otkvačen red: iznos je blijed, da se vidi da ne ulazi u zbir */
.um-tbl--calc [data-calc-amount].is-off{ opacity:.35; }

/* v=675 — (korisnik, 08.08.2026) obje tabele na /pricing: svaka grupa je zasebna kutija, kao
   zaglavlje. Do sada je tabela bila jedan neprekinut blok u kojem su grupni redovi samo
   promjena boje; sada je složena kao niz kutija, s istim razmakom kao ispod zaglavlja:

     [ zaglavlje ]           ← okvir, kao i dosad
        razmak
     [ 1. Preparation… ]     ← grupni red: isti okvir kao zaglavlje (deblja lijeva ivica)
        razmak
     [ stavke te grupe ]     ← sjedinjene, ali blok ima svoju vanjsku liniju
        razmak
     [ 2. Performance… ]     … i tako do kraja
     [ Total ]               ← zbir isto kao svoja kutija

   Radi se stilom, bez diranja markupa: grupni red dobija okvir i razmak, prva stavka poslije
   grupe gornju ivicu, a zadnja stavka prije sljedeće grupe (ili prije zbira) donju — otud
   :has(+ …). Vrijedi i za doktorovu tabelu 18.1 i za kalkulator 18.2. */
.um-tbl--price .um-tbl-row--grp{
  border:1.33333px solid rgb(139,111,62) !important;
  border-left-width:2.66667px !important;
  border-left-color:rgb(139,111,61) !important;
  margin-top:14px !important;
  margin-bottom:4px !important;
}
.um-tbl--price .um-tbl-row--grp:first-child{ margin-top:0 !important; }

/* blok stavaka: gornja i donja vanjska linija + bočne (bočne već postoje) */
.um-tbl--price .um-tbl-row--grp + .um-tbl-row{
  border-top:1.33333px solid rgba(139,111,61,.20) !important;
}
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--grp),
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--sum){
  border-bottom:1.33333px solid rgba(139,111,61,.20) !important;
}
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--grp)::after,
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--sum)::after{ display:none !important; }

/* zbirni red: svoja kutija s razmakom iznad */
.um-tbl--price .um-tbl-row--sum{
  border:1.33333px solid rgba(139,111,61,.5) !important;
  border-left-width:2.66667px !important;
  border-left-color:rgb(139,111,61) !important;
  margin-top:14px !important;
}

/* v=676 — (korisnik, 08.08.2026) blok sjedinjenih stavaka dobija PRAVI vanjski okvir, istu
   liniju kao grupni red i zaglavlje (do sada su mu bočne ivice bile blijede, rgba .20, pa se
   kutija jedva nazirala). Unutrašnje crte između redova ostaju kakve jesu. Vrijedi za obje
   tabele na /pricing. */
.um-tbl--price .um-tbl-row:not(.um-tbl-row--grp):not(.um-tbl-row--sum){
  border-left:1.33333px solid rgb(139,111,62) !important;
  border-right:1.33333px solid rgb(139,111,62) !important;
}
.um-tbl--price .um-tbl-row--grp + .um-tbl-row{
  border-top:1.33333px solid rgb(139,111,62) !important;
}
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--grp),
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--sum){
  border-bottom:1.33333px solid rgb(139,111,62) !important;
}

/* v=677 — (korisnik, 08.08.2026) kalkulator 18.2 i obje tabele, tri sitnice:
   • kvadratić i kvačica dvostruko veći (14 → 28px), da se lakše pogodi prstom;
   • polje za unos cijene dobija blijedu bronzanu trakicu (podloga u boji sajta + jača donja
     crta), da se odmah vidi gdje se piše — prije se vidjela samo tanka linija;
   • razmak između segmenata smanjen s 14px na 4px, koliko je i razmak ispod zaglavlja, pa su
     sada SVI vertikalni razmaci u tabeli jednaki. */
.um-calc__pick{ width:28px; height:28px; vertical-align:-8px; }
.um-calc__tick{ width:28px; height:28px; }
.um-calc__pick input:checked + .um-calc__tick::after{
  width:8px; height:16px; margin-top:-3px; border-width:0 2.5px 2.5px 0;
}
.um-calc__in{
  background:rgba(139,111,61,0.06);
  border-bottom:1.5px solid rgba(139,111,61,.45);
  padding:4px 6px 4px;
}
.um-calc__in:hover{ background:rgba(139,111,61,0.10); border-bottom-color:var(--bz1,#8b6f3d); }
.um-calc__in:focus{ background:#fdfaf1; border-bottom-color:#8b6f3d; }
.um-tbl--price .um-tbl-row--grp{ margin-top:4px !important; }
.um-tbl--price .um-tbl-row--sum{ margin-top:4px !important; }

/* v=678 — (korisnik, 08.08.2026) tri sitnice:
   • vodoravne crte oko grupnog reda i oko bloka stavaka sada su pune, iste debljine kao
     bočna bronzana ivica (2.66667px) — dosad su bile tanje pa su djelovale blijedo;
   • kvadratić za označavanje dobija istu blijedu bronzanu podlogu kao polje za unos, pa se
     vidi da je i on mjesto na koje se klikne;
   • u kalkulatoru (18.2) nema više NIJEDNE fiksne vrijednosti — grupni red pokazuje koliko je
     pozicija odabrano i njihov međuzbir, a zbirni red broj odabranih pozicija i ukupan zbir;
     sve se računa iz onoga što korisnik upiše i označi. Doktorova tabela 18.1 ostaje kakva
     jest, tamo su brojevi iz dokumenta. */
.um-tbl--price .um-tbl-row--grp{
  border-top-width:2.66667px !important;
  border-bottom-width:2.66667px !important;
}
.um-tbl--price .um-tbl-row--grp + .um-tbl-row{ border-top-width:2.66667px !important; }
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--grp),
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--sum){ border-bottom-width:2.66667px !important; }
.um-tbl--price .um-tbl-row--sum{
  border-top-width:2.66667px !important;
  border-bottom-width:2.66667px !important;
}
.um-calc__tick{ background:rgba(139,111,61,0.06); }
.um-calc__pick:hover .um-calc__tick{ background:rgba(139,111,61,0.12); }

/* v=679 — (korisnik, 08.08.2026) ispravka v=678, tri stvari:
   1. VODORAVNE crte vraćene na tanko (1.33px) — u v=678 sam ih podebljao na 2.67px, što je
      bilo previše; debljina 2.67px ostaje samo na bočnim ivicama, kao naglasak.
   2. DESNA ivica ista kao lijeva: zaglavlje, grupni red i zbirni red imali su lijevo 2.67px a
      desno 1.33px — sada je i desno 2.67px, pa je kutija simetrična.
   3. UNUTRAŠNJE crte između stavaka bile su blijede (1.5px, bronza 28%) — sada imaju istu
      vrijednost kao vanjske linije (1.33px, puna bronza), pa se blok čita kao tabela a ne kao
      mrlja. */
.um-tbl--price .um-tbl-row--grp,
.um-tbl--price .um-tbl-row--sum,
.um-tbl--price .um-tbl-row--grp + .um-tbl-row,
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--grp),
.um-tbl--price .um-tbl-row:has(+ .um-tbl-row--sum){
  border-top-width:1.33333px !important;
  border-bottom-width:1.33333px !important;
}
.um-tbl--price .um-tbl-head,
.um-tbl--price .um-tbl-row--grp,
.um-tbl--price .um-tbl-row--sum{
  border-right-width:2.66667px !important;
  border-right-color:rgb(139,111,61) !important;
}
.um-tbl--price .um-tbl-row:not(:last-child)::after{
  height:1.33333px !important;
  background:rgb(139,111,62) !important;
  left:0 !important;
  right:0 !important;
}

/* v=680 — (korisnik, 08.08.2026) unutrašnje crte između stavaka su bile jednake vanjskim
   (1.33px, puna bronza) pa su djelovale predebelo. Sada su tanje i mekše od okvira: 1px i
   bronza 60%. Vanjske linije ostaju kakve jesu — okvir 1.33px puna bronza, bočne ivice
   zaglavlja/grupe/zbira 2.67px. */
.um-tbl--price .um-tbl-row:not(:last-child)::after{
  height:1px !important;
  background:rgba(139,111,61,.6) !important;
}

/* v=681 — (korisnik, 08.08.2026) dvije stvari, obje mjerene a ne procijenjene:

   1. CRTE: unutrašnje vodoravne crte bile su crtane pseudo-elementom (::after, pozadina), a
      vanjske su prave ivice (border). Zato se nisu poklapale u iscrtavanju: ivica se lijepi
      za piksel ekrana, a pozadinska trakica se razmaže preko dva reda piksela i djeluje deblje,
      makar joj mjera bila ista. Sada su i unutrašnje crte PRAVE IVICE, s istom vrijednošću kao
      vanjske: 1.33333px solid rgb(139,111,62). Dakle jedna te ista linija svugdje —
      i uspravno i vodoravno, i unutra i vani.

   2. KVADRATIĆ: razmak lijevo i desno od njega je izjednačen — broj pozicije i kvadratić se
      poravnavaju uz desnu ivicu svoje kolone s razmakom od 10px, a do prve riječi ostaje isti
      razmak od 10px (razmak između kolona), pa kvadratić stoji tačno na sredini između zagrade
      i početka riječi. */
.um-tbl--price .um-tbl-row::after{ display:none !important; }
.um-tbl--price .um-tbl-row:not(.um-tbl-row--grp):not(.um-tbl-row--sum){
  border-bottom:1.33333px solid rgb(139,111,62) !important;
}
.um-tbl--calc .um-tbl-row:not(.um-tbl-row--grp):not(.um-tbl-row--sum) > div:first-child{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-right:0;
}
.um-calc__no{ margin-right:0 !important; }

/* v=682 — (korisnik, 08.08.2026) /pricing, dvije stvari:
   1. ZAGLAVLJE OBJE TABELE ide u bold — cijeli red, sve ćelije ("No.", "Component",
      "Position", "Price ($)" / "Your price", "Amount ($)", "Description"). Do sada je bio
      poludebeo (500) i na papirnoj pozadini se gubio u odnosu na okvir koji ga nosi.
      Bold je 700; veličina, pismo i razmaci ostaju netaknuti, pa se visina reda ne mijenja.
   2. Grupni red kalkulatora sada ima broj odabranih pozicija u koloni "Position" (ćelija 3),
      a pod "Your price" zbir — zato ćelija 3 dobija isti bronzani polu-bold kao ćelije 4 i 5
      (pravilo iz v=666 pokrivalo je samo njih dvije). Isto i u redu "Total". */
.um-tbl--price .um-tbl-head > div{ font-weight:700 !important; }
.um-tbl--calc .um-tbl-row--grp > div:nth-child(3){
  color:var(--bz1,#8b6f3d) !important; font-weight:600 !important;
}
.um-tbl--calc .um-tbl-row--sum > div:nth-child(3),
.um-tbl--calc .um-tbl-row--sum > div:nth-child(4){ font-size:15px !important; font-weight:600 !important; }

/* v=683 — (korisnik, 08.08.2026) prva kolona kalkulatora 18.2 — broj lijevo, kvadratić na
   sredini praznine. U v=681 su broj i kvadratić bili gurnuti uz DESNU ivicu kolone, pa je broj
   pozicije visio u sredini i lijepio se za kvadratić. Sada:
     • broj pozicije počinje uz lijevu ivicu kolone, tačno ispod broja grupe ("1.", "2." …) —
       izmjereno: broj grupe počinje na 610px, stavka je počinjala na 619px, razlika je bila
       9px, a preostalih 1.33px je ivica kutije grupe, otud padding-left;
     • kvadratić stoji tačno na sredini između zagrade i prve riječi: zatvorena zagrada završava
       na 645.65px, riječ počinje na 702.67px — praznina 57.02px, kvadratić 28px, ostaje po
       14.51px sa svake strane (desno: 4.51px do kraja kolone + 10px razmaka između kolona);
     • broj ima fiksnu širinu 36px (izmjerena širina "(01.)" u IBM Plex Mono 11.5px je 35.65px),
       pa kvadratić stoji na istom mjestu i u zadnjem redu, gdje broj glasi "39." bez zagrada;
       razmak je zato 14.16px, da razmak od SLOVA, a ne od okvira, ispadne 14.51px.
   Račun kolone: 1.33 + 36 + 14.16 + 28 = 79.49 od 84px — ostatak 4.51px je desna praznina. */
.um-tbl--calc .um-tbl-row:not(.um-tbl-row--grp):not(.um-tbl-row--sum) > div:first-child{
  justify-content:flex-start !important;
  gap:14.16px !important;
  padding-left:1.33333px !important;
}
.um-calc__no{ flex:none; width:36px; text-align:left; }

/* v=684 — (korisnik, 08.08.2026) zbirni red "TOTAL" ide u bold, u OBJE tabele na /pricing —
   i u doktorovoj 18.1 i u kalkulatoru 18.2. Cijeli red, kao i zaglavlje u v=682: i sama riječ
   TOTAL i brojevi uz nju (do sada 600, sada 700), da dno tabele stoji jednako čvrsto kao vrh.
   Nabrajam ćelije po redu jer pravila iz v=666 i v=682 gađaju baš nth-child(3)–(5) — pravilo
   bez broja bilo bi slabije od njih i ne bi se primijenilo. */
.um-tbl--price .um-tbl-row--sum > div:nth-child(1),
.um-tbl--price .um-tbl-row--sum > div:nth-child(2),
.um-tbl--price .um-tbl-row--sum > div:nth-child(3),
.um-tbl--price .um-tbl-row--sum > div:nth-child(4),
.um-tbl--price .um-tbl-row--sum > div:nth-child(5),
.um-tbl--price .um-tbl-row--sum > div:nth-child(6){ font-weight:700 !important; }

/* v=685 — (korisnik, 08.08.2026) kvadratić u kalkulatoru 18.2 se ne može kliknuti dok cijena
   nije upisana; označi se sam kad se cijena unese, i otključa tek tada. Zaključan kvadratić
   ima bljeđi okvir (28% umjesto 55%), ne odgovara na prelaz mišem i ne mijenja kursor u ruku —
   po izgledu se odmah vidi da red čeka cijenu. Otključan izgleda i radi kao dosad. */
.um-calc__pick:has(input:disabled){ cursor:default; }
.um-calc__pick input:disabled{ cursor:default; }
.um-calc__pick input:disabled + .um-calc__tick,
.um-calc__pick:hover input:disabled + .um-calc__tick{
  border-color:rgba(139,111,61,.28);
  background:transparent;
}

/* v=686 — (doktor preko korisnika, 22.10.2026) OBRNUTO posvjetljenje u zaglavlju javnih strana:
   kutije gornjeg menija (System, Memory, Method, Programmes, Modules, More) sada u MIROVANJU stoje svijetle (#f6f2e4 — dosadašnja boja na
   prelazu), a na prelazu mišem potamne na #efe9d7 (dosadašnja boja mirovanja). Trenutna strana
   u meniju (.is-active) ide s prelazom (tamnija), da se i dalje razlikuje od ostalih. Crte ispod
   natpisa na prelazu ostaju kako su bile. v=686b: kutije trake Home/Paris korisnik je vratio na
   staro (tamnije u mirovanju, svjetlije na prelazu) — ovdje ih nema. */
.um-topbar__nav-left > .um-nav__link{ background-color:#f6f2e4; }
.um-topbar__nav-left > .um-nav__link:hover,
.um-topbar__nav-left > .um-nav__link.is-active{ background-color:#efe9d7; }

/* v=687 — (korisnik, 22.10.2026) tekst koji se kreće u javnoj traci: SVE jednom bojom — bronza
   (do sada «Welcome to» / «The Mysteries of» tamnoplavi, nazivi bronzani) — i bez velikih slova
   preko CSS-a: tekst stoji kako je napisan u um-page-ticker.ejs («Welcome to Ultima Memoria | UM
   ✦✦✦ The Mysteries of Space and Time»), nazivi velikim početnim slovom. Malim slovima Cormorant
   na 14px djeluje sitno, pa red ide na 16px (zvjezdice ostaju svoje veličine). Debljina i kurziv
   («Space and Time») ostaju. Dashboard traka (_dash_nav.ejs) NIJE dirana. */
.um-public-ticker .dt-ticker-seg,
.um-public-ticker .dt-ticker-seg *{ color:#8b6f3e !important; text-transform:none !important; }
.um-public-ticker .dt-ticker-seg{ font-size:16px !important; }
.um-public-ticker .dt-ticker-seg .dt-ticker-ink,
.um-public-ticker .dt-ticker-seg b,
.um-public-ticker .dt-ticker-seg em{ font-size:inherit !important; }

/* v=688 — (korisnik, 22.10.2026) javna traka kao gornji meni iz v=686: SVE tri kutije — Home,
   srednja s tekstom koji se kreće, sat Paris — u mirovanju svijetle (#f6f2e4), na prelazu mišem
   tamnije (#efe9d7). Time se poništava v=686b (Home/Paris su ponovo obrnuti, sada na zahtjev).
   «Space and Time» više nije kurziv — uspravno, kao ostatak reda (debljina ostaje). */
.um-public-ticker .dt-tk-side,
.um-public-ticker .dt-tk-top{ background:#f6f2e4 !important; }
.um-public-ticker .dt-tk-side:hover,
.um-public-ticker .dt-tk-top:hover{ background:#efe9d7 !important; }
.um-public-ticker .dt-ticker-seg em{ font-style:normal !important; }

/* v=689 — (korisnik, 22.10.2026) gornja desna kutija javne trake: «Test | UM» umjesto sata
   (Paris · UTC · vrijeme). Kutija ostaje ista (mjesto, okvir, boje iz v=688, crta ispod natpisa
   na prelazu); klikom otvara prozor za registraciju (um-slot-gate.js), pa ima ruku kao pokazivač.
   Vertikalna crta kao u «Ultima Memoria | UM» — tanka, bronzana, s razmakom. */
.um-public-ticker .dt-tk-side--test{ cursor:pointer; }
.um-public-ticker .dt-tk-side--test .um-tk-bar{ margin:0 .3em; color:#8b6f3e; font-weight:300; }

/* v=690 — (doktor preko korisnika, 22.10.2026) meni «More» (um-palette): nazivi stranica u
   MIROVANJU bronzani (#8b6f3d, do sada skoro crni #1a1814); kad se uključi traka — prelaz
   mišem, izbor tastaturom (.is-active) ili trenutna strana (.is-current) — naziv postaje
   svjetlija crna / tamnosiva (#4a453d). Same trake (pozadina, lijeva crta) se ne mijenjaju. */
.um-palette .um-pal__row .um-pal__name{ color:var(--bz1,#8b6f3d) !important; }
.um-palette .um-pal__row:hover .um-pal__name,
.um-palette .um-pal__row.is-active .um-pal__name,
.um-palette .um-pal__row.is-current .um-pal__name{ color:#4a453d !important; }

/* v=691 — (korisnik, 22.10.2026) traka s tekstom koji se kreće ISTA SVUDA, bez izuzetaka:
   pravila iz v=687 + v=688 (do sada samo .um-public-ticker) važe i za Dashboard traku
   (_dash_nav.ejs, ista .dt-ticker struktura — i pretpregled i prijavljeni korisnik):
   sav tekst bronzan, bez CSS velikih slova (stoji kako je napisan/preveden), 16px, «Space
   and Time» uspravno; kutije Home / srednja / Next u mirovanju svijetle (#f6f2e4), na
   prelazu tamnije (#efe9d7). */
.dt-ticker .dt-ticker-seg,
.dt-ticker .dt-ticker-seg *{ color:#8b6f3e !important; text-transform:none !important; }
.dt-ticker .dt-ticker-seg{ font-size:16px !important; }
.dt-ticker .dt-ticker-seg .dt-ticker-ink,
.dt-ticker .dt-ticker-seg b,
.dt-ticker .dt-ticker-seg em{ font-size:inherit !important; }
.dt-ticker .dt-ticker-seg em{ font-style:normal !important; }
.dt-ticker .dt-tk-side,
.dt-ticker .dt-tk-top{ background:#f6f2e4 !important; }
.dt-ticker .dt-tk-side:hover,
.dt-ticker .dt-tk-top:hover{ background:#efe9d7 !important; }

/* v=692 — (korisnik, 22.10.2026) pretraga (Search FAQ): pitanje više nije dugme koje otvara
   odgovor, nego VEZA na isto pitanje u FAQ-u na /contact (#faq-NN) — bez «+» i bez odgovora.
   Veza izgleda kao dosadašnji red (bez podvlake, ista boja i razmak). */
a.um-faqrow__q{ text-decoration:none !important; color:var(--ink); box-sizing:border-box; }

/* v=692b — (korisnik, 22.10.2026) pretraga (Search FAQ) kao meni More (v=690): pitanja
   bronzana u mirovanju, na traci (prelaz / izbor strelicama) tamnosiva #4a453d. Broj ostaje bronza. */
#um-search .um-faqrow__text{ color:var(--bz1,#8b6f3d) !important; }
#um-search .um-faqrow:hover .um-faqrow__text,
#um-search .um-faqrow.is-active .um-faqrow__text{ color:#4a453d !important; }

/* v=693 — (korisnik, 22.10.2026) «TEST | UM» u gornjoj desnoj kutiji trake — sve bold
   (TEST, crta i UM). */
.um-public-ticker .dt-tk-side--test .dt-tk-side__label,
.um-public-ticker .dt-tk-side--test .um-tk-bar{ font-weight:700 !important; }

/* (v=694 bio je CSS za formular rane prijave /early-access — formular uklonjen 04.11.2026 na
   korisnikov zahtjev, fajlovi u ~/Downloads/ultima_arhiva_2026-11-04/rana-prijava.) */

/* v=695 — (04.11.2026) Engleski ukras „The “ ispred naziva u lijevoj koloni zaglavlja (v=106) samo na
   engleskom. Stranice čija lista nije u <aside> (register, contact, practice-test…) na drugim jezicima
   su pokazivale „The Poglavlje“, „The Abschnitt“. Engleski izgled se ne mijenja. */
html:not([lang="en"]) .um-meta dt::before{ content:none !important; }

/* v=696 — (05.11.2026) doktorova poruka umjesto formulara (registracija, prijava, kontakt):
   isti prozor kao dashboard preview (.um-preview-modal…): naslov + doktorov tekst u dva pasusa,
   slova kao #um-preview-copy. Naslov se odmiče od × u uglu. */
.um-beta-modal .um-preview-modal__card h2{ margin-right:40px; }
.um-beta-modal__copy{ position:relative; margin:0; color:#3a342b;
  font-family:'Newsreader',Georgia,serif; font-size:18px; line-height:1.58; }
.um-beta-modal__copy p{ margin:0 0 14px; }
.um-beta-modal__copy p:last-child{ margin-bottom:0; }
/* na mobitelu zlatni rez (v=598) pravi kutiju 362×224 u kojoj se tekst skrola, a dugmad se ne
   vide (Chromium je pak širi preko ekrana) — ovdje visina prati tekst, širina je ekran.
   Važi za SVE prozore ovog dizajna: doktorova poruka, dashboard preview, Test | UM i
   pravougaonici u traci (korisnik, 05.11.2026: „može ispravi“). Računar se ne mijenja. */
@media(max-width:560px){
  .um-preview-modal__card{ aspect-ratio:auto; width:100%; }
}

/* v=697 — (06.11.2026) Safari (WebKit) ne crta tekst manji od 9px. Pod body{zoom} < 1 (v=612/613,
   1200–2239px) natpis „Foundations of the Intellect“ i natpisi ikonica u zaglavlju (9px × zoom)
   ostaju na 9px, pa su u Safariju do 33 % širi nego u Chromeu: natpis izlazi iz logotipa i siječe
   ga meni, „Register“ dodiruje crtu (korisnikov screenshot iz Safarija). Samo Safari
   (@supports font:-apple-system-body), samo dok je zoom < 1: tekst se transformom vizuelno smanji
   tačno za faktor zooma — izgleda kao u Chromeu. Oba natpisa su 9px, pa je faktor = --um-zoom.
   Chrome/Firefox: ništa se ne mijenja. */
@supports (font: -apple-system-body) {
  @media (min-width:1200px) and (max-width:2239.98px) {
    .um-brand__sub{ transform:scale(var(--um-zoom)); transform-origin:left center; }
    .um-nav__ico-lbl{ display:inline-block; transform:scale(var(--um-zoom)); transform-origin:center top; }
  }
}

/* v=698 — (06.11.2026) Safari: i poslije v=697 „Register“ je na korisnikovom Safariju stajao tik
   uz crtu iza „More“ (screenshot) — prva ikonica ima samo 3px lijevo (v=640n: margin -3px),
   ostale 16px. Samo Safari, samo dok je zoom < 1: cijela ikonica 8px udesno (margina, ne
   padding — podvlaka na hover iz v=640m ostaje ista). Chrome se ne mijenja. */
@supports (font: -apple-system-body) {
  @media (min-width:1200px) and (max-width:2239.98px) {
    .um-nav__icons a.um-nav__ico:first-child{ margin-left:5px !important; }
  }
}