/* ------------------------------------------------------------------ */
/* Site                                                                */
/* ------------------------------------------------------------------ */

html {
  font-size: 14px;
}

@media (min-width: 768px) {

  html {
    font-size: 16px;
  }
}

body {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  background-color: #323232;
  background-image: url('../img/GreyBG.png');
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

code {
  color: #E01A76;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Shown by Blazor when the page hits an unhandled error */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  background: lightyellow;
  color: #000;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* On-screen joystick (nipplejs)                                       */
/* ------------------------------------------------------------------ */

.nipple .back::after {
  content: "";
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url('../img/JoyStickBack.png');
}

.nipple .front::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30px 30px, #f0E0E0, #550000);
  left: 0;
  top: 0;
}

/* ------------------------------------------------------------------ */
/* Remote control page layouts                                         */
/*                                                                     */
/* Both layouts render the same component tree. Only class names       */
/* change, so the video player, joystick and self view never remount   */
/* (remounting would drop the stream sockets and the nipplejs binding) */
/* ------------------------------------------------------------------ */

/* The page covers the window (fixed, outside the layout container) so  */
/* it never needs a page scrollbar. A side column that holds more       */
/* controls than fit scrolls on its own instead                         */
.rc-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f8f9fa;
}

/* Top bar: task, layout toggle, All done and Report */
.rc-topbar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(33, 37, 41, .92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Long tasks clamp to two lines, the full text is in the tooltip */
.rc-task {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.rc-topbar-buttons {
  flex: 0 0 auto;
  display: flex;
}

.rc-topbar-buttons .btn {
  margin-left: 6px;
}

/* Report form and connection info drop down under the top bar */
.rc-report {
  position: absolute;
  top: 100%;
  right: 12px;
  width: 440px;
  max-width: calc(100% - 24px);
  margin-top: 6px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(33, 37, 41, .97);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
}

.rc-info {
  width: 520px;
  font-size: .85rem;
}

.rc-info-table {
  width: 100%;
  border-collapse: collapse;
}

.rc-info-table th {
  width: 90px;
  padding: 2px 8px 2px 0;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  vertical-align: top;
  white-space: nowrap;
}

.rc-info-table td {
  padding: 2px 0;
  word-break: break-word;
}

/* Stage: joystick column, video, button column, speech bar under the video */
.rc-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left video right"
    "left speak right";
  gap: 12px;
  padding: 12px;
}

.rc-video {
  grid-area: video;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #000;
}

/* The player fills its area whatever the frame size, letterboxed instead of stretched */
.rc-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.rc-media #video-canvas,
.rc-media #video-player {
  height: 100%;
  object-fit: contain;
}

.rc-left,
.rc-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.rc-left {
  grid-area: left;
  align-items: center;
}

.rc-right {
  grid-area: right;
  width: 240px;
}

.rc-speak {
  grid-area: speak;
  position: relative;
  z-index: 1;
}

.rc-servos {
  margin-top: 8px;
}

