/* ==========================================================================
   My Wix Designer - moving illustrations (see js/motion.js)
   The studio look: light artboards on a design canvas, built from website
   screens - browser frames, layers, review pins, selection boxes. Every
   figure is drawn on a grid 440 units wide (--u) and scales with its column,
   so it reads the same on a phone and a laptop. With motion turned off each
   figure shows its finished picture.
   ========================================================================== */
/* --u is registered as a length so it's worked out once, on the figure, and passed down as
   pixels. Otherwise "100cqw" would be re-read inside any inner container (like the device
   screens in the Headless figure) and shrink to that container's width. */
@property --u { syntax: "<length>"; inherits: true; initial-value: .8px; }
.mo { margin: 0; width: 100%; }
.mo__box { width: 100%; max-width: var(--mo-max, 560px); margin-inline: auto; container-type: inline-size; }
.mo figcaption { max-width: var(--mo-max, 560px); margin: 12px auto 0; font-size: var(--t-small); line-height: 1.45; color: var(--ink-64); text-align: center; text-wrap: balance; }
.section--dark .mo figcaption, .cta .mo figcaption { color: var(--paper-48); }

.vig {
  --u: .8px;
  --i: #0f1512; --i2: rgba(15, 21, 18, .64); --i3: rgba(15, 21, 18, .45); --i4: rgba(15, 21, 18, .14);
  --ln: rgba(15, 21, 18, .1); --ln2: rgba(15, 21, 18, .18);
  --m: #82f485; --md: #2f9e4c; --gd: #94650f; --sd: #2b67a3; --ld: #6b43b0; --cd: #b4472a;
  --g: #f2c879; --s: #9cc9f5; --l: #c7a4f2; --c: #f59e82;
  --sel: #2b67a3; --mo-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; width: 100%; aspect-ratio: var(--ar, 440 / 400); overflow: hidden; border-radius: 8px;
  background: #fbfbf9; border: 1px solid var(--ln); color: var(--i); font-family: var(--f-text); line-height: 1.3; text-align: left; letter-spacing: 0; word-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 40px 80px -50px rgba(15, 21, 18, .5);
}
@supports (width: 1cqw) { .vig { --u: calc(100cqw / 440); } }
.vig::before {   /* the design canvas: a faint dot grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15, 21, 18, .11) 1px, transparent 1.25px);
  background-size: calc(var(--u) * 14) calc(var(--u) * 14); background-position: calc(var(--u) * 7) calc(var(--u) * 7);
}
.vig * { box-sizing: border-box; }
.vig p, .vig b, .vig small, .vig h4 { margin: 0; }
.vig i, .vig em { font-style: normal; }
.vig__in { position: absolute; inset: 0; transition: opacity .4s var(--mo-ease); }
.vig.snap, .vig.snap * { transition: none !important; }
.vig.fade .vig__in { opacity: 0; }
.vig .at { position: absolute; left: calc(var(--u) * var(--x, 0)); top: calc(var(--u) * var(--y, 0)); }
.vig .sz { width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); }
.vig svg.net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* artboard name, like a frame label on a design canvas */
.ab { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: max(10px, calc(var(--u) * 11)); font-weight: 500; color: var(--i3); white-space: nowrap; }
.ab::before { content: ""; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border: 1.5px solid currentColor; border-radius: 2px; }
.ab b { font-weight: 600; color: var(--i2); }
.st { height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 9); display: inline-flex; align-items: center; gap: calc(var(--u) * 6); border-radius: calc(var(--u) * 4);
  font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; white-space: nowrap; background: #fff; border: 1px solid var(--ln2); color: var(--i2); transition: background .4s, border-color .4s, color .4s; }
.st i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--c); }
.sum { width: calc(var(--u) * var(--w, 130)); display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: calc(var(--u) * 2); }
.sum b { font: 500 calc(var(--u) * 30) / 1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sum span { font-size: max(10px, calc(var(--u) * 11)); color: var(--i2); }
.swap-b { display: none; }

/* a browser window */
.br { width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); border-radius: calc(var(--u) * 6); background: #fff; overflow: hidden;
  border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(15, 21, 18, .14); transition: box-shadow .6s; }
.br__bar { position: relative; height: calc(var(--u) * 20); display: flex; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 8); background: #f1f2ee; border-bottom: 1px solid var(--ln); }
.br__bar > i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--i4); }
.br__url { margin-left: calc(var(--u) * 8); width: 52%; height: calc(var(--u) * 12); border-radius: calc(var(--u) * 3); background: #fff; display: flex; align-items: center; gap: calc(var(--u) * 3);
  padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 7.5); color: var(--i3); white-space: nowrap; overflow: hidden; }
.br__url .lock { width: 0; height: calc(var(--u) * 7); color: var(--md); transition: width .3s; flex: none; }
.br__live { margin-left: auto; height: calc(var(--u) * 12); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: var(--m); font-size: calc(var(--u) * 7.5); font-weight: 700; line-height: calc(var(--u) * 12); color: var(--i);
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s var(--mo-ease); }
.br__vp { position: absolute; left: 0; right: 0; top: calc(var(--u) * 20); bottom: 0; overflow: hidden; }

/* the dated Phase 1 site (shapes only, so nothing on it ever collides with a label) */
.old { position: absolute; inset: 0; background: #ecebe4; }
.old > * { position: absolute; }
.old__nav { left: 0; right: 0; top: 0; height: calc(var(--u) * 26); background: #c6d0d8; }
.old__logo { left: calc(var(--u) * 12); top: calc(var(--u) * 9); width: calc(var(--u) * 92); height: calc(var(--u) * 8); background: #5b4a8a; border-radius: 1px; transform: skewX(-14deg) scaleX(1.25); transform-origin: left; }
.old__links { right: calc(var(--u) * 12); top: calc(var(--u) * 11); display: flex; gap: calc(var(--u) * 6); }
.old__links i { width: calc(var(--u) * 18); height: calc(var(--u) * 4); background: rgba(15, 21, 18, .28); }
.old__h { height: calc(var(--u) * 13); background: repeating-linear-gradient(90deg, #a03c8f 0 calc(var(--u) * 26), transparent calc(var(--u) * 26) calc(var(--u) * 31)); border-radius: 1px; opacity: .8; }
.old__img { background: #d3d0c4; border: 1px dashed rgba(15, 21, 18, .25); overflow: hidden; }
.old__img::before, .old__img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: 1px; background: rgba(15, 21, 18, .2); transform: translate(-50%, -50%) rotate(34deg); }
.old__img::after { transform: translate(-50%, -50%) rotate(-34deg); }
.old__txt { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.old__txt i { display: block; height: calc(var(--u) * 4); background: rgba(15, 21, 18, .2); }
.old__box { border: 1px solid rgba(15, 21, 18, .2); }
.old__btn { height: calc(var(--u) * 14); background: #3d63c9; border-radius: 1px; }
.old__foot { left: 0; right: 0; bottom: 0; height: calc(var(--u) * 22); background: #5d6670; }

/* a clean Phase 2 site */
.nw { position: absolute; inset: 0; background: #fff; }
.nw > * { position: absolute; }
.nw__nav { left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 8); height: calc(var(--u) * 12); display: flex; align-items: center; gap: calc(var(--u) * 8); }
.nw__logo { width: calc(var(--u) * 44); height: calc(var(--u) * 6); border-radius: 2px; background: var(--i); margin-right: auto; }
.nw__nav i { width: calc(var(--u) * 16); height: calc(var(--u) * 3); border-radius: 2px; background: var(--i4); }
.nw__nav b { width: calc(var(--u) * 30); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 2); background: var(--m); }
.nw__hero { border-radius: calc(var(--u) * 4); background: #121c16; overflow: hidden; }
.nw__hero > * { position: absolute; }
.nw__hero p { font: 500 calc(var(--u) * 13) / 1.08 var(--f-display); letter-spacing: -.03em; color: #f4f4f1; }
.nw__hero b { height: calc(var(--u) * 12); border-radius: calc(var(--u) * 2); background: var(--m); }
.nw__hero img { object-fit: cover; border-radius: calc(var(--u) * 3); }
.nw__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 7); }
.nw__cards span { position: relative; border-radius: calc(var(--u) * 3); border: 1px solid var(--ln); background: #fff; }
.nw__cards span::before { content: ""; position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 7); width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 2); background: var(--k, var(--m)); }
.nw__cards span::after { content: ""; position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 14); bottom: calc(var(--u) * 9); height: calc(var(--u) * 3); border-radius: 2px; background: var(--i4); box-shadow: 0 calc(var(--u) * -7) 0 var(--i4); }

/* ------------------------------------------------ 1. the review (problem) */
.pin { z-index: 4; width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin: calc(var(--u) * -10) 0 0 calc(var(--u) * -10); border-radius: 50% 50% 50% 2px; display: grid; place-items: center;
  background: var(--k); color: var(--i); border: 2px solid #fff; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(15, 21, 18, .25);
  font-size: max(9px, calc(var(--u) * 10)); font-weight: 700; transform: scale(0); transition: transform .45s var(--mo-ease), background .35s; }
.pin svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); display: none; }
.pin.on { transform: none; }
.pin.ok { background: var(--m); }
.pin.ok em { display: none; }
.pin.ok svg { display: block; }
.bub { z-index: 5; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9) 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 4);
  background: #fff; border: 1px solid var(--ln); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(15, 21, 18, .16);
  font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i); white-space: nowrap;
  opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .35s, transform .45s var(--mo-ease); }
