/* ==========================================================================
   Redix Digital: the pages of the services (website-building.html first;
   tools/build-service.js, service.js)
   In the design of the home page: v2.css draws the bar, the menu, the footer,
   the section titles, the questions, the voices and the form; v2.js flies the
   bird through the page's story. The bold moment is "ככה נבנה האתר שלכם": the
   four steps on the reading side, and a browser window on the open side that
   builds the site as each step reaches the middle of the screen (wireframe,
   design, code, live on a laptop and a phone). Around it everything is quiet,
   and the sections take turns between the sky and a band of deeper night.
   ========================================================================== */

.sv > section:not(.faq) {
  position: relative;
  padding: clamp(72px, 12vh, 140px) var(--pad);
}

.sv > section:not(.faq) > :not(.anchor) {
  position: relative;
  z-index: 3;
}

/* the place the calls to a first talk lead to, out of the grid of the end */
.sv-end > .anchor { position: absolute; top: 0; }

/* The bands of deeper night, every second section (tools/build-service.js marks them) */
.sv > .sv-band { background: var(--veil); }

/* --- The opening ---------------------------------------------------------------------------- */

.sv > .sv-top {
  min-height: min(88vh, 860px);
  display: grid;
  align-items: center;
  padding: calc(76px + clamp(40px, 10vh, 112px) - 50px) var(--pad) clamp(56px, 10vh, 112px);
}

.sv-head { max-width: 44rem; }
.sv-head .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }

.sv-title {
  margin: 0;
  font-size: clamp(2.75rem, 6vw, 6.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

.sv-title span { display: block; font-weight: 200; color: var(--title-thin); }

.sv-lead {
  max-width: 30em;
  margin: clamp(20px, 4vh, 36px) 0 0;
  padding-top: clamp(16px, 3vh, 26px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 300;
  color: var(--text-mid);
  text-wrap: pretty;
}

.sv-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 4.4vh, 40px);
}

/* --- The answer in one paragraph --------------------------------------------------------- */

.sv-brief { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 90px); align-items: start; }
.sv-brief .sec-title { font-size: clamp(2rem, 3.6vw, 3.75rem); }

.sv-brief__text {
  margin: 0;
  padding: clamp(22px, 3.4vh, 34px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(125, 240, 244, 0.22);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(26, 36, 71, 0.7), rgba(10, 16, 36, 0.7));
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.7;
  color: var(--text);
  text-wrap: pretty;
}

/* --- The site that builds itself ----------------------------------------------------------- */

/* the phone of the window waits outside its box until the last step: it never widens the page */
.sv-build { overflow-x: clip; }

.sv-build .sec-title { max-width: 14em; }

.sv-build__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 96px);
  margin-top: clamp(18px, 4vh, 40px);
}

.sv-steps { margin: 0; padding: 0; list-style: none; }

/* each step takes most of a screen, so the window holds it while it is read */
.sv-step {
  min-height: 72vh;
  display: grid;
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  opacity: 0.7;
  transition: opacity 500ms ease;
}

.sv-step.is-on,
html:not(.js) .sv-step { opacity: 1; }

.sv-step__n {
  grid-row: span 2;
  font-size: clamp(2.75rem, 4.4vw, 4.5rem);
  font-weight: 200;
  line-height: 0.9;
  color: var(--cyan-hi);
}

.sv-step h3 { margin: 0; font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 800; color: var(--text); }
.sv-step p { margin: 10px 0 0; max-width: 28em; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.6; color: var(--text-mid); text-wrap: pretty; }

.sv-build__view { position: relative; }

.sv-build__note {
  max-width: 40em;
  margin: clamp(10px, 2vh, 20px) 0 0;
  font-weight: 600;
  color: var(--text);
}

/* The window: it stays in the middle of the screen while the four steps pass beside it */
.dv {
  position: sticky;
  top: calc(50vh - min(29vw, 330px));
  width: 100%;
  max-width: 820px;
  margin-inline-start: auto;
  aspect-ratio: 16 / 11.6;
  --warm: #f6f1ea; --ink-warm: #2b2420; --sand: #d9cfc2; --rust: #c46a4a;
}

.dv, .dv * { text-shadow: none; }

.dv-frame {
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 16 / 10.4;
  overflow: hidden;
  border: 1px solid rgba(125, 240, 244, 0.3);
  border-radius: 16px;
  background: #0b1230;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), 0 0 70px rgba(0, 196, 204, 0.1);
  transform-origin: 50% 0;
  transition: transform 900ms var(--ease-expo), border-radius 900ms var(--ease-expo), border-color 600ms ease, box-shadow 600ms ease;
}

.dv-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  direction: ltr;
}

.dv-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #2a3563; }

.dv-url {
  flex: 1;
  height: 20px;
  margin-inline-start: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  color: var(--text-low);
}

.dv-lock {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: #3ddc84;
  opacity: 0;
  transition: opacity 400ms ease 400ms;
}

.dv-screen { position: absolute; inset: 34px 0 0; overflow: hidden; }

/* the made-up site, in two layers: its drawing and itself */
.dv-site,
.dv-wire {
  position: absolute;
  inset: 0;
  padding: 4.2% 5%;
  display: grid;
  grid-template-rows: 6% 1fr 24%;
  gap: 5%;
}

.dv-nav { display: flex; justify-content: space-between; align-items: center; }
.dv-logo { width: 17%; height: 52%; border-radius: 5px; }
.dv-links { display: flex; gap: 10px; width: 34%; height: 40%; }
.dv-links i { flex: 1; border-radius: 4px; }
.dv-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5%; min-height: 0; }
.dv-copy { display: grid; align-content: center; gap: 9%; }
.dv-h { font-style: normal; }
.dv-p { height: 7px; border-radius: 4px; width: 84%; }
.dv-p--short { width: 58%; }
.dv-btn { width: 38%; height: 26px; margin-top: 4%; border-radius: 8px; }
.dv-img { border-radius: 12px; }
.dv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.dv-cards i { border-radius: 10px; }

/* the site itself, warm against the night */
.dv-site { background: var(--warm); }
.dv-site .dv-logo { background: var(--ink-warm); }
.dv-site .dv-links i { background: #cfc4b6; }
.dv-site .dv-h { display: block; font-size: clamp(14px, 2.1vw, 24px); font-weight: 800; line-height: 1.08; color: var(--ink-warm); }
.dv-site .dv-p { background: var(--sand); }
.dv-site .dv-btn { background: var(--rust); }
.dv-site .dv-img { background: radial-gradient(60% 70% at 30% 35%, #f0c9a8, transparent 70%), linear-gradient(160deg, #b98a6a, #6d4d3d); }
.dv-site .dv-cards i { background: #fff; box-shadow: 0 6px 14px rgba(43, 36, 32, 0.12); }

/* its drawing: dashed lines of light on a grid */
.dv-wire {
  background-color: #0b1230;
  background-image: linear-gradient(rgba(125, 240, 244, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 240, 244, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.dv-wire :is(.dv-logo, .dv-links i, .dv-h, .dv-p, .dv-btn, .dv-img, .dv-cards i) { border: 1.5px dashed rgba(125, 240, 244, 0.7); }
.dv-wire .dv-h { display: block; height: 16px; border-radius: 5px; width: 92%; }
.dv-wire .dv-h--2 { width: 64%; }
.dv-wire .dv-img { position: relative; }
.dv-wire .dv-img::before,
.dv-wire .dv-img::after { content: ""; position: absolute; inset: 50% 10% auto; height: 1.5px; background: rgba(125, 240, 244, 0.4); transform: rotate(28deg); }
.dv-wire .dv-img::after { transform: rotate(-28deg); }

.dv-tag {
  position: absolute;
  padding: 2px 8px;
  border: 1px solid rgba(125, 240, 244, 0.45);
  border-radius: 7px;
  background: rgba(7, 11, 26, 0.86);
  font-size: clamp(10px, 0.9vw, 12px);
  color: var(--cyan-hi);
  white-space: nowrap;
}

.dv-tag--1 { top: 27%; right: 7%; }
.dv-tag--2 { top: 56%; right: 24%; }
.dv-tag--3 { top: 22%; left: 16%; }
.dv-tag--4 { bottom: 9%; left: 42%; }

/* the two corrections of the design, and their approval */
.dv-pin {
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(0, 196, 204, 0.25);
}

.dv-pin--1 { top: 30%; right: 47%; }
.dv-pin--2 { bottom: 22%; left: 28%; }

/* the code, written over the picture's half */
.dv-code {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  padding: 5% 5.5%;
  display: grid;
  align-content: start;
  gap: 4px;
  border-inline-end: 1px solid rgba(125, 240, 244, 0.3);
  background: #070b1a;
  direction: ltr;
  text-align: left;
  font: clamp(9px, 0.95vw, 12px) / 1.65 ui-monospace, Consolas, monospace;
  color: var(--text-mid);
}

.dv-ln { font-style: normal; white-space: nowrap; }
.dv-in { padding-left: 1.4em; }
.dv-ln b { font-weight: 400; color: var(--cyan-hi); }
.dv-ln s { text-decoration: none; color: #f0c9a8; }
.dv-ln em { font-style: normal; color: #5f6f99; }
.dv-ln u { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--cyan-hi); }

/* live: the laptop's base, the phone and the three lights */
.dv-base {
  position: absolute;
  top: 78.9%;
  left: 3%;
  right: 3%;
  height: 3.4%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#2a3563, #121939);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 500ms ease, transform 700ms var(--ease-expo);
}

.dv-phone {
  position: absolute;
  left: 3%;
  bottom: 0;
  width: 22%;
  aspect-ratio: 9 / 18.5;
  overflow: hidden;
  border: 5px solid #1a2244;
  border-radius: 20px;
  background: var(--warm);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-30px, 30px) rotate(-4deg);
  transition: opacity 600ms ease, transform 900ms var(--ease-expo);
}

.dv-phone__site { display: grid; grid-template-rows: 6% 34% auto 3% 3% 9%; gap: 4%; height: 100%; padding: 14% 9%; }
.dv-phone__site .dv-logo { width: 42%; height: auto; background: var(--ink-warm); border-radius: 3px; }
.dv-phone__site .dv-img { border-radius: 8px; background: radial-gradient(60% 70% at 30% 35%, #f0c9a8, transparent 70%), linear-gradient(160deg, #b98a6a, #6d4d3d); }
.dv-phone__site b { font-size: clamp(9px, 1vw, 13px); font-weight: 800; line-height: 1.1; color: var(--ink-warm); }
.dv-phone__site .dv-p { width: 100%; height: auto; background: var(--sand); }
.dv-phone__site .dv-btn { width: 70%; height: auto; margin: 0; border-radius: 6px; background: var(--rust); }

.dv-chips {
  position: absolute;
  top: 2%;
  left: -2%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.dv-chips li {
  padding: 7px 14px;
  border: 1px solid rgba(125, 240, 244, 0.45);
  border-radius: 999px;
  background: rgba(7, 11, 26, 0.88);
  font-size: clamp(12px, 1vw, 14px);
  color: var(--cyan-hi);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 400ms ease, transform 600ms var(--ease-expo);
}

.dv-chips li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: #3ddc84;
}

/* What each step shows. Between steps only opacity and transforms move. */
.dv-wire,
.dv-pin,
.dv-code { transition: opacity 600ms ease; }
.dv-wire :is(.dv-logo, .dv-links i, .dv-h, .dv-p, .dv-btn, .dv-img, .dv-cards i, .dv-tag) { transition: opacity 500ms ease, transform 700ms var(--ease-expo); }
.dv-site { transition: opacity 700ms ease; }

/* 1. the drawing */
.dv[data-stage="1"] .dv-site { opacity: 0; }
.dv:not([data-stage="1"]) .dv-wire { opacity: 0; }
.dv[data-stage="1"] .dv-wire > * :is(.dv-logo, .dv-links i, .dv-h, .dv-p, .dv-btn, .dv-cards i),
.dv[data-stage="1"] .dv-wire :is(.dv-img, .dv-tag) { animation: dv-draw 900ms var(--ease-expo) backwards; }
.dv[data-stage="1"] .dv-wire .dv-hero :is(.dv-h, .dv-img) { animation-delay: 150ms; }
.dv[data-stage="1"] .dv-wire :is(.dv-p, .dv-btn) { animation-delay: 300ms; }
.dv[data-stage="1"] .dv-wire .dv-cards i { animation-delay: 450ms; }
.dv[data-stage="1"] .dv-wire .dv-tag { animation-delay: 700ms; }

@keyframes dv-draw { from { opacity: 0; transform: scale(0.94); } }

/* 2. the design, with its two corrections, which turn into approvals */
.dv-pin { opacity: 0; }
.dv[data-stage="2"] .dv-pin { opacity: 1; animation: dv-pin 2.6s var(--ease-expo) 600ms both; }
.dv[data-stage="2"] .dv-pin--2 { animation-delay: 1000ms; }
@keyframes dv-pin {
  0% { opacity: 0; transform: scale(0.4); }
  20%, 60% { opacity: 1; transform: none; background: var(--cyan); }
  75%, 100% { opacity: 1; transform: none; background: #3ddc84; box-shadow: 0 0 0 5px rgba(61, 220, 132, 0.25); }
}

/* 3. the code, a line at a time */
.dv-code { opacity: 0; }
.dv[data-stage="3"] .dv-code { opacity: 1; }
.dv[data-stage="3"] .dv-ln { animation: dv-type 420ms steps(14) backwards; }
.dv[data-stage="3"] .dv-ln:nth-child(2) { animation-delay: 250ms; }
.dv[data-stage="3"] .dv-ln:nth-child(3) { animation-delay: 500ms; }
.dv[data-stage="3"] .dv-ln:nth-child(4) { animation-delay: 750ms; }
.dv[data-stage="3"] .dv-ln:nth-child(5) { animation-delay: 1000ms; }
.dv[data-stage="3"] .dv-ln:nth-child(6) { animation-delay: 1250ms; }
.dv[data-stage="3"] .dv-ln:nth-child(7) { animation-delay: 1500ms; }
.dv[data-stage="3"] .dv-ln u { animation: dv-blink 1s steps(2) infinite; }
@keyframes dv-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dv-blink { 50% { opacity: 0; } }
/* what the code turns on in the site: the button lifts and the cards come in */
.dv[data-stage="3"] .dv-site .dv-btn { animation: dv-lift 1.6s var(--ease-expo) 900ms both; }
.dv[data-stage="3"] .dv-site .dv-cards i { animation: dv-rise 900ms var(--ease-expo) 1300ms backwards; }
@keyframes dv-lift { 50% { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(196, 106, 74, 0.45); } }
@keyframes dv-rise { from { opacity: 0; transform: translateY(14px); } }

/* 4. live: the window becomes a laptop's screen, the phone comes in, the lights go on */
.dv[data-stage="4"] .dv-frame { transform: scale(0.88); border-radius: 12px 12px 4px 4px; border-color: #1a2244; box-shadow: 0 0 0 6px #1a2244, 0 28px 64px rgba(0, 0, 0, 0.5); }
.dv[data-stage="4"] .dv-lock { opacity: 1; }
.dv[data-stage="4"] .dv-base { opacity: 1; transform: none; }
.dv[data-stage="4"] .dv-phone { opacity: 1; transform: none; transition-delay: 200ms; }
.dv[data-stage="4"] .dv-chips li { opacity: 1; transform: none; }
.dv[data-stage="4"] .dv-chips li:nth-child(1) { transition-delay: 600ms; }
.dv[data-stage="4"] .dv-chips li:nth-child(2) { transition-delay: 800ms; }
.dv[data-stage="4"] .dv-chips li:nth-child(3) { transition-delay: 1000ms; }

/* The English page reads from the left: the made-up site, its drawing and the window mirror */
html[dir="ltr"] .dv-code { left: auto; right: 0; border-right: 0; border-left: 1px solid rgba(125, 240, 244, 0.3); }
html[dir="ltr"] .dv-tag--1 { right: auto; left: 7%; }
html[dir="ltr"] .dv-tag--2 { right: auto; left: 24%; }
html[dir="ltr"] .dv-tag--3 { left: auto; right: 16%; }
html[dir="ltr"] .dv-tag--4 { left: auto; right: 42%; }
html[dir="ltr"] .dv-pin--1 { right: auto; left: 47%; }
html[dir="ltr"] .dv-pin--2 { left: auto; right: 28%; }
html[dir="ltr"] .dv-phone { left: auto; right: 3%; transform: translate(30px, 30px) rotate(4deg); }
html[dir="ltr"] .dv-chips { left: auto; right: -2%; justify-items: end; }
html[dir="ltr"] .dv-chips li { transform: translateX(14px); }
html[dir="ltr"] .dv[data-stage="4"] :is(.dv-phone, .dv-chips li) { transform: none; }

/* --- When a landing page is the right thing (the landing pages) ------------------------------ */

.sv-uses__sub { max-width: 36em; margin-top: clamp(12px, 2vh, 20px); }

.sv-uses__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin: clamp(28px, 5vh, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.sv-use { padding-top: clamp(18px, 3vh, 26px); border-top: 1px solid var(--line); }

.sv-use__ic {
  display: block;
  width: 46px;
  height: 46px;
  padding: 11px;
  border: 1px solid rgba(125, 240, 244, 0.45);
  border-radius: 14px;
  background: rgba(0, 196, 204, 0.07);
  color: var(--cyan-hi);
}

.sv-use h3 { margin: 18px 0 0; font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); font-weight: 800; line-height: 1.25; color: var(--text); text-wrap: balance; }
.sv-use p { margin: 10px 0 0; line-height: 1.6; color: var(--text-mid); text-wrap: pretty; }

/* --- What can run by itself, by field (the AI tools) -------------------------------------------
   Four fields, three cases in each: what happens today, dim, and what happens by itself, lit. */

.sv-cases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(28px, 5vh, 52px) 0 0;
}

.sv-grp {
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(125, 240, 244, 0.16);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(20, 30, 64, 0.72), rgba(9, 14, 32, 0.6));
}

.sv-grp__h { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); font-weight: 800; line-height: 1.25; color: var(--text); }
.sv-grp__h .sv-use__ic { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 12px; }

.sv-grp__list { margin: 12px 0 0; padding: 0; list-style: none; }
.sv-case { padding: 16px 0 0; margin-top: 16px; border-top: 1px solid rgba(194, 205, 232, 0.12); }
.sv-case:first-child { margin-top: 4px; }
.sv-case h4 { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: var(--text); }
.sv-case p { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; line-height: 1.55; text-wrap: pretty; }
.sv-case__was { color: var(--text-mid); }
.sv-case__now { color: var(--text); }
.sv-case__k {
  flex: none;
  min-width: 3.4em;
  padding: 1px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-mid);
}
.sv-case__now .sv-case__k { background: rgba(0, 196, 204, 0.16); color: var(--cyan-hi); }

/* --- How it goes, in four short steps (the landing pages) ------------------------------------ */

.sv-proc__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin: clamp(28px, 5vh, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.sv-proc__item { position: relative; padding-top: 66px; }

/* the line that leads from one step to the next */
.sv-proc__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 22px;
  inset-inline: 56px calc(-1 * clamp(18px, 2.4vw, 36px) + 12px);
  height: 1px;
  background: linear-gradient(to left, rgba(125, 240, 244, 0.5), rgba(125, 240, 244, 0.12));
}

html[dir="ltr"] .sv-proc__item:not(:last-child)::before { background: linear-gradient(to right, rgba(125, 240, 244, 0.5), rgba(125, 240, 244, 0.12)); }

.sv-proc__n {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 240, 244, 0.55);
  border-radius: 50%;
  font-weight: 700;
  color: var(--cyan-hi);
}

.sv-proc__item h3 { margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 800; color: var(--text); }
.sv-proc__item p { margin: 10px 0 0; line-height: 1.6; color: var(--text-mid); text-wrap: pretty; }
.sv-proc__note { max-width: 40em; margin: clamp(24px, 4vh, 40px) 0 0; font-weight: 600; color: var(--text); }

/* --- One visit to a landing page (landing-pages.html) ----------------------------------------
   A made-up landing page of a ceramics workshop, in clay and sage, in a phone that stays in the
   middle of the screen while five moments of one visit pass beside it, as cards. Each moment
   scrolls the page in her phone to its part, lights it, dims the rest and names it in a callout
   beside the phone; her finger acts in the screen (service.js); a clock beside the phone counts her
   time in the page. At the fourth she fills the form and sends it and the thanks page comes in; at
   the fifth her phone steps back and the owner's comes forward, buzzing, with the enquiry on its
   locked screen. Everything in the screens is sized in parts of their width (cqw), so the page is
   the same picture on every screen; only opacity, transforms, clip-paths and paint move, except the
   answer that opens in the questions (a few pixels of layout inside the phone). */

.sv-build--phone .sv-build__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sv-build__sub { max-width: 40em; margin: 14px 0 0; }

/* after the visit: the price of all of it, and the call */
.sv-build__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(10px, 2vh, 20px); }
.sv-build__end .sv-build__note { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }

/* the moments, as cards; the one being read is lit */
.sv-build--phone .sv-step { grid-template-columns: minmax(0, 1fr); min-height: 70vh; opacity: 0.62; }   /* 0.62: the shaded cards keep a contrast of 5:1 (measured) */
.sv-build--phone .sv-step.is-on,
html:not(.js) .sv-build--phone .sv-step { opacity: 1; }

.sv-card {
  position: relative;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(125, 240, 244, 0.1);
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(22, 32, 66, 0.8), rgba(9, 14, 32, 0.68));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
  transition: border-color 500ms ease, box-shadow 500ms ease;
}
.sv-step.is-on .sv-card { border-color: rgba(125, 240, 244, 0.42); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 196, 204, 0.14); }

.sv-step__t {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(0, 196, 204, 0.12);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cyan-hi);
}
.sv-step__t i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sv-step.is-on .sv-step__t i { animation: sv-ping 1.6s ease-out infinite; }
@keyframes sv-ping { from { box-shadow: 0 0 0 0 rgba(125, 240, 244, 0.6); } to { box-shadow: 0 0 0 9px rgba(125, 240, 244, 0); } }

.sv-build--phone .sv-step h3 { margin-top: 16px; }
.sv-build--phone .sv-step p { max-width: none; }

/* what we build for that moment: they come in one by one as the card lights */
.sv-step__do { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.sv-step__do li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid rgba(125, 240, 244, 0.18);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.sv-step__do li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--cyan-hi);
  border-bottom: 2px solid var(--cyan-hi);
  transform: translateY(-2px) rotate(-45deg);
}
.js .sv-build--phone .sv-step__do li { opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 500ms var(--ease-expo); }
.js .sv-build--phone .sv-step:is(.is-on, .is-past) .sv-step__do li { opacity: 1; transform: none; }
.sv-step.is-on .sv-step__do li:nth-child(1) { transition-delay: 150ms; }
.sv-step.is-on .sv-step__do li:nth-child(2) { transition-delay: 240ms; }
.sv-step.is-on .sv-step__do li:nth-child(3) { transition-delay: 330ms; }

/* the rail beside the cards: a point of light goes down it with the reading */
.sv-build--phone .sv-steps::after {
  inset-inline-start: -40px;
  width: 14px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background:
    radial-gradient(circle at 50% calc(var(--fill, 0) * 100%), #fff 0 2px, var(--cyan-hi) 3px, rgba(0, 196, 204, 0.35) 4.5px, rgba(0, 196, 204, 0) 7px),
    linear-gradient(var(--cyan-hi), var(--cyan-hi)) 50% 0 / 2px calc(var(--fill, 0) * 100%) no-repeat;
}

/* --- the phones --- */

.lp {
  --pw: min(300px, calc(72vh * 0.46875));   /* the width of a phone; its screen is 9 by 19.2 */
  --paper: #f6f2ec; --ink: #2b2522; --mute: #74675d; --deep: #1f3d2b; --sage: #7f9c7b; --clay: #d9643f; --line-soft: #e4dbcf;
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  position: sticky;
  top: calc(50vh - var(--pw) * 1.0667 - 8px);
  display: grid;
  justify-items: center;
}

.lp, .lp * { text-shadow: none; }

/* a soft light in the night behind the phones */
.lp::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 196, 204, 0.18), transparent);
  pointer-events: none;
}

