/* Digital maturity assessment sheet (includes/visuals/maturity.php) */
.mt { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -40px rgba(12, 43, 21, .35); overflow: hidden; }
.section--white .mt { background: var(--white); }
.mt-top { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.mt-win { display: inline-flex; gap: 6px; flex: none; }
.mt-win i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mt-sheet { margin: 0; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--forest); }
.mt-top .vz-tag { margin-left: auto; flex: none; }
.mt-body { padding: 32px; padding: clamp(18px, 3vw, 40px); }

/* shared columns: dimension | five levels | gap */
.mt-scale, .mt-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 72px; column-gap: 0; }
.mt-steps, .mt-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mt-c1 { grid-column-start: 1; } .mt-c2 { grid-column-start: 2; } .mt-c3 { grid-column-start: 3; } .mt-c4 { grid-column-start: 4; } .mt-c5 { grid-column-start: 5; }
.mt-e1 { grid-column-end: 2; } .mt-e2 { grid-column-end: 3; } .mt-e3 { grid-column-end: 4; } .mt-e4 { grid-column-end: 5; } .mt-e5 { grid-column-end: 6; }

/* staircase */
.mt-scale { align-items: end; }
.mt-dims-t, .mt-gap-t { margin: 0 0 12px; }
.mt-gap-t { text-align: center; }
.mt-steps { list-style: none; margin: 0; padding: 0; align-items: end; border-bottom: 2px solid var(--forest); }
.mt-step { position: relative; min-width: 0; }
.mt-step-b { position: relative; z-index: 0; display: flex; flex-direction: column; gap: 6px; margin: 0 2px; padding: 10px 10px 12px; color: var(--forest); }
.mt-step-b::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px 8px 0 0; background: var(--mt-bg); }
.mt-step--1 .mt-step-b { height: 68px; --mt-bg: var(--mint); }
.mt-step--2 .mt-step-b { height: 92px; --mt-bg: var(--sage); }
.mt-step--3 .mt-step-b { height: 116px; --mt-bg: var(--green); }
.mt-step--4 .mt-step-b { height: 140px; --mt-bg: var(--forest-2); color: var(--white); }
.mt-step--5 .mt-step-b { height: 164px; --mt-bg: var(--forest); color: var(--white); }
.mt-n { font-family: var(--font-serif); font-size: 26px; line-height: 1; }
.mt-step--4 .mt-n, .mt-step--5 .mt-n { color: var(--green); }
.mt-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.mt-flag { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; width: max-content; max-width: 150%; margin-inline: auto; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.mt-flag::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; }
.mt-flag--now { background: var(--forest); color: var(--green); padding-left: 24px; }
.mt-flag--now::after { border-top-color: var(--forest); }
.mt-flag--now::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--green); }
.mt-flag--tg { background: var(--white); color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); }
.mt-flag--tg::after { border-top-color: var(--forest); }
.mt-names { display: none; }

/* dimension rows */
.mt-rows { list-style: none; margin: 0; padding: 0; }
.mt-row { align-items: center; border-bottom: 1px solid var(--line); }
.mt-dim { min-width: 0; padding: 14px 16px 14px 0; }
.mt-dim-n { margin: 0; font-size: 16px; font-weight: 700; color: var(--forest); }
.mt-dim-o { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.mt-track { align-self: stretch; align-items: center; min-height: 64px; }
.mt-cell { grid-row: 1; align-self: stretch; margin: 0 2px; }
.mt-cell--tg { background: rgba(150, 248, 120, .16); }
.mt-bar, .mt-dot, .mt-tg { grid-row: 1; }
.mt-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--forest), var(--green-2)); }
.mt-w2 { margin-inline: 25%; } .mt-w3 { margin-inline: 16.667%; } .mt-w4 { margin-inline: 12.5%; } .mt-w5 { margin-inline: 10%; }
.mt-dot { justify-self: center; width: 18px; height: 18px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--green-2); }
.mt-dot--kept { width: 14px; height: 14px; box-shadow: none; }
.mt-tg { justify-self: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2.5px var(--forest); }
.mt-gap { margin: 0; text-align: center; font-size: 18px; font-weight: 700; color: var(--green-text); font-variant-numeric: tabular-nums; }
.mt-gap--0 { color: var(--ink-2); }

