/* ==========================================================================
   My Wix Designer - moving figures for the guides (11 Nov 2026)
   Wix vs Squarespace, website costs, Wix Headless explained, Wix vs WordPress.
   Built on the same 440-unit grid as motion.css (see the top of that file),
   and played by motion.js through the scenes in js/guides.js. Text never goes
   below 10px, so every label has room for the phone size as well.
   With motion turned off each figure shows its finished picture.
   ========================================================================== */

/* ---------------------------------------------------------- shared parts */
/* inside a post, the article's paragraph spacing mustn't reach the figures */
.prose .vig p, .prose .vig ul { margin: 0; }
/* closing chips, a row that wraps to two lines on a phone */
.gchips { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: calc(var(--u) * 8); width: calc(var(--u) * var(--w, 400)); }
.gch { z-index: 3; display: inline-flex; align-items: center; gap: calc(var(--u) * 6); max-width: 100%; min-height: calc(var(--u) * 24); padding: calc(var(--u) * 4) calc(var(--u) * 11) calc(var(--u) * 4) calc(var(--u) * 9);
  border-radius: calc(var(--u) * 13); background: #fff; border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(15, 21, 18, .08);
  font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.2; color: var(--i);
  opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.96); transition: opacity .35s, transform .5s var(--mo-ease); }
.gch::before { content: ""; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--k, var(--m)); flex: none; }
.gch.on { opacity: 1; transform: none; }
/* a small label inside a screen */
.gtag { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: calc(var(--u) * 3);
  font-size: max(9px, calc(var(--u) * 9)); font-weight: 700; line-height: 1.25; }
/* a tick in a circle */
.gtick { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; display: grid; place-items: center; border-radius: 50%; background: #fbfbf9; border: 1.5px solid var(--ln2); transition: background .3s, border-color .3s; }
.gtick svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); color: var(--i); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--mo-ease); }
.ok > .gtick, .gtick.ok { background: var(--m); border-color: var(--md); }
.ok > .gtick svg, .gtick.ok svg { opacity: 1; transform: none; }
/* a switch */
.gtg { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i2); white-space: nowrap; transition: color .3s; }
.gtg i { position: relative; width: calc(var(--u) * 26); height: calc(var(--u) * 15); flex: none; border-radius: calc(var(--u) * 8); background: var(--i4); transition: background .3s; }
.gtg i::after { content: ""; position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 21, 18, .3); transition: transform .35s var(--mo-ease); }
.gtg.on { color: var(--i); }
.gtg.on i { background: var(--md); }
.gtg.on i::after { transform: translateX(calc(var(--u) * 11)); }
.gtg.is-press i { transform: scale(.9); }

/* ------------------------------ G1 figure 1: two pricing pages, side by side
   Sample data. Wix's plans and Squarespace's, in pounds on yearly billing.
   Selling online greys out Wix Light and puts a store fee on Squarespace Basic. */
