@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Fustat:wght@300;400;600&display=swap');

/* MTEK PEOPLE LIMITED — slate and hi-vis amber.
   One shift, followed from the short notice to the approved hours. */

:root {
  color-scheme: dark;

  --mtp-bg: #121518;
  --mtp-bg-sunk: #0D1013;
  --mtp-panel: #1F262D;
  --mtp-panel-hi: #27313A;
  --mtp-ink: #EBEFF2;
  --mtp-muted: #94A2AD;
  --mtp-amber: #FFB02E;
  --mtp-green: #5FBF9B;

  --mtp-weave:
    repeating-linear-gradient(135deg,
      rgba(255, 176, 46, 0.055) 0 9px,
      rgba(255, 176, 46, 0) 9px 20px);
  --mtp-weave-hard:
    repeating-linear-gradient(135deg,
      rgba(18, 21, 24, 0.86) 0 14px,
      rgba(18, 21, 24, 0) 14px 30px);

  --mtp-u: 7px;
  --mtp-gut: calc(var(--mtp-u) * 3);
  --mtp-rail: 1120px;
  --mtp-ease: cubic-bezier(0.22, 0.75, 0.25, 1);
}

/* A visitor whose system asks for a light interface still gets the painted dark
   cab-side scheme — the amber only reads against slate. The light branch lifts the
   panels a step so the layering survives a bright room. */


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 168px;
}

body {
  margin: 0;
  background-color: var(--mtp-bg);
  background-image: var(--mtp-weave);
  color: var(--mtp-ink);
  font-family: 'Fustat', 'Segoe UI', system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.66;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 calc(var(--mtp-u) * 2);
}

a {
  color: var(--mtp-amber);
  text-decoration-color: rgba(255, 176, 46, 0.42);
  text-underline-offset: 3px;
  transition: color 160ms var(--mtp-ease), text-decoration-color 160ms var(--mtp-ease);
}

a:hover {
  color: #FFC75E;
  text-decoration-color: #FFC75E;
}

:focus-visible {
  outline: 3px solid var(--mtp-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.mtp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mtp-skip {
  position: absolute;
  left: var(--mtp-gut);
  top: -200px;
  z-index: 90;
  padding: 13px 20px;
  background: var(--mtp-amber);
  color: #15120B;
  font-weight: 600;
  text-decoration: none;
  transition: top 140ms var(--mtp-ease);
}

.mtp-skip:focus {
  top: 12px;
  color: #15120B;
}

/* ---------------------------------------------------------------- shell */

.mtp-wrap {
  width: 100%;
  max-width: var(--mtp-rail);
  margin: 0 auto;
  padding: 0 var(--mtp-gut);
}

/* ------------------------------------------- two-level sticky header */

.mtp-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mtp-bg-sunk);
  border-bottom: 3px solid var(--mtp-amber);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.95);
  transition: box-shadow 220ms var(--mtp-ease), background-color 220ms var(--mtp-ease);
}

.mtp-head[data-state='compact'] {
  background: var(--mtp-bg-sunk);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 1);
}

.mtp-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mtp-u) calc(var(--mtp-u) * 2);
  padding: calc(var(--mtp-u) * 1.4) 0;
  transition: padding 220ms var(--mtp-ease);
}

.mtp-head[data-state='compact'] .mtp-head-top {
  padding: calc(var(--mtp-u) * 0.7) 0;
}

.mtp-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--mtp-u) * 1.4);
  text-decoration: none;
  color: var(--mtp-ink);
  padding: 6px 10px 6px 6px;
  margin-left: -6px;
  background: linear-gradient(180deg, var(--mtp-panel-hi), var(--mtp-panel));
  transition: transform 200ms var(--mtp-ease), background-color 200ms var(--mtp-ease);
}

.mtp-brand:hover {
  color: var(--mtp-ink);
  transform: translateY(-1px);
}

.mtp-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.mtp-brand-name {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.mtp-brand-sub {
  display: block;
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--mtp-muted);
  letter-spacing: 0.04em;
}