/* Self view (telepresence local camera) */
.rc-selfview {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 170px;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.rc-selfview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Classic layout: a game controller, joystick grip on the left,       */
/* the video as the screen in the middle, buttons grip on the right    */
/* ------------------------------------------------------------------ */

.rc-classic .rc-video {
  border: 3px solid #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
}

.rc-classic .rc-left,
.rc-classic .rc-right {
  padding: 12px;
  border-radius: 28px;
  background: linear-gradient(#41464b, #212529);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Center the grip contents vertically. Spacers (not justify-content) keep the top
   reachable when the column overflows and scrolls, they shrink to nothing then */
.rc-classic .rc-left::before,
.rc-classic .rc-left::after,
.rc-classic .rc-right::before,
.rc-classic .rc-right::after {
  content: "";
  flex: 1 0 0;
}

/* ------------------------------------------------------------------ */
/* Full screen layout: the video covers the window behind everything,  */
/* the controls float over it in the corners                           */
/* ------------------------------------------------------------------ */

.rc-wide .rc-topbar {
  background: rgba(0, 0, 0, .45);
  box-shadow: none;
}

/* Fixed, so it also sits behind the top bar */
.rc-wide .rc-video {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.rc-wide .rc-stage {
  grid-template-areas:
    "left . right"
    "left speak right";
}

/* Spacer pushes the joystick, buttons and servos to the bottom corners. It shrinks to
   nothing when a column overflows, so the top stays reachable */
.rc-wide .rc-left::before,
.rc-wide .rc-right::before {
  content: "";
  flex: 1 0 0;
}

/* Self view moves above the spacer, to the top left corner */
.rc-wide .rc-selfview {
  order: -1;
  margin-top: 0;
  margin-bottom: 12px;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .5);
}

.rc-wide .rc-scripts,
.rc-wide .rc-servos,
.rc-wide .rc-speak {
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .4);
}

.rc-wide .rc-scripts .btn {
  opacity: .9;
}

.rc-wide .rc-speak {
  justify-self: center;
  width: 100%;
  max-width: 640px;
}

/* ------------------------------------------------------------------ */
/* Short windows (phones held sideways): the joystick takes the whole  */
/* left column, so the self view floats over the top left of the video */
/* and the servo pads shrink                                           */
/* ------------------------------------------------------------------ */

@media (max-height: 500px) and (orientation: landscape) {

  .rc-stage {
    gap: 8px;
    padding: 8px;
  }

  /* Static, so the stage (not the scrolling column) positions the self view */
  .rc-left {
    position: static;
  }

  /* Keeps the joystick over the full screen video now the column is static */
  .rc-joystick {
    position: relative;
    z-index: 1;
  }

  /* Joystick column is 200px + 2 x 12px grip padding, then the 8px stage padding and gap */
  .rc-selfview,
  .rc-wide .rc-selfview {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 248px;
    width: 120px;
    height: 90px;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, .5);
  }

  /* Full screen has no grip padding around the joystick */
  .rc-wide .rc-selfview {
    top: 8px;
    left: 216px;
  }

  /* .rc-page outranks the servo rules further down this file */
  .rc-page .rc-servo-v .rc-servo-pad {
    height: 110px;
  }

  .rc-page .rc-servo-xy .rc-servo-pad {
    width: 110px;
    height: 110px;
  }
}

/* ------------------------------------------------------------------ */
/* Phones held upright: video on top, joystick and buttons underneath  */
/* ------------------------------------------------------------------ */

@media (max-width: 767.98px) and (orientation: portrait) {

  /* Task on its own line, buttons under it */
  .rc-topbar {
    flex-wrap: wrap;
    padding: 4px 8px;
    font-size: .9rem;
  }

  .rc-task {
    flex: 1 1 100%;
    margin: 0 0 4px 0;
  }

  .rc-topbar-buttons {
    margin-left: auto;
  }

  .rc-topbar-buttons .btn:first-child {
    margin-left: 0;
  }

  .rc-stage {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "video video"
      "speak speak"
      "left right";
    gap: 8px;
    padding: 8px;
  }

  .rc-wide .rc-stage {
    grid-template-areas:
      ". ."
      "speak speak"
      "left right";
  }

  /* The video keeps at least the top part of the screen */
  .rc-left,
  .rc-right {
    max-height: 50vh;
  }

  .rc-right {
    width: auto;
  }

  .rc-classic .rc-left,
  .rc-classic .rc-right {
    padding: 6px;
    border-radius: 18px;
  }

  .rc-selfview {
    width: 120px;
    height: 100px;
  }

  /* Full screen video hugs the top so the controls below cover the letterbox, not the picture */
  .rc-wide .rc-media #video-canvas,
  .rc-wide .rc-media #video-player {
    object-position: top;
  }
}

/* ------------------------------------------------------------------ */
/* Servos the robot lets the operator move                             */
/* ------------------------------------------------------------------ */

.rc-servo-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.rc-servo {
  margin: 8px;
  text-align: center;
}

.rc-servo-title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* text-muted is too dark over the controller and the video */
.rc-servo-desc {
  max-width: 200px;
  margin: 4px auto 0 auto;
  color: rgba(255, 255, 255, .65) !important;
}

