/* PiP promo 4 · Product tour (16:9). Clean, light, real screens. */
:root {
  --page: #ebe7de; --accent: #4f8a6a; --ui-bg: rgba(20, 32, 46, .82);
  --navy: #14202e; --soft: #6b7782; --line: #e3ddd0; --sage: #4f8a6a; --sage-l: #9dc395; --teal: #3698b9;
  --font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
.stage { background: #f6f3ec; font-family: var(--font); color: var(--navy); }
.bg {
  background:
    radial-gradient(50% 60% at 85% 10%, rgba(157, 195, 149, .22), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(54, 152, 185, .12), transparent 70%),
    linear-gradient(rgba(20, 32, 46, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(20, 32, 46, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    #f6f3ec;
}

/* Intro */
.intro-logo { position: absolute; left: 860px; top: 250px; width: 200px; height: 200px; }
.intro-h { position: absolute; left: 0; right: 0; top: 500px; text-align: center; font-size: 104px; font-weight: 800; letter-spacing: -.04em; }
.intro-sub { position: absolute; left: 0; right: 0; top: 650px; text-align: center; font-size: 36px; font-weight: 500; color: var(--soft); }

/* Rail */
.rail { position: absolute; left: 110px; top: 110px; width: 470px; height: 860px; }
.rail-logo { width: 84px; height: 84px; }
.chapters { list-style: none; margin-top: 56px; display: flex; flex-direction: column; gap: 14px; }
.chap { display: flex; align-items: baseline; gap: 18px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: rgba(20, 32, 46, .22); }
.chap span { font-size: 20px; font-weight: 700; letter-spacing: .1em; color: inherit; }
.chap.on { color: var(--navy); }
.chap.on span { color: var(--sage); }
.caps { position: absolute; left: 0; top: 400px; width: 470px; height: 340px; }
.cap { position: absolute; inset: 0; opacity: 0; }
.cap small { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(79, 138, 106, .12); color: var(--sage); font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cap p { margin-top: 24px; font-size: 44px; line-height: 1.18; font-weight: 600; letter-spacing: -.025em; }
.cap b { font-weight: 800; color: var(--sage); }
.rail-progress { position: absolute; left: 0; bottom: 0; width: 470px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.rail-progress i { display: block; height: 100%; background: var(--sage); transform-origin: 0 50%; }

/* Browser window */
.window {
  position: absolute; left: 650px; top: 110px; width: 1180px; height: 860px;
  border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: 0 50px 100px -40px rgba(20, 32, 46, .45), 0 0 0 1px rgba(20, 32, 46, .08);
}
.chrome { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 22px; background: #f1eee7; border-bottom: 1px solid var(--line); }
.chrome > i { width: 14px; height: 14px; border-radius: 50%; background: #d9d3c6; }
.chrome > i:first-child { background: #ef8b6b; }
.chrome > i:nth-child(2) { background: #f2c66d; }
.chrome > i:nth-child(3) { background: #9dc395; }
.addr { margin-left: 24px; flex: 1; max-width: 520px; height: 36px; border-radius: 10px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 600 16px "Inter", sans-serif; color: var(--soft); }
.addr img { width: 22px; height: 22px; }
.view { position: relative; width: 1180px; height: 804px; overflow: hidden; background: linear-gradient(180deg, #d6e8f0, #eaf2f4); }
.shots { position: absolute; inset: 0; }
.cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; --z: 1; opacity: 0; }
.shot { position: absolute; left: 0; top: 0; }
.ring {
  position: absolute; left: calc(var(--rx, 0) * 1px); top: calc(var(--ry, 0) * 1px);
  width: calc(var(--rw, 0) * 1px); height: calc(var(--rh, 0) * 1px); border-radius: calc(18px / var(--z));
  border: calc(5px / var(--z)) solid var(--sage-l);
  box-shadow: 0 0 0 calc(10px / var(--z)) rgba(157, 195, 149, .28);
  opacity: 0;
}
.toast {
  position: absolute; left: calc(var(--tx, 0) * 1px); top: calc(var(--ty, 0) * 1px); white-space: nowrap; opacity: 0;
  padding: 10px 18px; border-radius: 999px; background: #2f9e6b; color: #fff; font: 700 20px "Inter", sans-serif;
  box-shadow: 0 10px 20px -8px rgba(47, 158, 107, .6); transform-origin: 0 50%;
}
.cursor { position: absolute; left: 0; top: 0; width: 44px; height: 44px; transform-origin: 0 0; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.cursor path { fill: var(--navy); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.click { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--sage-l); opacity: 0; }

/* End */
.end-logo { position: absolute; left: 870px; top: 170px; width: 180px; height: 180px; }
.end-h { position: absolute; left: 260px; right: 260px; top: 400px; text-align: center; font-size: 84px; font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.end-h .hl { color: var(--sage); }
.cta {
  position: absolute; left: 640px; top: 720px; width: 640px; height: 104px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none;
  font-size: 36px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 24px 40px -20px rgba(20, 32, 46, .7);
}
.end-url { position: absolute; left: 0; right: 0; top: 862px; text-align: center; font-size: 26px; font-weight: 600; color: var(--soft); }