.mtp-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.mtp-nav-seg {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 15px;
  background: var(--mtp-panel);
  color: var(--mtp-ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(255, 176, 46, 0);
  transition: background-color 180ms var(--mtp-ease), box-shadow 180ms var(--mtp-ease),
    color 180ms var(--mtp-ease), transform 180ms var(--mtp-ease);
}

.mtp-nav-seg:hover {
  background: var(--mtp-panel-hi);
  color: var(--mtp-ink);
  box-shadow: inset 0 -3px 0 rgba(255, 176, 46, 0.55);
  transform: translateY(-1px);
}

.mtp-nav-seg[aria-current='page'],
.mtp-nav-seg.is-here {
  background: var(--mtp-panel-hi);
  color: #FFD48A;
  box-shadow: inset 0 -3px 0 var(--mtp-amber);
}

/* ------------------------------------------------- the week strip */

.mtp-strip {
  background: var(--mtp-bg);
  background-image: var(--mtp-weave-hard);
}

.mtp-strip-rail {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  padding: 7px 0 9px;
  margin: 0;
  list-style: none;
}

.mtp-strip-rail::-webkit-scrollbar {
  height: 8px;
}

.mtp-strip-rail::-webkit-scrollbar-thumb {
  background: var(--mtp-panel-hi);
}

.mtp-strip-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.mtp-day {
  display: block;
  min-width: 128px;
  min-height: 62px;
  padding: 8px 12px 10px;
  background: var(--mtp-panel);
  color: var(--mtp-ink);
  text-decoration: none;
  transition: background-color 180ms var(--mtp-ease), transform 180ms var(--mtp-ease),
    box-shadow 180ms var(--mtp-ease);
}

.mtp-day:hover {
  background: var(--mtp-panel-hi);
  color: var(--mtp-ink);
  transform: translateY(-2px);
}

.mtp-day.is-now {
  background: var(--mtp-panel-hi);
  box-shadow: inset 3px 0 0 var(--mtp-amber);
}

.mtp-day-d {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.17em;
  color: var(--mtp-muted);
  text-transform: uppercase;
}

.mtp-day.is-now .mtp-day-d {
  color: var(--mtp-amber);
}

.mtp-day-t {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.mtp-day-l {
  display: block;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--mtp-muted);
}

.mtp-bar {
  display: block;
  height: 5px;
  margin-top: 7px;
  background: rgba(148, 162, 173, 0.22);
  overflow: hidden;
}

.mtp-bar i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--mtp-amber), #FFD48A);
  animation: mtp-bar-grow 760ms var(--mtp-ease) var(--d, 0ms) both;
}

.mtp-day.is-now .mtp-bar i {
  background: linear-gradient(90deg, var(--mtp-green), #9BE0C7);
}

@keyframes mtp-bar-grow {
  from {
    width: 0;
  }
  to {
    width: var(--w, 50%);
  }
}

/* -------------------------------------------------------- the opener */

.mtp-hero {
  position: relative;
  padding: calc(var(--mtp-u) * 5) 0 calc(var(--mtp-u) * 6);
}

.mtp-hivis {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 58px;
  background: var(--mtp-amber);
  color: #15120B;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: mtp-raise 620ms var(--mtp-ease) 60ms both;
}

/* The weave belongs on the banner's shoulder, not under its words: run as a background
   over the whole strip it put dark stripes straight through dark type and the line could
   not be read at all. */
.mtp-hivis::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  background-image: repeating-linear-gradient(135deg,
    rgba(18, 21, 24, 0.92) 0 7px, rgba(18, 21, 24, 0) 7px 15px);
}