.gp__w { z-index: 2; opacity: 0; transform: translateX(calc(var(--u) * -22)); transition: opacity .5s, transform .8s var(--mo-ease); }
.gp__w--sq { transform: translateX(calc(var(--u) * 22)); }
.vig.in .gp__w { opacity: 1; transform: none; }
.gp__w .br__url { width: auto; flex: 1; min-width: 0; }
.gp__vp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 8); }
.gp__hd { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: 0 calc(var(--u) * 2) calc(var(--u) * 5); border-bottom: 1px solid var(--ln); }
.gp__hd b { font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 700; color: var(--i); }
.gp__hd small { font-size: max(9px, calc(var(--u) * 8.5)); color: var(--i3); }
.gp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--u) * 6); row-gap: calc(var(--u) * 3); padding: calc(var(--u) * 6) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 4); border: 1px solid var(--ln); background: #fff; transition: background .35s, border-color .35s, box-shadow .35s, opacity .35s; }
.gp__n { font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i); white-space: nowrap; }
.gp__p { font: 500 max(12px, calc(var(--u) * 15)) / 1 var(--f-display); letter-spacing: -.02em; color: var(--i); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp__x { grid-column: 1 / -1; min-height: max(14px, calc(var(--u) * 15)); display: flex; align-items: center; }
.gp__x .gtag { opacity: 0; transform: translateY(calc(var(--u) * 4)); transition: opacity .3s, transform .4s var(--mo-ease); }
.gp__x .gtag--fee { background: #fde4da; color: var(--cd); }
.gp__x .gtag--no { background: var(--ln); color: var(--i2); }
.gp__row.sel { border-color: var(--sel); box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--sel); }
.gp__row.dim { opacity: .45; }
.gp__row.dim .gp__p { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.gp__row.lit { background: rgba(130, 244, 133, .22); border-color: var(--md); }
.gp__row.x-on .gp__x .gtag { opacity: 1; transform: none; }
.gp__ft { margin-top: auto; display: flex; }
.gp__ft .gtag { background: rgba(156, 201, 245, .4); color: var(--sd); opacity: 0; transform: translateY(calc(var(--u) * 4)); transition: opacity .3s, transform .45s var(--mo-ease); }
.vig.trial .gp__ft .gtag { opacity: 1; transform: none; }
.gp__ctl { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 10) calc(var(--u) * 26); width: calc(var(--u) * 400); }

/* ------------------------------------- G1 figure 2: freedom or guardrails
   An illustration. On the left, blocks are dragged anywhere and a booking
   widget and a shop drop in. On the right, blocks snap into fixed sections. */
.gr__pg { z-index: 1; border-radius: calc(var(--u) * 6); background: #fff; border: 1px solid var(--ln2); overflow: hidden; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(15, 21, 18, .1); transition: box-shadow .5s; }
.gr__pg::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background-image: linear-gradient(rgba(43, 103, 163, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 103, 163, .12) 1px, transparent 1px);
  background-size: calc(var(--u) * 16) calc(var(--u) * 16); background-position: calc(var(--u) * 8) calc(var(--u) * 8); }
.vig.grid .gr__pg::before { opacity: 1; }
.vig.done .gr__pg::before { opacity: 0; }
.vig.done .gr__pg { box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(15, 21, 18, .16); }
.gr__pg > * { position: absolute; }
/* the free blocks (Wix) */
.gr__b { z-index: 2; border-radius: calc(var(--u) * 4); opacity: 0; transform: translate(calc(var(--u) * var(--dx, 0)), calc(var(--u) * var(--dy, 0))) rotate(var(--r, 0deg)) scale(1.05);
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) rgba(15, 21, 18, .22); transition: opacity .3s, transform .75s var(--mo-ease), box-shadow .5s; }
.gr__b.in { opacity: 1; transform: rotate(var(--rr, 0deg)); box-shadow: 0 0 0 transparent; }
.gr__nav { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 7); background: #121c16; }
.gr__nav i { width: calc(var(--u) * 14); height: calc(var(--u) * 3); border-radius: 2px; background: rgba(244, 244, 241, .4); }
.gr__nav i:first-child { width: calc(var(--u) * 26); height: calc(var(--u) * 5); background: var(--m); margin-right: auto; }
.gr__img { overflow: hidden; background: linear-gradient(160deg, #9cc9f5, #c7e2fa 60%, #e8f2fb); }
.gr__img::before { content: ""; position: absolute; left: 12%; bottom: -30%; width: 90%; height: 80%; border-radius: 50% 50% 0 0; background: #2f9e4c; opacity: .85; }
.gr__img::after { content: ""; position: absolute; right: 16%; top: 18%; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #f2c879; }
.gr__txt { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 6); background: #f6f6f2; }
.gr__txt i { display: block; height: calc(var(--u) * 4); border-radius: 2px; background: var(--i4); }
.gr__txt i:first-child { height: calc(var(--u) * 7); width: 80%; background: var(--i2); }
.gr__wid { display: flex; flex-direction: column; gap: calc(var(--u) * 5); padding: calc(var(--u) * 6); background: #fff; border: 1.5px solid var(--i); }
.gr__wid b { display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: max(9px, calc(var(--u) * 9.5)); font-weight: 700; line-height: 1.1; color: var(--i); }
.gr__wid b svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; }
.gr__cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 3); }
.gr__cal i { aspect-ratio: 1; border-radius: calc(var(--u) * 2); background: var(--ln); }
.gr__cal i.on { background: var(--m); }
.gr__shop { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); flex: 1; }
.gr__shop i { border-radius: calc(var(--u) * 2); background: linear-gradient(#f2c879 0 64%, var(--ln) 64%); }
.gr__shop i:nth-child(2) { background: linear-gradient(#c7a4f2 0 64%, var(--ln) 64%); }
/* the fixed sections (Squarespace) */
.gr__sec { z-index: 1; border-radius: calc(var(--u) * 4); border: 1.5px dashed rgba(43, 103, 163, .45); transition: border-color .4s; }
.vig.done .gr__sec { border-color: transparent; }
.gr__in { position: absolute; inset: calc(var(--u) * 4); border-radius: calc(var(--u) * 3); opacity: 0; transform: translate(calc(var(--u) * 16), calc(var(--u) * -12)) rotate(3deg); }
.gr__sec.in .gr__in { opacity: 1; transform: none; animation: gr-snap .55s var(--mo-ease); }
@keyframes gr-snap { 0% { opacity: 0; transform: translate(calc(var(--u) * 16), calc(var(--u) * -12)) rotate(3deg); } 60% { opacity: 1; transform: translate(calc(var(--u) * -1.5), calc(var(--u) * 1.5)) rotate(-.5deg); } 100% { transform: none; } }
.vig.snap .gr__sec.in .gr__in { animation: none; }
.gr__hero { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); }
.gr__hero .gr__img, .gr__hero .gr__txt { position: relative; border-radius: calc(var(--u) * 3); }
.gr__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 5); }
.gr__cards i { border-radius: calc(var(--u) * 3); background: #f6f6f2; border: 1px solid var(--ln); }
.gr__cards i::before { content: ""; display: block; height: 45%; border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0; background: #c7a4f2; opacity: .7; }
.gr__cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(var(--u) * 5); padding: 0 calc(var(--u) * 6); }
.gr__cta i { display: block; height: calc(var(--u) * 4); border-radius: 2px; background: var(--i4); width: 86%; }
.gr__cta i:first-child { height: calc(var(--u) * 7); width: 62%; background: var(--i2); }
.gr__cta b { width: calc(var(--u) * 46); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 7); background: var(--i); }
/* built well */
.gr__ok { z-index: 2; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); width: calc(var(--u) * 192); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i);
  opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .35s, transform .5s var(--mo-ease); }