.bub::before { content: ""; width: calc(var(--u) * 3); align-self: stretch; margin: calc(var(--u) * 5) 0; border-radius: 2px; background: var(--k); }
.bub.on { opacity: 1; transform: none; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8); width: calc(var(--u) * var(--w)); }
.pillars span { height: calc(var(--u) * 26); display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 4);
  background: #fff; border: 1px solid var(--ln2); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i2); white-space: nowrap; transition: border-color .35s, color .35s, background .35s; }
.pillars span i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 2px; background: var(--k); flex: none; transition: background .35s; }
.pillars span.ok { border-color: var(--md); color: var(--i); background: rgba(130, 244, 133, .16); }
.pillars span.ok i { background: var(--m); }
.sl { z-index: 6; width: 0; height: calc(var(--u) * var(--h)); transform: translateX(calc(var(--u) * var(--sx, 0))); opacity: 0; transition: opacity .3s; }
.sl::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--i); }
.sl b { position: absolute; left: calc(var(--u) * -13); top: 50%; margin-top: calc(var(--u) * -13); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 4); background: var(--i);
  display: grid; place-items: center; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(15, 21, 18, .3); }
.sl b svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: #fff; }
.vig.sliding .sl { opacity: 1; }
.rv .old { clip-path: inset(0 0 0 calc(var(--p, 0) * 100%)); }
.vig.fixed .pin { transform: scale(0); transition-delay: .25s; }
.vig.fixed .rv-st { background: var(--m); border-color: var(--m); color: var(--i); }
.vig.fixed .rv-st i { background: var(--i); }

/* ---------------------------------------------------- 2. layers (services) */
.pane { position: absolute; left: calc(var(--u) * 220); top: calc(var(--u) * 236); width: calc(var(--u) * 200); height: calc(var(--u) * 130);
  border-radius: calc(var(--u) * 5); border: 1.5px solid var(--kd); background: color-mix(in srgb, var(--k) 34%, rgba(255, 255, 255, .55));
  transform: translate(-50%, -50%) translate(calc(var(--u) * var(--ox, 18)), calc(var(--u) * var(--lift, 0))) rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -38deg)) translate(calc(var(--u) * var(--dx, 0)), calc(var(--u) * var(--dy, 0))) scale(var(--sc, 1));
  transition: transform 1.1s var(--mo-ease), background .6s, border-color .6s, box-shadow .6s; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(15, 21, 18, .12); }
.pane > * { position: absolute; }
.pane--web { --k: var(--l); --kd: var(--ld); z-index: 1; }
.pane--brand { --k: var(--g); --kd: var(--gd); z-index: 2; }
.pane--copy { --k: var(--s); --kd: var(--sd); z-index: 3; }
.pane--seo { --k: var(--c); --kd: var(--cd); z-index: 4; }
.pane--web { --lift: 63; --dx: -22; --dy: 10; }
.pane--brand { --lift: 7; --dx: 30; --dy: -14; }
.pane--copy { --lift: -49; --dx: -30; --dy: -10; }
.pane--seo { --lift: -105; --dx: 26; --dy: 16; }
.pane.in { --dx: 0; --dy: 0; }
.vig.flat .pane { --rx: 0deg; --rz: 0deg; --ox: 0; --lift: -14; --sc: 1.62; --dx: 0; --dy: 0; background: transparent; border-color: transparent; box-shadow: none; }
.vig.flat .pane--web { background: #fff; border-color: var(--ln2); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(15, 21, 18, .14); }
.pw__nav { left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 8); height: calc(var(--u) * 6); display: flex; gap: calc(var(--u) * 6); justify-content: flex-end; }
.pw__nav i { width: calc(var(--u) * 14); height: calc(var(--u) * 3); border-radius: 2px; background: rgba(15, 21, 18, .22); }
.pw__hero { left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 20); height: calc(var(--u) * 58); border-radius: calc(var(--u) * 3); border: 1px dashed rgba(15, 21, 18, .3); transition: background .6s, border-color .6s; }
.vig.flat .pw__hero { background: #121c16; border-color: transparent; }
.pw__cards { left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 86); height: calc(var(--u) * 34); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 5); }
.pw__cards i { border-radius: calc(var(--u) * 3); border: 1px dashed rgba(15, 21, 18, .3); transition: border-color .6s, background .6s; }
.vig.flat .pw__cards i { border: 1px solid var(--ln); background: #fff; }
.pb__logo { left: calc(var(--u) * 10); top: calc(var(--u) * 7); width: calc(var(--u) * 34); height: calc(var(--u) * 7); border-radius: 2px; background: var(--i); }
.pb__sw { left: calc(var(--u) * 140); top: calc(var(--u) * 62); display: flex; gap: calc(var(--u) * 3); }
.pb__sw i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 2px; }
.pb__aa { left: calc(var(--u) * 146); top: calc(var(--u) * 28); font: 500 calc(var(--u) * 24) / 1 var(--f-display); letter-spacing: -.04em; color: var(--i); transition: color .6s; }
.vig.flat .pb__aa { color: #f4f4f1; }
.pb__icons { left: calc(var(--u) * 16); top: calc(var(--u) * 92); display: flex; gap: calc(var(--u) * 52); }
.pb__icons i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 2px; }
.pc__h { left: calc(var(--u) * 18); top: calc(var(--u) * 28); width: calc(var(--u) * 110); font: 500 calc(var(--u) * 11) / 1.08 var(--f-display); letter-spacing: -.02em; color: var(--i); transition: color .6s; }
.vig.flat .pc__h { color: #f4f4f1; }
.pc__btn { left: calc(var(--u) * 18); top: calc(var(--u) * 60); width: calc(var(--u) * 34); height: calc(var(--u) * 9); border-radius: 2px; background: var(--m); }
.pc__lines { left: calc(var(--u) * 16); top: calc(var(--u) * 104); display: flex; gap: calc(var(--u) * 26); }
.pc__lines i { width: calc(var(--u) * 34); height: calc(var(--u) * 3); border-radius: 2px; background: rgba(15, 21, 18, .3); }
.ps__badge { right: calc(var(--u) * 10); top: calc(var(--u) * 102); height: calc(var(--u) * 13); padding: 0 calc(var(--u) * 5); display: flex; align-items: center; gap: calc(var(--u) * 3); border-radius: calc(var(--u) * 2);
  background: #fff; border: 1px solid var(--cd); font-size: calc(var(--u) * 7.5); font-weight: 700; color: var(--cd); white-space: nowrap; }
.ps__badge svg { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.ps__meta { left: calc(var(--u) * 60); top: calc(var(--u) * 9); width: calc(var(--u) * 40); height: calc(var(--u) * 4); border-radius: 2px; background: var(--cd); opacity: .5; }
.lyl { z-index: 6; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 4); background: #fff; border: 1px solid var(--ln2);
  font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; white-space: nowrap; transition: opacity .5s, transform .6s var(--mo-ease); }
.lyl i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 2px; background: var(--k); }
.vig.flat .lyl { opacity: 0; transform: translateX(calc(var(--u) * -8)); }
.ly-st .swap-b { display: none; }
.vig.aligned .ly-st .swap-a { display: none; }
.vig.aligned .ly-st .swap-b { display: inline; }
.vig.aligned .ly-st { background: var(--m); border-color: var(--m); color: var(--i); }
.vig.aligned .ly-st i { background: var(--i); }

/* ----------------------------------------------------- 3. the five steps */
.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 8); width: calc(var(--u) * var(--w)); }
.steps5 span { height: calc(var(--u) * 26); display: flex; align-items: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 4); border: 1px solid var(--ln2); background: #fff;
  font-size: max(9.5px, calc(var(--u) * 10.5)); font-weight: 600; color: var(--i); white-space: nowrap; transition: background .35s, border-color .35s, color .35s; }