.lp-rig {
  position: relative;
  display: grid;
  width: var(--pw);
  perspective: 1600px;
  animation: lp-float 7s ease-in-out infinite alternate;
}
@keyframes lp-float { from { translate: 0 4px; } to { translate: 0 -8px; } }

.lp-phone,
.lp-own {
  grid-area: 1 / 1;
  position: relative;
  container-type: inline-size;
  border: 8px solid #141b38;
  border-radius: calc(var(--pw) * 0.16);
  background: #141b38;
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.28), 0 34px 70px rgba(0, 0, 0, 0.55), 0 0 90px rgba(0, 196, 204, 0.12);
  transition: transform 900ms var(--ease-io), opacity 500ms ease;
}

.lp-screen {
  position: relative;
  aspect-ratio: 9 / 19.2;
  overflow: hidden;
  border-radius: 12cqw;
  background: var(--paper);
  color: var(--ink);
  font-size: 3.6cqw;
  line-height: 1.4;
}
/* her phone dims when it steps back */
.lp-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; background: #070b1a; opacity: 0; pointer-events: none; transition: opacity 700ms ease; }

.lp-island { position: absolute; z-index: 7; top: 2.8cqw; left: 36cqw; width: 28cqw; height: 7.6cqw; border-radius: 4cqw; background: #141b38; }

/* the bar of the phone: the hour, the signal, the battery */
.lp-status {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  height: 13cqw;
  padding: 0.6cqw 8cqw 0 9cqw;
  direction: ltr;
  background: linear-gradient(var(--paper) 72%, rgba(246, 242, 236, 0));
  font-size: 3.6cqw;
  font-weight: 700;
}
.lp-status b { margin-right: auto; }
.lp-sig { display: flex; align-items: flex-end; gap: 0.5cqw; height: 2.6cqw; }
.lp-sig i { width: 0.9cqw; border-radius: 0.3cqw; background: currentColor; }
.lp-sig i:nth-child(1) { height: 35%; }
.lp-sig i:nth-child(2) { height: 55%; }
.lp-sig i:nth-child(3) { height: 78%; }
.lp-sig i:nth-child(4) { height: 100%; }
.lp-bat { position: relative; width: 5.8cqw; height: 2.8cqw; border: 0.45cqw solid currentColor; border-radius: 0.9cqw; opacity: 0.9; }
.lp-bat::before { content: ""; position: absolute; inset: 0.35cqw 1.4cqw 0.35cqw 0.35cqw; border-radius: 0.4cqw; background: currentColor; }

/* the page, which scrolls in the screen from part to part (service.js measures where) */
.lp-page {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 4.4cqw;
  padding: 15cqw 6.5cqw 10cqw;
  transition: transform 800ms var(--ease-io);
}

.lp-page > * {
  margin: 0;
  border-radius: 4cqw;
  outline: 0.7cqw solid transparent;
  outline-offset: 1.8cqw;
  transition: opacity 400ms ease, outline-color 300ms ease, box-shadow 400ms ease;
}

.lp-top { display: flex; justify-content: space-between; align-items: center; }
.lp-brand { display: flex; align-items: center; gap: 1.8cqw; font-size: 3.8cqw; font-weight: 800; color: var(--deep); }
.lp-brand i { width: 4.8cqw; height: 4.8cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ef9a76, var(--clay) 58%, #b84f2e); }
.lp-menu { width: 6cqw; height: 4.2cqw; background: linear-gradient(var(--ink) 0 0.9cqw, transparent 0.9cqw calc(50% - 0.45cqw), var(--ink) calc(50% - 0.45cqw) calc(50% + 0.45cqw), transparent calc(50% + 0.45cqw) calc(100% - 0.9cqw), var(--ink) calc(100% - 0.9cqw)); }

.lp-h { display: block; font-size: 7.4cqw; font-weight: 800; line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; }
.lp-sub { display: block; margin-top: 2.4cqw; font-size: 3.7cqw; line-height: 1.45; color: var(--mute); }

.lp-pic { display: block; height: 44cqw; overflow: hidden; border-radius: 5cqw; }
.lp-pic svg { display: block; width: 100%; height: 100%; }
/* the wheel turns */
.lp-spin { animation: lp-spin 1.3s linear infinite; }
.lp-spin--wheel { animation-duration: 1.6s; }
@keyframes lp-spin { to { stroke-dashoffset: -12.8; } }
.lp-spin--wheel { animation-name: lp-spin-wheel; }
@keyframes lp-spin-wheel { to { stroke-dashoffset: -20; } }

.lp-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: 12cqw;
  border-radius: 3.4cqw;
  background: var(--clay);
  box-shadow: 0 2cqw 4cqw rgba(217, 100, 63, 0.3);
  color: #fff;
  font-size: 4.4cqw;
  font-weight: 800;
}
/* a light passes over the button when the visit begins (by its background, in the direction of reading) */
.lp-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 58%) 0 0 / 300% 100% no-repeat; }
@keyframes lp-shine { to { background-position: 100% 0; } }
@keyframes lp-shine-ltr { from { background-position: 100% 0; } to { background-position: 0 0; } }

.lp-safe { display: block; margin-top: -2cqw; text-align: center; font-size: 3.2cqw; color: var(--mute); }