.vig.done .gr__ok { opacity: 1; transform: none; }
.gr__chip { display: flex; justify-content: center; width: calc(var(--u) * 192); }

/* --------------------------------------- G2 figure 1: three years of Signature
   Sample data, from our own prices. The monthly plan and a one-off build on
   Wix Light, stacked year by year, with the totals counting up. */
.gy__col { z-index: 1; height: calc(var(--u) * 196); border-radius: calc(var(--u) * 5); border: 1.5px dashed var(--ln2); opacity: 0; transition: opacity .4s; }
.vig.cols .gy__col { opacity: 1; }
.gy__stack { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); bottom: calc(var(--u) * 6); display: flex; flex-direction: column-reverse; gap: calc(var(--u) * 2); }
.gy__yr { position: relative; height: calc(var(--u) * var(--h)); min-height: calc(var(--u) * 4); border-radius: calc(var(--u) * 3); background: var(--k, var(--m)); transform-origin: bottom; transform: scaleY(0); opacity: 0;
  transition: transform .7s var(--mo-ease), opacity .2s; }
.gy__yr.in { transform: none; opacity: 1; }
.gy__col--m .gy__yr { --k: #82f485; }
.gy__col--m .gy__yr:nth-child(2) { --k: #9df59f; }
.gy__col--m .gy__yr:nth-child(3) { --k: #b6f7b7; }
.gy__col--o .gy__yr { --k: #9cc9f5; }
.gy__col--o .gy__yr:nth-child(n+2) { --k: #6aa6e0; }
.gy__drop { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; justify-content: center; width: calc(100% - var(--u) * 16); transform: translate(-50%, calc(-50% - var(--u) * 26)); opacity: 0;
  transition: opacity .3s, transform .6s var(--mo-ease); }
.gy__drop span { padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: calc(var(--u) * 12); background: #fff; border: 1px solid var(--md); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(15, 21, 18, .14);
  font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; line-height: 1.2; color: var(--i); text-align: center; }
.gy__drop.on { opacity: 1; transform: translate(-50%, -50%); }
.gy__tot { z-index: 2; display: flex; justify-content: center; width: calc(var(--u) * 188); }
.gy__tot b { display: inline-flex; align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 12); border-radius: calc(var(--u) * 20); border: 1px solid transparent;
  font: 500 max(18px, calc(var(--u) * 30)) / 1.05 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--i); transition: background .4s, border-color .4s, box-shadow .4s; }
.vig.end .gy__tot b { background: #fff; border-color: var(--ln2); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(15, 21, 18, .1); }
.gy__cheap { z-index: 3; display: flex; justify-content: center; width: calc(var(--u) * 188); }
.gy__cheap span { padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: calc(var(--u) * 4); background: var(--i); color: #fff; font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 700;
  opacity: 0; transform: translateY(calc(var(--u) * -18)); transition: opacity .3s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.vig.cheap .gy__cheap span { opacity: 1; transform: none; }
.gy__lab { width: calc(var(--u) * 188); text-align: center; font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.25; color: var(--i2); opacity: 0; transition: opacity .4s; }
.vig.cols .gy__lab { opacity: 1; }

/* --------------------------------------------- G2 figure 2: the bill after launch
   An illustration. A receipt prints the build, then the running costs line
   by line, each with its price range, then the yearly total. */
.gb__slot { z-index: 3; height: calc(var(--u) * 14); border-radius: calc(var(--u) * 7); background: #121c16; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(15, 21, 18, .25); }
.gb__rc { z-index: 2; width: calc(var(--u) * 340); height: calc(var(--u) * 268); filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(15, 21, 18, .14));
  clip-path: inset(0 0 calc(100% - var(--u) * var(--show, 0)) 0); transition: clip-path .6s var(--mo-ease); }
.gb__paper { position: absolute; inset: 0; background: #fff;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--u) * 8) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--u) * 14) calc(var(--u) * 8) repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--u) * 8) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--u) * 14) calc(var(--u) * 8) repeat-x; }
.gb__rc > div:not(.gb__paper) { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); }
.gb__top { top: calc(var(--u) * 16); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); padding-bottom: calc(var(--u) * 10); border-bottom: 1.5px dashed var(--ln2); }
.gb__top b { font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; color: var(--i); }
.gb__top span { font-size: max(9px, calc(var(--u) * 9.5)); font-weight: 600; color: var(--i3); white-space: nowrap; }
.gb__ln { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); height: calc(var(--u) * 30); top: calc(var(--u) * var(--y)); opacity: 0; transform: translateY(calc(var(--u) * -6)); transition: opacity .3s, transform .45s var(--mo-ease); }
.gb__ln.in { opacity: 1; transform: none; }
.gb__ln > span { font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 600; color: var(--i); white-space: nowrap; }
.gb__ln .gtag { white-space: nowrap; font-size: max(10px, calc(var(--u) * 10)); background: var(--k); color: var(--i); opacity: 0; transform: translateX(calc(var(--u) * 10)); transition: opacity .3s, transform .45s var(--mo-ease); }
.gb__ln.tag .gtag { opacity: 1; transform: none; }
.gb__sum { top: calc(var(--u) * 222); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); padding-top: calc(var(--u) * 10); border-top: 1.5px solid var(--i); opacity: 0; transition: opacity .3s; }
.gb__sum > span { font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; color: var(--i2); }
.gb__sum b { font: 500 max(12px, calc(var(--u) * 17)) / 1.1 var(--f-display); letter-spacing: -.03em; color: var(--i); white-space: nowrap; transform: translateY(calc(var(--u) * 14)); transition: transform .6s var(--mo-ease); }
.vig.total .gb__sum { opacity: 1; }
.vig.total .gb__sum b { transform: none; }

/* -------------------------------------------- G3 figure 1: the head and the body
   An illustration. A website splits into the front, custom built, and Wix
   behind it. A change saved in the Wix dashboard shows up on the front, and
   the front can sit on another host while Wix stays put. */
.g3s__fr { z-index: 3; transform: translateY(calc(var(--u) * 96)); transition: transform .9s var(--mo-ease), box-shadow .6s; }
.vig.split .g3s__fr { transform: none; }
.vig.lift .g3s__fr { transform: translateY(calc(var(--u) * -6)); box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 40) rgba(15, 21, 18, .28); }
.g3s__fr .br__url { width: auto; flex: 1; min-width: 0; }
.g3s__hero { position: absolute; inset: calc(var(--u) * 6); border-radius: calc(var(--u) * 4); background: #121c16; overflow: hidden; }
.g3s__hero > * { position: absolute; }
.g3s__nav { left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 9); display: flex; align-items: center; gap: calc(var(--u) * 6); }
.g3s__nav i { width: calc(var(--u) * 14); height: calc(var(--u) * 3); border-radius: 2px; background: rgba(244, 244, 241, .35); }
.g3s__nav i:first-child { width: calc(var(--u) * 30); height: calc(var(--u) * 6); background: #f4f4f1; margin-right: auto; }
.g3s__h { left: calc(var(--u) * 12); top: calc(var(--u) * 24); display: flex; flex-direction: column; gap: calc(var(--u) * 5); width: 58%; }
.g3s__h i { height: calc(var(--u) * 9); border-radius: 2px; background: #f4f4f1; }
.g3s__h i:nth-child(2) { width: 70%; }
.g3s__h i:nth-child(3) { height: calc(var(--u) * 4); width: 85%; background: rgba(244, 244, 241, .35); margin-top: calc(var(--u) * 2); }
.g3s__hrs { left: calc(var(--u) * 12); bottom: calc(var(--u) * 10); padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 10); background: rgba(130, 244, 133, .16); border: 1px solid rgba(130, 244, 133, .5);
  font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; color: #e9fbe9; white-space: nowrap; transition: background .3s, box-shadow .3s; }
.g3s__hrs.flash { background: var(--m); color: var(--i); box-shadow: 0 0 0 calc(var(--u) * 4) rgba(130, 244, 133, .3); }
.g3s__img { right: calc(var(--u) * 10); top: calc(var(--u) * 26); width: 30%; bottom: calc(var(--u) * 10); border-radius: calc(var(--u) * 3); background: linear-gradient(160deg, #2f9e4c, #82f485); opacity: .8; }
.g3s__an { z-index: 2; display: flex; flex-direction: column; gap: calc(var(--u) * 4); width: calc(var(--u) * 118); opacity: 0; transform: translateX(calc(var(--u) * -8)); transition: opacity .4s, transform .6s var(--mo-ease); }
.g3s__an::before { content: ""; width: calc(var(--u) * 22); height: 2px; border-radius: 2px; background: var(--k, var(--i)); }
.g3s__an b { font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 700; line-height: 1.25; color: var(--i); }
.vig.split .g3s__an { opacity: 1; transform: none; }
.g3s__bk { z-index: 2; border-radius: calc(var(--u) * 6); background: #fff; border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(15, 21, 18, .12); overflow: hidden;
  opacity: 0; transform: translateY(calc(var(--u) * -88)); transition: opacity .5s .15s, transform .9s var(--mo-ease); }
.vig.split .g3s__bk { opacity: 1; transform: none; }
.g3s__bar { height: calc(var(--u) * 22); display: flex; align-items: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 10); background: #f1f2ee; border-bottom: 1px solid var(--ln);
  font-size: max(9px, calc(var(--u) * 9)); font-weight: 700; color: var(--i2); white-space: nowrap; }
.g3s__bar i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 2px; background: #116dff; }
.g3s__bd { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 10); }
.g3s__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 5); }
.g3s__tools span { display: flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 4); border: 1px solid var(--ln2);
  font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; color: var(--i3); white-space: nowrap; transition: background .3s, border-color .3s, color .3s; }