.steps5 span i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 2px; background: var(--k); flex: none; display: grid; place-items: center; }
.steps5 span i svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.vig.run .steps5 span:not(.on):not(.done) { color: var(--i3); }
.vig.run .steps5 span:not(.done) i svg { opacity: 0; }
.steps5 span.on { background: var(--k); border-color: var(--k); color: var(--i); }
.steps5 span.on i { background: #fff; }
.prog { width: calc(var(--u) * var(--w)); height: calc(var(--u) * 3); border-radius: 2px; background: var(--ln); overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--g) 25%, var(--s) 50%, var(--l) 75%, var(--m)); transform-origin: left; transform: scaleX(var(--fill, 1)); transition: transform .5s var(--mo-ease); }
.bd .old { transition: opacity .45s, filter .4s; }
.bd .nw { transition: opacity .4s; }
.bd.run:not(.wire) .nw { opacity: 0; }
.bd.wire .old { opacity: 0; }
.bd.call .old, .bd.prop .old, .bd.brief .old { filter: blur(1.5px); opacity: .55; }
.bd .nw__hero, .bd .nw__cards span, .bd .nw__nav b, .bd .nw__hero b, .bd .nw__hero p, .bd .nw__hero img { transition: background .6s, border-color .6s, color .6s, opacity .6s; }
.bd.run:not(.styled) .nw__hero { background: transparent; border: 1px dashed rgba(15, 21, 18, .35); }
.bd.run:not(.styled) .nw__hero p { color: transparent; }
.bd.run:not(.styled) .nw__hero b, .bd.run:not(.styled) .nw__nav b { background: var(--i4); }
.bd.run:not(.styled) .nw__hero img { opacity: 0; }
.bd.run:not(.styled) .nw__cards span { border-style: dashed; border-color: rgba(15, 21, 18, .3); }
.bd.run:not(.styled) .nw__cards span::before { background: var(--i4); }
.dcard { z-index: 3; width: calc(var(--u) * var(--w)); padding: calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: #fff; border: 1px solid var(--ln); overflow: hidden;
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 34) rgba(15, 21, 18, .18); opacity: 0; transform: translateY(calc(var(--u) * 14)) scale(.97); transition: opacity .3s, transform .5s var(--mo-ease); }
.dcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 4); background: var(--k); }
.vig.call .dcard--call, .vig.prop .dcard--prop, .vig.brief .dcard--brief { opacity: 1; transform: none; transition-delay: .15s; }
.dcard h4 { font: 500 calc(var(--u) * 13) / 1.15 var(--f-display); letter-spacing: -.02em; }
.dcard small { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 9.5); color: var(--i2); }
.dcard .row { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 10); }
.dcard .row span { height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 7); display: flex; align-items: center; border-radius: calc(var(--u) * 3); background: #f1f2ee; font-size: calc(var(--u) * 9); font-weight: 600; white-space: nowrap; }
.dcard .ok { margin-top: calc(var(--u) * 10); height: calc(var(--u) * 20); display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 3);
  border: 1px solid var(--ln2); font-size: calc(var(--u) * 9.5); font-weight: 600; transition: background .3s, border-color .3s, transform .15s; }
.dcard .ok svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.dcard .ok.is-press { transform: scale(.94); }
.vig.accepted .dcard--call .ok, .vig.approved .dcard--prop .ok { background: var(--m); border-color: var(--m); }
.dcard .ln { display: block; height: calc(var(--u) * 4); width: var(--l); margin-top: calc(var(--u) * 7); border-radius: 2px; background: var(--i4); }
.dcard .bl { margin-top: calc(var(--u) * 7); font-size: calc(var(--u) * 9.5); color: var(--i2); white-space: nowrap; overflow: hidden; min-height: 1.3em; }
.dcard .bl b { display: inline-block; width: calc(var(--u) * 30); color: var(--i); }
.selbox { z-index: 4; position: absolute; border: 1.5px solid var(--sel); opacity: 0; transition: opacity .3s, left .6s var(--mo-ease), top .6s var(--mo-ease), width .6s var(--mo-ease), height .6s var(--mo-ease); }
.selbox i { position: absolute; width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: #fff; border: 1.5px solid var(--sel); }
.selbox i:nth-child(1) { left: calc(var(--u) * -3.5); top: calc(var(--u) * -3.5); } .selbox i:nth-child(2) { right: calc(var(--u) * -3.5); top: calc(var(--u) * -3.5); }
.selbox i:nth-child(3) { left: calc(var(--u) * -3.5); bottom: calc(var(--u) * -3.5); } .selbox i:nth-child(4) { right: calc(var(--u) * -3.5); bottom: calc(var(--u) * -3.5); }
.selbox em { position: absolute; left: 50%; top: calc(100% + var(--u) * 4); transform: translateX(-50%); height: calc(var(--u) * 13); padding: 0 calc(var(--u) * 5); border-radius: 2px; background: var(--sel); color: #fff;
  font-size: calc(var(--u) * 7.5); font-weight: 600; line-height: calc(var(--u) * 13); white-space: nowrap; }
.vig.selecting .selbox { opacity: 1; }
.toast { z-index: 5; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 4); background: var(--i); color: #fff;
  font-size: calc(var(--u) * 10); font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(calc(var(--u) * 10)); transition: opacity .3s, transform .5s var(--mo-ease); }
.toast i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: var(--m); }
.vig.live .toast { opacity: 1; transform: none; }
.vig.live .br__url .lock { width: calc(var(--u) * 7); }
.vig.live .br__live { opacity: 1; transform: none; }
.bd.live .br { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(130, 244, 133, .6), 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(15, 21, 18, .16); }
.spark { width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); }
.spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spark__k { position: absolute; left: 0; top: 0; font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i2); }
.spark__base { stroke: var(--ln2); stroke-width: 1; }
.spark__launch { stroke: var(--md); stroke-width: 1; stroke-dasharray: 2 3; }
.spark__ln { fill: none; stroke: var(--md); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark__fill { fill: rgba(130, 244, 133, .22); }
.spark__tag { position: absolute; top: 0; font-size: max(9.5px, calc(var(--u) * 10)); font-weight: 600; color: var(--md); white-space: nowrap; }

/* ------------------------------------------------------- 4. the climb */
.sbar { height: calc(var(--u) * 28); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 14); background: #fff; border: 1px solid var(--ln2);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(15, 21, 18, .06); width: calc(var(--u) * var(--w)); font-size: max(10px, calc(var(--u) * 11.5)); white-space: nowrap; overflow: hidden; }
.sbar svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; color: var(--cd); }
.sbar span::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: mo-blink .9s step-end infinite; }
.serp { width: calc(var(--u) * var(--w)); height: calc(var(--u) * 206); }
.res { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 26); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 4); transition: transform .7s var(--mo-ease), opacity .5s, background .4s, box-shadow .4s; }
.res > b { display: block; height: calc(var(--u) * 5); width: var(--tw); border-radius: 2px; background: rgba(43, 103, 163, .55); }
.res > s { display: block; height: calc(var(--u) * 3); width: 40%; border-radius: 2px; background: rgba(47, 158, 76, .45); }
.res--you { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 8); background: #fff; border: 1.5px solid var(--m); z-index: 2; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(15, 21, 18, .1); }
.res--you p { font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.1; color: var(--sd); white-space: nowrap; }
.res--you small { display: block; font-size: max(8.5px, calc(var(--u) * 8.5)); font-weight: 500; color: var(--md); }
.res--you em { margin-left: auto; font: 500 max(11px, calc(var(--u) * 13)) / 1 var(--f-display); color: var(--i); }
.vig.run:not(.shown) .res { opacity: 0; }
.vig.top .res--you { background: rgba(130, 244, 133, .16); }
.mstat { width: calc(var(--u) * var(--w)); display: flex; flex-direction: column; gap: calc(var(--u) * 4); border-top: 1px solid var(--ln2); padding-top: calc(var(--u) * 8); }
.mstat span, .bars > span { font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i2); white-space: nowrap; }
.mstat b { font: 500 calc(var(--u) * 36) / 1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.vig.top [data-pos] { color: var(--md); }
.bars { width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); display: flex; flex-direction: column; gap: calc(var(--u) * 8); border-top: 1px solid var(--ln2); padding-top: calc(var(--u) * 8); }
.bars > div { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 5); align-items: end; }
.bars i { display: block; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--s), #7fb3e6); transform-origin: bottom; transform: scaleY(var(--hh, .05)); transition: transform .7s var(--mo-ease); }

