/* ==========================================================================
   Redix Digital: the page of hosting and care (website-hosting.html;
   tools/build-service.js, host.js). On top of service.css, which draws every
   service page. Five things here live only on this page: the sky of sites
   beside the title, the day in a bakery's site (with the switch of packages
   that dims what a package does not hold), the packages beside a stack of the
   layers they hold and the picker of three questions under them, the move of
   a site to us, and the support hours as a week with the line of now. Only
   opacity, transforms and paint move; everything stands still with the motion
   stopped, and every word on the page is there without the script.
   ========================================================================== */

/* what the script hides (the advice not given, the line of now before it is read) stays hidden */
:is(.pq, .hr) [hidden] { display: none !important; }

/* --- The opening: the sky of sites ----------------------------------------------------------- */

.sv > .sv-top--sky {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: clamp(24px, 4vw, 72px);
}

.hs-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(22px, 3vw, 44px);
  margin: clamp(24px, 4.4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.hs-proof li { display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.35; color: var(--text-mid); }
.hs-proof b { font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 800; line-height: 1; color: var(--text); }

.hs-sky {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  justify-self: center;
  container-type: inline-size;
  pointer-events: none;
}
/* the rings, laid back so they read as orbits */
.hs-sky__tilt {
  position: absolute;
  inset: 0;
  transform: perspective(1400px) rotateX(58deg);
  transform-style: preserve-3d;
}
.hs-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--r) * 1cqw);
  aspect-ratio: 1;
  margin: calc(var(--r) * -0.5cqw) 0 0 calc(var(--r) * -0.5cqw);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.1);
  animation: hs-turn 140s linear infinite;
}
.hs-ring--2 { animation-duration: 190s; animation-direction: reverse; }
.hs-ring--3 { animation-duration: 260s; }
@keyframes hs-turn { to { transform: rotate(360deg); } }
.hs-ring i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 2.2px);
  aspect-ratio: 1;
  margin: calc(var(--s) * -1.1px) 0 0 calc(var(--s) * -1.1px);
  border-radius: 50%;
  background: var(--cyan-hi);
  box-shadow: 0 0 calc(var(--s) * 4px) rgba(125, 240, 244, 0.8);
  opacity: var(--o);
  transform: rotate(var(--a)) translateX(calc(var(--r) * 0.5cqw));
}
/* the server in the middle: a core of light that breathes */
.hs-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30cqw;
  aspect-ratio: 1;
  margin: -15cqw 0 0 -15cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, #f1feff 0 9%, #7df0f4 14%, rgba(0, 196, 204, 0.5) 34%, rgba(0, 196, 204, 0.12) 62%, transparent 100%);
  animation: hs-breathe 5.5s ease-in-out infinite alternate;
}
.hs-sky.is-off :is(.hs-ring, .hs-core) { animation-play-state: paused; }
@keyframes hs-breathe { from { transform: scale(0.92); opacity: 0.85; } to { transform: scale(1.06); opacity: 1; } }

/* three places where a label comes: a point lit, and a beam from the server to it */
.hs-spot { position: absolute; width: 0; height: 0; }
.hs-spot--1 { top: 27%; left: 78%; }
.hs-spot--2 { top: 70%; left: 15%; }
.hs-spot--3 { top: 79%; left: 66%; }
.hs-lit {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(125, 240, 244, 0.28), 0 0 18px rgba(125, 240, 244, 0.9);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 300ms ease, transform 500ms var(--ease-expo);
}
.hs-beam {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(125, 240, 244, 0.85), rgba(125, 240, 244, 0.05));
  opacity: 0;
  scale: 0 1;
  transition: opacity 300ms ease, scale 600ms var(--ease-expo);
}
/* from each spot back to the middle of the sky (the angle and length are fixed by the spot) */
.hs-spot--1 .hs-beam { width: 40.3cqw; rotate: 150.3deg; }
.hs-spot--2 .hs-beam { width: 40.3cqw; rotate: -29.7deg; }
.hs-spot--3 .hs-beam { width: 32.6cqw; rotate: -119.4deg; }
.hs-spot.is-on .hs-lit { opacity: 1; transform: none; }
.hs-spot.is-on .hs-beam { opacity: 1; scale: 1 1; }

.hs-pops { position: absolute; inset: 0; }
.hs-pop {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(125, 240, 244, 0.35);
  border-radius: 12px;
  background: rgba(12, 20, 46, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-mid);
  white-space: nowrap;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 350ms ease, translate 500ms var(--ease-expo);
}
.hs-pop b { font-weight: 800; color: #fff; }
.hs-pop i { width: 7px; height: 7px; border-radius: 50%; background: #5fe0a5; box-shadow: 0 0 8px #5fe0a5; }
.hs-pop.is-on { opacity: 1; translate: 0 0; }
/* each label beside its spot (host.js puts a label on a spot) */
.hs-pop[data-spot="1"] { top: 27%; left: 78%; transform: translate(-50%, calc(-100% - 16px)); }
.hs-pop[data-spot="2"] { top: 70%; left: 15%; transform: translate(-20%, 16px); }
.hs-pop[data-spot="3"] { top: 79%; left: 66%; transform: translate(-50%, 16px); }
/* without the script (or with the motion stopped) one label simply stands */
html:not(.js) .hs-pop:first-child { opacity: 1; translate: 0 0; top: 27%; left: 78%; transform: translate(-50%, calc(-100% - 16px)); }

/* --- The switch of packages ------------------------------------------------------------------ */

.pk-switch {
  position: sticky;
  top: 86px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 3vh, 28px);
  padding: 6px 6px 6px 8px;
  border: 1px solid rgba(125, 240, 244, 0.22);
  border-radius: 99px;
  background: rgba(9, 14, 32, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.sv > section:not(.faq) > .pk-switch { position: sticky; z-index: 6; }   /* stronger than service.css, which makes every child relative */
html[dir="rtl"] .pk-switch { padding: 6px 14px 6px 6px; }
.pk-switch__label { font-size: 0.9375rem; font-weight: 700; color: var(--text-mid); }
.pk-switch__btns { display: inline-flex; gap: 4px; }
.pk-switch button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out-strong);
}
.pk-switch button[aria-pressed="true"] { background: var(--cyan); color: var(--ink); }
.pk-switch button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .pk-switch button[aria-pressed="false"]:hover { background: rgba(125, 240, 244, 0.12); color: var(--text); }
}

/* --- The day in the bakery: the moments and the packages they are in ------------------------- */

