/* ==========================================================================
   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);
}
/* a line under the calls (the chatbot: what the demo asks for) */
.sv-cta__note { margin: 14px 0 0; font-size: 0.9375rem; color: var(--text-mid); }

/* --- 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); }

/* the automations' own process, under their fields (the chatbot's page), and its call */
.sv-cases__how { margin-top: clamp(32px, 6vh, 64px); }
.sv-cases__how-h { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 800; color: var(--text); }
.sv-cases__steps { margin-top: clamp(20px, 3.4vh, 32px); }
.sv-cases__steps .sv-proc__item h4 { margin: 0; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); font-weight: 800; color: var(--text); }
.sv-cases__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: clamp(24px, 4vh, 40px); }
.sv-cases__end .sv-proc__note { margin: 0; }

/* --- 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); }
.sv-proc__cta { margin-top: clamp(24px, 4vh, 40px); }

/* --- 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 { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* the point of the step being read sends out rings: a ring of its own colour that grows and
   fades (a shadow that grew was drawn again on every frame, 2026-10-22) */
.sv-step__t i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(125, 240, 244, 0.6); opacity: 0; pointer-events: none; }
.sv-step.is-on .sv-step__t i::after { animation: sv-ping 1.6s ease-out infinite; }
@keyframes sv-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(3.25); opacity: 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 { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.lp-live > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(61, 220, 132, 0.6); opacity: 0; pointer-events: none; animation: lp-live 1.6s ease-out infinite; }
@keyframes lp-live { from { transform: scale(1); opacity: 1; } to { transform: scale(3); opacity: 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::after { 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-live > i, .sv-step__t i)::after,
.sv-build.is-off :is(.lp-rig, .lp-spin) { 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 night in a plant shop, with its chatbot (ai-automation.html) ---------------------------
   A made-up plant shop, "שורש", in cream, leaf and terracotta: its site on a laptop behind,
   dimmed, with the chat's button in its corner; a shopper's phone in front, on the shop, with the
   chat open over it; and the owner's phone, which rises when the bot has something for them. The
   stage stays in the middle of the screen while five moments pass beside it, as cards. 1: Noa
   asks at 01:20; the bot types, asks one question back, word by word, and after her answer
   recommends three plants as cards; the chat scrolls as they come (service.js measures how far).
   2: her finger adds the calathea from its card; the bag counts it and the bot answers. 3: in the
   cart the chat steps down, a bubble rises over its button with what is missing for free
   shipping; her finger opens it, the chat comes back with the fertiliser, she adds it, and the
   owner's locked phone rises with the purchase in Telegram. 4: at 09:10 Yossi asks for his order,
   gives its mail, and gets its card, checked against the shop. 5: at 11:40 Dana's pot came cracked:
   the bot hands her over and waits, her phone steps back while the owner's opens the talk with its
   summary and answers, then her phone comes forward with the answer in her chat. Sized in parts of
   the stage's width (cqw), so it is one picture on every screen; only opacity, transforms and
   paint move. The chats are drawn in the shop'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: #f4f0e6; --ink: #1f2f25; --mute: #5e6a60; --leaf: #3f7a52; --leaf-lo: #e2ece0; --leaf-hi: #2f6b45; --clay: #c4693f; --head: #24402f; --line-soft: #e4ddcd;
  --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 svg { display: block; }

.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 shop's site, on a laptop behind (shaded: it is the place, the phone is the moment) */
.ai-lap {
  position: absolute;
  z-index: 1;
  top: 14cqw;
  inset-inline-end: 0;
  width: 73cqw;
}
.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(--paper);
  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.5; pointer-events: none; }
.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); }