.mtp-hivis b {
  padding: 3px 9px;
  background: #15120B;
  color: var(--mtp-amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.mtp-h1 {
  max-width: 19ch;
  margin: calc(var(--mtp-u) * 2.4) 0 0;
  font-size: clamp(2.3rem, 7.2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  animation: mtp-raise 700ms var(--mtp-ease) 150ms both;
}

.mtp-h1 em {
  display: block;
  font-style: normal;
  color: var(--mtp-amber);
}

.mtp-lede {
  max-width: 54ch;
  margin: calc(var(--mtp-u) * 2.4) 0 0;
  font-size: 17.5px;
  font-weight: 400;
  color: #CFD8DF;
  animation: mtp-raise 700ms var(--mtp-ease) 250ms both;
}

.mtp-note {
  max-width: 52ch;
  margin: calc(var(--mtp-u) * 1.8) 0 0;
  font-size: 14px;
  color: var(--mtp-muted);
  animation: mtp-raise 700ms var(--mtp-ease) 340ms both;
}

.mtp-hero-art {
  margin: calc(var(--mtp-u) * 4) 0 0;
  padding: calc(var(--mtp-u) * 2.5);
  background: var(--mtp-panel);
  animation: mtp-raise 760ms var(--mtp-ease) 420ms both;
}

.mtp-arc {
  display: block;
  width: 100%;
  height: auto;
  max-width: 460px;
  margin: 0 auto;
}

.mtp-arc-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: calc(var(--mtp-u) * 2) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--mtp-muted);
}

.mtp-arc-key span {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  vertical-align: baseline;
}

@keyframes mtp-raise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mtp-sweep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes mtp-draw {
  from {
    stroke-dashoffset: 420;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ------------------------------------------------ chain of moments */

.mtp-sec {
  padding: calc(var(--mtp-u) * 5) 0;
}

.mtp-sec + .mtp-sec {
  padding-top: calc(var(--mtp-u) * 2);
}

.mtp-shead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 0 0 calc(var(--mtp-u) * 1.6);
  margin: 0 0 calc(var(--mtp-u) * 2.6);
  position: relative;
}

.mtp-shead::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--mtp-amber) 0 92px, rgba(148, 162, 173, 0.2) 92px);
  transform-origin: left center;
  animation: mtp-sweep 700ms var(--mtp-ease) both;
}

.mtp-stamp {
  flex: 0 0 auto;
  padding: 5px 10px;
  background: var(--mtp-panel-hi);
  color: var(--mtp-amber);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.mtp-sec h2 {
  font-size: clamp(1.65rem, 4.2vw, 2.05rem);
  max-width: 34ch;
}

.mtp-pill {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 11px;
  background: rgba(95, 191, 155, 0.14);
  color: var(--mtp-green);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mtp-pill.is-wait {
  background: rgba(255, 176, 46, 0.14);
  color: var(--mtp-amber);
}

.mtp-pill.is-rule {
  background: rgba(148, 162, 173, 0.16);
  color: #BCC8D1;
}

.mtp-prose {
  max-width: 66ch;
}

.mtp-prose p {
  margin: 0 0 calc(var(--mtp-u) * 2);
}

.mtp-prose p:last-child {
  margin-bottom: 0;
}

.mtp-cols {
  display: grid;
  gap: calc(var(--mtp-u) * 3);
}

.mtp-panel {
  padding: calc(var(--mtp-u) * 2.6);
  background: var(--mtp-panel);
  box-shadow: inset 3px 0 0 rgba(255, 176, 46, 0.55);
}

.mtp-panel h3 {
  font-size: 17.5px;
  letter-spacing: 0.01em;
  margin: 0 0 calc(var(--mtp-u) * 1.4);
}

.mtp-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
}

.mtp-ul li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: #D3DBE2;
}

.mtp-ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 11px;
  height: 3px;
  background: var(--mtp-amber);
}

.mtp-ul li + li {
  box-shadow: inset 0 1px 0 rgba(148, 162, 173, 0.14);
}

.mtp-dl {
  margin: 0;
  font-size: 15.5px;
}

.mtp-dl div {
  padding: calc(var(--mtp-u) * 1.6) 0;
  box-shadow: inset 0 1px 0 rgba(148, 162, 173, 0.16);
}