/* touch-action none stops a drag on a phone from scrolling the page */
.rc-servo-pad {
  position: relative;
  margin: 0 auto;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.rc-servo-dragging {
  cursor: grabbing;
}

/* Pads shrink with a narrow button column. The pointer maths in js/control.js uses the
   rendered size, so any size works */
.rc-servo-h .rc-servo-pad {
  width: 200px;
  max-width: 100%;
  height: 36px;
}

.rc-servo-v .rc-servo-pad {
  width: 36px;
  height: 160px;
}

.rc-servo-xy .rc-servo-pad {
  width: 160px;
  max-width: 100%;
  height: 160px;
}

.rc-servo-knob {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1b6ec2;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Home / marketing page (Pages/Home.razor)                            */
/*                                                                     */
/* Dark navy with magenta and violet accents to match the pictures in  */
/* img/home. The page is full width (MarketingLayout has no container) */
/* and each section centers its content with .mk-wrap                  */
/* ------------------------------------------------------------------ */

.mk-page {
  --mk-bg: #070b16;
  --mk-bg-2: #0d1226;
  --mk-magenta: #e0218a;
  --mk-violet: #7c3aed;
  --mk-cyan: #38bdf8;
  --mk-text: #f4f5fb;
  --mk-muted: rgba(244, 245, 251, .68);
  --mk-line: rgba(255, 255, 255, .08);
  --mk-card: rgba(255, 255, 255, .04);
  min-height: 100vh;
  color: var(--mk-text);
  background: var(--mk-bg);
  user-select: text;
  -webkit-user-select: text;
  overflow-x: hidden;
}

.mk-page h1,
.mk-page h2,
.mk-page h3 {
  font-weight: 700;
  letter-spacing: -.01em;
}

.mk-page h2 {
  font-size: 2rem;
}

.mk-page h3 {
  font-size: 1.15rem;
}

.mk-page a {
  color: var(--mk-cyan);
}

.mk-page a:hover {
  color: #fff;
}

.mk-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.mk-kicker {
  margin-bottom: .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mk-magenta);
}

.mk-section-head {
  max-width: 720px;
  margin: 0 auto 2.5rem auto;
  text-align: center;
}

.mk-section-head p {
  margin-top: .75rem;
  font-size: 1.1rem;
  color: var(--mk-muted);
}

/* Buttons */
.mk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.75rem;
}

.mk-page .btn {
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.mk-page .btn:hover {
  transform: translateY(-2px);
}

.mk-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--mk-magenta), var(--mk-violet));
  border: 0;
  box-shadow: 0 8px 24px rgba(224, 33, 138, .35);
}

.mk-btn-primary:hover,
.mk-btn-primary:focus {
  color: #fff;
  box-shadow: 0 12px 32px rgba(224, 33, 138, .5);
}

.mk-btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .25);
}

.mk-btn-ghost:hover,
.mk-btn-ghost:focus {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}

/* ---- Hero ---- */
.mk-hero {
  position: relative;
  padding: 4.5rem 0 3.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(224, 33, 138, .22), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(124, 58, 237, .28), transparent 50%),
    linear-gradient(180deg, #0a0f22 0%, var(--mk-bg) 100%);
}

/* Faint hexagon grid behind the hero, drawn with CSS so no extra picture is needed */
.mk-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 L56 16.5 L56 49.5 L28 66 L0 49.5 L0 16.5 Z M28 34 L56 50.5 L56 83.5 L28 100 L0 83.5 L0 50.5 Z' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
  pointer-events: none;
}

.mk-hero .mk-wrap {
  position: relative;
}

.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

.mk-pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(135deg, var(--mk-magenta), var(--mk-violet));
}

/* Session complete check mark, same spot as the live dot on the home page */
.mk-done-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--mk-magenta), var(--mk-violet));
  box-shadow: 0 0 16px rgba(224, 33, 138, .6);
}

/* Blinking "on air" dot */
.mk-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mk-magenta);
  box-shadow: 0 0 0 0 rgba(224, 33, 138, .6);
  animation: mk-pulse 2s ease-out infinite;
}