@media (min-width: 900px) { .sv-build--host .sv-build__stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
/* the switch stands at the top of the moments while they are read */
.sv-build--host .sv-build__stage { margin-top: 0; }

.hs-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 0.875rem; color: var(--text-mid); }
.hs-in b { padding: 3px 11px; border: 1px solid rgba(95, 224, 165, 0.42); border-radius: 99px; font-weight: 700; color: #8ff0c0; }
.hs-in__and { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* read aloud between the names, not seen */
.hs-in__out { display: none; font-weight: 700; color: #ffd08a; }
.sv-step.is-out .hs-in__out { display: inline; }
.sv-step.is-out .sv-card { border-color: rgba(255, 208, 138, 0.28); border-style: dashed; }

/* the stage */
.hs {
  --dir: 1;   /* the side things come from: the right in Hebrew, the left in English */
  --sw: min(620px, 100%, calc((100vh - 150px) / 0.86));
  --cream: #f7f0e4; --deep: #3b2a1e; --crust: #8a5a2b; --wheat: #d9a441; --flour: #ece2d0; --mute: #7a6650;
  --ok: #5fe0a5; --bad: #ff8a7a;
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  position: sticky;
  top: max(140px, calc(50vh - min(533px, 100vh - 150px) / 2));
  display: grid;
  justify-items: center;
}
html[dir="ltr"] .hs { --dir: -1; }
.hs, .hs * { text-shadow: none; }

.hs-rig {
  position: relative;
  width: var(--sw);
  aspect-ratio: 100 / 86;
  container-type: inline-size;
  animation: lp-float 7s ease-in-out infinite alternate;
}
.hs-rig::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 196, 204, 0.15), transparent); pointer-events: none; }