.mtp-dl div:first-child {
  box-shadow: none;
  padding-top: 0;
}

.mtp-dl dt {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--mtp-amber);
}

.mtp-dl dd {
  margin: 5px 0 0;
  color: #D3DBE2;
}

/* the chain drawing */
.mtp-chain {
  display: block;
  width: 100%;
  height: auto;
  margin: calc(var(--mtp-u) * 3) 0 0;
}

.mtp-chain .mtp-chain-run {
  stroke-dasharray: 420;
  animation: mtp-draw 1500ms var(--mtp-ease) 300ms both;
}

/* ------------------------------------------------------- the checker */

.mtp-check {
  padding: calc(var(--mtp-u) * 3);
  background: var(--mtp-panel);
  background-image: var(--mtp-weave);
}

.mtp-check-grid {
  display: grid;
  gap: calc(var(--mtp-u) * 3);
}

.mtp-fields {
  display: grid;
  gap: calc(var(--mtp-u) * 2);
  margin: 0 0 calc(var(--mtp-u) * 2.4);
  padding: 0;
  border: 0;
}

.mtp-fields legend {
  padding: 0;
  margin: 0 0 calc(var(--mtp-u) * 1.6);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mtp-muted);
}

.mtp-field label {
  display: block;
  margin: 0 0 7px;
  font-size: 14.5px;
  font-weight: 400;
  color: #D3DBE2;
}

.mtp-field input,
.mtp-field select {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  background: var(--mtp-bg-sunk);
  border: 1px solid rgba(148, 162, 173, 0.45);
  color: var(--mtp-ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -2px 0 rgba(255, 176, 46, 0.3);
  transition: border-color 160ms var(--mtp-ease), box-shadow 160ms var(--mtp-ease),
    background-color 160ms var(--mtp-ease);
}

.mtp-field input:hover,
.mtp-field select:hover {
  border-color: rgba(255, 176, 46, 0.6);
}

.mtp-field input:focus,
.mtp-field select:focus {
  box-shadow: inset 0 -2px 0 var(--mtp-amber);
  border-color: var(--mtp-amber);
}

.mtp-hint {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--mtp-muted);
}

.mtp-btn {
  min-height: 50px;
  padding: 13px 22px;
  background: var(--mtp-amber);
  border: 0;
  color: #15120B;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms var(--mtp-ease), background-color 160ms var(--mtp-ease),
    box-shadow 160ms var(--mtp-ease);
}

.mtp-btn:hover {
  background: #FFC75E;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(255, 176, 46, 0.9);
}

.mtp-out {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mtp-out li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: calc(var(--mtp-u) * 1.7) 0;
  box-shadow: inset 0 1px 0 rgba(148, 162, 173, 0.17);
}

.mtp-out li:first-child {
  box-shadow: none;
  padding-top: 0;
}

.mtp-out-k {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mtp-muted);
}

.mtp-out-v {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--mtp-ink);
}

.mtp-out-v.is-ok {
  color: var(--mtp-green);
}

.mtp-out-v.is-over {
  color: var(--mtp-amber);
}

.mtp-out-why {
  font-size: 13.5px;
  color: var(--mtp-muted);
}

.mtp-statutory {
  margin: calc(var(--mtp-u) * 3) 0 0;
  padding: calc(var(--mtp-u) * 2.4);
  background: var(--mtp-bg-sunk);
  box-shadow: inset 0 3px 0 rgba(95, 191, 155, 0.6);
}

.mtp-small {
  margin: calc(var(--mtp-u) * 2.4) 0 0;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mtp-muted);
}

/* --------------------------------------------------- registered facts */

.mtp-facts {
  display: grid;
  gap: 4px;
  margin: 0;
}

.mtp-facts div {
  display: grid;
  gap: 2px;
  padding: calc(var(--mtp-u) * 1.7) calc(var(--mtp-u) * 2);
  background: var(--mtp-panel);
}

.mtp-facts dt {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mtp-muted);
}