@keyframes mk-pulse {

  0% {
    box-shadow: 0 0 0 0 rgba(224, 33, 138, .6);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(224, 33, 138, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(224, 33, 138, 0);
  }
}

.mk-title {
  font-size: 3.25rem;
  line-height: 1.08;
  margin-bottom: 1.25rem;
}

.mk-glow {
  background: linear-gradient(90deg, #ff4fb3, #c084fc, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-lead {
  max-width: 560px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--mk-muted);
}

.mk-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 1.75rem 0 0 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: var(--mk-muted);
}

.mk-trust li::before {
  content: "\2713";
  margin-right: 6px;
  font-weight: 700;
  color: var(--mk-magenta);
}

.mk-hero-art {
  margin-top: 2.5rem;
}

.mk-hero-art img {
  display: block;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
  animation: mk-float 7s ease-in-out infinite;
}

@keyframes mk-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ---- Highlights strip ---- */
.mk-highlights {
  padding: 1.5rem 0;
  border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
  background: var(--mk-bg-2);
}

.mk-highlight {
  height: 100%;
  padding: 1rem;
  border-radius: 14px;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  transition: transform .2s ease, border-color .2s ease;
}

.mk-highlight:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 33, 138, .5);
}

/* Generated icon tiles (img/home/icon-*.png), same navy as the card so they blend in */
.mk-highlight-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: .6rem;
  border-radius: 12px;
  background: var(--mk-bg-2);
  box-shadow: 0 0 0 1px var(--mk-line);
}

.mk-highlight-title {
  font-weight: 700;
  margin-bottom: .2rem;
}

.mk-highlight-text {
  font-size: .9rem;
  color: var(--mk-muted);
}

/* ---- Features ---- */
.mk-features {
  padding: 4rem 0 1rem 0;
}

.mk-feature {
  padding: 2rem 0;
}

/* Every other feature puts the picture on the right */
.mk-feature-flip .mk-feature-art {
  order: 2;
}

.mk-feature-art img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

.mk-feature-copy {
  padding: 2rem 1rem;
}

.mk-feature-copy p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--mk-muted);
}

.mk-checks {
  margin: 1.25rem 0 0 0;
  padding: 0;
  list-style: none;
}

.mk-checks li {
  position: relative;
  padding: .3rem 0 .3rem 1.9rem;
  color: var(--mk-text);
}

.mk-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: .2rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--mk-magenta), var(--mk-violet));
}

/* ---- How it works ---- */
.mk-steps {
  padding: 4rem 0 2rem 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, .18), transparent 55%),
    var(--mk-bg-2);
  border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
}

.mk-step {
  position: relative;
  height: 100%;
  padding: 2rem 1.25rem 1.5rem 1.25rem;
  text-align: center;
  border-radius: 18px;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  transition: transform .2s ease, border-color .2s ease;
}

.mk-step:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 33, 138, .5);
}

.mk-step-number {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  background: linear-gradient(135deg, var(--mk-magenta), var(--mk-violet));
  box-shadow: 0 6px 16px rgba(224, 33, 138, .4);
}

/* The step icons are flat art on white, so they sit on a light tile */
.mk-step img {
  width: 110px;
  height: 110px;
  margin-bottom: 1rem;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
}

.mk-step p {
  margin: 0;
  font-size: .95rem;
  color: var(--mk-muted);
}

/* ---- Use cases ---- */
.mk-uses {
  padding: 4rem 0 2rem 0;
}

.mk-use {
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.mk-use:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, .5);
  background: rgba(255, 255, 255, .06);
}

/* Picture across the top of the card (img/home/use-*.png, 3:2), copy underneath */
.mk-use-art {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--mk-line);
}

.mk-use-body {
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
}

.mk-use p {
  margin: 0;
  color: var(--mk-muted);
}

/* ---- Closing call to action ---- */
.mk-cta {
  margin: 2rem 20px 0 20px;
  padding: 4rem 1rem;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(224, 33, 138, .35), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(124, 58, 237, .4), transparent 55%),
    #141a3a;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.mk-cta h2 {
  font-size: 2.4rem;
}

.mk-cta p {
  max-width: 560px;
  margin: 1rem auto 0 auto;
  font-size: 1.15rem;
  color: var(--mk-muted);
}