.mt-legend { align-items: center; margin-top: 20px; }
.mt-key { display: inline-block; flex: none; border-radius: 50%; }
.mt-key--dot { width: 12px; height: 12px; background: var(--forest); box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--green-2); }
.mt-key--ring { width: 18px; height: 18px; box-shadow: inset 0 0 0 2.5px var(--forest); }
.mt-legend-pos { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* animation: the staircase rises step by step, the flags drop in, then on each row the current level
   appears, the bar runs to the target and the target ring closes it; the "you are here" dot keeps pulsing */
.js .vz-figure .mt-step-b::before { transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .mt-n, .js .vz-figure .mt-name { opacity: 0; transition: opacity .4s ease .35s; }
.js .vz-figure .mt-step--2 .mt-step-b::before { transition-delay: .1s; } .js .vz-figure .mt-step--2 .mt-n, .js .vz-figure .mt-step--2 .mt-name { transition-delay: .45s; }
.js .vz-figure .mt-step--3 .mt-step-b::before { transition-delay: .2s; } .js .vz-figure .mt-step--3 .mt-n, .js .vz-figure .mt-step--3 .mt-name { transition-delay: .55s; }
.js .vz-figure .mt-step--4 .mt-step-b::before { transition-delay: .3s; } .js .vz-figure .mt-step--4 .mt-n, .js .vz-figure .mt-step--4 .mt-name { transition-delay: .65s; }
.js .vz-figure .mt-step--5 .mt-step-b::before { transition-delay: .4s; } .js .vz-figure .mt-step--5 .mt-n, .js .vz-figure .mt-step--5 .mt-name { transition-delay: .75s; }
.js .vz-figure.is-visible .mt-step-b::before { transform: none; }
.js .vz-figure.is-visible .mt-n, .js .vz-figure.is-visible .mt-name { opacity: 1; }
.js .vz-figure .mt-flag { opacity: 0; transform: translateY(-8px); transition: opacity .45s ease .8s, transform .5s cubic-bezier(.3, 1.4, .5, 1) .8s; }
.js .vz-figure .mt-flag--tg { transition-delay: 1s; }
.js .vz-figure .mt-dot { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.js .vz-figure .mt-bar { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.45, 0, .3, 1); }
.js .vz-figure .mt-tg { opacity: 0; transform: scale(.5); transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.js .vz-figure .mt-gap { opacity: 0; transition: opacity .4s ease; }
.js .vz-figure .mt-r1 .mt-dot { transition-delay: 1s; }   .js .vz-figure .mt-r1 .mt-bar { transition-delay: 1.25s; } .js .vz-figure .mt-r1 .mt-tg { transition-delay: 1.75s; } .js .vz-figure .mt-r1 .mt-gap { transition-delay: 1.95s; }
.js .vz-figure .mt-r2 .mt-dot { transition-delay: 1.08s; } .js .vz-figure .mt-r2 .mt-bar { transition-delay: 1.33s; } .js .vz-figure .mt-r2 .mt-tg { transition-delay: 1.83s; } .js .vz-figure .mt-r2 .mt-gap { transition-delay: 2.03s; }
.js .vz-figure .mt-r3 .mt-dot { transition-delay: 1.16s; } .js .vz-figure .mt-r3 .mt-bar { transition-delay: 1.41s; } .js .vz-figure .mt-r3 .mt-tg { transition-delay: 1.91s; } .js .vz-figure .mt-r3 .mt-gap { transition-delay: 2.11s; }
.js .vz-figure .mt-r4 .mt-dot { transition-delay: 1.24s; } .js .vz-figure .mt-r4 .mt-bar { transition-delay: 1.49s; } .js .vz-figure .mt-r4 .mt-tg { transition-delay: 1.99s; } .js .vz-figure .mt-r4 .mt-gap { transition-delay: 2.19s; }
.js .vz-figure .mt-r5 .mt-dot { transition-delay: 1.32s; } .js .vz-figure .mt-r5 .mt-bar { transition-delay: 1.57s; } .js .vz-figure .mt-r5 .mt-tg { transition-delay: 2.07s; } .js .vz-figure .mt-r5 .mt-gap { transition-delay: 2.27s; }
.js .vz-figure.is-visible .mt-flag, .js .vz-figure.is-visible .mt-dot,
.js .vz-figure.is-visible .mt-bar, .js .vz-figure.is-visible .mt-tg { opacity: 1; transform: none; }
.js .vz-figure.is-visible .mt-gap { opacity: 1; }
.vz-figure.is-visible .mt-flag--now::before { animation: mt-pulse 2.4s ease-in-out 2.4s infinite; }
@keyframes mt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* tablets */
@media (max-width: 1100px) {
  .mt-scale, .mt-row { grid-template-columns: 190px minmax(0, 1fr) 60px; }
  .mt-name { font-size: 12.5px; }
}

/* phones: dimension name above its track, the staircase shows numbers only, the level names listed below it */
@media (max-width: 699px) {
  .mt-top { padding: 12px 16px; gap: 10px; }
  .mt-win { display: none; }
  .mt-sheet { font-size: 13.5px; }
  .mt-scale, .mt-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .mt-scale { min-height: 0; }
  .mt-dims-t, .mt-flag { display: none; }
  .mt-step-b { padding: 6px 4px; align-items: center; justify-content: flex-start; margin: 0 1.5px; }
  .mt-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mt-n { font-size: 20px; }
  .mt-step--1 .mt-step-b { height: 36px; } .mt-step--2 .mt-step-b { height: 48px; } .mt-step--3 .mt-step-b { height: 60px; }
  .mt-step--4 .mt-step-b { height: 72px; } .mt-step--5 .mt-step-b { height: 84px; }
  .mt-gap-t { margin-bottom: 6px; font-size: 11px; }
  .mt-names { display: grid; gap: 4px; list-style: none; margin: 14px 0 6px; padding: 0; font-size: 13.5px; line-height: 1.35; color: var(--forest); }
  .mt-names li { display: flex; gap: 10px; }
  .mt-names span { flex: none; width: 18px; font-weight: 700; color: var(--green-text); }
  .mt-dim { grid-column: 1 / -1; padding: 14px 0 0; }
  .mt-track { grid-column: 1; grid-row: 2; min-height: 48px; }
  .mt-gap { grid-column: 2; grid-row: 2; font-size: 16px; }
  .mt-legend-pos { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; flex-basis: 100%; }
}