/* ---------------------------------------------------- 5. the video review */
.rec i { background: var(--c); animation: mo-rec 1.2s ease-in-out infinite; }
.vig.sent .rec { background: var(--m); border-color: var(--m); color: var(--i); }
.vig.sent .rec i { background: var(--i); animation: none; }
.vig.sent .rec .swap-a { display: none; }
.vig.sent .rec .swap-b { display: inline; }
.vsite__h { position: absolute; font: 500 calc(var(--u) * 15) / 1.1 var(--f-display); letter-spacing: -.03em; color: var(--i); }
.vsite__btn { position: absolute; height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 2); background: #3d63c9; color: #fff; font-size: calc(var(--u) * 9.5); font-weight: 600; line-height: calc(var(--u) * 18); white-space: nowrap; }
.ink { fill: none; stroke: var(--cd); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--mo-ease); }
.vig.a1 .ink--1, .vig.a2 .ink--2, .vig.a2 .ink--3 { stroke-dashoffset: 0; }
.note { z-index: 5; width: calc(var(--u) * var(--w)); padding: calc(var(--u) * 7) calc(var(--u) * 9); border-radius: calc(var(--u) * 3); background: var(--k); color: var(--i);
  font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; line-height: 1.25; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(15, 21, 18, .16);
  opacity: 0; transform: translateY(calc(var(--u) * 6)) rotate(-1.5deg); transition: opacity .35s, transform .5s var(--mo-ease); }
.vig.n1 .note--1, .vig.n2 .note--2 { opacity: 1; transform: rotate(-1.5deg); }
.cam { z-index: 6; width: calc(var(--u) * 84); height: calc(var(--u) * 84); border-radius: 50%; padding: calc(var(--u) * 4); background: #fff; box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(15, 21, 18, .28); }
.cam::before { content: ""; position: absolute; inset: calc(var(--u) * -3); border-radius: 50%; border: calc(var(--u) * 2) solid var(--c); animation: mo-ring 1.6s ease-out infinite; }
.vig.sent .cam::before { border-color: var(--m); animation: none; }
.cam img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.vbar { width: calc(var(--u) * var(--w)); }
.vbar > span { display: block; font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i2); white-space: nowrap; }
.vbar > div { margin-top: calc(var(--u) * 7); height: calc(var(--u) * 4); border-radius: 2px; background: var(--ln); overflow: hidden; }
.vbar > div i { display: block; height: 100%; background: var(--md); transform-origin: left; transform: scaleX(var(--vp, 1)); }
.vbar p { margin-top: calc(var(--u) * 5) !important; display: flex; justify-content: space-between; font-size: max(9.5px, calc(var(--u) * 10)); color: var(--i3); font-variant-numeric: tabular-nums; }

@keyframes mo-blink { 50% { opacity: 0; } }
@keyframes mo-rec { 50% { opacity: .3; } }
@keyframes mo-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .sbar span::after, .rec i, .cam::before { animation: none; }
}

/* ---------------------------------- 6. edit once, every screen (Wix Headless)
   One change made on two platforms. On the Editor or Studio the tablet and phone
   layouts need fixing by hand; on Headless one save updates every screen.
   Every device holds the same little page, laid out with container queries on the
   shape of its screen, so it genuinely reflows: drag the browser narrower and watch.
   Drawn on a 960-unit grid, or 440 units when the column is narrow. */
.mo--scr { --mo-max: 1180px; }
.mo--scr .mo__box { max-width: var(--mo-max); }
.vig.scr { --g: 960; --ar: 960 / 426; --u: 1.2px; --tc: #f39200; --tn: #12314a; }
@supports (width: 1cqw) { .vig.scr { --u: calc(100cqw / 960); } }
.scr .sr-only { position: absolute; }

/* where everything sits: wide */
.scr__top { position: absolute; z-index: 6; left: calc(var(--u) * 24); top: calc(var(--u) * 18); display: flex; align-items: center; gap: calc(var(--u) * 8); }
.scr__st { position: absolute; z-index: 6; right: calc(var(--u) * 24); top: calc(var(--u) * 24); }
.scr__card { --x: 24; --y: 86; --w: 240; --h: 270; }
.dv--desk { --x: 288; --y: 86; --w: 380; --h: 270; }
.dv--tab  { --x: 686; --y: 156; --w: 146; --h: 200; }
.dv--ph   { --x: 850; --y: 180; --w: 86;  --h: 176; }
.scr__card, .dv { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); }
.dv--desk { width: calc(var(--u) * min(var(--dw, var(--w)), var(--w))); }

/* narrow columns: stacked */
@container (max-width: 699px) {
  .vig.scr { --g: 440; --ar: 440 / 790; --u: calc(100cqw / 440); }
  .scr__top { left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 12); }
  .scr__tabs { flex: 1; }
  .scr__tab { flex: 1; justify-content: center; }
  .scr__st { left: calc(var(--u) * 12); right: auto; top: calc(var(--u) * 58); }
  .scr__card { --x: 12; --y: 92; --w: 416; --h: 150; }
  .dv--desk { --x: 12; --y: 258; --w: 416; --h: 236; }
  .dv--tab  { --x: 56; --y: 542; --w: 146; --h: 196; }
  .dv--ph   { --x: 262; --y: 560; --w: 92;  --h: 178; }
  /* QA18 finding 15: on small phones the tabs (30px minimum to tap) and the labels (18px minimum) outgrow the grid,
     so the "4 steps" pill sits at least 8px under the tabs, everything below moves down by the same amount (--sh),
     and the figure grows to keep about 10px under the "Large gap" and "Overlap" labels */
  /* --ch: at 320px the to-do list wraps to more lines than the card holds, so the card grows to 118px and the devices move down with it */
  .vig.scr { --sh: calc(max(0px, 30px - var(--u) * 30) + 2px + max(0px, 8px - var(--u) * 8)); --ch: max(0px, 118px - var(--u) * 150);
    aspect-ratio: auto; height: calc(var(--u) * 752 + var(--sh) + var(--ch) + max(13px, var(--u) * 14.3) + max(18px, var(--u) * 20) + 10px); }
  .scr__st { top: calc(var(--u) * 50 + max(0px, 30px - var(--u) * 30) + 2px + max(8px, var(--u) * 8)); }
  .scr__card, .dv { top: calc(var(--u) * var(--y) + var(--sh)); }
  .scr__card { height: calc(var(--u) * var(--h) + var(--ch)); }
  .dv { top: calc(var(--u) * var(--y) + var(--sh) + var(--ch)); }
}

/* the tabs and the pause button */
.scr__tabs { display: flex; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 7); background: #fff; border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(15, 21, 18, .08); }
.scr__tab { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: max(30px, calc(var(--u) * 30)); padding: 0 max(10px, calc(var(--u) * 12)); border: 0; border-radius: calc(var(--u) * 4); background: transparent; color: var(--i2);
  font: 600 max(11px, calc(var(--u) * 12.5)) / 1 var(--f-text); white-space: nowrap; cursor: pointer; transition: background .35s var(--mo-ease), color .35s; }