/* ---- Footer ---- */
.mk-footer {
  padding: 2.5rem 0 2rem 0;
  font-size: .9rem;
  color: var(--mk-muted);
}

.mk-footer-links a {
  margin-left: 18px;
  color: var(--mk-muted);
}

.mk-footer-links a:hover {
  color: #fff;
}

/* ---- Large screens ---- */
@media (min-width: 992px) {

  .mk-hero {
    padding: 6rem 0 5rem 0;
  }

  .mk-hero-art {
    margin-top: 0;
    padding-left: 2rem;
  }

  .mk-feature {
    padding: 3rem 0;
  }

  .mk-feature-copy {
    padding: 1rem 3rem;
  }
}

/* ---- Phones ---- */
@media (max-width: 767.98px) {

  .mk-title {
    font-size: 2.3rem;
  }

  .mk-page h2 {
    font-size: 1.6rem;
  }

  .mk-cta {
    margin: 1rem 12px 0 12px;
    padding: 3rem 1rem;
  }

  .mk-cta h2 {
    font-size: 1.9rem;
  }

  .mk-footer .mk-wrap {
    justify-content: center !important;
    text-align: center;
  }

  .mk-footer-links {
    width: 100%;
    margin-top: .75rem;
  }

  .mk-footer-links a {
    margin: 0 9px;
  }
}

/* Visitors who asked for less motion get a still page */
@media (prefers-reduced-motion: reduce) {

  .mk-hero-art img,
  .mk-live-dot {
    animation: none;
  }

  .mk-page .btn,
  .mk-highlight,
  .mk-step,
  .mk-use {
    transition: none;
  }
}

/* ---- Robots online right now (Components/OnlineRobots.razor) ----    */
/*                                                                      */
/* This is the one part of the home page a visitor can act on, so it is */
/* styled as a live status board rather than another marketing block:   */
/* its own teal tone (the rest of the page is magenta), a faint grid    */
/* background, a counter, on-air badges and a whole-card click target   */
.mk-robots {
  --mk-live: #2dd4bf;
  --mk-live-soft: rgba(45, 212, 191, .16);
  --mk-live-line: rgba(45, 212, 191, .35);
  --mk-busy: #fbbf24;
  position: relative;
  padding: 4rem 0 3rem 0;
  overflow: hidden;
  border-top: 1px solid var(--mk-live-line);
  border-bottom: 1px solid var(--mk-live-line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(45, 212, 191, .18), transparent 55%),
    linear-gradient(180deg, #071422 0%, #060d1c 100%);
}

/* Faint grid behind the board, fading out towards the bottom, drawn with CSS so no picture is needed */
.mk-robots::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(45, 212, 191, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%);
}

/* Bright teal hairline along the top edge, so the band is visible even while scrolling fast */
.mk-robots::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--mk-live), transparent);
}

.mk-robots .mk-wrap {
  position: relative;
}

/* Header: pitch on the left, live counter on the right */
.mk-robots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.mk-robots-head-copy {
  max-width: 680px;
}

.mk-robots-head-copy p {
  margin: .75rem 0 0 0;
  font-size: 1.1rem;
  color: var(--mk-muted);
}

/* "Live right now" tag: teal pill with a blinking dot */
.mk-robots-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .9rem;
  padding: .35rem .9rem .35rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mk-live);
  background: var(--mk-live-soft);
  border: 1px solid var(--mk-live-line);
}

.mk-robots-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mk-live);
  animation: mk-live-pulse 1.6s ease-out infinite;
}

@keyframes mk-live-pulse {

  0% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, .7);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(45, 212, 191, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
  }
}

/* Counter tile: big number, label beside it */
.mk-robots-counter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-radius: 18px;
  background: rgba(45, 212, 191, .08);
  border: 1px solid var(--mk-live-line);
  box-shadow: 0 0 40px rgba(45, 212, 191, .12);
}

.mk-robots-counter-number {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--mk-live);
  font-variant-numeric: tabular-nums;
}

.mk-robots-counter-label {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.2;
}

.mk-robots-counter-sub {
  margin-top: .2rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--mk-muted);
}