/* No tabular figures here: these dd blocks are sentences, and Fustat answers tnum by
   giving every glyph the same advance, which spread the retention periods out into a
   monospaced smear with gaps in front of the punctuation. Tabular numerals stay where
   figures are actually being compared, and in the display face. */
.mtp-facts dd {
  margin: 0;
  font-size: 16px;
  color: var(--mtp-ink);
}

/* ---------------------------------------------------------- next step */

.mtp-two-doors {
  display: grid;
  gap: calc(var(--mtp-u) * 2);
}

.mtp-door {
  display: block;
  padding: calc(var(--mtp-u) * 3);
  background: var(--mtp-panel);
  color: var(--mtp-ink);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(255, 176, 46, 0.5);
  transition: background-color 190ms var(--mtp-ease), transform 190ms var(--mtp-ease),
    box-shadow 190ms var(--mtp-ease);
}

.mtp-door:hover {
  background: var(--mtp-panel-hi);
  color: var(--mtp-ink);
  transform: translateY(-2px);
  box-shadow: inset 0 -3px 0 var(--mtp-amber);
}

.mtp-door b {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mtp-door span {
  display: block;
  font-size: 14.5px;
  color: var(--mtp-muted);
}

/* ------------------------------------------------------------- footer */

.mtp-foot {
  margin-top: calc(var(--mtp-u) * 6);
  padding: calc(var(--mtp-u) * 5) 0 calc(var(--mtp-u) * 6);
  background: var(--mtp-bg-sunk);
  background-image: var(--mtp-weave-hard);
  box-shadow: inset 0 3px 0 var(--mtp-amber);
}

.mtp-foot-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 calc(var(--mtp-u) * 1.4);
}

.mtp-foot-addr {
  font-style: normal;
  font-size: 15px;
  color: #CFD8DF;
  max-width: 46ch;
  margin: 0 0 calc(var(--mtp-u) * 2);
}

.mtp-foot-reg {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--mtp-muted);
}

.mtp-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: calc(var(--mtp-u) * 3) 0 0;
  padding: 0;
  list-style: none;
}

.mtp-foot-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 15px;
  background: var(--mtp-panel);
  color: var(--mtp-ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms var(--mtp-ease), color 180ms var(--mtp-ease);
}

.mtp-foot-nav a:hover {
  background: var(--mtp-panel-hi);
  color: #FFD48A;
}

/* ------------------------------------------------------- wider views */

@media (min-width: 620px) {
  .mtp-check-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .mtp-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mtp-fields legend {
    grid-column: 1 / -1;
  }

  .mtp-two-doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mtp-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mtp-out li {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 880px) {
  body {
    font-size: 17px;
  }

  .mtp-cols {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: calc(var(--mtp-u) * 5);
    align-items: start;
  }

  .mtp-hero {
    padding: calc(var(--mtp-u) * 8) 0 calc(var(--mtp-u) * 7);
  }

  .mtp-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: calc(var(--mtp-u) * 6);
    align-items: center;
  }

  .mtp-hero-art {
    margin: 0;
  }

  .mtp-sec {
    padding: calc(var(--mtp-u) * 6) 0;
  }

  .mtp-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mtp-day {
    min-width: 152px;
  }
}

@media (min-width: 1100px) {
  .mtp-h1 {
    font-size: 3.7rem;
  }

  .mtp-sec h2 {
    font-size: 2.1rem;
  }
}

/* The whole motion system is one switch. Final states are the authored states, so
   everything below is a no-op for layout — the bars keep their widths, the keylines
   their full span, the drawn run its complete stroke. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* ------------------------------------------ shift-window key swatches */

.mtp-sw-e {
  background: var(--mtp-amber);
}

.mtp-sw-l {
  background: var(--mtp-green);
}

.mtp-sw-n {
  background: #5C6B77;
}

/* The cascade. Each bar's width is where that moment falls in the twenty-four hour
   clock, and the delay is its place in the queue — authored here rather than in the
   markup so the HTML carries no presentation. The last page in the list measures a
   position down the page instead, which is what that page's own note says it does. */