.scr__tab i { width: max(8px, calc(var(--u) * 8)); height: max(8px, calc(var(--u) * 8)); border-radius: 2px; background: var(--c); flex: none; }
.scr__tab[data-to="headless"] i { background: var(--m); }
.scr__tab[aria-pressed="true"] { background: var(--i); color: #fff; }
.scr__tab:focus-visible, .scr__pp:focus-visible, .dv__grip:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.scr__pp { flex: none; width: max(32px, calc(var(--u) * 34)); height: max(32px, calc(var(--u) * 34)); display: grid; place-items: center; border-radius: calc(var(--u) * 7); border: 1px solid var(--ln2); background: #fff; color: var(--i); cursor: pointer; }
.scr__pp svg { width: max(11px, calc(var(--u) * 11)); height: max(11px, calc(var(--u) * 11)); display: block; }
.scr__pp-g, .scr.is-paused .scr__pp-p { display: none; }
.scr.is-paused .scr__pp-g { display: block; }
.scr.no-motion .scr__pp { display: none; }
.scr__st i { transition: background .35s; }
.scr[data-mode="headless"] .scr__st i { background: var(--m); }

/* the edit card */
.scr__card { z-index: 3; border-radius: calc(var(--u) * 8); background: #fff; border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(15, 21, 18, .12); overflow: hidden; }
.ed { position: absolute; inset: 0; padding: calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 10); transition: opacity .45s var(--mo-ease), transform .55s var(--mo-ease); }
.scr[data-mode="editor"] .ed--cms, .scr[data-mode="headless"] .ed--todo { opacity: 0; transform: translateY(calc(var(--u) * 8)); visibility: hidden; }
.ed__k { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: max(10px, calc(var(--u) * 12)); font-weight: 600; color: var(--i); white-space: nowrap; }
.ed__k small { margin-left: auto; font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 500; color: var(--i3); }
.ed__w { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4); display: grid; place-items: center; background: var(--i); color: #fff; font-size: calc(var(--u) * 10); font-weight: 700; flex: none; }
.todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.todo li { display: flex; align-items: center; gap: calc(var(--u) * 9); min-height: calc(var(--u) * 34); padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 5); background: #f6f6f3; border: 1px solid var(--ln);
  font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 500; color: var(--i2); line-height: 1.25; opacity: 0; transform: translateX(calc(var(--u) * -8)); transition: opacity .4s var(--mo-ease), transform .5s var(--mo-ease), background .35s, border-color .35s, color .35s; }
.todo li.on { opacity: 1; transform: none; }
.todo li i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 4); border: 1.5px solid var(--ln2); display: grid; place-items: center; flex: none; background: #fff; transition: background .3s, border-color .3s; }
.todo li i svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: var(--i); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--mo-ease); }
.todo li.ok { color: var(--i); }
.todo li.ok i { background: var(--m); border-color: var(--md); }
.todo li.ok i svg { opacity: 1; transform: none; }
.todo li.todo--bad { background: rgba(245, 158, 130, .12); border-color: rgba(180, 71, 42, .3); }
.ed__lab { font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; color: var(--i3); }
.ed__in { position: relative; padding: calc(var(--u) * 9) calc(var(--u) * 11); border-radius: calc(var(--u) * 5); background: #f6f6f3; border: 1px solid var(--ln2); min-height: calc(var(--u) * 58);
  font-size: max(11px, calc(var(--u) * 13)); font-weight: 600; line-height: 1.3; color: var(--i); transition: border-color .3s, box-shadow .3s; }
.ed__in.is-focus { border-color: var(--sel); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(43, 103, 163, .14); }
.ed__in span.is-sel { background: rgba(43, 103, 163, .2); }
.ed__row { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.scr .ed__sum { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 10); padding-top: calc(var(--u) * 10); border-top: 1px solid var(--ln); }
.ed__sum b { font: 500 calc(var(--u) * 34) / 1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--cd); }
.ed--cms .ed__sum b { color: var(--md); }
.ed__sum span { font-size: max(10px, calc(var(--u) * 11)); line-height: 1.3; color: var(--i2); }
.ed__save { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 14); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 14); background: #116dff; color: #fff; font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 600; transition: transform .2s; }
.ed__save.is-press { transform: scale(.92); }
.ed__ok { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 4); background: var(--m); color: var(--i); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateX(calc(var(--u) * -6)); transition: opacity .35s, transform .45s var(--mo-ease); }
.ed__ok svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.scr.saved .ed__ok { opacity: 1; transform: none; }
@container (max-width: 699px) {
  .ed { padding: calc(var(--u) * 12); gap: calc(var(--u) * 7); }
  .todo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); }
  .todo li { min-height: calc(var(--u) * 42); padding: calc(var(--u) * 5) calc(var(--u) * 8); }
  .ed__in { min-height: calc(var(--u) * 40); padding: calc(var(--u) * 7) calc(var(--u) * 9); }
  .scr .ed__sum { display: none; }
}

@container (min-width: 700px) and (max-width: 899px) { .scr .ed__sum { display: none; } .todo li { padding: calc(var(--u) * 5) calc(var(--u) * 8); } }

/* the devices */
.dv { z-index: 2; }
.dv__frame { position: absolute; inset: 0; transition: box-shadow .6s var(--mo-ease); }
.dv__scr { position: absolute; overflow: hidden; container: dv / size; background: #f3f1ec; }
.dv--desk .dv__frame { border-radius: calc(var(--u) * 6); background: #fff; overflow: hidden; border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(15, 21, 18, .16); }
.dv--desk .br__url { width: auto; flex: 1; min-width: 0; margin-right: calc(var(--u) * 4); }
.dv--desk .br__url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv__url-e, .scr[data-mode="editor"] .dv__url-h { display: none; }
.scr[data-mode="editor"] .dv__url-e { display: block; color: var(--sel); font-weight: 600; }
.dv--desk .dv__scr { left: 0; right: 0; top: calc(var(--u) * 20); bottom: 0; }
.dv--tab .dv__frame, .dv--ph .dv__frame { background: #1c211e; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) rgba(15, 21, 18, .22), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dv--tab .dv__frame { border-radius: calc(var(--u) * 13); }
.dv--tab .dv__scr { inset: calc(var(--u) * 7); border-radius: calc(var(--u) * 5); }
.dv--ph .dv__frame { border-radius: calc(var(--u) * 15); }
.dv--ph .dv__scr { inset: calc(var(--u) * 5); border-radius: calc(var(--u) * 10); }
.dv--ph .dv__frame::after { content: ""; position: absolute; z-index: 3; left: 50%; top: calc(var(--u) * 8); width: calc(var(--u) * 24); height: calc(var(--u) * 6); margin-left: calc(var(--u) * -12); border-radius: 99px; background: #1c211e; }
.dv.is-upd .dv__frame { box-shadow: 0 0 0 calc(var(--u) * 3) var(--m), 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(47, 158, 76, .3); }
.dv.is-fix .dv__frame { box-shadow: 0 0 0 calc(var(--u) * 3) var(--g), 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(148, 101, 15, .25); }

/* device labels */
.dv__lab { position: absolute; left: 50%; top: calc(100% + var(--u) * 10); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); white-space: nowrap; }
.dv--desk .dv__lab { flex-direction: row; gap: calc(var(--u) * 8); }
.dv__n { font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i3); }
.dv__c { height: max(18px, calc(var(--u) * 20)); padding: 0 max(7px, calc(var(--u) * 8)); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 4); border: 1px solid var(--ln2); background: #fff;
  font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; color: var(--i2); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .45s var(--mo-ease), background .3s, color .3s, border-color .3s; }
.dv__c[data-k] { opacity: 1; transform: none; }
.dv__c[data-k="bad"] { background: #fde8e0; border-color: rgba(180, 71, 42, .35); color: var(--cd); }
.dv__c[data-k="hand"] { background: #fbf0d8; border-color: rgba(148, 101, 15, .35); color: var(--gd); }
.dv__c[data-k="ok"] { background: rgba(130, 244, 133, .22); border-color: var(--md); color: var(--i); }

/* resize: a handle on the browser's right edge, and a hint in its address bar */
.dv__grip { position: absolute; z-index: 4; top: 50%; right: calc(var(--u) * -7); width: calc(var(--u) * 14); height: calc(var(--u) * 46); margin-top: calc(var(--u) * -13); display: grid; place-items: center;
  border-radius: calc(var(--u) * 7); background: var(--i); cursor: ew-resize; touch-action: none; opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .35s, transform .45s var(--mo-ease); }
.dv__grip i { width: calc(var(--u) * 2); height: calc(var(--u) * 20); border-radius: 2px; background: var(--m); box-shadow: calc(var(--u) * 4) 0 0 var(--m), calc(var(--u) * -4) 0 0 var(--m); transform: scaleX(.6); }
.dv__tip { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 12); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: var(--i); color: #fff;
  font-size: calc(var(--u) * 7.5); font-weight: 600; white-space: nowrap; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .45s var(--mo-ease); }
.dv__tip svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); color: var(--m); }
.scr.grip-on .dv__grip { opacity: 1; transform: none; pointer-events: auto; }
.scr.grip-on .dv__tip { opacity: 1; transform: none; }
.scr.is-dragging, .scr.is-dragging * { cursor: ew-resize; user-select: none; }
.dv--desk.is-narrow .br__url { visibility: hidden; }
.dv--desk.is-narrow .dv__tip-t { display: none; }
/* switching platform: the scene fades out, resets, and fades back in */
.scr__card, .dv, .scr__st { transition: opacity .3s var(--mo-ease); }
.scr.is-fading .scr__card, .scr.is-fading .dv, .scr.is-fading .scr__st { opacity: 0; }