.g3s__tools span::before { content: ""; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--i4); flex: none; transition: background .3s; }
.g3s__tools span.on { color: var(--i); border-color: var(--md); background: rgba(130, 244, 133, .16); }
.g3s__tools span.on::before { background: var(--md); }
.g3s__fld { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.g3s__fld small { font-size: max(9px, calc(var(--u) * 8.5)); font-weight: 600; color: var(--i3); }
.g3s__fld div { display: flex; gap: calc(var(--u) * 6); }
.g3s__fld p { flex: 1; min-width: 0; height: calc(var(--u) * 24); display: flex; align-items: center; padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 4); border: 1px solid var(--ln2);
  font-size: max(10px, calc(var(--u) * 10.5)); color: var(--i); white-space: nowrap; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.g3s__fld p.is-focus { border-color: #116dff; box-shadow: 0 0 0 calc(var(--u) * 2) rgba(17, 109, 255, .18); }
.g3s__fld b { flex: none; height: calc(var(--u) * 24); display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 12); background: #116dff; color: #fff;
  font-size: max(10px, calc(var(--u) * 10)); font-weight: 600; transition: transform .15s; }
.g3s__fld b.is-press { transform: scale(.9); }
.g3s__hosts { z-index: 1; display: flex; justify-content: space-between; gap: calc(var(--u) * 8); width: calc(var(--u) * 270); }
.g3s__hosts span { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 4); border: 1.5px dashed var(--ln2); background: #fbfbf9;
  font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; color: var(--i2); white-space: nowrap; opacity: 0; transform: translateY(calc(var(--u) * 8)); transition: opacity .35s, transform .5s var(--mo-ease), border-color .3s; }
