/* COMPANION. The Current page with a 3D HIAMi companion added.
   Everything is scoped to html.companion. It changes layers and layout around the robot only,
   so fonts, colours, spacing, buttons and copy stay as they are in site.css. */

.robot-slot { display: none; }
#robot { display: none; }

html.companion #robot {
  display: block; position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
}
html.companion .container { position: relative; z-index: 1; }

/* Solid sections slide over the robot. The dark bands sit behind it, so it shows through them. */
html.companion .partners { z-index: 1; background: var(--lilac); }
html.companion #why, html.companion #benefits, html.companion #how, html.companion #providers, html.companion #faq {
  position: relative; z-index: 1; background: var(--lilac);
}
html.companion #safety { position: relative; z-index: 1; }
html.companion .site-footer { position: relative; z-index: 1; }
html.companion .tagline, html.companion .final { position: relative; background: transparent; }
html.companion .tagline::before, html.companion .final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aubergine);
}

/* The logo stays as the fallback until the robot has loaded */
html.companion.robot-ready .hero-mark { display: none; }
html.companion .final-mark { display: none; }

/* Phones and tablets: the robot has a place in the page flow */
html.companion .robot-slot { display: block; width: 100%; }
html.companion .hero .robot-slot { height: 380px; }
html.companion .hero-visual { display: block; min-height: 0; padding-block: 0; }
html.companion .hero-mark { position: relative; inset: auto; left: auto; right: auto; display: block; margin: 0 auto var(--s-400); width: 240px; max-width: 100%; transform: none; }
html.companion.robot-ready .hero .robot-slot { margin-bottom: var(--s-300); }
html.companion:not(.robot-ready) .hero .robot-slot { display: none; }
html.companion .device { margin-inline: auto; }
html.companion .tagline .robot-slot { height: 320px; margin-bottom: var(--s-300); }
html.companion .tagline p { max-width: 680px; margin-inline: 0; text-align: left; }
html.companion .final .robot-slot { order: -1; height: 300px; }
html.companion:not(.robot-ready) .tagline .robot-slot,
html.companion:not(.robot-ready) .final .robot-slot { display: none; }
html.companion #why { padding-top: var(--s-700); }

@media (min-width: 1024px) {
  /* Desktop: the robot holds still at the side while the camera moves in on its head */
  html.companion .hero .robot-slot { display: none; }
  html.companion .hero-grid { align-items: center; }
  html.companion .hero-visual { display: grid; justify-items: end; min-height: 600px; align-items: center; }
  html.companion .device { max-width: 272px; margin: 0; }
  html.companion:not(.robot-ready) .hero-mark { position: absolute; margin: auto; width: 100%; max-width: 540px; }
  html.companion #why { background: transparent; z-index: auto; }
  html.companion #why .split { grid-template-columns: minmax(0, 1fr); width: 640px; max-width: 640px; min-height: 80vh; align-content: center; gap: var(--s-300); margin-left: max(0px, calc((100% - var(--container)) / 2)); margin-right: 0; }
  html.companion #why { padding-block: var(--s-900); }

  html.companion .tagline .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-700); }
  html.companion .tagline .robot-slot { order: 2; height: 400px; margin: 0; }
  html.companion .final .robot-slot { order: 0; height: 460px; }
}