/* ------- the little page inside each screen (Trent's homepage, simplified) -------
   Phone first, then tablet and desktop by the shape of the screen. */
.mp { position: absolute; inset: 0; background: #f3f1ec; color: #fff; font-family: var(--f-text); line-height: 1.25; letter-spacing: 0; word-spacing: 0; text-align: left; }
.mp p { margin: 0; }
.mp__hero { position: relative; padding: 0 calc(var(--u) * 6) calc(var(--u) * 10); background: var(--tn) url("../img/headless/scr-office-720.webp") center / cover; }
.mp__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 46, .55), rgba(10, 30, 46, .9)); }
.mp__hero > * { position: relative; }
.mp__nav { height: calc(var(--u) * 20); display: flex; align-items: center; gap: calc(var(--u) * 7); }
.mp__logo { height: calc(var(--u) * 7); width: auto; margin-right: auto; }
.mp__links, .mp__cta { display: none; }
.mp__links { gap: calc(var(--u) * 7); font-size: calc(var(--u) * 5.6); color: rgba(255, 255, 255, .86); }
.mp__links i { font-style: normal; }
.mp__cta { align-items: center; height: calc(var(--u) * 11); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 6); background: var(--tc); color: var(--tn); font-size: calc(var(--u) * 5.2); font-weight: 700; white-space: nowrap; }
.mp__bgr { width: calc(var(--u) * 10); height: calc(var(--u) * 7); display: flex; flex-direction: column; justify-content: space-between; }
.mp__bgr::before, .mp__bgr::after, .mp__bgr i { content: ""; display: block; height: 1.25px; background: #fff; border-radius: 1px; }
.mp__in { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding-top: calc(var(--u) * 12); }
.mp__h { position: relative; font: 500 calc(var(--u) * 10.5) / 1.08 var(--f-display); letter-spacing: -.02em; color: #fff; text-wrap: pretty; }
.mp__side { display: flex; flex-direction: column; gap: calc(var(--u) * 6); transition: margin .7s var(--mo-ease), transform .7s var(--mo-ease), outline-color .3s; outline: 1.5px dashed transparent; outline-offset: calc(var(--u) * 2); }
.mp__p { font-size: calc(var(--u) * 6); color: rgba(255, 255, 255, .84); line-height: 1.35; }
.mp__btns { display: flex; flex-direction: column; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.mp__btns b { height: calc(var(--u) * 13); padding: 0 calc(var(--u) * 7); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 7); background: var(--tc); color: var(--tn); font-size: calc(var(--u) * 5.4); font-weight: 700; white-space: nowrap; }
.mp__btns b + b { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.mp__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 5); padding: calc(var(--u) * 8) calc(var(--u) * 7); }
.mp__cards span { position: relative; height: calc(var(--u) * 34); border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 0 0 1px rgba(15, 21, 18, .06); }
.mp__cards span::before { content: ""; position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6); width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--tc); }
.mp__cards span::after { content: ""; position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 14); top: calc(var(--u) * 15); height: calc(var(--u) * 3); border-radius: 2px; background: rgba(18, 49, 74, .55); box-shadow: 0 calc(var(--u) * 7) 0 rgba(15, 21, 18, .12); }
@container dv (min-aspect-ratio: 3 / 5) {   /* tablet */
  .mp__hero { padding: 0 calc(var(--u) * 10) calc(var(--u) * 14); }
  .mp__nav { height: calc(var(--u) * 22); }
  .mp__in { padding-top: calc(var(--u) * 18); gap: calc(var(--u) * 8); }
  .mp__h { font-size: calc(var(--u) * 14); }
  .mp__p { font-size: calc(var(--u) * 6.4); max-width: 88%; }
  .mp__btns { flex-direction: row; }
  .mp__cards { grid-template-columns: 1fr 1fr; padding: calc(var(--u) * 10); }
}
@container dv (min-aspect-ratio: 1 / 1) {   /* desktop */
  .mp__hero { padding: 0 calc(var(--u) * 14) calc(var(--u) * 18); }
  .mp__nav { height: calc(var(--u) * 26); }
  .mp__links { display: flex; }
  .mp__cta { display: inline-flex; }
  .mp__bgr { display: none; }
  .mp__logo { height: calc(var(--u) * 9); }
  .mp__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: calc(var(--u) * 14); padding-top: calc(var(--u) * 50); }
  .mp__h { font-size: clamp(calc(var(--u) * 12), 5.4cqw, calc(var(--u) * 21)); }
  .mp__p { font-size: calc(var(--u) * 6.4); max-width: none; }
  .mp__cards { grid-template-columns: repeat(3, 1fr); padding: calc(var(--u) * 12) calc(var(--u) * 14); gap: calc(var(--u) * 8); }
}
@container dv (min-aspect-ratio: 1 / 1) and (max-width: 230px) { .mp__links i:nth-child(n+3) { display: none; } }

/* on the Editor: the heading selected on the desktop canvas, and what the change breaks */
.mp__h::after { content: ""; position: absolute; inset: calc(var(--u) * -3); border: 1.5px solid var(--sel); opacity: 0; transition: opacity .25s;
  background: linear-gradient(#fff, #fff) left top / calc(var(--u) * 4) calc(var(--u) * 4) no-repeat, linear-gradient(#fff, #fff) right top / calc(var(--u) * 4) calc(var(--u) * 4) no-repeat,
              linear-gradient(#fff, #fff) left bottom / calc(var(--u) * 4) calc(var(--u) * 4) no-repeat, linear-gradient(#fff, #fff) right bottom / calc(var(--u) * 4) calc(var(--u) * 4) no-repeat; }
.scr.sel-on .dv--desk .mp__h::after { opacity: 1; }
.scr .caret { display: inline-block; width: 1.5px; height: .95em; margin-left: 1px; vertical-align: -.12em; background: currentColor; animation: mo-rec 1s steps(2) infinite; }
.dv.is-gap .mp__side { margin-top: calc(var(--u) * 30); transform: translateX(calc(var(--u) * 7)); outline-color: var(--c); }
.dv.is-ovl .mp__side { margin-top: calc(var(--u) * -24); outline-color: var(--c); }

/* ------------------------------------------- 7. blog figures: shared parts */
/* what the figure is: "Sample data" for a recreated screen, "Illustration" for an idea */
.mo-tag { z-index: 8; height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 8); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 4); background: #fff; border: 1px solid var(--ln2);
  font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; color: var(--i2); white-space: nowrap; }
/* a named pointer, like a collaborator's cursor */
.ptr { position: absolute; z-index: 9; left: 0; top: 0; display: flex; align-items: flex-start; gap: calc(var(--u) * 1); pointer-events: none; opacity: 0;
  transform: translate(calc(var(--u) * var(--px, 330)), calc(var(--u) * var(--py, 250))); transition: transform .7s var(--mo-ease), opacity .3s; }
.ptr.on { opacity: 1; }
.ptr svg { width: calc(var(--u) * 13); height: calc(var(--u) * 14); flex: none; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(15, 21, 18, .3)); transition: transform .15s; }
.ptr span { margin-top: calc(var(--u) * 11); height: calc(var(--u) * 16); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: var(--m); color: var(--i);
  font-size: max(9px, calc(var(--u) * 9.5)); font-weight: 700; line-height: calc(var(--u) * 16); white-space: nowrap; }