.g3s__hosts span.on { opacity: 1; transform: none; }
.g3s__sync { z-index: 1; width: 2px; height: calc(var(--u) * 46); background: repeating-linear-gradient(var(--md) 0 calc(var(--u) * 4), transparent calc(var(--u) * 4) calc(var(--u) * 8)); opacity: 0; transition: opacity .3s; }
.vig.syncing .g3s__sync { opacity: 1; animation: g3-sync .6s linear infinite; }
@keyframes g3-sync { to { background-position: 0 calc(var(--u) * -8); } }

/* ---------------------------------------------------- G3 figure 2: who does what
   Sample data. Your changes tick off in the dashboard; a new layout comes
   through us, and its price slides to about half what it was on the Editor. */
.g3w__col { z-index: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: #fff; border: 1px solid var(--ln2);
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(15, 21, 18, .1); opacity: 0; transform: translateY(calc(var(--u) * 10)); transition: opacity .45s, transform .7s var(--mo-ease); }
.vig.cols .g3w__col { opacity: 1; transform: none; }
.vig.cols .g3w__col--us { transition-delay: .12s; }
.g3w__h { display: flex; align-items: flex-start; gap: calc(var(--u) * 7); padding-bottom: calc(var(--u) * 8); border-bottom: 1px solid var(--ln); font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 700; line-height: 1.25; color: var(--i); }
.g3w__h i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin-top: calc(var(--u) * 2); flex: none; border-radius: 50%; background: var(--k, var(--m)); }
.g3w__it { display: flex; align-items: flex-start; gap: calc(var(--u) * 7); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.3; color: var(--i3); transition: color .3s; }
.g3w__it.ok { color: var(--i); }
.g3w__req { position: relative; z-index: 2; min-height: calc(var(--u) * 92); border-radius: calc(var(--u) * 5); opacity: 0; transform: translateY(calc(var(--u) * -40)) rotate(-2deg); transition: opacity .3s, transform .65s cubic-bezier(.34, 1.4, .64, 1); }
.vig.req .g3w__req { opacity: 1; transform: none; }
.g3w__card, .g3w__sec { position: absolute; inset: 0; border-radius: calc(var(--u) * 5); transition: opacity .45s, transform .55s var(--mo-ease); }
.g3w__card { display: flex; flex-direction: column; gap: calc(var(--u) * 5); padding: calc(var(--u) * 9); background: #fff8e8; border: 1px solid #e6c873; }
.g3w__card small { font-size: max(9px, calc(var(--u) * 8.5)); font-weight: 700; color: var(--gd); }
.g3w__card b { font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.3; color: var(--i); }
.g3w__sec { overflow: hidden; background: #fff; border: 1.5px solid var(--md); opacity: 0; transform: scale(.94); }
.vig.built .g3w__card { opacity: 0; transform: scale(1.04); }
.vig.built .g3w__sec { opacity: 1; transform: none; }
.g3w__sec i { position: absolute; display: block; border-radius: calc(var(--u) * 2); }
.g3w__sec .s1 { left: 0; right: 0; top: 0; height: 42%; border-radius: 0; background: #121c16; }
.g3w__sec .s2 { left: 8%; top: 13%; width: 46%; height: calc(var(--u) * 6); background: #f4f4f1; }
.g3w__sec .s3 { left: 8%; top: 27%; width: 24%; height: calc(var(--u) * 7); border-radius: calc(var(--u) * 4); background: var(--m); }
.g3w__sec .s4, .g3w__sec .s5, .g3w__sec .s6 { top: 52%; bottom: 10%; width: 26%; background: #f6f6f2; border: 1px solid var(--ln); }
.g3w__sec .s4 { left: 6%; } .g3w__sec .s5 { left: 37%; } .g3w__sec .s6 { left: 68%; }
.g3w__price { margin-top: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 5); opacity: 0; transform: translateY(calc(var(--u) * 8)); transition: opacity .35s, transform .5s var(--mo-ease); }
.vig.priced .g3w__price { opacity: 1; transform: none; }
.g3w__price p { display: grid; font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 700; color: var(--i); }
.g3w__price p > span { grid-area: 1 / 1; transition: opacity .3s; }
.g3w__price p > span:last-child { opacity: 0; color: var(--md); }
.vig.half .g3w__price p > span:first-child { opacity: 0; }
.vig.half .g3w__price p > span:last-child { opacity: 1; }
.g3w__bar { height: calc(var(--u) * 10); border-radius: calc(var(--u) * 5); background: var(--ln); overflow: hidden; }
.g3w__bar i { display: block; height: 100%; border-radius: calc(var(--u) * 5); background: var(--g); transform-origin: left; transform: scaleX(var(--pw, 1)); transition: transform 1s var(--mo-ease), background .4s; }
.vig.half .g3w__bar i { --pw: .5; background: var(--m); }

/* ------------------------------------------- G4 figure 1: the Monday morning check
   Sample data, recreated screens with generic names. WordPress counts up
   four updates to check; Wix has nothing to patch. */
.g4m__w { z-index: 2; opacity: 0; transform: translateX(calc(var(--u) * -20)); transition: opacity .5s, transform .8s var(--mo-ease); }
.g4m__w--wx { transform: translateX(calc(var(--u) * 20)); }
.vig.wp .g4m__w--wp, .vig.wx .g4m__w--wx { opacity: 1; transform: none; }
.g4m__w .br__url { width: auto; flex: 1; min-width: 0; }
.g4m__side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 28); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 9); padding-top: calc(var(--u) * 10); background: #1d2327; }
.g4m__side i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 2); background: rgba(240, 246, 252, .3); }
.g4m__side i:nth-child(2) { background: #72aee6; }
.g4m__main { position: absolute; left: calc(var(--u) * 28); right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 7); padding: calc(var(--u) * 10); }
.g4m__hd { display: flex; align-items: center; gap: calc(var(--u) * 7); padding-bottom: calc(var(--u) * 7); border-bottom: 1px solid var(--ln); font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; color: var(--i); }
.g4m__n { min-width: calc(var(--u) * 18); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 5); display: inline-grid; place-items: center; border-radius: calc(var(--u) * 9); background: #d63638; color: #fff;
  font-size: max(9px, calc(var(--u) * 9.5)); font-weight: 700; font-variant-numeric: tabular-nums; transition: transform .2s; }
