:root {
  --nest-pad: 10px;
  --page-pad: var(--nest-pad);
  --shell-radius: calc(var(--nest-pad) * 3);
  --shell-inner-radius: calc(var(--shell-radius) - var(--nest-pad));
  --zoov-shell-bg: #a1bcb6;
  --zoov-panel-bg: rgba(255,255,255,.28);
  --zoov-card-bg: rgba(255,255,255,.24);
  --zoov-heading-colour: rgba(0,0,0,.86);
  --zoov-copy-colour: rgba(0,0,0,.66);
  --zoov-muted-colour: rgba(0,0,0,.48);
  --zoov-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body.zoov-page {
  margin: 0;
  min-height: 100vh;
  padding: var(--page-pad);
  background: #ffffff;
  color: var(--zoov-heading-colour);
  font-family: var(--zoov-font-family);
}

.zoov-shell {
  display: flex;
  flex-direction: column;
  gap: var(--nest-pad);
  width: 100%;
  min-height: calc(100vh - (var(--page-pad) * 2));
  padding: var(--nest-pad);
  border-radius: var(--shell-radius);
  background: var(--zoov-shell-bg);
}

.zoov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nest-pad);
  width: 100%;
}

.zoov-navigation-host {
  flex: 1 1 auto;
  min-width: 0;
}

.zoov-navigation-host .msp-rail {
  width: min(680px, calc(100vw - 270px));
  max-width: 680px;
}

.zoov-navigation-host .msp-cell {
  text-transform: lowercase;
}

.zoov-logo {
  display: block;
  width: min(190px, 29vw);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.zoov-panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--nest-pad);
  border-radius: var(--shell-inner-radius);
  background: var(--zoov-panel-bg);
  box-shadow: 0 10px 34px rgba(0,0,0,.06);
}

.zoov-panel-inner {
  width: 100%;
  margin: 0;
  padding: calc(var(--nest-pad) * 2);
}

.zoov-title {
  margin: 0 0 var(--nest-pad);
  color: var(--zoov-heading-colour);
  font: 700 clamp(2rem,4vw,3.4rem)/1.05 var(--zoov-font-family);
  letter-spacing: -.03em;
}

.zoov-copy {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--nest-pad);
  color: var(--zoov-copy-colour);
  font: 500 clamp(.95rem,1.45vw,1.18rem)/1.45 var(--zoov-font-family);
}

.zoov-copy a { color: inherit; font-weight: 800; text-underline-offset: .18em; }

.zoov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--nest-pad);
  width: 100%;
  margin-top: calc(var(--nest-pad) * 3);
}

.zoov-card {
  padding: calc(var(--nest-pad) * 2);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: calc(var(--shell-inner-radius) + var(--nest-pad));
  background: var(--zoov-card-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px rgba(0,0,0,.035);
}

.zoov-card-title {
  margin: 0 0 var(--nest-pad);
  font: 800 clamp(1.15rem,1.7vw,1.45rem)/1.1 var(--zoov-font-family);
  letter-spacing: -.02em;
}

.zoov-app-logo {
  display: block;
  width: min(320px,80%);
  height: auto;
  margin: 0 0 calc(var(--nest-pad) * 2);
}

.zoov-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--nest-pad);
  padding: 0 calc(var(--nest-pad) * 2.2);
  border-radius: 999px;
  background: var(--mode-slider-pill-active-bg);
  color: var(--mode-slider-pill-active-text);
  text-decoration: none;
  font: 700 13px/1 var(--zoov-font-family);
}

.zoov-muted { color: var(--zoov-muted-colour); }
.zoov-error { padding: calc(var(--nest-pad) * 2); color: #700; }

@media (max-width: 720px) {
  .zoov-header { align-items: flex-start; flex-direction: column-reverse; }
  .zoov-navigation-host { width: 100%; overflow-x: auto; }
  .zoov-navigation-host .msp-rail { width: max-content; min-width: 100%; }
  .zoov-navigation-host .msp-cell { min-width: 86px; }
  .zoov-logo { width: min(170px,48vw); align-self: flex-end; }
}


/* ZOOV LAYER CONSUMER
   The shell and MSP remain alive while one projected content layer is active. */
.zoov-layer-host {
  position: relative;
  width: 100%;
  min-height: 0;
}

.zoov-layer {
  display: none;
  width: 100%;
  min-height: 0;
}

.zoov-layer.is-active {
  display: block;
}


/* ZOOV FEATURE ICONS
   Concentric, machined geometry shared across all projected layer cards. */
.zoov-card-icon-halo {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: 0 0 calc(var(--nest-pad) * 1.5);
  padding: var(--nest-pad);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 26px;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.045);
}

.zoov-card-icon-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: calc(var(--nest-pad) * .8);
  border-radius: 16px;
  background: rgba(255,255,255,.34);
}

.zoov-card-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zoov-card > .zoov-copy:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .zoov-card-icon-halo {
    width: 74px;
    height: 74px;
    border-radius: 23px;
  }

  .zoov-card-icon-inner {
    border-radius: 14px;
  }
}

/* ZOOV MOBILE MSP — canonical equal-cell selector geometry.
   This deliberately bypasses deployment-measured coordinates below 721px,
   matching the proven emotive mobile behaviour. */
@media (max-width: 720px) {
  .zoov-navigation-host .msp-rail::before {
    left: calc(
      var(--msp-rail-padding)
      + var(--msp-active-selector-padding)
      + (
        var(--msp-active-index)
        * ((100% - (var(--msp-rail-padding) * 2)) / var(--msp-count))
      )
    );

    width: calc(
      ((100% - (var(--msp-rail-padding) * 2)) / var(--msp-count))
      - (var(--msp-active-selector-padding) * 2)
    );
  }

  .zoov-navigation-host .msp-active-label {
    left: calc(
      var(--msp-rail-padding)
      + (
        var(--msp-active-index)
        * ((100% - (var(--msp-rail-padding) * 2)) / var(--msp-count))
      )
    );

    width: calc(
      (100% - (var(--msp-rail-padding) * 2)) / var(--msp-count)
    );
  }
}