/* ------------------------- 8. one row, five jobs (blog: the Wix Headless CMS)
   Sample data. The Pages collection in a Wix dashboard: Add Item, five fields,
   save. The new row joins the table, the page goes live in the browser, and
   five jobs tick off, each lighting up the part of the page it looks after. */
.cms { z-index: 2; border-radius: calc(var(--u) * 6); background: #fff; border: 1px solid var(--ln2); overflow: hidden; box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(15, 21, 18, .12); }
.cms__bar { height: calc(var(--u) * 28); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 10); border-bottom: 1px solid var(--ln); }
.cms__crumb { font-size: calc(var(--u) * 8.5); color: var(--i3); white-space: nowrap; }
.cms__crumb i { margin: 0 calc(var(--u) * 2); }
.cms__crumb b { font-size: calc(var(--u) * 10.5); font-weight: 600; color: var(--i); }
.cms__add, .cms__save { height: calc(var(--u) * 17); padding: 0 calc(var(--u) * 8); display: inline-flex; align-items: center; border-radius: calc(var(--u) * 9); background: #116dff; color: #fff;
  font-size: calc(var(--u) * 8); font-weight: 600; white-space: nowrap; transition: transform .2s; }
.cms__save { padding: 0 calc(var(--u) * 11); }
.cms__add.is-press, .cms__save.is-press { transform: scale(.9); }
.cms__tbl { position: absolute; left: 0; right: 0; top: calc(var(--u) * 28); bottom: 0; padding: calc(var(--u) * 3) calc(var(--u) * 10) 0; }
.cms__th, .cms__tr { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 50); align-items: center; column-gap: calc(var(--u) * 6); border-bottom: 1px solid var(--ln); white-space: nowrap; }
.cms__th { height: calc(var(--u) * 20); font-size: calc(var(--u) * 7.5); font-weight: 600; color: var(--i3); }
.cms__tr { height: calc(var(--u) * 23); font-size: calc(var(--u) * 8.5); color: var(--i); overflow: hidden; }
.cms__tr > span { overflow: hidden; text-overflow: ellipsis; }
.cms__tr em { display: inline-flex; align-items: center; height: calc(var(--u) * 13); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #eaf1ff; color: #1d4fb8; font-size: calc(var(--u) * 7); font-weight: 600; }
.cms__tr--new { height: 0; opacity: 0; border-bottom-width: 0; margin: 0 calc(var(--u) * -10); padding: 0 calc(var(--u) * 10); background: rgba(130, 244, 133, .2); font-weight: 600;
  transition: height .5s var(--mo-ease), opacity .4s .1s; }
.rowfig.saved .cms__tr--new { height: calc(var(--u) * 23); opacity: 1; border-bottom-width: 1px; }
.cms__form { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--u) * 28); bottom: 0; padding: calc(var(--u) * 7) calc(var(--u) * 10); background: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--u) * 8); row-gap: calc(var(--u) * 5); align-content: start;
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--u) * 16)); transition: opacity .18s, transform .3s var(--mo-ease), visibility 0s .3s; }
.rowfig.adding .cms__form { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .18s, transform .5s .18s var(--mo-ease), visibility 0s; }
.cms__tbl { transition: opacity .25s .2s; }
.rowfig.adding .cms__tbl { opacity: 0; transition: opacity .18s; }
.cms__fh { grid-column: 1 / -1; height: calc(var(--u) * 18); display: flex; align-items: center; justify-content: space-between; }
.cms__fh b { font-size: calc(var(--u) * 10); font-weight: 600; }
.cms__f { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.cms__f--t, .cms__f--s, .cms__f--i { grid-column: 1 / -1; }
.cms__f > span { font-size: calc(var(--u) * 7.5); line-height: 1.25; font-weight: 600; color: var(--i3); white-space: nowrap; }
.cms__f p { height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 6); display: flex; align-items: center; border-radius: calc(var(--u) * 3); border: 1px solid var(--ln2); background: #fff;
  font-size: calc(var(--u) * 8.5); color: var(--i); white-space: nowrap; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.cms__f--i p { height: calc(var(--u) * 28); align-items: flex-start; padding-top: calc(var(--u) * 4); white-space: normal; line-height: 1.3; }
.cms__f p.is-focus { border-color: var(--sel); box-shadow: 0 0 0 calc(var(--u) * 2) rgba(43, 103, 163, .16); }
.cms__sel::after { content: ""; flex: none; margin-left: auto; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border-right: 1.5px solid var(--i3); border-bottom: 1.5px solid var(--i3); transform: translateY(-30%) rotate(45deg); }

/* what the row does: five jobs on a rail */
.rowfig__rail { width: 2px; height: calc(var(--u) * 144); background: var(--ln2); }
.rowfig__rail i { display: block; height: 100%; background: var(--md); transform-origin: top; transform: scaleY(var(--rp, 1)); transition: transform .45s var(--mo-ease); }
.rjob { z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i3); white-space: nowrap; transition: color .3s; }
.rjob i { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; display: grid; place-items: center; border-radius: 50%; background: #fbfbf9; border: 1.5px solid var(--ln2); transition: background .3s, border-color .3s; }
.rjob i svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: var(--i); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--mo-ease); }
.rjob.ok { color: var(--i); }
.rjob.ok i { background: var(--m); border-color: var(--md); }
.rjob.ok i svg { opacity: 1; transform: none; }