.g4m__n.bump { transform: scale(1.25); }
.g4m__n.is-zero { opacity: 0; }
.g4m__it { display: flex; align-items: flex-start; gap: calc(var(--u) * 7); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.3; color: var(--i);
  opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .3s, transform .45s var(--mo-ease); }
.g4m__it.in { opacity: 1; transform: none; }
.g4m__bk { margin-top: auto; display: flex; }
.g4m__bk .gtag { background: #fcf0c9; color: var(--gd); opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .3s, transform .45s var(--mo-ease); }
.vig.backup .g4m__bk .gtag { opacity: 1; transform: none; }
.g4m__wxv { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 7); padding: calc(var(--u) * 10); }
.g4m__wxv > b { padding-bottom: calc(var(--u) * 7); border-bottom: 1px solid var(--ln); font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; color: var(--i); }
.g4m__card { height: calc(var(--u) * 34); border-radius: calc(var(--u) * 4); background: #f6f6f2; border: 1px solid var(--ln); }
.g4m__card--s { height: calc(var(--u) * 22); width: 70%; }
.g4m__safe { margin-top: auto; display: flex; }
.g4m__safe .gtag { background: rgba(130, 244, 133, .3); color: #1d6b33; opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .3s, transform .45s var(--mo-ease); }
.vig.safe .g4m__safe .gtag { opacity: 1; transform: none; }

/* ---------------------------------------------- G4 figure 2: taking your site with you
   An illustration. Three sites try to move to a new host: the Editor or
   Studio site bounces back, WordPress and Wix Headless move across. */
.g4v__lab { z-index: 2; font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; color: var(--i); opacity: 0; transition: opacity .35s; }
.vig.arrow .g4v__lab { opacity: 1; }
.g4v__arw { z-index: 1; position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 64); width: calc(var(--u) * 400); height: calc(var(--u) * 14); overflow: visible; }
.g4v__arw path { fill: none; stroke: var(--i); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset .9s var(--mo-ease); }
.vig.arrow .g4v__arw path { stroke-dashoffset: 0; }
.g4v__zone { z-index: 0; border-radius: calc(var(--u) * 8); border: 1.5px dashed var(--ln2); background: rgba(156, 201, 245, .1); }
.g4v__zone small { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 6); font-size: max(10px, calc(var(--u) * 10)); font-weight: 700; color: var(--sd); }
.g4v__card { z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * 8); width: calc(var(--u) * 150); height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); background: #fff; border: 1px solid var(--ln2);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(15, 21, 18, .12); opacity: 0; transition: opacity .4s, transform .9s var(--mo-ease); }
.g4v__card::before { content: ""; width: calc(var(--u) * 4); align-self: stretch; margin: calc(var(--u) * 10) 0; border-radius: 2px; background: var(--k); flex: none; }
.g4v__card b { font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; line-height: 1.25; color: var(--i); }
.vig.cards .g4v__card { opacity: 1; }
.g4v__card.go { transform: translateX(calc(var(--u) * 246)); }
.g4v__card.bounce { animation: g4-bounce 1.3s var(--mo-ease); }
@keyframes g4-bounce { 0% { transform: none; } 38% { transform: translateX(calc(var(--u) * 92)); } 52% { transform: translateX(calc(var(--u) * 84)) rotate(1deg); } 70% { transform: translateX(calc(var(--u) * -6)); } 84% { transform: translateX(calc(var(--u) * 3)); } 100% { transform: none; } }
.vig.snap .g4v__card.bounce { animation: none; }
.g4v__wall { z-index: 2; width: 3px; height: calc(var(--u) * 64); border-radius: 2px; background: var(--cd); opacity: 0; transition: opacity .25s; }
.vig.wall .g4v__wall { opacity: 1; }
.g4v__note { z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; line-height: 1.3; color: var(--i);
  opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .35s, transform .5s var(--mo-ease); }