.ai-logo { display: flex; align-items: center; gap: 0.7cqw; font-weight: 800; letter-spacing: 0.02em; }
.ai-logo i { display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--leaf); }
.ai-logo svg, .ai-av svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.ai-site { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); color: var(--ink); font-size: 1.3cqw; line-height: 1.3; }
.ai-site__bar { display: flex; align-items: center; gap: 2.4cqw; height: 4.4cqw; padding: 0 2.2cqw; border-bottom: 1px solid var(--line-soft); background: #fbf8f1; }
.ai-site__bar .ai-logo { font-size: 1.8cqw; color: var(--head); }
.ai-site__nav { display: flex; gap: 1.8cqw; margin-inline-start: auto; color: var(--mute); }
.ai-site__bag { width: 2cqw; height: 2cqw; color: var(--head); }
.ai-site__bag svg { width: 100%; height: 100%; }
.ai-site__hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2cqw; margin: 1.8cqw 2.2cqw 0; padding: 1.6cqw 2.6cqw; border-radius: 1.8cqw; background: var(--leaf-lo); }
.ai-site__copy { display: grid; justify-items: start; gap: 0.6cqw; }
.ai-site__copy b { font-size: 2.6cqw; font-weight: 800; line-height: 1.12; color: var(--head); }
.ai-site__copy small { font-size: 1.2cqw; color: var(--mute); }
.ai-site__btn { padding: 0.6cqw 1.8cqw; border-radius: 99px; background: var(--clay); font-size: 1.2cqw; font-weight: 800; color: #fff; }
.ai-site__pic { width: 11cqw; }
.ai-site__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqw; margin: 1.6cqw 2.2cqw 0; }
.ai-tile { display: grid; justify-items: center; gap: 0.2cqw; padding: 0.9cqw 0.6cqw 1cqw; border-radius: 1.4cqw; background: #fff; text-align: center; }
.ai-tile svg { width: 72%; }
.ai-tile b { font-size: 1.15cqw; font-weight: 800; }
.ai-tile small { font-size: 1.05cqw; color: var(--mute); }
.ai-site__chat { position: absolute; inset-inline-end: 1.8cqw; bottom: 1.8cqw; display: flex; align-items: flex-end; gap: 1cqw; }
.ai-site__chat span { padding: 0.9cqw 1.4cqw; border-radius: 1.6cqw 1.6cqw 0.4cqw 1.6cqw; background: #fff; box-shadow: 0 0.6cqw 1.6cqw rgba(31, 47, 37, 0.18); font-size: 1.2cqw; font-weight: 700; }
html[dir="ltr"] .ai-site__chat span { border-radius: 1.6cqw 1.6cqw 1.6cqw 0.4cqw; }
.ai-site__chat i, .ai-launch { display: grid; place-items: center; flex: none; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: var(--leaf); box-shadow: 0 0.6cqw 1.6cqw rgba(31, 47, 37, 0.3); }
.ai-site__chat svg, .ai-launch svg { width: 52%; height: 52%; fill: #fff; }

/* 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); }

/* the shopper'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.6cqw; line-height: 1.38; }
.ai-island { position: absolute; z-index: 9; 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: 8; 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; }
.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; }

/* the shop, under the chat: its bar (with the bag), its plants, and the cart of the third moment */
.ai-shop { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--paper); }
.ai-shop__bar { display: flex; align-items: center; justify-content: space-between; height: 9.4cqw; padding: 4.6cqw 2.4cqw 0; background: var(--head); color: #fff; }
.ai-shop__bar .ai-logo { font-size: 1.9cqw; }
.ai-shop__bar .ai-logo i { background: #4f8f60; }
.ai-bag { position: relative; width: 2.6cqw; height: 2.6cqw; }
.ai-bag svg { width: 100%; height: 100%; }
.ai-bag__n { position: absolute; top: -0.9cqw; inset-inline-end: -1.1cqw; display: grid; place-items: center; min-width: 2.1cqw; height: 2.1cqw; padding: 0 0.5cqw; border-radius: 99px; background: var(--clay); font-size: 1.15cqw; font-weight: 800; line-height: 1; color: #fff; transform: scale(0); transition: transform 350ms var(--ease-out-strong); }
.ai-bag__n .ai-roll { height: 1.2em; line-height: 1.2; }
.ai-shop__page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 1.4cqw; padding: 2cqw; }
.ai-shop__page .ai-tile { padding: 1.2cqw 0.8cqw; }
.ai-shop__page .ai-tile svg { width: 62%; }
.ai-shop__page .ai-tile b { font-size: 1.35cqw; }
.ai-shop__page .ai-tile small { font-size: 1.2cqw; }
.ai-cartpg { position: absolute; inset: 9.4cqw 0 0; display: grid; align-content: start; gap: 1.4cqw; padding: 2.4cqw; background: var(--paper); opacity: 0; transition: opacity 250ms ease; }
.ai-cartpg__h { font-size: 2.1cqw; font-weight: 800; }
.ai-line { display: grid; grid-template-columns: 6.4cqw minmax(0, 1fr) auto; align-items: center; gap: 1.2cqw; padding: 1cqw; border-radius: 1.6cqw; background: #fff; }
.ai-line svg { width: 100%; padding: 0.4cqw; border-radius: 1cqw; background: var(--leaf-lo); }
.ai-line > span { display: grid; }
.ai-line b { font-size: 1.5cqw; font-weight: 800; }
.ai-line small { font-size: 1.2cqw; color: var(--mute); }
.ai-cartpg__sum { display: flex; justify-content: space-between; padding: 1cqw 0.4cqw 0; border-top: 1px solid var(--line-soft); font-size: 1.55cqw; }
.ai-cartpg__sum b { font-weight: 800; }
.ai-cartpg__ship { font-size: 1.25cqw; color: var(--mute); }
.ai-cartpg__pay { display: grid; place-items: center; height: 5cqw; margin-top: 0.6cqw; border-radius: 1.4cqw; background: var(--clay); font-size: 1.6cqw; font-weight: 800; color: #fff; }
.ai-launch { position: absolute; z-index: 2; inset-inline-end: 2cqw; bottom: 2.4cqw; width: 5.2cqw; height: 5.2cqw; }
/* the bubble the bot opens with in the cart (its line is the bot's own) */
.ai-nudge {
  position: absolute;
  z-index: 2;
  inset-inline-end: 2cqw;
  bottom: 9cqw;
  width: 25cqw;
  padding: 1.2cqw 1.5cqw;
  border-radius: 2cqw 2cqw 0.5cqw 2cqw;
  background: #fff;
  box-shadow: 0 0 0 0.3cqw rgba(63, 122, 82, 0.35), 0 1.2cqw 2.8cqw rgba(31, 47, 37, 0.25);
  font-size: 1.45cqw;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(1.6cqw) scale(0.94);
  transform-origin: 0 100%;
}
html[dir="ltr"] .ai-nudge { border-radius: 2cqw 2cqw 2cqw 0.5cqw; transform-origin: 100% 100%; }
@keyframes ai-nudge { 0% { opacity: 0; transform: translateY(1.6cqw) scale(0.94); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.97); } }

/* the chat, a sheet over the shop (one for each shopper) */
.ai-v {
  position: absolute;
  inset: 10.2cqw 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 3cqw 3cqw 0 0;
  background: var(--paper);
  box-shadow: 0 -1cqw 3cqw rgba(31, 47, 37, 0.25);
  transform: translateY(105%);
  transition: transform 700ms var(--ease-drawer);
}
.ai-v1 { z-index: 3; }
.ai-v3 { z-index: 4; }
.ai-v4 { z-index: 5; }
.ai-head { display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.2cqw; border-bottom: 1px solid var(--line-soft); background: #fff; }
.ai-av { display: grid; place-items: center; flex: none; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: var(--leaf); }
.ai-who { display: grid; }
.ai-who b { font-size: 1.75cqw; font-weight: 800; line-height: 1.2; }
.ai-sub { display: grid; font-size: 1.25cqw; color: var(--leaf); }
.ai-sub > span { grid-area: 1 / 1; }
.ai-sub > span + span { opacity: 0; }
.ai-msgs { position: relative; min-height: 0; overflow: hidden; }
.ai-list {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.1cqw;
  padding: 1.6cqw;
  transition: transform 700ms var(--ease-io);
}
.ai-day { justify-self: center; padding: 0.3cqw 1.4cqw; border-radius: 99px; background: rgba(31, 47, 37, 0.08); font-size: 1.1cqw; font-weight: 700; color: var(--mute); }
.ai-m { display: grid; max-width: 82%; padding: 1cqw 1.4cqw 0.7cqw; 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.05cqw; color: #7b857d; }
.ai-in { justify-self: start; background: #fff; border-start-start-radius: 0.6cqw; }
.ai-out { justify-self: end; background: var(--leaf-lo); border-start-end-radius: 0.6cqw; }
.ai-name { font-size: 1.1cqw; font-weight: 800; color: var(--leaf); }
.ai-person { box-shadow: inset -0.35cqw 0 0 var(--clay), 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.07); }   /* its mark on the side it starts from */
html[dir="ltr"] .ai-person { box-shadow: inset 0.35cqw 0 0 var(--clay), 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.07); }
.ai-person .ai-name { color: var(--clay); }
.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 of the bot, 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.4cqw 1.6cqw; 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; } }

/* the plants it recommends, as cards in a row that goes on past the screen */
.ai-prods { display: flex; gap: 1cqw; margin-inline-end: -1.6cqw; overflow: hidden; }
.ai-prod { display: grid; flex: none; align-content: start; gap: 0.3cqw; width: 12.4cqw; padding: 0.9cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.08); }
.ai-prod__pic { display: block; padding: 0.4cqw; border-radius: 1.1cqw; background: var(--leaf-lo); }
.ai-prod > b { margin-top: 0.3cqw; font-size: 1.35cqw; font-weight: 800; }
.ai-prod > small { min-height: 2.6em; font-size: 1.05cqw; line-height: 1.3; color: var(--mute); }
.ai-prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6cqw; margin-top: 0.3cqw; }
.ai-prod__foot > b { font-size: 1.3cqw; font-weight: 800; }
.ai-add { position: relative; display: grid; padding: 0.45cqw 0.9cqw; border-radius: 99px; background: var(--leaf); font-size: 1.05cqw; font-weight: 800; color: #fff; white-space: nowrap; transition: background-color 250ms ease, color 250ms ease; }
.ai-add > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 0.3cqw; transition: opacity 200ms ease; }
.ai-add > span + span { opacity: 0; }
.ai-add svg { width: 1.2cqw; height: 1.2cqw; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ai-sugg { display: grid; grid-template-columns: 6.4cqw minmax(0, 1fr) auto; align-items: center; gap: 1.1cqw; width: 88%; padding: 0.9cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.08); }
.ai-sugg > span:nth-child(2) { display: grid; }
.ai-sugg b { font-size: 1.4cqw; font-weight: 800; }
.ai-sugg small { font-size: 1.1cqw; color: var(--mute); }

/* the order, checked against the shop */
.ai-order { display: grid; gap: 0.6cqw; width: 86%; padding: 1.3cqw 1.5cqw; border: 0.3cqw solid var(--leaf); border-radius: 2cqw; border-start-start-radius: 0.6cqw; background: #fff; }
.ai-order__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.2cqw; }
.ai-order__top b { font-size: 1.65cqw; font-weight: 800; }
.ai-order__st { padding: 0.2cqw 1cqw; border-radius: 99px; background: #fbe9cf; font-size: 1.15cqw; font-weight: 800; color: #8a5a12; }
.ai-order__row { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.3cqw; color: var(--mute); }
.ai-order__row b { font-weight: 800; color: var(--ink); }
.ai-order__ok { display: flex; align-items: center; gap: 0.6cqw; margin-top: 0.3cqw; padding-top: 0.7cqw; border-top: 1px dashed #c9d6cf; font-size: 1.15cqw; font-weight: 700; color: var(--leaf); }
.ai-order__ok i { display: grid; place-items: center; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--leaf-lo); }
.ai-order__ok svg { width: 1.2cqw; height: 1.2cqw; fill: none; stroke: var(--leaf); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the line of the handover in the middle of the chat */
.ai-sys { justify-self: center; display: grid; padding: 0.4cqw 1.4cqw; border-radius: 99px; background: #fbe9cf; font-size: 1.15cqw; font-weight: 800; color: #8a5a12; }
.ai-sys > span { grid-area: 1 / 1; text-align: center; transition: opacity 300ms ease; }
.ai-sys > span + span { opacity: 0; }

.ai-input { display: flex; align-items: center; gap: 1cqw; padding: 1.1cqw 1.6cqw 2.2cqw; border-top: 1px solid var(--line-soft); background: #fff; }
.ai-input > span { flex: 1; padding: 0.9cqw 1.6cqw; border-radius: 99px; background: var(--paper); font-size: 1.4cqw; color: #8d8a83; }
.ai-input > i { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--leaf); }
.ai-input svg { width: 1.9cqw; height: 1.9cqw; fill: #fff; transform: scaleX(calc(var(--dir) * -1)); }

/* the messages come into the chat as their moment acts them */
:is(.ai-s1, .ai-s2, .ai-s3, .ai-s4, .ai-s5) { opacity: 0; transform: translateY(1.2cqw) scale(0.97); transition: opacity 300ms ease, transform 450ms var(--ease-out-strong); }
:is(.ai-in, .ai-prods, .ai-sugg, .ai-order) { transform-origin: 100% 100%; }
.ai-out { transform-origin: 0 100%; }
html[dir="ltr"] :is(.ai-in, .ai-prods, .ai-sugg, .ai-order) { transform-origin: 0 100%; }
html[dir="ltr"] .ai-out { transform-origin: 100% 100%; }
.ai-sys { transform-origin: 50% 100%; }
.ai.is-seen .ai-s1,
.ai:not([data-stage="1"]) .ai-s1,
.ai:not([data-stage="1"]) .ai-s2,
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .ai-s3,
.ai:is([data-stage="4"], [data-stage="5"]) .ai-s4,
.ai[data-stage="5"] .ai-s5 { opacity: 1; transform: none; }
/* the words of the bot's first question 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; }

/* her finger: service.js moves it (it waits outside the screen) */
.ai-touch { position: absolute; z-index: 7; top: 0; left: 0; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; background: rgba(31, 47, 37, 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(63, 122, 82, 0.85); border-radius: 50%; opacity: 0; }

/* the owner's phone: locked at night, open on the talk in Telegram at the handover */
.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(90% 50% at 85% 100%, rgba(0, 196, 204, 0.32), rgba(0, 196, 204, 0) 70%),
    linear-gradient(180deg, #1d2750, #0b1130);
  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-note {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3cqw 1cqw;
  margin-top: 5cqw;
  padding: 1.4cqw 1.6cqw;
  border-radius: 2.2cqw;
  background: rgba(255, 255, 255, 0.92);
  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__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: linear-gradient(135deg, #5ab3e8, #2a88cf); }
.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 talk in Telegram, drawn plainly in the colours of the night */
.ai-tg { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #eef1f6; color: #1c2238; text-align: start; opacity: 0; }
.ai-tg__head { display: flex; align-items: center; gap: 1.1cqw; padding: 5cqw 2cqw 1.3cqw; background: #1d2750; color: #fff; }
.ai-tg__head > span:last-child { display: grid; }
.ai-tg__head b { font-size: 1.6cqw; font-weight: 800; }
.ai-tg__head small { font-size: 1.15cqw; color: #b9c3e6; }
.ai-tg__av { display: grid; place-items: center; flex: none; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--leaf); font-size: 1.7cqw; font-weight: 800; }
.ai-tg__body { display: grid; align-content: start; gap: 1.2cqw; padding: 1.8cqw; }
.ai-tg__card { display: grid; gap: 0.35cqw; padding: 1.3cqw 1.5cqw; border-radius: 2cqw; border-start-start-radius: 0.6cqw; background: #fff; box-shadow: 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.07); font-size: 1.35cqw; line-height: 1.38; opacity: 0; transform: translateY(1.2cqw) scale(0.97); transform-origin: 100% 0; }
html[dir="ltr"] .ai-tg__card { transform-origin: 0 0; }
.ai-tg__card b { font-size: 1.5cqw; font-weight: 800; }
.ai-tg__sum { padding: 0.8cqw 1cqw; border-radius: 1.1cqw; background: #f3f5fa; color: #3c4560; }
.ai-tg__btn { justify-self: start; margin-top: 0.3cqw; padding: 0.5cqw 1.3cqw; border-radius: 99px; background: #2a88cf; font-size: 1.2cqw; font-weight: 800; color: #fff; }
.ai-tg__card small, .ai-tg__me small { justify-self: end; display: flex; align-items: center; gap: 0.4cqw; direction: ltr; font-size: 1.05cqw; color: #7b8396; }
.ai-tg__me { justify-self: end; display: grid; max-width: 82%; padding: 1cqw 1.4cqw 0.7cqw; border-radius: 2cqw; border-start-end-radius: 0.6cqw; background: #d8ecff; font-size: 1.4cqw; line-height: 1.38; opacity: 0; transform: translateY(1.2cqw) scale(0.97); transform-origin: 0 100%; }
html[dir="ltr"] .ai-tg__me { transform-origin: 100% 100%; }
.ai-tg__input { display: flex; align-items: center; gap: 1cqw; padding: 1.1cqw 1.6cqw 2.4cqw; background: #fff; }
.ai-tg__input > span { flex: 1; padding: 0.9cqw 1.6cqw; border-radius: 99px; background: #eef1f6; font-size: 1.4cqw; color: #8d93a3; }
.ai-tg__input > i { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #2a88cf; }
.ai-tg__input svg { width: 1.9cqw; height: 1.9cqw; fill: #fff; transform: scaleX(calc(var(--dir) * -1)); }

/* 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: 8;
  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); }
/* the callouts that stay for their moment, after their part has come */
.ai-co--late[data-at="1"] { --d: 4500ms; }
.ai-co[data-at="2"] { --d: 1500ms; }
.ai-co--own[data-at="3"] { --d: 4500ms; }
.ai-co[data-at="4"] { --d: 3300ms; } .ai-co--late[data-at="4"] { --d: 3900ms; }
.ai-co--back[data-at="5"] { --d: 6200ms; }
.ai.is-seen[data-stage="1"] .ai-co--late[data-at="1"],
.ai[data-stage="2"] .ai-co[data-at="2"],
.ai[data-stage="3"] .ai-co--own[data-at="3"],
.ai[data-stage="4"] .ai-co[data-at="4"],
.ai[data-stage="5"] .ai-co--back { 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--late[data-at="1"]::after,
.ai[data-stage="2"] .ai-co[data-at="2"]::after,
.ai[data-stage="3"] .ai-co--own[data-at="3"]::after,
.ai[data-stage="4"] .ai-co[data-at="4"]::after,
.ai[data-stage="5"] .ai-co--back::after { transform: none; transition: transform 450ms var(--ease-out-strong) calc(var(--d) + 200ms); }
.ai.is-seen[data-stage="1"] .ai-co--late[data-at="1"]::before,
.ai[data-stage="2"] .ai-co[data-at="2"]::before,
.ai[data-stage="3"] .ai-co--own[data-at="3"]::before,
.ai[data-stage="4"] .ai-co[data-at="4"]::before,
.ai[data-stage="5"] .ai-co--back::before { opacity: 1; transition: opacity 300ms ease calc(var(--d) + 500ms); }
/* the callouts that stand while their part is there, and go before the moment moves on */
.ai.is-seen[data-stage="1"] .ai-co--blip { animation: ai-co-blip 1900ms ease 1850ms both; }
.ai[data-stage="3"] .ai-co--nudge { animation: ai-co-blip 900ms ease 800ms both; }
.ai[data-stage="5"] .ai-co--hand { animation: ai-co-blip 1100ms ease 1800ms both; }
.ai[data-stage="5"] .ai-co--sum { animation: ai-co-blip 1700ms ease 3500ms both; }
:is(.ai.is-seen[data-stage="1"] .ai-co--blip, .ai[data-stage="3"] .ai-co--nudge, .ai[data-stage="5"] :is(.ai-co--hand, .ai-co--sum))::after { transform: none; }
:is(.ai.is-seen[data-stage="1"] .ai-co--blip, .ai[data-stage="3"] .ai-co--nudge, .ai[data-stage="5"] :is(.ai-co--hand, .ai-co--sum))::before { opacity: 1; }
@keyframes ai-co-blip {
  0% { opacity: 0; transform: translate(calc(var(--dir) * -10px), -50%); }
  18%, 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;
}

/* --- the five moments of the night --- */

/* the hour on the shopper's phone; whose chat is open */
.ai[data-stage="1"] .ai-clock b:nth-child(1),
.ai[data-stage="2"] .ai-clock b:nth-child(2),
.ai[data-stage="3"] .ai-clock b:nth-child(3),
.ai[data-stage="4"] .ai-clock b:nth-child(4),
.ai[data-stage="5"] .ai-clock b:nth-child(5) { opacity: 1; }
.ai:is([data-stage="1"], [data-stage="2"], [data-stage="3"]) .ai-v1,
.ai[data-stage="4"] .ai-v3,
.ai[data-stage="5"] .ai-v4 { transform: none; }

/* 1: her question goes out and is read; the bot types, asks one question word by word; her answer;
   it types again and the three plants come, and the chat scrolls up to them */
.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(--leaf); }
.ai.is-seen[data-stage="1"] .ai-out1 .ai-ticks { transition-delay: 800ms; }
.ai.is-seen[data-stage="1"] .ai-in1 .ai-dots { animation: ai-wait 850ms linear 900ms both; }
.ai.is-seen[data-stage="1"] .ai-v1 .ai-sub > span:first-child { animation: ai-unwait 850ms linear 900ms both, ai-unwait 650ms linear 3150ms both; }
.ai.is-seen[data-stage="1"] .ai-v1 .ai-sub > span + span { animation: ai-wait 850ms linear 900ms both, ai-wait 650ms linear 3150ms both; }
.ai.is-seen[data-stage="1"] .ai-in1 .ai-m { transition-delay: 1750ms; }
.ai.is-seen[data-stage="1"] .ai-w { transition-delay: calc(1800ms + var(--i, 0) * 60ms); }
.ai.is-seen[data-stage="1"] .ai-out2 { transition-delay: 2650ms; }
.ai.is-seen .ai-out2 .ai-ticks,
.ai:not([data-stage="1"]) .ai-out2 .ai-ticks { stroke: var(--leaf); }
.ai.is-seen[data-stage="1"] .ai-out2 .ai-ticks { transition-delay: 3050ms; }
.ai.is-seen[data-stage="1"] .ai-in2 .ai-dots { animation: ai-wait 650ms linear 3150ms both; }
.ai.is-seen[data-stage="1"] .ai-in2 .ai-m { transition-delay: 3800ms; }
.ai.is-seen[data-stage="1"] .ai-prods { transition-delay: 4200ms; }
.ai.is-seen[data-stage="1"] .ai-v1 .ai-list,
.ai:not([data-stage="1"]) .ai-v1 .ai-list { transform: translateY(var(--y1, 0px)); }
.ai.is-seen[data-stage="1"] .ai-v1 .ai-list { transition: transform 900ms var(--ease-io) 3750ms; }

/* 2: her finger adds the calathea; the bag counts it, and the bot answers under the cards */
.ai:not([data-stage="1"]) .ai-v1 .ai-list { transform: translateY(var(--y2, 0px)); }
.ai[data-stage="2"] .ai-v1 .ai-list { transition-delay: 150ms; }
.ai:not([data-stage="1"]) .ai-add--pick { background: var(--leaf-lo); color: var(--leaf-hi); }
.ai:not([data-stage="1"]) .ai-add--pick > span:first-child { opacity: 0; }
.ai:not([data-stage="1"]) .ai-add--pick > span + span { opacity: 1; }
.ai[data-stage="2"] :is(.ai-add--pick, .ai-add--pick > span) { transition-delay: 1250ms; }
.ai:is([data-stage="2"], [data-stage="3"]) .ai-bag__n { transform: none; }
.ai[data-stage="2"] .ai-bag__n { transition-delay: 1450ms; animation: ai-pop 450ms var(--ease-out-strong) 1450ms both; }
@keyframes ai-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: none; } }
.ai[data-stage="2"] .ai-in3 { transition-delay: 1850ms; }

/* 3: in the cart the chat steps down and the bubble rises over its button; her finger opens it,
   the chat comes back with the fertiliser and she adds it; the bag counts 2; her phone steps back
   and the owner's rises, locked, with the purchase in Telegram */
.ai[data-stage="3"] .ai-cartpg { opacity: 1; }
.ai[data-stage="3"] .ai-v1 { animation: ai-sheet 2100ms var(--ease-io) both; }
@keyframes ai-sheet { 0% { transform: none; } 21%, 74% { transform: translateY(105%); } 95%, 100% { transform: none; } }
.ai[data-stage="3"] .ai-nudge { animation: ai-nudge 1100ms var(--ease-drawer) 650ms both; }
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .ai-v1 .ai-list { transform: translateY(var(--y3, 0px)); }
.ai[data-stage="3"] .ai-v1 .ai-list { transition-delay: 800ms; }
.ai[data-stage="3"] .ai-in4 { transition-delay: 2150ms; }
.ai[data-stage="3"] .ai-sugg { transition-delay: 2400ms; }
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .ai-add--feed { background: var(--leaf-lo); color: var(--leaf-hi); }
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .ai-add--feed > span:first-child { opacity: 0; }
.ai:is([data-stage="3"], [data-stage="4"], [data-stage="5"]) .ai-add--feed > span + span { opacity: 1; }
.ai[data-stage="3"] :is(.ai-add--feed, .ai-add--feed > span) { transition-delay: 3050ms; }
.ai[data-stage="3"] .ai-bag__n .ai-roll i { transform: translateY(-100%); transition-delay: 3150ms; }
.ai[data-stage="3"] .ai-ph { transform: scale(0.62); opacity: 0.3; transition-delay: 3600ms; }
.ai[data-stage="3"] .ai-own { opacity: 1; transform: none; transition-delay: 3700ms; animation: lp-buzz 420ms linear 4500ms 2; }
.ai[data-stage="3"] .ai-note { opacity: 1; transform: none; transition-delay: 4300ms; }

/* 4: the morning: Yossi asks for his order, gives its mail, and its card comes, checked */
.ai[data-stage="4"] .ai-o1 { transition-delay: 300ms; }
.ai[data-stage="4"] .ai-v3 .ai-o1 .ai-ticks,
.ai[data-stage="4"] .ai-v3 .ai-o2 .ai-ticks { stroke: var(--leaf); }
.ai[data-stage="4"] .ai-v3 .ai-r1 .ai-dots { animation: ai-wait 700ms linear 800ms both; }
.ai[data-stage="4"] .ai-v3 .ai-sub > span:first-child { animation: ai-unwait 700ms linear 800ms both, ai-unwait 700ms linear 2500ms both; }
.ai[data-stage="4"] .ai-v3 .ai-sub > span + span { animation: ai-wait 700ms linear 800ms both, ai-wait 700ms linear 2500ms both; }
.ai[data-stage="4"] .ai-v3 .ai-r1 .ai-m { transition-delay: 1550ms; }
.ai[data-stage="4"] .ai-v3 .ai-o2 { transition-delay: 2200ms; }
.ai:is([data-stage="4"], [data-stage="5"]) .ai-v3 .ai-list { transform: translateY(var(--y4, 0px)); }
.ai[data-stage="4"] .ai-v3 .ai-list { transition-delay: 2900ms; }
.ai[data-stage="4"] .ai-order { transition-delay: 3200ms; }

/* 5: Dana's pot: the bot hands her over and waits; her phone steps back and the owner's opens the
   talk with its summary and answers; then her phone comes forward with the answer in her chat */
.ai[data-stage="5"] .ai-v4 .ai-o1 { transition-delay: 300ms; }
.ai[data-stage="5"] .ai-v4 .ai-o1 .ai-ticks { stroke: var(--leaf); }
.ai[data-stage="5"] .ai-v4 .ai-r1 .ai-dots { animation: ai-wait 800ms linear 800ms both; }
.ai[data-stage="5"] .ai-v4 .ai-sub > span:first-child { animation: ai-unwait 800ms linear 800ms both; }
.ai[data-stage="5"] .ai-v4 .ai-sub > span + span { animation: ai-wait 800ms linear 800ms both; }
.ai[data-stage="5"] .ai-v4 .ai-r1 .ai-m { transition-delay: 1650ms; }
.ai[data-stage="5"] .ai-sys { transition-delay: 2300ms; }
.ai[data-stage="5"] .ai-sys > span:first-child { opacity: 0; transition-delay: 5600ms; }
.ai[data-stage="5"] .ai-sys > span + span { opacity: 1; transition-delay: 5600ms; }
.ai[data-stage="5"] .ai-v4 .ai-list { transform: translateY(var(--y5, 0px)); transition-delay: 5700ms; }
.ai[data-stage="5"] .ai-r2 { transition-delay: 5900ms; }
.ai[data-stage="5"] .ai-ph { animation: ai-ph5 6000ms var(--ease-io) both; }
@keyframes ai-ph5 { 0%, 48% { transform: none; opacity: 1; } 56%, 86% { transform: scale(0.62); opacity: 0.3; } 94%, 100% { transform: none; opacity: 1; } }
.ai[data-stage="5"] .ai-own { animation: ai-own5 6000ms var(--ease-drawer) both; }
@keyframes ai-own5 { 0%, 50% { opacity: 0; transform: translateY(18cqw) scale(0.94); } 58%, 85% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(18cqw) scale(0.94); } }
.ai[data-stage="5"] .ai-tg { opacity: 1; }
.ai[data-stage="5"] :is(.ai-tg__card, .ai-tg__me) { opacity: 1; transform: none; transition: opacity 300ms ease, transform 450ms var(--ease-out-strong); }
.ai[data-stage="5"] .ai-tg__card { transition-delay: 3600ms; }
.ai[data-stage="5"] .ai-tg__me { transition-delay: 4400ms; }

/* 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-own, .ai-ph, .ai-v, .ai-nudge, .ai-bag__n) { 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); }
/* a price set in a quote (the chatbot) */
.sv-price__q { margin: 12px 0 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 300; line-height: 1.2; color: var(--cyan-hi); text-wrap: balance; }

.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 chatbot's call, and the automations' line under it */
.sv-end__demo { display: grid; justify-items: start; gap: 14px; margin: clamp(18px, 3vh, 28px) 0 clamp(20px, 3.4vh, 32px); }
.sv-end__alt { margin: 0; color: var(--text-mid); }
.sv-end__alt .text-link { color: var(--cyan-hi); }

/* --- 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));
  /* it changes at every move of the page: on a layer of its own, so that only the rail is drawn
     again (or, as a scale, nothing at all), not the whole column of steps (2026-10-22) */
  will-change: transform;
}
.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; --sw: min(100%, 420px, calc(36vh / 0.86)); }
  .ai-rig { animation: none; }
  /* 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-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::after { 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::after { 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) { 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; }
}