.lp-score { display: flex; align-items: center; gap: 2cqw; font-size: 3.3cqw; color: var(--mute); }
.lp-score b { font-size: 6.2cqw; font-weight: 800; line-height: 1; color: var(--ink); }
.lp-stars { display: flex; gap: 0.5cqw; }
.lp-stars svg { width: 4.2cqw; height: 4.2cqw; fill: #e2d6c6; transition: fill 250ms ease; }

.lp-proof { display: grid; gap: 2.4cqw; padding: 4.4cqw; background: #fff; box-shadow: 0 2cqw 5cqw rgba(60, 40, 20, 0.08); }
.lp-proof::before { content: "\201D"; height: 3.4cqw; font-size: 10cqw; font-weight: 800; line-height: 0.9; color: var(--clay); }
.lp-q { font-size: 3.6cqw; line-height: 1.45; }
.lp-who { display: flex; align-items: center; gap: 2cqw; font-size: 3.3cqw; font-weight: 700; }
.lp-who i { display: grid; place-items: center; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--sage); color: #fff; font-size: 3.2cqw; font-style: normal; }

.lp-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.lp-gal i { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3.4cqw; }
.lp-gal svg { display: block; width: 100%; height: 100%; }

.lp-faq { display: grid; gap: 2.2cqw; }
.lp-faq__h { margin-bottom: 0.6cqw; font-size: 4.6cqw; font-weight: 800; }
.lp-qa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 3cqw 3.6cqw; border-radius: 3.4cqw; background: #fff; font-size: 3.6cqw; font-weight: 700; }
.lp-qa::after { content: "+"; grid-row: 1; grid-column: 2; font-size: 4.8cqw; font-weight: 400; line-height: 1; color: var(--clay); transition: transform 300ms ease; }
.lp-ans { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-io); }
.lp-ans > span { overflow: hidden; font-size: 3.4cqw; font-weight: 500; line-height: 1.45; color: var(--mute); }
.lp-ans > span::before { content: ""; display: block; height: 2cqw; }

.lp-form { display: grid; gap: 2.8cqw; padding: 5cqw; background: #fff; box-shadow: 0 2cqw 6cqw rgba(60, 40, 20, 0.1); }
.lp-form > b { font-size: 4.8cqw; font-weight: 800; }
.lp-fld { display: flex; flex-direction: column; justify-content: center; height: 12.6cqw; padding-inline: 3.4cqw; border: 0.5cqw solid var(--line-soft); border-radius: 2.8cqw; }
.lp-fld small { font-size: 2.6cqw; line-height: 1.2; color: var(--mute); }
/* the letters come one by one, from where the writing starts */
.lp-fld em { align-self: flex-start; display: inline-block; font-size: 3.8cqw; font-style: normal; font-weight: 600; line-height: 1.3; clip-path: inset(0 0 0 100%); transition: clip-path 150ms ease; }
.lp-fld--tel em { direction: ltr; }
.lp-send { display: grid; place-items: center; height: 12cqw; border-radius: 3cqw; background: var(--clay); color: #fff; font-size: 4.2cqw; font-weight: 800; }

.lp-foot { display: grid; gap: 2cqw; padding-top: 4cqw; }
.lp-foot i { width: 40%; height: 2.2cqw; border-radius: 2cqw; background: var(--line-soft); }
.lp-foot i:last-child { width: 64%; }

/* the thanks page comes in as the next page */
.lp-thanks {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3.4cqw;
  padding: 12cqw;
  background: var(--paper);
  text-align: center;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 260ms ease, visibility 0s 260ms;
}
.lp-thanks b { font-size: 6.6cqw; font-weight: 800; line-height: 1.2; }
.lp-thanks span { font-size: 3.8cqw; line-height: 1.45; color: var(--mute); }
.lp-ok { width: 18cqw; height: 18cqw; padding: 4cqw; border-radius: 50%; background: var(--deep); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-ok path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 150ms ease; }

/* her finger: service.js moves it (it waits outside the screen) */
.lp-touch {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 11cqw;
  height: 11cqw;
  margin: -5.5cqw 0 0 -5.5cqw;
  border-radius: 50%;
  background: rgba(43, 37, 34, 0.2);
  box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.7), 0 1cqw 3cqw rgba(0, 0, 0, 0.16);
  opacity: 0;
  pointer-events: none;
}
.lp-touch > i { position: absolute; inset: 0; border: 0.5cqw solid rgba(217, 100, 63, 0.7); border-radius: 50%; opacity: 0; }

/* the owner's phone, locked, in the colours of the night */
.lp-own { z-index: 2; opacity: 0; transform: translateX(26%) rotateY(-14deg) scale(0.84); }
.lp-lock {
  position: relative;
  aspect-ratio: 9 / 19.2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 17cqw 5cqw 27cqw;
  border-radius: 12cqw;
  background:
    radial-gradient(130% 60% at 50% 0%, #24498a 0%, rgba(36, 73, 138, 0) 62%),
    radial-gradient(90% 55% at 80% 100%, rgba(0, 196, 204, 0.45), rgba(0, 196, 204, 0) 70%),
    radial-gradient(70% 40% at 10% 85%, rgba(98, 80, 210, 0.38), rgba(98, 80, 210, 0) 70%),
    #0a1026;
  color: #fff;
}
.lp-lock__day { font-size: 4.2cqw; font-weight: 600; opacity: 0.85; }
.lp-lock__time { direction: ltr; margin-top: 0.5cqw; font-size: 23cqw; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.lp-push {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8cqw 2cqw;
  margin-top: 7cqw;
  padding: 3.6cqw 4cqw;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5cqw;
  background: rgba(255, 255, 255, 0.17);
  text-align: start;
  opacity: 0;
  transform: translateY(-46cqw) scale(0.94);
  transition: opacity 300ms ease, transform 700ms var(--ease-drawer);
}
.lp-push--wa { margin-top: auto; }
.lp-push + .lp-push { margin-top: 2.6cqw; }
.lp-push__app { display: flex; align-items: center; gap: 1.6cqw; font-size: 3cqw; opacity: 0.85; }
.lp-push__app i { width: 4.2cqw; height: 4.2cqw; border-radius: 1.2cqw; background: #25d366; }
.lp-push--stat .lp-push__app i { background: linear-gradient(135deg, #4c8df6, #0a6cf0); }
.lp-push__when { font-size: 3cqw; opacity: 0.7; }
.lp-push b { grid-column: 1 / -1; font-size: 3.9cqw; font-weight: 700; }
.lp-push > span:last-child { grid-column: 1 / -1; font-size: 3.4cqw; line-height: 1.4; opacity: 0.88; }
.lp-roll { display: inline-grid; height: 1.4em; overflow: hidden; vertical-align: bottom; line-height: 1.4; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-roll i { font-style: normal; transition: transform 450ms var(--ease-out-strong); }
.lp-lock__btns { position: absolute; inset: auto 9cqw 9cqw; display: flex; justify-content: space-between; }
.lp-lock__btns i { width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.16) radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.3cqw, transparent 1.5cqw); }
.lp-lock__bar { position: absolute; bottom: 3cqw; left: 32%; width: 36%; height: 1.2cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.7); }

/* the rings of the buzz, round the owner's phone */
.lp-ring {
  grid-area: 1 / 1;
  z-index: 1;
  border: 2px solid rgba(37, 211, 102, 0.6);
  border-radius: calc(var(--pw) * 0.16);
  opacity: 0;
  transform: translateX(10%);
  pointer-events: none;
}

/* the callouts beside the phone, each on its part (service.js sets how high) */
.lp-co {
  position: absolute;
  z-index: 3;
  top: 0;
  right: calc(100% + 20px);
  width: max-content;
  max-width: 150px;
  padding: 7px 12px;
  border: 1px solid rgba(125, 240, 244, 0.38);
  border-radius: 12px;
  background: rgba(10, 18, 40, 0.88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  opacity: 0;
  transform: translate(-10px, -50%);
  transition: opacity 250ms ease, transform 250ms ease;
}
.lp-co::before,
.lp-co::after { content: ""; position: absolute; top: 50%; pointer-events: none; }
.lp-co::after { left: 100%; width: 24px; height: 1px; background: linear-gradient(90deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 250ms ease; }
.lp-co::before { left: calc(100% + 21px); width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 10px var(--cyan); opacity: 0; transition: opacity 200ms ease; }

/* the clock of her visit, beside the phone */
.lp-live {
  position: absolute;
  z-index: 3;
  top: 3%;
  left: calc(100% + 18px);
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(125, 240, 244, 0.22);
  border-radius: 99px;
  background: rgba(10, 18, 40, 0.84);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.lp-live > i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: lp-live 1.6s ease-out infinite; }
@keyframes lp-live { from { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); } to { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } }
.lp-live__on, .lp-live__done { grid-area: 1 / 2; transition: opacity 300ms ease; }
.lp-live__done { opacity: 0; }
.lp-clock { font-variant-numeric: tabular-nums; color: var(--cyan-hi); }
.lp-live { transition: translate 900ms var(--ease-io); }
.lp[data-stage="5"] .lp-live { translate: calc(var(--pw) * 0.1) 0; }
html[dir="ltr"] .lp[data-stage="5"] .lp-live { translate: calc(var(--pw) * -0.1) 0; }

.lp-cap {
  position: absolute;
  z-index: 3;
  bottom: -13px;
  left: 50%;
  translate: -50% 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;
  transition: opacity 300ms ease;
}

/* --- the five moments --- */

.lp[data-stage="2"] .lp-page { transform: translateY(var(--y2, -82cqw)); }
.lp[data-stage="3"] .lp-page { transform: translateY(var(--y3, -190cqw)); }
.lp:is([data-stage="4"], [data-stage="5"]) .lp-page { transform: translateY(var(--y4, -250cqw)); }

/* the part of the moment is lit, the rest of the page waits in the shade */
.lp[data-stage="1"] .lp-page > :not(.lp-on1),
.lp[data-stage="2"] .lp-page > :not(.lp-on2),
.lp[data-stage="3"] .lp-page > :not(.lp-on3),
.lp:is([data-stage="4"], [data-stage="5"]) .lp-page > :not(.lp-on4) { opacity: 0.32; }
.lp[data-stage="1"] .lp-on1.lp-mk,
.lp[data-stage="2"] .lp-on2.lp-mk,
.lp[data-stage="3"] .lp-on3.lp-mk,
.lp[data-stage="4"] .lp-on4.lp-mk { outline-color: var(--cyan); box-shadow: 0 0 0 2.5cqw rgba(0, 196, 204, 0.1); }

/* 1: she reads; a light passes over the button */
.lp.is-seen[data-stage="1"] .lp-cta::after { animation: lp-shine 1100ms ease 700ms both; }

/* 2: the stars of the reviews fill one by one */
.lp:not([data-stage="1"]) .lp-stars svg { fill: #e8a317; }
.lp[data-stage="2"] .lp-stars svg { animation: lp-pop 380ms var(--ease-out-strong) both; }
.lp[data-stage="2"] .lp-stars svg:nth-child(1) { transition-delay: 600ms; animation-delay: 600ms; }
.lp[data-stage="2"] .lp-stars svg:nth-child(2) { transition-delay: 690ms; animation-delay: 690ms; }
.lp[data-stage="2"] .lp-stars svg:nth-child(3) { transition-delay: 780ms; animation-delay: 780ms; }
.lp[data-stage="2"] .lp-stars svg:nth-child(4) { transition-delay: 870ms; animation-delay: 870ms; }
.lp[data-stage="2"] .lp-stars svg:nth-child(5) { transition-delay: 960ms; animation-delay: 960ms; }
@keyframes lp-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* 3: her finger opens the price */
.lp:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .lp-qa--open .lp-ans { grid-template-rows: 1fr; }
.lp:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .lp-qa--open::after { transform: rotate(45deg); }
.lp[data-stage="3"] .lp-qa--open .lp-ans,
.lp[data-stage="3"] .lp-qa--open::after { transition-delay: 720ms; }

/* 4: she fills the form and sends it; the thanks page comes in */
.lp[data-stage="4"] .lp-fld { animation: lp-focus 450ms ease 700ms both; }
.lp[data-stage="4"] .lp-fld--tel { animation-duration: 750ms; animation-delay: 1150ms; }
@keyframes lp-focus {
  0%, 100% { border-color: var(--line-soft); box-shadow: none; }
  10%, 90% { border-color: var(--clay); box-shadow: 0 0 0 0.9cqw rgba(217, 100, 63, 0.16); }
}
.lp:is([data-stage="4"], [data-stage="5"]) .lp-fld em { clip-path: inset(0); }
.lp[data-stage="4"] .lp-fld em { transition: clip-path 360ms steps(4, end) 800ms; }
.lp[data-stage="4"] .lp-fld--tel em { transition: clip-path 560ms steps(11, end) 1260ms; }
.lp[data-stage="4"] .lp-send { animation: lp-press 280ms var(--ease-out-strong) 1960ms; }
@keyframes lp-press { 50% { transform: scale(0.95); filter: brightness(0.88); } }
.lp:is([data-stage="4"], [data-stage="5"]) .lp-thanks { transform: none; visibility: visible; transition: transform 520ms var(--ease-drawer), visibility 0s; }
.lp[data-stage="4"] .lp-thanks { transition-delay: 2300ms; }
.lp:is([data-stage="4"], [data-stage="5"]) .lp-ok path { stroke-dashoffset: 0; }
.lp[data-stage="4"] .lp-ok path { transition: stroke-dashoffset 450ms var(--ease-out-strong) 2700ms; }

/* 5: her phone steps back, the owner's comes forward and buzzes, and the enquiry is on it */
.lp[data-stage="5"] .lp-phone { transform: translateX(-46%) rotateY(16deg) scale(0.78); }
.lp[data-stage="5"] .lp-screen::after { opacity: 0.28; }
.lp[data-stage="5"] .lp-own { opacity: 1; transform: translateX(10%); transition-delay: 120ms; animation: lp-buzz 420ms linear 1500ms 2; }
@keyframes lp-buzz { 0%, 100% { rotate: 0deg; } 15% { rotate: -2.2deg; } 35% { rotate: 2.2deg; } 55% { rotate: -1.5deg; } 75% { rotate: 1.5deg; } }
.lp[data-stage="5"] .lp-ring { animation: lp-ring 1000ms var(--ease-out-strong) 1500ms; }
.lp[data-stage="5"] .lp-ring--2 { animation-delay: 1800ms; }
@keyframes lp-ring { from { opacity: 0.75; scale: 1; } to { opacity: 0; scale: 1.16; } }
.lp[data-stage="5"] .lp-push { opacity: 1; transform: none; }
.lp[data-stage="5"] .lp-push--wa { transition-delay: 1200ms; }
.lp[data-stage="5"] .lp-push--stat { transition-delay: 2100ms; }
.lp[data-stage="5"] .lp-roll i { transform: translateY(-100%); transition-delay: 2700ms; }
.lp[data-stage="5"] .lp-live__on { opacity: 0; }
.lp[data-stage="5"] .lp-live__on { transition-delay: 1100ms; }
.lp[data-stage="5"] .lp-live__done { opacity: 1; transition-delay: 1200ms; }
.lp[data-stage="5"] .lp-live > i { animation: none; }

/* the callouts of each moment, after the page has moved */
.lp.is-seen[data-stage="1"] .lp-co[data-at="1"],
.lp[data-stage="2"] .lp-co[data-at="2"],
.lp[data-stage="3"] .lp-co[data-at="3"],
.lp[data-stage="4"] .lp-co--end { opacity: 1; transform: translate(0, -50%); transition: opacity 400ms ease 350ms, transform 600ms var(--ease-expo) 350ms; }
.lp.is-seen[data-stage="1"] .lp-co[data-at="1"]::after,
.lp[data-stage="2"] .lp-co[data-at="2"]::after,
.lp[data-stage="3"] .lp-co[data-at="3"]::after,
.lp[data-stage="4"] .lp-co--end::after { transform: none; transition: transform 450ms var(--ease-out-strong) 550ms; }
.lp.is-seen[data-stage="1"] .lp-co[data-at="1"]::before,
.lp[data-stage="2"] .lp-co[data-at="2"]::before,
.lp[data-stage="3"] .lp-co[data-at="3"]::before,
.lp[data-stage="4"] .lp-co--end::before { opacity: 1; transition: opacity 300ms ease 850ms; }
.lp.is-seen[data-stage="1"] .lp-co--late[data-at="1"],
.lp[data-stage="2"] .lp-co--late[data-at="2"] { transition-delay: 800ms, 800ms; }
.lp.is-seen[data-stage="1"] .lp-co--late[data-at="1"]::after,
.lp[data-stage="2"] .lp-co--late[data-at="2"]::after { transition-delay: 1000ms; }
.lp.is-seen[data-stage="1"] .lp-co--late[data-at="1"]::before,
.lp[data-stage="2"] .lp-co--late[data-at="2"]::before { transition-delay: 1300ms; }
.lp[data-stage="4"] .lp-co--end { transition-delay: 2750ms, 2750ms; }
.lp[data-stage="4"] .lp-co--end::after { transition-delay: 2950ms; }
.lp[data-stage="4"] .lp-co--end::before { transition-delay: 3250ms; }
/* "only two fields" stands while she fills them, and goes when the thanks page comes */
.lp[data-stage="4"] .lp-co[data-at="4"]:not(.lp-co--end) { animation: lp-co-for 2300ms ease both; }
.lp[data-stage="4"] .lp-co[data-at="4"]:not(.lp-co--end)::after { transform: none; }
.lp[data-stage="4"] .lp-co[data-at="4"]:not(.lp-co--end)::before { opacity: 1; }
@keyframes lp-co-for {
  0% { opacity: 0; transform: translate(-10px, -50%); }
  20%, 88% { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(0, -50%); }
}

/* the phone waits for service.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 .lp:not(.is-ready) { opacity: 0; animation: lp-show 0s linear 2.5s forwards; }
.lp.is-ready { transition: opacity 400ms ease; }
@keyframes lp-show { to { opacity: 1; } }
.lp.is-now, .lp.is-now *, .lp.is-now *::before, .lp.is-now *::after { transition: none !important; animation: none !important; }
/* coming back up from the owner's phone to the form (or opening the page there), the form is not filled again */
.lp.is-back[data-stage="4"] *, .lp.is-back[data-stage="4"] *::before, .lp.is-back[data-stage="4"] *::after { transition-delay: 0s !important; }
.lp.is-back[data-stage="4"] :is(.lp-fld, .lp-send, .lp-co) { animation: none !important; }

/* the loops rest while the section is off the screen */
.sv-build.is-off :is(.lp-rig, .lp-spin, .lp-live > i, .sv-step__t i) { animation-play-state: paused; }

/* left to right on the English page */
html[dir="ltr"] .lp-co { right: auto; left: calc(100% + 20px); transform: translate(10px, -50%); }
html[dir="ltr"] .lp[data-stage] .lp-co { transform: translate(10px, -50%); }
html[dir="ltr"] .lp.is-seen[data-stage="1"] .lp-co[data-at="1"],
html[dir="ltr"] .lp[data-stage="2"] .lp-co[data-at="2"],
html[dir="ltr"] .lp[data-stage="3"] .lp-co[data-at="3"],
html[dir="ltr"] .lp[data-stage="4"] .lp-co--end { transform: translate(0, -50%); }
html[dir="ltr"] .lp-co::after { left: auto; right: 100%; background: linear-gradient(270deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 100% 50%; }
html[dir="ltr"] .lp-co::before { left: auto; right: calc(100% + 21px); }
html[dir="ltr"] .lp-live { left: auto; right: calc(100% + 18px); }
html[dir="ltr"] .lp-fld em { clip-path: inset(0 100% 0 0); }
html[dir="ltr"] .lp:is([data-stage="4"], [data-stage="5"]) .lp-fld em { clip-path: inset(0); }
html[dir="ltr"] .lp-cta::after { background-position: 100% 0; }
html[dir="ltr"] .lp.is-seen[data-stage="1"] .lp-cta::after { animation-name: lp-shine-ltr; }
html[dir="ltr"] .lp-thanks { transform: translateX(100%); }
html[dir="ltr"] .lp:is([data-stage="4"], [data-stage="5"]) .lp-thanks { transform: none; }
html[dir="ltr"] .lp-own { transform: translateX(-26%) rotateY(14deg) scale(0.84); }
html[dir="ltr"] .lp[data-stage="5"] .lp-phone { transform: translateX(46%) rotateY(-16deg) scale(0.78); }
html[dir="ltr"] .lp[data-stage="5"] .lp-own { transform: translateX(-10%); }
html[dir="ltr"] .lp-ring { transform: translateX(-10%); }
@keyframes lp-co-for-ltr {
  0% { opacity: 0; transform: translate(10px, -50%); }
  20%, 88% { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(0, -50%); }
}
html[dir="ltr"] .lp[data-stage="4"] .lp-co[data-at="4"]:not(.lp-co--end) { animation-name: lp-co-for-ltr; }

/* --- One order in an online store (online-stores.html) ----------------------------------------
   A made-up shop of hand-poured candles, in cream and honey, in the shopper's phone; behind it,
   dimmed, the owner's laptop with the shop's admin. The stage stays in the middle of the screen
   while five moments of one order pass beside it, as cards. Each moment slides the next screen of
   the order into the phone (in the direction of reading), names its parts in callouts beside the
   phone and lets his finger act on it (service.js): he picks a scent and adds the candle to the
   cart, types a coupon and the total drops, chooses pickup, fills the payment and pays. At the
   fifth the phone steps aside and the laptop comes forward: the order slides into the list, the
   sales of the day count up, the invoice goes out and the owner's mail comes in under it.
   Everything is sized in parts of the stage's width (cqw), so it is one picture on every screen;
   only opacity, transforms, clip-paths and paint move, except the line of the coupon that opens
   in the cart (a few pixels of layout inside the phone). */

.sv-build--shop .sv-build__stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.so {
  --dir: 1;   /* the way the screens of the order go: from the left in Hebrew, from the right in English */
  --sw: min(620px, 100%, calc((100vh - 140px) / 0.86));
  --paper: #fbf6ee; --ink: #2b211b; --mute: #7a6a5a; --honey: #c9772f; --line-soft: #ece2d3; --sage: #4f7d4a; --sage-lo: #e4efe1;
  --adm: #f4f6fb; --adm-ink: #1c2238; --adm-low: #636c86; --adm-line: #e2e6f0; --up: #138a5a;
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  position: sticky;
  top: max(76px, calc(50vh - min(533px, 100vh - 140px) / 2));   /* the middle of the screen, for a stage of full width */
  display: grid;
  justify-items: center;
}
html[dir="ltr"] .so { --dir: -1; }
.so, .so * { text-shadow: none; }

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

/* the owner's laptop, behind (its screen is shaded until the last moment) */
.so-lap {
  position: absolute;
  z-index: 1;
  top: 14cqw;
  inset-inline-end: 0;
  width: 73cqw;
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-io);
}
html[dir="ltr"] .so-lap { transform-origin: 100% 50%; }
.so-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(--adm);
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.2), 0 5cqw 10cqw rgba(0, 0, 0, 0.5);
}
.so-lap__scr::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #070b1a; opacity: 0.58; pointer-events: none; transition: opacity 700ms ease; }
.so-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); }

/* the admin of the shop, in the laptop */
.so-adm { position: absolute; inset: 0; display: grid; grid-template-columns: 14.5cqw minmax(0, 1fr); color: var(--adm-ink); font-size: 1.55cqw; line-height: 1.3; }
.so-side { display: grid; align-content: start; gap: 1.2cqw; padding: 1.7cqw 1.5cqw; background: #1c2238; color: #c9cfe2; }
.so-side__brand { display: flex; align-items: center; gap: 0.8cqw; margin-bottom: 0.6cqw; font-size: 1.8cqw; font-weight: 800; color: #fff; }
.so-side__brand i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd38a, var(--honey)); }
.so-side .is-on { font-weight: 800; color: #fff; }
.so-main { position: relative; display: grid; align-content: start; gap: 1.4cqw; padding: 1.7cqw 2cqw; }
.so-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; }
.so-kpi { padding: 1.1cqw 1.3cqw; border: 1px solid var(--adm-line); border-radius: 1.3cqw; background: #fff; }
.so-kpi small { display: block; font-size: 1.3cqw; color: var(--adm-low); }
.so-kpi b { display: block; font-size: 2.6cqw; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; transition: color 400ms ease; }
.so-rows { overflow: hidden; border: 1px solid var(--adm-line); border-radius: 1.3cqw; background: #fff; }
.so-row { display: grid; grid-template-columns: 6cqw minmax(0, 1fr) 7.5cqw 9cqw; gap: 1cqw; align-items: center; height: 5.2cqw; padding: 0 1.4cqw; border-top: 1px solid var(--adm-line); }
.so-row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.so-row--h { height: 4cqw; border-top: 0; font-size: 1.3cqw; color: var(--adm-low); }
.so-rows__win { display: block; height: 15.6cqw; overflow: hidden; }
.so-rows__in { display: block; transform: translateY(-5.2cqw); transition: transform 700ms var(--ease-drawer); }
.so-row--new { border-inline-start: 0.5cqw solid var(--up); background: #eaf8f1; font-weight: 700; }
.so-st { justify-self: start; padding: 0.3cqw 1.1cqw; border-radius: 99px; background: #eef1f7; font-size: 1.25cqw; font-weight: 800; color: var(--adm-low); }
.so-st--pack { background: #fff1de; color: #a3560f; }
.so-toast {
  position: absolute;
  inset-inline-end: 2cqw;
  bottom: 2cqw;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 1.1cqw 1.8cqw;
  border-radius: 1.4cqw;
  background: #1c2238;
  box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.25);
  font-size: 1.5cqw;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(1.6cqw);
  transition: opacity 300ms ease, transform 600ms var(--ease-drawer);
}
.so-toast svg { width: 2cqw; height: 2cqw; fill: none; stroke: #5fe0a5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the shopper's phone, in front */
.so-ph {
  position: absolute;
  z-index: 2;
  top: 0;
  inset-inline-start: 2cqw;
  width: 36.6cqw;
  border: 1.2cqw solid #141b38;
  border-radius: 6cqw;
  background: #141b38;
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.28), 0 6cqw 12cqw rgba(0, 0, 0, 0.55), 0 0 14cqw rgba(0, 196, 204, 0.12);
  transform-origin: 100% 100%;
  transition: transform 900ms var(--ease-io);
}
html[dir="ltr"] .so-ph { transform-origin: 0 100%; }
.so-scr { position: relative; aspect-ratio: 9 / 19.2; overflow: hidden; border-radius: 4.8cqw; background: var(--paper); color: var(--ink); font-size: 1.85cqw; line-height: 1.35; }
.so-scr::after { content: ""; position: absolute; inset: 0; z-index: 8; background: #070b1a; opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
.so-island { position: absolute; z-index: 7; top: 1cqw; left: 50%; width: 9.6cqw; height: 2.7cqw; margin-left: -4.8cqw; border-radius: 1.4cqw; background: #141b38; }
.so-status { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; gap: 0.6cqw; height: 4.6cqw; padding: 0.2cqw 3cqw 0 3.3cqw; direction: ltr; background: linear-gradient(var(--paper) 72%, rgba(251, 246, 238, 0)); font-size: 1.3cqw; font-weight: 700; }
.so-status b { margin-right: auto; }
.so-sig { display: flex; align-items: flex-end; gap: 0.18cqw; height: 0.95cqw; }
.so-sig i { width: 0.32cqw; border-radius: 0.1cqw; background: currentColor; }
.so-sig i:nth-child(1) { height: 35%; } .so-sig i:nth-child(2) { height: 55%; } .so-sig i:nth-child(3) { height: 78%; } .so-sig i:nth-child(4) { height: 100%; }
.so-bat { position: relative; width: 2.1cqw; height: 1cqw; border: 0.17cqw solid currentColor; border-radius: 0.3cqw; }
.so-bat::before { content: ""; position: absolute; inset: 0.12cqw 0.5cqw 0.12cqw 0.12cqw; border-radius: 0.1cqw; background: currentColor; }

/* the screens of the order: the one of the moment is in, the ones before it have gone on, the
   ones after it wait at the side they come from */
.so-v {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 1.8cqw;
  padding: 6.4cqw 2.3cqw 2.2cqw;
  background: var(--paper);
  transform: translateX(calc(var(--dir) * -100%));
  visibility: hidden;
  transition: transform 640ms var(--ease-drawer), opacity 400ms ease, visibility 0s 640ms;
}
.so[data-stage="1"] .so-v1, .so[data-stage="2"] .so-v2, .so[data-stage="3"] .so-v3, .so[data-stage="4"] .so-v4, .so[data-stage="5"] .so-v5 { z-index: 1; transform: none; visibility: visible; transition: transform 640ms var(--ease-drawer), opacity 400ms ease, visibility 0s; }
.so[data-stage="2"] .so-v1,
.so[data-stage="3"] :is(.so-v1, .so-v2),
.so[data-stage="4"] :is(.so-v1, .so-v2, .so-v3),
.so[data-stage="5"] :is(.so-v1, .so-v2, .so-v3, .so-v4) { transform: translateX(calc(var(--dir) * 32%)); opacity: 0; }

.so-bar { display: flex; justify-content: space-between; align-items: center; }
.so-brand { font-size: 2.6cqw; font-weight: 800; line-height: 1.1; }
.so-brand small { display: block; font-size: 1.45cqw; font-weight: 500; color: var(--mute); }
.so-h { font-size: 2.55cqw; font-weight: 800; line-height: 1.2; }
.so-bag { position: relative; width: 3.6cqw; height: 3.6cqw; }
.so-bag svg { display: block; width: 100%; height: 100%; }
.so-count { position: absolute; top: -0.8cqw; inset-inline-end: -1.2cqw; display: grid; place-items: center; min-width: 2.4cqw; height: 2.4cqw; padding: 0 0.5cqw; border-radius: 1.2cqw; background: var(--honey); font-size: 1.45cqw; font-weight: 800; color: #fff; opacity: 0; transform: scale(0.4); transition: opacity 200ms ease, transform 420ms var(--ease-out-strong); }
.so-count.is-on { opacity: 1; transform: none; }

.so-art { position: relative; display: block; height: 25cqw; overflow: hidden; border-radius: 2.3cqw; background: radial-gradient(60% 70% at 50% 36%, #fff4dd, rgba(255, 244, 221, 0) 70%), linear-gradient(170deg, #efe2cf, #d9c5a8); }
.so-art svg { position: absolute; bottom: 1.2cqw; left: 50%; width: 17cqw; margin-left: -8.5cqw; }
.so-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: so-flicker 2.2s ease-in-out infinite alternate; }
.so-glow { animation: so-glow 2.2s ease-in-out infinite alternate; }
@keyframes so-flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(0.94, 1.06) rotate(1.5deg); } 100% { transform: scale(1.03, 0.95) rotate(-1deg); } }
@keyframes so-glow { from { opacity: 0.5; } to { opacity: 0.78; } }
.so-pinfo b { display: block; font-size: 2.6cqw; font-weight: 800; line-height: 1.15; }
.so-price { font-size: 2.8cqw; font-weight: 800; color: #a65e1f; }
.so-opt small { display: block; margin-bottom: 0.7cqw; font-size: 1.5cqw; font-weight: 700; color: var(--mute); }
.so-chips { display: flex; gap: 0.8cqw; }
.so-chip { padding: 0.65cqw 1.5cqw; border: 0.3cqw solid var(--line-soft); border-radius: 99px; background: #fff; font-size: 1.7cqw; font-weight: 700; transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease; }
.so-chip.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.so-btn { position: relative; display: grid; place-items: center; height: 5.6cqw; border-radius: 1.6cqw; background: var(--honey); box-shadow: 0 1cqw 2cqw rgba(201, 119, 47, 0.28); font-size: 2.05cqw; font-weight: 800; color: #fff; }
.so-btn > * { grid-area: 1 / 1; }

.so-box { padding: 1.4cqw 1.6cqw; border: 0.2cqw solid var(--line-soft); border-radius: 2cqw; background: #fff; }
.so-item { display: flex; align-items: center; gap: 1.3cqw; }
.so-item > b { font-size: 1.9cqw; }
.so-mini { display: grid; place-items: end center; flex: none; width: 5.6cqw; height: 6.3cqw; padding-bottom: 0.5cqw; border-radius: 1.3cqw; background: linear-gradient(170deg, #efe2cf, #d9c5a8); }
.so-mini svg { width: 4cqw; }
.so-it { flex: 1; min-width: 0; }
.so-it b { display: block; font-size: 1.85cqw; line-height: 1.2; }
.so-it small { display: block; font-size: 1.45cqw; color: var(--mute); }
.so-coupon { display: flex; gap: 1cqw; }
.so-fld { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; height: 6.2cqw; padding-inline: 1.6cqw; border: 0.3cqw solid var(--line-soft); border-radius: 1.4cqw; background: #fff; }
.so-fld small { font-size: 1.25cqw; line-height: 1.2; color: var(--mute); }
/* the letters come one by one, from where the writing starts */
.so-fld em { align-self: flex-start; display: inline-block; font-size: 1.8cqw; font-style: normal; font-weight: 700; line-height: 1.3; white-space: nowrap; clip-path: inset(0 0 0 100%); transition: clip-path 150ms ease; }
.so-fld em[dir="ltr"], html[dir="ltr"] .so-fld em { clip-path: inset(0 100% 0 0); }
.so-apply { display: grid; place-items: center; padding: 0 1.8cqw; border-radius: 1.4cqw; background: var(--ink); font-size: 1.7cqw; font-weight: 800; color: #fff; transition: background-color 300ms ease, color 300ms ease; }
.so-apply > span { grid-area: 1 / 1; transition: opacity 250ms ease; }
.so-apply > span + span { opacity: 0; }
.so-sum { display: grid; gap: 0.9cqw; }
.so-ln { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.75cqw; }
.so-tot { font-size: 2.15cqw; font-weight: 800; }
.so-tot b { font-variant-numeric: tabular-nums; }
.so-disc { display: grid; grid-template-rows: 0fr; margin-bottom: -0.9cqw; transition: grid-template-rows 500ms var(--ease-io), margin 500ms var(--ease-io); }
.so-disc > .so-ln { min-height: 0; overflow: hidden; font-weight: 700; color: var(--sage); }
.so-goal { display: grid; gap: 0.8cqw; font-size: 1.5cqw; font-weight: 700; color: var(--mute); }
.so-goal i { display: block; height: 0.9cqw; overflow: hidden; border-radius: 1cqw; background: var(--line-soft); }
.so-goal b { display: block; width: 32%; height: 100%; border-radius: inherit; background: var(--honey); }

.so-ship { display: flex; align-items: center; gap: 1.3cqw; transition: border-color 250ms ease, box-shadow 250ms ease; }
.so-ship > b { font-size: 1.9cqw; }
.so-radio { flex: none; width: 2.3cqw; height: 2.3cqw; border: 0.3cqw solid #b9ab99; border-radius: 50%; transition: border-width 250ms ease, border-color 250ms ease; }
.so-ship--home { border-color: var(--ink); box-shadow: 0 0 0 0.2cqw var(--ink); }
.so-ship--home .so-radio { border-width: 0.75cqw; border-color: var(--ink); }
.so-free { color: var(--sage); }
.so-swap { display: inline-grid; }
.so-swap > span { grid-area: 1 / 1; transition: opacity 300ms ease; }
.so-swap > span + span { opacity: 0; }

.so-tabs { display: flex; gap: 0.8cqw; }
.so-tabs span { flex: 1; padding: 1cqw 0; border: 0.3cqw solid var(--line-soft); border-radius: 1.3cqw; background: #fff; text-align: center; font-size: 1.65cqw; font-weight: 800; }
.so-tabs .is-on { border-color: var(--ink); }
.so-safe { display: flex; align-items: flex-start; gap: 1cqw; font-size: 1.4cqw; line-height: 1.35; color: var(--mute); }
.so-safe svg { flex: none; width: 2cqw; height: 2cqw; fill: none; stroke: var(--sage); stroke-width: 2.2; }
.so-pay { overflow: hidden; transition: background-color 300ms ease; }
.so-pay__t { transition: opacity 200ms ease; }
.so-spin { width: 2.6cqw; height: 2.6cqw; border: 0.4cqw solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; opacity: 0; }
.so-pay__ok { opacity: 0; transition: opacity 200ms ease; }
.so-pay__ok svg, .so-ok svg { display: block; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.so-pay__ok svg { width: 3cqw; height: 3cqw; }

.so-v5 { place-content: center; justify-items: center; gap: 1.2cqw; padding: 8cqw 4cqw; text-align: center; }
.so-ok { display: grid; place-items: center; width: 9cqw; height: 9cqw; margin-bottom: 0.8cqw; border-radius: 50%; background: var(--sage); }
.so-ok svg { width: 5cqw; height: 5cqw; }
.so-ok path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 150ms ease; }
.so-v5 b { font-size: 2.9cqw; font-weight: 800; }
.so-v5 > span:not(.so-ok) { font-size: 1.75cqw; color: var(--mute); }

/* his finger: service.js moves it (it waits outside the screen) */
.so-touch { position: absolute; z-index: 5; top: 0; left: 0; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; background: rgba(43, 33, 27, 0.22); box-shadow: inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.75), 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.16); opacity: 0; pointer-events: none; }
.so-touch > i { position: absolute; inset: 0; border: 0.2cqw solid rgba(201, 119, 47, 0.75); border-radius: 50%; opacity: 0; }

/* the owner's mail, under the laptop at the last moment */
.so-mail {
  position: absolute;
  z-index: 5;
  top: 71cqw;
  inset-inline-end: 7cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4cqw 1cqw;
  width: 46cqw;
  padding: 1.6cqw 2cqw;
  border: 1px solid rgba(125, 240, 244, 0.4);
  border-radius: 2.4cqw;
  background: rgba(20, 28, 58, 0.96);
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, 0.5);
  font-size: 1.75cqw;
  color: var(--text);
  opacity: 0;
  transform: translateY(3cqw);
  transition: opacity 300ms ease, transform 700ms var(--ease-drawer);
}
.so-mail__app { display: flex; align-items: center; gap: 0.8cqw; font-size: 1.5cqw; color: var(--text-mid); }
.so-mail__app i { width: 2cqw; height: 2cqw; border-radius: 0.6cqw; background: linear-gradient(135deg, #4c8df6, #0a6cf0); }
.so-mail__when { font-size: 1.5cqw; color: var(--text-mid); }
.so-mail b { grid-column: 1 / -1; font-size: 2cqw; }
.so-mail > span:last-child { grid-column: 1 / -1; font-size: 1.6cqw; color: var(--text-mid); }

/* the callouts beside the phone, on the laptop's side, each on its part (service.js sets how high) */
.so-co {
  --d: 0ms;
  position: absolute;
  z-index: 6;
  top: 0;
  inset-inline-start: calc(38.6cqw + 24px);
  width: max-content;
  max-width: 30cqw;
  padding: 7px 12px;
  border: 1px solid rgba(125, 240, 244, 0.38);
  border-radius: 12px;
  background: rgba(10, 18, 40, 0.92);
  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: translate(calc(var(--dir) * -10px), -50%);
  transition: opacity 250ms ease, transform 250ms ease;
}
.so-co::before,
.so-co::after { content: ""; position: absolute; top: 50%; pointer-events: none; }
.so-co::after { inset-inline-start: -24px; width: 22px; height: 1px; background: linear-gradient(270deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 250ms ease; }
html[dir="ltr"] .so-co::after { background: linear-gradient(90deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 100% 50%; }
.so-co::before { inset-inline-start: -27px; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 10px var(--cyan); opacity: 0; transition: opacity 200ms ease; }
.so-co[data-at="1"] { --d: 600ms; } .so-co--late[data-at="1"] { --d: 1250ms; } .so-co--last[data-at="1"] { --d: 2000ms; }
.so-co[data-at="2"] { --d: 700ms; } .so-co--late[data-at="2"] { --d: 2000ms; }
.so-co[data-at="3"] { --d: 600ms; } .so-co--late[data-at="3"] { --d: 1500ms; }
.so-co[data-at="4"] { --d: 2000ms; } .so-co--late[data-at="4"] { --d: 2500ms; }
.so.is-seen[data-stage="1"] .so-co[data-at="1"],
.so[data-stage="2"] .so-co[data-at="2"],
.so[data-stage="3"] .so-co[data-at="3"],
.so[data-stage="4"] .so-co[data-at="4"] { opacity: 1; transform: translate(0, -50%); transition: opacity 400ms ease var(--d), transform 600ms var(--ease-expo) var(--d); }
.so.is-seen[data-stage="1"] .so-co[data-at="1"]::after,
.so[data-stage="2"] .so-co[data-at="2"]::after,
.so[data-stage="3"] .so-co[data-at="3"]::after,
.so[data-stage="4"] .so-co[data-at="4"]::after { transform: none; transition: transform 450ms var(--ease-out-strong) calc(var(--d) + 200ms); }
.so.is-seen[data-stage="1"] .so-co[data-at="1"]::before,
.so[data-stage="2"] .so-co[data-at="2"]::before,
.so[data-stage="3"] .so-co[data-at="3"]::before,
.so[data-stage="4"] .so-co[data-at="4"]::before { opacity: 1; transition: opacity 300ms ease calc(var(--d) + 500ms); }

.so-cap {
  position: absolute;
  z-index: 3;
  top: 77cqw;
  inset-inline-start: 20.3cqw;
  translate: calc(var(--dir) * 50%) 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;
  transition: opacity 300ms ease;
}

/* --- the five moments of the order --- */

@keyframes so-press { 50% { transform: scale(0.95); filter: brightness(0.9); } }
@keyframes so-focus {
  0%, 100% { border-color: var(--line-soft); box-shadow: none; }
  10%, 90% { border-color: var(--honey); box-shadow: 0 0 0 0.5cqw rgba(201, 119, 47, 0.16); }
}

/* 1: he picks lavender and adds the candle to the cart; the bag counts it */
.so.is-seen .so-chip--pick,
.so:not([data-stage="1"]) .so-chip--pick { border-color: var(--ink); background: var(--ink); color: #fff; }
.so.is-seen[data-stage="1"] .so-chip--pick { transition-delay: 1050ms; }
.so.is-seen[data-stage="1"] .so-add { animation: so-press 300ms var(--ease-out-strong) 1700ms; }
.so.is-seen .so-v1 .so-count,
.so:not([data-stage="1"]) .so-v1 .so-count { opacity: 1; transform: none; }
.so.is-seen[data-stage="1"] .so-v1 .so-count { transition-delay: 1900ms; }

/* 2: he types the coupon and applies it: its line opens and the total drops (service.js counts it) */
.so:not([data-stage="1"]) .so-fld--code em { clip-path: inset(0); }
.so[data-stage="2"] .so-fld--code { animation: so-focus 900ms ease 700ms both; }
.so[data-stage="2"] .so-fld--code em { transition: clip-path 640ms steps(9, end) 850ms; }
.so[data-stage="2"] .so-apply { animation: so-press 300ms var(--ease-out-strong) 1550ms; }
.so:not([data-stage="1"]) .so-apply { background: var(--sage-lo); color: #2f5a2b; }
.so:not([data-stage="1"]) .so-apply > span:first-child { opacity: 0; }
.so:not([data-stage="1"]) .so-apply > span + span { opacity: 1; }
.so[data-stage="2"] :is(.so-apply, .so-apply > span) { transition-delay: 1650ms; }
.so:not([data-stage="1"]) .so-disc { grid-template-rows: 1fr; margin-bottom: 0; }
.so[data-stage="2"] .so-disc { transition-delay: 1750ms; }

/* 3: the delivery goes from home to pickup, and its price from 30 to nothing */
.so:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .so-ship--home { border-color: var(--line-soft); box-shadow: none; }
.so:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .so-ship--home .so-radio { border-width: 0.3cqw; border-color: #b9ab99; }
.so:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .so-ship--pick { border-color: var(--ink); box-shadow: 0 0 0 0.2cqw var(--ink); }
.so:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .so-ship--pick .so-radio { border-width: 0.75cqw; border-color: var(--ink); }
.so:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .so-swap > span:first-child { opacity: 0; }
.so:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .so-swap > span + span { opacity: 1; }
.so[data-stage="3"] :is(.so-ship, .so-radio) { transition-delay: 1100ms; }
.so[data-stage="3"] .so-swap > span { transition-delay: 1200ms; }

/* 4: he fills his name, his phone and the card, and pays: the button turns, then it is paid */
.so:is([data-stage="4"], [data-stage="5"]) .so-v4 .so-fld em { clip-path: inset(0); }
.so[data-stage="4"] .so-fld--name { animation: so-focus 700ms ease 700ms both; }
.so[data-stage="4"] .so-fld--name em { transition: clip-path 420ms steps(7, end) 800ms; }
.so[data-stage="4"] .so-fld--tel { animation: so-focus 800ms ease 1300ms both; }
.so[data-stage="4"] .so-fld--tel em { transition: clip-path 560ms steps(11, end) 1380ms; }
.so[data-stage="4"] .so-fld--card { animation: so-focus 800ms ease 1950ms both; }
.so[data-stage="4"] .so-fld--card em { transition: clip-path 560ms steps(8, end) 2030ms; }
.so[data-stage="4"] .so-pay { animation: so-press 300ms var(--ease-out-strong) 2700ms; }
.so:is([data-stage="4"], [data-stage="5"]) .so-pay { background: var(--sage); box-shadow: 0 1cqw 2cqw rgba(79, 125, 74, 0.3); }
.so:is([data-stage="4"], [data-stage="5"]) .so-pay__t { opacity: 0; }
.so:is([data-stage="4"], [data-stage="5"]) .so-pay__ok { opacity: 1; }
.so[data-stage="4"] .so-pay__t { transition-delay: 2800ms; }
.so[data-stage="4"] .so-pay { transition-delay: 3450ms; }
.so[data-stage="4"] .so-pay__ok { transition-delay: 3450ms; }
.so[data-stage="4"] .so-spin { animation: so-spinner 650ms linear 2800ms forwards; }
@keyframes so-spinner { from { opacity: 1; transform: rotate(0deg); } 90% { opacity: 1; } to { opacity: 0; transform: rotate(320deg); } }

/* 5: the phone steps aside and the laptop comes forward: the order comes into the list, the sales
   of the day count up (service.js), the invoice goes out and the mail comes in */
.so[data-stage="5"] .so-ph { transform: scale(0.62); transition-delay: 150ms; }
.so[data-stage="5"] .so-scr::after { opacity: 0.12; transition-delay: 900ms; }
.so-ok path { transition-delay: 0s; }
.so[data-stage="5"] .so-ok path { stroke-dashoffset: 0; transition: stroke-dashoffset 450ms var(--ease-out-strong) 600ms; }
.so[data-stage="5"] .so-lap { z-index: 3; transform: scale(1.08); transition-delay: 250ms; }
.so[data-stage="5"] .so-lap__scr::after { opacity: 0; transition-delay: 300ms; }
.so[data-stage="5"] .so-rows__in { transform: none; transition-delay: 1300ms; }
.so[data-stage="5"] .so-row--new { animation: so-new 1400ms ease 1300ms both; }
@keyframes so-new { from { background-color: #b8ecd3; } to { background-color: #eaf8f1; } }
.so-kpi--up b { color: var(--adm-ink); }
.so[data-stage="5"] .so-kpi--up b { color: var(--up); transition-delay: 1600ms; }
.so[data-stage="5"] .so-toast { opacity: 1; transform: none; transition-delay: 2200ms; }
.so[data-stage="5"] .so-mail { opacity: 1; transform: none; transition-delay: 2600ms; }
.so[data-stage="5"] .so-cap { opacity: 0; }

/* the stage waits for service.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 .so:not(.is-ready) .so-rig { opacity: 0; animation: lp-show 0s linear 2.5s forwards; }
.so.is-ready .so-rig { transition: opacity 400ms ease; }
.so.is-now, .so.is-now *, .so.is-now *::before, .so.is-now *::after { transition: none !important; animation: none !important; }
/* coming back up the moments (or opening the page in the middle of them), a moment shows as it
   ends, without acting it again */
.so.is-back *, .so.is-back *::before, .so.is-back *::after { transition-delay: 0s !important; }
.so.is-back :is(.so-add, .so-fld, .so-apply, .so-pay, .so-spin, .so-row--new) { animation: none !important; }

/* the loops rest while the section is off the screen */
.sv-build.is-off :is(.so-rig, .so-flame, .so-glow) { animation-play-state: paused; }

/* --- One enquiry, from the night to the morning (ai-automation.html) ----------------------------
   A made-up pilates studio, in cream, sage and clay: Michal's phone in front, with the studio's
   chat, and behind it, dimmed, the studio's CRM on a laptop. The stage stays in the middle of the
   screen while five moments pass beside it, as cards. 1: she asks at night; the chat types and
   answers at once, word by word. 2: it offers the free hours, her finger picks Thursday, she gives
   her name and gets a confirmation; the chat scrolls as the messages come (service.js measures
   how far). 3: a point of light carries the enquiry to the laptop, which comes forward; her card
   slides into "נקבע ניסיון" with a summary of the talk, and the counts go up. 4: the owner's
   locked phone rises with the night's summary and the reminder that will go out. 5: after the
   class Michal's phone gets the follow-up mail, which opens from the top, and a line under the
   stage says what goes out next if she does not sign up. Sized in parts of the stage's width
   (cqw), so it is one picture on every screen; only opacity, transforms, clip-paths and paint
   move. The chat is drawn in the studio's colours, not in any messaging app's. */

.sv-build--ai .sv-build__stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.ai {
  --dir: 1;   /* the side things come from: the right in Hebrew, the left in English */
  --sw: min(620px, 100%, calc((100vh - 140px) / 0.86));
  --paper: #f1eee8; --ink: #22302a; --mute: #5d6862; --sage: #5f7f6a; --sage-lo: #e3ebe2; --clay: #c97b5a; --head: #2b2724; --line-soft: #e4ded3;
  --adm: #f4f6fb; --adm-ink: #1c2238; --adm-low: #636c86; --adm-line: #e2e6f0; --up: #138a5a;
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  position: sticky;
  top: max(76px, calc(50vh - min(533px, 100vh - 140px) / 2));   /* the middle of the screen, for a stage of full width */
  display: grid;
  justify-items: center;
}
html[dir="ltr"] .ai { --dir: -1; }
.ai, .ai * { text-shadow: none; }

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

/* the studio's laptop, behind (its screen is shaded until the third moment) */
.ai-lap {
  position: absolute;
  z-index: 1;
  top: 14cqw;
  inset-inline-end: 0;
  width: 73cqw;
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-io);
}
html[dir="ltr"] .ai-lap { transform-origin: 100% 50%; }
.ai-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(--adm);
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.2), 0 5cqw 10cqw rgba(0, 0, 0, 0.5);
}
.ai-lap__scr::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #070b1a; opacity: 0.58; pointer-events: none; transition: opacity 700ms ease; }
.ai-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); }

/* the CRM: three stages of an enquiry, as columns of cards */
.ai-crm { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); color: var(--adm-ink); font-size: 1.5cqw; line-height: 1.3; }
.ai-crm__top { display: flex; justify-content: space-between; align-items: center; height: 4.6cqw; padding: 0 2cqw; background: #1c2238; font-size: 1.35cqw; color: #c9cfe2; }
.ai-crm__top b { display: flex; align-items: center; gap: 0.8cqw; font-size: 1.7cqw; font-weight: 800; color: #fff; }
.ai-crm__top b i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #b9d3bf, var(--sage)); }
.ai-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; min-height: 0; padding: 1.4cqw 1.6cqw; }
.ai-col { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.9cqw; min-height: 0; padding: 1cqw; border-radius: 1.4cqw; background: #e9edf5; }
.ai-col__h { display: flex; justify-content: space-between; align-items: center; font-size: 1.3cqw; font-weight: 800; color: var(--adm-low); }
.ai-col__h > span { padding: 0 0.9cqw; border-radius: 99px; background: #fff; color: var(--adm-ink); }
.ai-col__win { min-height: 0; overflow: hidden; }
.ai-col__list { display: grid; gap: 0.9cqw; }
/* the new card waits above the column until it slides in at the third moment */
.ai-col--new .ai-col__list { transform: translateY(-13.1cqw); transition: transform 700ms var(--ease-drawer); }
.ai-card { display: grid; align-content: center; gap: 0.25cqw; height: 7.6cqw; overflow: hidden; padding: 0 1.2cqw; border: 1px solid var(--adm-line); border-radius: 1.1cqw; background: #fff; }
.ai-card b { font-size: 1.55cqw; font-weight: 800; }
.ai-card small { font-size: 1.25cqw; color: var(--adm-low); }
.ai-src { justify-self: start; padding: 0.1cqw 0.8cqw; border-radius: 99px; background: #eef1f7; font-size: 1.1cqw; font-weight: 700; color: var(--adm-low); }
.ai-card--new { height: 12.2cqw; border-color: var(--up); background: #f0fbf6; box-shadow: 0 0 0 0.3cqw rgba(19, 138, 90, 0.15); }
.ai-card--new .ai-src { background: #dcf3e8; color: #0f6b46; }
.ai-sum { margin-top: 0.35cqw; padding-top: 0.45cqw; border-top: 1px dashed #c9d6cf; font-size: 1.15cqw; line-height: 1.3; color: #3c4560; }
.ai-toast {
  position: absolute;
  inset-inline-end: 2cqw;
  bottom: 2cqw;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 1.1cqw 1.8cqw;
  border-radius: 1.4cqw;
  background: #1c2238;
  box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.25);
  font-size: 1.45cqw;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(1.6cqw);
  transition: opacity 300ms ease, transform 600ms var(--ease-drawer);
}
.ai-toast svg { width: 2cqw; height: 2cqw; fill: none; stroke: #5fe0a5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* a number that rolls to the next one */
.ai-roll { display: inline-grid; height: 1.3em; overflow: hidden; vertical-align: bottom; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ai-roll i { font-style: normal; transition: transform 450ms var(--ease-out-strong); }

/* Michal's phone, in front */
.ai-ph {
  position: absolute;
  z-index: 2;
  top: 0;
  inset-inline-start: 2cqw;
  width: 36.6cqw;
  border: 1.2cqw solid #141b38;
  border-radius: 6cqw;
  background: #141b38;
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.28), 0 6cqw 12cqw rgba(0, 0, 0, 0.55), 0 0 14cqw rgba(0, 196, 204, 0.12);
  transform-origin: 100% 100%;
  transition: transform 900ms var(--ease-io), opacity 600ms ease;
}
html[dir="ltr"] .ai-ph { transform-origin: 0 100%; }
.ai-scr { position: relative; aspect-ratio: 9 / 19.2; overflow: hidden; border-radius: 4.8cqw; background: var(--paper); color: var(--ink); font-size: 1.7cqw; line-height: 1.38; }
.ai-scr::after { content: ""; position: absolute; inset: 0; z-index: 8; background: #070b1a; opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
.ai-island { position: absolute; z-index: 7; top: 1cqw; left: 50%; width: 9.6cqw; height: 2.7cqw; margin-left: -4.8cqw; border-radius: 1.4cqw; background: #141b38; }
.ai-status { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; gap: 0.6cqw; height: 4.6cqw; padding: 0.2cqw 3cqw 0 3.3cqw; direction: ltr; font-size: 1.3cqw; font-weight: 700; color: #fff; transition: color 400ms ease; }
.ai-clock { display: grid; margin-right: auto; }
.ai-clock b { grid-area: 1 / 1; opacity: 0; transition: opacity 300ms ease; }
.ai-sig { display: flex; align-items: flex-end; gap: 0.18cqw; height: 0.95cqw; }
.ai-sig i { width: 0.32cqw; border-radius: 0.1cqw; background: currentColor; }
.ai-sig i:nth-child(1) { height: 35%; } .ai-sig i:nth-child(2) { height: 55%; } .ai-sig i:nth-child(3) { height: 78%; } .ai-sig i:nth-child(4) { height: 100%; }
.ai-bat { position: relative; width: 2.1cqw; height: 1cqw; border: 0.17cqw solid currentColor; border-radius: 0.3cqw; }
.ai-bat::before { content: ""; position: absolute; inset: 0.12cqw 0.5cqw 0.12cqw 0.12cqw; border-radius: 0.1cqw; background: currentColor; }

.ai-v { position: absolute; inset: 0; }

/* the chat */
.ai-v1 { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--paper); }
.ai-head { display: flex; align-items: center; gap: 1.2cqw; padding: 5.2cqw 2.2cqw 1.3cqw; background: var(--head); color: #fff; }
.ai-av { display: grid; place-items: center; flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--sage); font-size: 1.9cqw; font-weight: 800; }
.ai-who { display: grid; }
.ai-who b { font-size: 1.8cqw; font-weight: 800; line-height: 1.2; }
.ai-sub { display: grid; font-size: 1.3cqw; color: #d6cdc2; }
.ai-sub > span { grid-area: 1 / 1; }
.ai-sub > span + span { opacity: 0; color: #b7e0c4; }
.ai-msgs { position: relative; min-height: 0; overflow: hidden; }
.ai-list {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.2cqw;
  padding: 1.8cqw;
  transform: translateY(var(--y1, 0px));
  transition: transform 600ms var(--ease-io);
}
.ai-day { justify-self: center; padding: 0.3cqw 1.4cqw; border-radius: 99px; background: rgba(43, 39, 36, 0.08); font-size: 1.15cqw; font-weight: 700; color: var(--mute); }
.ai-m { display: grid; max-width: 80%; padding: 1.1cqw 1.5cqw 0.8cqw; border-radius: 2cqw; box-shadow: 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.07); }
.ai-m small { justify-self: end; display: flex; align-items: center; gap: 0.4cqw; margin-top: 0.2cqw; direction: ltr; font-size: 1.1cqw; color: #79837c; }
.ai-in { justify-self: start; background: #fff; border-start-start-radius: 0.6cqw; }
.ai-out { justify-self: end; background: var(--sage-lo); border-start-end-radius: 0.6cqw; }
.ai-name { font-size: 1.15cqw; font-weight: 800; color: var(--sage); }
.ai-say b { font-weight: 800; }
.ai-ticks { width: 1.9cqw; height: 1.05cqw; fill: none; stroke: #a5ada7; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms ease; }
/* a message from the studio's chat, and the dots of its typing in its place */
.ai-row { position: relative; display: grid; }
.ai-dots { position: absolute; top: 0; inset-inline-start: 0; display: flex; gap: 0.5cqw; padding: 1.5cqw 1.7cqw; border-radius: 2cqw; border-start-start-radius: 0.6cqw; background: #fff; box-shadow: 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.07); opacity: 0; }
.ai-dots i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #98a39c; animation: ai-dot 900ms ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: 150ms; }
.ai-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes ai-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-0.5cqw); opacity: 1; } }
@keyframes ai-wait { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
@keyframes ai-unwait { 0%, 100% { opacity: 1; } 10%, 90% { opacity: 0; } }
.ai-slots { justify-self: start; display: flex; gap: 0.9cqw; }
.ai-slots > span { padding: 0.75cqw 1.5cqw; border: 0.3cqw solid #cddacd; border-radius: 99px; background: #fff; font-size: 1.5cqw; font-weight: 800; color: var(--sage); transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease; }
.ai-conf { justify-self: start; display: grid; gap: 0.3cqw; width: 78%; padding: 1.2cqw 1.5cqw; border: 0.3cqw solid var(--sage); border-radius: 2cqw; border-start-start-radius: 0.6cqw; background: #fff; }
.ai-conf b { display: flex; align-items: center; gap: 0.8cqw; font-size: 1.8cqw; font-weight: 800; color: var(--sage); }
.ai-conf b i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--sage); }
.ai-conf svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ai-conf path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 150ms ease; }
.ai-conf > span { font-size: 1.55cqw; font-weight: 700; }
.ai-conf small { font-size: 1.25cqw; color: var(--mute); }
.ai-input { display: flex; align-items: center; gap: 1cqw; padding: 1.2cqw 1.6cqw 2.4cqw; background: var(--paper); }
.ai-input > span { flex: 1; padding: 1cqw 1.6cqw; border-radius: 99px; background: #fff; font-size: 1.45cqw; color: #8d8a83; }
.ai-input > i { display: grid; place-items: center; flex: none; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: var(--sage); }
.ai-input svg { width: 2cqw; height: 2cqw; fill: #fff; transform: scaleX(calc(var(--dir) * -1)); }

/* the messages come into the chat: the ones of the moment, and the ones before it */
.ai-s1, .ai-s2 { opacity: 0; transform: translateY(1.2cqw) scale(0.97); transition: opacity 300ms ease, transform 450ms var(--ease-out-strong); }
.ai-in.ai-s1, .ai-in.ai-s2, .ai-slots, .ai-conf { transform-origin: 100% 100%; }
.ai-out.ai-s1, .ai-out.ai-s2 { transform-origin: 0 100%; }
html[dir="ltr"] :is(.ai-in.ai-s1, .ai-in.ai-s2, .ai-slots, .ai-conf) { transform-origin: 0 100%; }
html[dir="ltr"] :is(.ai-out.ai-s1, .ai-out.ai-s2) { transform-origin: 100% 100%; }
.ai.is-seen .ai-s1,
.ai:not([data-stage="1"]) :is(.ai-s1, .ai-s2) { opacity: 1; transform: none; }
/* the words of the first answer come one by one (service.js wraps them) */
.ai-w { opacity: 0; transition: opacity 220ms ease; }
.ai.is-seen .ai-w,
.ai:not([data-stage="1"]) .ai-w { opacity: 1; }

/* the follow-up mail, which opens from the top at the last moment */
.ai-v2 { z-index: 2; display: grid; align-content: start; padding-top: 4.6cqw; background: #fff; color: var(--ink); clip-path: inset(0 0 100% 0); transition: clip-path 800ms var(--ease-drawer); }
.ai-mail__meta { padding: 1.4cqw 2.2cqw 1.6cqw; border-bottom: 1px solid #ece8df; }
.ai-mail__meta b { display: block; font-size: 1.95cqw; font-weight: 800; }
.ai-mail__meta small { font-size: 1.25cqw; color: var(--mute); }
.ai-mail__head { display: grid; justify-items: center; margin: 2cqw 2.2cqw 0; padding: 2.4cqw 2cqw; border-radius: 2.2cqw 2.2cqw 0 0; background: var(--ink); color: #fff; }
.ai-mail__head b { font-size: 2.6cqw; font-weight: 800; letter-spacing: 0.06em; }
.ai-mail__head small { font-size: 1.25cqw; color: #b9d0bf; }
.ai-mail__body { display: grid; gap: 1.3cqw; margin: 0 2.2cqw; padding: 2cqw; border: 1px solid #ece8df; border-top: 0; border-radius: 0 0 2.2cqw 2.2cqw; }
.ai-mail__h { font-size: 1.95cqw; font-weight: 800; }
.ai-sched { display: grid; gap: 0.6cqw; }
.ai-sched > span { display: flex; gap: 1cqw; padding: 0.8cqw 1.2cqw; border-radius: 1.1cqw; background: #f6f3ed; font-size: 1.4cqw; }
.ai-offer { padding: 1.2cqw 1.4cqw; border-radius: 1.3cqw; background: var(--sage-lo); font-size: 1.5cqw; font-weight: 800; }
.ai-btn { display: grid; place-items: center; height: 5.2cqw; border-radius: 1.5cqw; background: var(--clay); font-size: 1.75cqw; font-weight: 800; color: #fff; }

/* the mail's notice drops in first, and her finger opens it */
.ai-banner {
  position: absolute;
  z-index: 5;
  top: 4.8cqw;
  left: 1.6cqw;
  right: 1.6cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3cqw 1cqw;
  padding: 1.3cqw 1.6cqw;
  border-radius: 2.4cqw;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.22);
  font-size: 1.35cqw;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-12cqw);
}
.ai-banner__app { display: flex; align-items: center; gap: 0.7cqw; font-size: 1.15cqw; color: var(--mute); }
.ai-banner__app i { width: 1.8cqw; height: 1.8cqw; border-radius: 0.5cqw; background: linear-gradient(135deg, #4c8df6, #0a6cf0); }
.ai-banner__when { font-size: 1.15cqw; color: var(--mute); }
.ai-banner b { grid-column: 1 / -1; font-size: 1.5cqw; }
.ai-banner > span:last-child { grid-column: 1 / -1; }
@keyframes ai-banner { 0% { opacity: 0; transform: translateY(-12cqw); } 30%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2cqw) scale(0.96); } }

/* her finger: service.js moves it (it waits outside the screen) */
.ai-touch { position: absolute; z-index: 6; top: 0; left: 0; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; background: rgba(34, 48, 42, 0.22); box-shadow: inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.75), 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.16); opacity: 0; pointer-events: none; }
.ai-touch > i { position: absolute; inset: 0; border: 0.2cqw solid rgba(95, 127, 106, 0.8); border-radius: 50%; opacity: 0; }

/* the owner's phone, locked, in the colours of an early morning */
.ai-own {
  position: absolute;
  z-index: 4;
  top: 0;
  inset-inline-start: 12cqw;
  width: 36.6cqw;
  border: 1.2cqw solid #141b38;
  border-radius: 6cqw;
  background: #141b38;
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.28), 0 6cqw 12cqw rgba(0, 0, 0, 0.55), 0 0 14cqw rgba(0, 196, 204, 0.14);
  opacity: 0;
  transform: translateY(18cqw) scale(0.94);
  transition: transform 900ms var(--ease-drawer), opacity 500ms ease;
}
.ai-lock {
  position: relative;
  aspect-ratio: 9 / 19.2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7.6cqw 2cqw 4cqw;
  border-radius: 4.8cqw;
  background:
    radial-gradient(120% 55% at 50% 0%, #d99a74 0%, rgba(217, 154, 116, 0) 62%),
    radial-gradient(90% 50% at 85% 100%, rgba(0, 196, 204, 0.38), rgba(0, 196, 204, 0) 70%),
    linear-gradient(180deg, #34406b, #121a38);
  color: #fff;
}
.ai-lock__day { font-size: 1.55cqw; font-weight: 600; opacity: 0.9; }
.ai-lock__time { direction: ltr; margin-top: 0.3cqw; font-size: 8.2cqw; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.ai-lock__time .ai-roll { height: 1.05em; line-height: 1.05; }
.ai-note {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3cqw 1cqw;
  margin-top: 1.2cqw;
  padding: 1.4cqw 1.6cqw;
  border-radius: 2.2cqw;
  background: rgba(255, 255, 255, 0.9);
  color: #1c2238;
  font-size: 1.35cqw;
  line-height: 1.38;
  text-align: start;
  opacity: 0;
  transform: translateY(-12cqw) scale(0.94);
  transition: opacity 300ms ease, transform 700ms var(--ease-drawer);
}
.ai-note--sum { margin-top: 5cqw; }
.ai-note__app { display: flex; align-items: center; gap: 0.7cqw; font-size: 1.15cqw; color: #4e5873; }
.ai-note__app i { width: 1.8cqw; height: 1.8cqw; border-radius: 0.5cqw; background: #25d366; }
.ai-note--rem .ai-note__app i { background: linear-gradient(135deg, #ff8a5c, #e8553a); }
.ai-note__when { font-size: 1.15cqw; color: #4e5873; }
.ai-note b { grid-column: 1 / -1; font-size: 1.5cqw; font-weight: 800; }
.ai-note > span:last-child { grid-column: 1 / -1; }
.ai-lock__bar { position: absolute; bottom: 1.3cqw; left: 32%; width: 36%; height: 0.5cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.7); }

/* the point of light that carries the enquiry from the chat to the CRM */
.ai-flow { position: absolute; z-index: 6; top: 0; left: 0; width: 1.8cqw; height: 1.8cqw; margin: -0.9cqw 0 0 -0.9cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5cqw rgba(125, 240, 244, 0.35), 0 0 3cqw 1cqw rgba(0, 196, 204, 0.7); opacity: 0; pointer-events: none; }
@keyframes ai-flow {
  0% { opacity: 0; transform: translate(80cqw, 60cqw) scale(0.5); }
  12% { opacity: 1; }
  50% { transform: translate(62cqw, 27cqw) scale(1.15); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(39cqw, 23cqw) scale(0.6); }
}
@keyframes ai-flow-ltr {
  0% { opacity: 0; transform: translate(20cqw, 60cqw) scale(0.5); }
  12% { opacity: 1; }
  50% { transform: translate(38cqw, 27cqw) scale(1.15); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(61cqw, 23cqw) scale(0.6); }
}

/* what goes out next, under the stage at the last moment */
.ai-later {
  position: absolute;
  z-index: 5;
  top: 70cqw;
  inset-inline-end: 6cqw;
  display: grid;
  gap: 0.3cqw;
  width: 44cqw;
  padding: 1.6cqw 2cqw;
  border: 1px solid rgba(125, 240, 244, 0.4);
  border-radius: 2.4cqw;
  background: rgba(20, 28, 58, 0.96);
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, 0.5);
  font-size: 1.6cqw;
  color: var(--text-mid);
  opacity: 0;
  transform: translateY(3cqw);
  transition: opacity 300ms ease, transform 700ms var(--ease-drawer);
}
.ai-later small { font-size: 1.5cqw; }
.ai-later b { font-size: 2cqw; color: var(--text); }

/* the callouts beside the phone, on the laptop's side, each on its part (service.js sets how high) */
.ai-co {
  --d: 0ms;
  position: absolute;
  z-index: 7;
  top: 0;
  inset-inline-start: calc(38.6cqw + 24px);
  width: max-content;
  max-width: 30cqw;
  padding: 7px 12px;
  border: 1px solid rgba(125, 240, 244, 0.38);
  border-radius: 12px;
  background: rgba(10, 18, 40, 0.92);
  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: translate(calc(var(--dir) * -10px), -50%);
  transition: opacity 250ms ease, transform 250ms ease;
}
.ai-co::before,
.ai-co::after { content: ""; position: absolute; top: 50%; pointer-events: none; }
.ai-co::after { inset-inline-start: -24px; width: 22px; height: 1px; background: linear-gradient(270deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 250ms ease; }
html[dir="ltr"] .ai-co::after { background: linear-gradient(90deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 100% 50%; }
.ai-co::before { inset-inline-start: -27px; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 10px var(--cyan); opacity: 0; transition: opacity 200ms ease; }
/* beside the owner's phone */
.ai-co--own { inset-inline-start: calc(48.6cqw + 24px); max-width: calc(51.4cqw - 30px); }
/* under the laptop, pointing up at the new card (service.js sets where along it) */
.ai-co--lap { top: calc(100% + 18px); max-width: 34cqw; text-align: center; transform: translate(-50%, -8px); }
.ai .ai-co--lap { left: 50%; right: auto; }   /* service.js sets how far along (on every screen) */
.ai-co--lap::after { top: auto; bottom: 100%; left: calc(50% + var(--ax, 0px)); right: auto; width: 1px; height: 16px; background: linear-gradient(0deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 50% 100%; transform: scaleY(0); }
html[dir="ltr"] .ai-co--lap::after { background: linear-gradient(0deg, rgba(125, 240, 244, 0.75), rgba(125, 240, 244, 0.25)); transform-origin: 50% 100%; }
.ai-co--lap::before { top: auto; bottom: calc(100% + 14px); left: calc(50% + var(--ax, 0px)); right: auto; margin: 0 0 0 -3px; }
.ai-co[data-at="1"] { --d: 2150ms; } .ai-co--late[data-at="1"] { --d: 2850ms; }
.ai-co--late[data-at="2"] { --d: 3850ms; }
.ai-co[data-at="4"] { --d: 1900ms; } .ai-co--late[data-at="4"] { --d: 2700ms; }
.ai-co[data-at="5"] { --d: 2700ms; }
.ai.is-seen[data-stage="1"] .ai-co[data-at="1"],
.ai[data-stage="2"] .ai-co--late[data-at="2"],
.ai[data-stage="4"] .ai-co[data-at="4"],
.ai[data-stage="5"] .ai-co[data-at="5"] { opacity: 1; transform: translate(0, -50%); transition: opacity 400ms ease var(--d), transform 600ms var(--ease-expo) var(--d); }
.ai.is-seen[data-stage="1"] .ai-co[data-at="1"]::after,
.ai[data-stage="2"] .ai-co--late[data-at="2"]::after,
.ai[data-stage="4"] .ai-co[data-at="4"]::after,
.ai[data-stage="5"] .ai-co[data-at="5"]::after { transform: none; transition: transform 450ms var(--ease-out-strong) calc(var(--d) + 200ms); }
.ai.is-seen[data-stage="1"] .ai-co[data-at="1"]::before,
.ai[data-stage="2"] .ai-co--late[data-at="2"]::before,
.ai[data-stage="4"] .ai-co[data-at="4"]::before,
.ai[data-stage="5"] .ai-co[data-at="5"]::before { opacity: 1; transition: opacity 300ms ease calc(var(--d) + 500ms); }
.ai[data-stage="3"] .ai-co--lap { opacity: 1; transform: translate(-50%, 0); transition: opacity 400ms ease 1900ms, transform 600ms var(--ease-expo) 1900ms; }
.ai[data-stage="3"] .ai-co--lap::after { transform: none; transition: transform 450ms var(--ease-out-strong) 2100ms; }
.ai[data-stage="3"] .ai-co--lap::before { opacity: 1; transition: opacity 300ms ease 2400ms; }
/* "the free hours" stands while she picks one, and goes before the chat moves on */
.ai[data-stage="2"] .ai-co--for { animation: ai-co-for 1300ms ease 1150ms both; }
.ai[data-stage="2"] .ai-co--for::after { transform: none; }
.ai[data-stage="2"] .ai-co--for::before { opacity: 1; }
@keyframes ai-co-for {
  0% { opacity: 0; transform: translate(calc(var(--dir) * -10px), -50%); }
  20%, 85% { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(0, -50%); }
}

.ai-cap {
  position: absolute;
  z-index: 3;
  top: 77cqw;
  inset-inline-start: 20.3cqw;
  translate: calc(var(--dir) * 50%) 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;
  transition: opacity 300ms ease;
}

/* --- the five moments of the enquiry --- */

/* the hour on her phone */
.ai[data-stage="1"] .ai-clock b:nth-child(1),
.ai:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .ai-clock b:nth-child(2),
.ai[data-stage="5"] .ai-clock b:nth-child(3) { opacity: 1; }

/* 1: her question goes out and is read; the chat types, then answers word by word */
.ai.is-seen[data-stage="1"] .ai-out1 { transition-delay: 300ms; }
.ai.is-seen .ai-out1 .ai-ticks,
.ai:not([data-stage="1"]) .ai-out1 .ai-ticks { stroke: var(--sage); }
.ai.is-seen[data-stage="1"] .ai-out1 .ai-ticks { transition-delay: 850ms; }
.ai.is-seen[data-stage="1"] .ai-in1 .ai-dots { animation: ai-wait 900ms linear 950ms both; }
.ai.is-seen[data-stage="1"] .ai-sub > span:first-child { animation: ai-unwait 900ms linear 950ms both; }
.ai.is-seen[data-stage="1"] .ai-sub > span + span { animation: ai-wait 900ms linear 950ms both; }
.ai.is-seen[data-stage="1"] .ai-in1 .ai-m { transition-delay: 1850ms; }
.ai.is-seen[data-stage="1"] .ai-w { transition-delay: calc(1900ms + var(--i, 0) * 45ms); }

/* 2: the free hours, the pick, her name and the confirmation; the chat scrolls as they come */
.ai:not([data-stage="1"]) .ai-list { transform: translateY(var(--y2, 0px)); }
.ai[data-stage="2"] .ai-list { animation: ai-scroll 3700ms both; }
@keyframes ai-scroll {
  0% { transform: translateY(var(--y1, 0px)); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  10.8%, 64.9% { transform: translateY(var(--ya, 0px)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  71.6%, 78.4% { transform: translateY(var(--yb, 0px)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  85.1%, 91.9% { transform: translateY(var(--yc, 0px)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  98.6%, 100% { transform: translateY(var(--y2, 0px)); }
}
.ai[data-stage="2"] .ai-in2 .ai-dots { animation: ai-wait 500ms linear 200ms both; }
.ai[data-stage="2"] .ai-sub > span:first-child { animation: ai-unwait 500ms linear 200ms both; }
.ai[data-stage="2"] .ai-sub > span + span { animation: ai-wait 500ms linear 200ms both; }
.ai[data-stage="2"] .ai-in2 .ai-m { transition-delay: 700ms; }
.ai[data-stage="2"] .ai-slots { transition-delay: 950ms; }
.ai:not([data-stage="1"]) .ai-slot--pick { border-color: var(--sage); background: var(--sage); color: #fff; }
.ai[data-stage="2"] .ai-slot--pick { transition-delay: 1600ms; }
.ai[data-stage="2"] .ai-in3 { transition-delay: 2550ms; }
.ai[data-stage="2"] .ai-out2 { transition-delay: 3050ms; }
.ai:not([data-stage="1"]) .ai-out2 .ai-ticks { stroke: var(--sage); }
.ai[data-stage="2"] .ai-out2 .ai-ticks { transition-delay: 3500ms; }
.ai[data-stage="2"] .ai-conf { transition-delay: 3600ms; }
.ai:not([data-stage="1"]) .ai-conf path { stroke-dashoffset: 0; }
.ai[data-stage="2"] .ai-conf path { transition: stroke-dashoffset 450ms var(--ease-out-strong) 3850ms; }

/* 3: the enquiry flies to the CRM, which comes forward; her card slides in, the counts go up */
.ai:is([data-stage="3"], [data-stage="4"]) .ai-ph { transform: scale(0.62); }
.ai[data-stage="3"] .ai-ph { transition-delay: 500ms; }
.ai:is([data-stage="3"], [data-stage="4"]) .ai-scr::after { opacity: 0.12; }
.ai[data-stage="3"] .ai-flow { animation: ai-flow 950ms cubic-bezier(0.65, 0, 0.35, 1) 150ms both; }
html[dir="ltr"] .ai[data-stage="3"] .ai-flow { animation-name: ai-flow-ltr; }
.ai[data-stage="3"] .ai-lap { z-index: 3; transform: scale(1.08); transition-delay: 350ms; }
.ai[data-stage="3"] .ai-lap__scr::after { opacity: 0; transition-delay: 400ms; }
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .ai-col--new .ai-col__list { transform: none; }
.ai[data-stage="3"] .ai-col--new .ai-col__list { transition-delay: 1050ms; }
.ai[data-stage="3"] .ai-card--new { animation: ai-new 1600ms ease 1050ms both; }
@keyframes ai-new { from { background-color: #b8ecd3; box-shadow: 0 0 0 0.6cqw rgba(19, 138, 90, 0.35); } to { background-color: #f0fbf6; box-shadow: 0 0 0 0.3cqw rgba(19, 138, 90, 0.15); } }
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) :is(.ai-col--new .ai-roll, .ai-roll--week) i { transform: translateY(-100%); }
/* by the morning two more came in the night */
.ai:is([data-stage="4"], [data-stage="5"]) .ai-crm .ai-crm__top .ai-roll--week i { transform: translateY(-200%); }
.ai:is([data-stage="4"], [data-stage="5"]) .ai-col--in .ai-roll i { transform: translateY(-100%); }
.ai[data-stage="3"] .ai-crm .ai-roll i { transition-delay: 1250ms; }
.ai[data-stage="3"] .ai-toast { opacity: 1; transform: none; transition-delay: 1700ms; }

/* 4: the morning: her phone fades back, the owner's rises, its hour turns and the summary comes */
.ai[data-stage="4"] .ai-ph { opacity: 0.3; }
.ai[data-stage="4"] .ai-own { opacity: 1; transform: none; transition-delay: 250ms; animation: lp-buzz 420ms linear 1650ms 2; }
.ai[data-stage="4"] .ai-lock__time .ai-roll i { transform: translateY(-100%); transition-delay: 1250ms; }
.ai[data-stage="4"] .ai-note { opacity: 1; transform: none; }
.ai[data-stage="4"] .ai-note--sum { transition-delay: 1500ms; }
.ai[data-stage="4"] .ai-note--rem { transition-delay: 2300ms; }

/* 5: after the class: the mail's notice drops in, her finger opens it, it opens from the top */
.ai[data-stage="5"] .ai-banner { animation: ai-banner 1500ms var(--ease-drawer) 600ms both; }
.ai[data-stage="5"] .ai-v2 { clip-path: inset(0); transition-delay: 1700ms; }
.ai[data-stage="5"] .ai-status { color: var(--ink); transition-delay: 1800ms; }
.ai[data-stage="5"] .ai-later { opacity: 1; transform: none; transition-delay: 3100ms; }

/* the stage waits for service.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 .ai:not(.is-ready) .ai-rig { opacity: 0; animation: lp-show 0s linear 2.5s forwards; }
.ai.is-ready .ai-rig { transition: opacity 400ms ease; }
.ai.is-now, .ai.is-now *, .ai.is-now *::before, .ai.is-now *::after { transition: none !important; animation: none !important; }
/* coming back up the moments (or opening the page in the middle of them), a moment shows as it
   ends, without acting it again */
.ai.is-back *, .ai.is-back *::before, .ai.is-back *::after { transition-delay: 0s !important; }
.ai.is-back :is(.ai-list, .ai-dots, .ai-sub > span, .ai-co, .ai-card--new, .ai-own, .ai-banner, .ai-flow) { animation: none !important; }

/* the loops rest while the section is off the screen */
.sv-build.is-off :is(.ai-rig, .ai-dots i) { animation-play-state: paused; }

/* --- The fears ------------------------------------------------------------------------------ */

.sv-fears__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin: clamp(28px, 5vh, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.sv-fear {
  padding: clamp(20px, 3vh, 28px) clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(7, 11, 26, 0.5);
}

.sv-fear h3 { margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 800; color: var(--cyan-hi); }
.sv-fear p { margin: 12px 0 0; line-height: 1.65; color: var(--text-mid); text-wrap: pretty; }

/* --- The price -------------------------------------------------------------------------------- */

.sv-price__sub { max-width: 40em; margin-top: clamp(12px, 2vh, 20px); }

.sv-price__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 5vh, 52px);
}

.sv-price__main,
.sv-pay {
  padding: clamp(24px, 4vh, 40px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(125, 240, 244, 0.24);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(26, 36, 71, 0.82), rgba(10, 16, 36, 0.82));
}

.sv-price__name { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text); }

.sv-price__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 10px 0 0;
  color: var(--text-mid);
}

.sv-price__num b { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 200; line-height: 1; color: var(--cyan-hi); }
.sv-price__vat { margin: 4px 0 0; color: var(--text-mid); }

.sv-price__others { margin: clamp(20px, 3vh, 30px) 0 0; padding: 0; list-style: none; }
.sv-price__others li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.sv-price__others span { color: var(--text-mid); }
.sv-price__others b { font-weight: 700; color: var(--text); }
.sv-price__others small { font-weight: 400; color: var(--text-low); }
.sv-price__others a, .sv-price__factors a { color: inherit; text-decoration: underline; text-decoration-color: rgba(125, 240, 244, 0.55); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { :is(.sv-price__others, .sv-price__factors) a:hover { color: var(--cyan-hi); } }
.sv-price__factors { margin: 18px 0 0; line-height: 1.6; color: var(--text-mid); }
.sv-price__factors b { color: var(--text); }

.sv-pay__title { margin: 0; font-size: clamp(1.375rem, 1.8vw, 1.75rem); font-weight: 800; }
.sv-pay__list { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: pay; }
.sv-pay__list li { position: relative; padding-block: 14px; padding-inline: 52px 0; border-top: 1px solid var(--line); line-height: 1.55; color: var(--text-mid); counter-increment: pay; }
.sv-pay__list li:first-child { color: var(--text); }
.sv-pay__list li::before {
  content: counter(pay);
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(125, 240, 244, 0.5);
  font-weight: 700;
  color: var(--cyan-hi);
}

/* --- The calculator --------------------------------------------------------------------------- */

.sv-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 5vh, 56px);
  padding: clamp(24px, 4vh, 40px);
  border: 1px solid rgba(125, 240, 244, 0.24);
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(26, 36, 71, 0.82), rgba(10, 16, 36, 0.82));
  scroll-margin-top: 90px;
}

.sv-calc__title { font-size: clamp(1.875rem, 3vw, 3rem); }
.sv-calc--one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sv-calc--one .sv-calc__form { align-self: center; }

.sv-calc__q { margin: clamp(18px, 3vh, 26px) 0 0; padding: 0; border: 0; min-width: 0; }
.sv-calc__q legend { margin-bottom: 10px; padding: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text); }
.sv-calc__q[hidden] { display: none; }

.sv-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.sv-seg button,
.sv-adds button {
  font: inherit;
  color: var(--text-mid);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out-strong);
}

.sv-seg button { display: grid; gap: 2px; min-height: 64px; padding: 10px 8px; border-radius: 14px; text-align: center; }
.sv-seg button b { font-weight: 700; }
.sv-seg button small { font-size: 0.8125rem; color: var(--text-low); }

.sv-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-adds button { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; }
.sv-adds button span { font-size: 0.875rem; color: var(--text-low); }

.sv-seg button[aria-pressed="true"] small,
.sv-adds button[aria-pressed="true"] span { color: var(--text-mid); }

.sv-seg button[aria-pressed="true"],
.sv-adds button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--cyan);
  background: rgba(0, 196, 204, 0.14);
  box-shadow: inset 0 0 0 1px var(--cyan);
}

.sv-seg button:active,
.sv-adds button:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .sv-seg button:hover,
  .sv-adds button:hover { border-color: rgba(125, 240, 244, 0.6); color: var(--text); }
}

.sv-step-in { display: inline-flex; align-items: center; gap: 14px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; }
.sv-step-in button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); font: inherit; font-size: 1.375rem; color: var(--text); cursor: pointer; }
.sv-step-in button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.sv-step-in output { min-width: 3ch; text-align: center; font-size: 1.25rem; font-weight: 700; }
.sv-calc__hint { margin: 10px 0 0; font-size: 0.9375rem; color: var(--text-low); }

.sv-calc__res {
  align-self: stretch;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: clamp(22px, 4vh, 36px) 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(7, 11, 26, 0.6);
  text-align: center;
}

.sv-calc__res p { margin: 0; }
.sv-calc__label { color: var(--text-low); }
.sv-calc__from { margin-top: 8px !important; color: var(--text-mid); }
.sv-calc__num { font-size: clamp(2.75rem, 5vw, 4.25rem); font-weight: 200; line-height: 1.05; color: var(--cyan-hi); font-variant-numeric: tabular-nums; }
.sv-calc__vat { color: var(--text-mid); }
.sv-calc__note { max-width: 24em; margin-top: 10px !important; font-size: 0.875rem; line-height: 1.55; color: var(--text-low); }
.sv-calc__res .btn { margin-top: 14px; }

/* --- What is included --------------------------------------------------------------------- */

.sv-incl { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 90px); align-items: start; }

.sv-incl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.sv-incl__list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text); line-height: 1.5; }
.sv-incl__list svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--cyan-hi); }

/* --- The platforms -------------------------------------------------------------------------- */

.sv-plat__lead { max-width: 36em; margin-top: clamp(14px, 2.6vh, 24px); }

.sv-plat__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(26px, 4.6vh, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.sv-plat__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* the three channels of the AI tools */

.sv-plat__item {
  padding: clamp(20px, 3vh, 28px) clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(7, 11, 26, 0.5);
}

.sv-plat__item.is-top { border-color: rgba(125, 240, 244, 0.55); box-shadow: 0 0 60px -18px rgba(0, 196, 204, 0.5); background: linear-gradient(165deg, rgba(26, 36, 71, 0.8), rgba(10, 16, 36, 0.8)); }
.sv-plat__item h3 { margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 800; color: var(--text); text-align: start; }
.sv-plat__item p { margin: 10px 0 0; line-height: 1.6; color: var(--text-mid); }
.sv-plat__note { max-width: 52em; margin: clamp(18px, 3vh, 28px) 0 0; line-height: 1.6; color: var(--text-mid); }
.sv-plat__note a { color: var(--cyan-hi); text-underline-offset: 3px; }

/* --- Works --------------------------------------------------------------------------------- */

.sv-works__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }

.sv-works__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin: clamp(26px, 4.6vh, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.sv-works__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sv-work a { display: grid; gap: 6px; color: inherit; text-decoration: none; }

.sv-work__shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b1230;
}

.sv-work__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 700ms var(--ease-expo); }
.sv-work__name { margin-top: 8px; font-size: 1.1875rem; font-weight: 800; color: var(--text); }
.sv-work__type { color: var(--text-mid); }

@media (hover: hover) and (pointer: fine) {
  .sv-work a:hover .sv-work__shot img { transform: scale(1.03); }
  .sv-work a:hover .sv-work__name { color: var(--cyan-hi); }
}

/* --- Voices ------------------------------------------------------------------------------- */

.sv-voices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px clamp(24px, 4vw, 60px); }
.sv-voices .v-score { margin: 0; justify-content: flex-start; }
.sv-voices__list { columns: 2; column-gap: clamp(28px, 5vw, 90px); margin-top: clamp(28px, 5vh, 52px); }
.sv-voices__list .vquote { display: block; break-inside: avoid; margin: 0 0 clamp(8px, 1.5vh, 14px); padding: clamp(18px, 3vh, 28px) 0; border-top: 1px solid var(--line); transition: none; }
.sv-voices__list .vquote blockquote { margin: 0; }
.sv-voices__list .vquote blockquote p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--text); }
.sv-voices__list .vquote figcaption { justify-content: flex-start; margin-top: clamp(14px, 2.4vh, 22px); }

/* --- The end, beside the form -------------------------------------------------------------- */

.sv > .sv-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: clamp(24px, 5vw, 90px);
  padding-bottom: clamp(90px, 16vh, 180px);
  background: var(--veil);
}

.sv-end__title { font-size: clamp(2.5rem, 5.4vw, 5.5rem); }
.sv-end__title span,
.sv-end__title span.lit { display: block; }

/* --- The life of the page (service.js) ----------------------------------------------------------
   The facts of the answer light up, the rail beside the steps fills, a sweep of light crosses
   the window at each step and a pointer marks the corrections of the design, the cards catch
   the light under the pointer, the main price and the recommended platform have a border of
   light going round, and over a work its whole site scrolls by. Only transforms, opacity and
   clip move; everything stops with the motion. */

/* the facts of the answer: a soft band of light grows behind them, like a marker, from where the
   reading starts (a highlight, not an underline: nothing here may look like a link) */
.sv-fact {
  padding-inline: 0.12em;
  border-radius: 0.2em;
  color: inherit;
  background: linear-gradient(rgba(0, 196, 204, 0.3), rgba(0, 196, 204, 0.3)) no-repeat 100% 92% / 0% 42%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 900ms var(--ease-expo);
}
html[dir="ltr"] .sv-fact { background-position: 0 92%; }
.is-lit .sv-fact { background-size: 100% 42%; }

/* the price that counts: the price keeps its place, the count is drawn over it */
.sv-price__num b { position: relative; }
.sv-price__num b.is-counting { color: transparent; }
.sv-count { position: absolute; inset: 0; text-align: right; color: var(--cyan-hi); font-variant-numeric: tabular-nums; pointer-events: none; }
.sv-count::before { content: attr(data-n); }

/* the rail beside the steps, and the steps it has passed */
.sv-steps { position: relative; }
.sv-steps::before,
.sv-steps::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -34px;
  width: 2px;
  border-radius: 2px;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.sv-steps::before { background: rgba(125, 240, 244, 0.14); }
.sv-steps::after {
  background: linear-gradient(rgba(0, 196, 204, 0.2), var(--cyan-hi));
  box-shadow: 0 0 14px rgba(0, 196, 204, 0.7);
  transform-origin: 50% 0;
  transform: scaleY(var(--fill, 0));
}
.sv-step__n { transition: text-shadow 500ms ease, color 500ms ease; }
.sv-step.is-on .sv-step__n,
.sv-step.is-past .sv-step__n { text-shadow: 0 0 26px rgba(0, 196, 204, 0.75); }

/* the sweep of light that crosses the window when it changes, in the direction of reading. It moves
   by its background, not by a transform: a moving layer over the window counted as a shift of
   the window's layout in Chrome (measured, RTL) */
.dv-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: linear-gradient(105deg, transparent 38%, rgba(125, 240, 244, 0.14) 47%, rgba(255, 255, 255, 0.26) 50%, rgba(125, 240, 244, 0.14) 53%, transparent 62%) no-repeat 0 0 / 250% 100%;
  opacity: 0;
  pointer-events: none;
}
.dv-frame.is-swept::after { animation: dv-sweep 950ms cubic-bezier(0.77, 0, 0.175, 1) both; }
@keyframes dv-sweep { from { opacity: 1; background-position: 0% 0; } to { opacity: 1; background-position: 100% 0; } }
html[dir="ltr"] .dv-frame.is-swept::after { animation-name: dv-sweep-ltr; }
@keyframes dv-sweep-ltr { from { opacity: 1; background-position: 100% 0; } to { opacity: 1; background-position: 0% 0; } }

/* the pointer that marks the two corrections of the design (stage 2) */
.dv-screen { container-type: size; }
.dv-cursor {
  --dx: calc(-25cqw + 26px);
  --dy: calc(48cqh - 26px);
  position: absolute;
  z-index: 3;
  top: calc(30% + 10px);
  left: calc(53% - 17px);
  width: clamp(16px, 2.2vw, 24px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
}
html[dir="ltr"] .dv-cursor { --dx: calc(25cqw - 26px); left: calc(47% + 9px); }
.dv-cursor svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #070b1a; stroke-width: 1.4; stroke-linejoin: round; }
.dv[data-stage="2"] .dv-cursor { animation: dv-cursor 1700ms var(--ease-out-strong) 150ms both; }
@keyframes dv-cursor {
  0% { opacity: 0; transform: translate3d(46px, 54px, 0); }
  14% { opacity: 1; }
  26% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(0, 0, 0) scale(0.8); }
  35% { transform: translate3d(0, 0, 0) scale(1); }
  52% { transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
  56% { transform: translate3d(var(--dx), var(--dy), 0) scale(0.8); }
  61% { transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
  84% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0); }
  100% { opacity: 0; transform: translate3d(calc(var(--dx) + 30px), calc(var(--dy) + 34px), 0); }
}

/* the cards catch the light under the pointer (service.js writes --mx/--my on the card) */
:is(.sv-fear, .sv-plat__item, .sv-price__main, .sv-pay, .sv-use, .sv-grp, .sv-card) { position: relative; isolation: isolate; }
:is(.sv-fear, .sv-plat__item, .sv-price__main, .sv-pay, .sv-use, .sv-grp, .sv-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 196, 204, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
:is(.sv-fear, .sv-plat__item, .sv-price__main, .sv-pay, .sv-use, .sv-grp, .sv-card).is-lit::before { opacity: 1; }
:is(.sv-fear, .sv-plat__item, .sv-pay, .sv-grp).is-lit { border-color: rgba(125, 240, 244, 0.42); }
.sv-fear, .sv-plat__item, .sv-pay, .sv-grp { transition: border-color 300ms ease; }
:is(.sv-fear, .sv-plat__item, .sv-pay, .sv-grp).rv { transition: opacity 640ms ease, transform 820ms var(--ease-expo), border-color 300ms ease; }
.sv-voices__list .vquote.rv { transition: opacity 640ms ease, transform 820ms var(--ease-expo); }

/* a border of light that goes round the main price and the recommended platform */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sv-price__main::after,
.sv-plat__item.is-top::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ring), transparent 0 55%, rgba(0, 196, 204, 0.6) 70%, #b6fbff 80%, rgba(0, 196, 204, 0.6) 88%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sv-ring 9s linear infinite;
  pointer-events: none;
}
.sv-price__main.is-off::after,
.sv-plat__item.is-top.is-off::after { animation-play-state: paused; }
@keyframes sv-ring { to { --ring: 360deg; } }

/* the works: the whole site scrolls by in the frame, and the card leans to the pointer */
.sv-work__shot { position: relative; }
.sv-work__shot img.sv-work__long {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  object-fit: fill;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 600ms, 300ms;
  transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1), ease;
}
.sv-work.has-long .sv-work__long { opacity: 1; }
.sv-work.is-over .sv-work__long { will-change: transform; }
.sv-work[data-long] a:hover .sv-work__shot img { transform: none; }
.sv-work a { transition: none; }
.sv-work__shot { transition: border-color 300ms ease, box-shadow 400ms ease; }
.sv-work.is-over .sv-work__shot { border-color: rgba(125, 240, 244, 0.5); box-shadow: 0 30px 60px -24px rgba(0, 196, 204, 0.4); }

/* the calculator's sum answers each choice */
.sv-calc__num.is-flash { animation: sv-flash 450ms var(--ease-out-strong); }
@keyframes sv-flash { from { transform: scale(1.05); text-shadow: 0 0 26px rgba(0, 196, 204, 0.85); } }

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

@media (max-width: 1100px) {
  .sv-plat__list, .sv-uses__list, .sv-proc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-plat__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-proc__list { row-gap: clamp(28px, 4vh, 40px); }
  .sv-proc__item:nth-child(2n)::before { display: none; }
  .sv-fears__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .sv-brief, .sv-incl, .sv-price__grid, .sv-calc, .sv > .sv-end { grid-template-columns: minmax(0, 1fr); }
  .sv-works__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* On one column the window stands at the top of the screen and the steps pass under it */
@media (max-width: 899px) {
  .sv-head::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -64px calc(-1 * var(--pad)) -70px;
    background: linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0.6) 64px, rgba(7, 11, 26, 0.6) calc(100% - 70px), rgba(7, 11, 26, 0) 100%);
    pointer-events: none;
  }

  .sv-build__stage, .sv-build--phone .sv-build__stage { grid-template-columns: minmax(0, 1fr); }
  .sv-steps::before, .sv-steps::after { display: none; }
  .sv-build__view { order: -1; position: sticky; top: 72px; z-index: 4; margin-inline: calc(-1 * var(--pad)); padding: 8px var(--pad) 16px; background: linear-gradient(180deg, rgba(7, 11, 26, 0.92) 70%, rgba(7, 11, 26, 0)); }
  .dv { position: relative; top: auto; max-width: 560px; margin-inline: auto; }
  .lp { position: relative; top: auto; --pw: min(190px, calc(38vh * 0.46875)); }
  .so { position: relative; top: auto; height: auto; --sw: min(100%, 420px, calc(36vh / 0.86)); }
  .so-rig { animation: none; }
  .ai { position: relative; top: auto; height: auto; padding-bottom: 26px; --sw: min(100%, 420px, calc(36vh / 0.86)); }   /* room under a small stage for the callout under the laptop and the line of what goes out next */
  .ai-rig { animation: none; }
  .ai-later { width: 52cqw; padding: 6px 9px; font-size: 9.5px; }
  .ai-later small { font-size: 9.5px; }
  .ai-later b { font-size: 11px; }
  .ai-toast { font-size: 9px; }
  /* the end of the story stays readable on a small stage */
  .so-mail { width: 52cqw; padding: 6px 9px; font-size: 10px; }
  .so-mail b { font-size: 11px; }
  .so-mail__app, .so-mail__when { font-size: 9px; }
  .so-mail > span:last-child { font-size: 9.5px; }
  .so-toast { font-size: 9px; }
  .lp-phone, .lp-own { border-width: 5px; }
  .lp-rig { animation: none; }
  .sv-build--phone .sv-step { min-height: 64vh; }
  .sv-step { min-height: 62vh; align-content: start; padding-top: 6vh; }
  .sv-voices__list { columns: 1; }
}

@media (max-width: 767px) {
  .sv > .sv-top { min-height: 0; padding-top: calc(64px + clamp(32px, 7vh, 64px) - 34px); }
  .sv-fears__list, .sv-plat__list, .sv-incl__list { grid-template-columns: minmax(0, 1fr); }
  .sv-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-works__list { grid-template-columns: minmax(0, 1fr); }
  .sv-build__view { top: 64px; }
  .sv-uses__list { grid-template-columns: minmax(0, 1fr); }
  /* the steps go down a line */
  .sv-proc__list { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .sv-proc__item { padding-top: 0; padding-inline-start: 62px; min-height: 44px; }
  .sv-proc__item:not(:last-child)::before { display: block; top: 52px; bottom: -20px; inset-inline: 22px auto; width: 1px; height: auto; background: rgba(125, 240, 244, 0.3); }
  html[dir="ltr"] .sv-proc__item:not(:last-child)::before { background: rgba(125, 240, 244, 0.3); }
  /* the callouts and the clock beside a small phone have little room: they wrap */
  .lp-co { right: calc(100% + 12px); max-width: calc(50vw - var(--pw) / 2 - 20px); padding: 4px 8px; border-radius: 9px; font-size: 11px; }
  html[dir="ltr"] .lp-co { left: calc(100% + 12px); }
  .lp-co::after { width: 14px; }
  .lp-co::before { left: calc(100% + 11px); width: 5px; height: 5px; margin-top: -2px; }
  html[dir="ltr"] .lp-co::before { right: calc(100% + 11px); }
  .lp-live { top: 2%; left: calc(100% + 6px); max-width: calc(50vw - var(--pw) / 2 - 12px); padding: 4px 8px; gap: 5px; font-size: 10.5px; line-height: 1.3; white-space: normal; }
  html[dir="ltr"] .lp-live { right: calc(100% + 6px); }
  .lp-cap { bottom: -11px; padding: 2px 8px; font-size: 12px; }
  .so-co { inset-inline-start: calc(38.6cqw + 14px); max-width: 32cqw; padding: 4px 8px; border-radius: 9px; font-size: 11px; }
  .so-co::after { inset-inline-start: -14px; width: 12px; }
  .so-co::before { inset-inline-start: -16px; width: 5px; height: 5px; margin-top: -2px; }
  .so-cap { padding: 2px 8px; font-size: 11px; }
  .ai-co { inset-inline-start: calc(38.6cqw + 14px); max-width: 32cqw; padding: 4px 8px; border-radius: 9px; font-size: 11px; }
  .ai-co::after { inset-inline-start: -14px; width: 12px; }
  .ai-co::before { inset-inline-start: -16px; width: 5px; height: 5px; margin-top: -2px; }
  .ai-co--own { inset-inline-start: calc(48.6cqw + 14px); max-width: calc(51.4cqw - 20px); }
  .ai-co--lap { top: calc(100% + 12px); max-width: 44cqw; }
  .ai-co--lap::after { height: 10px; width: 1px; }
  .ai-co--lap::before { bottom: calc(100% + 8px); margin: 0 0 0 -2px; }
  .ai-cap { padding: 2px 8px; font-size: 11px; }
  .sv-cases__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-card { padding: 20px; border-radius: 20px; }
  .sv-step__do li { font-size: 0.875rem; padding: 6px 12px; }
}

@media (max-width: 560px) {
  .sv-cta .btn { flex: 1 1 100%; }
  .sv-price__others li { display: grid; }

  /* the window grows a band under the laptop, where the three lights stand in a row */
  .dv { aspect-ratio: 16 / 13; }
  .dv-base { top: 70.2%; height: 3%; }
  .dv-phone { bottom: 25%; border-width: 4px; border-radius: 14px; }
  html[dir] .dv-chips { top: auto; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  html[dir] .dv-chips li { padding: 4px 10px; font-size: 11px; transform: translateY(8px); }
  html[dir] .dv[data-stage="4"] .dv-chips li { transform: none; }
  .dv-chips li::before { width: 6px; height: 6px; margin-inline-end: 6px; }
}

/* Between a laptop and a tablet the tags of light have less room beside the phone: they wrap */
@media (min-width: 900px) and (max-width: 1100px) {
  .lp { justify-items: start; --pw: min(260px, calc(68vh * 0.46875)); }   /* the phone keeps to the cards, the open side holds the callouts and the clock */
  .lp-co { max-width: 124px; font-size: 12px; }
  .lp-live { top: 0; left: auto; right: calc(100% + 20px); font-size: 12px; }
  html[dir="ltr"] .lp-live { right: auto; left: calc(100% + 20px); }
}

/* A phone on its side (or a page zoomed to 200%): the phone of the landing pages goes back beside
   the parts, sized by the height of the screen, so it never covers them and its last part is seen */
@media (min-width: 560px) and (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .sv-build--phone .sv-build__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-build--phone .sv-build__view { order: 0; position: relative; top: auto; margin-inline: 0; padding: 0; background: none; }
  .sv-build--phone .lp { position: sticky; top: 80px; --pw: min(190px, calc((100vh - 96px) * 0.46875)); }
  .sv-build--shop .so { position: sticky; top: 80px; height: auto; --sw: min(100%, calc((100vh - 104px) / 0.86)); }
  .sv-build--ai .ai { position: sticky; top: 80px; height: auto; --sw: min(100%, calc((100vh - 104px) / 0.86)); }
  .ai-co { inset-inline-start: calc(38.6cqw + 14px); max-width: 32cqw; padding: 4px 8px; border-radius: 9px; font-size: 11px; }
  .ai-co::after { inset-inline-start: -14px; width: 12px; }
  .ai-co::before { inset-inline-start: -16px; width: 5px; height: 5px; margin-top: -2px; }
  .ai-co--own { inset-inline-start: calc(48.6cqw + 14px); max-width: calc(51.4cqw - 20px); }
  .so-co { inset-inline-start: calc(38.6cqw + 14px); max-width: 32cqw; padding: 4px 8px; border-radius: 9px; font-size: 11px; }
  .so-co::after { inset-inline-start: -14px; width: 12px; }
  .so-co::before { inset-inline-start: -16px; width: 5px; height: 5px; margin-top: -2px; }
  .sv-build--phone .sv-step { min-height: 72vh; align-content: center; padding-top: 0; }
  .lp-co { max-width: 110px; }
  .lp-live { top: 0; left: auto; right: calc(100% + 12px); max-width: 100px; padding: 4px 8px; gap: 5px; font-size: 10.5px; line-height: 1.3; white-space: normal; }
  html[dir="ltr"] .lp-live { right: auto; left: calc(100% + 12px); }
  .lp[data-stage="5"] .lp-live { translate: none; }
}

/* On a low screen lying on its side (a phone on its side, a page zoomed to 200%) the window would
   cover the steps: there it stays in its place above them. A small phone held upright keeps it at
   the top, as on every other phone (QA 2026-10-22: at 375x560 the stage played off the screen) */
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .sv-build__view { position: relative; top: auto; }
}

/* --- Motion stopped: every step changes the window at once, nothing moves in it -------------- */

html.no-motion :is(.sv-step, .sv-card) { transition: none; }
html.no-motion .sv-build--phone .sv-step { opacity: 1; }
html.no-motion .sv-build--phone .sv-step__do li { opacity: 1; transform: none; transition: none; }
html.no-motion .sv-step.is-on .sv-step__t i { animation: none; }
html.no-motion :is(.dv, .dv *, .lp, .lp *, .so, .so *, .ai, .ai *),
html.no-motion .dv *::before, html.no-motion .dv *::after,
html.no-motion .lp::before, html.no-motion .lp *::before, html.no-motion .lp *::after,
html.no-motion .so *::before, html.no-motion .so *::after,
html.no-motion .ai *::before, html.no-motion .ai *::after { transition: none !important; animation: none !important; }
html.no-motion .dv-frame::after, html.no-motion .dv-cursor, html.no-motion .sv-steps::after { display: none; }
html.no-motion .sv-price__main::after, html.no-motion .sv-plat__item.is-top::after { animation: none; }
html.no-motion :is(.sv-fact, .sv-step__n, .sv-work__long) { transition: none; }
html.no-motion .sv-calc__num.is-flash { animation: none; }
html.no-motion .dv[data-stage="2"] .dv-pin { opacity: 1; background: #3ddc84; }

@media (prefers-reduced-motion: reduce) {
  :is(.dv, .dv *, .lp, .lp *, .so, .so *, .ai, .ai *),
  .dv *::before, .dv *::after, .lp::before, .lp *::before, .lp *::after, .so *::before, .so *::after, .ai *::before, .ai *::after { transition: none !important; animation: none !important; }
  .dv-frame::after, .dv-cursor, .sv-steps::after { display: none; }
  .sv-price__main::after, .sv-plat__item.is-top::after { animation: none; }
  :is(.sv-fact, .sv-step__n, .sv-work__long) { transition: none; }
  .sv-calc__num.is-flash { animation: none; }
  .js .sv-build--phone .sv-step__do li { opacity: 1; transform: none; transition: none; }
  .sv-step.is-on .sv-step__t i { animation: none; }
  .sv-build--phone .sv-step { opacity: 1; }
}

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

html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv > .sv-band, .sv > .sv-end) { background: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-card { background: none; box-shadow: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-build--phone .sv-step { opacity: 1; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv-step__t, .sv-step__do li) { background: none; color: inherit; border-color: currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-head::before { display: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.so-co, .ai-co, .ai-later) { background: #000; color: #fff; border-color: currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-grp { background: none; outline: 1px solid currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-case__k { background: none; color: inherit; outline: 1px solid currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv-fear, .sv-plat__item, .sv-price__main, .sv-pay, .sv-use, .sv-grp, .sv-card)::before,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv-price__main, .sv-plat__item.is-top, .dv-frame)::after,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-steps::after,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-count { display: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sv-price__num b.is-counting { color: inherit; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv-card, .sv-brief__text, .sv-fear, .sv-price__main, .sv-pay, .sv-calc, .sv-plat__item, .sv-seg button, .sv-adds button):not(:focus-visible) { outline: 1px solid currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv-seg, .sv-adds) button[aria-pressed="true"] { border: 3px solid currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.sv-step__n, .sv-use__ic, .sv-proc__n, .sv-fear h3, .sv-price__num b, .sv-calc__num, .sv-incl__list svg, .sv-plat__note a, .sv-pay__list li::before) { color: inherit; border-color: currentColor; }

/* the stages of the stores and of the AI tools show their finished picture even when their script never comes and the motion is stopped */
.js .so:not(.is-ready) .so-rig, .js .ai:not(.is-ready) .ai-rig { animation: lp-show 0s linear 2.5s forwards !important; }

@media (forced-colors: active) {
  .sv-count { display: none; }
  .sv-build--phone .sv-step { opacity: 1; }
  .sv-price__num b.is-counting { color: CanvasText; }
  .sv-head::before { display: none; }
  .sv-card, .sv-grp, .sv-brief__text, .sv-fear, .sv-price__main, .sv-pay, .sv-calc, .sv-plat__item, .sv-seg button, .sv-adds button { border: 1px solid CanvasText; }
  :is(.sv-seg, .sv-adds) button[aria-pressed="true"] { border: 3px solid Highlight; }
}