.g4v__note::before { content: ""; width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; border-radius: 50%; background: var(--k); }
.g4v__note.on { opacity: 1; transform: none; }

/* --------------------------------------------------------- guide text */
/* the source line under a table */
.post__body .tnote { margin-top: .5em; font-size: .875rem; line-height: 1.5; color: var(--ink-64); }
.post__body .prose__table { margin-top: 1.2em; }
.post__body .prose__table th, .post__body .prose__table td { min-width: 6.5em; }
/* on phones each table row becomes a small card, so nothing scrolls sideways */
@media (max-width: 575px) {
  .post__body .prose__table { overflow: visible; }
  .post__body .prose__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .post__body .prose__table tr { display: block; padding: 12px 0 10px; border-top: 1px solid var(--ink-12); }
  .post__body .prose__table tbody tr:first-child { border-top: 0; padding-top: 4px; }
  .post__body .prose__table td { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 12px; min-width: 0; padding: 3px 0; border: 0; }
  .post__body .prose__table td::before { content: attr(data-label); font-weight: 600; color: var(--ink-64); }
  .post__body .prose__table td:first-child { display: block; padding-bottom: 5px; font-weight: 600; font-size: 1rem; color: var(--ink); }
  .post__body .prose__table td:first-child::before { content: none; }
}