.mtp-strip-item:nth-child(1) .mtp-bar i { --w: 20%; --d: 60ms; }
.mtp-strip-item:nth-child(2) .mtp-bar i { --w: 22%; --d: 150ms; }
.mtp-strip-item:nth-child(3) .mtp-bar i { --w: 25%; --d: 240ms; }
.mtp-strip-item:nth-child(4) .mtp-bar i { --w: 28%; --d: 330ms; }
.mtp-strip-item:nth-child(5) .mtp-bar i { --w: 25%; --d: 420ms; }
.mtp-strip-item:nth-child(6) .mtp-bar i { --w: 63%; --d: 510ms; }
.mtp-strip-item:nth-child(7) .mtp-bar i { --w: 75%; --d: 600ms; }

[data-page='need'] .mtp-strip-item:nth-child(5) .mtp-bar i { --w: 63%; }
[data-page='need'] .mtp-strip-item:nth-child(6) .mtp-bar i { --w: 92%; }

[data-page='shifts'] .mtp-strip-item:nth-child(1) .mtp-bar i { --w: 38%; }
[data-page='shifts'] .mtp-strip-item:nth-child(2) .mtp-bar i { --w: 48%; }
[data-page='shifts'] .mtp-strip-item:nth-child(3) .mtp-bar i { --w: 24%; }
[data-page='shifts'] .mtp-strip-item:nth-child(4) .mtp-bar i { --w: 25%; }
[data-page='shifts'] .mtp-strip-item:nth-child(5) .mtp-bar i { --w: 63%; }
[data-page='shifts'] .mtp-strip-item:nth-child(6) .mtp-bar i { --w: 71%; }

[data-page='legal'] .mtp-strip-item:nth-child(1) .mtp-bar i { --w: 17%; }
[data-page='legal'] .mtp-strip-item:nth-child(2) .mtp-bar i { --w: 33%; }
[data-page='legal'] .mtp-strip-item:nth-child(3) .mtp-bar i { --w: 50%; }
[data-page='legal'] .mtp-strip-item:nth-child(4) .mtp-bar i { --w: 67%; }
[data-page='legal'] .mtp-strip-item:nth-child(5) .mtp-bar i { --w: 83%; }
[data-page='legal'] .mtp-strip-item:nth-child(6) .mtp-bar i { --w: 100%; }

/* A two-level header is only an improvement while both levels stay out of the way. Left to
   wrap, five padded segments became three stacked rows and the whole thing stood 334px tall
   on a 390px phone — 38% of the screen, pinned. Below the two-column breakpoint the upper
   level scrolls sideways exactly as the week strip does, which is one mechanism to learn
   instead of two, and the header comes back to roughly a fifth of the viewport. */
@media (max-width: 899px) {
  .mtp-head-top {
    padding-bottom: 0;
    row-gap: 0;
  }

  .mtp-nav {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    margin: 6px 0 0;
    padding-bottom: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .mtp-nav::-webkit-scrollbar {
    height: 6px;
  }

  .mtp-nav::-webkit-scrollbar-thumb {
    background: var(--mtp-panel-hi);
  }

  .mtp-nav-seg {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .mtp-day {
    min-height: 58px;
    padding-top: 7px;
  }
}

/* Once the page has moved, the phone header gives back what it can without losing either
   level: the tagline is not navigation, and the strip can sit tighter. */
@media (max-width: 899px) {
  .mtp-head[data-state='compact'] .mtp-brand-sub {
    display: none;
  }

  .mtp-head[data-state='compact'] .mtp-mark {
    width: 28px;
    height: 28px;
  }

  .mtp-head[data-state='compact'] .mtp-strip-rail {
    padding: 4px 0 7px;
  }

  .mtp-head[data-state='compact'] .mtp-day {
    min-height: 54px;
  }
}


/* gcf:theme-pinned */
:root { color-scheme: dark; }