/* the browser, and Trent's service page inside it (simplified) */
.rowfig__br { z-index: 2; width: calc(var(--u) * var(--bw, 280)); transition: width .8s var(--mo-ease), box-shadow .6s; }
.rowfig.narrow .rowfig__br { --bw: 150; }
.rowfig__br .br__url { width: auto; flex: 1; min-width: 0; margin-right: calc(var(--u) * 6); font-size: calc(var(--u) * 7); transition: box-shadow .3s, background .3s; }
.rowfig__br .br__url b { font-weight: 600; color: var(--i); }
.rowfig.show-addr .br__url { background: rgba(130, 244, 133, .28); box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--md); }
.tp__none { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: max(9px, calc(var(--u) * 9)); color: var(--i3); transition: opacity .3s; }
.tp { position: absolute; inset: 0; background: #f3f1ec; overflow: hidden; opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .5s, transform .6s var(--mo-ease); }
.rowfig.live .tp { opacity: 1; transform: none; }
.rowfig.live .tp__none { opacity: 0; }
.tp p { margin: 0; }
.tp__hero { position: relative; padding: 0 calc(var(--u) * 10) calc(var(--u) * 10); background: #12314a url("../img/headless/scr-office-720.webp") center / cover; color: #fff; transition: box-shadow .3s; }
.tp__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 46, .6), rgba(10, 30, 46, .92)); }
.tp__hero > * { position: relative; }
.rowfig.show-design .tp__hero { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--m); }
.tp__nav { height: calc(var(--u) * 20); display: flex; align-items: center; gap: calc(var(--u) * 7); }
.tp__logo { height: calc(var(--u) * 7); width: auto; margin-right: auto; }
.tp__links { display: flex; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 5.6); color: rgba(255, 255, 255, .86); white-space: nowrap; }
.tp__links i { font-style: normal; }
.tp__cta { display: inline-flex; align-items: center; height: calc(var(--u) * 10); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 5); background: #f39200; color: #12314a; font-size: calc(var(--u) * 5.2); font-weight: 700; white-space: nowrap; }
.tp__bgr { display: none; width: calc(var(--u) * 10); height: calc(var(--u) * 7); flex-direction: column; justify-content: space-between; }
.tp__bgr::before, .tp__bgr::after, .tp__bgr i { content: ""; display: block; height: 1.25px; background: #fff; border-radius: 1px; }
.tp__crumb { margin-top: calc(var(--u) * 14) !important; font-size: calc(var(--u) * 5.8); color: rgba(255, 255, 255, .78); white-space: nowrap; width: max-content; border-radius: 2px; transition: box-shadow .3s; }
.tp__crumb span { color: #f39200; font-weight: 700; }
.rowfig.show-sect .tp__crumb { box-shadow: 0 0 0 calc(var(--u) * 2) #12314a, 0 0 0 calc(var(--u) * 3.5) var(--m); }
.rowfig.show-sect .tp__links .tp__on { color: var(--m); }
.tp__h { margin-top: calc(var(--u) * 4) !important; font: 500 calc(var(--u) * 16) / 1.05 var(--f-display); letter-spacing: -.02em; }
.tp__p { margin-top: calc(var(--u) * 4) !important; max-width: 72%; font-size: calc(var(--u) * 6.4); line-height: 1.35; color: rgba(255, 255, 255, .86); }
.tp__btns { margin-top: calc(var(--u) * 7) !important; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.tp__btns b { display: inline-flex; align-items: center; height: calc(var(--u) * 11); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 6); background: #f39200; color: #12314a; font-size: calc(var(--u) * 5.2); font-weight: 700; white-space: nowrap; }
.tp__btns b + b { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.tp__body { display: grid; grid-template-columns: calc(var(--u) * 48) minmax(0, 1fr); gap: calc(var(--u) * 12); padding: calc(var(--u) * 10); }
.tp__toc i, .tp__main i { display: block; height: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); border-radius: 2px; background: rgba(15, 21, 18, .12); }
.tp__main i:nth-of-type(2) { width: 88%; } .tp__main i:nth-of-type(4) { width: 64%; } .tp__toc i:nth-child(2) { width: 70%; }
.tp__main p { font: 500 calc(var(--u) * 8.5) / 1.1 var(--f-display); letter-spacing: -.01em; color: #12314a; white-space: nowrap; }
/* the phone-width layout, while the browser is narrow */
.rowfig.phone .tp__links, .rowfig.phone .tp__cta, .rowfig.phone .tp__toc { display: none; }
.rowfig.phone .tp__bgr { display: flex; }
.rowfig.phone .tp__p { max-width: none; }
.rowfig.phone .tp__body { grid-template-columns: minmax(0, 1fr); }
.rowfig.phone .tp__main p { white-space: normal; }
.tp__schema { position: absolute; z-index: 3; right: calc(var(--u) * 8); bottom: calc(var(--u) * 8); height: calc(var(--u) * 17); padding: 0 calc(var(--u) * 7); display: inline-flex; align-items: center; gap: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 3); background: var(--i); color: #fff; font-size: max(9px, calc(var(--u) * 8.5)); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(calc(var(--u) * 4)) scale(.9); transition: opacity .3s, transform .45s var(--mo-ease); }
.tp__schema svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: var(--m); }
.rowfig.schema .tp__schema { opacity: 1; transform: none; }
/* the tally */
.rowfig__sum { width: calc(var(--u) * var(--w)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 10); text-align: right; }
.rowfig__sum div { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 2); }
.rowfig__sum b { font: 500 calc(var(--u) * 28) / 1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rowfig__sum span { font-size: max(10px, calc(var(--u) * 10.5)); color: var(--i2); white-space: nowrap; }

/* -------------------- 9. eighteen pages, one template (blog: the Wix Headless CMS)
   An illustration. Service pages grow from six to eighteen, each linked to one
   template. The template gets a new design, the change runs down every link,
   and every page picks it up at once. */
.sx__n b { display: block; font: 500 calc(var(--u) * 34) / 1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sx__n span { display: block; margin-top: calc(var(--u) * 3); font-size: max(10px, calc(var(--u) * 11)); font-weight: 600; color: var(--i2); white-space: nowrap; }
.sx__ln { fill: none; stroke: rgba(15, 21, 18, .2); stroke-width: 1.1; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--mo-ease); }
.sx__ln.off { stroke-dashoffset: 1; }
.sx__pl { fill: none; stroke: var(--md); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .14 1.2; stroke-dashoffset: -1; opacity: 0; }
.sx.flow .sx__pl { opacity: 1; stroke-dashoffset: .16; transition: stroke-dashoffset 1s cubic-bezier(.45, 0, .55, 1), opacity .2s; }
.sx__pg { z-index: 2; width: calc(var(--u) * 38); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 4); background: #fff; border: 1px solid var(--ln2);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(15, 21, 18, .08); transition: transform .45s var(--mo-ease), opacity .35s, box-shadow .4s, border-color .4s; }
.sx__pg.off { opacity: 0; transform: scale(.6); }
.sx__pg.hit { border-color: var(--md); box-shadow: 0 0 0 calc(var(--u) * 2.5) rgba(130, 244, 133, .6); }
.sx__pg > i, .sx__tpl > i { position: absolute; display: block; border-radius: calc(var(--u) * 2); }
.sx__band { left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 3); height: calc(var(--u) * 11); background: #12314a; transition: box-shadow .4s; }
.sx__l { left: calc(var(--u) * 5); top: calc(var(--u) * 18); width: 60%; height: calc(var(--u) * 2.5); background: var(--i4); }
.sx__l--2 { top: calc(var(--u) * 23); width: 44%; }
.sx__b { left: calc(var(--u) * 5); bottom: calc(var(--u) * 4); width: calc(var(--u) * 12); height: calc(var(--u) * 4); background: var(--i4); transition: background .4s, width .4s var(--mo-ease); }
.sx__pg.new .sx__b { width: calc(var(--u) * 18); background: var(--m); }
.sx__pg.new .sx__band { box-shadow: inset 0 calc(var(--u) * -2) 0 var(--m); }
.sx__ok { right: calc(var(--u) * -5); top: calc(var(--u) * -5); width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50% !important; display: grid !important; place-items: center;
  background: var(--m); border: 1.5px solid #fff; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--mo-ease); }
.sx__ok svg { width: calc(var(--u) * 7); height: calc(var(--u) * 7); color: var(--i); }
.sx__pg.new .sx__ok { opacity: 1; transform: none; }
.sx__tpl { z-index: 2; border-radius: calc(var(--u) * 6); background: #fff; border: 1.5px solid var(--i); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(15, 21, 18, .14); transition: box-shadow .4s; }
.sx__tpl .sx__band { left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: calc(var(--u) * 6); height: calc(var(--u) * 28); }
.sx__tpl .sx__l { left: calc(var(--u) * 10); top: calc(var(--u) * 42); height: calc(var(--u) * 4); }
.sx__tpl .sx__l--2 { top: calc(var(--u) * 52); }
.sx__tpl .sx__b { left: calc(var(--u) * 10); bottom: calc(var(--u) * 10); width: calc(var(--u) * 28); height: calc(var(--u) * 9); }
.sx.changed .sx__tpl { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(130, 244, 133, .55), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(15, 21, 18, .14); }
.sx.changed .sx__tpl .sx__b { width: calc(var(--u) * 40); background: var(--m); }
.sx.changed .sx__tpl .sx__band { box-shadow: inset 0 calc(var(--u) * -4) 0 var(--m); }
.sx__st { opacity: 0; transform: translateY(calc(var(--u) * 4)); transition: opacity .3s, transform .45s var(--mo-ease); }
.sx__st i { background: var(--m); }
.sx.changed .sx__st { opacity: 1; transform: none; }
.sx__tally { width: calc(var(--u) * 392); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: calc(var(--u) * 10); border-top: 1px solid var(--ln2); }
.sx__tally b { display: block; font: 500 calc(var(--u) * 26) / 1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sx__tally span { display: block; margin-top: calc(var(--u) * 3); font-size: max(10px, calc(var(--u) * 11)); color: var(--i2); white-space: nowrap; }

/* QA 18 Oct: on the narrowest phones the review figure's title ran under the "Sent to you" chip; drop the address there */
@container (max-width: 330px) { .vd .ab__d { display: none; } }