/* Robot card: looks like a console you can press, not a brochure tile */
.mk-robot {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mk-robot-ready {
  border-color: var(--mk-live-line);
  cursor: pointer;
}

.mk-robot-ready:hover,
.mk-robot-ready:focus-within {
  transform: translateY(-5px);
  border-color: var(--mk-live);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px var(--mk-live), 0 0 36px rgba(45, 212, 191, .3);
}

/* A robot someone is already driving stays in the list but does not invite a click */
.mk-robot-busy {
  opacity: .7;
}

.mk-robot-media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mk-robot-art {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--mk-bg-2);
  transition: transform .4s ease;
}

.mk-robot-ready:hover .mk-robot-art {
  transform: scale(1.04);
}

/* Soft shade at the bottom of the picture so the badges and title area connect */
.mk-robot-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 13, 28, .7) 100%);
}

/* Badges over the picture: LIVE top left, telepresence top right */
.mk-robot-badge {
  position: absolute;
  top: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mk-robot-badge-live {
  left: 12px;
  background: rgba(220, 38, 38, .85);
  box-shadow: 0 0 18px rgba(220, 38, 38, .5);
}

.mk-robot-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: mk-blink 1.2s steps(2, start) infinite;
}

@keyframes mk-blink {

  to {
    visibility: hidden;
  }
}

.mk-robot-badge-tele {
  right: 12px;
  color: var(--mk-text);
  background: rgba(7, 11, 22, .7);
  border: 1px solid rgba(255, 255, 255, .25);
}

.mk-robot-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
}

.mk-robot-body h3 {
  margin-bottom: .35rem;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.mk-robot-owner {
  margin-bottom: .9rem;
  font-size: .9rem;
  color: var(--mk-muted);
}

/* Status line above the button: teal dot when free, amber when taken */
.mk-robot-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 1rem;
  font-size: .9rem;
  font-weight: 600;
}

.mk-robot-state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mk-robot-state-ready {
  color: var(--mk-live);
}

.mk-robot-state-ready .mk-robot-state-dot {
  background: var(--mk-live);
  box-shadow: 0 0 10px var(--mk-live);
}

.mk-robot-state-busy {
  color: var(--mk-busy);
}

.mk-robot-state-busy .mk-robot-state-dot {
  background: var(--mk-busy);
  box-shadow: 0 0 10px var(--mk-busy);
}

.mk-robot-wait {
  font-size: .85rem;
  color: var(--mk-muted);
}

/* The "take the controls" button: teal so it reads as the action button of the board, not a marketing link */
.mk-btn-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #041014;
  background: linear-gradient(135deg, #5eead4, var(--mk-live) 55%, #38bdf8);
  border: 0;
  box-shadow: 0 8px 24px rgba(45, 212, 191, .35);
}

.mk-btn-live:hover,
.mk-btn-live:focus {
  color: #041014;
  box-shadow: 0 12px 32px rgba(45, 212, 191, .55);
}

.mk-robot-go {
  align-self: stretch;
}

.mk-robot-go-arrow {
  display: inline-block;
  transition: transform .2s ease;
}

.mk-robot-ready:hover .mk-robot-go-arrow {
  transform: translateX(4px);
}

/* The stretched link covers the whole card; the card itself lifts on hover so the button stays put */
.mk-robot-ready:hover .mk-robot-go {
  transform: none;
}

.mk-robots-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  border-radius: 18px;
  text-align: center;
  color: var(--mk-muted);
  background: rgba(45, 212, 191, .05);
  border: 1px dashed var(--mk-live-line);
}

.mk-robots-empty a {
  color: var(--mk-text);
}

.mk-robots-note {
  margin-top: .5rem;
  font-size: .85rem;
  text-align: center;
  color: var(--mk-muted);
}

/* Phones: header stacks and the counter sits under the copy */
@media (max-width: 767.98px) {

  .mk-robots-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .mk-robots-counter {
    align-self: stretch;
  }
}

/* Visitors who asked for less motion get a still board */
@media (prefers-reduced-motion: reduce) {

  .mk-robots-live-dot,
  .mk-robot-badge-dot {
    animation: none;
  }

  .mk-robot,
  .mk-robot-art,
  .mk-robot-go-arrow {
    transition: none;
  }
}