/* the bakery's laptop */
.hs-lap {
  position: absolute;
  z-index: 1;
  top: 15cqw;
  inset-inline-start: 0;
  width: 72cqw;
  transition: transform 900ms var(--ease-io), filter 600ms ease;
}
.hs-lap__scr {
  position: relative;
  aspect-ratio: 16 / 10.4;
  overflow: hidden;
  border: 1.4cqw solid #141b38;
  border-bottom-width: 2cqw;
  border-radius: 2.4cqw 2.4cqw 0.6cqw 0.6cqw;
  background: var(--cream);
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.2), 0 5cqw 10cqw rgba(0, 0, 0, 0.5);
}
/* the night over the site, which lifts with the morning */
.hs-lap__scr::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #070b1a; opacity: 0; pointer-events: none; transition: opacity 900ms ease; }
.hs-lap__base { display: block; height: 2.2cqw; margin: 0 -5cqw; border-radius: 0.4cqw 0.4cqw 2.4cqw 2.4cqw; background: linear-gradient(#323c66, #151b38); }

.hs-site { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); color: var(--deep); font-size: 1.45cqw; line-height: 1.3; }
.hs-bar { display: flex; align-items: center; justify-content: space-between; height: 5cqw; padding: 0 2cqw; border-bottom: 1px solid var(--flour); background: #fffaf2; }
.hs-logo { font-size: 2.1cqw; font-weight: 800; letter-spacing: 0.02em; }
.hs-logo i { font-style: normal; color: var(--wheat); }
.hs-nav { display: flex; gap: 2cqw; color: var(--mute); }
.hs-btn { display: inline-block; padding: 0.5cqw 1.6cqw; border-radius: 99px; background: var(--crust); font-weight: 800; color: #fff; }
.hs-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2cqw; align-items: center; padding: 2cqw 2cqw 1.4cqw; }
.hs-hero__t { display: grid; justify-items: start; gap: 0.8cqw; }
.hs-hero__t b { font-size: 2.5cqw; line-height: 1.12; }
.hs-hero__t small { font-size: 1.35cqw; color: var(--mute); }
.hs-loaves { position: relative; height: 13cqw; overflow: hidden; border-radius: 1.6cqw; background: linear-gradient(160deg, #e9d7bb, #d8bf98); }
.hs-loaves i { position: absolute; width: 11cqw; height: 5cqw; border-radius: 50%; background: radial-gradient(60% 70% at 40% 35%, #d99a52, #9a5f27 70%); box-shadow: inset 0 -0.6cqw 1cqw rgba(0, 0, 0, 0.18); }
.hs-loaves i:nth-child(1) { left: 2cqw; top: 5cqw; }
.hs-loaves i:nth-child(2) { left: 10cqw; top: 2cqw; rotate: -8deg; }
.hs-loaves i:nth-child(3) { left: 15cqw; top: 7cqw; rotate: 6deg; }
/* the products, and the new cakes that take their place at the third moment */
.hs-prods, .hs-cakes { grid-row: 3; grid-column: 1; align-self: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; padding: 0 2cqw; transition: opacity 500ms ease, transform 600ms var(--ease-expo); }
.hs-cakes { opacity: 0; transform: translateY(2cqw); }
.hs-prod { position: relative; display: grid; overflow: hidden; border: 1px solid var(--flour); border-radius: 1.2cqw; background: #fffaf2; }
.hs-prod i { height: 6cqw; background: linear-gradient(150deg, #e2c49a, #b98146); }
.hs-prod--k i { background: linear-gradient(150deg, #efe0c6, #c9a46e); }
.hs-prod--c i { background: linear-gradient(150deg, #e7c9a4, #8a5a2b); }
.hs-prod--g i { background: linear-gradient(150deg, #fbf3e2, #e8cf9d); }
.hs-prod--p i { background: linear-gradient(150deg, #e9dcc8, #4b3a35); }
.hs-prod b { padding: 0.6cqw 1cqw 0; font-size: 1.4cqw; }
.hs-prod small { padding: 0 1cqw 0.8cqw; font-weight: 800; color: var(--crust); }
.hs-prod em { position: absolute; top: 0.8cqw; inset-inline-start: 0.8cqw; padding: 0.2cqw 0.9cqw; border-radius: 99px; background: var(--deep); font-size: 1.1cqw; font-style: normal; font-weight: 800; color: #fff; }
.hs-cakes .hs-prod { box-shadow: 0 0 0 0.3cqw rgba(0, 196, 204, 0); transition: box-shadow 600ms ease; }

/* the orders of the evening, which pile up at the side of the site */
.hs-orders { position: absolute; z-index: 3; bottom: 1.6cqw; inset-inline-start: 1.6cqw; display: grid; gap: 0.8cqw; width: 26cqw; }
.hs-ord { display: grid; gap: 0.2cqw; padding: 1cqw 1.4cqw; border: 1px solid var(--flour); border-radius: 1.4cqw; background: #fff; box-shadow: 0 1cqw 2.4cqw rgba(59, 42, 30, 0.18); font-size: 1.3cqw; opacity: 0; transform: translateY(2cqw) scale(0.97); transition: opacity 400ms ease, transform 600ms var(--ease-expo); }
.hs-ord b { display: flex; align-items: center; gap: 0.6cqw; font-size: 1.45cqw; }
.hs-ord svg, .hs-back svg, .mv-tag svg { width: 1.2em; height: 1.2em; fill: none; stroke: #138a5a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the page of an error, while the site does not load */
.hs-down { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1cqw; background: #f3f4f7; color: #3c4560; text-align: center; opacity: 0; }
.hs-down i { width: 5cqw; height: 5cqw; border: 0.5cqw solid #c9ced9; border-radius: 50%; display: grid; place-items: center; }
.hs-down i::after { content: "!"; font-style: normal; font-weight: 800; font-size: 2.4cqw; color: #9aa1b3; }
.hs-down b { font-size: 2.4cqw; }
.hs-down small { font-size: 1.4cqw; color: #7a8299; }
.hs-back { position: absolute; z-index: 6; bottom: 1.6cqw; inset-inline-start: 1.6cqw; display: inline-flex; align-items: center; gap: 0.6cqw; padding: 1cqw 1.6cqw; border-radius: 1.4cqw; background: #1c2238; font-size: 1.5cqw; font-weight: 700; color: #fff; opacity: 0; transform: translateY(1.5cqw); }
.hs-back svg { stroke: var(--ok); }

/* the server's pane, in the night of the studio */
.hs-srv {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-end: 0;
  width: 40cqw;
  padding: 2.6cqw 2.6cqw 2.4cqw;
  border: 1px solid rgba(125, 240, 244, 0.32);
  border-radius: 3.4cqw;
  background: linear-gradient(165deg, rgba(26, 38, 82, 0.97), rgba(9, 14, 34, 0.97));
  box-shadow: 0 5cqw 10cqw rgba(0, 0, 0, 0.55), 0 0 10cqw rgba(0, 196, 204, 0.12);
  font-size: 1.7cqw;
  line-height: 1.35;
  color: var(--text-mid);
  transform-origin: 50% 0;
  transition: transform 700ms var(--ease-io), opacity 500ms ease, filter 500ms ease;
}
.hs-srv__top { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; font-size: 1.55cqw; }
.hs-stat { position: relative; display: inline-grid; font-weight: 800; }
.hs-stat > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.7cqw; transition: opacity 250ms ease; }
.hs-stat > span::before { content: ""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: currentColor; box-shadow: 0 0 1.4cqw currentColor; }
.hs-stat__ok { color: var(--ok); }
.hs-stat__bad { color: var(--bad); opacity: 0; }
.hs-clock { display: block; height: 7.4cqw; margin: 1.4cqw 0 0; overflow: hidden; font-size: 6.6cqw; font-weight: 200; line-height: 7.4cqw; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
html[dir="ltr"] .hs-clock { text-align: start; }
.hs-roll { display: grid; transition: transform 800ms var(--ease-io); }
.hs-roll i { font-style: normal; }
.hs-day { display: block; margin-bottom: 1.8cqw; font-size: 1.45cqw; color: var(--low, #8e9bc0); }

/* what happens at each moment, one over the other */
.hs-blocks { position: relative; display: grid; }
.hs-b { grid-area: 1 / 1; display: grid; align-content: start; gap: 1.1cqw; padding: 1.8cqw; border: 1px solid rgba(194, 205, 232, 0.14); border-radius: 2.2cqw; background: rgba(255, 255, 255, 0.05); opacity: 0; transform: translateY(1.6cqw); transition: opacity 400ms ease, transform 600ms var(--ease-expo); }
.hs-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; }
.hs-h b { font-size: 1.8cqw; color: #fff; }
.hs-h small { font-size: 1.35cqw; color: var(--low, #8e9bc0); }
.hs-h--2 { margin-top: 1cqw; }
.hs-kept { font-size: 1.4cqw; color: var(--text-mid); }

/* 1: the backup fills; the day that is saved lights at the head of the seven */
.hs-prog { display: block; height: 1.1cqw; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.hs-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--cyan-hi)); box-shadow: 0 0 1.6cqw rgba(0, 196, 204, 0.6); transform-origin: 100% 50%; transform: scaleX(1); }
html[dir="ltr"] .hs-prog i { transform-origin: 0 50%; }
.hs-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6cqw; }
.hs-days i { display: grid; place-items: center; height: 3.8cqw; border: 1px solid rgba(125, 240, 244, 0.22); border-radius: 1cqw; background: rgba(125, 240, 244, 0.1); font-size: 1.4cqw; font-style: normal; font-weight: 700; color: var(--text-mid); }
.hs-days .hs-days__new { border-color: var(--cyan); background: var(--cyan); color: var(--ink); }
.hs-days .hs-days__old { display: none; }

/* 2: the update: checked, then in */
.hs-ver { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.2cqw; font-weight: 800; color: #fff; direction: ltr; justify-content: flex-end; }
html[dir="ltr"] .hs-ver { justify-content: flex-start; }
.hs-ver i { width: 4cqw; height: 1px; background: rgba(194, 205, 232, 0.5); }
.hs-ver__old { color: var(--low, #8e9bc0); text-decoration: line-through; }
.hs-checks { display: grid; gap: 0.8cqw; }
.hs-checks i { display: flex; align-items: center; gap: 1cqw; font-size: 1.5cqw; font-style: normal; color: var(--text); }
.hs-checks i::before { content: ""; flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23052016' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; transition: background-color 300ms ease, box-shadow 300ms ease; }

/* 3: the pictures shrink; the check fixes what it finds */
.hs-img { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: 0.4cqw 0; border-bottom: 1px dashed rgba(194, 205, 232, 0.16); font-size: 1.4cqw; }
.hs-img > span:last-child { display: inline-flex; gap: 1cqw; direction: ltr; }
.hs-img s { color: #7f8ab0; }
.hs-img b { color: var(--cyan-hi); }
.hs-img svg { width: 1.8cqw; height: 1.8cqw; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hs-fix { display: flex; justify-content: space-between; font-size: 1.45cqw; }
.hs-fix b { display: inline-grid; color: var(--ok); }
.hs-fix b > span { grid-area: 1 / 1; transition: opacity 300ms ease; }
.hs-fix b > span:first-child { color: #ffd08a; opacity: 0; }

/* 5: the evening: the visitors and the hours of the day */
.hs-big { display: flex; align-items: baseline; gap: 1.2cqw; }
.hs-big b { font-size: 5cqw; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hs-big small { font-size: 1.4cqw; color: var(--low, #8e9bc0); }
.hs-bars { display: flex; align-items: flex-end; gap: 0.35cqw; height: 7cqw; direction: ltr; }
.hs-bars i { flex: 1; height: 100%; border-radius: 0.3cqw 0.3cqw 0 0; background: rgba(125, 240, 244, 0.35); transform-origin: 50% 100%; transform: scaleY(var(--h)); }
.hs-bars i.is-hot { background: var(--cyan-hi); box-shadow: 0 0 1.2cqw rgba(125, 240, 244, 0.6); }
.hs-axis { display: flex; justify-content: space-between; direction: ltr; font-size: 1.1cqw; color: var(--low, #8e9bc0); }
.hs-cdn { display: flex; align-items: center; gap: 0.8cqw; font-size: 1.35cqw; }
.hs-cdn i { flex: none; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--ok); box-shadow: 0 0 1.2cqw var(--ok); }

/* the owner's phone, at the fourth moment, with her talk with Roei */
.hs-own {
  position: absolute;
  z-index: 5;
  top: 0;
  inset-inline-end: 4cqw;
  width: 33cqw;
  aspect-ratio: 9 / 18.4;
  overflow: hidden;
  border: 1.2cqw solid #141b38;
  border-radius: 5.4cqw;
  background: #eef1f7;
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.28), 0 6cqw 12cqw rgba(0, 0, 0, 0.6), 0 0 12cqw rgba(0, 196, 204, 0.16);
  opacity: 0;
  transform: translateY(8cqw) scale(0.96);
  transition: opacity 500ms ease, transform 800ms var(--ease-drawer);
}
.hs-island { position: absolute; top: 1.4cqw; left: 50%; width: 9cqw; height: 2.6cqw; margin-left: -4.5cqw; border-radius: 99px; background: #141b38; }
.hs-chat { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); font-size: 1.55cqw; line-height: 1.35; color: #1c2238; }
.hs-chat__top { display: flex; align-items: center; gap: 1.4cqw; padding: 5.4cqw 2cqw 1.6cqw; background: #111a3a; color: #fff; }
.hs-chat__top b { display: block; font-size: 1.7cqw; }
.hs-chat__top small { display: block; font-size: 1.25cqw; color: #aab4d6; }
.hs-av { flex: none; display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--cyan); font-size: 1.8cqw; font-weight: 800; color: var(--ink); }
.hs-msgs { display: grid; align-content: end; gap: 1.2cqw; padding: 2cqw 1.8cqw; }
.hs-m { max-width: 86%; padding: 1.2cqw 1.5cqw 0.8cqw; border-radius: 1.8cqw; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(1.4cqw); transition: opacity 300ms ease, transform 500ms var(--ease-expo); }
.hs-m small { display: block; margin-top: 0.3cqw; text-align: end; font-size: 1.1cqw; color: #7a8299; }
.hs-m--out { justify-self: end; border-start-end-radius: 0.5cqw; background: #d9f4f5; }
.hs-m--in { justify-self: start; border-start-start-radius: 0.5cqw; background: #fff; }
.hs-m3 { border: 1.5px solid #138a5a; }
/* the last message says what was done: from the backup of the night, where the package has one */
.hs[data-pack="standard"] .hs-m--bak,
.hs:not([data-pack="standard"]) .hs-m--fix { display: none; }

/* "not in this package": over the pane, when the moment is not in the chosen package */
.hs-off {
  position: absolute;
  z-index: 6;
  top: 24cqw;
  inset-inline-end: 2cqw;
  width: 36cqw;
  padding: 2cqw 2.4cqw;
  border: 1px solid rgba(255, 208, 138, 0.5);
  border-radius: 2.4cqw;
  background: rgba(9, 14, 32, 0.97);
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, 0.55);
  font-size: 1.6cqw;
  line-height: 1.4;
  color: var(--text-mid);
  opacity: 0;
  transform: translateY(1.4cqw);
  transition: opacity 300ms ease, transform 500ms var(--ease-expo);
  pointer-events: none;
}
.hs-off b { display: block; font-size: 1.9cqw; color: #ffd08a; }
.hs-off small { display: block; margin-top: 0.4cqw; font-size: 1.5cqw; }
.hs.is-out .hs-off { opacity: 1; transform: none; }
.hs.is-out .hs-srv { filter: saturate(0.2) brightness(0.55); }

/* the callouts of the moments, under what they point at */
.hs-co {
  position: absolute;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 34cqw;
  padding: 7px 12px;
  border: 1px solid rgba(125, 240, 244, 0.38);
  border-radius: 12px;
  background: rgba(10, 18, 40, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.hs-co::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 10px var(--cyan); }
.hs-co--srv { top: calc(var(--srv-h, 62cqw) + 2.4cqw); inset-inline-end: 3cqw; }
.hs-co--lap { top: 70cqw; inset-inline-start: 16cqw; }
.hs-co--own { top: 73cqw; inset-inline-end: 4cqw; }
.hs-cap {
  position: absolute;
  z-index: 2;
  top: 80cqw;
  inset-inline-start: 0;
  padding: 3px 10px;
  border-radius: 99px;
  background: #141b38;
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.28);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
}

/* --- the five moments of the day --- */

/* the hour turns, and the night lifts from the site */
.hs[data-stage="2"] .hs-roll { transform: translateY(-20%); }
.hs[data-stage="3"] .hs-roll { transform: translateY(-40%); }
.hs[data-stage="4"] .hs-roll { transform: translateY(-60%); }
.hs[data-stage="5"] .hs-roll { transform: translateY(-80%); }
.hs[data-stage="1"] .hs-lap__scr::after { opacity: 0.55; }
.hs[data-stage="2"] .hs-lap__scr::after { opacity: 0.22; }
.hs:is([data-stage="1"], [data-stage="2"], [data-stage="3"]) .hs-lap { filter: saturate(0.85); }

/* the block of the moment comes in */
.hs[data-stage="1"] .hs-b1, .hs[data-stage="2"] .hs-b2, .hs[data-stage="3"] .hs-b3, .hs[data-stage="4"] .hs-b4, .hs[data-stage="5"] .hs-b5 { opacity: 1; transform: none; transition-delay: 250ms; }
.hs[data-stage] .hs-co { transition-delay: 0s; }
.hs.is-seen[data-stage="1"] .hs-co[data-at="1"],
.hs[data-stage="2"] .hs-co[data-at="2"],
.hs[data-stage="3"] .hs-co[data-at="3"],
.hs[data-stage="4"] .hs-co[data-at="4"],
.hs[data-stage="5"] .hs-co[data-at="5"] { opacity: 1; transform: none; transition: opacity 400ms ease var(--d, 1600ms), transform 600ms var(--ease-expo) var(--d, 1600ms); }
.hs-co[data-at="4"] { --d: 2200ms; }
.hs-co[data-at="5"] { --d: 2300ms; }

/* 1: the backup fills, and the saved day lights */
.hs.is-seen[data-stage="1"] .hs-prog i { animation: hs-fill 1300ms var(--ease-io) 500ms both; }
@keyframes hs-fill { from { transform: scaleX(0); } }
.hs.is-seen[data-stage="1"] .hs-days__new { animation: hs-day 700ms var(--ease-expo) 1700ms both; }
@keyframes hs-day { 0%, 40% { border-color: rgba(125, 240, 244, 0.22); background: rgba(125, 240, 244, 0.1); color: var(--text-mid); transform: scale(0.8); } 100% { transform: none; } }

/* 2: the steps of the check light one after the other, then the version turns */
.hs[data-stage="2"] .hs-checks i::before { animation: hs-tick 450ms ease both; }
.hs[data-stage="2"] .hs-checks i:nth-child(1)::before { animation-delay: 500ms; }
.hs[data-stage="2"] .hs-checks i:nth-child(2)::before { animation-delay: 1000ms; }
.hs[data-stage="2"] .hs-checks i:nth-child(3)::before { animation-delay: 1500ms; }
.hs[data-stage="2"] .hs-checks i:nth-child(4)::before { animation-delay: 2000ms; }
@keyframes hs-tick { from { background-color: rgba(255, 255, 255, 0.08); background-size: 0; box-shadow: 0 0 0 0 rgba(95, 224, 165, 0.5); } 60% { box-shadow: 0 0 0 0.8cqw rgba(95, 224, 165, 0); } }
.hs[data-stage="2"] .hs-ver__new { animation: hs-ver 500ms var(--ease-expo) 2100ms both; }
@keyframes hs-ver { from { opacity: 0; transform: translateY(1cqw); } }
.hs[data-stage="2"] .hs-lap { animation: hs-blink 700ms ease 2300ms both; }
@keyframes hs-blink { 40% { filter: brightness(1.25) saturate(1.1); } }

/* 3: the new cakes come into the site; their weight drops; the broken link is fixed */
.hs[data-stage="3"] .hs-prods { opacity: 0; transform: translateY(-1.5cqw); }
.hs[data-stage="3"] .hs-cakes { opacity: 1; transform: none; transition-delay: 450ms; }
.hs[data-stage="3"] .hs-cakes .hs-prod { animation: hs-new 1600ms ease 700ms both; }
@keyframes hs-new { 0% { box-shadow: 0 0 0 0.3cqw rgba(0, 196, 204, 0.85); } 100% { box-shadow: 0 0 0 0.3cqw rgba(0, 196, 204, 0); } }
.hs[data-stage="3"] .hs-img b { animation: hs-ver 500ms var(--ease-expo) both; }
.hs[data-stage="3"] .hs-img:nth-of-type(2) b { animation-delay: 1100ms; }
.hs[data-stage="3"] .hs-img:nth-of-type(3) b { animation-delay: 1350ms; }
.hs[data-stage="3"] .hs-img:nth-of-type(4) b { animation-delay: 1600ms; }
.hs[data-stage="3"] .hs-fix b > span:first-child { animation: hs-found 900ms ease both; }
.hs[data-stage="3"] .hs-fix b > span:last-child { animation: hs-fixed 900ms ease both; }
.hs[data-stage="3"] .hs-fix:nth-of-type(6) b > span { animation-delay: 1900ms; }
.hs[data-stage="3"] .hs-fix:nth-of-type(7) b > span { animation-delay: 2400ms; }
@keyframes hs-found { 0%, 100% { opacity: 0; } 10%, 60% { opacity: 1; } }
@keyframes hs-fixed { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }

/* 4: the site does not load; the pane steps back and her phone comes forward; then it is back */
.hs[data-stage="4"] .hs-down { animation: hs-down 4600ms linear 200ms both; }
@keyframes hs-down { 0% { opacity: 0; } 4%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
.hs[data-stage="4"] .hs-stat__ok { animation: hs-unstat 4600ms linear 200ms both; }
.hs[data-stage="4"] .hs-stat__bad { animation: hs-stat 4600ms linear 200ms both; }
@keyframes hs-stat { 0% { opacity: 0; } 4%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes hs-unstat { 0% { opacity: 1; } 4%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
.hs[data-stage="4"] .hs-srv { opacity: 0.4; transform: scale(0.9); transition-delay: 700ms; }
.hs[data-stage="4"] .hs-own { opacity: 1; transform: none; transition-delay: 800ms; }
.hs[data-stage="4"] .hs-m { opacity: 1; transform: none; }
.hs[data-stage="4"] .hs-m1 { transition-delay: 1300ms; }
.hs[data-stage="4"] .hs-m2 { transition-delay: 2200ms; }
.hs[data-stage="4"] .hs-m3 { transition-delay: 4000ms; }
.hs[data-stage="4"] .hs-back { opacity: 1; transform: none; transition: opacity 400ms ease 4500ms, transform 600ms var(--ease-expo) 4500ms; }

/* 5: the visitors count up, the hours of the day grow, the orders pile up */
.hs[data-stage="5"] .hs-bars i { animation: hs-bar 900ms var(--ease-expo) both; animation-delay: calc(400ms + var(--i) * 35ms); }
@keyframes hs-bar { from { transform: scaleY(0); } }
.hs[data-stage="5"] .hs-ord { opacity: 1; transform: none; }
.hs[data-stage="5"] .hs-ord:nth-child(1) { transition-delay: 900ms; }
.hs[data-stage="5"] .hs-ord:nth-child(2) { transition-delay: 1500ms; }
.hs[data-stage="5"] .hs-ord:nth-child(3) { transition-delay: 2100ms; }
.hs[data-stage="5"] .hs-ord:nth-child(1) { opacity: 0.6; }

/* the stage waits for host.js to set its first moment, which is set at once (a refresh in the
   middle of the section shows that moment, not the end playing backwards); if the script never
   comes, the finished picture shows after a moment */
.js .hs:not(.is-ready) .hs-rig { opacity: 0; animation: lp-show 0s linear 2.5s forwards; }
.hs.is-ready .hs-rig { transition: opacity 400ms ease; }
.hs.is-now, .hs.is-now *, .hs.is-now *::before, .hs.is-now *::after { transition: none !important; animation: none !important; }
/* coming back up the moments, a moment shows as it ends, without acting it again */
.hs.is-back *, .hs.is-back *::before, .hs.is-back *::after { transition-delay: 0s !important; animation: none !important; }
/* the loops rest while the section is off the screen */
.sv-build.is-off .hs-rig { animation-play-state: paused; }

/* --- The packages: the stack of layers, the cards, the picker -------------------------------- */

.sv-price--packs .sv-price__sub { max-width: 40em; }
.pk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 23vw, 330px);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(26px, 5vh, 56px);
}
.pk .plans { grid-column: 1; grid-row: 1; margin: 0; }
.pk .plan-price b { font-size: clamp(3rem, 4.8vw, 5.25rem); }
.pk-plan { cursor: default; transition: box-shadow 300ms ease, transform 300ms var(--ease-expo); }
.pk-plan.is-sel { box-shadow: inset 0 0 0 1.5px rgba(125, 240, 244, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 80px -30px rgba(0, 196, 204, 0.38); }
.pk-plan.is-sel .plan-cta { background: var(--cyan); box-shadow: none; color: var(--ink); }
.pk-rec {
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 3px 12px;
  border-radius: 99px;
  background: rgba(125, 240, 244, 0.14);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--cyan-hi);
}
html[dir="rtl"] .pk .plan-name { text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .pk-plan:not(.is-sel):hover { box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -44px rgba(0, 0, 0, 0.8); }
}

/* the stack: a layer for each thing a package holds, from the server up */
.pk-stack {
  --step: 38px;
  grid-column: 2;
  grid-row: 1;
  align-self: start;   /* beside the names and prices of the packages, not below them */
  margin-top: clamp(20px, 6vh, 64px);
  position: relative;
  height: calc(var(--step) * 8 + 96px);
  pointer-events: none;
}
.pk-layer {
  position: absolute;
  inset-inline: 0;
  top: calc((8 - var(--i)) * var(--step));
  height: 96px;
  transition: opacity 600ms ease, transform 900ms cubic-bezier(0.2, 1.1, 0.35, 1);
  transition-delay: calc(var(--i) * 70ms);
}
.pk-layer i {
  position: absolute;
  top: 50%;
  left: 31%;
  width: 176px;
  height: 176px;
  margin: -88px 0 0 -88px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.2);
  transform: rotateX(62deg) rotateZ(45deg) scale(0.62);
  transition: background-color 400ms ease, box-shadow 400ms ease;
}
.pk-layer span {
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  translate: 0 -50%;
  max-width: 40%;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(194, 205, 232, 0.5);
  transition: color 400ms ease;
}
html[dir="ltr"] .pk-layer i { left: 69%; }
/* what the chosen package holds is lit, each package in its own light */
.pk-stack .pk-layer--standard i { background: linear-gradient(135deg, rgba(110, 130, 210, 0.55), rgba(26, 38, 82, 0.92)); box-shadow: inset 0 0 0 1px rgba(170, 190, 250, 0.6), 0 0 24px rgba(110, 130, 210, 0.2); }
.pk-stack .pk-layer--standard span { color: var(--text-mid); }
.pk-stack:is([data-pack="premium"], [data-pack="gold"]) .pk-layer--premium i { background: linear-gradient(135deg, rgba(0, 196, 204, 0.6), rgba(22, 52, 120, 0.85)); box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.8), 0 0 30px rgba(0, 196, 204, 0.32); }
.pk-stack[data-pack="gold"] .pk-layer--gold i { background: linear-gradient(135deg, rgba(240, 200, 110, 0.7), rgba(120, 82, 30, 0.85)); box-shadow: inset 0 0 0 1px rgba(255, 224, 150, 0.85), 0 0 30px rgba(240, 200, 110, 0.3); }
.pk-stack:is([data-pack="premium"], [data-pack="gold"]) .pk-layer--premium span,
.pk-stack[data-pack="gold"] .pk-layer--gold span { color: var(--text); }
/* when the stack comes into view it builds itself from the bottom up */
.js .pk-stack.is-armed .pk-layer { opacity: 0; transform: translateY(-46px); }
.js .pk-stack.is-armed.is-in .pk-layer { opacity: 1; transform: none; }

/* the picker of three questions */
.pq { margin-top: clamp(56px, 9vh, 110px); }
.pq-head { margin-bottom: clamp(20px, 3.4vh, 32px); }
.pq-title { font-size: clamp(1.875rem, 3vw, 3rem); }
.pq-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); align-items: stretch; }
.pq-qs { display: grid; gap: 22px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(160deg, rgba(20, 30, 64, 0.7), rgba(10, 15, 34, 0.7)); }
.pq-n { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--text-mid); }
.pq-h { scroll-margin-top: 110px; margin: 4px 0 14px; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 800; color: var(--text); outline: none; }
.pq-opts { display: grid; gap: 10px; }
.pq-opts button {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid rgba(194, 205, 232, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  font: inherit;
  font-size: 1rem;
  text-align: start;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out-strong);
}
.pq-opts button[aria-pressed="true"] { border-color: var(--cyan); background: rgba(0, 196, 204, 0.14); font-weight: 700; color: var(--text); }
.pq-opts button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .pq-opts button:hover { border-color: rgba(125, 240, 244, 0.6); color: var(--text); }
}
.pq-dots { display: none; gap: 6px; }
.pq-dots i { width: 28px; height: 4px; border-radius: 4px; background: rgba(194, 205, 232, 0.25); transition: background-color 300ms ease; }
.pq-dots i.is-on { background: var(--cyan); }
/* one question at a time, with the script */
.pq.is-step .pq-q:not(.is-now) { display: none; }
.pq.is-step .pq-q.is-now { animation: pq-in 450ms var(--ease-expo) both; }
@keyframes pq-in { from { opacity: 0; transform: translateX(calc(var(--pq-dir, 1) * -16px)); } }
html[dir="ltr"] .pq { --pq-dir: -1; }
.pq.is-step .pq-dots { display: flex; }

.pq-res {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(125, 240, 244, 0.3);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(20, 40, 80, 0.85), rgba(10, 15, 34, 0.85));
}
.pq-res__k { margin: 0; font-size: 0.875rem; font-weight: 800; color: var(--cyan-hi); }
.pq-still { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text-mid); }
.pq.has-res .pq-still { display: none; }
.pq.has-res .pq-res { border-color: rgba(125, 240, 244, 0.75); box-shadow: 0 30px 70px -30px rgba(0, 196, 204, 0.35); }
.pq-out { display: grid; gap: 8px; animation: pq-res 600ms var(--ease-expo) both; }
@keyframes pq-res { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.pq-out p { margin: 0; }
.pq-out__name { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--text); }
html[dir="rtl"] .pq-out__name { text-align: right; }
.pq-out__price { font-size: 1.0625rem; color: var(--cyan-hi); }
.pq-out__why { line-height: 1.6; color: var(--text-mid); }
.pq-out__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pq-again {
  justify-self: start;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--cyan-hi);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.pk-fine { max-width: 64em; }

/* --- The move to us ---------------------------------------------------------------------------- */

.sv-proc--move .sv-proc__item { transition: opacity 400ms ease; }
.js .sv-proc--move.is-armed .sv-proc__item { opacity: 0.45; }
.js .sv-proc--move.is-armed .sv-proc__item.is-on { opacity: 1; }
.sv-proc--move .sv-proc__item.is-on .sv-proc__n { text-shadow: 0 0 22px rgba(0, 196, 204, 0.8); }

.mv { --dir: 1; margin: clamp(26px, 5vh, 48px) 0 clamp(30px, 5vh, 56px); }
html[dir="ltr"] .mv { --dir: -1; }
.mv-rig { position: relative; width: min(100%, 980px); height: 300px; margin-inline: auto; }
.mv-dom {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: translateX(-50%);
}
.mv-dom > span { padding: 7px 16px; border: 1px solid rgba(194, 205, 232, 0.4); border-radius: 99px; background: rgba(7, 11, 26, 0.95); font-size: 0.9375rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.mv-arrow { display: block; width: 26px; height: 44px; transform-origin: 50% 0; transform: rotate(calc(var(--dir) * -38deg)); transition: transform 900ms var(--ease-expo, ease); }
.mv-arrow svg { width: 100%; height: 100%; fill: none; stroke: var(--cyan-hi); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(0, 196, 204, 0.7)); }
.mv-box {
  position: absolute;
  top: 96px;
  width: min(260px, 32%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(14, 22, 52, 0.92);
  transition: opacity 600ms ease, border-color 500ms ease, box-shadow 500ms ease;
}
.mv-box b { display: block; margin-bottom: 10px; font-size: 1rem; color: var(--text-mid); }
.mv-box--old { inset-inline-start: 0; }
.mv-box--new { inset-inline-end: 0; }
.mv-site { display: grid; gap: 6px; align-content: start; height: 92px; padding: 10px; border-radius: 12px; background: #f7f0e4; }
.mv-site i { display: block; height: 9px; border-radius: 5px; background: #e2d2b8; transform-origin: 100% 50%; }
html[dir="ltr"] .mv-site i { transform-origin: 0 50%; }
.mv-site i:nth-child(1) { width: 42%; background: #8a5a2b; }
.mv-site i:nth-child(3) { width: 70%; }
.mv-site i:nth-child(4) { width: 86%; }
.mv-box--new .mv-site i { transform: scaleX(0); transition: transform 500ms var(--ease-expo, ease); }
.mv-tag { position: absolute; bottom: -14px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: #0d1a2f; box-shadow: 0 0 0 1px rgba(95, 224, 165, 0.45); font-size: 0.8125rem; font-weight: 700; color: #8ff0c0; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 500ms var(--ease-expo, ease); }
.mv-tag svg { width: 14px; height: 14px; stroke: #5fe0a5; }
.mv-beam { position: absolute; top: 152px; inset-inline: calc(min(260px, 32%) + 18px); height: 4px; border-radius: 4px; background: rgba(125, 240, 244, 0.12); }
.mv-beam > span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 0.875rem; font-weight: 700; color: var(--cyan-hi); white-space: nowrap; opacity: 0; transition: opacity 300ms ease; }
.mv-beam > i { position: absolute; top: -3px; inset-inline-start: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px var(--cyan-hi), 0 0 24px rgba(0, 196, 204, 0.6); opacity: 0; }
.mv-zero { position: absolute; bottom: 0; left: 50%; display: flex; gap: 22px; padding: 10px 20px; border: 1px solid rgba(95, 224, 165, 0.35); border-radius: 16px; background: rgba(95, 224, 165, 0.07); font-size: 0.9375rem; color: var(--text-mid); white-space: nowrap; transform: translateX(-50%); }
.mv-zero b { font-size: 1.125rem; color: #5fe0a5; }

/* the steps of the move: 2 the access comes, 3 the site crosses and is checked, 4 the domain turns */
.mv:is([data-step="2"], [data-step="3"], [data-step="4"]) .mv-tag--key { opacity: 1; transform: none; }
.mv[data-step="3"] .mv-beam { background: linear-gradient(calc(var(--dir) * -90deg), rgba(125, 240, 244, 0.65), rgba(125, 240, 244, 0.1)); box-shadow: 0 0 14px rgba(0, 196, 204, 0.45); }
.mv[data-step="3"] .mv-beam > span { opacity: 1; }
.mv[data-step="3"] .mv-beam > i { animation: mv-run 1400ms cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.mv[data-step="3"] .mv-beam > i:nth-child(2) { animation-delay: 460ms; }
.mv[data-step="3"] .mv-beam > i:nth-child(3) { animation-delay: 920ms; }
@keyframes mv-run { 0% { opacity: 0; inset-inline-start: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; inset-inline-start: calc(100% - 10px); } }
.mv:is([data-step="3"], [data-step="4"]) .mv-box--new .mv-site i { transform: none; }
.mv[data-step="3"] .mv-box--new .mv-site i:nth-child(1) { transition-delay: 300ms; }
.mv[data-step="3"] .mv-box--new .mv-site i:nth-child(2) { transition-delay: 700ms; }
.mv[data-step="3"] .mv-box--new .mv-site i:nth-child(3) { transition-delay: 1100ms; }
.mv[data-step="3"] .mv-box--new .mv-site i:nth-child(4) { transition-delay: 1500ms; }
.mv:is([data-step="3"], [data-step="4"]) .mv-tag--ok { opacity: 1; transform: none; }
.mv[data-step="3"] .mv-tag--ok { transition-delay: 1900ms; }
.mv[data-step="4"] .mv-arrow { transform: rotate(calc(var(--dir) * 38deg)); }
.mv[data-step="4"] .mv-box--old { opacity: 0.4; }
.mv[data-step="4"] .mv-tag--key { opacity: 0; }
.mv[data-step="4"] .mv-box--new { border-color: rgba(125, 240, 244, 0.7); box-shadow: 0 0 44px rgba(0, 196, 204, 0.22); }

/* --- The support hours, as a week ------------------------------------------------------------- */

.hr { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(22px, 4vw, 64px); align-items: center; margin-top: clamp(22px, 4vh, 40px); }
.hr-week { display: grid; gap: 9px; }
.hr-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.9375rem; font-weight: 600; color: var(--text-mid); }
.hr-row.is-today { color: var(--text); font-weight: 800; }
.hr-track { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); direction: ltr; }
.hr-track > i:not(.hr-line) { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); border-radius: 8px; background: linear-gradient(90deg, rgba(0, 196, 204, 0.6), rgba(125, 240, 244, 0.85)); box-shadow: 0 0 12px rgba(0, 196, 204, 0.3); transform-origin: 0 50%; transition: transform 900ms var(--ease-expo); }
.hr-row.is-today .hr-track > i:not(.hr-line) { box-shadow: 0 0 20px rgba(0, 196, 204, 0.6); }
.hr-line { position: absolute; top: -7px; bottom: -7px; left: var(--now, 0); width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px rgba(125, 240, 244, 0.8); opacity: 0; transition: opacity 400ms ease 600ms; }
.hr-row.is-today .hr-line { opacity: 1; }
.js .hr.is-armed .hr-track > i:not(.hr-line) { transform: scaleX(0); }
.js .hr.is-armed.is-in .hr-track > i:not(.hr-line) { transform: none; }
.hr-row:nth-child(2) .hr-track > i { transition-delay: 60ms; }
.hr-row:nth-child(3) .hr-track > i { transition-delay: 120ms; }
.hr-row:nth-child(4) .hr-track > i { transition-delay: 180ms; }
.hr-row:nth-child(5) .hr-track > i { transition-delay: 240ms; }
.hr-row:nth-child(6) .hr-track > i { transition-delay: 300ms; }
.hr-axis { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; margin-top: 2px; font-size: 0.75rem; color: var(--text-mid); }
.hr-axis__t { display: flex; justify-content: space-between; direction: ltr; }

.hr-card { display: grid; justify-items: start; gap: 14px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, rgba(20, 30, 64, 0.75), rgba(10, 15, 34, 0.75)); }
.hr-card p { margin: 0; }
.hr-text { line-height: 1.6; color: var(--text-mid); text-wrap: pretty; }
.hr-live { display: grid; gap: 6px; }
.hr-st { display: none; align-items: center; gap: 9px; font-size: 1.125rem; font-weight: 800; }
.hr-st::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.hr-st--on { color: #5fe0a5; }
.hr-st--off { color: #ffd08a; }
.hr-say { display: none; color: var(--text); }
.hr-card.is-open { border-color: rgba(95, 224, 165, 0.45); background: linear-gradient(160deg, rgba(20, 52, 52, 0.55), rgba(10, 15, 34, 0.75)); }
.hr-card.is-open :is(.hr-st--on, .hr-say--on),
.hr-card.is-shut :is(.hr-st--off, .hr-say--off) { display: flex; }
.hr-card.is-open .hr-say--on, .hr-card.is-shut .hr-say--off { display: block; }
.hr-card.is-shut.is-later .hr-say--off { display: none; }
.hr-card.is-shut.is-later .hr-say--today { display: block; }
.hr-card.is-open .hr-st--on::before { animation: sv-ping 1.6s ease-out infinite; }

/* --- Narrower screens ---------------------------------------------------------------------- */

/* below a wide screen the stack stands above the packages, smaller, so its words keep one line */
@media (max-width: 1180px) {
  .pk { grid-template-columns: minmax(0, 1fr); }
  .pk-stack { grid-column: 1; grid-row: 1; --step: 28px; width: min(100%, 440px); justify-self: center; margin-top: 0; }
  .pk-layer i { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .pk .plans { grid-row: 2; }
}

@media (max-width: 1000px) {
  .pk-stack { --step: 26px; }
  .pq-body { grid-template-columns: minmax(0, 1fr); }
  .hr { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .sv > .sv-top--sky { grid-template-columns: minmax(0, 1fr); }
  .hs-sky { width: min(88%, 380px); margin-top: 8px; }
  .sv > section:not(.faq) > .pk-switch { position: relative; top: auto; }
  .hs { position: relative; top: auto; height: auto; padding-bottom: 28px; --sw: min(100%, 420px, calc(38vh / 0.86)); }
  .hs-rig { animation: none; }
  .hs-co { padding: 4px 8px; border-radius: 9px; font-size: 11px; max-width: 40cqw; }
  .hs-co::before { width: 5px; height: 5px; }
  .hs-cap { padding: 2px 8px; font-size: 11px; }
  .hs-pop { font-size: 12px; padding: 5px 10px; }
}

@media (max-width: 767px) {
  .mv-rig { height: 270px; }
  .mv-box { top: 92px; width: 40%; padding: 12px; }
  .mv-box b { font-size: 0.875rem; }
  .mv-site { height: 70px; }
  .mv-beam { top: 140px; inset-inline: calc(40% + 10px); }
  .mv-beam > span { top: 12px; font-size: 0.75rem; white-space: normal; text-align: center; width: 100%; }
  .mv-zero { gap: 14px; padding: 8px 14px; font-size: 0.8125rem; }
  .mv-zero b { font-size: 1rem; }
  .mv-tag { font-size: 0.75rem; padding: 3px 8px; }
  .hr-row, .hr-axis { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  /* the stack's words take more of the width on a phone, and the layers less, so a long word
     keeps to its line */
  .pk-layer i { left: 27%; width: 130px; height: 130px; margin: -65px 0 0 -65px; }
  html[dir="ltr"] .pk-layer i { left: 73%; }
  .pk-layer span { max-width: 54%; font-size: 0.75rem; }
  .pk-switch { width: 100%; justify-content: space-between; }
}

@media (max-width: 420px) {
  .pk-switch__label { display: none; }
  .pk-switch { justify-content: center; }
  .pk-switch button { padding: 0 12px; }
}

/* A phone on its side (or a page zoomed to 200%): the stage goes back beside the moments */
@media (min-width: 560px) and (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .sv-build--host .sv-build__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-build--host .sv-build__view { order: 0; position: relative; top: auto; margin-inline: 0; padding: 0; background: none; }
  .sv-build--host .hs { position: sticky; top: 80px; height: auto; --sw: min(100%, calc((100vh - 104px) / 0.86)); }
}

/* --- Motion stopped: every moment shows at once, nothing turns or breathes --------------------- */

html.no-motion :is(.hs, .hs *, .hs-sky *, .mv, .mv *, .pk-stack *, .pq *, .hr *),
html.no-motion :is(.hs, .hs-sky, .mv, .pk-stack, .pq, .hr) *::before,
html.no-motion :is(.hs, .hs-sky, .mv, .pk-stack, .pq, .hr) *::after { transition: none !important; animation: none !important; }
html.no-motion .pk-stack.is-armed .pk-layer { opacity: 1; transform: none; }
html.no-motion .hr.is-armed .hr-track > i:not(.hr-line) { transform: none; }
html.no-motion .sv-proc--move.is-armed .sv-proc__item { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :is(.hs, .hs *, .hs-sky *, .mv, .mv *, .pk-stack *, .pq *, .hr *),
  :is(.hs, .hs-sky, .mv, .pk-stack, .pq, .hr) *::before,
  :is(.hs, .hs-sky, .mv, .pk-stack, .pq, .hr) *::after { transition: none !important; animation: none !important; }
  .js .pk-stack.is-armed .pk-layer { opacity: 1; transform: none; }
  .js .hr.is-armed .hr-track > i:not(.hr-line) { transform: none; }
  .js .sv-proc--move.is-armed .sv-proc__item { opacity: 1; }
}

/* --- The colour modes of the accessibility menu, and the system's forced colours ------------- */

html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.pk-switch, .pq-qs, .pq-res, .hr-card, .mv-box, .mv-zero, .hs-co, .hs-off, .hs-pop) { background: #000; color: #fff; border-color: currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.hs-in b, .pk-rec, .hr-st, .mv-tag) { background: none; color: inherit; border-color: currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-step.is-out :is(h3, p:not(.hs-in), .sv-step__do) { opacity: 1; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .hs-sky { opacity: 0.6; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.pq-opts button, .pk-switch button)[aria-pressed="true"] { outline: 3px solid currentColor; outline-offset: 2px; }

@media (forced-colors: active) {
  .pk-switch button, .pq-opts button { border: 1px solid ButtonText; }
  .pk-switch button[aria-pressed="true"], .pq-opts button[aria-pressed="true"] { border: 3px solid Highlight; }
  .pq-qs, .pq-res, .hr-card, .mv-box { border: 1px solid CanvasText; }
  .hs-sky, .pk-stack { display: none; }
  .hr-track > i { forced-color-adjust: none; background: Highlight; }
}